@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        margin-top:70px;
        z-index: 1;
        }
        

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:90px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:90px; }
        }


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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }
        .movie-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgb(0 0 0 / .15);
        z-index: 1;
        }

        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .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 - 70px); }
        .pages-movie{ max-height:calc(100vh - 150px); }

        .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%; }
        .movie.pages-movie:before { content:""; display: block; position: relative; top:0; left:0; padding-top:56.25%; }

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


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

       背景

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

.border-box {
        border:1px solid rgb(0 0 0 / .6);
        padding:80px;
        box-sizing: border-box;
        background: #F3F3F3;
        }
        .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:1px solid rgb(0 0 0 / .6);
        padding:80px;
        box-sizing: border-box;
        }

        .gray-box {
        padding:80px;
        box-sizing: border-box;
        background: #F3F3F3;
        }


.bg-gray {
        background: #F3F3F3;
        }
.bg-blue {
        background: #1047AF;
        color:#FFF;
        }
        .bg-blue .bg-white { color:var(--font-color); }
.bg-white {
        background: #FFF;
        }
.blue-wrap {
        background: #1047AF;
        padding:80px;
        box-sizing: border-box;
        }
.white-outer {
        padding-left:80px;
        padding-right:80px;
        box-sizing:border-box;
        }
.bg-dark {
        background: #1F3249;
        color:#FFF;
        }
        
        @media screen and (max-width:1800px) {
        .border-box { padding:4.5vw; }
        .gray-box { padding:4.5vw; }
        .border-box-s { padding:4.5vw; }
        .blue-wrap { padding:4.5vw 3.5vw; }
        .white-outer { padding-left:4.5vw; padding-right:4.5vw; }
        }
        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:4vw; }
        .gray-box { padding:4vw; }
        .blue-wrap { padding:4.5vw 3vw; }
        .white-outer { padding-left:4vw; padding-right:4vw; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:6.5vw; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:6.5vw; }
        .gray-box { padding:6.5vw; }
        .blue-wrap { padding:6.5vw 3.5vw; }
        .white-outer { padding-left:5.5vw; padding-right:5.5vw; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.green { color:#379739; }
        a .green, .green a { color:#379739; }
.blue { color:#1047AF; }

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(255 255 255 / .6);
        }
        .dotted-title {
        padding-bottom:.5rem;
        border-bottom:2px dotted rgb(47 49 50 / .6);
        }

.bar-title {
        padding-bottom:.75rem;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:50%;
        translate:-50%;
        width:30px;
        height:1px;
        background:#B99A45;
        z-index: -1;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:1px;
        background:#D1A340;
        margin-left:1rem;
        z-index: -1;
        }

.tag-title {
        position: relative;
        vertical-align: middle;
        line-height: 280%;
        }
        .tag-title .tag {
        position: relative;
        display: inline-block;
        background: #B99A45;
        color:#FFF;
        padding:0 1.5em;
        box-sizing: border-box;
        line-height: 280%;
        }
        .tag-main {
        display: inline-block;
        line-height: 280%;
        padding-left:1.5em;
        box-sizing: border-box;
        }

.gold-label {
        position: relative;
        background: #B99A45;
        color:#FFF;
        padding:1.5em;
        overflow: hidden;
        box-sizing: border-box;
        }
        .gold-label p {
        font-size:clamp(16px, 1vw, 21px);
        line-height: 135%;
        }
        .gold-label::after {
        content: "";
        display: block;
        width: 30px;
        height: 100%;
        position: absolute;
        top: -180px;
        left: 0;
        background-color: #FFF;
        opacity: 0;
        transform: rotate(45deg);
        animation: reflect 2s ease-in-out infinite;
        -webkit-transform: rotate(45deg);
        -webkit-animation: reflect 2s ease-in-out infinite;
        }
        @keyframes reflect {
          0% { transform: scale(0) rotate(45deg); opacity: 0; }
          80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
          81% { transform: scale(4) rotate(45deg); opacity: .75; }
          100% { transform: scale(50) rotate(45deg); opacity: 0; }
        }
        @-webkit-keyframes reflect {
          0% { transform: scale(0) rotate(45deg); opacity: 0; }
          80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
          81% { transform: scale(4) rotate(45deg); opacity: .75; }
          100% { transform: scale(50) rotate(45deg); opacity: 0; }
        }




        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        .tag-main { padding-left:0; display: block; }
        }

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

       トップページ

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

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

        .greeting-wrap {
        position: relative;
        z-index: 0;
        }
        .greeting-wrap:before,
        .greeting-wrap:after {
        content:"";
        display: block;
        position:absolute;
        z-index: -1;
        }
        .greeting-wrap:before {
        top:0;
        left:0;
        width:900px;
        height: 600px;
        background: url("../images/parts/wave-lt.svg") top left / cover;
        }
        .greeting-wrap:after {
        bottom:0;
        right:0;
        width:300px;
        height: 600px;
        background: url("../images/parts/wave-r.svg") right bottom / cover;
        }
        .greeting-title {
        padding-bottom:5rem;
        }
        .greeting-img {
        position: relative;
        padding:0 0 0 22%;
        box-sizing: border-box;
        z-index: 0;
        }
        .greeting-sub-wrap {
        padding-top:4vw;
        position: relative;
        }
        .greeting-sub {
        position: relative;
        padding-top:10%;
        z-index: 0;
        }
        .greeting-sub-text {
        padding-left:10%;
        box-sizing: border-box;
        }
        .greeting-sub1 { box-sizing: border-box; }
        .greeting-sub2 { box-sizing: border-box; }
        
        @media screen and (max-width:1800px) {
        .greeting-wrap:before { width:50vw; height: 33.3333vw; }
        .greeting-wrap:after { width:16.6666vw; height: 33.3333vw; }
        .greeting-title { padding-bottom:3vw; }
        }
        @media screen and (max-width:1100px) {
        .greeting-sub-text { padding-left:0%;}
        }
        @media screen and (max-width:1024px) {
        .greeting-img { padding:0 0 0 10%; }
        }
        @media screen and (max-width:767px) {
        .greeting-wrap:before { width:75vw; height: 50vw; }
        .greeting-wrap:after { width:25vw; height: 50vw; }
        .greeting-img { padding:0 0 0 5%; }
        .greeting-title { padding:3rem 0 2rem; }
        .greeting-sub-wrap { padding-top:3rem; }
        .greeting-sub { padding-top:0; }
        .greeting-sub1 { padding:0 30% 0 0; }
        .greeting-sub-text { padding:3rem 0; }
        .greeting-sub2 { padding:0 0 0 10%; }
        }

        /*=================================================
                ATT btn
        ==================================================*/

        .btn-wrap {
        position: relative;
        overflow: hidden;
        width:100%;
        z-index: 0;
        }
        .btn-img {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:75%;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        z-index: 0;
        }
        .btn_01 { background: url("../images/img/top/img_02.jpg") left center / cover; }
        .btn_02 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .btn_03 { background: url("../images/img/top/img_04.jpg") center center / cover; }
        .btn-wrap:hover .btn-img {
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .btn-cover {
        position: relative;
        width:100%;
        background:#1047AF;
        box-sizing: border-box;
        padding:2.5rem 1rem;
        z-index: 1;
        }
        a .btn-cover {
        color:#FFF;
        }
        .btn-title {
        position: relative;
        line-height: 150%;
        font-size:clamp(15px, 1.5vw, 30px);
        text-align: center;
        }
        .cover-text {
        text-align: center;
        font-size:clamp(12px, 1.3vw, 16px);
        }
        .kinen-label {
        position: absolute;
        top:-3em;
        left:50%;
        translate:-50%;
        width:96%;
        max-width:465px;
        background: #B99A45;
        color:#FFF;
        text-align: center;
        font-size:clamp(13px, 1.15vw, 21px);
        line-height: 150%;
        padding:.75em 0;
        box-shadow: 0 5px 10px rgb(0 0 0 / .3);
        z-index: 1;
        }
        @media screen and (max-width:767px) {
        .btn-cover {  padding:1.75rem 1rem; }
        .btn-title { font-size:clamp(16px, 5vw, 30px); }
        .cover-text { font-size:clamp(14px, 4vw, 16px); }
        .kinen-label { width:92%; font-size:clamp(14px, 3vw, 21px); }
        }

        /*=================================================
                OPEN BANNER
        ==================================================*/

        .opne-text {
        position: relative;
        z-index: 1;
        }
        .open-img {
        position: relative;
        margin-top:-8%;
        z-index: 0;
        }
        .open-img:before {
        content:"";
        display: block;
        position: absolute;
        top:-1px;
        left:-1%;
        width:102%;
        height:30%;
        background: #FFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: 0;
        }
        .open-logo {
        width:clamp(210px, 27vw, 500px);
        margin-inline:auto;
        }







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

        .banner-wrap {
        position: relative;
        padding:15vw 0;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 0;
        }
        .more-reservation {
        display: block;
        position: relative;
        line-height: 1;
        height:70px;
        }
        .more-reservation a {
        display: inline-block;
        position: relative;
        width:100%;
        height:70px;
        line-height:70px;
        text-align: center;
        color:#1047AF;
        background:#FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:18px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation i {
        position: relative;
        display: inline-block;
        margin-right:.5em;
        width:1em;
        height:1em;
        top:1px;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation a:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:#E7D59A;
        }      
        .more-reservation a:hover { opacity:1;  }
        /*.more-reservation a:hover i { background: url("../images/parts/icon-calendar-w.svg") center center / cover; }*/
        .more-reservation a:hover:after { left:0; width:100%; }

        @media screen and (max-width: 1350px) {
        .more-reservation { height:64px; }
        .more-reservation a { height:64px; line-height: 64px; font-size:17px; }
        }
        @media screen and (max-width:1024px) {
        .more-reservation { height:60px; }
        .more-reservation a { height:60px; line-height: 60px; font-size:16px; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap { padding:25vw 0; }
        .more-reservation a { font-size:15px; }
        }

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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh - 150px);
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:40%;
        height:0;
        width:100%;
        }

        .member     { background: url("../images/img/member/header.jpg") center center / cover; }


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

.page-title {
        position: relative;
        width:100%;
        background: #1047AF;
        }
        .page-title h1 {
        height:80px;
        line-height: 80px;
        color:#FFF;
        }
        @media screen and (max-width: 1350px) {
        .page-title h1 { height:70px; line-height: 70px; }
        }
        @media screen and (max-width: 1024px) {
        .page-title h1 { height:60px; line-height: 60px; }
        }
        @media screen and (max-width: 767px) {
        .page-title h1 { height:50px; line-height: 50px; }
        }

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

       下層

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

        .page-greeting {
        position: relative;
        z-index: 0;
        }
        .page-greeting:before,
        .page-greeting:after {
        content:"";
        display: block;
        position:absolute;
        z-index: -1;
        }
        .page-greeting:before {
        top:0;
        right:0;
        width:500px;
        height: 700px;
        background: url("../images/parts/wave-rt.svg") top right / cover;
        }
        .page-greeting:after {
        bottom:0;
        left:0;
        width:500px;
        height: 400px;
        background: url("../images/parts/wave-lb.svg") left bottom / cover;
        }
        
        @media screen and (max-width:1800px) {
        .page-greeting:before { width:27.7777vw; height: 38.8888vw; }
        .page-greeting:after { width:27.7777vw; height: 22.2222vw; }
        }
        @media screen and (max-width:767px) {
        .page-greeting:before { width:41.6666vw; height: 58.3333vw; }
        .page-greeting:after { width:41.6666vw; height: 33.3333vw; }
        }

        /*=================================================
                下層Banner
        ==================================================*/

        .page-banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .page-banner-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .page-banner-img {
        width:100%;
        height:340px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-base { background: url("../images/img/base/banner-bg.jpg") center center / cover; }
        .banner-hanazono { background: url("../images/img/hanazono/banner-bg.jpg") center center / cover; }
        .banner-kinokuniya { background: url("../images/img/kinokuniya/banner-bg.jpg") center center / cover; }
        .page-banner-text {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:80%;
        max-width:450px;
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        
        .page-more-reservation {
        display: inline-block;
        position: relative;
        width:100%;
        height:70px;
        line-height:70px;
        text-align: center;
        color:#1047AF;
        background:#FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:18px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .page-more-reservation i {
        position: relative;
        display: inline-block;
        margin-right:.5em;
        width:1em;
        height:1em;
        top:1px;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .page-more-reservation:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:#E7D59A;
        }      
        .page-banner-wrap a:hover .page-more-reservation { opacity:1;  }
        .page-banner-wrap a:hover .page-more-reservation:after { left:0; width:100%; }

        @media screen and (max-width: 1350px) {
        .page-banner-img { height:300px; }
        .page-more-reservation { height:64px; line-height: 64px; font-size:17px; }
        }
        @media screen and (max-width:1024px) {
        .page-banner-img { height:270px; }
        .page-more-reservation  { height:60px; line-height: 60px; font-size:16px; }
        }
        @media screen and (max-width:767px) {
        .page-banner-img { height:270px; }
        .page-more-reservation { font-size:15px; }
        }

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

       BASE

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

        .bg-service {
        background: url("../images/img/base/bg-01.jpg") center center / cover;
        }

        .tab-wrap {
        position: relative;
        overflow: hidden;
        width:100%;
        z-index: 0;
        }
        .tab-img {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:50%;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        z-index: 0;
        }
        .tab_01 { background: url("../images/img/base/img_02-1.jpg") center center / cover; }
        .tab_02 { background: url("../images/img/base/img_02-2.jpg") center center / cover; }
        .tab_03 { background: url("../images/img/base/img_02-3.jpg") center center / cover; }
        .tab_04 { background: url("../images/img/base/img_02-4.jpg") center center / cover; }
        .tab_05 { background: url("../images/img/base/img_02-5.jpg") center center / cover; }
        .tab_06 { background: url("../images/img/base/img_02-6.jpg") center center / cover; }

        .tab-cover {
        position: relative;
        width:100%;
        background:#FFF;
        box-sizing: border-box;
        padding:1.75rem 1rem;
        text-align: center;
        z-index: 1;
        }
        .tab-cover p {
        font-size:clamp(14px, 1.5vw, 23px);
        color:#1F3249;
        line-height: 135%;
        }
        
        .rooms-text {
        width:100%;
        }
        
        
        .rooms-lead {
        position: absolute;
        top:0;
        writing-mode: vertical-rl;
        font-feature-settings:initial;
        line-height:1;
        font-size:clamp(30px, 7.8vw, 200px);
        z-index: 0;
        }
        .rooms-lead.left { left:0; transform-origin:left bottom; }
        .rooms-lead.right { right:0; transform-origin:right bottom; }
        

        @media screen and (max-width:1350px) {
        .tab-cover {  padding:1.5rem 1rem; }
        }
        @media screen and (max-width:1024px) {
        .tab-cover {  padding:1.25rem 1rem; }
        }
        @media screen and (max-width:767px) {
        .tab-cover {  padding:1rem 1rem; }
        .rooms-text { width:100%; max-width:100%; padding:1.75rem 0 0; }
        .rooms-lead { top:auto; bottom:0; font-size:clamp(45px, 15vw, 90px); text-align: right; }
        }

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

       HANAZONO

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

        .hanazono-sub {
        position:relative;
        padding:15% 0 0;
        }

        @media screen and (max-width:767px) {
        .hanazono-sub { padding-top:3rem; }
        }

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

       KINOKUNIYA

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

        .page-banner-kinokuniya {
        position: relative;
        width:100%;
        color:#FFF;
        background: url("../images/img/kinokuniya/banner-bg.jpg") center center / cover;
        }
        .kinokuniya-inner {
        position: relative;
        margin-inline:auto;
        padding:6rem 0;
        box-sizing: border-box;
        width:80%;
        max-width:1000px;
        }




.cafe_img_box01 .column_box{margin-bottom: 3rem;  display:flex; flex-wrap: wrap; justify-content:space-between;}
.cafe_img_box01 .column_box .img_box01{width:20%; height: 400px;}
.cafe_img_box01 .column_box .img_box02{width:20%; height: 400px;}
.cafe_img_box01 .column_box .img_box03{width:59%; height: 400px;}

@media screen and (max-width:1024px) {
.cafe_img_box01 .column_box .img_box01{height: 300px;}
.cafe_img_box01 .column_box .img_box02{height: 300px;}
.cafe_img_box01 .column_box .img_box03{height: 300px;}
}

@media screen and (max-width:767px) {
.cafe_img_box01 .column_box .img_box01{width:49.5%; height:300px;}
.cafe_img_box01 .column_box .img_box02{width:49.5%; height:300px;}
.cafe_img_box01 .column_box .img_box03{margin-top: 0.5rem; width:100%; height: 300px;}
}

.osusume_menu_bn,.osusume_menu_bn *{
    box-sizing: border-box;
}
.osusume_menu_bn{
    width: 100%;
    height: auto;
    margin-block: clamp(50px,8vw,80px) 0;
    padding: 0px 15px;
    display: grid;
    place-items: center;
}
.osusume_menu_bn img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.osusume_menu_bn a{
    width: min(100%,800px);
    text-align: center;
    padding: 20px 5px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto minmax(0,1fr);
    gap: 0px;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: #1047AF;
    line-height: 1.6;
}
.osusume_menu_bn a:before,
.osusume_menu_bn a:after{
    content: "";
}
.osusume_menu_bn img{
    width: 30px;
    height: auto;
    padding: 0px 20px 0 15px;
    box-sizing: content-box;
}
.inl-blk{
    display: inline-block;
}