@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;}
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
.in {display: inline-block;}
.mt-30 {margin-top: 30px;}
.mb-20 {margin-bottom: 20px;}
.small {font-size: 12px; color: #888;}
.none {display: none;}

@media screen and (max-width: 1280px) {
        html {min-width: 100%; overflow-x: hidden;}
        body {min-width: 100%; height: auto; overflow: hidden;}
        img {max-width: 100%; height: auto;}
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        }
        @media screen and (max-width: 1200px) {
            .mainWidth {width: 100%; max-width: 1176px;}
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        body {padding-top: 0;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .subpageHeader {background-position: 84%; margin-top: 95px;}
        .h_type02 {line-height: 1.8em;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .subpageHeader {height: 300px; padding-left: 20px;}
        .subpageHeader h2 {width: 50%;}
        .sideplan01 , .sideplan02 {display: none;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
        .headerInner {justify-content: space-between; width: 100%; max-width: 1176px;}
        .headerH1 {flex: 0 1 220px; width: auto;}
        nav {flex: 0 1 auto; width: auto; padding-right: 0;}
        nav li {margin: 0 8px; white-space: nowrap;}
        .tel01 {flex: 0 2 220px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .topArea {margin-top: 95px;}
        }
        @media only screen and (max-width: 767px) {
            
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       footer
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
            .footerMain {height: auto;}
            .footerMainInner {flex-direction: column-reverse; align-items: center; height: auto; width :100%;}
            .footerMainLeft, .footerMainRight {width: 100%;}
            .footerMainRight {text-align: center;}
            .footerMainRight dl {padding: 20px 2%;}
            .footerMainLeft {padding: 30px 2%;}
        }
        @media only screen and (max-width: 767px) {
            .footerMainRight dt:last-of-type {margin-top: 10px;}
        }
        @media only screen and (max-width: 560px) {
        }


/*================================================
       top
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
            .topArea video {width: 70%;}
            .planlist {padding: 50px 2% 20px;}
            .planlistInner {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; gap: 10px;}
            #mini {flex: 01 345px; width: auto; max-width: 345px; margin-left: 0; padding: 20px;}
            #mini a img {width: 100%; margin: 0;}
            #minileft {margin: 10px 0 0;}
            .sns {gap: 20px; padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
            .bg01 {background-position: center bottom;}
            .topArea {height: auto;}
            .topAreaR {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; position: static; width: auto; padding: 30px 2% 0;}
            .topAreaR .title {flex: 0 1 50%;}
            .topAreaR .txt {flex: 0 1 50%;}
            .topArea video {width: 100%; height: auto;}
            .topAreaComment {padding: 13px;}
            .roomsearchInner {width: 100%; padding: 4px 2% 0;}
            .plan_form {width: 100%; max-width: 870px; margin: 0 auto;}
            .planWrap {justify-content: center; align-items: center; padding: 20px 10px;}
            #plan_form_M {flex: 0 1 685px; width: auto; padding-top: 10px;}
            #plan_form_M-1 , #plan_form_M-2 {padding: 0 0 10px;}
            #plan_form_R {flex: 0 1 128px; width: auto;}
            .plan_form .search_btn {padding-top: 0;}
            .miryokuArea {height: auto; margin-top: 30px;}
            .miryoku01 {position: relative; top: 59px; right: 0; width: 55%;  margin-left: auto;}
            .miryoku02 {position: relative; top: 0; left: 0; width: 55%;}
            .miryoku03 {position: relative; bottom: auto; right: 15%; width: 335px; margin-left: auto; margin-top: -10%;}
            .miryoku01msg {left: -8%;}
            .miryoku01msg , .miryoku01link , .miryoku02msg , .miryoku02link , .miryoku03link {width: 65%;}
            .miryoku02link {bottom: 0;}
            .miryoku03msg {width: 55%;}
            .miryoku03link {left: auto; right: 0; width: 75%;}
            .planlistInner {display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; gap: 10px;}
            #mini {padding: 10px;}
            .areaguideInner ul {justify-content: center; gap: 20px; width: 100%; max-width: 950px;}
            .areaguideInner li {margin-right: 0; margin-bottom: 20px;}
        }
        @media only screen and (max-width: 767px) {
            .topAreaR {display: flex; flex-wrap: wrap; flex-direction: column; padding: 30px 2% 30px;}
            .topAreaR .title {flex: 0 1 auto;}
            .topAreaR .txt {flex: 0 1 auto;}
            .planWrap {flex-direction: column;}
            #plan_form_M {flex: 0 1 auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            #plan_form_M-1 , #plan_form_M-2 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; padding-bottom: 0;}
            #plan_form_M-1 div , #plan_form_M-2 div {padding-bottom: 10px;}
            #plan_form_R {flex: 0 1 auto; width: auto; margin-top: 30px;}
            .miryoku01 {position: relative; top: auto; right: auto; width: auto; max-width: 533px;  margin-left: auto; margin-bottom: 30px; padding-top: 10%;}
            .miryoku02 {position: relative; top: auto; left: auto; width: auto; max-width: 533px;}
            .miryoku03 {position: relative; bottom: auto; right: auto; width: auto; max-width: 400px; margin-left: auto; margin-top: 70px;}
            .miryoku01msg , .miryoku01link , .miryoku02msg , .miryoku02link , .miryoku03link {width: auto;}
            .miryoku01link , .miryoku02link {bottom: -20px;}
            .miryoku03msg {width: auto;}
            .miryoku01msg {left: 10%; top: 0;}
            .footerPlanArea {padding: 0px 2% 50px 2%;}
            .sns {flex-direction: column; align-items: center;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       facilities
=================================================*/
.facilitiestopArea ul {display: flex; flex-wrap: nowrap; flex-direction: row;}
ul { list-style: none;}
.room04bath {display: flex; flex-direction: row; justify-content: flex-end;}
.room04bath p {align-self: center;}
.room04bath ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: ; gap: 10px; }
.room04gallery02 {display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; gap: 10px;}
.room02 .img {display: flex; flex-wrap: nowrap; gap: 5px;}

@media screen and (max-width: 1280px) {
            .facilitiestopArea {padding: 100px 2% 10px 2%; box-sizing: border-box;}
            .roomArea {padding: 0 2%; box-sizing: border-box;}
            .room01 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
            .room01 .room01title {flex: 0 1 50%; width: auto;}
            .room01 .img {flex: 0 1 50%; position: relative; width: auto;}
            .room01_01 {top: 0; left: 0; right: auto; width: 90%;}
            .room01_02 {top: 50%; right: 0; width: 68%;}
            .bg_room02 {padding: 0 2%; box-sizing: border-box;}
            .room02 {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between;}
            .room02 .room02title {flex: 0 1 50%; width: auto;}
            .room02 .room02imgArea {flex: 0 1 50%; position: relative; width: auto;}
            .room02_01 , .room02_02 , .room02_03 {width: auto;}
            .bg_room03 {padding: 0 2%; box-sizing: border-box;}
            .room03 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center;}
            .room03 .room03title {flex: 0 1 50%; width: auto;}
            .room03 .img {flex: 0 1 50%;}
            .room03 .room03_01 {position: static; width: auto;}
            .bg_room04 {padding: 0 2%; box-sizing: border-box;}
            .room04 {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between;}
            .room04 .room04title {flex: 0 1 450px; width: auto; padding-right: 0;}
            .room04 .room04movieArea {flex: 0 1 638px; width: auto; padding-left: 0;}
            .room04 .room04movieArea video {width: 100%; max-width: 638px;}
            .room04gallery01 {gap: 10px;}
            .room04gallery01 img {width: auto;}
            .ofuroArea .img {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; gap: 10px;}
            .ofuro02 {position: static; width: 100%; max-width: 327px;}
            .ofuro03 {position: static; width: 100%; max-width: 222px;}
            .setsubiimage {display: flex; flex-wrap: nowrap; flex-direction: row; gap: 10px;}
            .setsubi01 {width: 100%; max-width: 205px; height: auto;}
            .setsubi02 {position: static; width: 100%; max-width: 344px; height: auto; margin-bottom: 10px;}
            .setsubi03 {position: static; width: 100%; max-width: 344px; height: auto;}
            .soukoArea .box {display: flex; flex-wrap: nowrap; flex-direction: row; gap: 20px;}
            .soukoimage {flex:0  1 395px; width: auto;}
            .soukoimage img {width: 100%; max-width: 370px;}
            .roomtypeAnchor {padding: 0 2% 20px 2%; box-sizing: border-box;}
            .facilAnchor {padding: 0 2% 80px 2%; box-sizing: border-box;}
         }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
            .facilitiestopArea {background-size: 60% auto;}
            .facilitiestopArea p {width: 70%;}
            .roomtypeAnchor > div , .facilAnchor > div {flex: 0 0 125px; width: auto;}
            .roomtypeAnchor ul , .facilAnchor ul  {flex: 0 1 930px; width: auto; padding-left: 20px;}
            .roomtypeAnchor li , .facilAnchor li {height: auto; line-height: 1.6em;}
            .room01 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .room01 .room01title {flex: 0 1 auto; width: auto;}
            .room01 .img {flex: 0 1 auto; max-width: 530px; margin-top: 20px;}
            .room01_01 {position: static; width: auto;}
            .room01_02 {position: static; width: auto;}
            .h_type02 {background: none; padding-top: 0; padding-left: 0; text-align: center;}
            .h_type02 .ti:before {display: inline-block; content: ""; background: url("../images/bg/bg_h_type02.png") no-repeat left top; width: 20px; height: 20px; margin-right: 20px; vertical-align: 1px;}
            .h_type02 .ti:after {display: inline-block; content: ""; background: url("../images/bg/bg_h_type02.png") no-repeat left top; width: 20px; height: 20px; margin-left: 20px; vertical-align: 1px;}
            .roomArea h3 img {display: block; margin: 20px auto; padding: 0;}
            .room02 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .room02 .room02title {flex: 0 1 auto; width: auto;}
            .room02 .room02imgArea {flex: 0 1 auto; max-width: 530px; margin-top: 20px;}
            .room03 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .room03 .room03title {flex: 0 1 auto; width: auto;}
            .room03 .img {flex: 0 1 auto; margin-top: 20px;}
            .room04 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .room04 .room04title {flex: 0 1 auto; width: auto;}
            .room04 .room04movieArea {flex: 0 1 auto; padding-top: 0;}
            .room04bath ul img {width: 100%; max-width: 270px; margin-left: 0;}
            .room04bath {display: flex; flex-direction: column; align-items: center; gap: 20px; background: none;}
            .room04bath p {align-self: center;}
            .room04bath ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: ; gap: 10px; }
            .room04gallery02 {display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 10px;}
            .room04gallery02 .video_box {flex: 0 1 532px;}
            .room04gallery02 video {width: 100%; max-width: 532px;}
            .room04gallery02 img {width: 100%; max-width: 390px; margin-left: 0;}
            .kannaiWrap {flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px; padding-top: 30px;}
            .ofuroArea , .setsubiArea {width: auto;}
            .h_type03green {background: none; min-height: auto; padding-top: 0; padding-left: 0; text-align: center;}
            .h_type03green:before {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03green.png") no-repeat left top; width: 20px; height: 20px; margin-right: 20px; vertical-align: 1px;}
            .h_type03green:after {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03green.png") no-repeat left top; width: 20px; height: 20px; margin-left: 20px; vertical-align: 1px;}
            .h_type03blue {background: none; min-height: auto; padding-top: 0; padding-left: 0; text-align: center;}
            .h_type03blue:before {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03blue.png") no-repeat left top; width: 20px; height: 20px; margin-right: 20px; vertical-align: 1px;}
            .h_type03blue:after {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03blue.png") no-repeat left top; width: 20px; height: 20px; margin-left: 20px; vertical-align: 1px;}
            .soukoArea {padding-top: 30px;}
            .soukoArea .box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            .soukoimage {flex:0  1 auto; display: flex; flex-wrap: nowrap; gap: 10px; width: auto;}
            .h_type03yellow {background: none; min-height: auto; padding-top: 0; padding-left: 0; text-align: center;}
            .h_type03yellow:before {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03yellow.png") no-repeat left top; width: 20px; height: 20px; margin-right: 20px; vertical-align: 1px;}
            .h_type03yellow:after {display: inline-block; content: ""; background: url("../images/bg/bg_h_type03yellow.png") no-repeat left top; width: 20px; height: 20px; margin-left: 20px; vertical-align: 1px;}
        }
        @media only screen and (max-width: 767px) {
            .facilitiestopArea {background: url("../images/bg/bg_takeyu01.png") no-repeat right top / 90% auto ; padding: 60% 2% 70px 2%; }
            .facilitiestopArea p {background: url("../images/bg/bg_1point.png") repeat-y left center / 10px auto; width: auto; padding-left: 20px;}
            .roomtypeAnchor , .facilAnchor {flex-direction: column; align-items: center;}
            .roomtypeAnchor > div , .facilAnchor > div {flex: 0 1 auto; width: 100%;}
            .roomtypeAnchor ul , .facilAnchor ul {flex: 0 1 auto; margin-top: 10px; padding-left: 0;}
            .room04gallery02 {display: flex; flex-direction: column; align-items: center; gap: 10px;}
            .room04gallery02 .video_box {flex: 0 1 auto;}
            .soukoimage {flex:0  1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: auto;}
            .roomArea p , .room02 p , .room03 p , .room04 p {text-align: left;}
            .room04gallery01 {flex-wrap: wrap; justify-content: center;} 
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       cuisine
=================================================*/
@media screen and (max-width: 1280px) {
            .cuisinetopArea {background-position: center bottom; margin-bottom: 50px; padding: 0 2% 30px 2%; box-sizing: border-box;}
            .cuisine01 {top: 15%; width: 42%;}
            .cuisinetopArea p {width: 60%;}
            .dinnerWrap {gap: 20px;}
            .dinner {padding: 0 2%; box-sizing: border-box;}
            .dinner video {width: 100%; height: auto;}
            .dinnergallery01 a {flex: 0 1 33%;}
            .dinnergallery01 img {width: 100%; max-width: 380px;}
            .sashimoriL {flex: 0 0 398px; width: auto;}
            .sashimoriR {flex: 0 1 778px;}
            .sashimoriR img {width: 100%; max-width: 778px;}
            .morningArea {padding: 25px 2%; box-sizing: border-box;}
            .canteenArea {padding: 25px 2% 80px; box-sizing: border-box;} 
            .morningArea p , .canteenArea p {padding-left: 0;}
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
            .cuisinetopArea {max-width: 700px; padding: 0 2% 15px 2%; box-sizing: border-box;}
            .cuisine01 {position: static; width: auto;}
            .cuisinetopArea p { width: 100%; max-width: 620px;}
            .dinnerWrap {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .dinnerL , .dinnerR {width: auto; max-width: 580px;}
            .dinnerR p {padding: 50px 0 30px 15px;}
            .sashimoriArea01 {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .sashimoriL {flex: 0 0 auto; width: auto;}
            .sashimoriR {flex: 0 1 auto; margin-top: 30px;}
            .cuisinetopArea p {text-align: left;}
            .morningArea {margin-top: 30px;}
        }
        @media only screen and (max-width: 767px) {
            .dinnerR p {padding-left: 0;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
            .accessArea {padding: 0 2% 120px; box-sizing: border-box;}
            .gmap {position: relative;}
            .gmap:after {display: block; content: ""; padding-top: 38.26%;}
            .gmap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .parkingArea {width: 96%;}
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
            .mapmemo01 {width: 100%; max-width: 840px; padding: 15px 10px 20px 10px;}
            .mapmemo02 {width: 100%; max-width: 840px;}
            .mapmemo02 dl {width: 50%;}
            .parkingArea { display: table; background: none; width: auto; padding: 0 20px 20px; text-align: center;}
            .parkingArea p {display: block; margin: 30px 0; padding: 0;}
            .parkingArea img {margin: 0;}
            .table_p05_01 {background: url("../images/bg/bg_takeyu02.png") no-repeat right top / 30% auto;}
        }
        @media only screen and (max-width: 767px) {
            .gmap {height: 350px;}
            .gmap:after {display: block; content: ""; padding-top: 0;}
            .mapmemo02 {flex-wrap: wrap; flex-direction: column; align-items: ;}
            .mapmemo02 dl {width: auto;}
            .parkingArea p {text-align: left;}
        }
        @media only screen and (max-width: 560px) {
        }
  
/*=================================================
       reservation
=================================================*/
            .tel_btn {text-align: center;}
  
@media screen and (max-width: 1280px) {
            .goyoyaku {padding: 0 2% 100px; box-sizing: border-box;}
            .table_p05_01 table {width: 100%;}
            .longstayInner {background: url("../images/bg/bg_goods1.png") no-repeat left top , url("../images/bg/bg_goods2.png") no-repeat right 25%; padding: 30px 2% 100px 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
            .table_p05_01 th {width: 25%; white-space: nowrap;}
            .longstay_tell {width: 100%; max-width: 800px;}
            .weather {padding:0 2% ;}
        }
        @media only screen and (max-width: 767px) {
            .table_p05_01 {background: none;}
            .table_p05_01 table th ,  .table_p05_01 table td {display :block;} 
            .table_p05_01 table th {width: 100%;}
            .longstayInner p {text-align: left;}
            .longstay_tell {padding: 10px 2% 5px 2%;}
            .plan01_02 {width: 100%; max-width: 580px; height: auto;}
            .linkLongstay {width: 100%; max-width: 380px;}

        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       sightseeing
=================================================*/

@media screen and (max-width: 1280px) {
            .spotlist {padding: 0 25 40px; box-sizing: border-box;}
            .spotlistInner {justify-content: center; gap: 20px;}
            figure.spot {flex: 0 1 320px; width: auto; margin: 0 0 50px;}
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       camp
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {   
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }