@charset "UTF-8";
/* CSS Document */
/*リュウミン
font-family: a-otf-ryumin-pr6n, serif;
font-weight: 300;
font-style: normal;
*/
/*アクセントカラー
小浜島：#00a1e9/rgba(0,161,233,1)
西表島：#00984f/rgba(0,152,79,1)
background: linear-gradient(-45deg, rgba(0,161,233,1) 1%, #FFF 40%,#FFF 60%,rgba(0,152,79,1) 99%);
*/
/*他CSSの打ち消し*/
.wrapContent {
 margin-top: 0;
}
h2 {
 height: auto;
}
h3 {
 color: inherit;
}
h3 span {
 padding: 0;
 height: auto;
 display: block;
}

@media screen and (max-width: 974px) and (min-width: 0px) {
#grand-top .rinji-box {
 padding-top: 0;
}
}

@media screen and (max-width:839px) {
.crumbs {
 height: auto !important;
}
.crumbs li {
 line-height: 15px;
}
}
/*---------------------------------------------------
　共通設定
---------------------------------------------------*/
.wstay * {
 font-size: 16px;
 line-height: 180%;
 box-sizing: border-box;
 font-family: 'メイリオ', Meiryo, 'sans-serif';
}
.wstay .pc-none {
 display: none;
}
.wstay section {
 padding: 50px 0 80px 0;
}
.wstay section .inner {
 width: 1200px;
 margin: 0 auto;
}
.wstay h3 {
 font-size: 28px;
 text-align: center;
 margin: 0 0 50px 0;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 300;
 font-style: normal;
}
.wstay h3 span {
 font-size: 14px;
 letter-spacing: 0.5em;
 margin: 0 0 10px 0;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 600;
 font-style: normal;
}
.wstay .btn {
 display: block;
 text-align: center;
}
.wstay .btn a {
 display: block;
 border-radius: 3px;
}
.wstay .btn a:hover {
 opacity: 0.8;
 transition: 0.3s;
 text-decoration: none;
}

@media screen and (max-width:767px) {
.wstay .pc-none {
 display: inherit;
}
.wstay .sp-none {
 display: none;
}
.wstay section .inner {
 width: 100%;
 padding: 0 10px;
}
.wstay h3 {
 margin: 0 0 30px 0;
}
}
/*---------------------------------------------------
　メインビジュアル（content-head）
---------------------------------------------------*/
.wstay .content-head {
 background: url(../img/main.jpg) no-repeat top center;
 background-size: cover;
 width: 100%;
 height: 500px;
 text-align: center;
}
.wstay .content-head .catch-txt, .wstay .content-head h2 {
 text-indent: -9999px;
}

@media screen and (max-width:767px) {
.wstay .content-head {
 background: url(../img/main-sp.jpg) no-repeat top center;
 background-size: cover;
 width: 100%;
 height: 500px;
}
}
/*---------------------------------------------------
　リード（lead）
---------------------------------------------------*/
.wstay section.lead {
 padding: 0;
 margin: -50px auto 30px auto;
}
.wstay section.lead .inner {
 padding: 50px 30px;
 background: #eae8e1;
 box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
 margin: 0 auto;
 width: 850px;
}
.wstay .lead h3 {
 margin: 0 0 30px 0;
}
.wstay .lead h3 span {
 font-size: 24px;
 border-bottom: 1px dotted #FFF;
 letter-spacing: inherit;
 display: inline-block;
}
.wstay .lead .lead-txt {
 width: 100%;
 max-width: 750px;
 margin: 0 auto;
}
.wstay .lead .lead-txt span {
 border-bottom: 1px dotted #FFF;
 line-height: 200%;
}
.wstay .lead .btn {
 width: 300px;
 margin: 20px auto 0 auto;
}
.wstay .lead .btn a {
 background: #000;
 color: #FFF;
 padding: 10px;
 font-size: 18px;
 position: relative;
}
.wstay .lead .btn a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f13a";
 font-weight: bold;
 position: absolute;
 right: 20px;
 font-size: 20px;
}

@media screen and (max-width:767px) {
.wstay section.lead {
 margin: 0 0 30px 0;
}
.wstay section.lead .inner {
 padding: 30px 10px;
 box-shadow: none;
 margin: 0;
 width: 100%;
}
.wstay .lead h3 {
 line-height: 100%;
}
.wstay .lead h3 span {
 font-size: 20px;
 display: inline;
}
.wstay .lead .lead-txt {
 padding: 0 20px;
}
.wstay .lead .lead-txt span {
 line-height: 180%;
}
}
/*---------------------------------------------------
　ナビ（nav）
---------------------------------------------------*/
.wstay .nav .content-nav {
 display: flex;
 justify-content: center;
 margin: 30px 0 0 0;
 border-bottom: 1px solid #000;
}
.wstay .nav .content-nav li {
 margin: 0 1px;
}
.wstay .nav .content-nav li a {
 display: block;
 padding: 15px 30px;
 font-size: 20px;
 color: #000;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 300;
 font-style: normal;
 border-bottom: 5px solid #333;
}
/*アクセントカラー*/
.wstay .nav .content-nav li.hotel-01 a {
 border-bottom: 5px solid #00a1e9;
}
.wstay .nav .content-nav li.hotel-02 a {
 border-bottom: 5px solid #00984f;
}
.wstay .nav .content-nav li a:hover {
 text-decoration: none;
}

@media screen and (max-width:767px) {
.wstay section.nav {
 padding: 0px 0 80px 0;
}
.wstay .nav .content-nav {
 border-bottom: none;
 margin: 0;
 flex-wrap: wrap;
}
.wstay .nav .content-nav li {
 width: calc(50% - 10px);
}
.wstay .nav .content-nav li:first-child {
 width: calc(100% - 20px);
}
.wstay .nav .content-nav li a {
 text-align: center;
 padding: 15px 0 5px 0;
}
}
/*---------------------------------------------------
　スケジュール（schedule）
---------------------------------------------------*/
.wstay .schedule .access {
 text-align: center;
}
.wstay .schedule .access img {
 width: 100%;
 height: auto;
}
@media screen and (max-width:767px) {
.wstay .schedule .access img {
 max-width: 500px;
 margin: 0 auto;
}
}
/*---------------------------------------------------
　ホテル紹介（hotel／hotel-01／hotel-02）
---------------------------------------------------*/
.wstay section.hotel {
 margin: 0 0 100px 0;
}
.wstay .hotel .inner, .wstay .hotel h3 {
 position: relative;
}
.wstay .hotel .inner::before {
 content: "";
 display: block;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 position: absolute;
 left: calc(50% - 150px);
 top: -100px;
}
.wstay .hotel.hotel-01 .inner::before {
 background-image: radial-gradient(rgba(0,161,233,0.5) 0%, rgba(0,161,233,0) 60%);
}
.wstay .hotel.hotel-02 .inner::before {
 background-image: radial-gradient(rgba(0,152,79,0.5) 0%, rgba(0,152,79,0) 60%);
}
.wstay .hotel.hotel-01 {
 margin: 0 0 50px 0;
}
.wstay .hotel .flex-wrap {
 display: flex;
 justify-content: space-between;
 margin: 0 0 30px 0;
}
.wstay .hotel .flex-wrap .img-box {
 width: 50%;
}
.wstay .hotel .flex-wrap .img-box img {
 width: 100%;
 height: auto;
 border: 2px solid #FFF;
}
.wstay .hotel .flex-wrap .txt-box {
 width: 47%;
}
.wstay .hotel .flex-wrap .txt-box h4 {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin: 0 0 20px 0;
 padding: 0 10px;
}
.wstay .hotel .flex-wrap .txt-box h4 span {
 font-size: 24px;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 300;
 font-style: normal;
}
.wstay .hotel .flex-wrap .txt-box h4 span.en {
 font-size: 20px;
 font-family: 'Niconne', cursive;
 line-height: 120%;
}
.wstay .hotel .flex-wrap .txt-box p {
 padding: 0 10px;
 margin: 0 0 30px 0;
}
.wstay .hotel .flex-wrap .txt-box .btn {
 width: 100%;
}
.wstay .hotel .flex-wrap .txt-box .btn a {
 color: #FFF;
 padding: 10px;
 font-size: 18px;
 position: relative;
}
.wstay .hotel .flex-wrap .txt-box .btn a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 right: 20px;
 font-size: 20px;
}
.wstay .hotel .slide-wrap h5 {
 font-size: 24px;
 text-align: center;
 margin: 0 0 20px 0;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 300;
 font-style: normal;
}
.wstay .hotel .slide-wrap .img-box {
 padding: 0 10px;
}
.wstay .hotel .slide-wrap .txt-box {
 padding: 10px;
}
.wstay .hotel .slide-wrap .txt-box h6 {
 font-size: 16px;
 border-bottom: 1px solid #000;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 600;
 font-style: normal;
 margin: 0 0 10px 0;
}
.wstay .hotel .slide-wrap .txt-box p {
 font-size: 14px;
 line-height: 160%;
}
.wstay .hotel .slide-wrap .img-box img {
 width: 100%;
 height: auto;
}
/*アクセントカラー色分け*/
.wstay .hotel.hotel-01 .flex-wrap .txt-box h4, .wstay .hotel.hotel-01 .slide-wrap h5, .wstay .hotel.hotel-01 .slide-wrap h6 {
 color: #00a1e9;
 border-bottom: 1px solid #00a1e9;
}
.wstay .hotel.hotel-02 .flex-wrap .txt-box h4, .wstay .hotel.hotel-02 .slide-wrap h5, .wstay .hotel.hotel-02 .slide-wrap h6 {
 color: #00984f;
 border-bottom: 1px solid #00984f;
}
.wstay .hotel.hotel-01 .flex-wrap .txt-box h4 span.en {
 color: #00a1e9;
}
.wstay .hotel.hotel-02 .flex-wrap .txt-box h4 span.en {
 color: #00984f;
}
.wstay .hotel.hotel-01 .flex-wrap .txt-box .btn a {
 background: #00a1e9;
}
.wstay .hotel.hotel-02 .flex-wrap .txt-box .btn a {
 background: #00984f;
}
.hotel-01 .slick-prev::before, .hotel-01 .slick-next::before {
 color: #00a1e9 !important;
 font-size: 36px;
}
.hotel-02 .slick-prev::before, .hotel-02 .slick-next::before {
 color: #00984f !important;
 font-size: 36px;
}

@media screen and (max-width:767px) {
.wstay section.hotel {
 margin: 0;
}
.wstay .hotel .flex-wrap {
 flex-direction: column;
 margin: 0 0 30px 0;
}
.wstay .hotel .flex-wrap .img-box {
 width: 100%;
}
.wstay .hotel .flex-wrap .txt-box {
 width: 100%;
}
.wstay .hotel .slide-wrap .img-box {
 padding: 0 15px;
}
.wstay .hotel .slide-wrap .txt-box {
 padding: 10px 15px;
}
.wstay .hotel .flex-wrap .txt-box h4 {
 flex-direction: column-reverse;
 align-items: flex-start;
 padding: 0 0 0 5px;
}
.wstay .hotel .flex-wrap .txt-box h4 span {
 line-height: 140%;
}
.wstay .hotel .flex-wrap .txt-box h4 span.en {
 font-size: 18px;
}
.wstay .hotel .flex-wrap .txt-box .btn {
 padding: 0;
}
.wstay .hotel .flex-wrap .txt-box .btn a {
 padding: 10px 30px 10px 0;
}
.wstay .hotel .flex-wrap .txt-box .btn a::after {
 right: 10px;
}
.wstay .hotel .slide-wrap h5 {
 font-size: 20px;
}
.hotel-01 .slick-prev::before, .hotel-01 .slick-next::before, .hotel-02 .slick-prev::before, .hotel-02 .slick-next::before {
 font-size: 20px;
}
}
/*---------------------------------------------------
　ツアー（tour）
---------------------------------------------------*/
.wstay section.tour {
 background: linear-gradient(-45deg, rgba(0,152,79,0.3) 1%, rgba(0,161,233,0.3) 99%);
}
.tour .tabs {
 display: flex;
 justify-content: center;
 margin:  0 0 30px 0;
 border-bottom: 2px solid #FFF;
 flex-wrap: wrap;
}
.tour .tabs li {
 text-align: center;
 width: calc( 80% / 4 );
}
.tour .tabs li a {
 display: block;
 font-size: 18px;
 color: #333;
 background: #FFF;
 padding: 10px 0 7px  0;
 margin: 0 10px;
}
.tour .tabs li.active a {
 color: #FFF;
 background: #333;
}
.tour .about-icon {
 border: 1px dotted #FFF;
 padding: 6px 0 5px 0;
 margin: 0 auto 50px auto;
 text-align: center;
 max-width: 750px;
}
.tour .about-icon p {
 display: inline-block;
 font-size: 14px;
}
.tour .about-icon p+p {
 margin: 0 0 0 20px;
}
.tour .about-icon span {
 text-align: center;
 width: 100px;
}
.tour h4 {
 text-align: center;
 font-size: 22px;
 margin: 0 0 20px 0;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 300;
 font-style: normal;
}
.tour h4+p {
 text-align: center;
 margin: 0 0 30px 0;
 font-size: 14px;
}
.tour .btn-wrap {
 display: flex;
 justify-content: center;
 margin: 0 0 50px 0;
}
.wstay .tour .box {
 text-align: center;
 margin: 0 20px;
 background: #FFF;
}
.wstay .tour .box a {
 display: block;
 color: #333;
}
.wstay .tour a .btn {
 background: #eae8e1;
 border: 2px solid #FFF;
 padding: 6px 10px 3px 10px;
}
.wstay .tour .custom a .btn {
 font-size: 18px;
}
.wstay .tour span.stay-ko, .wstay .tour span.stay-iri {
 display: inline-block;
 padding: 2px 10px;
 margin: 0 5px;
 border-radius: 3px;
 color: #FFF;
 font-size: 16px;
 line-height: 140%;
 font-family: a-otf-ryumin-pr6n, serif;
 font-weight: 600;
 font-style: normal;
}
.wstay .tour span.stay-ko {
 background: #00a1e9;
}
.wstay .tour span.stay-iri {
 background: #00984f;
}
.wstay .tour a .btn span.price {
 display: block;
 font-size: 20px;
 margin: 5px 0 0 0;
 padding: 0 30px 0 0;
 position: relative;
 border-top: 1px solid #FFF;
}
.wstay .tour .custom a .btn span.price {
 margin: 0;
}
.wstay .tour a .btn span.price::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 color: #333;
 right: 0;
 font-size: 20px;
}
.wstay .tour a:hover {
 text-decoration: none;
 opacity: 0.8;
 transition: 0.3s;
}
/*問い合わせ導線*/
.tour .contact {
 width: 100%;
 max-width: 700px;
 margin: 0 auto;
}
.wstay .tour .contact .btn a {
 background: #000;
 color: #FFF;
 padding: 15px 0;
 font-size: 18px;
 position: relative;
}
.wstay .tour .contact .btn a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 right: 20px;
 font-size: 20px;
}
.wstay .tour .contact .phone {
 text-align: center;
 background: #FFF;
 border-radius: 3px;
 color: #333;
 padding: 15px 0;
 font-size: 18px;
 position: relative;
 margin: 20px 0 0 0;
}
.wstay .tour .contact .phone a {
 color: #000;
 margin: 0 0 0 20px;
 font-size: 30px;
}
.wstay .tour .contact .phone a::before {
 font-family: "Font Awesome 5 Free";
 content: "\f87b";
 margin: 0 10px 0 0;
 font-weight: bold;
}

@media screen and (max-width:767px) {
.tour .about-icon {
 padding: 10px;
 text-align: left;
 margin: 0 auto 20px auto;
}
.tour .about-icon p+p {
 margin: 0;
}
 .tour .tabs {
  border-bottom: none;
  padding: 50px 0 0 0;
  margin: -30px 0 30px 0;
 }
 .tour .tabs li {
 width: calc( 100% / 2 );
}
.tour .tabs li a {
 padding: 8px 0 5px  0;
 margin: 5px;
}
.tour h4 {
 font-size: 20px;
}
.tour h4 span {
 display: block;
}
.tour .btn-wrap {
 flex-direction: column;
}
.wstay .tour .box {
 margin: 0 auto 10px auto;
 max-width: 350px;
}
.wstay .tour .contact .btn a {
 padding: 15px 20px 15px 0;
}
.wstay .tour .contact .btn a::after {
 right: 10px;
 top: calc(50% - 10px);
}
.wstay .tour .contact .phone a {
 font-size: 26px;
 margin: 0;
}
}
/*---------------------------------------------------a
　よくあるご質問（faq）
---------------------------------------------------*/
.wstay section.faq {
}
.wstay section.faq .inner {
 width: 100%;
 max-width: 700px;
}
.wstay .faq dt {
 font-size: 18px;
 margin: 10px 0;
 border-bottom: 1px dotted #000;
}
.wstay .faq dt::before {
 font-family: "Font Awesome 5 Free";
 content: "\f059";
 font-weight: bold;
 margin: 0 10px 0 0;
}
.wstay .faq dd {
 margin: 0 0 30px 0;
}
/*もっと見る*/
.wstay .faq .acordion {
 margin: 30px 0 0 0;
}
.wstay .faq .acordion dt.trigger {
 cursor: pointer;
 text-align: center;
 font-size: 16px;
 margin: 0 0 30px 0;
 padding: 10px 0;
 border: none;
 background: #eae8e1;
 border-radius: 3px;
 position: relative;
}
.wstay .faq .acordion dt.trigger::before {
 content: "もっと見る";
 margin: 0;
}
.wstay .faq .acordion dt.trigger.active::before {
 content: "閉じる";
}
.wstay .faq .acordion dt.trigger .open-close::after {
 font-family: "Font Awesome 5 Free";
 content: "\f13a";
 font-weight: bold;
 position: absolute;
 right: 20px;
}
.wstay .faq .acordion dt.trigger.active .open-close::after {
 content: "\f139";
}
.wstay .faq .acordion .trigger:hover {
 opacity: 0.8;
 transition: 0.3s;
}

@media screen and (max-width:767px) {
.wstay section.faq .inner {
 width: 95%;
}
}
/*---------------------------------------------------
　フッター誘導ボタン（content-foot）
---------------------------------------------------*/
.wstay section.content-foot {
 padding: 50px 0;
 background: #eae8e1;
 border-bottom: 2px solid #FFF;
}
.wstay .content-foot .btn {
 width: 100%;
 max-width: 700px;
 margin: 0 auto;
}
.wstay .content-foot .btn + .btn {
 margin: 20px auto 0 auto;
}
.wstay .content-foot .btn a {
 background: #000;
 color: #FFF;
 padding: 10px;
 font-size: 18px;
 position: relative;
}
.wstay .content-foot .btn a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 right: 20px;
 font-size: 20px;
}

@media screen and (max-width:767px) {
.wstay .content-foot .btn a {
 font-size: 16px;
}
.wstay .content-foot .btn a::after {
 right: 10px;
 font-size: 18px;
}
}