@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_oon {display: block;}
.sp_oon {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}
.center {text-align: center;}
.header-img {left: 0; height: 300px; margin-left: 0; object-fit: cover;}

@media screen and (max-width: 1300px) {
        html , body {min-width: 100%;}
        }
@media screen and (max-width: 1280px) {
        img {max-width: 100%; height: auto;}
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .header-img {margin-top: 80px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        footer .pagetop {margin-right: 10px;}
        .popup_contents {width: 40% !important;}
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       header
=================================================*/
header .deco {left: 0; width: 100%; margin-left: 0;}

@media screen and (max-width: 1280px) {
            header {padding: 40px 2% 31px; box-sizing: border-box;}
            header .content {display: block;}
            header .inner {width: 100%;}
            header ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; width: 100%;}
            header ul li {margin: 0 30px;}
            header .cf::after {content: none; display: none;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .header-img {height: 250px;}
        }
        

/*=================================================
       footer
=================================================*/

@media screen and (max-width: 1280px) {
            footer {padding: 80px 2% 50px; box-sizing: border-box;}
            footer .wrapper {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: ; width: 100%;}
            footer .wrapper-2 {width: 100%;}
            footer .inner-1 {flex: 0 1 600px; width: auto;}
            footer .inner-2 {flex: 0 1 290px; width: auto;}
            footer .copy {width: 100%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            footer {padding: 80px 2% 10px;}
            footer .wrapper {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            footer .inner-1 {flex: 0 1 auto; width: auto; height: auto; text-align: center;}
            footer .inner-2 {flex: 0 1 auto; width: auto;}
            footer .bnr-access {margin-left: 0;}
            footer .logo {float: none; margin-right: 0; margin-bottom: 10px;}
            footer .logo img {margin: 0 auto;}
            footer .info {float: none; margin-bottom: 20px;}
            footer .copy {text-align: center;}
            footer .wrapper-2 {margin-top: 30px;}
        }
        @media only screen and (max-width: 767px) {
        }
 
/*=================================================
       toppage
=================================================*/
#movie {left: 0; width: 100%; margin-left: 0;}
#plan-search .input {width: auto;}
#plan-search div.search_btn {top: auto; left: auto; right: 10px; bottom: 10px;}

@media screen and (max-width: 1280px) {
            .page1-1 {padding: 144px 2% 139px; box-sizing: border-box;}
            .page1-1 .wrapper {width: 100%;}
            .page1-1 .wrapper .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .page1-1 article {flex: 0 1 380px; width: auto; height: auto; margin-right: 10px; padding-bottom: 10px;}
            .page1-1 article h3 {margin: 260px auto 0 28%;}
            .page1-1 .wrapper article:nth-child(1)  , .page1-1 .wrapper article:nth-child(2) , .page1-1 .wrapper article:nth-child(3) {background-repeat: no-repeat; background-size: cover;}
            .page1-2 {padding: 144px 2% 160px; box-sizing: border-box;}
            .page1-2 article {width: 100%;}
            .page1-2 .img {}
            .page1-2 .p-1 {padding-left: 40%;}
            .page1-2 h3 {margin-left: 40%;}
            .page1-3 {padding: 144px 2% 159px; box-sizing: border-box;}
            .page1-3 .wrapper {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .page1-3 article {flex: 0 1 380px; width: auto; height: auto; margin-right: 10px;}
            .page1-3 .img {width: 100%; height: auto;}
            .page1-3 .text {background: url(../img/page1-3_plan_back.jpg) no-repeat 0 0 / cover; width: auto; height: auto; padding-bottom: 20px;}
            .page1-3 .text .inner {height: auto;}

        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
         #movie {margin-top: 80px;}
         .page1-1 .wrapper article:nth-child(1)  , .page1-1 .wrapper article:nth-child(2) , .page1-1 .wrapper article:nth-child(3) {background: url(../img/page1-1_bg.png) repeat 0 0;}
         .page1-1 .wrapper article:nth-child(1) h3 , .page1-1 .wrapper article:nth-child(2) h3 , .page1-1 .wrapper article:nth-child(3) h3 {width: auto; margin: -10px 0 10px;}
         .page1-1 .wrapper article p {padding: 0 5px 0;}
         .page1-2 article {max-width: 820px;}
         .page1-2 .img {position: static; margin: 0 auto;}
            .page1-2 .p-1 {padding-left: 0;}
            .page1-2 h3 {margin-left: 0; margin-top: 30px;}
            .page1-2 .deco-2 {left: 30%; width: 100%; }
            .page1-3 .text {padding: 20px 10px;}
            #plan-search {background: #fff; width: 100%; height: auto; padding: 0; border: 2px solid #eb748e; overflow: hidden;}
            #plan-search .plan_title {float: none; background: url(../img/search_bg.png) no-repeat left top , #eb748e; margin-right: 0; padding: 30px 0;}
            #plan-search .plan_title img {margin: 0 auto;}
            #plan-search img:nth-child(1) {position: static;}
            #plan-search .input {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin-right: 0; padding: 20px 5px 20px 5px;}
            #plan-search div.search_btn {display: block; position: static; width: 100%; text-align: center; margin-top: 10px;}
            #plan-search div {margin-bottom: 10px;}
            #plan-search div.guests {margin-right: 10px;}
            #plan-search div {margin-right: 10px;}
            #plan-search .check_in p {float: none; margin-right: 10px;}
        }
        @media only screen and (max-width: 767px) {
            .page1-1 .wrapper {margin-top: 80px;}
            .page1-1 .wrapper .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 380px; margin: 0 auto;}
            .page1-1 article {flex: 0 1 auto; width: auto; height: auto; margin-right: 0; margin-bottom: 30px;}
            .page1-2 article {margin-top: 80px;}
            .page1-2 .deco-2 , .page6-1 .deco {left: 0; background: url(../img/common_deco-3.png) no-repeat 236% bottom / 80% auto; width: 100%; }
            .page1-2 .p-1 , .page1-2 .p-2 {height: auto;}
            .page1-3 .wrapper {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .page1-3 article {flex: 0 1 auto; width: auto; max-width: 380px; height: auto; margin-right: 0; margin-bottom: 30px;}
            .page1-1 .deco , .page2-1 .deco , .page4-1 .deco , .page5-2 .deco , .page7-1 .deco {background-position: right top; width: 60%; left: 0; margin: 0;}
            .page1-2 .deco , .page3-1 .deco , .page4-2 .deco {background-position: right top; width: 50%; left: 0; margin: 0;}
            .page1-3 .deco ,.page3-2 .deco , .page5-1 .deco {background-position: right top; width: 55%; left: 0; margin: 0;}
        }
        

/*=================================================
       dinner
=================================================*/

@media screen and (max-width: 1280px) {
            .page2-1 {padding: 144px 2% 159px; box-sizing: border-box;}
            .page2-header .wrapper {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0 2%; box-sizing: border-box;}
            .page2-header .wrapper h2 {flex: 0 1 600px; width: auto;}
            .page2-header .wrapper .copy {flex: 0 1 600px; width: auto;}
            .page2-header h2 img {margin-top: 0;}
            .page2-1 p {width: 100%;}
            .page2-1 .dinner2 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; background: #fff; width: 100%; max-width: 1200px; margin: 80px auto 0; padding: 1px 0 1px 1px; gap: 2px;}
            .page2-1 .dinner2 .cont1 {flex: 0 1 445px; margin-right:;}
            .page2-1 .dinner2 .cont2 {flex: 0 1 755px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%; gap: 2px;}
            .page2-1 .dinner2 .cont2 a {flex: 0 1 33%;}
            .page2-1 .items {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 1%;  width: 100%;}
            .page2-1 .items article {flex: 0 1 49%; width: auto; height: auto;}
            .page2-1 .items article:nth-child(2) , .page2-1 .items article:nth-child(4) {margin-left: 0;}
            .page2-1 .items article .txt_box {background: url(../img/page1-1_bg.png) repeat-x left bottom / auto 100%; min-height: 220px; padding: 0 2% 30px;}
            .page2-1 .items article h3 {padding: 30px 0 10px; text-align: center;}
            .page2-1 .items article h3 img {margin: 0 auto;}
            .page2-1 .items article p {position: static; width: auto; margin-top: 10px;}
            .cf::after {display: none;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .page2-header .wrapper h2 {flex: 0 1 30%; width: auto;}
            .page2-header .wrapper .copy {flex: 0 1 70%; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            .page2-header .wrapper {display: flex; flex-wrap: wrap; flex-direction: column;}
            .page2-header .wrapper h2 {flex: 0 1 auto; width: auto; margin-bottom: 20px;}
            .page2-header .wrapper .copy {flex: 0 1 auto; width: auto;}
            .page2-1 .dinner2 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; padding: 2px 2px 0;}
            .page2-1 .dinner2 .cont1 {flex: 0 1 100%; margin-right:;}
            .page2-1 .dinner2 .cont2 {flex: 0 1 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 0; width: 100%;}
            .page2-1 .dinner2 .cont2 a {flex: 0 1 33%; margin-left: 0.5%; margin-bottom: 2px}
            .page2-1 .dinner2 .cont2 a:nth-of-type(3n+1) {margin-left: 0;}
            .page2-1 .items {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px;}
            .page2-1 .items article {flex: 0 1 auto; width: auto;}
            .page2-1 p {margin-top: 70px;}
            
        }
  
/*=================================================
       sohoen
=================================================*/
    
@media screen and (max-width: 1280px) {
            .page3-header .wrapper {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0 2%; box-sizing: border-box;}
            .page3-header .wrapper h2 {flex: 0 1 600px; width: auto;}
            .page3-header .wrapper .copy {flex: 0 1 600px; width: auto;}
            .page3-header h2 img {margin-top: 0;}
            .page3-1 {padding: 144px 2% 160px; box-sizing: border-box;}
            .page3-1 article {width: 100%;}
            .page3-1 .wrapper {width: 54%; height: auto; padding-left: 46%;}
            .page3-1 p {width: auto;}
            .page3-1 .wrapper .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
            .page3-1 .wrapper .flex img {margin: 34px 0 0;}
            .page3-1 .img-1 {right: 55%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .page3-header .wrapper h2 {flex: 0 1 30%; width: auto;}
            .page3-header .wrapper .copy {flex: 0 1 70%; width: auto;}
            .page3-1 .img-1 {position: static; margin-top: 70px;}
            .page3-1 .wrapper {width: 100%; height: auto; margin-top: 0; padding-left: 0;}
        }
        @media only screen and (max-width: 767px) {
            .page3-header .wrapper {display: flex; flex-wrap: wrap; flex-direction: column;}
            .page3-header .wrapper h2 {flex: 0 1 auto; width: auto; margin-bottom: 20px;}
            .page3-header .wrapper .copy {flex: 0 1 auto; width: auto;}
            .page3-1 article {position: relative; z-index: 2;}
        }
            
/*=================================================
       bath
=================================================*/

@media screen and (max-width: 1280px) {
            .page4-2 {padding: 144px 2% 160px; box-sizing: border-box;}
            .page4-2 article {width: 100%;}
            .page4-2 .wrapper {width: auto; height: auto; padding-left: 52%;}
            .page4-2 p {width: auto;}
            .page4-2 .wrapper .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
            .page4-2 .wrapper .flex img {margin: 64px 0 0;}
            .page4-2 .img-1 {margin-right: 0;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .page4-1 {padding: 144px 2% 160px;}
            .page4-1 .wrapper {width: 100%;}
            .page4-1 .wrapper .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
            .page4-1 .wrapper .flex img {margin: 40px 0 0;}
            .page4-2 .img-1 {position: static; margin: 70px auto 0;}
            .page4-2 .wrapper {width: 100%; height: auto; margin-top: 0; padding-left: 0;}
        }
        @media only screen and (max-width: 767px) {
            .page4-1 .wrapper {margin-top: 70px;}
            .page4-2 article {position: relative; z-index: 2;}
        }
        
/*=================================================
       room
=================================================*/

@media screen and (max-width: 1280px) {
            .page5-header .wrapper {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0 2%; box-sizing: border-box;}
            .page5-header .wrapper h2 {flex: 0 1 600px; width: auto;}
            .page5-header .wrapper .copy {flex: 0 1 600px; width: auto;}
            .page5-header h2 img {margin-top: 0;}
            .page5-1 {padding: 144px 2% 30%; box-sizing: border-box;}
            .page5-1 .wrapper {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%;}
            .page5-1 .wrapper img {flex: 0 1 48%; width: 50%; margin: 0;}
            .page5-1 .wrapper img:nth-child(1) , .page5-1 .wrapper img:nth-child(3) {margin: 0;}
            .page5-2 {padding: 144px 2% 30%; box-sizing: border-box;}
            .page5-2 .img {left: 0; width: 100%; margin-left: 0;}

        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .page5-header .wrapper h2 {flex: 0 1 30%; width: auto;}
            .page5-header .wrapper .copy {flex: 0 1 70%; width: auto;}
            .page5-1 .wrapper {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%;}
            .page5-1 .wrapper img {flex: 0 1 auto; width: auto; margin: 0;}
        }
        @media only screen and (max-width: 767px) {
            .page5-header .wrapper {display: flex; flex-wrap: wrap; flex-direction: column;}
            .page5-header .wrapper h2 {flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            .page5-header .wrapper .copy {flex: 0 1 auto; width: auto; text-align: center;}
            .page5-header .wrapper .copy img {margin: 0 auto;}
            .page5-1 p {margin-top: 70px;}
            .page5-2 p {margin-top: 70px;}
        }
        
/*=================================================
       reserve
=================================================*/

.page6-1 li .sp_on {display: none;}

@media screen and (max-width: 1280px) {
            .page6-1 {padding: 160px 2%; box-sizing: border-box;}
            .page6-1 ul {width: 100%;}
            .page6-1 li .img {width: 25%;}
            .page6-1 li .text {width: 70%;}
            .page6-1 li .line {width: 100%;}
            .page6-2 {padding: 80px 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .page6-1 li {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; min-height: 100px; margin: 10px 0 0;}
            .page6-1 li .line {flex: 0 1 100%;}
            .page6-1 li .img {flex: 0 1 30%; width: auto; height: auto; padding: 0 0 0 10px; }
            .page6-1 li .text {flex: 0 1 70%; width: auto; height: auto; padding-top: 0;}
            .page6-2 .bnr {width: 100%; max-width: 728px; height: auto;}
            .page6-1 li .text.sp_on {display: none;}
        }
        @media only screen and (max-width: 767px) {
            .page6-1 li {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; min-height: auto; margin: 10px 0 0;}
            .page6-1 li .line {flex: 0 1 auto;}
            .page6-1 li .img {flex: 0 1 auto; width: auto; height: auto; padding: 10px 0 0 0; }
            .page6-1 li .text {flex: 0 1 auto; width: auto; height: auto; padding-top: 0; text-align: center;}
            .page6-1 li:last-of-type .text {padding-bottom: 10px;}
            .page6-1 li .text.pc_on {display: none;}
            .page6-1 li .text.sp_on {display: block;}
        }

/*=================================================
       access
=================================================*/

.page7-1 li .text.sp_on {display: none;}

@media screen and (max-width: 1280px) {
            .page7-1 {padding: 144px 2% 160px; box-sizing: border-box;}
            .page7-1 ul {width: 100%;}
            .page7-1 li .img {width: 35%; padding-left: 10px; box-sizing: border-box;}
            .page7-1 li:nth-child(2) .img {padding-left: 10px; box-sizing: border-box;}
            .page7-1 li .text {width: 65%; height: auto; padding-bottom: 30px; box-sizing: border-box;}
            .page7-1 li:nth-child(2) .text {height: auto; padding: 30px 0 ; box-sizing: border-box;}
            .page7-1 li .line {width: 100%;}
        }
        @media screen and (max-width: 1200px) {
            .gmap {position: relative; margin-top: 80px; padding-top: 50%;}
            .gmap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1024px) {
            .page7-1 li {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; min-height: auto; margin: 10px 0 0;}
            .page7-1 li .line {flex: 0 1 auto;}
            .page7-1 li .img {flex: 0 1 auto; width: auto; height: auto; padding: 30px 0 0 0; }
            .page7-1 li:nth-child(2) .img {height: auto; padding-left: 0; padding-top: 30px; box-sizing: border-box;}
            .page7-1 li .text.pc_on {display: none;}
            .page7-1 li .text.sp_on {display: block;}
            .page7-1 li .text {flex: 0 1 auto; width: auto; height: auto; padding: 30px 0;}
            .page7-1 li .text dt {float: left; width: 140px;}
            .page7-1 li.train .text dt {float: left; width: 120px;}
            .page7-1 li .text dd {margin-bottom: 10px; padding-left: 140px;}
            .page7-1 li.train .text dd {margin-bottom: 10px; padding-left: 120px;}
        }
        @media only screen and (max-width: 767px) {
        }
        
/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
          
        }