@charset "UTF-8";

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 10;
        }
        .movie-wrap:before {
        content:"";
        display: block;
        position: absolute;
        bottom:1px;
        left:0;
        width:100%;
        height:3px;
        background: url("../images/parts/line.png") center center repeat-x;
        z-index: 10;
        }
        .movie {
        position: relative;
        width: 100%;
        height:auto;
        background:url("../../movie/top.jpg") center center / cover;
        text-align: center;
        z-index: 1;
        }
        .movie:before {
        content: "";
        display: block;
        padding-top: 41.5%;
        }
        .movie_inner{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        overflow:hidden;
        z-index: 1;
        }
        .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        }
        @media screen and (max-width:1024px) {
        .movie-wrap { margin-top:90px; }
        .movie-wrap:before { bottom:auto; top:1px;}
        .movie:before { padding-top: 41.5%; }
        }
        @media screen and (max-width:767px) {
        .movie-wrap { margin-top:80px;}
        }
        /* --- 下層用 --- */
        .movie.pages:before { padding-top: 56.25%; }  /* 16:9 */
        .movie.pages .movie_inner video{ min-width: 0; min-height: 0; left: 0; transform: translateX(0%); -webkit-transform: translateX(0%); }
        
        .movie.movie-cuisine { background: #222 url("../../movie/cuisine1.jpg") center center / cover; top:0; border-radius: 0; }

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

       背景

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

.bg-black {
        background: url("../images/parts/black.jpg") repeat;
        }
.bg-red {
        background: url("../images/parts/red.jpg") left top repeat;
        }
.bg-beige {
        position: relative;
        background: url("../images/parts/beige.jpg") right top repeat;
        z-index: 1;
        }
        .bg-after-240:after {
        content:"";
        display:block;
        position: absolute;
        bottom:0;
        left: 0;
        width:100%;
        height: 240px;
        background: rgba(183,159,135,.3);
        z-index: -1;
        }

.obi-wrap {
        position: relative;
        z-index: 1;
        }
        .obi-wrap:before {
        content:"";
        display: block;
        position: absolute;
        top:-100px;
        left:50%;
        margin-left:-1050px;
        width:532px;
        height:726px;
        background: url("../images/parts/obi_01.png") center center / cover;
        z-index: -1;
        }
        .obi-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0px;
        right:50%;
        margin-right:-1250px;
        width:703px;
        height:1004px;
        background: url("../images/parts/obi_02.png") center center / cover;
        z-index: -1;
        }
.plans-nami {
        position: relative;
        z-index: 1;
        }
        .plans-nami:after {
        content:"";
        display: block;
        position: absolute;
        top:120px;
        left:-150px;
        width:289px;
        height:130px ;
        background: url("../images/parts/nami.png") center center / cover;
        z-index: -1;
        }
.border-wrap {
        border: 1px solid #707070;
        box-sizing: border-box;
        background: url("../images/parts/background.jpg") repeat;
        }
.bg-section {
        background: url("../images/parts/section-bg.jpg") right top repeat;
        }

        @media screen and (max-width:1024px) {
        .plans-nami:after { top:20px; left:-10px; width:232px; height:104px ; }
        .bg-after-240:after { height: 210px; }
        }
        @media screen and (max-width:767px) {
        .plans-nami:after { left:-80px; width:174px; height:78px ; }
        .bg-after-240:after { height: 160px; }
        .point-wrap { padding:.5rem 1rem; box-sizing: border-box;}
        }

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

       画像

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

.figure {
        position: relative;
        }
        .figure:after {
        content:"";
        display:block;
        position: absolute;
        bottom:0;
        width:200px;
        height:300px;
        z-index: 1;
        }
        .figure.left:after { left:0; background: url("../images/img/facilities/figure-l.png") center center / cover; }
        .figure.right:after { right:0; background: url("../images/img/facilities/figure-r.png") center center / cover; }
        @media screen and (max-width:1024px) {
        .figure:after { width:140px; height:210px; }
        }
        @media screen and (max-width:767px) {
        .figure:after { width:80px; height:120px; }
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.red { color:#800000;}
.shu { color:#D96A50; }
.gold { color:#B79F87;}

.lead-vertical {
        position: relative;
        }
        .lead-vertical:after {
        content:"";
        display:block;
        position: absolute;
        display: inline-block;
        left:50%;
        margin-top:1rem;
        width:1px;
        height: 120%;
        background: #B79F87;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        }
        .lead:after {
        content:"";
        display:block;
        position: absolute;
        display: inline-block;
        top:50%;
        margin-left:1rem;
        width:100%;
        height: 1px;
        background: #B79F87;
        }
.black-label {
        display: inline-block;
        padding:.75em 1em;
        background: url("../images/parts/black.jpg") repeat;
        color:#FFF;
        font-weight:600;
        line-height: 100%;
        }
.shu-label {
        display: inline-block;
        padding:.75em 1em;
        background: url("../images/parts/red.jpg") repeat;
        color:#FFF;
        font-weight:600;
        line-height: 100%;
        }
.obi-title {
        position: relative;
        z-index: 1;
        }
        .obi-title:after {
        content:"";
        display: block;
        position: absolute;
        top:-30px;
        left:40%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:300px;
        height:360px;
        background: url("../images/img/facilities/title-bg.png") center center / cover;
        z-index: -1;
        }
.border-title {
        position: relative;
        padding-bottom:.25rem;
        border-bottom:2px solid #654A25;
        z-index: 0;
        }
        .border-title:after {
        content:"";
        display: block;
        position: absolute;
        right:0;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width:232px;
        height: 104px;
        background: url("../images/parts/nami.png") center center / cover;
        z-index: -1; 
        }
.under-title {
        position: relative;
        padding-bottom:.25rem;
        border-bottom:1px solid #654A25;
        }
.bar-title {
        border-left:5px solid #332D2A;
        padding-left:1em;
        box-sizing: border-box;
        }
.beige-label {
        background: url("../images/parts/black.jpg") left top repeat-x;
        border-bottom:2px solid #C9AF8D;
        border-top:2px solid #C9AF8D;
        padding:.5em 1em;
        box-sizing: border-box;
        line-height: 120%;
        color:#FFF;
        }
        @media screen and (max-width:1024px) {
        .obi-title:after { top:0; left:40%; width:240px; height:288px; }
        .border-title:after { width:174px; height: 78px; }
        }
        @media screen and (max-width:767px) {
        .obi-title:after { top:auto; bottom:0; left:90%; width:145px; height:65px; background: url("../images/parts/nami.png") center center / cover; }
        .border-title:after { width:116px; height:52px; }
        }

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

       トップページ

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

.att-wrap {
        position: relative;
        }
.att {
        width:100%;
        height:660px;
        }
        .att_01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att_02 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .att_03 { background: url("../images/img/top/img_04.jpg") center center / cover; }

        .att-title {
        position: absolute;
        bottom:-40px;
        width:76px;
        right:4%;
        z-index: 1;
        }
        .att-title p {
        background: url("../images/parts/black.jpg") center center repeat;
        color:#FFF;
        padding:1.25rem;
        font-size:1.5rem;
        box-sizing: border-box;
        text-align: center !important;
        height: 240px;
        }

        @media screen and (max-width:1500px) {
        .att { height:0; padding-bottom:110%; }
        .att-title p { padding:1rem 1.25rem; height: 210px; }
        }
        @media screen and (max-width:1024px) {
        .att-title { right:10px; width:54px;}
        .att-title p { padding:.75rem; height: 150px; font-size:18px; }
        }
        @media screen and (max-width:767px) {
        .att { height:0; padding-bottom:66%; }
        }

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

        .banner-wrap {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:300px;
        padding:8px;
        box-sizing: border-box;
        position: relative;
        z-index: 10;
        }
        .banner-wrap-inner {
        position: relative;
        height: 100%;
        border:1px solid rgba(255,255,255,.5);
        }
        .banner-text {
        padding:3rem 1.5rem;
        box-sizing: border-box;
        position: absolute;
        overflow: hidden;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        min-width:400px;
        z-index: 1;
        }
        @media screen and (max-width:1400px) {
        .banner-text { padding:2rem 1rem; min-width:380px; }
        }
        @media screen and (max-width:1024px) {
        .banner-wrap { height:270px; }
        .banner-wrap-s {height:230px; }
        .banner-text { padding:2rem; min-width:320px; }
        .banner-text:after { width:476px; height:371px; }
        .banner-catch { width:160px; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap { height:210px; }
        .banner-wrap-s {height:210px; }
        .banner-text { right:auto; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
        .banner-text:after { width:340px; height:265px; }
        .banner-catch { display:none; }
        }

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

       下層共通

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 20;
        }
        .page-header {
        position: relative;
        width: 100%;
        height:auto;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-top:25%;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        padding-top:22.222222%;
        width:100%;
        }

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


        @media screen and (max-width:1024px) {
        .page-header-wrap { margin-top:90px; }
        .page-header:before { padding-top: 50%; }
        }
        @media screen and (max-width:767px) {
        .page-header-wrap { margin-top:80px; }
        .page-header:before { padding-top:50%; }
        }

.page-title {
        position: absolute;
        top:0;
        left:10%;
        width:130px;
        height:280px;
        background: url("../images/parts/title-label.png") right bottom repeat;
        z-index: 10;
        }
        .page-title h1 {
        position: relative;
        line-height: 130%;
        padding:3.5rem 0 0;
        font-weight:600;
        letter-spacing: .2em;
        color:#222;
        }

        @media screen and (max-width:1350px) {
        .page-title { width:110px; height: 240px; }
        .page-title h1 { padding-top:2rem;}
        }
        @media screen and (max-width:1024px) {
        .page-title { position: relative; top:auto; left: auto; width:100%; height:auto; background: url("../images/parts/black.jpg") repeat; }
        .page-title h1 { color:#FFF; padding:1.5rem 0; }
        }
        @media screen and (max-width:767px) {
        .page-title h1 { padding:1.25rem 0; }
        }

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

       下層

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

.cuisine-greeting {
        background: url("../images/img/cuisine/img_01-1.jpg") center center / cover;
        position: relative;
        z-index: 1;
        }
        .cuisine-wrap {
        position: relative;
        z-index: 1;
        display: flex;
        }
        .cuisine-wrap figure {
        width:25%;
        padding-right:3px;
        box-sizing: border-box;
        }