@charset "UTF-8";

/* picture要素を透過的に（PC/SP共通） */
.inner_block h3 picture {
    display: contents;
}

@media (max-width: 767px) {

/* ========================================
   基本レイアウト
   ======================================== */

/* 背景レイヤー */
.bg-layer.bg-right {
    display: none;
}
.bg-layer.bg-left {
    width: 100%;
    background-position: center;
}

/* ナビゲーション */
nav {
    left: auto;
    right: 0;
    top: 0;
    z-index: 10002;
}
.sp_hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: none;
    border: none;
    padding: 9px;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
}
.sp_hamburger svg {
    width: 100%;
    height: 100%;
}
.hamburger-leaves,
.hamburger-close {
    transition: opacity 0.3s ease;
}
.hamburger-close {
    opacity: 0;
}
nav.nav-open .hamburger-leaves {
    opacity: 0;
}
nav.nav-open .hamburger-close {
    opacity: 1;
}
.inner_nav {
    display: none;
}
nav.nav-open ~ main .sp_hero_nav {
    transform: translateX(0);
}

/* 固定ロゴ非表示 */
.background > h1 {
    display: none;
}

/* メインコンテンツ全幅 */
main {
    width: 100%;
    margin-left: 0;
    overflow-x: clip;
}

/* ========================================
   SP ヒーローブロック
   ======================================== */
.sp_hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
    background: url(../image/bg/bg_01.webp) no-repeat center / cover;
}
.sp_hero_nav {
    position: fixed;
    top: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    text-align: right;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.sp_hero_nav li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #003d28;
    color: #faf0dc;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 14px 8px 14px;
    border-radius: 50px 0 0 50px;
    white-space: nowrap;
    text-decoration: none;
}
.sp_hero_nav li a::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMy4xNiAyMCI+PHBhdGggZmlsbD0iI2ZhZjBkYyIgZD0iTTIwLjE3LDguNTljMi43OCwxLjA2LDMuODEsMy45MywyLjI5LDYuNTEtMS4zMiwyLjIyLTMuNzQsMy41Mi02LjE0LDQuMjQtMy44NCwxLjA4LTguMTEuODYtMTEuNzMtLjg4LTEuNTQtLjc2LTIuOTgtMS44NC0zLjg3LTMuMzUtMS40Ni0yLjQ1LS42MS01LjI0LDItNi40MSwwLDAsLjI2LS4xMS4yNi0uMTFsLjE0LjE4Yy0uNTUuNDQtMS4wNC45NS0xLjM5LDEuNTUtLjc0LDEuMjEtLjU5LDIuNzMuMjcsMy44My44NCwxLjEyLDIuMSwxLjg1LDMuMzcsMi4zOCwzLjg0LDEuNTIsOC41NywxLjUyLDEyLjQxLDAsMS4yNy0uNTQsMi41My0xLjI3LDMuMzctMi4zOSwxLjQ0LTEuOTIuNjQtNC4wMi0xLjEzLTUuMzgsMCwwLC4xNC0uMTguMTQtLjE4aDBaIi8+PGc+PHBhdGggZmlsbD0iI2ZhZjBkYyIgZD0iTTEyLjgyLDBjLS40NywyLjMzLjQ2LDUuMDYsMS4yMiw3LjI2Ljc5LDIuMTEuMzgsNC43My0xLjI4LDYuMjktLjUyLjQ5LTEuMTYuODgtMS44NiwxLjAyLDEuNTMtMS43OSwxLjk0LTQuNDEsMS4xMy02LjU4LS43LTEuOTctMS4wMi00LjE5LS4zNS02LjIyLjIzLS42Ny41OS0xLjMzLDEuMTQtMS43N2gwWiIvPjxwYXRoIGZpbGw9IiNmYWYwZGMiIGQ9Ik04LjUsMi45NmMtLjA5LjktLjAyLDEuODEuMjMsMi42Ny4yMi44MS41MywxLjYzLjgzLDIuNS4xOC41Mi4yOCwxLjA3LjI4LDEuNjMuMDUsMS42NC0uOTYsMy40MS0yLjY3LDMuNy4xMS0uMTkuMjctLjQ0LjM3LS42MywwLDAsLjE1LS4zMS4xNS0uMzEuMjEtLjQ3LjM0LTEuMDEuMzYtMS40OS4wNS0uNzctLjA5LTEuNTMtLjM0LTIuMjgtLjE2LS40Ni0uMjktLjk0LS4zOC0xLjQ0LS4zLTEuNDktLjEyLTMuMzcsMS4xNy00LjM1aDBaIi8+PGc+PHBhdGggZmlsbD0iI2ZhZjBkYyIgZD0iTTE2LjIzLDUuNjVsLS4wNi0uMTJjLS4wNy0uMTYtLjEyLS4zNS0uMTMtLjUyLS4wMi0uMjYuMDMtLjU0LjEzLS44NC4wOC0uMjIuMTMtLjQzLjE3LS42My4xNC0uNjguMDYtMS41OS0uNTktMi4wOGwtLjUtLjM4LjA2LjYyYy4wMy4zNiwwLC42OS0uMDksMS4wMS0uMDYuMjQtLjE1LjQ3LS4yNC43M2wtLjEuMjljLS4wOS4yNS0uMTMuNTEtLjEzLjc2LS4wMi43Ny40NCwxLjY2LDEuMzMsMS44MWwuNTguMS0uMzUtLjU4Yy0uMDQtLjA2LS4wOC0uMTItLjEtLjE3WiIvPjxwYXRoIGZpbGw9IiNmYWYwZGMiIGQ9Ik0xOC4yNSw2LjAzcy0uMDYtLjEtLjA4LS4xNGwtLjA1LS4wOWMtLjA2LS4xMy0uMDktLjI4LS4xLS40MS0uMDEtLjIxLjAyLS40My4xLS42Ny4wNi0uMTguMS0uMzQuMTMtLjUuMTEtLjU0LjA1LTEuMjYtLjQ3LTEuNjVsLS40LS4zLjA1LjVjLjAzLjI4LDAsLjU1LS4wNy44LS4wNS4xOS0uMTIuMzgtLjE5LjU4bC0uMDguMjNjLS4wNy4yLS4xLjQtLjExLjYtLjAyLjYxLjM1LDEuMzIsMS4wNiwxLjQ0bC40Ni4wOC0uMjgtLjQ2WiIvPjwvZz48L2c+PC9zdmc+");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.sp_hero_logo {
    width: 70vw;
    margin-bottom: 22vw;
}

/* セクション共通 */
/* iOS Safari: background-repeat:repeat + background-blend-mode が効かないバグ回避 */
.bg_green,
.bg_blue,
.bg_white,
.bg_lightgreen {
    background-image: url(../image/common/bg_base_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg_green {
    padding-bottom: 60px;
}
.bg_blue {
    padding-top: 60px;
}
.bg_white {
    padding-top: 60px;
}
.bg_lightgreen {
    padding-top: 60px;
}
.wave-top {
    margin-top: -30px;
    -webkit-mask-size: 100% 30px, 100% calc(100% - 30px);
    mask-size: 100% 30px, 100% calc(100% - 30px);
}
.inner_block h3 {
    height: auto;
    margin-bottom: 24px;
    gap: 10px;
}
.inner_block h3 img {
    height: 40px;
}

/* ========================================
   メインビジュアル
   ======================================== */
.inner_main_visual {
    height: 100vh;
    padding: 0;
    margin-bottom: 0;
    position: relative;
}
.inner_main_visual h1 {
    position: absolute;
    left: 26.5vw;
    /* bottom: 15vh; */
    width: 53vw;
    margin: 0;
    top: 77vh;
}
.inner_main_visual h2 {
    position: absolute;
    top: 15vh;
    right: 6vw;
    width: 44vw;
    margin: 0;
}
.inner_main_visual h2::before {
    width: 25vw;
    height: 25vw;
    top: -10vw;
    left: -40px;
}
.inner_main_visual h2::after {
    width: 15vw;
    height: 15vw;
    top: -6vh;
    left: -24vw;
}
.inner_main_visual .img_bus_totonoi {
    position: absolute;
    top: 22vh;
    width: 115vw;
}
.inner_main_visual .img_bus_totonoi::before {
    width: 10vw;
    height: 10vw;
    top: 0;
    left: 30vw;
}
.inner_main_visual .img_bus_totonoi::after {
    width: 13vw;
    height: 13vw;
    bottom: 21vh;
    right: 30vw;
    transform: rotate(36deg);
}
.inner_main_visual .img_left {
    position: absolute;
    bottom: 0vh;
    width: 22vw;
    display: block;
    top: unset;
}
.inner_main_visual .img_right {
    position: absolute;
    top: auto;
    right: 0;
    width: 20vw;
    bottom: 8vh;
}
.inner_main_visual .img_left::after {
    width: 90px;
    height: 80px;
    top: -5vh;
    left: 15vw;
}
.inner_main_visual .img_left::before {
    display: none;
}
/* yuge / cloud デコレーション */
.yuge::before {
    width: 8vw;
    height: 8vw;
    top: 8vh;
    right: 22vw;
}
.yuge::after {
    width: 7vw;
    height: 8vw;
    top: 40vh;
    right: 5vw;
}
.cloud::before {
    width: 14vw;
    height: 18px;
    top: 35vh;
    right: 4vw;
}
.cloud::after {
    width: 14vw;
    height: 14vw;
    top: 7vh;
    left: 7vw;
}
.reserve_wrapper {
    position: fixed;
    right: auto;
    width: 55vw;
    height: 50px;
    margin: 0;
    overflow: hidden;
    bottom: 0px;
    left: calc( 100vw - 55vw );
    z-index: 999999;
}
.btn_reserv {
    top: 2px;
    right: -62px;
    width: 240px;
    height: 60px;
    font-size: 17px;
}
.btn_reserv_fixed {
    /* position: fixed; */
    top: 20px;
    /* right: 20px; */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 60px;
    background: url(../image/main_visual/bg_reserve_btn.svg) no-repeat center / contain;
    color: #005032;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.05em;
    padding-left: 0.5em;
    margin: auto;
    margin-bottom: 1rem;
}

/* booking */
.booking_steps {
    flex-direction: column;
    gap: 12px;
}
.booking_step {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 12px 16px;
}
.booking_step .step_num {
    flex-shrink: 0;
    margin-bottom: 0;
}
.booking_step .step_title {
    margin-bottom: 0;
    font-size: 15px;
    width: 40%;
}
.booking_step .step_desc {
        font-size: 14px;
        width: 70%;
}
.btn_booking {
    font-size: 16px;
    padding: 12px 36px;
}

/* ========================================
   About
   ======================================== */
.inner_about {
    padding: 30px 20px 0;
}
.inner_about::before {
display: none;
}
.inner_about::after {
display: none;
}
.inner_about p {
    font-size: 16px;
    text-align: left;
}
.inner_about .icon_wrapper {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}
.inner_about .icon_wrapper p {
    width: 100%;
    text-align: center;
    font-size: 15px;
}

/* ========================================
   Howto
   ======================================== */
.inner_howto {
    padding: 0 0 0;
}
.inner_howto::before {
display: none;
}
.inner_howto::after {
display: none;
}
.inner_howto dl {
    flex-direction: row-reverse;
    padding: 0 20px 24px;
    margin-bottom: 24px;
    gap: 12px;
}
.inner_howto dt {
    width: 40%;
    flex-shrink: 0;
}
.inner_howto .num {
    margin-bottom: 12px;
}
.inner_howto .title {
    font-size: 18px;
}
.inner_howto .body {
    font-size: 16px;
}
.inner_howto dl:not(:last-of-type)::after {
    left: 20px;
    right: 20px;
}
.full_image_wrapper {
    margin-top: 40px;
    padding: 0;
}

/* ========================================
   Equipment
   ======================================== */
.inner_equipment {
    padding-top: 50px;
    z-index: 0;
}
.inner_equipment::before {
display: none;
}
.inner_equipment::after {
display: none;
}
.inner_equipment.inner_block h3 {
    margin-bottom: 30px;
}
.equipment_face_range {
    margin-top: 30px;
    padding-bottom: 400px;
    margin-bottom: 60px;
}
.equipment_wrapper {
    padding: 0 20px;
    gap: 24px 16px;
}
.equipment_row {
    flex-direction: column;
    gap: 24px;
}
.equipment_item {
    width: 50%;
    animation-delay: 0s !important;
    margin: auto;
}
.equipment_item .title {
    font-size: 17px;
    margin-bottom: 4px;
}
.equipment_item .description {
    font-size: 16px;
}
/* face アニメーション SP非表示 */
.equipment_face_wrapper {
    display: none;
}
/* SP顔装飾 */
.sp_equipment_face_wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.sp_equipment_face_wrapper span {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    opacity: 0;
}
.sp_equipment_face_wrapper .face_left {
    background-image: url(../image/equipments/face_left.png);
    transform: translateX(-80px);
}
.sp_equipment_face_wrapper .face_right {
    background-image: url(../image/equipments/face_right.png);
    background-position: right;
    transform: translateX(80px);
}
@keyframes spFaceSlideLeft {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes spFaceSlideRight {
    to { opacity: 1; transform: translateX(0); }
}
/* is-visible で発火：face_left は左から、face_right は右から */
.sp_equipment_face_wrapper.is-visible .face01.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 0s; }
.sp_equipment_face_wrapper.is-visible .face01.face_right { animation: spFaceSlideRight 0.8s ease forwards 0s; }
.sp_equipment_face_wrapper.is-visible .face02.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 0.25s; }
.sp_equipment_face_wrapper.is-visible .face02.face_right { animation: spFaceSlideRight 0.8s ease forwards 0.25s; }
.sp_equipment_face_wrapper.is-visible .face03.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 0.5s; }
.sp_equipment_face_wrapper.is-visible .face03.face_right { animation: spFaceSlideRight 0.8s ease forwards 0.5s; }
.sp_equipment_face_wrapper.is-visible .face04.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 0.75s; }
.sp_equipment_face_wrapper.is-visible .face04.face_right { animation: spFaceSlideRight 0.8s ease forwards 0.75s; }
.sp_equipment_face_wrapper.is-visible .face05.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 1.0s; }
.sp_equipment_face_wrapper.is-visible .face05.face_right { animation: spFaceSlideRight 0.8s ease forwards 1.0s; }
.sp_equipment_face_wrapper.is-visible .face06.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 1.25s; }
.sp_equipment_face_wrapper.is-visible .face06.face_right { animation: spFaceSlideRight 0.8s ease forwards 1.25s; }
.sp_equipment_face_wrapper.is-visible .face07.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 1.5s; }
.sp_equipment_face_wrapper.is-visible .face07.face_right { animation: spFaceSlideRight 0.8s ease forwards 1.5s; }
.sp_equipment_face_wrapper.is-visible .face08.face_left  { animation: spFaceSlideLeft  0.8s ease forwards 1.75s; }
.sp_equipment_face_wrapper.is-visible .face08.face_right { animation: spFaceSlideRight 0.8s ease forwards 1.75s; }
/* face01: セクション上部 */
.sp_equipment_face_wrapper .face01.face_left {
    top: 100px;
    left: 0;
    width: 130px;
    height: 130px;
}
.sp_equipment_face_wrapper .face01.face_right {
    top: 100px;
    right: 0;
    width: 130px;
    height: 130px;
}
/* face02: 1つ目のアイテム横 */
.sp_equipment_face_wrapper .face02.face_left {
    top: 170px;
    left: -22px;
    width: 160px;
    height: 160px;
}
.sp_equipment_face_wrapper .face02.face_right {
    top: 170px;
    right: -22px;
    width: 160px;
    height: 160px;
}
/* face03: 2つ目のアイテム横 */
.sp_equipment_face_wrapper .face03.face_left {
    top: 250px;
    left: -50px;
    width: 190px;
    height: 190px;
}
.sp_equipment_face_wrapper .face03.face_right {
    top: 250px;
    right: -50px;
    width: 190px;
    height: 190px;
}
/* face04: アイテム間 */
.sp_equipment_face_wrapper .face04.face_left {
    top: 335px;
    left: -78px;
    width: 220px;
    height: 220px;
}
.sp_equipment_face_wrapper .face04.face_right {
    top: 335px;
    right: -78px;
    width: 220px;
    height: 220px;
}
/* face05: 3つ目のアイテム横 */
.sp_equipment_face_wrapper .face05.face_left {
    top: 425px;
    left: -107px;
    width: 250px;
    height: 250px;
}
.sp_equipment_face_wrapper .face05.face_right {
    top: 425px;
    right: -107px;
    width: 250px;
    height: 250px;
}
/* face06: 4つ目のアイテム横 */
.sp_equipment_face_wrapper .face06.face_left {
    top: 530px;
    left: -130px;
    width: 280px;
    height: 280px;
}
.sp_equipment_face_wrapper .face06.face_right {
    top: 530px;
    right: -130px;
    width: 280px;
    height: 280px;
}
/* face07: 5つ目のアイテム横 */
.sp_equipment_face_wrapper .face07.face_left {
    top: 630px;
    left: -180px;
    width: 330px;
    height: 330px;
}
.sp_equipment_face_wrapper .face07.face_right {
    top: 630px;
    right: -180px;
    width: 330px;
    height: 330px;
}
/* face08: セクション下部 */
.sp_equipment_face_wrapper .face08.face_left {
    top: 710px;
    left: -250px;
    width: 400px;
    height: 400px;
}
.sp_equipment_face_wrapper .face08.face_right {
    top: 710px;
    right: -250px;
    width: 400px;
    height: 400px;
}
.equipment_face_wrapper .face_left {
    left: -57%;
    width: 100%;
    height: 260px;
}
.equipment_face_wrapper .face_left,
.equipment_face_wrapper.is-visible .face_left,
.equipment_face_wrapper .face_left::before,
.equipment_face_wrapper.is-visible .face_left::before,
.equipment_face_wrapper .face_left::after,
.equipment_face_wrapper.is-visible .face_left::after,
.equipment_face_wrapper .face_right,
.equipment_face_wrapper.is-visible .face_right,
.equipment_face_wrapper .face_right::before,
.equipment_face_wrapper.is-visible .face_right::before,
.equipment_face_wrapper .face_right::after,
.equipment_face_wrapper.is-visible .face_right::after {
    animation: none;
}
.equipment_face_wrapper .face_left::before {
    left: 28%;
    bottom: 120px;
    transform: scale(0.65);
}
.equipment_face_wrapper .face_left::after {
    left: 45%;
    bottom: 205px;
    transform: scale(0.45);
}
.equipment_face_wrapper .face_right {
    right: -57%;
    width: 100%;
    height: 260px;
}
.equipment_face_wrapper .face_right::before {
    right: 28%;
    bottom: 120px;
    transform: scale(0.65);
}
.equipment_face_wrapper .face_right::after {
    right: 45%;
    bottom: 205px;
    transform: scale(0.45);
}

/* ========================================
   Feature
   ======================================== */
.inner_feature.inner_block h3 {
    height: auto;
    margin-bottom: 24px;
}
.inner_feature.inner_block h3 img {
    height: auto;
    width: 80%;
}
.inner_feature {
    padding-bottom: 30px;
}
.feature_wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 10px;
}
.feature_item .title {
    font-size: 20px;
    padding: 18px 0px 43px !important;
    background-size: auto 100% !important;
}
.feature_item .description {
    font-size: 16px;
    padding: 0 30px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ========================================
   Price / Booking / Access / FAQ
   ======================================== */
.bg_lightgreen .inner_block {
    flex-direction: column;
    padding: 0 30px 40px;
    gap: 0;
}
.bg_lightgreen .title_wrapper {
    width: 100%;
    margin-bottom: 16px;
}
.bg_lightgreen .title_wrapper h3 {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
}
.bg_lightgreen .title_wrapper h3 img {
    height: auto;
    width: auto;
    max-height: 40px;
}
.bg_lightgreen .content {
    width: 100%;
}

/* price */
.inner_price .content dt {
    font-size: 20px;
}
.inner_price .content dd {
    font-size: 20px;
}
.price_data {
    font-size: 22px;
}
.inner_price > p {
    text-align: left;
    font-size: 12px;
}

/* access */
.inner_access .content div {
    height: 250px;
}

/* faq */
.faq_question {
    font-size: 17px;
    padding: 16px 0;
}
.faq_question::after {
    width: 28px;
    height: 28px;
}
.faq_answer_inner p {
    font-size: 16px;
    padding: 16px 20px;
}

/* ========================================
   Footer
   ======================================== */
.footer {
    padding-top: 50px;
    padding-bottom: 0;
}
.inner_footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px 200px;
    gap: 20px;
}
.footer_logo {
    width: 50vw;
}
.footer_info {
    font-size: 14px;
}

/* PC専用改行 SP非表示 */
.pc_only {
    display: none;
}

/* ========================================
   SP用ハンバーガーボタン PC非表示
   ======================================== */
} /* end @media */

/* PC: SP専用要素非表示 */
@media (min-width: 768px) {
    .sp_hamburger {
        display: none;
    }
    .sp_hero {
        display: none;
    }
}

/* SP face keyframes（メディアクエリ外に配置） */
@keyframes faceLeftSlideSP {
    to { left: -160px; }
}
@keyframes faceLeftBeforeSlideSP {
    to { left: 80px; }
}
@keyframes faceLeftAfterSlideSP {
    to { left: 120px; }
}
@keyframes faceRightSlideSP {
    to { right: -160px; }
}
@keyframes faceRightBeforeSlideSP {
    to { right: 80px; }
}
@keyframes faceRightAfterSlideSP {
    to { right: 120px; }
}

/* Back to Top - SP */
.btn-to-top {
    left: 16px;
    bottom: 16px;
}
.btn-to-top__section {
    font-size: 11px;
}
.btn-to-top__character {
    width: 120px;
    height: 120px;
}
.btn-to-top__label {
    font-size: 10px;
}