@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    color: #2b2a27;
    font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
}

/* これを忘れる！何の意味がある？？？
→最大でも、親要素の100％ということ。
はみ出しを防ぐ。
maxがついていないと、いつでも100％にしてしまう */
img {
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    color: #2b2a27;
}

/*-------------------------------------------
レシピ全体
-------------------------------------------*/
.flex {
    display: flex;
    margin-bottom: 60px;
}

/*-------------------------------------------
左側画像部分
-------------------------------------------*/

.flex .image {
    /* 幅は左右で50％ずつ */
    width: 50%;
}

/*
高さは700pxで固定したまま
画面幅にあわせて画像を拡大縮小（入門④と同じ）*/
.flex .image img {
    /* 幅を収める */
    width: 100%;
    /* 高さを700に固定 */
    height: 700px;
    /* 高さを固定したまま、画面幅に合わせて画像を伸縮*/
    object-fit: cover;
    /*　画像の下にできる隙間を消す。*/
    vertical-align: bottom;
}


/*-------------------------------------------
右側・レシピ部分
-------------------------------------------*/
.flex .recipe {
    /* 幅は左右で50％ずつ */
    width: 50%;
    /* パディング40 5%（仕様書指定） 0 5% */
    padding: 40px 5% 0 5%;
}

/*-------------------------------------------
右側・レシピ部分　メニュー名
-------------------------------------------*/
.flex .recipe .page-title {
    /* フォント1.75rem */
    font-size: 1.75rem;
    /* タイトル下の余白20 */
    margin-bottom: 20px;
}

/*-------------------------------------------
右側・レシピ部分　タイトル（材料・作り方）
-------------------------------------------*/
.flex .recipe .content-title {
    /* 下線 */
    border-bottom: solid 1px #ccc;
    /* フォントサイズ　1.25rem */
    font-size: 1.25rem;
    /* 内側下の余白5px */
    padding-bottom: 5px;
    /* 外側余白　40 0 14 0 */
    margin: 40px 0 15px 0;
}

/*-------------------------------------------
右側・レシピ部分　材料
-------------------------------------------*/
.flex .recipe .ingredient-list {
    /* 横並び */
    display: flex;
    /* 折返し（複数行で表示される） */
    flex-wrap: wrap;
}

.flex .recipe .ingredient-list dt {
    /* 幅は親要素の85％ */
    width: 85%;
    /* 下線は点線で */
    border-bottom: dotted 1px #ccc;
    /* 内側余白　上下6　左右0 */
    padding: 6px 0;
}

.flex .recipe .ingredient-list dd {
    /* 幅はdtに合わせる */
    width: 15%;
    /* dtと同じ */
    border-bottom: dotted 1px #ccc;
    /* dtと同じ */
    padding: 6px 0;
    /* 右寄せ */
    text-align: right;
}

/*-------------------------------------------
右側・レシピ部分　作り方
-------------------------------------------*/
.flex .recipe .step-list li {
    /* 下線は点線で */
    border-bottom: dotted 1px #ccc;
    /* 内側余白　上下6　左右0 */
    padding: 6px 0;
    /* 外側左余白　20（.recipeで5％とっているが、olのため別扱い */
    margin-left: 20px;
}

/*-------------------------------------------
ボタン
-------------------------------------------*/
.btn {
    /* 中央寄せ */
    text-align: center;
    /* 余白80 */
    margin-bottom: 80px;
}

/*「display: inline-block;」で。
paddingでボタンのサイズを調整。*/
.btn a {
    /* aタグに幅と高さを持たせる */
    display: inline-block;
    /* 枠線 */
    border: solid 1px #2b2a27;
    /* フォント　0.875rem */
    font-size: 0.875rem;
    /* 内側余白　上下18　左右60 */
    padding: 18px 60px;
    /* aの装飾を消す */
    text-decoration: none;
}


/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
    /* フォント　0.75rem */
    font-size: 0.75rem;
    /* 内側余白　20 */
    padding: 20px;
    /* センタリング */
    text-align: center;
}

#footer .sns {
    /* 横並び */
    display: flex;
    /* flexをセンタリング */
    justify-content: center;
    /* 下余白　20 */
    margin-bottom: 20px;
}

#footer .sns li {
    /* 間隔÷2 */
    margin: 0 10px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 834px) {

    /*-------------------------------------------
    Recipe
    -------------------------------------------*/
    .flex {
        /* 縦並び */
        flex-direction: column;
    }

    .flex .image {
        /* 50%→100％へ */
        width: 100%;
    }

    .flex .image img {
        /*画像の高さを700に固定していたのを解除*/
        height: auto;
    }

    .flex .recipe {
        /* 50%→100％へ */
        width: 100%;
    }
}