@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:70px;
        z-index: 1;
        }

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:96px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        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: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:90%; }
        .top-movie{ max-height:100vh; }
        }

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

       背景

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

.border-box {
        border:6px solid #323334;
        padding:6%;
        box-sizing: border-box;
        border-radius: 1px;
        }
        .border-box-m {
        border:1px solid rgb(50 51 52 / .5);
        padding:8% 10%;
        box-sizing: border-box;
        }
        .border-box-s {
        border:1px solid rgb(50 51 52 / .5);
        padding:8%;
        box-sizing: border-box;
        }
        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        .border-box  { padding:8%; border:5px solid #323334; }
        .border-box-m { padding:2.5rem; }
        .border-box-s {  }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:12% 2rem; border:4px solid #323334; }
        .border-box-m { padding:2rem; }
        .border-box-s {  }
        }

.bg-gray {
        background: #F4F5F5;
        }
.white-box {
        background: #FFF;
        padding:6%;
        box-sizing: border-box;
        }


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

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#B9151B;}
.green { color:#1F3C33; }
    .blue a { color:#2D4581; }


.mark {background:linear-gradient(transparent 60%, #f7ebbd 60%);}
.mark-w {background:linear-gradient(transparent 60%, rgb(144 131 55 / 1) 60%);}

.under-title {
        padding-bottom:.5rem;
        border-bottom:1px solid rgb(0 0 0 / .5);
        }
        .under-title-w {
        padding-bottom:.5rem;
        border-bottom:1px solid rgb(255 255 255 / .3);
        }

.dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted #857A6B;
        display:block;
        }
.short-lead {
        position: relative;
        display: inline-block;
        padding:0 4.5em 0 0;
        z-index: 0;
        }
        .short-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.45em;
        right:0;
        width:3.5em;
        height:1px;
        background:#313234;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background:rgb(50 51 52 / .3);
        margin-left:1rem;
        z-index: -1;
        }

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

       トップページ

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

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

        .greeting-left {
        margin-top:95%;
        width:100%;
        height:0;
        padding-bottom:127.777%;
        background: url("../images/img/top/img_01-2.jpg") center center / cover;
        }
        .greeting-title {
        font-size:36px;
        }
        .greeting-text {
        padding-left:22%;
        line-height: 250%;
        box-sizing: border-box;
        }
        .greeting-section hgroup {
        padding-bottom:5rem;
        }
        .greeting-img {
        padding-top:5%;
        }
        .greeting-img-01 {
        width:100%;
        height:0;
        padding-bottom:113.3333%;
        background: url("../images/img/top/img_01-1.jpg") center center / cover;
        }
        .greeting-img-wrap {
        position: relative;
        }
        .greeting-img-wrap figure:nth-child(1) {
        position: relative;
        padding:6% 55% 5% 15%;
        box-sizing: border-box;
        width:100%;
        }
        .greeting-img-wrap figure:nth-child(2) {
        position: absolute;
        bottom:0%;
        right:12%;
        width:24%;
        }
        .greeting-img-wrap figure:nth-child(3) {
        position: absolute;
        left:0;
        top:0;
        width:27%;
        display: none;
        }
        @media screen and (max-width:1750px) {
        .greeting-left { margin-top:105%; }
        .greeting-img { height:100%; position: relative; }
        .greeting-img-01 { height:100%; padding-bottom:0; }
        }
        @media screen and (max-width:1600px) {
        .greeting-text { padding-left:15%; }
        .greeting-left { padding-bottom:150%; }
        }
        @media screen and (max-width:1500px) {
        .greeting-title { font-size:30px; }
        .greeting-section hgroup { padding-bottom:4rem; }
        .greeting-img-wrap figure:nth-child(1) { padding:3% 55% 5% 15%; }
        .greeting-text { line-height: 225%; }
        }
        @media screen and (max-width:1350px) {
        .greeting-title { font-size:27px; }
        .greeting-section { padding-left:12%; box-sizing: border-box; }
        .greeting-section hgroup { padding-bottom:3rem; }
        .greeting-text { padding-left:0; }
        .greeting-text { line-height: 210%; }
        .greeting-img-wrap figure:nth-child(1) { padding:6% 36% 5% 36%; }
        .greeting-img-wrap figure:nth-child(2) { right:7%; width:19%; }
        .greeting-img-wrap figure:nth-child(3) { display: block ;}
        }
        @media screen and (max-width:1024px) {
        .greeting-title { font-size:24px; }
        .greeting-section hgroup { padding-bottom:2rem; }
        .greeting-img-01 { height:0; padding-bottom:150%; margin-top:30%; }
        .greeting-text { line-height: 200%; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { font-size:21px; }
        .greeting-text { line-height: 180%; }
        .greeting-img-01 { height:0; padding-bottom:100%; margin-top:0; width:90%; margin-inline:auto; }
        .greeting-section { padding:0 2rem 0; }
        .greeting-img-wrap figure:nth-child(1) { padding:6% 45% 67% 8%; }
        .greeting-img-wrap figure:nth-child(2) { bottom:34%; right:0%; width:39%; }
        .greeting-img-wrap figure:nth-child(3) { top:auto; bottom:0; width:45%; }
        
        }

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

        .bg-att {
        background: url("../images/img/top/bg-01.jpg") center center / cover;
        }
        .att-img {
        position: relative;
        }
        .att-01 {
        position: relative;
        padding:0 12% 8% 0;
        box-sizing: border-box;
        z-index: 0;
        }
        .att-02 {
        position: absolute;
        bottom:0;
        right:0;
        width:31%;
        z-index: 1;
        }
        
        /*=================================================
                Banner
        ==================================================*/

        .banner-outer {
        padding:0 2.5vw;
        box-sizing: border-box;
        }

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        border-radius: 0px;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:450px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        right:5%;
        top:50%;
        translate:0 -50%;
        width:80%;
        max-width:340px;
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        .more-reservation {
        width:100%;
        height:64px;
        line-height:64px;
        text-align: center;
        color:#FFF;
        background: #3890E7;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .3);
        }      
        .banner-wrap a:hover .more-reservation { opacity:1;  }
        .banner-wrap a:hover .more-reservation:after { left:0; width:100%; }

        @media screen and (max-width:1350px) {
        .banner-img { height:400px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:320px; }
        .banner-text { max-width:300px; }
        .more-reservation { height:60px; line-height:60px; }
        }
        @media screen and (max-width:767px) {
        .banner-outer { padding:0 6vw; }
        .banner-img { height:240px; }
        .banner-text { max-width:100%; width:100%; position: relative; right:auto; padding:2rem 2rem; box-sizing: border-box; background:#313234; translate:0; }
        .more-reservation { height:56px; line-height:54px; }
        }
/*==================================================================================================

       下層 ヘッダー

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

.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:100vh;
        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:30%;
        width:100%;
        }

        .facilities   { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .charge       { background: url("../images/img/charge/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%; }
        }

.page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:2rem 3vw 1.5rem;
        box-sizing: border-box;
        background: rgb(19,18,18);
        background: linear-gradient(180deg, rgba(19,18,18,0) 0%, rgba(19,18,18,0.9) 100%);
        text-align: center;
        color:#FFF;
        z-index:2;
        }
        .page-title h1 {
        position: relative;
        overflow: hidden;
        color:#FFF;
        }
        @media screen and (max-width:1350px) {
        .page-title { padding:1.25rem 3vw; }
        }
        @media screen and (max-width:1024px) {
        .page-title { padding:1.25rem 3vw; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:.925rem 3vw;  }
        }

.memo {
        padding:.5rem 0;
        box-sizing: border-box;
        line-height: 180%;
        border-top: 1px solid rgb(0 0 0 / .3);
        border-bottom: 1px solid rgb(0 0 0 / .3);
        }
        .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;
        display: inline-block;
        top:0;
        left:0;
        padding: 3px 10px;
        margin: 0;
        color: #fff;
        background: rgb(0 0 0 / .9);
        font-size: .975rem;
        z-index: 1;
        }
.img-wrap {
        position: relative;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .wide-img-sp { width:calc(100% + 15vw); margin-left:-7.5vw; }
        }

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

       下層

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

        .facilities-img-01 {
        position: relative;
        margin-bottom:12%;
        }
        .facilities-img-01 figure:nth-child(1) {
        position: relative;
        padding:12% 12% 16% 0;
        box-sizing: border-box;
        z-index: 0;
        }
        .facilities-img-01 figure:nth-child(2) {
        position: absolute;
        bottom:0;
        right:-10%;
        width:45%;
        z-index: 1;
        }
        .facilities-img-02 {
        position: relative;
        }
        .facilities-img-02 figure:nth-child(1) {
        position: relative;
        padding:12% 0 16% 12%;
        box-sizing: border-box;
        z-index: 0;
        }
        .facilities-img-02 figure:nth-child(2) {
        position: absolute;
        bottom:0;
        left:-10%;
        width:42%;
        z-index: 1;
        }
        .facilities-text {
        padding:12% 10% 0;
        box-sizing: border-box;
        }

        @media screen and (max-width:767px) {
        .facilities-img-01 { margin-bottom:0; }
        .facilities-text { padding:10% 0 0; }
        .facilities-img-02 { margin-bottom:10%; }
        }

        .guide-01 {
        position: relative;
        padding:8% 45% 4% 0;
        box-sizing: border-box;
        z-index: 0;
        }
        .guide-02 {
        position: absolute;
        right:6%;
        bottom:0;
        width:30%;
        }