@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}
.mon-01 , .kani-01 {z-index: 100;}
@media screen and (max-width: 1300px) {
        html , body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        .wrapper {width: 100%; min-width: 100%;} 
            .page-header-wrap {position: relative;}
            .page-header-wrap:before {position: absolute; top: 0; left: 0; display: block; content: ""; background: url(../images/img/top/left.png) repeat-y left top / 2% auto , url(../images/img/top/right.png) repeat-y right top / 2% auto , url(../images/img/top/top-bottom.png) repeat-x left top / 100% auto , url(../images/img/top/top-bottom.png) repeat-x left bottom / 100% auto; width: 100%; height: 100%;}
            .page-header {position: relative; height: auto;  padding-top: 32.35%;}
            .page-left , .page-right , .page-top , .page-bottom {display: none;}
        }
        @media screen and (max-width: 1200px) {
            .wrap {width: 100%; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}
            .inner {width: 100%; max-width: 1080px;}
            .page-title {width: 100%; margin-top: -4%;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        header {height: 80px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .table th , .table td {padding: 15px 5px;}
        .table th {width: 25%;}
        .page-title {background: url(../images/img/kani.png) no-repeat right 20% / 15% auto; width: 100%; margin-top: -6%; padding-bottom: 1em;}
        .popup_contents {width: 60% !important;}
        .pb-2em {padding-bottom: 10px;}
        .pb-3em {padding-bottom: 20px;}
        }
        

/*=================================================
       header
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            .navigation-wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1180px; height: auto; padding: 0 1%; overflow: hidden; box-sizing: border-box;}
            .navigation-wrap .logo {flex: 0 1 300px; width: auto; margin-right: 20px;}
            .navigation-wrap .navigation {flex: 0 1 880px; width: auto;}
            .navigation-wrap .navigation ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; align-items: flex-end; width: 100%; height: auto;}
            .navigation-wrap .navigation ul li {padding-right: 0;}
            
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        

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

@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) {
        }
        
/*=================================================
       toppage
=================================================*/
@media screen and (max-width: 1280px) {
            .movie-wrap {position: relative;}
            .movie-wrap:before {position: absolute; top: 0; left: 0; display: block; content: ""; background: url(../images/img/top/left.png) repeat-y left top / 2% auto , url(../images/img/top/right.png) repeat-y right top / 2% auto , url(../images/img/top/top-bottom.png) repeat-x left top / 100% auto , url(../images/img/top/top-bottom.png) repeat-x left bottom / 100% auto; width: 100%; height: 100%;}
            #movie::before {padding-top: 0;}
            #movie {position: relative; height: auto; padding-top: 52.25%;}
            #movie video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .movie-left , .movie-right , .movie-top , .movie-bottom {display: none;}
        }
        @media screen and (max-width: 1200px) {
            .greeting {width: 100%; padding: 50px 2%; box-sizing: border-box;}
            #index .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 15px;}
            #index .flex .three {flex: 0 1 360px; width: auto; padding-right: 0;}
            #index .flex .float-l {flex: 0 1 560px; width: auto; margin-right: 20px;}
            #index .flex .float-r {flex: 0 1 560px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            #index .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px;}
            #index .flex .three {flex: 0 1 auto; width: auto;  max-width: 360px; padding-right: 0;}
            #index .flex .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 30px;}
            #index .flex .float-r {flex: 0 1 auto; width: auto;}
        .greeting {padding-top: 25%;}
        .mon-01 {background: url(../images/img/top/mon.png) no-repeat center top / 100% auto; width: 25%; max-width: 140px; top: -6%;}
        }
        

/*=================================================
       facilities
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #facilities video {width: 100%; height: auto;}
        }
        @media screen and (max-width: 1100px) {
            .fa-con1 {background: url(../images/img/facilities/img_01.png) no-repeat left top / 90% auto; width: 100%; height: ;}
            .fa-con1 .mov {left: auto; right: 0; width: 48%;}
            .fa-con2 {background: url(../images/img/facilities/img_02.png) no-repeat top left /100% auto; width: 100%;}
        }
        @media screen and (max-width: 1024px) {
            .fa-con1 {background: none; width: 100%; height: auto;}
            .fa-con1 .mov {position: static; width: 100%; max-width: 540px; margin: 0 auto 30px;}
            .fa-con1 .fa-text {top: 40%; left: auto; right: -2%; width: 350px;}
            .fa-con2 {background: none; width: 100%; height: auto;}
            .fa-con2 p {position: static; width: auto; margin-bottom: 20px;}
        }
        @media only screen and (max-width: 767px) {
            .fa-con1 .fa-text {position: static; width: auto; text-align: center; margin-bottom: 30px;}
        }
  
/*=================================================
       cuisine
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            #cuisine .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; min-width: 100%; min-height: auto; gap: 10px;}
            #cuisine .nami-back2.flex {flex-direction: row-reverse;}
            #cuisine .flex .w510 {flex: 0 1 510px; width: auto;}
            #cuisine .flex .w540 {flex: 0 1 540px; width: auto;}
            #cuisine .flex .w460 {flex: 0 1 510px; width: auto;}
            #cuisine .flex .w590 {flex: 0 1 590px; width: auto;}
            .slider_box:after {display: block; content: "";  padding-top: 66.66%;}
            .slider_box {position: relative;}
            .slider_box .flexslider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .slider_box2:after {display: block; content: "";  padding-top: 61.66%;}
            .slider_box2 {position: relative;}
            .slider_box2 .flexslider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            #cuisine .flex {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; width: 100%; min-width: 100%; min-height: auto; gap: 10px;}
            #cuisine .nami-back2.flex {flex-direction: column-reverse;}
            #cuisine .flex .w510 {flex: 0 1 auto; width: 100%; max-width: 510px;}
            #cuisine .flex .w540 {flex: 0 1 auto; width: 100%; max-width: 540px;}
            #cuisine .flex .w460 {flex: 0 1 auto; width: 100%; max-width: 580px;}
            #cuisine .flex .w590 {flex: 0 1 auto; width: 100%; max-width: 590px;}
            #cuisine .text-r {text-align: left;}
            .nami-back , .nami-back2 {background: url(../images/img/cuisine/nami.png) no-repeat right 98% / 70% auto; padding-bottom: 10%;}
        }

/*=================================================
       geo
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .nami-back2 {min-width: 100%;}
            .area-box {width: 100%;}
            .area-3 {left: 0;}
            .area-4 {left: auto; right: 0;}
            #geo .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; min-width: 100%; min-height: auto; gap: 10px;}
            #geo .flex .w510 {flex: 0 1 510px; width: auto;}
            #geo .flex .w540 {flex: 0 1 540px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .area-box {height: auto;}
            #geo .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; width: 100%; min-width: 100%; min-height: auto; gap: 10px; margin-bottom: 20px;}
            #geo .box .slider_box {flex: 0 1 450px; width: auto;}
            .area-2 , .area-3 {position: static; width: calc(100% - 470px);}
            .area-4 {top: 0;}
        }
        @media only screen and (max-width: 767px) {
            #geo .box {display: flex; flex-wrap: wrap; flex-direction: column; margin-bottom: 50px;}
            #geo .box:last-of-type {flex-direction: column-reverse; margin-bottom: 0;}
            #geo .box .slider_box {flex: 0 1 auto; width: 100%; max-width: 450px;}
            .area-2 , .area-3 {position: static; width: auto; margin-top: 2em;}
            #geo .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #geo .flex .w510 {flex: 0 1 auto; width: auto}
            #geo .flex .w540 {flex: 0 1 auto; width: 100%; max-width: 540px;}
        }
        
/*=================================================
       tourism
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .tourism-box:nth-child(even) {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; align-items: center;}
            .tourism-box:nth-child(odd) {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center;}
            .tourism-box .w240 {flex: 0 1 240px; width: auto;}
            .tourism-box .w780 {flex: 0 1 780px; width: auto; margin-right: 10px;}
            .tourism-box h2 {width: 100%; height: auto;}
            .tourism-box:nth-child(odd) .w240 {margin-right: 0; margin-right: 10px;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .grid-wrap > div {padding-right: 10px;}
            .tourism-box {max-width: 360px;}
            .tourism-box:nth-child(even) {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .tourism-box:nth-child(odd) {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .tourism-box .w240 {flex: 0 1 auto; width: auto;  margin-bottom: 10px;}
            .tourism-box .w780 {flex: 0 1 auto; width: auto; margin-right: 0;}
            .tourism-box h2 {width: 100%; height: auto; font-size: 1.2em;}
            .tourism-box:nth-child(odd) .w240 {margin-right: 0; margin-left: 0; margin-bottom: 20px;}
        }

        
/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .map {position: relative; padding-top: 51%;}
            .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }

        
/*=================================================
       price
=================================================*/
@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) {
            #price .table_box {overflow-x: scroll;}
            #price .table_box table {min-width: 600px;}
            #price .table_box table .small {font-size: 10px;}
            #price table th , #price table td {padding: 10px 2px; text-align: center; vertical-align: middle;}
        }

        
/*=================================================
       english
=================================================*/
@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) {
        }