-Mobile&Pc-L1-

-HTML-

<body>
    <div id="wrap">
        <header>
            <h1><img src="images/tabiho.svg" alt=""></h1>
            <nav>
                <p id="btn"><i class="fa-solid fa-bars"></i></p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Tour</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Access</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div>
                <p>朝晩を寒く感じる季節が到来！<br>そろそろ秋を満喫する準備を始めませんか？<br>様々なシーンで秋を感じてみましょう。<br>各種ツアーを取り揃えております。</p>
            </div>
            <section>
                <h2>秋を楽しむ<span>-観賞-</span></h2>
                <ul>
                    <li><img src="images/list1-1.jpg" alt=""></li>
                    <li><img src="images/list1-2.jpg" alt=""></li>
                    <li><img src="images/list1-3.jpg" alt=""></li>
                    <li><img src="images/list1-4.jpg" alt=""></li>
                </ul>
            </section>
            <section>
                <h2>秋を楽しむ<span>-体験-</span></h2>
                <ul>
                    <li><img src="images/list2-1.jpg" alt=""></li>
                    <li><img src="images/list2-2.jpg" alt=""></li>
                    <li><img src="images/list2-3.jpg" alt=""></li>
                    <li><img src="images/list2-4.jpg" alt=""></li>
                </ul>
            </section>
        </main>
        <footer>
            <div>
                <dl>
                    <dt>会社名</dt><dd> ：旅歩 tabiho</dd>
                    <dt>住所</dt><dd> ：福岡市中央区天神3-1-1</dd>
                    <dt>電話</dt><dd>： 092-123-4567</dd>
                </dl>
                <p><img src="images/tabiho.svg" alt=""></p>
            </div>
        </footer>
    </div>
</body>

-CSS-

* {
        margin: 0;
        padding: 0;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    ul {
        list-style: none;
    }
    a {
        display: block;
        text-decoration: none;
        color: rgb(0,0,0);
    }
    
    #wrap {
        font-family: 'Roboto Slab','Noto Sans JP';
    }
    
    /* header */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 105px;
        background-image: linear-gradient(-12deg, rgba(139,128,142,1) 0%, rgba(185,164,139,0.6) 100%);
    }
    header h1 {
        margin-left: 20px;
        width: 100px;
        height: 90px;
    }
    header h1 img {
        object-fit: contain;
    }
    header > nav > p {
        margin-right: 10px;
        width: 70px;
        line-height: 70px;
        background-color: black;
        text-align: center;
        color: white;
        font-size: 2em;
    }
    header ul {
        display: none;
        width: 100%;
        text-align: center;
        list-style: none;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 999;
    }
    header li {
        width: 100%;
        line-height: 50px;
        background-color: rgba(139,128,142,1);
    }
    header a:hover {
        background-color: rgba(255,255,255,0.3);
    }
    
    /* main */
    main > div {
        padding: 10px 0;
        text-align: center;
    }
    main > div > p {
        line-height: 26px;
    }
    main h2 {
        width: calc(100% - 20px);
        margin: 0 auto 5px;
        line-height: 50px;
        border-bottom: groove 3px rgba(185,164,139,0.6);
        text-align: center;
    }
    main h2 span {
        display: inline-block;
        margin-left: 10px;
        font-size: 12px;
    }
    main ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
    }
    main li {
        width: 49%;
        height: 200px;
        overflow: hidden;
    }
    main li:nth-of-type(-n+2) {
        margin-bottom: 5px;
    }
    
    /* footer */
    footer {
        margin-top: 10px;
        background-image: linear-gradient(-12deg, rgba(139,128,142,1) 0%, rgba(185,164,139,0.6) 100%);
    }
    footer div{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    footer dl{
        display: flex;
        flex-wrap: wrap;;
        padding: 20px;
        line-height: 26px;
    }
    footer dt {
        width: 3em;
        text-align-last: justify;
    }
    footer dd {
        width:  85%;
    }
    footer p {
        width: 110px;
        height: 60px;
        margin-right: 20px;
    }
    
    /* MediaQuery */
    @media screen and (min-width: 890px) {
        /* header */
        header {
            flex-wrap: nowrap;
        }
        header > nav > p {
            display: none;
        }
        header ul {
            display: flex;
            position: static;
        }
        header li {
            width: 150px;
            line-height: 70px;
            background-color: transparent;
        }
    
        main {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        main > div {
            width: 100%;
            height: 300px;
            background: url(images/mainV.jpg) no-repeat center center / cover;
        }
        main > div > p {
            margin-left: 30px;
            padding: 10px;
            width: 550px;
            background-color: rgba(255,255,255,0.5);
        }
        main section {
            width: 47%;
        }
        main section:first-of-type {
            margin-right: 1%;
        }
    
        footer {
            background: url(images/footerbg.jpg) no-repeat right 0px bottom -100px / 60%;
        }
        footer div {
            justify-content: flex-start;
            margin-left: 5px;
        }
        footer dl {
            width: 230px;
        }
        footer dd {
            width: 179px;
        }
        footer p {
            width: auto;
            height: 60px;
        }
    }
    
    /* jQuery scrollTop */
    #scrollTop {
        width: 50px;
        line-height: 50px;
        background-color: rgba(0, 174, 255, 0.8);
        border-radius: 50%;
        text-align: center;
        font-size: 1.5em;
        color: rgba(21, 47, 60, 0.9);
        position: fixed;
        right: 10px;
        bottom: 10px;
    }

-Mobile&Pc-L1-

-HTML-

-CSS-

-jQuery-