@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;}
.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;}
        .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;}
        body {padding-top: 0;}
        img {max-width: 100%; height: auto;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .container {width: 100%; max-width: 1000px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@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) {
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       footer
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
        }
        @media screen and (max-width: 1024px) {
            #footer_add {float:none; width: auto; text-align: center;}
            .right_bottom_Area {position: static; text-align: center; margin-top: 20px;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }


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


@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            #greeting.container {width: 100%; max-width: 1200px;}
            #greeting .txtArea {left: auto; right: 2%;}
            #greeting .imgArea {width: 80%; left: -10%;}
            #greeting .imgArea img {width: 100%; height: auto;}
            #greeting .deco1 {right: 2%;}
            #point {padding: 50px 2% 100px; box-sizing: border-box;}
           #point .container {width: 100%; max-width: 1050px;}
            #point .deco1 {left: 0;}
            #point .deco2 {bottom: -20%; right: -2%; width: 13%;}
            #point .deco2 img {width: 100%; height: auto;}
            .bnrArea ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 20px;}
             .bnrArea ul li img {max-width: 100%; height:auto;}
        }
        @media screen and (max-width: 1024px) {
            #mainVisual {margin-top: 80px;}
            #greeting {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; height: auto; padding: 30px 0;}
            #greeting .txtArea , #greeting .imgArea {position: static; width: auto;}
            #greeting .txtArea {padding: 0 2%;}
            #greeting h2 {width: auto; margin-left: 0;}
            #greeting p {text-align: center;}
            #point {padding: 50px 2%;}
            #point .deco1 {left: 0;}
            #point .deco2 {bottom: 0; right: 5%; width: 20%;}
            .bnrArea ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            #plansearch table th ,  #plansearch table td {display: block; width: 100%;}
            #plansearch table th {text-align: center;}
            .plan_form {width: 100%; padding: 0 2%;}
            .plan_form form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            .plan_form .check_in , .plan_form .guests {width: auto; margin-right: 0;}
            .plan_form .search_btn {width: 100%; margin-left: 0; text-align: center;}
            .plan_form .date {order: 1;}
            .plan_form .check {order: 2;}
            .plan_form .guests  {order: 3;}
            .plan_form .type  {order: 4;}
            .plan_form .search_btn  {order: 5;}
            #planList {padding: 50px 2% 100px;}
            #planList .cont_wrap {flex-wrap: wrap; justify-content: center; gap: 20px;}
            #planList .cont {margin: 0 0 20px;}
            #contents {background: url(../img/bg_btmimg.png) no-repeat center bottom / auto 600px;}
        }
        @media only screen and (max-width: 767px) {
            #greeting .deco1 {width: 20%;}
            #greeting p {text-align: left;}
            #point {padding: 50px 2% 100px;}
            #point .deco2 {bottom: -100px; right: 2%;}
        }
        @media only screen and (max-width: 560px) {
            #point .deco1 {top: 80px; width: 25%;}
            #point .deco2 {width: 30%;}
        }
 
/*=================================================
       facilities
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
         #facilities #cont0202 .deco1 {right: -2%;}
        }
        @media screen and (max-width: 1024px) {
            #mainVisual .title {top: 50%; transform: translate(-50% , -50%);}
            #facilities #cont01 {background-size: 100% auto; padding: 30px 2% 20%;}
            #facilities #cont01 .txtArea {position: static; width: auto; max-width: 588px; margin: 0 auto 50px; text-align: center;}
            #facilities #cont01 .txtArea h2 {margin-left:0;}
             #facilities #cont01 .img_box {position: relative;}
            #facilities #cont01 .img01 {position: static; width: 90%;}
            #facilities #cont01 .img02 {top: auto; bottom: -10%; right: 0; width: 45%;}
            #facilities #cont02 {padding: 70px 2% 10px;}
            #facilities #cont0201 , #cont0202 , #cont0203 {width: 100%; max-width: 960px;}
            #facilities #cont0201 .txtArea {width: auto; max-width: 750px;}
            #facilities #cont0202 .txtArea , #facilities #cont0203 .txtArea {width: auto; max-width: 460px;}
            #facilities #cont02 .flex-justify {gap: 10px;}
            #facilities #cont0201 .deco1 {top: -5%; width: 20%;}
            #facilities #cont0202 .imgArea {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px;}
            #facilities #cont0202 .img_box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 48%; margin-top: -10%;}
            #facilities #cont0202 .img01 {width: 50%;}
            #facilities #cont0202 .img02 {position: static; order: 0; z-index: 1; width: 80%;}
            #facilities #cont0202 .img03 {order: 1; top: auto; bottom: 0; width: 35%;}
            #facilities #cont0202 .deco1 {top: -10%; right: 0; width: 25%;}
            #facilities #cont0203 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px;}
            #facilities #cont0203:after {display: none;}
            #facilities #cont03 {padding: 60px 2%;}
            #facilities #cont03 table {width: 80%;}
        }
        @media only screen and (max-width: 767px) {
            #facilities #cont01 .txtArea {text-align: left;}
            #facilities #cont02 .flex-justify {flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities #cont0202 .imgArea {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities #cont0202 .img01 {width: auto;}
            #facilities #cont0202 .img_box {position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 450px; margin-top: 10px; padding-bottom: 15%;}
            #facilities #cont0202 .img02 {position: static; order: 0; z-index: 1; width: 60%;}
            #facilities #cont0202 .img03 {order: 1; bottom: 0; width: 60%; }
            #facilities #cont0202 .txtArea , #facilities #cont0203 .txtArea {width: 100%; max-width: 100%;}
            #facilities #cont0203 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities #cont0203 .deco1 {bottom: -10%; left: 0; width: 25%;}
            #facilities #cont03 table {width: 100%;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       restaurant
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            #restaurant #cont01 .container {width: 100%; max-width: 1200px;}
            #restaurant #cont01 .txtArea {left: auto; right: 0; width: auto; max-width: 500px;}
            #restaurant #cont01 .txtArea p {max-width: 450px;}
            #restaurant #cont01 .img01 {width: 65%; left: -10%; top: 3%;}
            #restaurant #cont01 .img01 img {width: 100%; height: auto;}
            #restaurant #cont01 .img02 {top: 55%; right: 0; width: 40%;}
            #restaurant #cont01 .img02 img {width: 100%; height: auto;}
            #restaurant #cont01 .img03 {top: 65%; width: 40%;}
            #restaurant #cont01 .img03 img {width: 100%; height: auto;}
            #restaurant #cont01 .img04 {top: 55%; left: 0; width: 30%;}
            #restaurant #cont01 .img04 img {width: 100%; height: auto;}
            #restaurant #cont01 .deco2 {left: 43%;}
            #restaurant #cont01 .deco3 {left: 0;}
        }
        @media screen and (max-width: 1024px) {
            #restaurant #cont01 {height: auto; padding: 70px 2% 60px;}
            #restaurant #cont01 .container {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px; height: auto; }
            #restaurant #cont01 .txtArea , #restaurant #cont01 .img01 {position: static; width: auto;}
            #restaurant #cont01 .txtArea {max-width: 580px; padding: 0 2%;}
            #restaurant #cont01 h2 {width: auto; margin-left: 0;}
            #restaurant #cont01 .txtArea p {max-width: 580px; text-align: center;}
            #restaurant #cont02 .menulist .col {padding: 0 2%;}
            #restaurant #cont03 {padding: 80px 2%;}
            #restaurant #cont03 .txtArea {left: 0;}
            #restaurant #cont03 .imgArea {width: 65%;}
        }
        @media only screen and (max-width: 767px) {
            #restaurant #cont01 .txtArea p {text-align: left;}
            #restaurant #cont02 .flex-justify {flex-direction: column;}
            #restaurant #cont02 .menulist .col {width: 100%;}
            #restaurant #cont03 .container {display: flex; flex-wrap; flex-direction: column; align-items: center; gap: 20px;}
            #restaurant #cont03 .txtArea {position: static; width: auto;}
            #restaurant #cont03 .imgArea { width: auto;}
            #restaurant #cont03 .deco1 {top: 20%; bottom: ; left: auto; right: 2%; width: 25%;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       sightseeing
=================================================*/


@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            #tokunoshima #cont02 .container {width: 100%; max-width: 1200px; padding: 0 2%; box-sizing: border-box;}
            #tokunoshima #cont02 .img01 {right: 0; width: 37%;}
            #tokunoshima #cont02 .img02 {right: 24%; width: 37%;}
            #tokunoshima #cont02 .img03 {right: 0; width: 35%;}
            #tokunoshima #cont02 .img01 img , #tokunoshima #cont02 .img02 img , #tokunoshima #cont02 .img03 img {width: 100%; height: auto;}
            #tokunoshima #cont0302 .deco1 {right: -2%;}
        }
        @media screen and (max-width: 1024px) {
            #tokunoshima #cont01 .deco1 {right: 2%;}
            #tokunoshima #cont02 {height: auto; padding: 50px 0;}
            #tokunoshima #cont02 .container {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            #tokunoshima #cont02 .txtArea h2 {margin-left: 0;}
            #tokunoshima #cont03 {padding: 80px 2% 50px;}
            #tokunoshima #cont0301 , #tokunoshima #cont0302 , #tokunoshima #cont0303 , #tokunoshima #cont0304 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px; max-width: 700px; height: auto; margin-bottom: 30px;}
            #tokunoshima #cont0301 .txtArea , #tokunoshima #cont0302 .txtArea , #tokunoshima #cont0303 .txtArea , #tokunoshima #cont0304 .txtArea {position: static; width: 100%;}
            #tokunoshima #cont0302 .img01 , #tokunoshima #cont0303 .img01 , #tokunoshima #cont0304 .img01 {position: static;}
            #tokunoshima #cont0302 .deco1 {right: 0; top: -7%; width: 25%;}
            #tokunoshima #cont0304 .deco1 {left: 0; top: auto; bottom: -7%; width: 25%;}
            #tokunoshima #cont04 {padding: 50px 2%;}
            #tokunoshima #cont04 .container {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            #tokunoshima #cont04 .cont {width: 100%; max-width: 480px;}
            #tokunoshima #cont04 #cont0401 {margin-bottom: 50px;}
            #tokunoshima #cont04 .txtArea {padding: 10px 0;}
        }
        @media only screen and (max-width: 767px) {
            #tokunoshima #cont01 {margin-bottom: 0; padding: 50px 2% 0;}
            #tokunoshima #cont01 .container {padding-bottom:30%;}
            #tokunoshima #cont01 p {text-align: left;}
            #tokunoshima #cont01 .deco1 {bottom: 0; width: 23%;}
            #tokunoshima #cont02 .txtArea {width: 100%; max-width: 630px;}
        }
        @media only screen and (max-width: 560px) {
        }
  
/*=================================================
       reservation
=================================================*/
  
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            #reservation #cont01 .deco1 {right: 0; bottom: -5%; z-index: 10;}
        }
        @media screen and (max-width: 1024px) {
            #reservation #cont01 .deco2 {left: 0; top: 10%;}
            #reservation #cont01 .deco1 {right: 2%; bottom: -5%; z-index: 10;}
            #reservation #cont02 {width: 85%; padding: 30px 2%;}
            #reservation #cont02 .deco1 {left: 0; top: auto; bottom: -30%; width: 18%;}
            #reservation .bnr {padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #reservation #cont01 {width: 100%; max-width: 700px; padding: 60px 2%;}
            #reservation #cont01 .deco2 {left: 10px; width: 20%;}
            #reservation #cont01 .deco1 {width: 30%;}
            th , td {padding: 0.5em 5px;}
            #reservation #cont02 .deco1 {bottom: -18%; width: 25%;}
            #reservation #cont02 table td {display: block; width: 100%; text-align: center;}
        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       access
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            #access #cont02 .deco1 {left: 0; }
            #access #cont02 .deco2 {right: 0;}
        }
        @media screen and (max-width: 1024px) {
            #g-map {height: 500px;}
            #access #cont02 {padding: 60px 2% 20px;}
            #access #cont03 {padding: 60px 2%;}
            #access #cont03 table {width: 90%;}
        }
        @media only screen and (max-width: 767px) {
            #g-map {height: 350px;}
            #access #cont02 .txtArea {width: 100%; max-width: 650px;}
            #access #cont02 .deco1 {top: -33%; width: 23%; }
            #access #cont02 .deco2 {bottom: -15%; width: 20%;}
            #access #cont03 table {width: 100%;}
            #access #cont03 table tr td:first-of-type {border-bottom: none; padding-bottom: 0;}
            #access #cont03 table td {display: block; width: 100%;}
            table.borderdot_btm {border-bottom: none;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       charge
=================================================*/
@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) {
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       news
=================================================*/

@media screen and (max-width: 1280px) {
        .news_d {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }


/*=================================================
       chineseh
=================================================*/

@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) {
        }
        @media only screen and (max-width: 560px) {
        }