@charset "UTF-8";

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

       Movie

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

.movie-wrap {
    position: relative;
    z-index: 0;
    }
    .movie {
        position: relative;
        width: 100%;
        height:auto;
        background:url("../movie/top.jpg") no-repeat center;
        background-size:cover;
        text-align: center;
        }
        .movie:before {
        content: "";
        display: block;
        padding-top: 50%;
        }
        .movie_inner{
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            overflow:hidden;
            z-index: 0;
            }
            .movie_inner video{
            width:100%;
            height:auto !important;
            margin-left:auto;
            margin-right:auto;
            }

        @media screen and (min-width:1900px) {
        .movie:before {padding-top: 950px;}
        }
        @media screen and (max-width:1024px) {
        .movie:before {padding-top: 55%;}
        
        .movie-text-wrap { width: 124px; }
        .movie-text { font-size:24px; line-height:180%;}
        }
        @media screen and (max-width:767px) {

        .movie:before {padding-top:55%;}
        
        .movie-text-wrap { width: 76px; display:none; }
        .movie-text { font-size:15px; line-height:150%; letter-spacing: .05em;}
        }
    /* --- 下層用 --- */
    .movie.movie-onsen { background: #222 url("../movie/onsen.jpg") center center / cover; top:0; }
    .movie.pages:before { padding-top: 56.25%; } /* 16:9 */

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

       背景

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

.bg-blue {background:#031528; color:#FFF; }
        .bg-blue a { color:#FFF; }
        .sns-box { padding:3rem; box-sizing: border-box;}
.gray-box { background: rgba(0,0,0,.05); padding:2.5rem; }
.border-box { border:1px solid #CCC; padding:2.5rem; }
.bg-gray { background: rgba(3,14,20,.06);}

.bg-section {
        background: rgb(3,21,40);
        background: linear-gradient(0deg, rgba(3,21,40,0) 0%, rgba(3,21,40,0.05) 100%);
        }


        @media screen and (max-width:1024px) {
        .gray-box { padding:2rem; }
        .border-box { padding:2rem; }
        }
        @media screen and (max-width:767px) {
        .gray-box { padding:1.5rem; }
        .border-box { padding:1.5rem; }
        .sns-box { padding:1rem; }
        }


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

       画像

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


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

        タイトル / テキスト

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

.gold { color:#614230;}
.mark-title {
        position: relative;
        padding-left:40px;
        box-sizing: border-box;
        }
        .mark-title:before {
        content:"";
        display: block;
        position: absolute;
        left:0;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width:30px;
        height:30px;
        background: url("../images/parts/title.png") center center / cover;
        }
.mark-title-center {
        position: relative;
        padding-top:50px;
        box-sizing: border-box;
        }
        .mark-title-center:before {
        content:"";
        display: block;
        position: absolute;
        left:50%;
        top:0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:30px;
        height:30px;
        background: url("../images/parts/title.png") center center / cover;
        }
.section-title {
        position: relative;
        padding-bottom:25%;
        width:100%;
        }
        .section-title .inner {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        background: rgba(3,21,40,.85);
        z-index: 1;
        color:#FFF;
        }
        .section-title h2 {
        line-height: 100%;
        padding:1em;
        }
        
        @media screen and (max-width: 1024px) {
        .mark-title { padding-left:28px; }
        .mark-title:before { width:21px; height:21px; }
        .mark-title.tab-center { padding-left:0; padding-top:28px; }
        .mark-title.tab-center:before { top:0; left:50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
        .mark-title-center { padding-top:28px; }
        .mark-title-center:before { width:21px; height:21px; }
        .section-title { padding-bottom:35%;}
        }
        @media screen and (max-width: 767px) {
        .mark-title { padding-left:24px; }
        .mark-title:before { width:18px; height:18px; }
        .mark-title-center { padding-top:24px; }
        .mark-title-center:before { width:18px; height:18px; }
        .section-title { padding-bottom:50%;}
        }
/*==================================================================================================

       トップページ

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

.greeting {
        position: relative;
        width:100%;
        height:auto;
        padding-bottom:72%;
        z-index: 10;
        }
        .gtext_01 {
        position: absolute;
        left:50%;
        margin-left:-38.88888%;
        width:33.33333%;
        top:0;
        }
        .gtext_02 {
        position: absolute;
        top:60%;
        left:50%;
        margin-left:-6%;
        width:33.33333%;
        }
        .gimg_01 {
        position: absolute;
        left:50%;
        top:0;
        width:50%;
        padding-bottom:37.5%;
        }
        .gimg_02 {
        position: relative;
        left: -16%;
        margin-top: 5rem;
        width: 100%;
        padding-bottom: 66%;
        }
        .gimg_03 {
        position: absolute;
        right:-2%;
        top:60%;
        width:20%;
        padding-bottom:25%;
        }

        .side-img {
        width:88%;
        padding-bottom:22%;
        }
        .side-img.right { margin-left:12%;}
        .side-img.left { margin-right:12%;}

        .top_01 { background: url("../images/img/top/img_01-1.jpg") center center / cover; }
        .top_02 { background: url("../images/img/top/img_01-2.jpg") center center / cover; }
        .top_03 { background: url("../images/img/top/img_01-3.jpg") center center / cover; }
        .top_04 { background: url("../images/img/top/img_02-3.jpg") center center / cover; }
        .top_05 { background: url("../images/img/top/img_03-3.jpg") center center / cover; }


.att {
        width:100%;
        height:0;
        padding-bottom:550px;
        }
        .att_01 { background: url("../images/img/top/img_02-1.jpg") center center / cover; }
        .att_02 { background: url("../images/img/top/img_02-2.jpg") center center / cover; }
        .att_03 { background: url("../images/img/top/img_03-1.jpg") center center / cover; }
        .att_04 { background: url("../images/img/top/img_03-2.jpg") center center / cover; }

        @media screen and (min-width: 2070px) {
        .side-img { padding-bottom:450px; }
        }
        @media screen and (max-width: 1500px) {
        .greeting { margin-bottom:5rem; }
        .gtext_02 { margin-left:0%; width:28%; }
        .gimg_02 {margin-top: 3.5rem;}
        }
        @media screen and (max-width: 1300px) {
        .greeting { margin-bottom:10rem; }
        }
        @media screen and (max-width: 1250px) {
        .greeting { margin-bottom:18rem; }
        }
        @media screen and (max-width: 1024px) {
        .greeting { padding-bottom:0; margin-bottom:8rem; }
        .gtext_01 { position: relative; left:3%; margin-left:0; width:94%; top:auto; }
            .gtext_01 .inner { margin:0 5%;}
        .gtext_02 { position: relative; top:auto; left:0; margin:3.5rem 0; width:100%; padding:0 8%; box-sizing: border-box; }
        .gimg_01 { position: relative; left:3%; top:auto; width:94%; padding-bottom:56%; margin-bottom:3.5rem; }
        .gimg_02 { left: 0; margin-top: 3.5rem; width: 100%;  padding-bottom: 60%; }
        .gimg_03 { display:none; position: relative; right:0; top:auto; width:88%; padding-bottom:50%; }
        
        .side-img { width:91%; padding-bottom:29%; }
        .side-img.right { margin-left:9%;}
        .side-img.left { margin-right:9%;}
        
        .att { padding-bottom:80%; }
        }

.border-l { border-left:1px solid rgba(255,255,255,.4); box-sizing: border-box; }
#youtube .wrap{
	width:100%;max-width: 1200px; height: auto;text-align: center; margin-inline: auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}
#youtube .wrap iframe{
	width:100%;
	height: auto;
	aspect-ratio:560 / 315;
}

@media screen and (max-width:767px){
#youtube .wrap{
	max-width: 350px;
    grid-template-columns: 1fr;
}	
}
/*==============================================
       NEWS
==============================================*/
.news-wrap {
        box-sizing:border-box;
        margin-bottom:1.5rem;
        }
        .news-list {
        width:100%;
        }
        .news-list li {
        line-height:150%;
        padding:.5rem;
        font-size:.9375rem;
        }
        .news-list li a {
        border-bottom:1px solid rgba(0,0,0,.0);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        }
        .news-list li a:hover { border-bottom:1px solid #999; }
        .news-list span {
        width:5em;
        display:inline-block;
        padding-right:1rem;
        }

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

       下層共通

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

.page-header-wrap {
        position: relative;
        z-index: 20;
        }
        .page-header {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: auto;
            text-align: center;
            }
            .page-header:before {
            content: "";
            display: block;
            padding-top:60%;
            width:100%;
            }
            .page-header.short:before {
            padding-top:300px;
            }
            @media screen and (max-width:1024px) {

            .page-header.short:before { padding-top:350px; }
            }
            @media screen and (max-width:767px) {
            .page-header:before {padding-top:75%;}
            .page-header.short:before { padding-top:75%; }
            }

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

.page-title {
        position: relative;
        padding-top:2em;
        z-index: 10;
        }
        .page-title h1 {
        position: relative;
        width:100%;
        box-sizing: border-box;
        line-height: 100%;
        margin:1em 0 0;
        padding-left:60px;
        }
        .page-title h1:before {
        content:"";
        display: block;
        position: absolute;
        left:0;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width:45px;
        height:45px;
        background: url("../images/parts/title-l.png") center center / cover;
        }
        @media screen and (max-width: 1024px) {
        .page-title h1 { padding-left:48px; }
        .page-title h1:before { width:36px; height:36px; }
        }
        @media screen and (max-width: 767px) {
        .page-title h1 { padding-left:36px; }
        .page-title h1:before { width:27px; height:27px; }
        }

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

       下層

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

.page_01 {
        margin-left:-10%;
        width:92%;
        padding-bottom:66%;
        }
        .page_02 {
        width:120%;
        padding-bottom:90%;
        margin-bottom:2rem;
        }
        .page_03 {
        width:105%;
        padding-bottom:110%;
        margin-left:-5%;
        }
        .page_04 {
        width:100%;
        padding-bottom:110%;
        }




        .cui_01 { background: url("../images/img/cuisine/img_01-2.jpg") center center / cover; }
        .cui_02 { background: url("../images/img/cuisine/img_01-1.jpg") center center / cover; }
        .cui_03 { background: url("../images/img/cuisine/img_01-3.jpg") center center / cover; }
        .cui_04 { background: url("../images/img/cuisine/img_01-4.jpg") center center / cover; }
        .cui_05 { background: url("../images/img/cuisine/img_02.jpg") center center / cover; }
        .fac_01 { background: url("../images/img/facilities/img_01-2.jpg") center center / cover; }
        .fac_02 { background: url("../images/img/facilities/img_01-1.jpg") center center / cover; }
        .fac_03 { margin-left:10%;}
        .fac_04 { margin-top:-10%; margin-left:10%; position: relative; z-index: -1;}
        .fac_05 { background: url("../images/img/facilities/img_02.jpg") center center / cover; }
        .fac_06 { background: url("../images/img/facilities/img_10.jpg") center center / cover; }

        @media screen and (max-width: 1024px) {
        .page_01 { margin-left:3%; width:94%; }
        .page_02 { margin-bottom:1rem; width:94%; margin-left:3%; padding-bottom:66%; }
        .page_03 { width:94%; margin-left:6%; }
        .page_04 { width:94%; margin-right:6%; }
        .fac_01 { padding-bottom:50%; }
        .fac_02 { padding-bottom: 50%; margin-top:1rem; margin-bottom:0;}
        .fac_03 { margin-left:3%; width:94%;}
        .fac_04 { display:none; }
        }
        @media screen and (max-width: 767px) {

        }



.info_btn{text-align: center; margin:3rem 0 0 0;}
.info_btn a{cursor:pointer; padding:0.5rem 2rem; border: #993333 1px solid; color:#993333; display: inline-block;}

.popup_info_box{}
.popup_info_box h3{font-size:21px; margin:0 0 1rem 0;}

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

     .popup_info_box p{text-align: left;}   
     
 }



 .accordion {
  width: 100%;
  margin: 3rem auto;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1em 1em;
  background: #031528;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size:16px;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #031528;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item {position: relative;}

.accordion__item > .accordion-header:after {
    content: '';
    background: url(../images/img/accordion_icon.svg) center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: .3s all;
    transform: rotate(0deg);
    width: 20px;
    height: 20px;
    vertical-align: middle;
    position: absolute;
    z-index: 1000;
    top:22px;
    right:25px;
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #031528; color:#fff; 
}

.accordion__item .accordion__item .accordion-header {
  background: #031528;
  color: fff;
}