@charset "UTF-8";

/*==================================================================================================

       hero

===================================================================================================*/

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:90px;
        padding:0 1.5vw 1.5vw;
        z-index: 0;
        }
        .hero-wrap.pages { padding:0 1.5vw; }

        @media screen and (max-width:1350px) {
        .hero-wrap { margin-top:80px; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:100px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:80px; padding:0 3vw; }
        .hero-wrap.pages { padding:0 3vw; }
        .hero-wrap:after { width:200%; padding-bottom:150%; right:40%; top:0;  }
        }

/*==================================================================================================

       Movie

===================================================================================================*/

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        border-radius: 2.6vw;
        z-index: 0;
        }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        /*=================================================
        すべてアスペクト比固定の場合（movieサイズのまま）　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
		height: auto;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
		.top-movie{ max-height:calc(100vh - (90px + 1.5vw)); }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }
        @media screen and (max-width:1350px) {
        .top-movie{ max-height:calc(100vh - (80px + 1.5vw)); }
        }
        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:75%; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:75%; }
        }

        /*=================================================
                下層用
        ==================================================*/

        .movie.pages { z-index: 1; }
        
        .movie.pages .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        position: absolute;
        left: 50%;
        top:50%;
        translate:-50% -50%;
        }
        .movie.pages:before {
        content: "";
        display: block;
        padding-top:56.25%;
        }

        .movie.pages .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.pages .movie_inner video{ height:100% !important; object-fit: cover; }

/*==================================================================================================

       背景

===================================================================================================*/

.border-box {
        position: relative;
        padding:80px;
        border:4px solid rgb(0 0 0 / .6);
        box-sizing: border-box;
        border-radius:40px;
        overflow: hidden;
        z-index: 0;
        }
.bg-maru {
        position: relative;
        z-index: 0;
        }
        .bg-maru:after {
        content:"";
        display: block;
        position: absolute;
        left:50%;
        top:50%;
        translate:0 -50%;
        width:1600px;
        height:1600px;
        background: url("../images/parts/maru.svg") left top / cover;
        z-index: -1;
        animation-name: move;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 6s;
        }

        @keyframes move {
        0% { rotate:5deg; }
        50% { rotate:0deg; }
        100% { rotate:-5deg; }
        }

.bg-green {
        background: #EBF3DD;
        position: relative;
        z-index: 0;
        }
        .bg-green:before,
        .bg-green:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:50px;
        background: url("../images/parts/wave-w.png") repeat-x;
        z-index: 2;
        }
        .bg-green:before { top:-1px; }
        .bg-green:after { bottom:-1px; rotate:180deg; }

.bg-light {
        background: #f9fcf4;
        position: relative;
        z-index: 0;
        }
        .bg-light:before,
        .bg-light:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:50px;
        background: url("../images/parts/wave-w.png") repeat-x;
        z-index: 2;
        }
        .bg-light:before { top:-1px; }
        .bg-light:after { bottom:-1px; rotate:180deg; }

        @media screen and (max-width:1600px) {
        .border-box { padding:5vw; border-radius:2.5vw; }
        .bg-maru:after { left:auto; right:-800px; } 
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        .bg-maru:after { width:1200px; height:1200px; right:auto; left:200px; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:7.5vw; border-radius:5vw; }
        .bg-maru:after { width:1000px; height:1000px; left:50%; translate:-40% -50% ; }
        }

/*==================================================================================================

        タイトル / テキスト

===================================================================================================*/

.white { color:var(--white-color) !important; }
.green { color:#517627; }


.mark {background:linear-gradient(transparent 85%, #DAB212 0%); font-weight:600;}

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(0 0 0 / .6);
        }
.dotted-title {
        padding-bottom:.35rem;
        border-bottom:4px dotted rgb(0 0 0 / .6);
        }
.bar-title {
        padding-top:1.5rem;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        translate:-50%;
        width:45px;
        height:2px;
        background:#517627;
        z-index: -1;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:1px;
        background: rgb(0 0 0 / .6);
        margin-left:1em;
        z-index: -1;
        }
        .lead-s {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead-s:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:44px;
        height:1px;
        background:#517627;
        margin-left:1em;
        z-index: -1;
        }


        @media screen and (max-width:1600px) {
        
        }
        
        @media screen and (max-width:767px) {
        .bar-title:after { height:2px; }
        
        }

/*==================================================================================================

       トップページ

===================================================================================================*/

        /*=================================================
                GREETING
        ==================================================*/

        .greeting-title {
        position: relative;
        width:135px;
        padding-left:4rem;
        z-index: 0;
        }
        .greeting-text {
        padding-top:6rem;
        }
        @media screen and (max-width:1350px) {
        .greeting-title { width:120px; padding-left:3.5rem; }
        }
        @media screen and (max-width:1024px) {
        .greeting-title { width:110px; padding-left:3rem; }
        .greeting-text { padding-top:5rem; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { width:100px; padding-left:2rem; }
        .greeting-text { padding-top:4rem; }
        }

        /*=================================================
                Banner
        ==================================================*/

        .banner-wrap {
        width:100%;
        position: relative;
        color:#FFF;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 1;
        }
        .banner-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:-1px;
        left:0;
        width:100%;
        height:50px;
        background: url("../images/parts/wave-w.png") repeat-x;
        z-index: 2;
        }
        .banner-section {
        width:100%;
        margin-inline:auto;
        max-width:600px;
        }
        .banner-title {
        width:180px;
        margin-inline:auto;
        padding-bottom:6rem;
        }
        .more-reservation {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:20%;
        }
        .more-reservation a {
        position: absolute;
        top:0;
        left:0;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 0.5rem;
        width:100%;
        height:100%;
        line-height:1;
        text-align:center;
        background: url("../images/parts/reservation-btn.svg") center center / cover;
        font-weight:500;
        color:#517627;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1.5rem;
        border-radius:0px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        transition: all 0.3s ease;
        }

        .more-reservation a i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-calendar-green.svg") center center / cover;
        }
        .more-reservation a:hover { opacity:.7; }

        @media screen and (max-width:1350px) {
        .banner-section { max-width:500px; }
        .banner-title { width:160px; padding-bottom:5rem; }
        }
        @media screen and (max-width:1024px) {
        .banner-section { max-width:400px; }
        .more-reservation a { font-size:1.25rem; }
        .banner-title { width:140px; padding-bottom:4rem; }
        }
        @media screen and (max-width:767px) {
        .banner-section { max-width:300px; }
        .banner-title { width:120px; padding-bottom:3rem; }
        }

/*==================================================================================================

       下層 ヘッダー

===================================================================================================*/

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        border-radius: 2.6vw;
        z-index: 0;
        }
        .page-header-wrap{ max-height:calc(100vh - (90px + 1.5vw)); }
        
        @media screen and (max-width:1350px) {
        .page-header-wrap{ max-height:calc(100vh - (80px + 1.5vw)); }
        }

        /*=================================================
                スライドヘッダー
        ==================================================*/

        .page-header-slider {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slickslider-s figure {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slick-slide { margin:0 !important; }
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { width: 100%; height:0; padding-bottom:50%; }
        .page-header-slick:after { content: ""; display: block; }
        .slick-wrap.page-header-slick:after { padding-bottom:50%; }

        .house_01 { background: url("../images/img/house/header_01.jpg") center center / cover; }
        .house_02 { background: url("../images/img/house/header_02.jpg") center center / cover; }
        .house_03 { background: url("../images/img/house/header_03.jpg") center center / cover; }
        .house_04 { background: url("../images/img/house/header_04.jpg") center center / cover; }
        
        .experience_01 { background: url("../images/img/experience/header_01.jpg") center center / cover; }
        .experience_02 { background: url("../images/img/experience/header_02.jpg") center center / cover; }
        .experience_03 { background: url("../images/img/experience/header_03.jpg") center center / cover; }
        .experience_04 { background: url("../images/img/experience/header_04.jpg") center center / cover; }

        @media screen and (max-width:1024px) {
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { height:0; padding-bottom:80%; }
        .slick-wrap.page-header-slick:after { padding-bottom:80%; }
        }

        /*=================================================
                ノーマルヘッダー
        ==================================================*/

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:100vh;
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:50%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .facilities   { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .charge       { background: url("../images/img/charge/header.jpg") center center / cover; }
        .faq          { background: url("../images/img/faq/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }


        @media screen and (max-width: 1024px) {
        .page-header:before { padding-bottom:80%; height:0; }
        .page-header.short:before { padding-bottom:80%; height:0; }
        }

.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:0px 3vw 30px 0;
        color:#FFF;
        width:100%;
        box-sizing: border-box;
        z-index:1;
        }
        .page-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height: 150px;
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        }
        .page-title h2 {
        position: relative;
        text-align: right;
        line-height:150%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }
        .page-title p {
        position: relative;
        text-align: left;
        letter-spacing: 0;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1240px) {
        .page-title { padding:0 3vw 25px 0; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:0 6vw 4vw; }
        }

/*==================================================================================================

       FACILITIES

===================================================================================================*/

        .facilities-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/facilities/img_00.jpg") center center / cover;
        }

        @media screen and (max-width:767px) {
        .facilities-img { padding-bottom:62%; }
        }

/*==================================================================================================

       CHARGE

===================================================================================================*/

        .tab {
        display: inline-block;
        line-height: 1;
        padding:.65em 1.25em;
        background:#343532;
        color:#FFF;
        border-radius: 10px;
        font-size:1.25rem;
        }

/*==================================================================================================

       ACCESS

===================================================================================================*/

        .green-label {
        background: #517627;
        color:#FFF;
        padding:1.5rem 1.75rem;
        box-sizing: border-box;
        display: flex;
        align-items:center;
        justify-content:center;
        width:100%;
        gap:1rem;
        border-radius: 10px;
        line-height: 150%;
        }