@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 0;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }
        .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:100vh; }

        .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: 1024px) {
        .movie.top-movie:before { padding-top:100%; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:100%; }
        }
*/

        /*=================================================
        PCのみvh100%　スマホ：アスペクト比固定の場合　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
        height:100vh;
        min-height: 800px;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }

        @media screen and (max-width:1024px) {
        .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:100%; }
        }
        @media screen and (max-width:767px) {
        .movie_inner { min-height: 300px; }
        }

        /*=================================================
                下層用
        ==================================================*/

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

        .movie.pages .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.pages .movie_inner video{ height:100% !important; object-fit: cover; }

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

       背景

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

.border-box {
        position: relative;
        padding:80px;
        border:4px solid rgb(0 0 0 / .6);
        box-sizing: border-box;
        border-radius:40px;
        overflow: hidden;
        z-index: 0;
        }
.bg-gray {
        background: rgb(57 55 52 / .05);
}



        @media screen and (max-width:1600px) {
        .border-box { padding:5vw; border-radius:2.5vw; }
        
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        
        }
        @media screen and (max-width:767px) {
        .border-box { padding:7.5vw; border-radius:5vw; }
        
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.gold { color:#8e8b84; }
.orange { color:#cd875d;}
.ivory { color:#a59372;}
.brown { color:#655537; }


.mark {background:linear-gradient(transparent 85%, #DAB212 0%); font-weight:600;}

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(255 255 255 / .6);
        }
.dotted-title {
        padding-bottom:.35rem;
        border-bottom:4px dotted rgb(0 0 0 / .6);
        }
.bar-title {
        padding-top:100px;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        translate:-50%;
        width:1px;
        height:90px;
        background:#393734;
        opacity:.6;
        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: rgb(0 0 0 / .6);
        margin-left:1em;
        z-index: -1;
        }


        @media screen and (max-width:1600px) {
        .bar-title { padding-top:90px; }
        .bar-title:after { height:80px; }
        }
        @media screen and (max-width:1350px) {
        .bar-title { padding-top:80px; }
        .bar-title:after { height:70px; }
        }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:60px; }
        .bar-title:after { height:55px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:60px; }
        .bar-title:after { height:50px; }
        }

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

       トップページ

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

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

        .greeting-wrap {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .greeting-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:530px;
        left:0;
        width:100%;
        height: 100%;
        background: url("../images/parts/bg-gray.jpg") center center / cover;
        z-index: -1;
        }
        .greeting-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:51.5%;
        background: url("../images/img/top/img_01.jpg") center center / cover;
        z-index: 0;
        }
        .greeting-text {
        position: relative;
        z-index: 1;
        color:#FFF;
        padding-top:3rem;
        }
        .greeting-title {
        position: relative;
        margin-top:-11rem;
        padding-left:1rem;
        z-index: 0;
        }
        @media screen and (max-width:1650px) {
        .greeting-wrap:after { top:calc(530px - (302.5px - 18.333vw)); }
        }
        @media screen and (max-width:1350px) {
        .greeting-title { margin-top:-9rem; }
        }
        @media screen and (max-width:1024px) {
        .greeting-wrap:after { top:calc(510px - (302.5px - 18.333vw)); }
        .greeting-title { margin-top:-6rem; }
        }
        @media screen and (max-width:767px) {
        .greeting-wrap:after { top:calc(480px - (302.5px - 18.333vw)); }
        .greeting-img { padding-bottom:80%; }
        .greeting-title { margin-top:0rem; padding-left:0; }
        }

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

        .btn-wrap {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #393734;
        width:100%;
        z-index: 0;
        }
        .btn-wrap.left { flex-direction: row-reverse; }
        .btn-img-wrap {
        position: relative;
        width:100%;
        height: auto;
        overflow: hidden;
        }
        .btn-img {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:50%;
        transition  : all .6s ease;
        overflow: hidden;
        z-index: 0;
        }
        .btn_01 { background: url("../images/img/top/img_02.jpg") center 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_04 { background: url("../images/img/top/img_05.jpg") center center / cover; }
        .btn_05 { background: url("../images/img/top/img_06.jpg") center center / cover; }
        .btn_06 { background: url("../images/img/top/img_07.jpg") center center / cover; }
        .btn-wrap:hover .btn-img {
        transform:         scale(1.1);
        opacity: .6;
        }
        .btn-cover {
        position: relative;
        width:24%;
        min-width:24%;
        height:100%;
        background: #393734;;
        box-sizing: border-box;
        z-index: 2;
        }
        .att-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        transition  : all .6s ease;
        width:50%;
        }
        .att-wrap a:hover .att-title { opacity:.6; }
        @media screen and (max-width:1500px) {
        .btn-img { padding-bottom:600px }
        }
        @media screen and (max-width:1360px) {
        .btn-img { padding-bottom:60% }
        }
        @media screen and (max-width:1024px) {
        .btn-img { padding-bottom:64% }
        }
        @media screen and (max-width:767px) {
        .btn-wrap.left { flex-direction: column; }
        .btn-wrap { flex-direction: column; width:100%; margin-bottom:5px; }
        .btn-cover { padding:2rem 0 2rem; width:100%; }
        .att-title { position: relative; top:auto; left:auto; translate:0; width:27%; margin-inline:auto; }
        }

        /*=================================================
                Instagram banner
        ==================================================*/

        .instagram-banner {
        position: relative;
        line-height: 1;
        background: #393734;
        overflow: hidden;
        }
        .instagram-banner a {
        position: relative;
        display: block;
        line-height: 1;
        color:var(--white-color);
        }
        .instagram-banner-text {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        }
        .instagram-inner {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        width:100%;
        row-gap:.25em;
        }
        .instagram-text {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:.5em;
        }
        .instagram-inner i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-instagram.svg") center center / cover;
        transition: all 0.3s ease;
        }
        @media screen and (max-width:767px) {
        .instagram-inner { padding:2rem 0; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 1;
        }
        .more-reservation a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 0.75rem;
        width:100%;
        height:auto;
        padding:1.5rem 1rem;
        line-height:1;
        text-align:center;
        background:#393734;
        font-weight:500;
        color:#FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1.1rem;
        border-radius:0px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        transition: all 0.3s ease;
        }
        .more-reservation.more-gray a { background:#4F4D49; }
        .more-reservation.sp-more-black a { background:#4F4D49; }

        .more-reservation a i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        }
        .more-reservation a:hover { opacity:.7; }
        .more-reservation.large a { padding:2.5rem 1rem; background: #393734; }

        @media screen and (max-width:1024px) {
        .more-reservation a {  font-size:1rem; }
        }
        @media screen and (max-width:767px) {
        .more-reservation.sp-more-gray a { background:#4F4D49; }
        .more-reservation.sp-more-black a { background:#393734; }
        }

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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:100vh;
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:0%;
        height:100vh;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .kazenoyadori { background: url("../images/img/kazenoyadori/header.jpg") center center / cover; }
        .sou          { background: url("../images/img/sou/header.jpg") center center / cover; }
        .karako       { background: url("../images/img/karako/header.jpg") center center / cover; }
        .ren          { background: url("../images/img/ren/header.jpg") center center / cover; }
        .iri          { background: url("../images/img/iri/header.jpg") center center / cover; }
        .goun         { background: url("../images/img/goun/header.jpg") center center / cover; }
        .rental       { background: url("../images/img/rental/header.jpg") center center / cover; }
        .contact      { background: url("../images/img/contact/header.jpg") center center / cover; }
        .tokusho      { background: url("../images/img/tokusho/header.jpg") center center / cover; }


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

.page-logo {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:15vw;
        z-index: 3;
        }
        @media screen and (max-width: 1024px) {
        .page-logo { width:25vw; }
        }
        @media screen and (max-width: 767px) {
        .page-logo { width:45vw; }
        }



.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:0px 3vw 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: 150px;
        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:150%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }
        .page-title p {
        position: relative;
        text-align: left;
        letter-spacing: 0;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1240px) {
        .page-title { padding:0 3vw 25px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:0 6vw 4vw; }
        }

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

       KAZENOYADORI

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

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

        .bg-yadori {
        background: #3A4340;
        color:#FEFEFE;
        }
        .yadori-greeting-img {
        position: relative;
        width:93%;
        margin-left:auto;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/kazenoyadori/img_01-1.jpg") center center / cover;
        z-index: 0;
        }
        .yadori-title {
        position: relative;
        margin-top:-5rem;
        padding-bottom:3rem;
        }
        .yadori-text {
        position: relative;
        width:46%;
        max-width:520px;
        padding-left:2%;
        box-sizing: border-box;
        }
        .yadori-img-wrap {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:100%;
        }
        .yadori-01 {
        position: absolute;
        top:-11.5%;
        left:58.49%;
        width:27.96875%;
        }
        .yadori-02 {
        position: absolute;
        top:11.71875%;
        left:0;
        width:38.85417%;
        }
        .yadori-03 {
        position: absolute;
        top:29.7917%;
        right:0;
        width:50%;
        }
        .yadori-04 {
        position: absolute;
        top:58.3333%;
        left:13.5417%;
        width:25.3125%;
        }
        .yadori-05 {
        position: absolute;
        bottom:0%;
        left:56.458%;
        width:24.8%;
        }
        @media screen and (max-width:1350px) {
        .yadori-title { margin-top:-4rem; }
        }
        @media screen and (max-width:1024px) {
        .yadori-01 { top:-19%; width:33%; }
        }
        @media screen and (max-width:767px) {
        .yadori-greeting-img { padding-bottom:62%; }
        .yadori-text {  width:100%; max-width:100%; }
        .yadori-img-wrap { margin-top:3rem; padding-bottom:222.3%; }
        .yadori-01 { top:0%; left:60%; width:40%; }
        .yadori-02 { top:6%; width:52%; }
        .yadori-03 { top:32%; width:85.6%; }
        .yadori-04 { top:67.2%; left:0%; width:52.8%; }
        .yadori-05 { left:60%; width:40%; }
        }

        /*=================================================
                LOUNGE
        ==================================================*/

        .yadori-lounge {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/kazenoyadori/img_02.jpg") center center / cover;
        z-index: 0;
        }
        .yadori-lounge-text-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:66%;
        right:0;
        width:43.75%;
        height:0;
        padding-bottom:33%;
        background: url("../images/img/kazenoyadori/img_03-1.jpg") center center / cover;
        }
        .yadori-lounge-text {
        position: relative;
        left:0;
        width:38%;
        min-width:450px;
        padding:80px;
        box-sizing: border-box;
        background: #E7E4DE;
        margin-top:-10%;
        z-index: 1;
        }
        .yadori-lounge-text-wrap {
        position: relative;
        width:100%;
        z-index: 0;
        }
        
        .yadori-lounge-text .inner {
        width:100%;
        max-width:420px;
        margin-inline:auto;
        }
        .yadori-lounge-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:29%;
        margin-top:2rem;
        }
        .yadori-lounge-img figure:nth-child(1) {
        display: none;
        position: absolute;
        top:0;
        right:0;
        width:85%;
        }
        .yadori-lounge-img figure:nth-child(2) {
        position: absolute;
        top:1.875%;
        left:2.25%;
        width:24.9%;
        }
        .yadori-lounge-img figure:nth-child(3) {
        position: absolute;
        bottom:0%;
        left:31.875%;
        width:16.875%;
        }
        @media screen and (max-width:1600px) {
        .yadori-lounge-text { padding:5%; }
        }
        @media screen and (max-width:1024px) {
        .yadori-lounge-text-wrap:after { top:43%; width:37.75%; padding-bottom:47%; }
        }
        @media screen and (max-width:767px) {
        .yadori-lounge { padding-bottom:62%; }
        .yadori-lounge-text-wrap:after { display: none; }
        .yadori-lounge-text { padding:10% 8% ;  width: 100%;  min-width: 0; margin-top: 0; }
        .yadori-lounge-img { margin-top:0; padding-bottom:135%; }
        .yadori-lounge-img figure:nth-child(1) { display: block ; }
        .yadori-lounge-img figure:nth-child(2) { top:56%; left:0; width:54%; }
        .yadori-lounge-img figure:nth-child(3) { left:62%; width:38%; }
        }

        /*=================================================
                YADORI共通
        ==================================================*/

        .section-outer {
        width:68%;
        margin-inline:auto;
        }
        .yadori-section-text {
        padding:24% 0;
        width:100%;
        max-width:340px;
        margin-inline:auto;
        }
        @media screen and (max-width:1024px) {
        .yadori-section-text {  padding:0 0 24% 0; }
        }
        @media screen and (max-width:767px) {        
        .section-outer { width:85%; }
        .yadori-section-text {  padding:3rem 0; }
        .sp-left { width:92.5%; }
        .sp-right { width:92.5%; margin-left:auto; }
        }

        /*=================================================
                YADORI--CUISINE
        ==================================================*/
        
        .yadori-cuisine {
        width:100%;
        height: 0;
        padding-bottom:50%;
        background: url("../images/img/kazenoyadori/img_07.jpg") center center / cover;
        }
        @media screen and (max-width:767px) {        
        .yadori-cuisine { padding-bottom:62%; }
        }

        /*=================================================
                YADORI--ACCESS
        ==================================================*/

        .access-box {
        writing-mode: vertical-lr;
        box-sizing: border-box;
        }
        .access-root li {
        font-feature-settings:normal;
        position: relative;
        text-align: left;
        padding:2rem 1.25rem 1rem;
        box-sizing: border-box;
        border:1px solid rgba(0 0 0 / .8);
        font-size:1.1rem;
        width:auto;
        min-height:260px;
        line-height: 130%;
        white-space: nowrap;
        letter-spacing: .2em;
        }
        .access-root.long li { height:270px; }
        .access-root li.road {
        background: none;
        padding:3rem 2.0rem 0rem;
        font-size:1rem;
        letter-spacing: .15em;
        border:none;
        /*writing-mode: vertical-rl;*/
        }
        .access-root li.road:after {
        content:"";
        display: block;
        position: absolute;
        top:1.5rem;
        left:0;
        width:100%;
        height:1px;
        border-top:2px dotted rgb(0 0 0 / .4);
        }
        .access-root li:first-child { background:rgb(0 0 0 / .06); }
        .access-root li:last-child { background:#3A4340; color:#FEFEFE; }
        .access-root li:last-child:after { display: none; }

        .sou-access .access-root li:last-child    { background:#366B7A; }
        .karako-access .access-root li:last-child { background:#C4A032; }
        .ren-access .access-root li:last-child    { background:#DDCCD6; color:var(--font-color); }
        .iri-access .access-root li:last-child    { background:#cd875d; }
        .goun-access .access-root li:last-child    { background:#20404E; }
    

        @media screen and (max-width:1024px) {
        .access-root li { padding:2rem 1.22rem 1rem;  }
        .access-root li.road { padding:3rem 1.22rem 0rem;  }
        .access-root li.road:after { top:1.5rem; }
        }
        @media screen and (max-width:767px) {
        .access-box { writing-mode: inherit; border:1px solid rgb(0 0 0 / .4); padding:1rem; box-sizing: border-box; background:#E7E4DE; }
        .access-root li { 
        min-height:auto!important;
			height:auto; text-align:center; padding:1rem .5rem;  margin-bottom:.75rem; letter-spacing: .05em; background: rgb(255 255 255 / .3); }
        .access-root.long li { height:auto; }
        .access-root li.road { padding:.45rem .5rem; writing-mode: inherit; letter-spacing: .05em;  }
        .access-root li.road.road-none { padding:0 .5rem; }
        .access-root li.road.road-none:after { display: none; }
        .access-root li:after { content:""; display: block; position: absolute; bottom:-.75rem; left:50%; width:1px; height:.75rem; border-right:2px dotted rgb(0 0 0 / .4); }
        .access-root li.road:after { top:auto; bottom:-.75rem; left:50%; width:1px; height: .75rem; border-top:none; border-right:2px dotted rgb(0 0 0 / .4); }
        .access-root li:last-child { margin-bottom: 0; }
        }






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

            SOU

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

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

        .bg-sou {
        background: url("../images/img/sou/bg-01.jpg") center center / cover;
        color:#FEFEFE;
        }

        /*=================================================
                SAUNA
        ==================================================*/

        .sou-sauna {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:40%;
        background: url("../images/img/sou/img_05.jpg") center center / cover;
        z-index: 0;
        }
        .sauna-sub {
        position: relative;
        margin-top:-20%;
        }
        

        @media screen and (max-width:1600px) {
        
        }
        @media screen and (max-width:1350px) {
        .sauna-sub { margin-top:-15%; }
        }
        @media screen and (max-width:1024px) {
        .sauna-sub { margin-top:-10%; }
        }
        @media screen and (max-width:767px) {
        .sou-sauna { padding-bottom:75%; margin-bottom: 3rem; }
        .sauna-sub { margin-top:0%; }
        }







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

            KARAKO

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


        .karako-title-head {
        position: relative;
        z-index: 0;
        }
        .karako-title-head:before {
        content:"";
        display: block;
        position: absolute;
        top:-100px;
        left:-100px;
        width:210px;
        height:168px;
        background: url("../images/img/karako/maru-01.svg") center center / cover;
        z-index: -1;
        }
        .yellow {
        color:#C4A032;
        }
        .after-maru {
        position: relative;
        z-index: 0;
        }
        .after-maru:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        width:660px;
        height:660px;
        z-index: -1;
        }
        .after-maru.left:after { left:0; translate:-60% 25%; background: url("../images/img/karako/maru-02.svg") center center / cover; }
        .after-maru.right:after { right:0; translate:40% 25%; background: url("../images/img/karako/maru-03.svg") center center / cover; }

        
        hr.hr-karako {
        position: relative;
        border: none;
        padding:0;
        height:15px;
        width:100%;
        background: url("../images/img/karako/icon-karako.svg") repeat-x;
        opacity: .7;
        z-index: 1;
        }

        .bg-beige { background: #E1DCCF; }

        @media screen and (max-width:1600px) {
        .karako-title-head:before { top:-6.25vw; left:-6.25vw; width:13.125vw; height:10.5vw; }
        .after-maru:after { width:41.25vw; height:41.25vw; }
        }
        @media screen and (max-width:1024px) {
        .karako-title-head:before { top:-60px; left:-60px; width:125px; height:100px; }
        }
        @media screen and (max-width:767px) {
        .karako-title-head:before { top:-40px; left:-40px; width:100px; height:80px; }
        .after-maru:after { width:75vw; height:75vw; }
        hr.hr-karako { background: url("../images/img/karako/icon-karako-sp.svg") repeat-x; }
        }








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

            REN

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

        /*=================================================
                REN GREETING
        ==================================================*/
        
        .bg-ren {
        position: relative;
        overflow: hidden;
        background: #1E1D1C;
        color:#FFF;
        }
        .ren-greeting-wrap {
        position: relative;
        z-index: 0;
        }
        .ren-greeting-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:10%;
        right:0;
        width:90%;
        height:150%;
        background: #7E5270;
        opacity: .5;
        z-index:-1;
        }
        .ren-greeting-img {
        position: relative;
        width:93%;
        margin-right:auto;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/ren/img_01.jpg") center center / cover;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .ren-greeting-img { padding-bottom:62%; }
        }

        /*=================================================
                REN LIVING / DINING
        ==================================================*/

        .ren-living {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:40%;
        background: url("../images/img/ren/img_02.jpg") center center / cover;
        z-index: 0;
        }
        .ren-sub {
        position: relative;
        margin-top:-10%;
        }
        .ren-living-text {
        padding-top:18%;
        }
        .after-right {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .after-right:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        width:24%;
        height:100%;
        background: #7E5270;
        opacity: .5;
        z-index:-1;
        }
        @media screen and (max-width:1024px) {
        .ren-sub { margin-top:3.5rem; }
        .ren-living-text { padding-top:3.5rem; }
        }
        @media screen and (max-width:767px) {
        .ren-living { padding-bottom:75%; }
        .ren-sub { margin-top:0%; }
        .ren-living-text { padding-top:3rem; }
        }

        /*=================================================
                DECK
        ==================================================*/

        .deck-wrap {
        position: relative;
        z-index: 0;
        }
        .ren-deck {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:56%;
        background: url("../images/img/ren/img_05.jpg") center center / cover;
        z-index: 0;
        }
        .ren-deck:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        width:45%;
        min-width:500px;
        height:100%;
        background: #000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        opacity: .4;
        z-index: 1;
        }
        .deck-text {
        position: absolute;
        bottom:4rem;
        right:4rem;
        width:28vw;
        max-width:360px;
        color:#FFF;
        z-index: 2;
        }
        @media screen and (max-width:1350px) {
        .deck-text { bottom:4.7vw; right:4.7vw; }
        }
        @media screen and (max-width:767px) {
        .ren-deck { padding-bottom:70%; }
        .ren-deck:after { display: none; }
        .deck-text { position: relative; color:var(--font-color); bottom:auto; right:auto; width:85%; max-width:85%; padding:3rem 0 100px; margin-inline:auto; }
        }

        /*=================================================
                BATHROOM
        ==================================================*/

        .ren-section-text {
        padding:24% 0;
        width:100%;
        }
        @media screen and (max-width:1024px) {
        .ren-section-text {  padding:0 0 24% 0; }
        }
        @media screen and (max-width:767px) {        
        .ren-section-text {  padding:3rem 0; }
        }

        /*=================================================
                REN BEDROOM
        ==================================================*/

        .ren-bedroom {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:40%;
        background: url("../images/img/ren/img_07-1.jpg") center center / cover;
        z-index: 0;
        }
        .ren-sub-bed {
        position: relative;
        margin-top:-10%;
        }
        @media screen and (max-width:1540px) {
        .f90.ren-bed-title { font-size:clamp(50px, 5.85vw, 90px); }
        }
        @media screen and (max-width:1350px) {
        .ren-sub-bed { margin-top:12%; }
        }
        @media screen and (max-width:1024px) {
        .ren-sub-bed { margin-top:18%; }
        }
        @media screen and (max-width:767px) {
        .ren-bedroom { padding-bottom:75%; }
        .ren-sub-bed { margin-top:0%; }
        }

        /*=================================================
                REN MEALS
        ==================================================*/
        
        .ren-meals-title {
        display: flex;
        gap:10%;
        align-items: flex-start;
        }
        .ren-cuisine {
        width:100%;
        height:0;
        padding-bottom:50%;
        background: url("../images/img/ren/img_08.jpg") center center / cover;
        }
        .bg-ren .under-title { border-bottom:1px solid #FFF;}
        @media screen and (max-width:767px) {
        .ren-meals-title { flex-direction: column; gap:0; row-gap:3rem; width:100%; }
        .ren-cuisine { padding-bottom:62%; }
        }





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

       IRI

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

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

        .iri-greeting-img {
        position: relative;
        width:100%;
        height:100%;
        background: url("../images/img/iri/img_01.jpg") center center / cover;
        border-radius:0 0 0 3vw;
        }
        .iri-lead {
        padding-top:1.5em;
        font-size:clamp(30px, 6.5vw, 100px);
        line-height: 100%;
        white-space: nowrap;
        }
        .iri-greeting-text {
        width:100%;
        max-width:450px;
        padding:3rem 0 3rem 3rem;
        box-sizing: border-box;
        margin-left:auto;
        }
        .iri-lead-sp {
        display: none;
        position: absolute;
        bottom:0;
        left:5%;
        font-size:clamp(30px, 10vw, 100px);
        line-height: 100%;
        white-space: nowrap;
        }
        hr.iri-hr {
        position: relative;
        border: none;
        padding:0;
        height:60px;
        background:rgb(0 0 0 / .4);
        width:1px;
        margin-inline:auto;
        z-index: 1;
        }
        @media screen and (max-width:1024px) {
        .iri-greeting-text { padding:0 0 0 3rem; }
        .iri-lead { display: none; }
        hr.iri-hr { height:45px; }
        }
        @media screen and (max-width:767px) {
        .iri-greeting-text { max-width:85%; width:85%; margin-inline:auto; padding:0 ; }
        .iri-greeting-img { height:0; padding-bottom:92.5%; width:92.5%; margin-left:auto; border-radius:0 0 0 6vw; margin-bottom:15%; }
        .iri-lead-sp { display: block; }
        hr.iri-hr { height:25px; }
        }

        /*=================================================
                IRI    LIVING - bed
        ==================================================*/

        .iri-living-text {
        width:100%;
        max-width:450px;
        padding:3rem 3rem 3rem 0;
        box-sizing: border-box;
        margin-right:auto;
        }
        .iri-living {
        border-radius:0 0 3vw;
        overflow: hidden;
        }
        .iri-section-lead {
        padding-bottom:10%;
        }
        .iri-bottom-radius {
        border-radius:0 0 3vw 3vw;
        overflow: hidden;
        }
        .iri-bath-img {
        border-radius:3vw 3vw 0 3vw;
        overflow: hidden;
        }
        .iri-bath-sub {
        border-radius:0 3vw 3vw 3vw;
        margin-top:15%;
        overflow: hidden;
        }
        .iri-washitsu {
        border-radius:0 0 0 3vw;
        overflow: hidden;
        }
        .iri-washitsu-text {
        width:100%;
        max-width:450px;
        padding:3rem 0 3rem 3rem;
        box-sizing: border-box;
        margin-left:auto;
        }
        .iri-bed-02 {
        border-radius:3vw 0 0 0;
        overflow: hidden;
        }
        .iri-bed-03 {
        border-radius:0 0 3vw;
        overflow: hidden;
        }

        @media screen and (max-width:767px) {
        .iri-living-text { max-width:85%; width:85%; margin-inline:auto; padding:0 ; }
        .iri-living { margin-right:auto; border-radius:0 0 6vw; width:92.5%; }
        .iri-bottom-radius { border-radius:0 0 6vw 6vw; }
        .iri-bath-img { border-radius:6vw 6vw 0 6vw; }
        .iri-bath-sub { border-radius:0 6vw 6vw 6vw; margin-top:3rem; }
        .iri-washitsu { margin-left:auto; border-radius:0 0 0 6vw; width:92.5%; }
        .iri-washitsu-text { max-width:85%; width:85%; margin-inline:auto; padding:0 ; }
        .iri-bed-02 { border-radius:6vw 0 0 0; }
        .iri-bed-03 { border-radius:0 0 6vw; }
        }

        /*=================================================
                IRI    MEALS
        ==================================================*/

        .bg-iri {
        background:#e1d5c9;
        }
        .iri-cuisine {
        border-radius:0 0 3vw 3vw;
        overflow: hidden;
        }
        .iri-bottom-radius-s {
        border-radius:0 0 1.5vw 1.5vw;
        overflow: hidden;
        }

        @media screen and (max-width:767px) {
        .iri-cuisine { border-radius:0 0 6vw 6vw; }
        .iri-bottom-radius-s { border-radius:0 0 3vw 3vw; }
        }





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

       GO-UN

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

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

        .goun-wrap {
        background: #20404E;
        color:#FFF;
        }
        .goun-outer {
        padding:2.5vw;
        box-sizing: border-box;
        }
        .goun-greeting-wrap {
        position: relative;
        z-index: 0;
        }
        .goun-greeting {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:60%;
        background: url("../images/img/goun/bg-01.jpg") center center / cover;
        z-index: 0;
        }
        .goun-text {
        position: absolute;
        bottom:4rem;
        left:4rem;
        width:40vw;
        max-width:360px;
        color:#FFF;
        z-index: 2;
        }
        .section-goun {
        position: relative;
        display: flex;
        align-items: center;
        gap:2.5vw;
        padding-top:2.5vw;
        }
        .section-goun-wrap { padding-top:2.5vw; }
        .section-goun.top-none { padding-top:0; }
        @media screen and (max-width:1500px) {
        .goun-greeting { padding-bottom:835px; }
        }
        @media screen and (max-width:1350px) {
        .goun-text { bottom:4.7vw; left:4.7vw; }
        .goun-greeting { padding-bottom:750px; }
        }
        @media screen and (max-width:1024px) {
        .goun-greeting { padding-bottom:600px; }
        }
        @media screen and (max-width:767px) {
        .goun-outer { padding:4vw; }
        .goun-greeting { padding-bottom:70%; }
        .goun-text { position: relative; bottom:auto; left:auto; width:85%; max-width:85%; padding:0; margin-inline:auto; margin-top:-100px; }
        .section-goun { justify-content: center; width:100%; flex-direction: column; gap:0; row-gap:2.5vw; padding-top:3rem;}
        .section-goun-wrap { padding-top:3rem; }
        }