@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:70px;
        z-index: 0;
        }
        .toppage .hero-wrap { margin-top:0px; }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0px; }
        .toppage .hero-wrap { margin-top:0px; }
        }

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

       Movie

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

.switch-on1,.switch-on2 { display: none; }
.switch1 .switch-on1 { display: block; }
.switch2 .switch-on2 { display: block; }

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }
        .movie-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgb(0 0 0 / .35);
        z-index: 1;
        }
        .movie-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:40%;
        max-width:660px;
        z-index: 2;
        }
        @media screen and (max-width:1024px) {
        .movie-title { width:50%; }
        }
        @media screen and (max-width:767px) {
        .movie-title { width:80%; }
        }
        
        .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:100vh; }

        .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: 1024px) {
        .movie.top-movie:before { padding-top:70%; }
        .top-movie{ max-height:100vh; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:0%; }
        .top-movie{ height:100vh; }
        }

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

       背景

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

.border-box {
        border:4px solid #4E514E;
        padding:3rem 10%;
        box-sizing: border-box;
        background:#FFF;
        border-radius: 3px;
        }
        .border-box-m {
        border:1px solid #4E514E;
        padding:3rem 4rem;
        box-sizing: border-box;
        background: rgb(246 242 233 / .75);
        border-radius: 3px;
        }
        .border-box-s {
        border:2px solid #707070;
        padding:3rem;
        box-sizing: border-box;
        }
.bg-gray {
        background: #F6F5F2;
        }

        @media screen and (max-width:1024px) {
        .border-box { padding:2.5rem; }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:2rem; }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:2rem; }
        .border-box-m { padding:2rem; }
        .border-box-s { padding:1.75rem; border:2px solid #707070; }
        
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#B9151B;}
.green { color:#2B8666; }
    .green a { color:#2B8666; }

.mark {background:linear-gradient(transparent 60%, #FCE989 60%);}

.under-title {
        padding-bottom:.5rem;
        border-bottom:2px dotted #7D7D7A;
        }
        .under-title-w {
        padding-bottom:.5rem;
        border-bottom:1px solid #F6F0E2;
        }

.bar-title {
        position: relative;
        padding-top:1rem;
        box-sizing: border-box;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:40px;
        height:2px;
        background:#AB8E4F;
        }
        .bar-title.center:after { left:50%; translate:-50%; }

.dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted #857A6B;
        display:block;
        }

.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:#4E514E;
        margin-left:1.5rem;
        z-index: -1;
       }

.center-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .center-lead span {
        position: relative;
        display: inline-block;
        padding:0 1.5rem;
        background:#FFF;
        z-index: 1;
        }
        .center-lead:before {
        content:"";
        position: absolute;
        display: block;
        top:50%;
        left:0;
        height:1px;
        width:100%;
        background:#575654;
        opacity:.5;
        z-index: -1;
        }
.label-title {
        background: #575654;
        padding:1.25rem 1.5rem;
        box-sizing: border-box;
        color:#FFF;
        }

        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        
        }

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

       トップページ

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

        /*=================================================
                Greeting
        ==================================================*/

        .greeting-wrap {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .greeting-wrap:before {
        content:"";
        display: block;
        position: absolute;
        top:-150px;
        right:45%;
        width:2700px;
        height:600px;
        background: url("../images/parts/wave-01.svg") center center / cover;
        z-index: -1;
        }
        .greeting-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0px;
        left:50%;
        width:1200px;
        height:180px;
        background: url("../images/parts/wave-02.svg") center center / cover;
        z-index: -1;
        }
        .greeting-title {
        font-size:45px;
        line-height: 180%;
        }
        .greeting-text {
        font-size: 18px;
        line-height: 300%;
        }
        
        @media screen and (max-width:1350px) {
        .greeting-title { font-size:36px; }
        .greeting-text { font-size:18px; }
        }
        @media screen and (max-width:1024px) {
        .greeting-wrap:before { top:-50px; right:40%;width:1350px; height:300px; }
        .greeting-wrap:after { width:600px; height:90px; left:40%; }
        .greeting-title { font-size:30px; }
        .greeting-text { font-size:17px; line-height: 270%; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { font-size:23px; }
        .greeting-text { font-size:15px; line-height: 250%; }
        }
        @media screen and (max-width:374px) {
        .greeting-title { font-size:6vw; }
        .greeting-text { font-size:3.75vw; }
        }

        /*=================================================
                CONCEPT
        ==================================================*/

        .concept-wrap {
        border:5px solid #DDDDDD;
        overflow: hidden;
        }
        .concept-text {
        padding:13%;
        box-sizing: border-box;
        }
        @media screen and (max-width:1215px) {
        .concept-text { padding:13% 13% 13% 0; }
        .concept-map { width:120%; left:-10%; }
        }
        @media screen and (max-width:1024px) {
        .concept-text { padding:10% 9% 10% 0; }
        .concept-map { width:140%; left:-20%; }
        }
        @media screen and (max-width:767px) {
        .concept-text { padding:3rem 1.75rem 0 1.75rem; }
        .concept-map { width:170%; left:-30%; }
        }

        /*=================================================
                ATTraction
        ==================================================*/

        .att-img {
        padding-bottom:7rem;
        }
        .att-img.img-fit img { height:700px; }
        
        .att-text {
        width:76%;
        max-width:385px;
        margin-inline:auto;
        }
        @media screen and (max-width:1650px) {
        .att-img.img-fit img { height:600px; }
        }
        @media screen and (max-width:1350px) {
        .att-img { padding-bottom:5rem; }
        .att-img.img-fit img { height:550px; }
        }
        @media screen and (max-width:1024px) {
        .att-img.img-fit img { height:450px; }
        .att-text { width:78%; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:3rem; }
        .att-img.img-fit img { height:auto; }
        }

        /*=================================================
                BLOG 一覧
        ==================================================*/

        .news-list-item figure.img-3by2 {
        background: url("../images/parts/thumb.jpg") center center / cover;
        }
        .post-list-title {
        font-size:1rem;
        }
        .post-list-date {
        font-size:.75rem;
        font-weight:400;
        }


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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh - 90px);
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:40%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:450px;
        width:100%;
        }

        .facilities   { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .gallery      { background: url("../images/img/gallery/header.jpg") center center / cover; }
        .experience   { background: url("../images/img/experience/header.jpg") center bottom / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .privacy      { background: url("../images/img/privacy/header.jpg") center center / cover; }
        .blog         { background: url("../images/img/blog/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%; }
        }
        @media screen and (max-width:767px) {
        .page-header:before { padding-bottom:100%; height:0; }
        .page-header.short:before { padding-bottom:100%; }
        }

.page-title {
        position: relative;
        background:#575654;
        padding:20px 40px;
        color:#FFF;
        width:100%;
        box-sizing: border-box;
        z-index:1;
        }
        .page-title h1 {
        position: relative;
        line-height:110%;
        font-weight:900;
        color:#FFF;
        }
        .page-title h1 span { color:#B7A98A; }
        @media screen and (max-width:1350px) {
        .page-title { padding:17px 30px; }
        }
        @media screen and (max-width:1024px) {
        .page-title { padding:15px 30px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:12px 24px;  }
        }

.memo {
        padding:.65rem 1rem;
        background: #F7F6F4;
        box-sizing: border-box;
        line-height: 180%;
        border: 1px solid rgb(0 0 0 / .1);
        }
        .memo-w {
        padding:.5rem 0;
        border-top:1px solid rgba(255,255,255,.5);
        border-bottom:1px solid rgba(255,255,255,.5);
        }
        .memo-w.border-none {
        border-bottom:none;
        }

figure {
        position: relative;
        z-index: 0;
        }
        .figure-caption {
        position: absolute;
        top:-1px;
        left:-1px;
        display: inline-block;
        padding:3px 1rem .5rem 5px;
        background: #FFF;
        color:#111;
        z-index: 1;
        }
.img-wrap {
        position: relative;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .wide-img-sp { width:110%; margin-left:-5%; }
        }

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

       下層

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

        /*=================================================
                FACILITIES
        ==================================================*/

        .room-map {
        width:86.5%;
        margin-inline:auto;
        }
        @media screen and (max-width:1024px) {
        .room-map { width:100%; }
        }
        @media screen and (max-width:767px) {
        .room-map { width:100%; }
        }

        /*=================================================
                GRID
        ==================================================*/


        .grid-container {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        }
        .grid-item { height:100%; }
        .grid-item img {
        height:100%;
        width:100%;
        object-fit: cover;
        }
        .grid-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        }
        .grid-item:nth-child(4) {
        grid-column: 3 / 5;
        grid-row: 2 / 4;
        }
        .grid-item:nth-child(7) {
        grid-column: 1 / 2;
        grid-row: 4 / 6;
        }
        .grid-item:nth-child(11) {
        grid-column: 2 / 4;
        grid-row: 5 / 7;
        }
        .grid-item:nth-child(14) {
        grid-column: 4 / 5;
        grid-row: 6 / 8;
        }
        .grid-item:nth-child(22) {
        grid-column: 1 / 3;
        grid-row: 9 / 11;
        }
        .grid-item:nth-child(25) {
        grid-column: 3 / 5;
        grid-row: 10 / 12;
        }
        .grid-item:nth-child(28) {
        grid-column: 1 / 2;
        grid-row: 12 / 14;
        }
        .grid-item:nth-child(32) {
        grid-column: 2 / 4;
        grid-row: 13 / 15;
        }
        .grid-item:nth-child(35) {
        grid-column: 4 / 5;
        grid-row: 14 / 16;
        }
        .grid-item:nth-child(43) {
        grid-column: 1 / 3;
        grid-row: 17 / 19;
        }
        .grid-item:nth-child(46) {
        grid-column: 3 / 5;
        grid-row: 18 / 20;
        }
        .grid-item:nth-child(49) {
        grid-column: 1 / 2;
        grid-row: 20 / 22;
        }
        .grid-item:nth-child(53) {
        grid-column: 2 / 4;
        grid-row: 21 / 23;
        }
        .grid-item:nth-child(56) {
        grid-column: 4 / 5;
        grid-row: 22 / 24;
        }
        .grid-container.type-b .grid-item:nth-child(18) {
        grid-column: 1 / 3;
        grid-row: 8 / 10;
        }
        .grid-container.type-b .grid-item:nth-child(19) {
        grid-column: 3 / 5;
        grid-row: 8 / 10;
        }
        
        
        @media (max-width: 1024px){
        .grid-container { gap: 6px; }
        .grid-item img { height:auto; }
        .grid-item:nth-child(11) { grid-column: 1 / 3; grid-row: 5 / 7; }
        .grid-item:nth-child(14) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(18) { grid-column: 3 / 5; grid-row:7 / 9; }
        .grid-item:nth-child(19) { grid-column: 1 / 3; grid-row:8 / 10; }
        
        .grid-item:nth-child(22) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(25) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(28) { grid-column: 3 / 5; grid-row: 11 / 13; }
        .grid-item:nth-child(32) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(35) { grid-column: 1 / 3; grid-row: 14 / 16; }
        .grid-item:nth-child(43) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(46) { grid-column: 3 / 5; grid-row: 17 / 19; }
        .grid-item:nth-child(49) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(53) { grid-column: 1 / 3; grid-row: 20 / 22; }
        .grid-item:nth-child(56) { grid-column: inherit; grid-row: auto; }

        .grid-container.type-b .grid-item:nth-child(18) { grid-column: inherit; grid-row: auto; }
        .grid-container.type-b .grid-item:nth-child(19) { grid-column: inherit; grid-row: auto; }
        }
        @media (max-width: 767px){
        .grid-container { grid-template-columns:1fr 1fr; gap: 4px; }
        .grid-item:nth-child(1) { grid-column:  1 / 3; grid-row: auto; }
        .grid-item:nth-child(4) { grid-column:inherit; grid-row: auto; }
        .grid-item:nth-child(7) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(11) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(14) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(18) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(19) { grid-column: inherit; grid-row: auto; }
        
        .grid-item:nth-child(22) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(25) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(28) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(32) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(35) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(43) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(46) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(49) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(53) { grid-column: inherit; grid-row: auto; }
        .grid-item:nth-child(56) { grid-column: inherit; grid-row: auto; }
        
        .grid-item:nth-child(6) { grid-column:  1 / 3; }
        .grid-item:nth-child(11) { grid-column:  1 / 3; }
        .grid-item:nth-child(16) { grid-column:  1 / 3; }
        .grid-item:nth-child(21) { grid-column:  1 / 3; }
        .grid-item:nth-child(26) { grid-column:  1 / 3; }
        .grid-item:nth-child(31) { grid-column:  1 / 3; }
        .grid-item:nth-child(36) { grid-column:  1 / 3; }
        .grid-item:nth-child(41) { grid-column:  1 / 3; }
        .grid-item:nth-child(46) { grid-column:  1 / 3; }
        .grid-item:nth-child(51) { grid-column:  1 / 3; }
        .grid-item:nth-child(56) { grid-column:  1 / 3; }
        .grid-item:nth-child(61) { grid-column:  1 / 3; }

        .grid-container.type-b .grid-item:nth-child(19) { grid-column:  1 / 3; }
        }








        /*=================================================
                FAQ
        ==================================================*/

        .faq-q {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        background:#575654;
        box-sizing: border-box;
        color:#FFF;
        padding: 1.25rem 2rem 1.25rem 5rem;
        }
        .faq-q:before {
        content: "Q";
        font-weight: 700;
        position: absolute;
        color:#FFF;
        top: 1rem;
        left: 2rem;
        line-height: 100%;
        font-size: 2rem;
        }
        .faq-q h3 { /*padding-right:1.5rem;*/ }
        .faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        background:#FFF;
        box-sizing: border-box;
        padding: 1.25rem 2rem 1.25rem 5rem;
        }
        .faq-a:before {
        content: "A";
        font-weight: 700;
        position: absolute;
        color:#868482;
        top: 1rem;
        left: 2rem;
        line-height: 100%;
        font-size: 2rem;
        }

        @media screen and (max-width:767px) {
        .faq-q { padding:1.5rem 2rem; }
        .faq-q:before { font-size: 2rem; left:1.25rem; opacity:.6; }
        .faq-q h3 { padding-left:1.5rem; }
        .faq-a { padding: 1.5rem 2rem; }
        .faq-a:before { left: 1.25rem; font-size: 2rem; opacity: .6; }
        .faq-a p { padding-left:1.5rem; }
        }

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

       BLOG一覧　ページャー

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

        .pagination-wrap {
        position: relative;
        clear: both;
        width:100%;
        }
        .pagination-wrap ul {
        position: relative;
        text-align: center;
        list-style: none;
        }
        .pagination-wrap li {
        position: relative;
        margin-right: .3rem;
        margin-bottom: 5px;
        display:inline-block;
        }
        .pagination-wrap li a {
        display: block;
        color: #263139;
        padding: 15px 0;
        font-size:1rem;
        font-weight:400;
        line-height:1;
        text-align: center;
        width:50px;
        box-sizing: border-box;
        background-color: #FFF;
        border: 1px solid #E6E6E6;
        }
        .pagination-wrap li a:hover {
        background-color:#E6E8EB;
        border: 1px solid #C3C3C3;
        }
        .pagination-wrap li .current {
        display: block;
        color: #FFF;
        padding: 15px 0;
        font-size:1rem;
        line-height:1;
        text-align: center;
        width:50px;
        background-color: #575654;
        border: 1px solid #575654;
        text-decoration: none;
        }
        @media screen and (max-width:767px) {
        .pagination-wrap { padding-top:2rem;}
        .pagination-wrap li a { padding: 12px 0; width:44px; }
        .pagination-wrap li .current { padding: 12px 0; width:44px; }
        }

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

       BLOG 詳細ページ

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

        .post-contents h1{
        border-bottom:2px solid #222;
        font-weight: 500;
        font-size: 1.5rem;
        color:#111;
        position: relative;
        padding-bottom:.5rem;
        }
        .post-date { text-align: right; font-size:.75rem; }

        .post-contents p {
        font-size: 1rem;
        padding-bottom:2rem;
        line-height: 220%;
        }
        .post-contents h2,.post-contents h3,.post-contents h4,.post-contents h5 { padding-bottom:.25rem; margin-bottom:1.5rem; padding-top:1.5rem; border-bottom:2px dotted rgba(0,0,0,.4); }
        .post-contents h2 { font-size:1.325rem; }
        .post-contents h3 { font-size:1.25rem; }
        .post-contents h4 { font-size:1.125rem; }
        .post-contents h5 { font-size:1rem; }
        .post-contents img { padding-bottom:1.5rem; padding-top:.5rem; }


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

       BLOG記事　ページャー

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

.post-pager {
        padding:2em 0 1.5em;
        }
        .prev-pager,
        .next-pager,
        .all-pager {
        height:100%;
        line-height:135%;
        position: relative;
        }
        .prev-pager a {
        display: block;
        width:100%;
        height:100%;
        padding:1.75em 1.5em 1.75em 55px;
        box-sizing:border-box;
        color:#1F1F1F;
        text-align: left;
        -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .prev-pager a:before {
        display: block;
        content: "";
        position: absolute;
        left:0;
        top:50%;
        margin-top:-1px;
        line-height:1;
        padding:0;
        background: #1F1F1F;
        width:40px;
        height:2px;
        -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .prev-pager a:hover {
        padding-left:65px;
        }
        .prev-pager a:hover:before {
        width:50px;
        }
        .next-pager a {
        display: block;
        width:100%;
        height:100%;
        padding:1.75em 55px 1.75em 1.5em;
        box-sizing:border-box;
        color:#1F1F1F;
        text-align: right;
        -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .next-pager a:before {
        display: block;
        content: "";
        position: absolute;
        right:0;
        top:50%;
        margin-top:-1px;
        line-height:1;
        padding:0;
        background: #1F1F1F;
        width:40px;
        height:2px;
        -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .next-pager a:hover {
        padding-right:65px;
        }
        .next-pager a:hover:before {
        width:50px;
        }