@charset "utf-8";

/* CSS Document */
.nosp {
  display: none;
}

.main-title,
#okinawa {
    line-height: 1.8
}

.txt-mincho {
    font-family: 'Noto Serif JP', serif;
}

.main-title {
    width: 100%;
    height: 100vh;
    background-image: url("../images/mv.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

.main-title.oka {
    background-image: url("../images/oka/mv.png");
}

.main-title.taketomi {
    background-image: url("../images/taketomi/mv.png");
}

.main-title .titlebox {
    width: 94vw;
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.titlebox>h2 img {
    width: 30vw;
}

.titlebox>h2.oka img,
.titlebox>h2.taketomi img {
    width: 40vw;
}

.readcopy {
    font-size: calc(24vw / 750 * 100);
    color: #FFF;
    margin-top: 10vw;
}

.readcopy.mt50 {
    margin-top: 10vw;
}

.readcopy>span {
    display: block;
    font-size: calc(60vw / 750 * 100);
    margin-bottom: 20px;
}

section:not(.searchmodule__box) {
    width: 100%;
    padding-top: 12vw;
    padding-bottom: 12vw;
}

.section-container {
    width: 94vw;
    margin: auto;
}

.content__introbox {
    text-align: center;
    width: 80vw;
    margin: auto;
}

.content__introbox .intro-img {
    margin-bottom: 6vw;
}

.content__introbox.single .intro-img img {
    width: 80vw;
}

.content__introbox.double .intro-img img {
    width: 60vw;
}

.content__introbox .intro-sub {
    font-size: calc(40vw / 750 * 100);
    margin-bottom: 6vw;
}

.content__introbox .intro-txt {
    font-size: calc(24vw / 750 * 100);
}

.content__introbox.double {
    padding-top: 12vw;
    margin-bottom: 12vw;
}

.content__hotelbox {
    text-align: center;
    position: relative;
    padding-top: 40vw;
}

.content__hotelbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 1px;
    height: 30vw;
    margin: auto;
    background-color: #000;
}

.hotel-list>li+li {
    margin-top: 12vw;
}

.hotel-list .hotel-img {
    margin-bottom: 6vw;
}

.hotel-list .hotel-img img {
    width: 80vw;
}

.hotel-list .hotel-sub {
    font-size: calc(40vw / 750 * 100);
    margin-bottom: 3vw;
}

.hotel-list .hotel-txt {
    width: 80vw;
    margin: auto;
    font-size: calc(24vw / 750 * 100);
}

.hotel-link-button {
    margin: 6vw auto;
    width: 80vw;
}

.hotel-link-button>a {
    display: block;
    text-align: center;
    font-size: calc(26vw / 750 * 100);
    color: #FFF;
    position: relative;
    line-height: 48px;
    background-color: #000;
}

.hotel-link-button>a::after {
    content: "";
    background: url("/cmn/icon/icon_arrow_right_white.svg") no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3%;
    margin: auto;
}

.foot-content {
  background: #000;
  padding-top: calc(30vw / 7.5)!important;
  padding-bottom: calc(30vw / 7.5)!important;
}


/* 下層 */

.content-inbox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 12vw;
    width: 86vw;
}

.disp01 {
    order: 1;
}

.disp02 {
    order: 2;
}

.disp03 {
    order: 3;
}

.content-inbox .main-img {
    text-align: center;
    margin-bottom: 3vw;
    width: 100%;
}

.content-inbox .row-box {
    width: 100%;
    text-align: center;
}

.content-inbox .row-box p {
    text-align: left;
    font-size: calc(24vw / 750 * 100);
}

.content-inbox .row-box.row-box__text {
    width: 100%;
    font-size: calc(24vw / 750 * 100);
}

.content-inbox .row-box .heading-txt {
    text-align: left;
    font-size: calc(32vw / 750 * 100);
    margin: 3vw auto;
}

.heading-tour {
    text-align: center;
    font-size: calc(48vw / 750 * 100);
    color: #FFF;
    margin-bottom: 30px;
    line-height: 1.2;
}

.heading-tour .en-letter {
    font-family: 'Caveat', cursive;
    font-size: calc(36vw / 750 * 100);
    color: #FFF;
    display: block;
}

.heading-tour small {
    font-size: 60%;
}

.tab-list {
    margin: 0 auto calc(40vw / 7.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tab-list li {
    flex-grow: 1;
    margin-right: 3vw;
    margin-bottom: 3vw;
    background: #FFF;
    line-height: 48px;
    font-size: calc(26vw / 750 * 100);
    font-weight: bold;
    color: #000;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.tab-list li:last-child {
  margin-right: 0;
}

.tab-list li.nav_on,
.tab-list li:hover {
  background: #a7a238;
  color: #FFF;
}

.area00{
  display: none;
}

.close-txt{
  margin-top: calc(30vw / 7.5);
  text-align: center;
  font-size: calc(24vw / 7.5);
  color: #FFF;
}

.tour-list.single>li {
  margin-right: 0;
}

.movie-content {
  border: 10px solid #fff;
  width: 84vw;
  max-width: 100%;
  height: auto;
  margin: auto;
  position: relative;
}

.movie-content:after {
  content: "";
  display: block;
  padding-top: 56.5%;
}

.movie-content iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}