@charset "utf-8";

/* コンテンツ全体(#container) */

#container {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}

#header {
    background-image: url(../img/bg_header.png);
    background-repeat: repeat-x;
}

#content {
    margin-top: 20px;
    /* flexコンテナをつくる　mainとasideを横並び */
    display: flex;
}

#footer {
    margin-top: 15px;
    margin-bottom: 65px;
    font-size: 12px;
}

#main {
    width: 690px;
    background-color: #fff;
}

#aside {
    width: 250px;
    background-color: #fff;
    margin-left: 20px;
}


/* ヘッダ(#header) */

#header h1 {
    /* ロゴ画像左に余白20px */
    margin-left: 20px;
    /* maginで指定すると#headerの背景画像ごと下へずれる　paddingだとロゴだけを下へずらせる */
    padding-top: 17px;
    /* ロゴ画像の高さに合わせて、高さ(height)を66pxに指定
    高さを指定しておかないと、上下に余分な隙間があいてしまう場合がある */
    height: 66px;
}

#header ul {
    margin-top: 18px;
    /* グラデーション */
    background-image: linear-gradient(#d3a865, #895e1a);
    display: flex;
}

#header li {
    /* 「・」を非表示 */
    list-style: none;
    margin-left: 22px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* メニューボタンの画像の高さに合わせて高さ(height)を32pxに指定
    このように指定しておかないと、一部のブラウザで上下に余分な隙間があいてしまう場合がある */
    height: 32px;
}


/* メインコンテンツ(#main) */

#main .kodawari h2 {
    /* 上部47px、下部50px、左19pxの余白をつける */
    padding: 47px 0 50px 19px;
    background-image: url(../img/main.jpg);
    /* 背景画像を繰り返し表示(タイリング)しない */
    background-repeat: no-repeat;
}


/* 複数セレクタ「,」 */

#main .kodawari p,
#main .ninki p {
    margin-right: 20px;
    margin-left: 20px;
    line-height: 1.5;
}


/* h2の中のimgは除外するため、「p img」と記述する */

#main .kodawari p img {
    /* 画像を右側に配置 */
    float: right;
}


/* 「floatが指定された要素の親要素」をセレクタとする */

#main .kodawari p::after {
    /* clearfix (空のcontent忘れないようにする) */
    content: "";
    display: block;
    clear: both;
}

#main .ninki h2,
#main .osusume h2 {
    background-color: #412204;
    margin-top: 1rem;
    margin-right: 20px;
    padding: 5px 0 5px 20px;
    border-radius: 0 4px 4px 0;
}

#main .ninki h3 {
    margin: 1rem 20px 0 20px;
    border-bottom: solid 1px #412204;
    /* コロンビアと下線の間の幅 */
    padding-bottom: 5px;
    background-image: url(../img/icn_bean.png);
    background-repeat: no-repeat;
    padding-left: 20px;
}


/* 3つのdlをくくったdiv */

#main .osusume div {
    /* 「上」「右」「下」「左」の順に指定） */
    margin: 10px 0 20px 20px;
    display: flex;
}

#main .osusume dl {
    width: 210px;
    margin-right: 10px;
    background-image: url(../img/bg_menu.png);
}

#main .osusume dt {
    background-color: #d2a76a;
    padding: 5px;
    background-image: url(../img/bg_bean.png);
    background-repeat: no-repeat;
    background-position: right 6px bottom -10px;
}

#main .osusume dd p {
    margin: 0.5em;
    font-size: 14px;
}


/* サイドバー(#aside)　*/

#aside h2 {
    display: none;
}

#aside li {
    list-style: none;
    margin-top: 20px;
    height: 70px;
    text-align: center;
}


/* ====================================================================================================
モバイルデバイス対応
==================================================================================================== */


/* ウィンドウ幅が480px以下になったら */

@media ( max-width:480px) {
    #container {
        /* 幅指定を解除する */
        width: auto;
    }
    #content {
        /* #mainと#asideの並べ方を横並びから縦並びにする */
        flex-direction: column;
    }
    #main {
        /* 幅指定を解除する */
        width: auto;
    }
    #main .kodawari h2 {
        /* 見出し画像の右に20pxの余白を追加「こだわりの～本格カフェ」をちょうどよい大きさで表示 */
        padding-right: 20px;
        /* 背景画像の配置を変更する */
        background-position: center top;
    }
    #main .kodawari h2 img {
        /* 見出し画像が画面幅を超えないようにする */
        max-width: 100%;
    }
    #main .kodawari p img {
        /*下部に10pxの余白を付ける */
        margin-bottom: 10px;
        /* 画像を中央に配置する */
        margin-right: auto;
        margin-left: auto;
        /* 写真とテキストが縦に並ぶようにする */
        display: block;
        /* 画像が画面幅を超えないようにする */
        max-width: 100%;
        /* floatによる回り込みをやめる */
        float: none;
    }
    #main .osusume div {
        /* 下部の余白を0にする */
        margin-bottom: 0;
        /*#main .osusume dlの並べ方を縦並びにする */
        flex-direction: column;
    }
    #main .osusume dl {
        /* #main .osusume dlの幅指定を解除する */
        width: auto;
        /* 右余白を20pxにする */
        margin-right: 20px;
        /* 写真とテキスト（dd）をセンター揃えにする */
        text-align: center;
    }
    #main .osusume dd img {
        /* 画像の上部に15pxの余白をつける */
        margin-top: 15px;
    }
    #aside {
        /* 左余白を0にする */
        margin-left: 0;
        /* 幅を100%にする（値がautoだと伸長しない） */
        width: 100%;
        /* 要素の内側下部に余白をつける */
        padding-bottom: 20px;
    }
    #aside h2 {
        /* 非表示だったh2を表示する */
        display: block;
        /* 上部に20pxの余白をつける */
        margin-top: 20px;
        /* テキストをセンター揃えにする */
        text-align: center;
    }
    #footer {
        /* フッタの中身をセンター揃えにする */
        text-align: center;
    }
}