@charset "utf-8";
/* CSS Document */

/*html {
  scroll-behavior: smooth;
}*/
#container{
	font-family: "BIZ UDPMincho", serif;
/*	font-family: 'Noto Sans JP', sans-serif;*/
	font-weight: 500;
    width: 100%;
    margin: 0;
	font-size: 16px;
	color: #141414;
	line-height: 1.7;
}
#container th{	font-family: "BIZ UDPMincho", serif;}
* { box-sizing: border-box; }
#container a{
	text-decoration: none;
	color: #000;
}
#container a:hover{
	color: #000;
	opacity: .6;
}

#container img{
	width: 100%;
	vertical-align: bottom;
}
.w1000{
	width: 1000px;
	max-width: 1000px;	
	margin: 0 auto;
}

.pc{display: block;}
.sp{display: none;}

ul {
  list-style: none;
}

/*-- 画像位置 --*/
#container img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
	max-width: 100%;
}
/*-- flex --*/
.flex_box {  	display:flex;}

/*-- font --*/
.s-font{font-size: 0.9em;}
.cursive{font-family: 'Dancing Script', cursive;	color: #fbdb90;}
.hina{font-family: 'Hina Mincho', serif;}
.min{font-family: 'Noto Serif JP', serif;}
.gothic{	font-family: 'Noto Sans JP', sans-serif;}
.ano{font-family: "Anonymous Pro", monospace;}
.shippo{  font-family: "Shippori Mincho B1", serif;}
.tange{font-family: "Tangerine", cursive;  font-weight: 400;}
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}
.kiwi-maru-light {
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
}
.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}
/*--------------------page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
    color:  rgba(229,142,136,0.75);
	background: rgba(255,255,255,0.70);
	padding: .5em;
	border-radius: 1em;
	text-decoration: none;
	font-size: min(6vw,2em);
}
#page-top a:hover{
    color:  rgba(229,217,136,1.00);
}
/*--------------------パンくず */
#pankuzu{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	margin: 15px auto;
	width: 1000px;
	font-size: .85em;
}

#pankuzu ul{
    padding: 0 0 5px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}


/*------------------------------クレジット*/
.photo{position: relative;}
.cre{
/*	background: rgba(0,0,0,0.70);*/
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	/*text-align: right;*/
	font-size: .8em;
	line-height: 1;
	position: absolute;
	left: 2px;
	bottom: 2px;
	text-shadow:
       2px  0px 1px rgba(0,0,0,0.70),
       0px  2px 1px rgba(0,0,0,0.70),
      -2px  0px 1px rgba(0,0,0,0.70),
       0px -2px 1px rgba(0,0,0,0.70),		
       2px  0px 1px rgba(0,0,0,0.70),
       0px  2px 1px rgba(0,0,0,0.70),
      -2px  0px 1px rgba(0,0,0,0.70),
       0px -2px 1px rgba(0,0,0,0.70); 	
}
/*------------------------------marker*/
.marker{
background:linear-gradient(transparent 65%, #fff799 65%);
font-weight:500; 
}

/*------------------------------------------------------slick*/
.slick-slide img{width: 100%;  height: auto;}
/*.slick-prev{    left: 0;}
.slick-next{    right: 0;}*/

.slick-dots {
	position: static;
/*	margin-top: 20px;*/
/*	margin-bottom: -40px;*/
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
	font-size: 0;
	text-align: center;
	list-style: none;
}

.slick-dots li {
/*  width: 18.5%;
  margin: 0 0 0 1.875%;
	*/
}
.slick-dots li:first-child {
  margin-left: 0;
}
/*.slick-dots li {
  width: calc(100% / 4 - 5px);
  margin: 0 0 0 5px;
}

#slick01 .slick-dots li img {
  width: 100%;
  cursor: pointer;
  transition: .2s ease-in-out;
}*/
.slick-dots .slick-active img,
.slick-dots li:hover img {
  opacity: .6;
}

/* Arrows */
.slick-prev,
.slick-next
{
	z-index: 100;
}
.slick-arrow_prev,
.slick-arrow_next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	cursor: pointer;
	background: rgba(0,0,0,0.50);
	color: #fff;
	font-weight: 900;
	line-height: 1;
	z-index: 100;
	padding: .3em;
}

.slick-arrow_prev {
  left: 0;
}
.slick-arrow_next {
  right: 0;
}
.slick-arrow_prev:hover,
.slick-arrow_next:hover {	background: rgba(0,0,0,1.00);}


/*------------------------------------------------------topのスライドショー*/
.slider {
	max-height: 900px;
	overflow: clip;
	
/*  max-height: auto;
  margin-inline: auto;*/
/*  overflow: hidden; /* 画像がはみ出ないようにする */
/*  width: 80vw;*/
/*	max-width: 1300px;*/
}
.slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
.main{
	max-height: 850px;
	position: relative;
/*	background:	#EFEEE7;*/
}
.main .w1000{
    position: absolute;
	top:20%;
	left:1%;
	right: 1%;
}
.main h2{
	font-family: "Shippori Mincho B1", serif;
	font-weight: 700;
	font-size: min( 2.7vw, 1.3em );
	background: rgba(255,255,255,0.60);
	margin: 0 0 1em;
	display: inline-block;
	padding: 0 1.5em;
	color: #044057;
	text-shadow    : 
       1px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  1px 4px rgba(255, 255, 255, 0.68),
       1px -1px 4px rgba(255, 255, 255, 0.68),
      -1px -1px 4px rgba(255, 255, 255, 0.68),
       1px  0px 4px rgba(255, 255, 255, 0.68),
       0px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  0px 4px rgba(255, 255, 255, 0.68),
       0px -1px 4px rgba(255, 255, 255, 0.68);
}
.main h2 strong{
	font-size: 1.5em;
	font-family: "Dancing Script", cursive;
}
.main h1{
	background: #DCF0F9;
	background: linear-gradient(309deg,rgba(220, 240, 249, 0.5) 0%, rgba(104, 214, 228, 0.5) 51%, rgba(0, 117, 190, 0.5) 100%);
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	letter-spacing : -1px;
	line-height: 1.4;
	padding: .4em .7em;
	font-size: min( 5vw, 2.2em );
	margin-left: 8vw;
	color: #FFFFFF;
	text-shadow    : 
       1px  1px 4px rgba(0, 91, 85, 0.68),
      -1px  1px 4px rgba(0, 91, 85, 0.68),
       1px -1px 4px rgba(0, 91, 85, 0.68),
      -1px -1px 4px rgba(0, 91, 85, 0.68),
       1px  0px 4px rgba(0, 91, 85, 0.68),
       0px  1px 4px rgba(0, 91, 85, 0.68),
      -1px  0px 4px rgba(0, 91, 85, 0.68),
       0px -1px 4px rgba(0, 91, 85, 0.68); 
}
.main h1 strong{font-size:  1.4em;}
.main h1 small{font-size:  .5em;}
.main .text{
	font-weight: 500;
	font-size: min( 2.4vw, 1.2em );
	background: rgba(255,255,255,0.60);
	margin: 6vw auto 0;
	display: inline-block;
	padding: .8em 2.5em;
	text-shadow    : 
       1px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  1px 4px rgba(255, 255, 255, 0.68),
       1px -1px 4px rgba(255, 255, 255, 0.68),
      -1px -1px 4px rgba(255, 255, 255, 0.68),
       1px  0px 4px rgba(255, 255, 255, 0.68),
       0px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  0px 4px rgba(255, 255, 255, 0.68),
       0px -1px 4px rgba(255, 255, 255, 0.68);
}
/*------------------------------nav*/
nav{
	background: #e6f5f4;
	position: sticky;
	top: 0;
	z-index: 10;
	width: 100%;	
}
nav ul{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
nav ul li{
	flex: 1;
	border-left: 1px #fff solid;
	position: relative;
}
nav ul li:last-of-type{border-right: 1px #fff solid;}
nav ul li a{
	padding: 1em;
	font-size: min(2.5vw,1.05em);
	display: block;
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	color: #fff;
	overflow: hidden;
	transition:all .5s ease-out;
}
nav ul li a:hover{
	background: #339AA7;
	color: #fff!important;
	transition:all .5s ease-out;
}
.menu li ul {
	flex-direction: column;
	justify-content: flex-start; 
	align-items: stretch;
	font-size: .9em;
	position: absolute;
}
.menu li li a {
	display: block;
	padding: 0 10px;
	height: 0;
	background: #A5DAE3;
	color: #1F3D39;
	transition:all .5s ease-out;
}
.menu li li:last-of-type{border-right: none;} 
.menu > li:hover li a {
	display: table;
	margin-top: 1px;
	padding: .6em;
	width: 100%;
	height: 1em;
	transition:all .5s ease-out;
}
.menu > li:hover li a:hover {
	color: #1F3D39;
	transition:all .5s ease-out;
}


/*------------------------------------------------------area_top*/
.area_top{
	background: url("../img/area_top_honto01.jpg") no-repeat left center/ contain;
	margin: 2em 0;
	color: #1b1464;
	text-shadow    : 
       1px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  1px 4px rgba(255, 255, 255, 0.68),
       1px -1px 4px rgba(255, 255, 255, 0.68),
      -1px -1px 4px rgba(255, 255, 255, 0.68),
       1px  0px 4px rgba(255, 255, 255, 0.68),
       0px  1px 4px rgba(255, 255, 255, 0.68),
      -1px  0px 4px rgba(255, 255, 255, 0.68),
       0px -1px 4px rgba(255, 255, 255, 0.68);
}
.area_top .flex_box{
	justify-content: flex-end; 
	margin-left: 20%;
	align-items: center;
}
.area_top p{ width: 30%; max-width: 500px;}
.area_top dl{
	padding: 6em 0 3em;
	width: 50%;
	max-width: 600px;
}
.area_top h2{
	border-bottom:#1b1464 1px solid;
	margin-bottom: 1em;
}
.area_top h2 small{
	position: absolute;
}
.area_top .tange{	
	color: #b6d4de; 
	font-size: 2em;
	text-align: right;
}
.area_top .catch{
	display: inline-block;
	color: #0071bc;
	background:#d2ecf7; 
	box-shadow: 0px 0px 1em 1em #d2ecf7;
	padding: 0;
	margin: 3vw 1em;
}
/*宮古島*/
#miyako .area_top{	background: url("../img/area_top_miyako01.jpg") no-repeat left center/ contain;}
/*石垣*/
#ishigaki .area_top{	background: url("../img/area_top_ishigaki01.jpg") no-repeat left center/ contain;}
/*------------------------------------------------------hotel*/
.hotel{
    background: url("../img/hotel_wrap.jpg") no-repeat top center/ cover;
	padding-bottom: 7em;
}
.hotel_top{
	background: url("../img/hont_uza_top.png") no-repeat bottom center;
	background-size: 100%;
	padding: 14% 0;
	color: #1b1464;
}
.hotel_top h3{
	padding:1em 1.5em;
	background: rgba(0,0,0,0.50);
	color: #fff;
	display: inline-block;
	font-size: min( 2vw, 1.5em );
	font-weight: 500;
	
	margin-left: 45%;
}
.hotel_top h3 strong{ font-size: 1.4em;font-weight: 500;}
/*ハレクラニ沖縄*/
#halekulani .hotel_top{	background: url("../img/hont_halekulani_top.png") no-repeat bottom center / 100%;}
#halekulani .hotel_top h3{margin-left: 15%;}
/*カフー */
#kafuu .hotel_top{	background: url("../img/hont_kafuu_top.png") no-repeat bottom center / 100%;}
#kafuu .hotel_top h3{margin-left: 15%;}
/*アラマンダ */
#allamanda .hotel_top{	background: url("../img/miyako_allamanda_top.png") no-repeat bottom center / 100%;}
#allamanda .hotel_top h3{margin-left: 5%;}
/*ミラージュ */
#mirage .hotel_top{	background: url("../img/miyako_mirage_top.png") no-repeat bottom center / 100%;}
#mirage .hotel_top h3{margin-left: 30%;}
/*宮古島来間リゾートシーウッドホテル*/
#seawood .hotel_top{	background: url("../img/miyako_seawood_top.png") no-repeat bottom center / 100%;}
#seawood .hotel_top h3{margin-left: 5%;}
/*ANAインターコンチネンタル石垣リゾート*/
#ana .hotel_top{	background: url("../img/ishigaki_ana_top.png") no-repeat bottom center / 100%;}
#ana .hotel_top h3{margin-left: 5%;}
/*THE UBUFURU ISHIGAKI*/
#ubufuru .hotel_top{	background: url("../img/ishigaki_ubufuru_top.png") no-repeat bottom center / 100%;}
#ubufuru .hotel_top h3{margin-right: 5%;}
/*------------------------------plan*/
.plan{
	
}
.plan h4{
	margin-top: 3em;
	text-align: center;
	font-weight: 500;
}
.plan h4 span{
	display: inline-block;
	padding: 0 1em;
	border-bottom: #121212 solid 1px;
	font-size: min(3vw,1.5em);
	line-height: 1;
	position: relative;
}
.plan h4 strong{
	font-size: 3em; 
	font-family: "Tangerine", cursive;
	padding:4px;
	padding-bottom: .5em;
}
.plan h4 small{
	position: absolute; 
	top: 4.2em;
	right: .5em;
	font-size: 0.8em;
}
.plan .time_table{
	margin: 5em auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.plan .time_table dl{
	background: url("../img/plan_arrow_odd.png") no-repeat	bottom center,
		url("../img/plan_bg_honto.png") no-repeat;
	background-size: min(100%,291px),contain;
	width: 49%;
	padding: 1em 1em 2em;
	align-items: flex-start; 
}
.plan .time_table dl:nth-of-type(even){
	background: url("../img/plan_arrow_even.png") no-repeat	bottom left,
		url("../img/plan_bg_honto.png") no-repeat;
	margin-top: 7em;
	padding-left: 3em;
}
.plan .time_table dl:last-of-type{
	background: url("../img/plan_arrow_end.png") no-repeat	bottom right,
		url("../img/plan_bg_honto.png") no-repeat;
	padding-bottom: 3.5em;
}
.plan dt:first-of-type{	width: 100%;}
.plan h5{
	font-family: "Tangerine", cursive;
	color: #8e837c;
	font-size: 2em;
}
.plan h5 strong{ font-size: 2em;}
.plan h5 span{
	font-family: "Kiwi Maru", serif;
	font-weight: 500;
	font-size: .5em;
	margin-left: .5em;
	padding: 0 .5em;
	color: #FFFFFF;
	background: #036eb8;
	transform: rotate(-3deg);
	display: inline-block;
}
.plan dl{
	display: flex;
	flex-wrap: wrap;
}
.plan dt:not(:first-of-type){
	border: 1px #7C7C7C solid;
	width: 3.5em;
	font-size: .9em;
	text-align: center;
	margin-right: .5em;
	margin-bottom: .2em;
}
.plan dd{
	width: calc(100% - 4em );
}
/*宮古島*/
#miyako .plan h5 span{	background: #03b8a9;}
#miyako .plan .time_table dl{
	background: url("../img/plan_arrow_odd.png") no-repeat	bottom center,
		url("../img/plan_bg_miyako.png") no-repeat;
}
#miyako .plan .time_table dl:nth-of-type(even){
	background: url("../img/plan_arrow_even.png") no-repeat	bottom left,
		url("../img/plan_bg_miyako.png") no-repeat;
}
#miyako .plan .time_table dl:last-of-type{
	background: url("../img/plan_arrow_end.png") no-repeat	bottom right,
		url("../img/plan_bg_miyako.png") no-repeat;
}
/*石垣島*/
#ishigaki .plan h5 span{	background: #1b1464;}
#ishigaki .plan .time_table dl{
	background: url("../img/plan_arrow_odd.png") no-repeat	bottom center,
		url("../img/plan_bg_ishigaki.png") no-repeat;
}
#ishigaki .plan .time_table dl:nth-of-type(even){
	background: url("../img/plan_arrow_even.png") no-repeat	bottom left,
		url("../img/plan_bg_ishigaki.png") no-repeat;
}
#ishigaki .plan .time_table dl:last-of-type{
	background: url("../img/plan_arrow_end.png") no-repeat	bottom right,
		url("../img/plan_bg_ishigaki.png") no-repeat;
}
/*------------------------------detail*/
.detail h5{
	background: url("../img/detail_h5_hont.png") no-repeat bottom left;
	margin-top: 3em;
	font-family: "Shippori Mincho B1", serif;
	padding-bottom: .8em;
	padding-left: 1em;
	font-size: 1.2em;
}
.detail h5 + p{
	font-family: "Shippori Mincho B1", serif;
	font-weight: 600;
	margin: 1em auto;
}
.facilities{
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.facilities li{
	color: #036eb8;
	border: #036eb8 1px solid;
	font-size: .9em;
	padding: 0 .3em;
	margin-left: 2px;
	margin-bottom: 2px;
}
.images{
	margin: 1.5em 0;
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.images li{
	width: 49.5%;
	margin-bottom: 1%;
}
.images.three li{width: 33%;}
.type{
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	align-items: flex-start; 
	line-height: 1.3;
}
.type dt{
	background: #736357;
	color: #fff;
	width: 7em;
	text-align: center;
}
.type .room{
	padding: 0 .5em;
	border-right: 2px solid #999999;
	margin-right: .5em;
}
.type dd ul li:first-of-type{
	margin-top: .5em;
	color: #564923;
	background: #E7E2D8;
	padding: 0 3px;
	display: inline-block;
}
.type dd ul li:not(:first-of-type){
	text-indent: -1em;
	padding-left: 1em;
}
.pool{
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	align-items: flex-start; 
	border-top: 1px #9A9A9A solid;
	margin-top: .5em;
	padding-top: .5em;
}
.pool dt{
	background: #2691CC;
	color: #fff;
	width: 7em;
	text-align: center;
}
.pool dd{
	padding: 0 .5em;
	margin-right: .5em;
}
.pool dd strong{
	background: #D2E1EE;
	padding: 0 4px;
	font-weight: normal;
	margin-right: .3em;
}

.booking h6{
	margin-top: 5em;
	margin-bottom: .8em;
	font-weight: 500;
	letter-spacing: 2px;
	font-size: 1.1em;
	display: flex;
	align-items: center;
	text-align: center;
}
.booking h6::before,
.booking h6::after {
	content: "";
	flex-grow: 1;
	height: 1px; 
	background-color: #656565; 
}
.booking h6::before {  margin-right: 1em; }
.booking h6::after {  margin-left: 1em; }
.booking ul{display: flex; justify-content: center;  }
.booking ul li{width: 24%; margin-right: 1%;}
.booking ul li:last-child{margin-right: 0;}
.booking ul li a{
	color: #fff!important;
	background: #036eb8;
	display: block;
	text-align: center;
	padding: 1em;
}
/*宮古島*/
#miyako .detail h5{	background: url("../img/detail_h5_miyako.png") no-repeat bottom left;}
#miyako .facilities li{	color: #03b8a9;	border: #03b8a9 1px solid;}
#miyako .booking ul li a{	background: #03b8a9;}
/*石垣島*/
#ishigaki .detail h5{	background: url("../img/detail_h5_ishigaki.png") no-repeat bottom left;}
#ishigaki .facilities li{	color: #1b1464;	border: #1b1464 1px solid;}
#ishigaki .booking ul li a{	background: #1b1464;}

/*------------------------------oter*/
.oter{
	padding: 7em 0 3em;
	text-align: center;
}
.oter h2{margin-bottom: 3em;}
.oter h2 span{
	display: flex;
	align-items: center;
	color: #4c71cc;
}
.oter h2 span::before,
.oter h2 span::after {
	content: "";
	flex-grow: 1;
	height: 1px; 
	background-color: #4c71cc; 
}
.oter h2 span::before {  margin-right: 1em; }
.oter h2 span::after {  margin-left: 1em; }
.oter ul{ justify-content: space-between; flex-wrap: wrap;}
.oter ul li{width: 32%;}

/*--------------------btn */

/*スクロールしたら表示させる*/
.sa {
  opacity: 0;
  transition: all 2.0s ease;
}
 .sa.show {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
}
 
.sa-lr {  transform: translateX(-100px);}
.sa-rl {  transform: translateX(100px);}
.sa-up {  transform: translate(0, 100px);}
.sa-down {  transform: translate(0, -100px);}
.sa-scaleUp {  transform: scale(.5);}
.sa-scaleDown {  transform: scale(1.5);}
.sa-rotateL {  transform: rotate(180deg);}
.sa-rotateR {  transform: rotate(-180deg);}




/************************************************************
					★min770px－max999px
************************************************************/
@media screen /*and (min-width: 770px) */and (max-width: 1200px){

#container, .w1000 {
	min-width: 100%;  
	width: 100%;
	margin: 0;
	overflow: clip;
}
.w1000 {	padding: 0 1.5%;}

/*---------------------------------------------コンテナ用★★★★★★★★-----*/
nav ul.w1000{
	padding: 0;
	overflow: inherit;
}

	
/*------------------------------------------------------area_top*/
.area_top{
	background: url("../img/area_top_honto01.jpg") no-repeat left -400px center/ contain;
}
.area_top .flex_box{	margin-left: 10%;}
.area_top p{ width: 40%; max-width: 100%;}
.area_top dl{	width: 50%;}
.area_top .tange{	font-weight: bold; text-shadow: none; color: #CDDAE3;}
	
}




/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

/* 非表示指定 */
.pc {display: none;}
.pc{display: none;}
.sp{display: block;}	
.tb_none{display: none;}	
#breadcrumbs,#pankuzu,#breadcrumb {display: none;}

/*---------------------------------------------コンテナ用★★★★★★★★-----*/
.main .w1000{	top:4vw;}
.main h1{margin-left: 16vw;}	
.main .text{	margin: 3vw auto 0;}
/*------------------------------------------------------area_top*/
.area_top{	background: url("../img/area_top_honto01.jpg") no-repeat right -60% center/ cover;}
.area_top .flex_box{	margin-left: 0; background: rgba(255,255,255,0.60); align-items: flex-end;}
.area_top p{ width: 40%; max-width: 100%; padding-bottom: 1em;}
.area_top dl{width: 60%; padding-left: 1em;}
.area_top .tange{color: #557E97;}

/*宮古島*/
#miyako .area_top{	background: url("../img/area_top_miyako01.jpg") no-repeat right -60% center/ cover;}
#miyako .area_top .flex_box{	margin-left: 0; background: rgba(255,255,255,0.60); align-items: flex-end;}
/*石垣*/
#ishigaki .area_top{	background: url("../img/area_top_ishigaki01.jpg") no-repeat right -60% center/ cover;}
#ishigaki .area_top .flex_box{	margin-left: 0; background: rgba(255,255,255,0.60); align-items: flex-end;}

}


/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {
	
/*--- 非表示 ---*/
/*br{display: none}*/
/*img{max-width:100%;}*/
.sp_none{display: none;}
.pc{display: none;}
.sp{display: block;}


/*---------------------------------------------コンテナ用★★★★★★★★-----*/
/*------------------------------------------------------topのスライドショー*/
.main h1{margin-left: 12vw;}	
.main h1 small{font-size:  .6em;}
.main .text{
	font-size: 2.7vw;
	padding: .8em 1em;
}
/*------------------------------nav*/
nav ul li a .ano{	display: block;}	
nav ul li a	{	
	padding: .5em 1em 2px;
	font-size: 3.8vw; 
	line-height: 1.2;
}
nav ul li a small{ font-size: .65em;}
.menu li li a {	font-size: .8em;}
/*------------------------------------------------------area_top*/
.area_top{	
	background: url("../img/area_top_honto01.jpg") no-repeat left -100px top/ 120%;
	position: relative;
	margin: .5em 0;
}
.area_top p{ 
	position: absolute;
	top:5%;
	right: 0;
	width: 38%;
}
.area_top dl{
	width: 100%; 
	padding: 20% .5em 1.5em;
}
.area_top .tange{	
	font-size: 1.5em;
	text-align: left;
	margin-top: 2em;
}
.area_top .shippo{ font-size: 85%; margin-top: 2em;}
.area_top .catch{margin-top: 4em;}
/*宮古島*/
#miyako .area_top{	background: url("../img/area_top_miyako01.jpg") no-repeat left -100px top/ 120%;}
/*石垣*/
#ishigaki .area_top{	background: url("../img/area_top_ishigaki01.jpg") no-repeat left -100px top/ 120%;}

/*------------------------------------------------------hotel*/
.hotel{	padding-bottom: 2em;}
.hotel_top{
	background-size: 150%;
	padding: 25% 0;
}
.hotel_top h3{
/*	padding:1em;
	background: rgba(0,0,0,0.50);
	color: #fff;*/
	display: inline-block;
	font-size: 3vw;
/*	font-weight: 500;*/
	
	margin-left: 26vw;
}
/*.hotel_top h3 strong{ font-size: 1.4em;font-weight: 500;}*/
/*ハレクラニ沖縄*/
#halekulani .hotel_top{	background-size: 150%;}
/*カフー */
#kafuu .hotel_top{	background-size: 150%;}
#kafuu .hotel_top h3{margin-left: 5%;}
/*アラマンダ */
#allamanda .hotel_top{	background-size: 150%;}
/*ミラージュ */
#mirage .hotel_top{	background-size: 150%;}
#mirage .hotel_top h3{margin-left: 45%;}
/*宮古島来間リゾートシーウッドホテル*/
#seawood .hotel_top{background-size: 150%;}
#seawood .hotel_top h3{margin-left: 25%;}
/*ANAインターコンチネンタル石垣リゾート*/
#ana .hotel_top{background-size: 150%;}
/*THE UBUFURU ISHIGAKI*/
#ubufuru .hotel_top{background-size: 150%;}
	
/*------------------------------plan*/
.plan{font-size: 90%;}
.plan h4{	margin-top: .5em;}
.plan h4 span{
	padding: 0;
	font-size: 3.8vw;
}
.plan h4 small{	font-size: 0.9em;}
.plan .time_table{
	margin: 0em auto;
	display: block;
	font-size: .9em;
}
.plan .time_table dl{
	background: url("../img/plan_arrow_sp.png") no-repeat bottom left 0.3em,
		url("../img/plan_bg_honto.png") no-repeat;
	background-size: 5%,contain;
	width: 100%;
	padding: 1em 1em 1em 2em;
}
.plan .time_table dl:nth-of-type(even){
	background: url("../img/plan_arrow_sp.png") no-repeat bottom left 2em,
		url("../img/plan_bg_honto.png") no-repeat;
	margin-top: 0;
	padding-left: 4em;
}
.plan .time_table dl:last-of-type{
	background: url("../img/plan_arrow_end.png") no-repeat	bottom 1em right / 80%,
		url("../img/plan_bg_honto.png") no-repeat;
}
/*------------------------------detail*/.detail{font-size: 90%;}	
.detail h5{
	font-size: 1.1em;
	padding-left: .5em;
}
.images.three li{ margin: 0%; width: 33%; display: block;}	
.type{	display: block;}
.type dt br{	display: none;}
.type .room{
	border-right: none;
	margin-right: 0;
	border-bottom: #545454 1px solid;
	margin-bottom: .2em;
}

.pool{
	display: block;
	clear: both;
/*	align-items: flex-start; 
	border-top: 1px #9A9A9A solid;
	margin-top: 3px;
	padding-top: 3px;*/
}
.pool dt{
/*	background: #2691CC;
	color: #fff;
	width: 7em;
	text-align: center;*/
	line-height: 1.3;
}
.pool dd{
	float: left;
	
	padding: 0 .5em;
	margin-right: .5em;
}
.pool dd strong{
	background: #D2E1EE;
	padding: 0 4px;
	font-weight: normal;
	margin-right: .3em;
}	
	
	
.booking h6{
	margin-top: 2em;
	letter-spacing: 0;
}	
.booking ul{flex-wrap: wrap; }
.booking ul li{width: 49%;}
.booking ul li:nth-of-type(2n){margin-right: 0;}
.booking ul li a{	margin-bottom: .5em;}
/*------------------------------oter*/
.oter{	padding: 3em 0 1em;}
.oter ul li{width: 49%; margin-bottom: 5px;}
}

