-Mobile&Pc-L3-

-HTML-

<body>
    <div id="wrap">
        <header>
            <h1><img src="images/imo.svg" alt="imo"></h1>
            <p>秋です…さつまいもで満腹になりましょう？</p>
            <nav>
                <button class="on">
                    <i class="fa-solid fa-bars"></i>
                    <i class="fa-solid fa-xmark"></i>
                </button>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Things</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Recipe</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section>
                <h2>This month's sweet potato recipe</h2>
                <p><img src="images/pie.jpeg" alt="さつまいもパイ"></p>
                <dl>
                    <dt>さつまいもパイ</dt>
                    <dd>1)オーブンは180℃に予熱する</dd>
                    <dd>2)りんごは４等分に切って芯を取り、小さく切る。耐熱容器に入れてふんわりとラップをし、600Wのレンジで4分加熱して冷ます。</dd>
                    <dd>3)さつまいもの皮をむき、薄切りにして鍋に入れる。さつまいもが全てかぶるように水を入れて、中火で熱し、竹串が通るやわらかさになるまで10〜15分ゆで、水気を切る。</dd>
                    <dd>4)鍋にさつまいもを戻し、木べらで潰しながら弱火で2〜3分熱し、粗熱をとる。ボウルに移し、砂糖、生クリームを加えて混ぜる。</dd>
                    <dd>5)再び鍋に移し弱火で混ぜながら、トロッとするまで加熱する。火からおろして、レーズンを加えて混ぜる。（さつまいもクリーム完成）</dd>
                    <dd>6)パイシートを常温に5〜10分出して柔らかくする。まな板とパイシートに打ち粉をし、3mm厚さに伸ばす。9等分に切ってシリコンカップに敷く。</dd>
                    <dd>7)６にさつまいもクリームを等分に入れ、卵黄を塗る。180℃に予熱したオーブンで20〜30分焼く。</dd>
                </dl>
                <p>次回のレシピはスイートポテトです</p>
            </section>
            <section>
                <h2>This month's sweet potato</h2>
                <div>
                    <p><img src="images/gratin.jpeg" alt="丸ごとさつまいものグラタン"></p>
                    <div>
                        <p>丸ごとさつまいものグラタン</p>
                        <p><a href="#">レシピ→</a></p>
                    </div>
                </div>
                <div>
                    <p><img src="images/caramel.jpeg" alt="さつまいもの塩キャラメルかけ"></p>
                    <div>
                        <p>さつまいもの塩キャラメルかけ</p>
                        <p><a href="#">レシピ→</a></p>
                    </div>
                </div>
                <div>
                    <p><img src="images/Karinto.jpeg" alt="さつまいもかりんとう"></p>
                    <div>
                        <p>さつまいもかりんとう</p>
                        <p><a href="#">レシピ→</a></p>
                    </div>
                </div>
                <div>
                    <p><img src="images/paste.jpeg" alt="さつまいものペースト"></p>
                    <div>
                        <p>さつまいものペースト</p>
                        <p><a href="#">レシピ→</a></p>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <p>Copyright imo</p>
        </footer>
    </div>
</body>

-CSS-

* {
        margin: 0;
        padding: 0;
    }
    
    a {
        display: block;
        text-decoration: none;
        color: black;
    }
    span {
        font-size: 12px;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    ul {
        list-style: none;
    }
    h2 {
        margin: 10px 0 20px;
    }
    
    #wrap {
        width: calc(100% - 20px);
        padding: 0 10px;
        font-family: 'Kiwi Maru';
        font-size: 14px;
    }
    
    /*--------- header ---------*/
    header {
        height: 98vh;
        position: relative;
        background: url(images/bord.jpg) no-repeat right -110px top / cover;
        box-shadow: inset 0 0 70px 20px white;
    }
    header p {
        display: none;
    }
    header img {
        width: 226px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-90deg);
    }
    header button {
        width: 70px;
        height: 70px;
        background: #603813;
        border: none;
        position: absolute;
        top: 0;
        right: 0;
    }
    header button i {
        font-size: 3em;
        color: white;
    }
    header button i:last-of-type {
        display: none;
    }
    header nav ul {
        display: none;
    }
    header nav ul {
        width: 100%;
        height: 600px;
        background: #603813;
    }
    header nav ul li {
        position: relative;
        top: 20%;
        left: 0;
        line-height: 5;
        text-align: center;
    }
    header nav ul li:hover a {
        background: rgba(255,255,255,0.3);
        text-decoration: underline;
        color: #f9ea4f;
    }
    header nav ul li a {
        color: white;
        font-size: 20px;
    }
    
    /*--------- main ---------*/
    section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
    }
    section h2 {
        width: 100%;
        font-family: 'Cherry Bomb One';
        font-size: 32px;
    }
    section:first-of-type p:first-of-type {
        width: 30%;
        max-width: 200px;
    }
    section:first-of-type dl {
        width: calc(70% - 30px);
        margin-bottom: 27px;
        padding: 0 10px 10px 20px;
    }
    section:first-of-type dt {
        border-bottom: solid 1px red;
        font-family: 'Cherry Bomb One';
    }
    section:first-of-type dd {
        margin-top: 5px;
    }
    section:first-of-type p:last-of-type {
        width: 100%;
        margin-bottom: 30px;
        text-indent: calc(3% + 170px);
        position: relative;
    }
    section:first-of-type p:last-of-type:before {
        content: "";
        display: inline-block;
        width: 170px;
        height: 14px;
        background: url(images/yajirusi.png) no-repeat center center / 90%;
        position: absolute;
        top: 5px;
        left: 3%;
    }
    section:last-of-type > div {
        width: 50%;
        max-width: 280px;
        margin-bottom: 10px;
    }
    section:last-of-type > div > div {
        padding: 10px 0;
        text-align: center;
    }
    section:last-of-type > div > div > p:last-of-type {
        padding: 10px 15px 5px 0;
        text-align: right;
    }
    section:last-of-type > div > p:first-of-type {
        overflow: hidden;
    }
    
    /*--------- footer ---------*/
    footer {
        margin-top: 10px;
        text-align: center;
        line-height: 60px;
        background: url(images/bord.jpg) no-repeat center center / cover;
        box-shadow: inset 0 0 20px 10px #fff;
        font-size: 10px;
    }
    
    
    /*--------- MediaQuery ---------*/
    @media screen and (min-width: 601px) {
        header {
            height: 300px;
            background-position: left top;
        }
        header p {
            display: block;
            position: absolute;
            top: 50%;
            left: 36%;
            font-family: 'Potta One';
            font-size: min(3vw,26px);
        }
        header img {
            left: 20%;
        }
        header button {
            display: none;
        }
        header nav ul {
            display: flex;
            width: 80%;
            max-width: 800px;
            height: 60px;
            background: transparent;
            position: absolute;
            top: 0;
            right: 0;
        }
        header nav ul li {
            width: 25%;
            max-width: 200px;
            line-height: 60px;
            position: static;
        }
        
        section:first-of-type p:first-of-type {
            max-width: 388px;
        }
        section:first-of-type dl {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            height: 250px;
            overflow: scroll;
        }
        section:first-of-type dt {
            width: 100%;
        }
        section:first-of-type dl dd {
            width: 49%;
        }
        section:last-of-type > div  {
            box-shadow: 5px 5px 3px rgba(0,0,0,0.25);
        }   
    }
    @media screen and (min-width: 861px) {
        section {
            justify-content: space-between;
        }
    }

-Mobile&Pc-L3-

-HTML-

-CSS-

-jQuery-