-Mobile&Pc-L4-

-HTML-

<body>
    <div id="wrap">
        <header>
            <nav>
                <button><span>MenuBtn</span></button>
                <ul>
                    <li class="current"><a href="#sec1"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
                    <li><a href="#sec2"><i class="fa-solid fa-snowflake"></i>Gallery_Winter</a></li>
                    <li><a href="#sec3"><i class="fa-solid fa-cloud-rain"></i>Gallery_Rain</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="sec1">
                <h1>Healing</h1>
                <p>癒しを求めて旅をしてみませんか？<br>TravelMooで探してみましょう</p>
            </section>
            <section id="sec2">
                <h2><i class="fa-solid fa-snowflake"></i>Gallery_Winter</h2>
                <ul>
                    <li><img src="images/Winter2.jpg" alt="Winter"></li>
                    <li><img src="images/Winter3.jpg" alt="Winter"></li>
                    <li><img src="images/Winter4.jpg" alt="Winter"></li>
                    <li><img src="images/Winter6.jpg" alt="Winter"></li>
                    <li><img src="images/Winter7.jpg" alt="Winter"></li>
                    <li><img src="images/Winter8.jpg" alt="Winter"></li>
                    <li><img src="images/Winter9.jpg" alt="Winter"></li>
                    <li><img src="images/Winter10.jpg" alt="Winter"></li>
                    <li><img src="images/Winter11.jpg" alt="Winter"></li>
                    <li><img src="images/Winter12.jpg" alt="Winter"></li>
                    <li><img src="images/Winter13.jpg" alt="Winter"></li>
                </ul>       
            </section>
            <section id="sec3">
                <h2><i class="fa-solid fa-cloud-rain"></i>Gallery_Rain</h2>
                <div class="slider responsive">
                    <p><img src="images/Rain1.jpg"></p>
                    <p><img src="images/Rain2.jpg"></p>
                    <p><img src="images/Rain3.jpg"></p>
                    <p><img src="images/Rain4.jpg"></p>
                    <p><img src="images/Rain5.jpg"></p>
                    <p><img src="images/Rain6.jpg"></p>
                    <p><img src="images/Rain7.jpg"></p>
                    <p><img src="images/Rain8.jpg"></p>
                    <p><img src="images/Rain9.jpg"></p>
                    <p><img src="images/Rain10.jpg"></p>
                </div>        
            </section>
        </main>
        <footer>
            <ul>
                <li><a href="#"><i class="fa-brands fa-facebook"></i>Facebook</a></li>
                <li><a href="#"><i class="fa-brands fa-twitter"></i>X</a></li>
                <li><a href="#"><i class="fa-brands fa-square-instagram"></i>instagram</a></li>
            </ul>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26587.495143310865!2d130.36229111083983!3d33.593967000000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541918dcdc00001%3A0xd49e74f320e6e853!2z44Kk44Kq44Oz44K344On44OD44OR44O844K656aP5bKh5bqX!5e0!3m2!1sja!2sjp!4v1699768239321!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>                <p><small>©travelMoo</small></p>
        </footer>
    </div>
</body>

-CSS-

* {
        margin: 0;
        padding: 0;
    }
    
    img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
        object-fit: cover;
    }
    i {
        display: inline-block;
        margin: 0 5px;
        font-size: 0.9em;
    }
    ul {
        list-style: none;
    }
    a {
        display: block;
        text-decoration: none;
        color: rgb(0,0,0);
    }
    
    #wrap {
        width: 100%;
        font-family: 'EB Garamond','Zen Maru Gothic';
    }
    
    /* header */
    header {
        width: 100%;
        font-size: 24px;
        position: fixed;
        z-index: 999;
    }
    nav button {
        border: none;
    }
    nav button span {
        display: inline-block;
        text-indent: -99999px;
    }
    nav button::before {
        content:"\f0c9";
        display: block;
        width: 2em;
        padding: 0.5em 0;
        background: rgb(142, 124, 35);
        border-radius: 50%;
        text-align: center;
        font: var(--fa-font-solid);
        color: rgb(0,0,0);
        font-size: 25px;
        position: absolute;
        top: 5px;
        right: 15px;
        z-index: 99;
    }
    nav button.off::before {
        content: "\f00d";
    }
    nav ul {
        display: none;
        width: 100%;
        height: 100vh;
        background: rgba(143, 106, 36, 0.9);
        position: absolute;
        top: 0;
        z-index: 0;
    }
    nav ul li {
        line-height: 70px;
        text-align: center;
    }
    nav ul li a {
        display: block;
        font-size: 20px;
        color: rgb(0,0,0);
    }
    nav ul li a:hover {
        background: rgba(255,255,255,0.3);
    }
    .current {
        background: rgba(255,255,255,0.5);
    }
    .current a, .current  {
        color: rgb(142, 81, 35);
    }
    
    
    /* main */
    #sec1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        height: 100vh;
        background: url(../images/main.jpg)no-repeat center center / cover;
        text-align: center;
    }
    h1 {
        flex-basis: 100%;
        font-size: min(20vw,170px);
    }
    #sec1 p {
        flex-basis: 100%;
        color: rgb(255,255,255);
    }
    
    h2 {
        margin: 5px 0;
        padding: 5px 0;
        border-bottom: solid 1px rgb(142, 124, 35);
        text-indent: 0.5em;
    }
    #sec2 ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #sec2 li {
        width: 47%;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    #sec2 li:nth-of-type(odd) {
        margin-right: 5px;
    }
    #sec2 li:not(:last-of-type) {
        margin-bottom: 5px;
    }
    #sec2 div {
        display: none;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.7);
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #sec3 p {
        height: 250px;
        overflow: hidden;
    }
    
    /* footer */
    footer ul {
        display: flex;
        justify-content: space-around;
        background: rgba(143, 106, 36, 0.3);
    }
    footer li {
        width: 30%;
        line-height: 50px;
        text-align: center;
    }
    iframe {
        display: block;
        width: 90%;
        margin: 10px auto 0;
    }
    footer p{
        text-align: center;
    }
    
    
    /* --------- 781px以上 ---------- */
    @media screen and (min-width: 781px) {
        header {
            background: rgba(0,0,0,0.7);
        }
        nav button {
            display: none;
        }
        nav {
            width: 80%;
            margin: 0 auto;
            line-height: 2;
        }
        nav ul {
            display: flex;
            justify-content: space-between;
            width: 80%;
            height: auto;
        }
        nav li {
            width: 33%;
            text-align: center;
        }
        #sec2 ul {
            justify-content: space-around;
        }
        #sec2 li {
            width: 20%;
            max-width: 200px;
        }
        #sec2 li:nth-of-type(odd) {
            margin-right: 0;
        }
        #sec2 li:not(:last-of-type) {
            margin-bottom: 0;
        }
        #sec2 li {
            margin-top: 5px;
        }
        
    }
    
   
    
    /*scrollTop*/
        #fixedTop {
            position: fixed;
            bottom: 5%;
            right: 10px;
            z-index: 999;
        }
        #fixedTop .fas {
            font-size: 3em;
            color: rgb(142, 81, 35);
        }

<link href="css/slick.css" rel="stylesheet">
    <link href="css/slick-theme.css" rel="stylesheet">

-jQuery-

//Menu
    $(function(){        
        //サイズ変更時のメニューの表示非表示の判断
        $(window).on('load resize',function(){
            if($(window).width() > 780) {
                $('nav ul').css('display','flex').show();
                $('nav button').removeClass('off');
            }else {
                $('nav ul').css('display','none').hide();
            }
        });
        $('nav button').on('click',function(){
            $('nav ul').slideToggle(400);	
            if($(this).hasClass('off')) {
                $(this).removeClass('off');
            } else {
                $(this).addClass('off');
            }
            $('nav a').on('click',function(){
                if($(window).width() <= 780) {
                    $('nav ul').css('display','none');
                    $('nav button').removeClass('off');
                }
            });
        });
    });
        
        
//ScrollTop
    $(function(){
        $('body').append('<a href="javascript:void(0);" id="fixedTop">	<i class="fas fa-caret-square-up"></i></a>');
        
        $('#fixedTop').on('click', function(){
        $('html,body').animate({
                scrollTop: '0'
            }, 500);
        });
        
        $(window).on('load scroll resize',function(){
            if($(window).scrollTop() > 100) {
                $('#fixedTop').fadeIn();
            } else {
                $('#fixedTop').fadeOut();
            }
        });
        
    });
        
//SmoothScroll
    $(function(){
        $('nav a').click(function(){
        
            var target = $($(this).attr('href')).offset().top;
        
            target -= 70;
        
            $('html,body').animate({
                scrollTop : target
            },500);
        
            return false;
        });
    });
        
        
        
//Highlight
    $(function(){
        $(window).scroll(function(){
            for(var i = 1; i <= 3; i++){
                if($('section:nth-of-type('+ i + ')').offset().top < $(window).scrollTop() + 300){
                    $('nav li').removeClass('current');
                    $('nav li:nth-of-type(' + i + ')').addClass('current');
                }
            }
        });
    });
        
        
//Caption
    $(function(){
        $('#sec2 li').append('<div>');
        
        $('#sec2 div').each(function(){
            $(this).html('<p>' + $(this).parent().children('img').attr('alt') + '</p>');
        });
        
        $('#sec2 li').hover(function(){
            //hover時の処理
            $('> div',this).css('display','flex');
            $('> div',this).stop().fadeIn(300);
        
            $('> div > p',this).stop().animate({
                'top' : 0
            },300);
        },function(){
            //マウスが離れた時の処理
            $('> div',this).stop().fadeOut(300);
        
            $('> div > p',this).stop().animate({
                'top' : '10px'
            },300);
        });
    });

※ $(function()...はScriptタグまたはjsファイル内に１つで良いのですが、
    個別に使用することを考慮して一つ一つに $(function()を使っています。

$('.responsive').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        autoplay: true,
        autoplaySpeed: 2000,
        responsive: [
            {
            breakpoint: 980,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
            },
            {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
            },
            // {
            // breakpoint: 480,
            // settings: {
            //     slidesToShow: 1,
            //     slidesToScroll: 1
            // }
            // }
        ]
    });

<script src="js/slick.min.js"></script>