/* 共通 */
._inner{
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
}
._flex{
    display: flex;
    align-items: start;
    justify-content: space-between;
}
._reverse{
    flex-direction: row-reverse;
}
._title{
    margin-bottom: 40px;
}
._title h2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    color: #FFF;
    text-align: center;
    /* h2 */
    font-family: "Shippori Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 200%;
    margin-bottom: 58px;
}
._title h2::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFF;
}
._title h2::after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFF;
}
._title p{
    margin-bottom: 58px;
    max-width: 95vw;
    margin: 0 auto;
}
img{
    width: 100%;
}
p{
    color: #FFF;
    text-align: center;
    /* p */
    font-family: "Shippori Mincho";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; 
}
._btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin: 0 auto;
    border: 1px solid #FFF;
    color: #FFF;
    text-decoration: none;
}
/* mv */
.mv{
    width: 100vw;
    height: 100vh;
    position: relative;
    background-image: url(../img/mv.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mv-logo{
    width: 40%;

}
.mv-nav{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    position: absolute;
    top: 60px;
    right: 2%;
    z-index: 100;
}
.mv-nav a{
    text-decoration: none;
}
.mv-nav a p{
    color: #fff;
    font-family: "Shippori Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.mv-scloll{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 16px;
    position: absolute;
    bottom: 60px;
    right: 2%;
}
.mv-scloll p{
    color: #fff;
    font-family: "Shippori Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    writing-mode: vertical-rl;
}
.mv-scloll::after{
    content: "";
    display: block;
    width: 1px;
    height: 100px;
    /* 背景トラック + 下方向に流れる白い帯 */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3)),
        linear-gradient(180deg, rgba(255,255,255,1) 0 30px, rgba(255,255,255,0) 30px);
    background-size: 1px 100%, 1px 30px;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center 0%;
    animation: mvScrollBar 3s ease-in-out infinite;
}
@keyframes mvScrollBar{
    0%{
        background-position: center center, center 0%;
    }
    100%{
        background-position: center center, center 100%;
    }
}

/* onsen */
#onsen{
    width: 100%;
    padding: 100px 0 300px;
    background-image: url(../img/onsen-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#onsen > p{
    max-width: 90%;
    margin: 0 auto;
    font-size: 20px;
    margin-bottom: 125px;
}
.onsen-con{
    width: 100%;
    position: relative;
}
.onsen-con::after{
    content: 'ONSEN';
    display: block;
    width: fit-content;
    color: #0C1D26;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: clamp(5rem, 2.118rem + 12.3vw, 16.875rem);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 545.812px */
    letter-spacing: -24.562px;
    opacity: 0.3;
    position: absolute;
    bottom: 0;
    left: 2%;
    transform: translateY(50%);
    z-index: 1;
}
.onsen-layout{
    width: 100%;
    align-items: start;
    position: relative;
    z-index: 2;
}
.onsen-layout img{
    display: block;
    width: 100%;
    object-fit: cover;
}
.onsen-layout img{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.4s ease, transform 1.4s ease;
}
.onsen-layout img.is-visible{
    opacity: 1;
    transform: translateY(0);
}
.onsen-layout-left{
    width: 30%;
}
.onsen-layout-left img{
    margin-top: 10%;
}
.onsen-layout-center{
    width: 25%;
}
.onsen-layout-center img{
    margin-top: 20%;
}
.onsen-layout-right{
    width: 35%;
}
.onsen-layout-right img{
    width: 80%;
}
.onsen-layout-right img:last-of-type{
    margin-top: 16px;
    margin-left: auto;
}

/* plan */
#plan{
    width: 100%;
    padding: 180px 0;
    background-image: url(../img/plan-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#plan ._title h2{
    color: #0C1D26;
}
#plan ._title h2::before{
    background: #0C1D26;
}
#plan ._title h2::after{
    background: #0C1D26;
}
#plan ._title p{
    color: #0C1D26;
}
#plan p{
    color: #0C1D26;
}
.plan-item{
    margin: 0 auto;
    max-width: 900px;
    width: 80%;
    padding: 36px;
    background: #FFF;
    margin-bottom: 100px;
}
.plan-item img{
    margin-bottom: 40px;
}
.plan-item h3{
    color: #0C1D26;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 139.75px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 279.5px */
    letter-spacing: -8.385px;
    margin-bottom: 40px;
     white-space: nowrap; /* 幅フィットのため改行を防止 */
}
.plan-item h4{
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 10px;
    color: #0C1D26;
    /* h3 */
    font-family: "Shippori Mincho";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 40px */
}
.plan-item h4::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0C1D26;
}
.plan-item p{
    text-align: left;
    margin-bottom: 32px;
}
.plan-date{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 2%;
}
.plan-date::before{
    content: '';
    display: block;
    width: 5%;
    height: 1px;
    background: #0C1D26;
}
.plan-date p{
    margin-bottom: 0;
}
.plan-btn {
    border: 1px solid #0C1D26;
    margin-top: 20px;
}
.plan-btn p{
    margin-bottom: 0;
    font-size: 20px;
}



/* course */
#course{
    width: 100%;
    padding: 180px 0;
    background:#0C1D26;
}
.course-item {
    align-items: stretch;

}
.course-item._reverse{
    margin-bottom: 80px;
}
.course-text{
    width: 45%;
    padding: 32px;
    box-sizing: border-box;
    background-image: url(../img/course-bg.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.course-text h3{
    color: #FFF;
    text-align: center;
    /* h3 */
    font-family: "Shippori Mincho";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 40px */
}
.course-text img{
    width: 54px;
}
.course-img{
    width: 45%;
}

/* spot */
#spot{
    width: 100%;
    padding: 180px 0;
    background: #0C1D26;
    position: relative;
}
#spot::before{
    content: 'VOYAGE';
    display: block;
    color: #071116;
    font-family: "Shippori Mincho";
    font-size: clamp(5rem, 2.118rem + 12.3vw, 16.875rem);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 545.812px */
    letter-spacing: -24.562px;
    opacity: 0.3;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.spot-item{
    width: 30%;
}
.spot-item img{
    margin-bottom: 32px;
}
.spot-item > p{
    margin-bottom: 10px;
    text-align: left;
}
.spot-access{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 16px;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 6px;
}
.spot-access::before{
    content: '';
    background-image: url(../img/spot-dec.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 26px;
    aspect-ratio: 1/1;
}
.spot-access p{
    font-size: 14px;
}
.spot-list {
    margin-bottom: 80px;
}

/* attention */
.attention{
    width: 100%;
    padding: 40px 0;
    background: #fff;
    text-align: center;
}
.attention h2{
    color: #0C1D26;
    /* H2 */
    font-family: "Shippori Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 32.4px */
    letter-spacing: 1.08px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.attention h2::before{
    content: '';
    display: block;
    width: 28px;
    aspect-ratio: 1/1;
    background-image: url(../img/attention-dec.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.attention p{
    width: fit-content;
    text-align: left;
    margin: 0 auto;
    color: #0C1D26;
}


/* footer */
footer{
    width: 100%;
}
footer ._flex{
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    justify-content: left;
    align-items: center;
    gap: 2%;
    padding: 28px 0;
}
footer ._flex > img{
    width: 116px;
}
footer ._flex a img{
    width: 40px;
    aspect-ratio: 1/1;
}
.copyright{
    background: #0C1D26;
    padding: 14px 0;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 24px */
}
footer p{
    color: #0C1D26;
    text-align: left;
}

/* toTop */
.to-top{
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 54px;
    height: 54px;
    background: #fff;
    border: 1px solid #0C1D26;
    color: #0C1D26;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.to-top span{
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.to-top.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}






.sp-only{
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-only{
        display: block;
    }
    ._flex{
        flex-direction: column;
        gap: 16px;
    }
    ._inner{
        width: 90%;
    }
    ._title h2{
        font-size: 24px;
        gap: 32px;
    }
    ._title p{
        font-size: 16px;
    }
    ._btn{
        font-size: 16px;
    }

    /* mv */
    .mv-logo{
        width: 70%;
    }
    .mv-nav{
        top: 30px;
        right: 5%;
        align-items: end;
    }
    .mv-nav a p{
        font-size: 16px;
    }
    .mv-scloll{
        bottom: 30px;
        right: 5%;
    }
    .mv-scloll p{
        font-size: 16px;
    }
    .mv-scloll::after{
        height: 80px;
    }


    /* onsen */
    #onsen{
        padding: 80px 0 160px;
    }
    .onsen-layout{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .onsen-layout-left{
        width: 70%;
    }
    .onsen-layout-center{
        width: 30%;
    }
    .onsen-layout-right{
        width: 60%;
        margin-left: auto;
    }
    .onsen-con::after{
        letter-spacing: 0px;
    }


    /* plan */
    #plan{
        padding: 80px 0;
    }
    .plan-item{
        margin-bottom: 60px;
        padding: 36px 16px;
    }
    .plan-item h3{
        margin-bottom: 20px;
    }
    .plan-item h4{
        font-size: 16px;
    }
    .plan-item p{
        font-size: 14px;
    }
    .plan-date{
        font-size: 14px;
    }


    /* course */
    #course{
        padding: 80px 0;
    }
    .course-item{
        flex-direction: column;
    }
    .course-text{
        width: 100%;
    }
    .course-img{
        width: 100%;
    }
    .course-text h3{
        font-size: 16px;
    }
    .course-text img{
        width: 40px;
    }


    /* spot */
    #spot{
        padding:100px 0 40px;
    }
    #spot::before{
        letter-spacing: -10px;
    }
    .spot-item{
        width: 100%;
        margin-bottom: 60px;
    }




    footer ._flex{
        width: 90%;
        flex-direction: column;
        gap: 16px;
        flex-wrap: wrap;
    }
    footer ._flex > img{
        width: 100px;
    }
    footer ._flex a img{
        width: 32px;
    }
    .copyright{
        font-size: 12px;
    }
}