@charset "UTF-8";


/*==========================
loading view
==========================*/
#loading {
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-color: var(--primary-orange);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 2s ease, visibility 2s ease;
    /* スムーズな遷移 */
    /* 初期状態は完全に表示 */
}

.robaMovie {
    width: 70%;
    height: auto;
}

/* end of loding */
#loading.loaded {
    opacity: 0;
    display: none !important;
}

/* fade in container */
.container {
    display: none;
    /* 初期状態で表示しない */
    opacity: 0;
    /* フェードイン前は透明にする */
    transition: opacity 1.5s ease;
    /* フェードインのトランジション */
}

.container.open {
    display: block;
    /* フェードイン開始時に表示 */
    opacity: 1;
    /* 表示時に透明度を1にする */
}

/* loading  PC */
@media screen and (min-width: 769px) {
    .robaMovie {
        width: 30%;
        height: auto;
    }
}

/* pc 769px */

/* ============================
header
============================ */
.headerBar {
    transform: translateY(310%);
    transition: transform 0.4s;
    -webkit-transition: transform 1s ease;
    /* 古いブラウザ対応 */
}

.headerBar.image-loaded {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    /* 古いブラウザ対応 */
}

/* top PC */
@media screen and (min-width: 769px) {
    .headerBar {
        transform: translateY(800%);
    }
}

/* pc 769px */

/* ============================
TOP
============================ */
.top {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-orange);
    transition: transform 0.4s;
    position: relative;
}

.top.image-loaded {
    transition: background-color 1s ease-in-out;
    /* 背景色の切り替えをスムーズに */
    background-image: url('../images/top01.jpg');
    /* 背景画像を設定 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    display: flex;
}

.scrolldown {
    /*描画位置※位置は適宜調整してください*/
    opacity: 0;
    transition: opacity 0.4s;
    position: absolute;
    bottom: 1%;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;

}

.scrolldown.image-loaded {
    opacity: 1;
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 1%;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;

}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
    0% {
        bottom: 1%;
    }

    50% {
        bottom: 3%;
    }

    100% {
        bottom: 1%;
    }
}

/*Scrollテキストの描写*/
.scrolldown span {
    /*描画位置*/
    position: absolute;
    left: -21px;
    bottom: 12vh;
    bottom: 12svh;
    /*テキストの形状*/
    color: var(--primary-black);
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-family: Anton;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 100%;
    letter-spacing: 2px;
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 10vh;
    bottom: 10svh;
    right: -8px;
    /*矢印の形状*/
    width: 3px;
    height: 27px;
    background: var(--primary-black);
    transform: skewX(-31deg);
}

.scrolldown:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 10vh;
    bottom: 10svh;
    right: 0;
    /*矢印の形状*/
    width: 3px;
    height: 60px;
    background: var(--primary-black);
}

/* top PC */
@media screen and (min-width: 769px) {
    .scrolldown {
        position: absolute;
        bottom: 1%;
        right: 0;
    }

    .scrolldown.image-loaded {
        position: absolute;
        bottom: 1%;
        right: 0;
    }

    .mainCopy {
        width: 63%;
        height: auto;
        margin-left: 2vw;
        margin-bottom: 2vw;
    }

    .scrolldown span {
        /*描画位置*/
        position: absolute;
        left: -145px;
        bottom: 170px;
        /*テキストの形状*/
        color: var(--primary-black);
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        font-family: Anton;
        font-weight: 400;
        font-size: 2rem;
        line-height: 100%;
        letter-spacing: 2px;
    }

    /* 矢印の描写 */
    .scrolldown:before {
        content: "";
        /*描画位置*/
        position: absolute;
        bottom: 140px;
        right: 100px;
        /*矢印の形状*/
        width: 5px;
        height: 40px;
        background: var(--primary-black);
        transform: skewX(-31deg);
    }

    .scrolldown:after {
        content: "";
        /*描画位置*/
        position: absolute;
        bottom: 140px;
        right: 112px;
        /*矢印の形状*/
        width: 5px;
        height: 110px;
        background: var(--primary-black);
    }

}

/* pc 769px */

/* ============================
ABOUT
============================ */
.section__about {
    padding: 60px 0;
    background-color: var(--primary-clearBlack);
    align-items: center;
}

.aboutTxt {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 130%;
    margin-top: 20px;
    padding-left: 20px;

}

.btnBox__about {
    display: flex;
    margin-top: 20px;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}

/* about PC */
@media screen and (min-width: 769px) {
    .section__about {
        padding: 160px 0 160px 27vw;
        align-items: flex-start;
    }

    .aboutBox {
        width: 100%;
        height: auto;
        display: flex;
        gap: 6.9%;
        justify-content: flex-start;
        align-items: center;
    }

    .aboutTxt {
        padding: 0;
        font-size: 1.5rem;
        line-height: 150%;
    }

    .btnBox__about {
        align-items: flex-start;
        margin-top: 0;
        width: auto;
    }

}

/* pc 769px */
/* ============================
MENU
============================ */
.section__menu {
    padding: 60px 0;
    align-items: center;
}

.menuBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.menuLink {
    gap: 10px;
    display: flex;
}

.photoMenu {
    display: flex;
    width: 100px;
    height: 100px;
    align-items: center;
    border-radius: 10px;
}

.menuTxt_container {
    display: flex;
    flex-direction: column;

}

.menu_titleContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--primary-white);
    padding: 10px 0px;
}

.menuLink__title {
    font-family: Anton;
    font-size: 3rem;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
}

.menuLink__txt {
    font-size: 1.5rem;
    font-weight: 900;
    text-align: center;
}

.menuLink_arrow {
    width: 26.6px;
    height: 25px;
}
.tax-note {
    width: 80%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 5px;
}
.tax-notetxt {
    font-size: 1.2rem;
    color: black;
}

/* MENU PC */
@media screen and (min-width: 769px) {
    .section__menu {
        padding: 70px 0 160px 27vw;
        align-items: flex-start;
    }

    .menuBox {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .menuLink {
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .menuTxt_container {
        gap: 10px;
    }

    .photoBox {
        overflow: hidden;
        /* 画像が拡大してもはみ出た部分を隠す */
        width: 18.7VW;
        height: 18VW;
        border-radius: 5px;
        position: relative;
        /* 子要素の絶対配置を基準とする */
    }


    .photoMenu {
        transition: transform 0.3s ease;
        /* 拡大のアニメーション */
    }

    .photoBox:hover .photoMenu {
        transform: scale(1.2);
        /* 中身を1.2倍に拡大 */
    }
    .tax-note {
        margin-top: 10px;
    }
    .tax-notetxt {
        font-size: 1.4rem;
    }

    /* テキスト部分のホバー時の効果 */
    .menuLink:hover .menuTxt_container {
        transform: scale(1.1);
        /* テキスト部分を拡大 */
        transition: transform 0.3s ease;
    }

    .photoMenu {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        transition: transform 0.3s ease-in-out;
        /* 拡大をスムーズに */
        position: absolute;
    }


    .menu_titleContainer {
        gap: 5px;
        border-bottom: none;
        padding: 10px 0 0 0;
    }

    .menuLink__title {
        font-size: 3vw;
    }

    .menuLink__txt {
        font-size: 2rem;
    }

    .menuLink_arrow {
        width: 28px;
        height: 26.3px;
    }
}

/* pc 769px */
/* menu TAB */
@media screen and (min-width: 769px) and (max-width: 1000px) {

    .menuLink__title {
        font-size: 3vw;
    }

    .menuLink__txt {
        font-size: 1.6rem;
    }

    .menuLink_arrow {
        width: 18px;
        height: auto;
    }
}

/* pc 769px */
/* ============================
info
============================ */
.section--access {
    background-color: var(--primary-clearBlack);
    padding: 60px 30px 0;
    background-image: url('../images/MAP.png');
    width: 100%;
    height: 1120px;
    background-size: cover;
    /* 画像を要素全体に拡大・縮小して表示 */
    background-position: 80% 665px;
    background-repeat: no-repeat;
    /* 繰り返しを防ぐ */
    justify-content: flex-start;
    align-items: center;
    background-size: 940px auto;
}

.infoBox__title {
    display: flex;
    width: 100%;
    align-items: end;
    gap: 5px;
    justify-content: start;
}

.scheduleBox,
.accessBox,
.parkingBox {
    margin-top: 20px;
}

.infoTitle_schedule,
.infoTitle_access,
.infoTitle_parking {
    font-size: 3rem;
    line-height: 100%;
    font-family: Anton;
    font-weight: 400;
    display: flex;
    justify-content: start;
}

.infoTitle_schedule {
    color: var(--primary-green);
}

.infoTitle_access {
    color: var(--primary-orange);
}

.infoTitle_parking {
    color: var(--primary-yellowB);
}

.accessSchedule__title {
    font-size: 1.4rem;
}

.btnBox__access {
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    display: flex;
}

.btn__access {
    text-transform: capitalize;
}

.accessTxt {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 140%;
    margin-top: 10px;
}
.parking__title,
.parking__txt {
    margin-top: 0;
}
.parking__title {
    color: var(--primary-yellowB);
    font-size: 1.6rem;
}
.parking {
    margin-top: 10px;
}
.tel2 {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}
.tel__icon2 {
    width: 15px;
    height: auto;
    display: flex;
    align-items: center;
}

.txt__tel {
    font-size: 1.4rem;
    line-height: 150%;
}

/* access PC */
@media screen and (min-width: 769px) {
    .infoBox {
        width: 100%;
        display: flex;
        gap: 5vw;
    }

    .infoBox__title {
        display: flex;
        justify-content: start;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .infoTitle_schedule,
    .infoTitle_access,
    .infoTitle_parking {
        font-size: 5rem;
    }
    .scheduleBox,
    .accessBox,
    .parkingBox {
        margin-top: 20px;
    }
    
    .section--access {
        padding: 70px 0 160px 27vw;
        align-items: flex-start;
        height: 1100px;
        background-position: 80% 205px;
        background-size: 1970px auto;
    }

    .btnTxt__container {
        display: flex;
        flex-direction: column;
    }

    .titleContainer_sa {
        margin-bottom: 50px;
    }

    .btnBox__access {
        justify-content: flex-start;
        margin-top: 5px;
    }

    .btnBox__schedule {
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .accessTxt {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 150%;
        margin-top: 0;
    }

    .btn__access {
        width: 268px;
        height: auto;
        display: flex;
        padding: 10px 69px 10px 50px;
        font-size: 2.5rem;
    }

    .btn__access:hover {
        background-color: var(--primary-yellowB);
    }

    .accessSchedule__title {
        color: var(--primary-yellowB);
        font-size: 1.6rem;
        margin-top: 5px;
    }

    .parkingtxt__box {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }

    .parking {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: start;
    }
}

/* pc 769px */

/* ============================
schedule
============================ */
.section--schedule {
    padding: 20px 30px 50px;
}

.schedule_txtBox {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.schedule_txtBox h3 {
    line-height: 130%;
    margin-top: 0;
}

.scheduleBr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.txt__schedule {
    font-size: 1.4rem;
    line-height: 150%;
    margin-top: 10px;
}

.btn__schedule {
    background-color: var(--primary-green);
}

.btn__schedule:hover {
    background-color: var(--primary-yellowB);
}

.btnArrow_schedule {
    display: flex;
    align-items: center;
    width: 28px;
    height: auto;
}

/* carousel */
.carousel__container {
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slick-carousel {
    overflow: hidden;
}

.carousel {
    margin: 0 10px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    gap: 10px;
}

.carousel__item {
    border-radius: 10px;
    margin: 0 10px;
    overflow: hidden;
    width: 305px;
    height: auto;
}

.carousel img {
    width: 100%;
    height: auto;
}

/* 左右矢印のスタイル */
.carousel__arrow {
    width: 20px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    /* 矢印を前面に表示 */
    position: relative;
}

.carousel__prev {
    height: auto;
    margin-right: 10px;
    /* カルーセルとの間に余白 */
}

.carousel__next {
    height: auto;
    margin-left: 10px;
    /* カルーセルとの間に余白 */
}

@media screen and (min-width: 769px) {
    .section--schedule {
        padding: 30px 11% 70px 27vw;
    }

    .schedule_txtBox {
        align-items: flex-start;
    }

    .txt__schedule {
        font-size: 1.4rem;
        font-weight: 900;
        line-height: 150%;
        margin-top: 0;
    }

    .carousel__container {
        margin-top: 80px;
    }

    .carousel__item {
        border-radius: 5px;
        margin: 0 10px;
        overflow: hidden;
        width: 250px;
        height: auto;
    }


}

/* pc 769px */
/* schedule TAB */
@media screen and (min-width: 769px) and (max-width: 1000px) {

    .txt__schedule {
        font-size: 1.4rem;
    }

    .scheduleBr {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .spBr {
        display: block;
    }

}