@charset "UTF-8";
/*==================================================================================================

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:90px;
        z-index: 6;
        }
        
        @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;
        padding:0 30px 30px 30px;
        z-index: 0;
        }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        border-radius: 40px;
        }
        @media screen and (max-width:1600px) {
        .movie { border-radius: 2.5vw; }
        }
        @media screen and (max-width:1500px) {
        .movie-wrap { padding:0 2vw 2vw 2vw; }
        }
        @media screen and (max-width:767px) {
        .movie-wrap { padding:0 15px 15px; }
        }
        
        
        .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 - 120px); }

        .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:1500px) {
        .top-movie{ max-height:calc(100vh - (90px + 2vw)); }
        }

        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:75%; }
        .top-movie{ max-height:100vh; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:90%; }
        }

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

       背景

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

.border-box {
        border:2px solid rgb(59 55 48 / .7);
        padding:8%;
        box-sizing: border-box;
        border-radius: 6px;
        background: rgb(255 255 255 / .3);
        }
        .border-box-m {
        border:6px solid #C6BBA8;
        border-radius: 10px;
        padding:8%;
        box-sizing: border-box;
        background: rgb(255 255 255 / .5);
        }
        .border-box-s {
        border:2px solid rgb(59 55 48 / .7);
        padding:6%;
        box-sizing: border-box;
        border-radius: 6px;
        background: rgb(255 255 255 / .3);
        }

.bg-beige { background: #F9F7F2; position: relative; z-index: 1; }
        .wave-top:before {
        content:"";
        display: block;
        position: absolute;
        top:-50px;
        left:0;
        width:100%;
        height:50px;
        background: url("../images/parts/wave.png") bottom left repeat-x;
        z-index: -1;
        }
        .wave-bottom:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-50px;
        left:0;
        width:100%;
        height:50px;
        background: url("../images/parts/wave.png") bottom left repeat-x;
        rotate:180deg;
        z-index: -1;
        }
        .bottom-grad:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height: 150px;
        background: #FFF;
        background: linear-gradient(0deg, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%);
        z-index: 0;
        }

.green-bg {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .green-bg:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:4200px;
        height:3000px;
        background: url("../images/parts/bg.jpg") center center no-repeat;
        z-index: -1;
        }

.yagi {
        position: relative;
        z-index: 0;
        }
        .yagi:after {
        content:"";
        display:block;
        position: absolute;
        top:-120px;
        left:-120px;
        width:120px;
        height:120px;
        background: url("../images/parts/illust-yagi.svg") center center / cover;
        z-index: 1;
        }
.illust-tree {
        width:100%;
        max-width:160px;
        }

        @media screen and (max-width:1800px) {
        .yagi:after { left:-30px; }
        }
        @media screen and (max-width:1350px) {
        .yagi:after { top:-90px; }
        .illust-tree { max-width:140px; } 
        }
        @media screen and (max-width:1024px) {
        .border-box  { }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:8%; }
        .green-bg:after { top:0%; left:50%; translate:-50% 0; width:1800px; height:100%; background: url("../images/parts/bg-tablet.jpg") no-repeat; }
        .illust-tree { max-width:120px; } 
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:9.5%; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%; }
        .wave-top:before { top:-25px; height:25px; background: url("../images/parts/wave-sp.png") bottom left repeat-x; }
        .wave-bottom:after { bottom:-25px; height:25px; background: url("../images/parts/wave-sp.png") bottom left repeat-x; }
        .yagi:after { top:-70px; left:-20px; width:90px; height:90px; }
        .illust-tree { max-width:100px; } 
        }

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

        タイトル / テキスト

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

.white { color:#F9F6F0 !important; }
.white .en { color:#F9F6F0; }
.red { color:#B9151B;}
.beige { color:#B9B4AC; }
.gray { color:#A8A194; }


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

.under-title {
        padding-bottom:.15rem;
        border-bottom:1px solid #777;
        }
.under-bar {
        position: relative;
        padding-bottom:15px;
        }
        .under-bar:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:50%;
        translate:-50%;
        width:46px;
        height:1px;
        background:#F6F6F6;
        }
.bar-title {
        position: relative;
        padding-top:18px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:46px;
        height:2px;
        background:#404040;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }
        .bg-banner .bar-title:after { background: #FFF; }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:15px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:10px; }
        .bar-title.bar-sp-center:after { left:50%; translate:-50%; }
        }
        
.dotted-title {
        padding-bottom:.15rem;
        border-bottom:2px dotted #857A6B;
        display:block;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:4px;
        background: url("../images/parts/line.svg") repeat-x;
        margin-left:1rem;
        z-index: -1;
        }
.half-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        line-height: 200%;
        z-index: 0;
        }
        .half-lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:1em;
        width:90px;
        height:1px;
        background:#AAA;
        margin-left:1rem;
        z-index: -1;
        }
.center-lead {
        position: relative;
        display:block;
        overflow: hidden;
        width:100%;
        text-align: center;
        z-index: 0;
        }
        .center-lead:before,
        .center-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        width:50%;
        height:1px;
        background:rgb(144 132 107 / .7);
        }
        .center-lead:before { right:50%; margin-right:4em; }
        .center-lead:after { left:50%; margin-left:4em; }

.tate-lead-before {
        position: relative;
        width:100%;
        overflow: hidden;
        padding-top:30px;
        z-index: 0;
        }
        .tate-lead-before:after {
        content:"";
        position: absolute;
        display: block;
        top:0;
        left:40%;
        width:1px;
        height:20px;
        background:#9A9DA0;
        z-index: -1;
        }
        @media screen and (max-width:767px) {
        .sp-yokogaki .tate-lead-before { padding-top:0; padding-left:30px; }
        .sp-yokogaki .tate-lead-before:after { left:0; top:50%;  width:20px; height:1px;}
        }
.tate-lead-after {
        position: relative;
        line-height: 150%;
        z-index: 0;
        }
        .tate-lead-after:after {
        content:"";
        position: absolute;
        display: inline-block;
        left:50%;
        width:1px;
        height:40px;
        background:#89611A;
        margin-top:1rem;
        opacity:.5;
        z-index: -1;
        }
        @media screen and (max-width:767px) {
        .sp-yokogaki .tate-lead-after:after { left:auto; top:50%; margin-top:0; margin-left:1rem; width:40px; height:1px;}
        }
.short-lead {
        position: relative;
        display: inline-block;
        padding:0 5em 0;
        text-align: center;
        line-height: 200%;
        z-index: 0;
        }
        .short-lead:before,
        .short-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:1em;
        width:4em;
        height:1px;
        background:#AAA;
        }
        .short-lead:before { left:0; }
        .short-lead:after { right:0; }

.label-title-s {
        background: #4E4B47;
        color:#FFF;
        line-height: 180%;
        padding:.5rem 1.2em;
        box-sizing: border-box;
        border-radius: 6px;
        }


        .h2em { height:2.3em;   letter-spacing: .1em; }
        .h3em { height:3.4em;   letter-spacing: .1em; }
        .h4em { height:4.5em;   letter-spacing: .1em; }
        .h5em { height:5.6em;   letter-spacing: .1em; }
        .h6em { height:6.7em;   letter-spacing: .1em; }
        .h7em { height:7.8em;   letter-spacing: .1em; }
        .h8em { height:8.9em;   letter-spacing: .1em; }
        .h9em { height:10em;   letter-spacing: .1em; }
        .h10em { height:11.1em;   letter-spacing: .1em; }
        .h14em { height:15.6em;   letter-spacing: .1em; }
        .h17em { height:18.9em;   letter-spacing: .1em; }


.waku-label {
        border:1px solid #4E4B47;
        border-left:5px solid #4E4B47;
        padding:1em 1.25em;
        box-sizing: border-box;
        line-height: 120%;
        }


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

        }
        @media screen and (max-width:1024px) {
        }
        @media screen and (max-width:767px) {
        .half-lead:after { width:2.5em; }
        .short-lead { padding:0 2.5em 0; }
        .short-lead:before, .short-lead:after { width:1.5em; }
        .sp-auto { height:auto; letter-spacing: .05em; }
        .waku-label { padding:1em 1em; }
        }

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

       トップページ

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

        /*=================================================
                News
        ==================================================*/

        .top-news-list li {
        position: relative;
        font-size:1rem;
        line-height: 170%;
        padding: .5rem 0;
        border-bottom:1px dotted rgb(0 0 0 / .45);
        }
        .top-news-list li:last-child { border-bottom:none; }
        .top-news-list li a {
        position: relative;
        font-weight:400;
        color:#4E4B47;
        box-sizing: border-box;
        transition: all 0.3s ease;
        cursor: pointer;
        }
        .top-news-list li .date {
        font-size:12px;
        margin-right:30px;
        color:#4E4B47;
        opacity:1;
        }
        .top-news-list li a:hover { opacity:1; text-decoration: underline; }
        .top-news-list li a:hover:after { left: 0; width: 100%; }

        .top-news-list .catName {
        display: inline-block;
        padding: 7px 8px 8px;
        color: #FFF;
        background: #4E4B47;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 100%;
        margin: 0 12px 0 0 ;
        }
        @media screen and (max-width:767px) {
        .top-news-list .post-title { display: block; padding-top: 5px; margin-left: 0; }
        .top-news-list .catName { padding: 4px 8px 5px; }
        .top-news-list li .date { margin-right:15px; }
        }

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

        .greeting-title {
        width:220px;
        margin:0 auto;
        }
        .greeting-sub-wrap {
        position: relative;
        margin-left:5%;
        width:100%;
        padding-top:3vw;
        }
        .greeting-sub {
        position: relative;
        width:100%;
        box-sizing: border-box;
        padding-left:36%;
        }
        .greeting-sub:after {
        content:"";
        display: block;
        position: absolute;
        left:1%;
        bottom:1%;
        width:25%;
        height:0;
        padding-bottom:25%;
        background: url("../images/parts/illust-tree.svg") center center / cover;
        z-index: -1;
        }
        
        @media screen and (max-width:1600px) {
        .greeting-title { width:13.75vw; }
        .greeting-sub-wrap { margin-left:0; }
        .greeting-text { padding-left:8%; box-sizing: border-box; width:100%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-sub-wrap { padding-top:6vw; }
        .greeting-text { padding:0 0 6vw; margin:0 auto; max-width:600px; }
        .greeting-sub { width:80%; margin:0 auto; padding-left:30%; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { width:27vw; max-width:160px; padding-bottom:3rem; }
        .greeting-sub-wrap { padding-top:3rem; }
        .greeting-text { padding:0 0 3rem; }
        .greeting-sub { width:90% }
        }

        /*=================================================
                Attraction
        ==================================================*/

        .att-img img {
        height:720px;
        }
        @media screen and (max-width:1350px) {
        .att-img img { height:600px; }
        }
        @media screen and (max-width:1150px) {
        .att-img img { height:100%; }
        }

        /*=================================================
                PLAN
        ==================================================*/

        .plan-head {
        position: relative;
        padding-right:200px;
        box-sizing: border-box;
        z-index: 0;
        }
        .plan-head:after {
        content:"";
        display: block;
        position: absolute;
        right:0;
        bottom:1rem;
        width:160px;
        height:160px;
        background:  url("../images/parts/illust-tree.svg") center center / cover;
        z-index: 1;
        }
        @media screen and (max-width:1024px) {
        .plan-head { padding-right:160px; }
        .plan-head:after { width:140px; height:140px; }
        }
        @media screen and (max-width:767px) {
        .plan-head { padding-right:120px; }
        .plan-head:after { width:100px; height:100px; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        border-radius: 0px;
        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") bottom left repeat-x;
        rotate:180deg;
        z-index: 1;
        }

        .banner-wrap a {
        display: block;
        overflow: hidden;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:0;
        padding-bottom:800px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-title {
        position: absolute;
        top:50%;
        right:6%;
        translate:0 -50%;
        width:160px;
        height:auto;
        z-index: 1;
        }
        .banner-text {
        position: absolute;
        left:5%;
        top:50%;
        translate:0 -50%;
        width:360px;
        height:320px;
        background: url("../images/parts/banner-btn-min.png") center center / cover;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        }
        .banner-inner {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:80%;
        line-height: 1;
        z-index: 1;
        }
        .more-reservation {
        width:100%;
        max-width:156px;
        line-height:180%;
        text-align: center;
        color:#FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:30px;
        font-weight:500;
        padding-bottom:.3em;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation:after {
        position: absolute;
        content: "";
        width:160px;
        height:3px;
        bottom:0;
        left: 0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background: url("../images/parts/banner-under.svg") center center repeat;
        }      
        .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 { padding-bottom:700px; }
        .banner-title { width:140px; }
        .banner-text { width:324px; height:288px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { padding-bottom:600px; }
        .banner-title { width:120px; }
        .banner-text { width:288px; height:256px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { padding-bottom:780px; }
        .banner-title { width:100px; top:100px; left:50%; translate:-50% 0; }
        .banner-text { left:50%;top:auto; bottom:125px; translate:-50% 0; }
        .banner-wrap:after { height:25px; background: url("../images/parts/wave-w-sp.png") bottom left repeat-x; }
        }

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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:80vh;
        border-radius: 40px;
        overflow: hidden;
        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:40%;
        width:100%;
        }

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


        @media screen and (max-width:1600px) {
        .page-header { border-radius: 2.5vw; }
        }
        @media screen and (max-width:1500px) {
        .page-header-wrap { padding:0 2vw 2vw 2vw; }
        }
        @media screen and (max-width:767px) {
        .page-header-wrap { padding:0 15px 15px; }
        }


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

.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:24px 30px;
        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: 180px;
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        }
        .page-title h1 {
        position: relative;
        text-align: left;
        line-height:110%;
        font-weight:400;
        color:#FFF;
        z-index: 2;
        }
        @media screen and (max-width:1024px) {
        .page-title { padding:24px 24px; }
        }
        @media screen and (max-width:767px) {
        
        }

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

figure {
        position: relative;
        z-index: 0;
        }
.figure-caption {
        position: absolute;
        display: inline-block;
        bottom:0;
        left:0;
        padding: 5px 13px;
        margin: 0;
        color: #fff;
        background: rgb(0 0 0 / .7);
        font-size: 13px;
        line-height: 120%;
        z-index: 1;
        }
        .figure-caption.top { bottom:auto; top:0; }

        @media screen and (max-width:767px) {
        .figure-caption { font-size:11px; }
        }

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

       下層

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

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

        .facilities-title {
        width:200px;
        margin:0 auto;
        }
        .map-title {
        position: relative;
        width:80px;
        margin:0 auto;
        padding-bottom:160px;
        }
        .map-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:50%;
        translate:-50% 0;
        width:120px;
        height:120px;
        background: url("../images/parts/illust-yagi.svg") center center / cover;
        z-index: -1;
        }
        .rooms-title {
        position: relative;
        width:80px;
        margin:0 auto;
        }
        .rooms-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        translate:150% 0;
        width:140px;
        height:140px;
        background: url("../images/parts/illust-tree.svg") center center / cover;
        z-index: -1;
        }
        .bath-title {
        position: relative;
        width:80px;
        margin:0 auto;
        padding-bottom:150px;
        }
        .bath-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        right:0;
        translate:100% 0;
        width:140px;
        height:140px;
        background: url("../images/parts/illust-tree.svg") center center / cover;
        z-index: -1;
        }
        @media screen and (max-width:1600px) {
        .facilities-title { width:13.75vw; }
        .map-title { width:5.5vw; }
        }
        @media screen and (max-width:1350px) {
        .map-title { padding-bottom:140px; }
        .map-title:after { width:100px; height:100px; }
        .rooms-title { width:6vw; }
        .rooms-title:after { translate:130% 0; width:120px; height:120px; }
        .bath-title { width:6vw; padding-bottom:120px; }
        .bath-title:after { translate:80% 0; width:120px; height:120px; }
        }

        @media screen and (max-width:1024px) {
        .rooms-title:after { translate:130% 0; width:100px; height:100px; }
        .bath-title:after { width:100px; height:100px; }
        }
        @media screen and (max-width:767px) {
        .facilities-title { width:27vw; max-width:160px; padding-bottom:3rem; }
        .map-title { width:11vw; max-width:60px; padding-bottom:3rem; }
        .map-title:after { bottom:3rem; left:auto; right:0; translate:120% 0; width:80px; height:80px; }
        .rooms-title { width:12vw; max-width:60px;  }
        .rooms-title:after { translate:120% 0; width:90px; height:90px; }
        .bath-title { width:12vw; padding-bottom:3rem; }
        .bath-title:after { translate:120% 0; bottom:2rem; width:90px; height:90px; }
        }

        /*=================================================
                CUISINE
        ==================================================*/

        .cuisine-title {
        width:300px;
        margin:0 auto;
        }
        .cuisine-sub img { height:340px;}
        
        .breakfast-img {
        position: relative;
        z-index: 0;
        }
        .breakfast-title-wrap {
        position: absolute;
        bottom:-30px;
        left:0px;
        z-index: 1;
        }
        .breakfast-title-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:580px;
        height:580px;
        background: url("../images/parts/maru.svg") right top / cover;
        z-index: -1;
        }
        .breakfast-title {
        width:360px;
        }
        .water-title {
        width:180px;
        margin-inline:auto;
        }
        @media screen and (max-width:1600px) {
        .cuisine-title { width:18.75vw; }
        .breakfast-title { width:22.5vw; }
        .breakfast-title-wrap:after { width:36.25vw; height:36.25vw; }
        }
        @media screen and (max-width:1500px) {
        .water-title { width:11vw; }
        }
        @media screen and (max-width:1350px) {
        .cuisine-sub img { height:320px;}
        }
        @media screen and (max-width:1024px) {
        .cuisine-sub img { height:100%;}
        .breakfast-title-wrap:after { width:32vw; height:32vw; }
        }
        @media screen and (max-width:767px) {
        .cuisine-title { width:37vw; max-width:160px; padding-bottom:3rem; }
        .breakfast-img { padding-bottom:30%; }
        .breakfast-img img { height:80vw; }
        .breakfast-title { width:40vw; bottom:0px; }
        .breakfast-title-wrap:after { width:55vw; height:55vw; }
        .water-title { width:21vw; }
        }

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

        .faq-q {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        background: #EFEFEF;
        box-sizing: border-box;
        border-radius: 0px;
        color:#404040;
        padding: 1.25rem 1.5rem 1.25rem 4rem;
        cursor: pointer;
        }
        .faq-q:before {
        content: "Q";
        font-family: "Cormorant Garamond", serif;
        font-weight: 400;
        position: absolute;
        color:#404040;
        top: 1.1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;
        }
        .faq-q h3 { padding-right:1.5rem; }
        .faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        box-sizing: border-box;
        padding: 1.25rem 1.5rem 1.25rem 4rem;
        }
        .faq-a:before {
        content: "A";
        font-family: "Cormorant Garamond", serif;
        font-weight: 400;
        position: absolute;
        color:#42403B;
        top: 1.1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;
        }

        @media screen and (max-width:767px) {
        .faq-q { padding:0.75rem 1.5rem; }
        .faq-q:before { font-size: 1.25rem; left:1rem; top:.85rem; opacity:.6; }
        .faq-q h3 { padding-left:1.5rem; }
        .faq-a { padding: 0.75rem 0 .75rem 0; }
        .faq-a:before { display: none; }
        .faq-a p { padding-left:0; }
        }



        /*=================================================
                ACCESS
        ==================================================*/

        .access-text-box {
        width:100%;
        max-width:450px;
        }
        .special-section {
        padding:3rem 0;
        }

        .access-box {
        background: rgb(255 255 255 / .35);
        padding-bottom:1.5rem;
        box-sizing: border-box;
        box-shadow: 0 3px 6px rgb(0 0 0 / .2);
        border-radius: 3px;
        overflow: hidden;
        }
        .access-box.no-head { padding-top:1.5rem; }
        .access-title {
        background:#696663;
        color:#FFF;
        padding:.6em .5rem;
        box-sizing: border-box;
        width:100%;
        text-align: center;
        }
        .access-root li {
        position: relative;
        background:#F9F7F2;
        text-align: center;
        padding:.5rem .5rem;
        box-sizing: border-box;
        border:1px solid rgba(0,0,0,.2);
        border-radius: 2px;
        line-height: 150%;
        font-size:16px;
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:18px;
        }
        .access-root li.road {
        background: none;
        padding:.25rem .5rem;
        font-size:1rem;
        color:#241A08;
        border:none;
        }
        .access-root li:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-18px;
        left:50%;
        width:1px;
        height: 18px;
        background: #777;
        }
        .access-root li:last-child { margin-bottom:0; background:#74afca; color:#FFF;  }
        .access-root li:last-child:after { display: none; }

        @media screen and (max-width:767px) {
        .access-root li { padding:.5rem; }
        }