@charset "UTF-8";

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

       Movie

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

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

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

       背景

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

.bg-gray {
        background: rgba(0,0,0,.05);
        }

.deg-8 {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
        }
.deg8 {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
        }

.bg-plan {
        position: relative;
        z-index: 2;
        }
        .bg-plan:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width:100%;
        height:0;
        padding-bottom:29.166666%;
        background: url("../images/img/top/bg_plan.jpg") center center / cover;
        z-index: -1;
        }
.paint-wrap {
        position: relative;
        z-index: 2;
        }
        .paint-wrap:before {
        content:"";
        display:block;
        position: absolute;
        left:50%;
        margin-left:390px;
        bottom:0%;
        width:1700px;
        height: 1120px;
        background: url("../images/img/concept/paint.jpg") center center / cover;
        z-index: -1;
        }
        .paint-wrap:after {
        content:"";
        display:block;
        position: absolute;
        right:50%;
        margin-right:390px;
        top:0%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        width:1700px;
        height: 1120px;
        background: url("../images/img/concept/paint.jpg") center center / cover;
        z-index: -1;
        }
.white-slash {
        position: relative;
        z-index: 5;
        }
        .white-slash:before {
        content:"";
        display:block;
        position: absolute;
        top:-5vw;
        left:50%;
        width:200%;
        height:80%;
        background: rgba(255,255,255,.5);
        z-index: -1;
        }
        .white-slash.left:before { -webkit-transform: rotate(-4deg) translateX(-50%); transform: rotate(-4deg) translateX(-50%); }
        .white-slash.right:before { top:10vw; -webkit-transform: rotate(4deg) translateX(-50%); transform: rotate(4deg) translateX(-50%); }
        .section.white-slash { margin-bottom:4rem;}
        .section.white-slash.m-bottom-none { margin-bottom:0;}
.beige-slash {
        position: relative;
        z-index: 5;
        }
        .beige-slash:before {
        content:"";
        display:block;
        position: absolute;
        top:-5vw;
        left:50%;
        width:200%;
        height:80%;
        background: rgba(188,171,120,.2);
        z-index: -1;
        }
        .beige-slash.left:before { -webkit-transform: rotate(-4deg) translateX(-50%); transform: rotate(-4deg) translateX(-50%); }
        .beige-slash.right:before { top:10vw; -webkit-transform: rotate(4deg) translateX(-50%); transform: rotate(4deg) translateX(-50%); }
        .section.beige-slash { margin-bottom:4rem;}
        .section.beige-slash.m-bottom-none { margin-bottom:0;}
.pink-slash {
        position: relative;
        z-index: 4;
        }
        .pink-slash:before {
        content:"";
        display:block;
        position: absolute;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left:0;
        width:100%;
        height:0;
        padding-bottom:35%;
        background: url("../images/img/concept/pink-bg.png") center center / cover;
        z-index: -1;
        }
        .pink-slash.reverse:before { left:0; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
        .section.pink-slash { margin-bottom:4rem;}
        .section.pink-slash.m-bottom-none { margin-bottom:0;}

.border-box {
        border:1px solid rgba(0,0,0,.4);
        padding:2.5rem;
        box-sizing: border-box;
        background: rgba(255,255,255,.6);
        }
.beige-box {
        padding:3rem;
        box-sizing: border-box;
        background: #F9EECC;
        border:2px solid #FFF;
        }
        @media screen and (max-width:1800px) {
        .pink-slash:before { top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:2000px; height:700px; padding-bottom:0; }
        }

        @media screen and (max-width:1024px) {
        .bg-plan:after { padding-bottom:45% ; }
        .paint-wrap:before { margin-left:300px; width:850px; height:560px; }
        .paint-wrap:after { margin-right:300px; width:850px; height:560px; }
        .pink-slash:before { width:1500px; height:525px; }
        .border-box { padding:2rem; }
        }
        @media screen and (max-width:767px) {
        .bg-plan:after { padding-bottom:100% ; }
        .paint-wrap:before { margin-left:120px; width:680px; height:448px; }
        .paint-wrap:after { margin-right:120px; width:680px; height:448px; }
        
        .sp-deg90 { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
        .pink-slash:before { width:1750px; height:611px; }
        .border-box { padding:1.75rem; }
        .beige-box { padding:2rem; }
        }

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

       画像

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

.human {
        position: relative;
        width:100%;
        z-index: 1;
        }
        .human:after {
        content:"";
        display:block;
        position: absolute;
        top:-2rem;
        left:0;
        width:250px;
        height:210px;
        background: url("../images/img/concept/illust_05.svg") center center / cover;
        z-index: -1;
        }
        @media screen and (max-width:1024px) {
        .human:after { width:225px; height:189px; }
        }
        @media screen and (max-width:767px) {
        .human:after { display:none; }
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.red   { color:#800000; }
.blue  { color:#2CBCD6; }
.pink  { color:#E58287; }
.beige { color:rgba(188,171,120,.6); }
.pinkd { color:rgba(206,163,165,.6); }


.cloud-title {
        position: relative;
        padding-top:80px;
        }
        .cloud-title:before {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:270px;
        height:72px;
        background: url("../images/img/top/cloud.png") center center / cover;
        }
.shell-title {
        position: relative;
        padding-top:58px;
        }
        .shell-title:before {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:55px;
        height:55px;
        background: url("../images/parts/title.png") center center / cover;
        }
.waku-title:after {
        content:"";
        display:block;
        position: absolute;
        bottom:-1rem;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:360px;
        height:70px;
        background: url("../images/img/facilities/title-bg.png") center center / cover;
        z-index: -1;
        }
.under-title {
        padding-bottom:.25rem;
        border-bottom:2px dotted #707070;
        margin-bottom:1rem;
        }
        @media screen and (max-width:1024px) {
        .cloud-title { padding-top:64px; }
        .cloud-title:before { width:216px; height:58px; }
        .shell-title { padding-top:47px; }
        .shell-title:before { width:44px; height:44px; }
        .waku-title:after { width:324px; height:63px; }
        }
        @media screen and (max-width:767px) {
        .cloud-title { padding-top:48px; }
        .cloud-title:before { width:162px; height:43px; }
        .shell-title { padding-top:36px; }
        .shell-title:before { width:33px; height:33px; }
        .waku-title:after { width:288px; height:56px; }
        }

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

       トップページ

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

.greeting {
        position: relative;
        padding:6rem 0;
        z-index: 10;
        }
        .greeting-bg {
        position: absolute;
        bottom:40%;
        left:50%;
        width:300%;
        height:500px;
        background:url("../images/img/top/bg_pink.jpg") repeat;
        -webkit-transform: rotate(-8deg) translateX(-50%);
        transform: rotate(-8deg) translateX(-50%);
        z-index: -1;
        }
        .greeting-text {
        position: relative;
        z-index: 2;
        }
        .greeting-text:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:-20%;
        width:42vw;
        height:8vw;
        background: url("../images/img/top/bg-cabin.png") center center / cover;
        z-index: -1;
        }
        .greeting-title { padding-bottom:4rem; }
        .greeting-img {
        position: relative;
        padding-top:5%;
        padding-bottom:3%;
        z-index: 1;
        }
        .greeting-img figure {
        position: relative;
        width:86%;
        margin-left:14%;
        z-index: 1;
        }
        .greeting-img figcaption {
        position: absolute;
        top:0;
        -webkit-transform:  rotate(-8deg);
        transform:  rotate(-8deg);
        z-index: 2;
        }
        .cabin {
        max-width:500px;
        width:80%;
        }
        
.att-wrap {
        position: relative;
        padding-top:10vw;
        padding-bottom:10vw;
        z-index: 10;
        }
        .att-wrap:before {
        content:"";
        display:block;
        position: absolute;
        left:0;
        top:14%;
        width:28%;
        height: 86%;
        background:url("../images/img/top/img_02.jpg") center center / cover;
        z-index: -1;
        }
        .att-wrap:after {
        content:"";
        display:block;
        position: absolute;
        right:0;
        top:5vw;
        width:700px;
        height:144px;
        background:url("../images/img/top/wave.svg") center center / cover;
        z-index: -1;
        }
        .att-lead {
        position: absolute;
        color:#ADDED8;
        bottom:0;
        right:1%;
        font-size:8vw;
        line-height: 1;
        letter-spacing: .25em;
        }
        .att-section {
        padding-top:8vw;
        }
        .att-img-wrap {
        position: relative;
        margin-bottom:1rem;
        z-index: 10;
        }
        .att-img-wrap div { position: relative; z-index: 0; }
        .att-img-wrap figcaption {
        position: absolute;
        bottom:5px;
        right:5px;
        width:105%;
        z-index: 2;
        }
        .att-img {
        width:100%;
        height:0;
        padding-bottom:100%;
        }
        .att_01 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .att_02 { background: url("../images/img/top/img_04.jpg") center center / cover; }
        .att_03 { background: url("../images/img/top/img_05.jpg") center center / cover; }
        .att-shift {
        margin-top:-40px;
        }
        
        @media screen and (max-width:1470px) {
        .greeting-title { padding-bottom:2rem; }
        .att-wrap:after { width:600px; height:122px; }
        }
        @media screen and (max-width:1024px) {
        .greeting-bg { background:url("../images/img/top/bg_pink-tab.jpg") repeat; bottom:20%; height:350px; }
        .greeting-text { padding-bottom:3rem;}
        .greeting-text:after { left:5%; width:450px; height:84px; }
        .greeting-img figure {width:100%; margin-left:0;}
        .cabin { padding-bottom:3rem; width: 134%; left: -30%; position: relative;}
        .att-wrap { padding-bottom:13vw; }
        .att-wrap:after { width:400px; height:81px; }
        }
        @media screen and (max-width:767px) {
        .greeting-text:after { width:270px; height:51px; }
        .cabin { padding-bottom: 0; width: 38%; left: auto; margin-left: 70%; margin-top: -67px;}
        .att-wrap { padding-bottom:16vw; }
        .att-wrap:before { top:0; height:100%; }
        .att-wrap:after { width:220px; height:44px; }
        .att-img { padding-bottom:60%; }
        .att-shift { margin-top:0px; }
        }
        @media screen and (max-width:375px) {
        .greeting-img .f60 {font-size:8vw;}
        }

/*==============================================
       NEWS
==============================================*/

.news-list {
        width:100%;
        padding-bottom:1rem;
        }
        .news-list li {
        line-height:150%;
        font-size:.9375rem;
        border-bottom:2px dotted #707070;
        }
        .news-list li a {
        display: block;
        padding:.625rem 0;
        box-sizing: border-box;

        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        }
        .news-list span {
        width:5em;
        display:inline-block;
        padding-right:1rem;
        }

.facebook-wrap {
        min-width: 375px;
        max-width: 375px;
        width: 375px;
        margin-right: 60px;
        }
        @media screen and (max-width:1024px) {
        .facebook-wrap { margin-bottom:2rem; }
        }
        @media screen and (max-width:767px) {
        .facebook-wrap { min-width: 300px; max-width: 300px; width: 300px; }
        }

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

       下層共通

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


.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:140px;
        overflow: hidden;
        border-bottom:1px solid #FEF3D3;
        z-index: 1;
        }
        .page-header {
        position: relative;
        width: 100%;
        height:auto;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-top:33%;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        padding-top:22.222222%;
        width:100%;
        }

        .concept        { background: url("../images/img/concept/header.jpg") center center / cover; }
        .cuisine        { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .facilities     { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .reservation-page { background: url("../images/img/reservation/header.jpg") center center / cover; }
        .access          { background: url("../images/img/access/header.jpg") center center / cover; }


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

.page-title {
        position: absolute;
        bottom:0;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width:100%;
        background: url("../images/img/concept/header-bg.png") center bottom / cover;
        z-index: 10;
        }
        .page-title h1 {
        position: relative;
        line-height: 100%;
        font-weight:400;
        }
.page-lead {
        position: relative;
        margin-bottom:3rem;
        overflow: hidden;
        }
        .page-lead:after {
        content:"";
        display:inline-block;
        position: absolute;
        bottom:.625em;
        margin-left:20px;
        width:100%;
        height:4px;
        background: url("../images/img/concept/line.png") left center no-repeat;
        }
        
        @media screen and (max-width:1024px) {
        .page-lead { margin-bottom:2rem; }
        }
        @media screen and (max-width:767px) {
        .page-lead { margin-bottom:1rem; }
        .page-title { bottom:-9px; }
        .page-title h1 span.en { font-size:30px; letter-spacing: -.05em; }
        }

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

       下層

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

.section-lead {
        position: absolute;
        font-size:8vw;
        top:-1vw;
        }
        .section-lead.left {
        left:10%;
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
        }
        .section-lead.right {
        right:10%;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        }
        @media screen and (min-width:1800px) {
        .section-lead { font-size:150px; }
        }
        @media screen and (max-width:1024px) {
        .section-lead { top:-2vw; }
        }
        @media screen and (max-width:767px) {
        .section-lead { font-size:12vw; }
        .section-lead.long { font-size:10vw; }
        }

.after-illust {
        position: relative;
        padding-bottom:50px;
        z-index: 1;
        }
        .after-illust:after {
        content:"";
        display:block;
        position: absolute;
        bottom:-100px;
        right:5%;
        width:179px;
        height:150px;
        z-index: -1;
        }
        .hitode:after { background: url("../images/img/concept/illust_01.svg") center center / cover; }
        .cook:after { background: url("../images/img/concept/illust_02.svg") center center / cover; }

        .wine:after { background: url("../images/img/concept/illust_03.png") center center / cover; }
        .coffee:after { background: url("../images/img/concept/illust_04.svg") center center / cover; }

.cat:after { 
    background: url("../images/img/concept/illust_06.svg") center center / cover; }
        @media screen and (max-width:1024px) {
        .after-illust { padding-bottom:0px; }
        .after-illust:after { bottom:-120px; width:144px; height:120px; }
        .illust-tablet-none.after-illust:after { display: none; }
        }
        @media screen and (max-width:767px) {
        .after-illust:after { bottom:-80px; width:108px; height:90px; }
        }


/*追加CSS*/
.mobile-link-w a{
	color: #4E515A;
}





.insta_bns{
	width:min(100%,472px);
	height:auto;
	margin:0 auto;
	display:grid;
	justify-content: center;
	grid-template-columns: 1fr 47fr 2fr;
	gap:5px;
}
.insta_bns > p:first-of-type{
	grid-column: 2 / 3;
}

.insta_bns > p:nth-of-type(2){
	grid-column: 1 / -1;
	grid-row: 2 / 3;
}
.insta_bns > p img{
	width:100%;
	height:auto;
}





