@charset "UTF-8";

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

       Mainvisual

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

.main-visual {
        margin-top:90px;
        position: relative;
        z-index: 1;
        }
.main-slider {
        position: relative;
        z-index: 1;
        }
        .main-slider:after {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.2);
        z-index: 10;
        }
.main-slider div {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: calc(100vh - 90px);
        margin: 0;
        }
        .main-slider div.main-01 { background-image:url("../images/img/top/slide_01.jpg")}
        .main-slider div.main-02 { background-image:url("../images/img/top/slide_02.jpg")}
        .main-slider div.main-03 { background-image:url("../images/img/top/slide_03.jpg")}
        .main-slider div.main-04 { background-image:url("../images/img/top/slide_04.jpg")}
        .main-slider div.main-05 { background-image:url("../images/img/top/slide_05.jpg")}
        .main-slider div.main-06 { background-image:url("../images/img/top/slide_06.jpg")}
        .main-slider .slick-dots {
        display: none !important;
        }
        @media screen and (max-width:1280px) {
        .main-slider div { height:0; padding-bottom:55%;}
        }
        @media screen and (max-width:1024px) {
        .main-visual { margin-top:80px; }
        }

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

       背景

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

.bg-half {
        position:relative;
        z-index: 2;
        }
        .bg-half:before {
        content:"";
        display: block;
        position: absolute;
        bottom: 0;
        left:0;
        width:100%;
        height:50%;
        background: rgba(112,155,159,.15);
        z-index: -1;
        }
.white-wrap {
        background: #FFF;
        padding:3.5rem;
        box-sizing: border-box;
        }
.cuisine-wrap {
        background: url("../images/img/cuisine/img_01-0.jpg") center center / cover;
        }
.onsen-wrap {
        position: relative;
        z-index: 1;
        }
        .onsen-wrap:after {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/onsen/img_01-0.jpg") center bottom / cover;
        z-index: -1;
        }
.white-box {
        background: #FFF;
        padding:2.5rem;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .white-wrap { padding:2.75rem; }
        .white-box { padding:1.75rem; }
        }
        @media screen and (max-width:767px) {
        .white-wrap { padding:1.75rem; }
        .white-box { padding:1.5rem; }
        }

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

       画像

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


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

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

        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.red { color:#800000;}
.gold { color:#927A5A;}

.lead { color:rgba(146,122,90,.25); line-height: 100%; }
.bar-title {
        border-left:5px solid #333;
        padding-left:1em;
        box-sizing: border-box;
        color:#333;
        }
.under-title {
        border-bottom:1px dotted #666;
        border-left:5px solid #666;
        padding-bottom:.25rem;
        padding-left:1em;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        
        }

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

       トップページ

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

.greeting {
        position: relative;
        margin-top:-2.5rem;
        background: #FFF;
        padding:4rem;
        border-radius: 6px;
        box-sizing: border-box;
        }
        .greeting-lead {
        color:rgba(57,55,53,.05);
        font-size:120px;
        position: relative;
        margin-bottom: -3rem;
        padding-left:3rem;
        line-height: 100%;
        }
        @media screen and (max-width:1350px) {
        .greeting-lead { font-size:100px; }
        }
        @media screen and (max-width:1024px) {
        .greeting { margin-top:-1.8rem; }
        .greeting-lead { font-size:80px; }
        }
        @media screen and (max-width:767px) {
        .greeting { padding:2.25rem; margin-top:-1rem; }
        .greeting-lead { font-size:45px; margin-bottom:-1rem; padding-left:0; }
        }
        @media screen and (max-width:375px) {
        .greeting-lead { font-size:10vw; }
        }

        /*=================================================
                ボタンエフェクト
        ==================================================*/

        .btn-wrap {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:480px;
        overflow: hidden;
        }
        .btn-wrap:before {
        content: "";
        display: block;
        padding-bottom:60%;
        }
        .btn-img {
        position:absolute;
        top:0;
        width:100%;
        height:100%;
        z-index: 10;
        -webkit-transition  : all .3s ease;
        -moz-transition : all .3s ease;
        -ms-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .btn-img:after {
        content:"";
        display:block;
        position: absolute;
        width:100%;
        height: 100%;
        top:0;
        left:0;
        background: rgba(0,0,0,.6);
        -webkit-transition  : all .3s ease;
        -moz-transition : all .3s ease;
        -ms-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .btn_01 { background: url("../images/img/top/img_01.jpg") center center / cover; }
        .btn_02 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .btn_03 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .btn-wrap:hover .btn-img {
        -moz-transform:    scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform:     scale(1.1);
        transform:         scale(1.1);
        }
        .btn-wrap:hover .btn-img:after {
        background:rgba(0,0,0,.1);
        }
        .btn-wrap .btn-cover {
        position: absolute;
        color:#FFF;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left:0;
        width:100%;
        text-align: center;
        z-index: 100;
        }
        .btn-lead {
        font-size:90px;
        color:rgba(255,255,255,.25);
        line-height: 100%;
        margin-bottom:-2rem;
        }
        .btn-sub { padding-bottom:1.5rem; }
        .btn-more {
        width:165px;
        height:50px;
        line-height: 50px;
        background: url("../images/parts/orange.jpg") repeat;
        color:#FFF;
        border-radius:2px;
        margin-left:auto;
        margin-right:auto;
        }

        @media screen and (max-width:1350px) {
        .btn-wrap { padding-bottom:420px; }
        .btn-lead { font-size:75px; }
        }
        @media screen and (max-width:1024px) {
        .btn-wrap { padding-bottom:350px; }
        .btn-lead { font-size:58px; }
        }
        @media screen and (max-width:767px) {
        .btn-wrap { padding-bottom:270px; }
        .btn-lead { font-size:42px; margin-bottom:-1rem; }
        }

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

        .news-list-inner {
        padding:1rem 15%;
        box-sizing: border-box;
        }
        .news-list {
        width:100%;
        }
        .news-list-date {
        font-size:.825rem;
        padding-bottom:.75rem;
        }
        .news-list h3 {
        font-size:1rem;
        }
        .column-border .inner {
        border-left:1px solid #B8B8B8;
        }
        .column-border:last-child .inner { border-right: 1px solid #B8B8B8; }
        @media screen and (max-width:1024px) {
        .news-list-inner { padding:1rem 10%; }
        }
        @media screen and (max-width:767px) {
        .news-list li { border-bottom:1px dotted rgba(0,0,0,.3); }
        .news-list li:last-child { border-bottom:none; }
        .news-list span { display:block; }
        .column-border .inner { border: none; border-bottom:1px dotted #B8B8B8; }
        .column-border:last-child .inner { border: none; }
        .news-list-inner { padding:1rem 0; }
        .news-list-date { padding-bottom:.25rem; }
        }

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

        .banner-wrap {
        width: 100%;
        height: auto;
        overflow: hidden;
        }
        .banner-wrap a {
        display: block;
        width:100%;
        height:100%;
        position: relative;
        z-index: 10;
        }
        .banner-wrap a:hover {
        opacity: 1;
        }
        .banner-img {
        position: relative;
        width:100%;
        height: 400px;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        }
        .banner-img.short { height:300px;}
        .banner-wrap a:after {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgba(0,0,0,.0);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        z-index: 1;
        }
        .banner-wrap a:hover:after {
        background: rgba(0,0,0,.6);
        }
        .banner-content {
        position: absolute;
        width: 100%;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        color: #FFF;
        z-index: 5;
        }
        a .banner-bar {
        position: relative;
        display: block;
        padding-bottom: 1.5rem;
        }
        a .banner-bar:after {
        content:"";
        display:block;
        position: absolute;
        bottom:0%;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
        background: #EEE;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        }
        a:hover .banner-bar:after {
        width: 100px;
        }
        @media screen and (max-width:1800px) {
        .banner-img { height: 0; padding-bottom:22%;}
        .banner-img.short { height:300px; padding-bottom:0;}
        }
        @media screen and (max-width:1350px) {
        .banner-img { height: 300px; padding-bottom:0;}
        .banner-img.short { height:300px;}
        }
        @media screen and (max-width:1024px) {
        a .banner-bar { padding-bottom: 1rem; }
        .banner-img { height: 240px;}
        .banner-img.short { height:240px;}
        }
        @media screen and (max-width:767px) {
        .banner-img { height: 180px;}
        .banner-img.short { height:180px;}
        }

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

       下層共通

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:120px;
        z-index: 5;
        }
        .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%;
        }

        .cuisine        { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .facilities     { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .onsen          { background: url("../images/img/onsen/header.jpg") center center / cover; }
        .information    { background: url("../images/img/information/header.jpg") center bottom / cover; }
        .access         { background: url("../images/img/access/header.jpg") center bottom / cover; }
        .news           { background: url("../images/img/news/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-lead {
        position: absolute;
        width:100%;
        bottom:-15px;
        z-index: 1;
        }
        .page-lead p {
        font-size:120px;
        line-height: 100%;
        color:rgba(255,255,255,.3);
        z-index: 1;
        }
.page-title {
        background: #393735;
        padding:1rem 0;
        box-sizing: border-box;
        overflow: hidden;
        }
        .page-title h1 {
        line-height: 100%;
        color:#D2AB77;
        }
        @media screen and (max-width:1350px) {
        .page-lead { bottom:-1vw; }
        .page-lead p { font-size:8vw; }
        }


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

       下層

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

.bg-img {
        width:100%;
        height: 100%;
        }
        .facilities_01 { background: url("../images/img/facilities/img_01-7.jpg") center center / cover;}
        .onsen_01 { background: url("../images/img/onsen/img_01-2.jpg") center center / cover;}




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

       Rss カレンダー

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

.ui-datepicker table { line-height: 25px; }
        @media screen and (max-width:767px) {
        .ui-datepicker table { line-height: 22px; }
        }