@charset "UTF-8";

.hero-wrap {
        position: relative;
        z-index: 0;
        }
        .movie-footer {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:190px;
        padding-top:25px;
        box-sizing: border-box;
        background: url("../images/img/index/movie-foot.png") center top repeat-x;
        z-index: 1;
        color:#FFF;
        }
        .movie-title {
        position: relative;
        padding-top:48px;
        text-align: center;
        color:#FFF;
        }
        .movie-title:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        width:181px;
        height:36px;
        background: url("../images/parts/mark.png") center center / cover;
        z-index: 1;
        }
        .movie-reservation {
        width: 182px;
        position: absolute;
        bottom:10%;
        right: 1%;
        z-index: 9999;
        }
        @media screen and (max-width:1350px) {
        .hero-wrap { margin-bottom:50px; }
        .movie-footer { height:170px; bottom:-50px; background: url("../images/img/index/movie-foot-tab.png") top center repeat-x; }
        .movie-reservation { width:160px; }
        }
        @media screen and (max-width:1024px) {
        .movie-reservation { width:130px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-bottom:100px; }
        .movie-footer { height:155px; bottom:-100px; background: url("../images/img/index/movie-foot-sp.png") top center repeat-x; }
        .movie-title { padding-top:28px; }
        .movie-title:before { width:90px; height:18px; }
        .movie-reservation { display:none; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 1;
        }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        /* アスペクト比はbeforeで高さ指定 */
        .movie.top-movie:before {
        content: "";
        display: block;
        position: absolute;
        top:0;
        left:0;
        padding-top: 48.958333%;
        }

        .movie_inner {
        position: relative;
        width: 100%;
        height:100%; /* 全画面は100vh */
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video {
        object-fit: cover;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        @media screen and (max-width:1024px) {
        .movie-wrap { margin-top:80px; }
        .movie.top-movie:before { position: relative; padding-top: 65%; }
        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
        }
        @media screen and (max-width:1024px) {
        .movie-wrap { margin-top:80px; }
        .movie:before { content: ""; display: block; padding-top: 80%; }
        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; }
        }

        /* --- 下層用 --- */
        .movie.pages { z-index: 1; }
        .movie.pages .movie_inner {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        }
        .movie.pages .movie_inner video {
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        left: 0;
        transform: translateX(0%);
        -webkit-transform: translateX(0%); 
        }
        .movie.pages:before {
        content: "";
        display: block;
        padding-top: 56.25%;
        }
        @media screen and (max-width:1024px) {
        .movie.pages .movie_inner { transform: translate(0,0); }
        }

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

       ふわふわ

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

        .fuwafuwa {
        -webkit-animation:fuwafuwa 3s infinite linear alternate;
        animation:fuwafuwa 3s infinite linear alternate;
        }
        @keyframes fuwafuwa {
        0% {transform:translate(0, 0) rotate(-5deg);}
        50% {transform:translate(0, -5px) rotate(0deg);}
        100% {transform:translate(0, 0)rotate(5deg);}
        }

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

       背景

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

.border-box {
        padding:7%;
        box-sizing: border-box;
        border:1px solid #58483E;
        border-radius: 3px;
        }
.bg-gray {
        background: url("../images/parts/bg-gray.jpg") repeat;
        }
.dotted-box {
        border:1px dotted #220000;
        padding:1.25rem;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:7%; }
        
        }
        @media screen and (max-width:767px) {
        
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#800000;}
.gold {color:#77694C; }

.mark {background:linear-gradient(transparent 60%, #FCE989 60%);}

.under-title {
        padding-bottom:.35rem;
        border-bottom:1px solid rgba(0,0,0,.5);
        }
.dotted-title {
        padding-bottom:.25rem;
        border-bottom:2px dotted #3A0D22;
        }
        .brown-box .dotted-title {border-bottom:2px dotted #FFF;}
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:1px;
        background: rgba(0,0,0,.2);
        margin-left:1rem;
        }
.lead-center {
        position: relative;
        width:100%;
        overflow: hidden;
        text-align: center;
        }
        .lead-center:after {
        content:"";
        position: absolute;
        display:block;
        top:50%;
        left:0;
        width:100%;
        height:1px;
        background: rgba(0,0,0,.4);
        z-index: -1;
        }
        .lead-center span {
        display: inline-block;
        padding:0 2rem;
        background: url("../images/parts/background.jpg") repeat;
        z-index: 1;
        }
.lead-center-b {
        position: relative;
        width:100%;
        overflow: hidden;
        text-align: center;
        }
        .lead-center-b:before,
        .lead-center-b:after {
        content:"";
        position: absolute;
        display:block;
        top:50%;
        width:160px;
        height:1px;
        background: rgba(0,0,0,.4);
        z-index: -1;
        }
        .lead-center-b:before { left:50%; margin-left:60px; }
        .lead-center-b:after { right:50%; margin-right:60px; }
.lead-center-c {
        position: relative;
        width:100%;
        overflow: hidden;
        text-align: center;
        }
        .lead-center-c:before,
        .lead-center-c:after {
        content:"";
        position: absolute;
        display:block;
        top:50%;
        width:60px;
        height:1px;
        background: rgba(0,0,0,.4);
        z-index: -1;
        }
        .lead-center-c:before { left:50%; margin-left:40px; }
        .lead-center-c:after { right:50%; margin-right:40px; }
.under-line {
        position: relative;
        padding-bottom:.35rem;
        border-bottom:1px solid #222222;
        }


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

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

       トップページ

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

        .leaf-wrap {
        position: relative;
        z-index: 0;
        }
        .leaf-wrap:before,
        .leaf-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        width:220px;
        height:880px;
        z-index: -1;
        }
        .leaf-wrap:before {
        left:0;
        background: url("../images/parts/side_bg.png") left top / cover;
        }
        .leaf-wrap:after {
        right:0;
        background: url("../images/parts/side_bg2.png") right top / cover;
        }

        .greeting-box {
        position: relative;
        padding:5rem 6rem;
        margin-top:1.5rem;
        box-sizing: border-box;
        z-index: 1;
        }
        .greeting-box:before,
        .greeting-box:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:0;
        padding-bottom:18%;
        }
        .greeting-box:before { top:0; background: url("../images/img/index/greeting-top.png") top center / cover; }
        .greeting-box:after  { bottom:0; background: url("../images/img/index/greeting-bottom.png") top center / cover; }

        @media screen and (max-width:1350px) {
        .leaf-wrap:before, .leaf-wrap:after { opacity:.3; width:180px; height:720px; }
        }
        @media screen and (max-width:1024px) {
        .leaf-wrap:before, .leaf-wrap:after { width:120px; height:480px; }
        .greeting-box { padding:5rem 4rem; }
        }
        @media screen and (max-width:767px) {
        .greeting-box { padding:3rem 1.5rem; }
        }

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

        .btn-wrap {
        position: relative;
        width:100%;
        height:340px;
        overflow: hidden;
        }
        .btn-img {
        position:absolute;
        top:0;
        width:100%;
        height:340px;
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .btn_01 { background: url("../images/img/index/ap_ph2.jpg") center center / cover; }
        .btn_02 { background: url("../images/img/index/ap_ph1.jpg") center center / cover; }
        .btn_03 { background: url("../images/img/index/ap_ph3.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:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.15);
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .btn-wrap:hover:after {
        background: rgba(0,0,0,0);
        }
        .btn-wrap .btn-cover {
        position: absolute;
        color:#FFF;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        text-align: center;
        width:90%;
        padding:6% 3%;
        box-sizing: border-box;
        background: rgba(0,0,0,.2);
        border:1px solid #FFF;
        z-index: 2;
        }
        .btn-cover h3 { font-size:21px; }

        @media screen and (max-width:1300px) {
        .btn-cover h3 { font-size:18px; }
        }
        @media screen and (max-width:1024px) {
        .btn-cover h3 { font-size:16px; }
        .btn-wrap { height:210px; }
        .btn-img { height:210px; }
        }
        @media screen and (max-width:767px) {
        .btn-wrap { height:180px; }
        .btn-img { height:180px; }
        .btn-wrap .btn-cover { padding:1rem 3%; }
        }

        /*=================================================
                News
        ==================================================*/
        
        .top-news p {
        border-bottom: 1px solid rgb(34,0,0);
        font-weight:400;
        padding:.65rem 0;
        line-height: 135%;
        text-align: center;
        }
        .top-news p span { margin-right:1em; }

        @media screen and (max-width:767px) {
        .top-news p { text-align: left; }
        .top-news p span { display: block; margin-right:0; }
        }

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

        .banner-wrap {
        padding-right:50px;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .banner-wrap { padding-right:30px; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap { padding-right:0; }
        }

        /*=================================================
                footer-Banner
        ==================================================*/

        .footer-banner {
        padding:2rem 0;
        background: url("../images/parts/banner-bg.jpg") repeat;
        position: relative;
        z-index: 0;
        }
        .footer-banner:after {
        content: "";
        display: block;
        position: absolute;
        bottom:-100px;
        left:0;
        width:100%;
        height:100px;
        background:  url("../images/parts/banner-bg.jpg") repeat;
        z-index: -1;
        }
        .footer-banner-inner {
        margin:0 auto;
        width:100%;
        max-width:1060px;
        }
        @media screen and (max-width:1024px) {
        .footer-banner-inner { max-width:525px; }
        }
        @media screen and (max-width:767px) {
        .footer-banner-inner { max-width:360px; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 2;
        }

        /*=================================================
                スライドヘッダー
        ==================================================*/

        .page-header-slider {
        position: relative;
        }
        .page-header-slick .slickslider-s figure {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slick-slide { margin:0 !important; }
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { width: 100%; height:0; padding-bottom:38.541667%; }
        .page-header-slick:after {
        content: "";
        display: block;
        padding-bottom:38.541667%; 
        }
        .concept_01 { background: url("../images/img/concept/slide_ph2.jpg") center center / cover; }
        .concept_02 { background: url("../images/img/concept/slide_ph3.jpg") center center / cover; }
        .concept_03 { background: url("../images/img/concept/slide_ph1.jpg") center center / cover; }
        .gourmet_01 { background: url("../images/img/cuisine/slide_ph1.jpg") center center / cover; }
        .gourmet_02 { background: url("../images/img/cuisine/slide_ph2.jpg") center center / cover; }
        .gourmet_03 { background: url("../images/img/cuisine/slide_ph3.jpg") center center / cover; }
        .spa_01 { background: url("../images/img/hotspa/slide_ph1.jpg") center center / cover; }
        .spa_02 { background: url("../images/img/hotspa/slide_ph2.jpg") center center / cover; }
        .spa_03 { background: url("../images/img/hotspa/slide_ph3.jpg") center center / cover; }
        .facility_01 { background: url("../images/img/facility/header_01.jpg") center center / cover; }
        .facility_02 { background: url("../images/img/facility/header_02.jpg") center center / cover; }
        .facility_03 { background: url("../images/img/facility/header_03.jpg") center center / cover; }
        .reserve_01 { background: url("../images/img/reserve/header_02.jpg") center center / cover; }
        .reserve_02 { background: url("../images/img/reserve/header_03.jpg") center center / cover; }
        .reserve_03 { background: url("../images/img/reserve/header_01.jpg") center center / cover; }
        .access_01 { background: url("../images/img/access/header_03.jpg") center center / cover; }
        .access_02 { background: url("../images/img/access/header_01.jpg") center center / cover; }
        .access_03 { background: url("../images/img/access/header_02.jpg") center center / cover; }
        .tourism_01 { background: url("../images/img/tourism/header_01.jpg") center center / cover; }
        .tourism_02 { background: url("../images/img/tourism/header_02.jpg") center center / cover; }
        .tourism_03 { background: url("../images/img/tourism/header_03.jpg") center center / cover; }
        
        @media screen and (max-width:1350px) {
        .page-header-slick:after { padding-bottom:450px; }
        .page-header-slick .slickslider-s figure { padding-bottom:450px; }
        }
        @media screen and (max-width:1024px) {
        .page-header-slick:after { padding-bottom:42%; }
        .page-header-slick .slickslider-s figure { padding-bottom:42%; }
        }
        @media screen and (max-width:767px) {
        .page-header-slick:after { padding-bottom:60%; }
        .page-header-slick .slickslider-s figure { padding-bottom:60%; }
        }

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

        .page-header {
        position: relative;
        width: 100%;
        height:auto;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:38.541667%;
        width:100%;
        }
        .english         { background: url("../images/img/english/header.jpg") center center / cover; }

        @media screen and (max-width:1350px) {
        .page-header:before { padding-bottom:450px; }
        }
        @media screen and (max-width:1024px) {
        .page-header-wrap { margin-top:80px; }
        .page-header:before { padding-bottom:42%; }
        }
        @media screen and (max-width:767px) {
        .page-header:before { padding-bottom:60%; }
        }

        .page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:190px;
        background: url("../images/img/index/movie-foot.png") top center repeat-x;;
        box-sizing: border-box;
        z-index: 1;
        }
        .page-title h1 {
        position: relative;
        box-sizing: border-box;
        line-height: 150%;
        color:#FFF;
        text-align: center;
        font-weight:400;
        letter-spacing: .05em;
        font-size:45px;
        padding:45px 0 40px;
        z-index: 3;
        }
        .page-title h1:before {
        content:"";
        display: block;
        position: absolute;
        left:50%;
        bottom:0%;
        transform: translateX(-50%);
        width:240px;
        height:50px;
        background:  url("../images/parts/page-title.png") center center / cover;
        }

        @media screen and (max-width:1350px) {
        .page-header-wrap { margin-bottom:25px; }
        .page-title { height:135px; bottom:-25px; background: url("../images/img/index/movie-foot-tab.png") top center repeat-x; }
        .page-title h1 { padding-top:20px; font-size:39px; }
        }
        @media screen and (max-width:1024px) {
        .page-header-wrap { margin-bottom:30px; }
        .page-title { height:95px; bottom:-30px; background: url("../images/img/index/movie-foot-sp.png") top center repeat-x; }
        .page-title h1 { padding-top:8px; font-size:33px; padding-bottom:30px; }
        .page-title h1:before { width:168px; height:35px; }
        }
        @media screen and (max-width:767px) {
        .page-header-wrap { margin-bottom:30px; }
        .page-title { height:85px; bottom:-30px; background: url("../images/img/index/movie-foot-sp.png") top center repeat-x; }
        .page-title h1 { padding-top:15px; font-size:24px; padding-bottom:25px; }
        .page-title h1:before { width:144px; height:30px; }
        }

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

       下層 共通

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

        /*=================================================
                concept
        ==================================================*/

        .concept-img {
        width:100%;
        height:425px;
        }
        .concept-01 { background: url("../images/img/concept/img_01-1.jpg") center center / cover; }
        .concept-02 { background: url("../images/img/concept/img_02-1.jpg") center center / cover; }

        .concept-text {
        width:100%;
        height:425px;
        position: relative;
        z-index: 0;
        }
        .concept-text:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:100%;
        height:100%;
        z-index: -1;
        opacity:.4;
        }
        .concept-text.text-01:after { background: url("../images/img/concept/img_01-2.jpg") center right no-repeat; }
        .concept-text.text-02:after { background: url("../images/img/concept/img_02-2.jpg") center left no-repeat ; }


        .concept-text p {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:clamp(270px, 80%, 420px);
        }

        .owner-wrap { background: url("../images/img/concept/owner_bg.jpg") center center / cover; }

        @media screen and (max-width:1450px) {
        .concept-text.text-01:after { background: url("../images/img/concept/img_01-2.jpg") center right / cover; }
        .concept-text.text-02:after { background: url("../images/img/concept/img_02-2.jpg") center left / cover; }
        }
        @media screen and (max-width:1024px) {
        .concept-img { height:360px; }
        .concept-text { height:360px; }
        }
        @media screen and (max-width:767px) {
        .concept-img { height:270px; }
        .concept-text { height:270px; }
        }


        /*=================================================
                Gourmet
        ==================================================*/

        .dinner-box {
        width:100%;
        position: relative;
        min-height:320px;
        z-index: 0;
        }
        .dinner-box:after {
        content:"";
        display: block;
        position: absolute;
        right:550px;
        top:0;
        width:480px;
        height:320px;
        background: url("../images/img/cuisine/img_02.png") center center / cover;
        z-index: -1;
        }
        
        .bg-sake { background: url("../images/img/cuisine/bg-01.jpg") center top / cover; }
        @media screen and (max-width:1024px) {
        .dinner-box:after { right:350px; }
        }
        @media screen and (max-width:767px) {
        .dinner-box { height:450px; margin:0 auto; max-width:300px; width:100%;  }
        .dinner-box:after { top:auto; bottom:0; right:0; width:300px; height:200px; }
        }

        /*=================================================
                Onsen
        ==================================================*/

        .bg-onsen {
        position: relative;
        z-index: 0;
        }
        .bg-onsen:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: url("../images/img/hotspa/bg_01.jpg") top center / cover;
        z-index: -1;
        opacity: .6;
        }

        /*=================================================
                facility
        ==================================================*/

        .bg-room { background: url("../images/img/facility/bg_01.jpg") top center / cover; }

        /*=================================================
                tourism
        ==================================================*/

        .bg-winter { background: url("../images/img/tourism/bg_01.jpg") top center / cover; }
        .bg-summer { background: url("../images/img/tourism/bg_02.jpg") top center / cover; }
        .bg-autumn { background: url("../images/img/tourism/bg_03.jpg") top center / cover; }

        /*=================================================
                English
        ==================================================*/

        .en-concept-text {
        padding-left:1rem;
        box-sizing: border-box;
        float:right;
        width:calc(100% - 270px);
        }
        .icon-wifi { width:91px;}
        .ski-bg {
        position: relative;
        z-index: 0;
        min-height:390px;
        }
        .ski-bg:after {
        content:"";
        display:block;
        position: absolute;
        top:0;
        right:0;
        width:900px;
        height:389px;
        background: url("../images/img/english/bg_01.png") center center / cover;
        z-index: -1;
        }
        @media screen and (max-width:1024px) {
        .en-concept-text { width:calc(100% - 220px); }
        .ski-bg { min-height:260px; }
        .ski-bg:after { width:600px; height:260px; opacity:.6; }
        }
        @media screen and (max-width:767px) {
        .en-concept-text { width:100%; padding-left:0; float:none; }
        .ski-bg { min-height:200px; }
        .ski-bg:after { width:450px; height:195px; left:50%; transform: translateX(-50%);}
        }