@charset "utf-8";
/* ====================================================

	common CSS

==================================================== */

/****************************************
		0. 全体の設定
*****************************************/
body {
	text-align:left;
	color:#333333;
	font: 14px "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0;
	padding:0;
}

#mainVisual {
    width: 100%;
    padding-top: 6px;
    border-top: solid 1px #DDDDDD;
}
#mainVisual img{
	width:100%;
	display:block;
}
body{
	font-size:14px;
}
h3{
	margin-bottom:1em;
}

p.txt100{
	font-size:11px;
	margin:0 auto 0.8em auto;
	width:94%;
}
.bt-area {
	border-radius: 3em;
	padding: 0.7em;
	width: 55%;
	margin: 0.5em auto 1em auto;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	background-color: #004BB0;
}
.bt-area a{
	color: #FFF;
    text-decoration: none;
}
.bt-area img{
	display: inline-block;
	height: 1em;
	margin-right: 0.4em;
    vertical-align: inherit;
}
.bt-area.other-search{
	background:#202261;
	padding: 0.8em 1em;
	margin: 0 auto 1em auto;
	font-size:1.1em;
}

.bt-area.other-search a {
    text-decoration: none;
}

/*お知らせ*/
.news{
	width:94%;
	background:#f7f6f6;
	border-bottom:solid 1px #CCC;
	border-right:solid 1px #CCC;
	padding:5px;
	margin:1em auto 0 auto;
	font-size:12px;
	line-height:110%;
}
.news span{
	background:#CC0000;
	padding:3px 5px;
	display:inline-block;
	color:#FFF;
	margin-right:5px;
	margin-bottom:3px;
	/*width:3.5em;*/
	text-align:center;
	font-size:11px;
}
.news a{
	text-decoration:underline;
	color:#004bb0;
	line-height: 1.7;
    display: inline-block;
}
/****************************************
		動画
*****************************************/
.youtube {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin:0 3% -9% 3%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
}

.youtube.kouhen{
	margin: 0 3% 0 3%;
}
.bt-area.kouhen_bottom{
	top:-2.5em;
	position: relative;
	margin-bottom:-1.5em;
}
/****************************************
		1. ようこそ
*****************************************/
#section02{
	width:100%;
	background:url(../img/section02_bg.png) repeat 0 0;
	padding-bottom:0;
	margin-bottom:0;
}
.pic100 {
	width: 100%;
	display:block;
}
.pic100 img{
	width:100%;
	display:block;
}
.pic94 {
	width: 94%;
	display:block;
	margin:0 auto;
}
.pic94 img{
	width:100%;
	display:block;
}
#section02 dl{
	margin:0 0 0 0;
	width:100%;
	clear:both;
	background:url(../img/section02_bg2.png) repeat 0 0;
}
#section02 dl.bg_none { background:none;}
#section02 dt{
	width:25%;
	float:left;
	padding:2% 4% 2% 2%;
}
#section02 dt img{
	width:100%;
}
#section02 dd{
	width:70%;
	float:right;
	padding:0.7em;
	background:url(../img/message_bg.png) no-repeat 0 center;
	margin:3% 3% 3% 0;
	border-radius:5px;
}

#section02 dd {
	position: relative;
	background: #FFF;
}
#section02 dd:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #FFF;
	border-width: 6px;
	margin-top: -4px;
}


#section02 dd strong{
	font-size:12px;
	font-weight:bold;
	color:#C30D23;
	display:block;
	margin-bottom:0.5em;
	border-bottom:dotted 2px #CCC;
	padding-bottom:0.3em;
}
#section02 dd p{
	font-size:9px;
	line-height:130%;
	color:#4E352F;
}

	/* ▽floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから）▽ */
		#section02 dl:after {
			clear: both;
			content: url(../../img/blank.gif);
			display: block;
			height: 0px;
		}

		#section02 dl {display: inline-table;}
		/* Mac IE には適用させない \*/
		* html #section02 dl {height: 1px;}
		#section02 dl {display: block;}
		/* */
		/* △floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで）△ */


#area01 .area_ttl_txt{
	background:#C5DDE9;
	font-size:11px;
	padding:1em 1em 0 1em;
	text-align: justify;
}
#area01 h3{
	margin-bottom:0;
}
.area_ttl_img{
	margin-bottom:1em;
}
h4.area_ttl{
	margin-bottom:1em;
}

.area_ttl {
    margin-bottom: 1em;
}

.area_movie_txt .left{
	width:38%;
	float:left;
	padding-left:4%;
	margin-bottom:0.7em;
}
.area_movie_txt .left img{
	width:100%;
}
.area_movie_txt .right{
	width:57%;
	padding-right:4%;
	float:right;
	font-size:10px;
	line-height:130%;
	margin-bottom:1em;
}
.area_info img{
	clear:both;
	width:94%;
	margin:0 auto 1.5em auto;
	display:block;
}
/*.area_info{
	clear:both;
	border-top:dotted 2px #CCC;
}
.area_info p{
	border-bottom:dotted 2px #CCC;
}*/
#area01_2 h3.area_ttl{
	margin-bottom:0;
}
/****************************************
		スワンバレー
*****************************************/
#area05 .area_info .pic100{
	margin-bottom:1em;
}
#area05{
	padding-bottom:0.5em;
}
.op_info{
	background:#EFEFEF;
	width:93%;
	margin:0 auto 0.5em auto;
	font-size:11px;
	padding:1%;
}
/****************************************
		menu
*****************************************/
html {
    scroll-behavior: smooth;
}

#Menu{
	padding-bottom:0;
	margin-bottom:0;
}
#Menu h3{
	margin-bottom:0;
}
#Menu .menu-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
}
#Menu .menu-list li {
    text-align: center;
}
#Menu .menu-list li:nth-child(1) {width: 33.3%;border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;}
#Menu .menu-list li:nth-child(2) {width: 33.4%;border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;}
#Menu .menu-list li:nth-child(3) {width: 33.3%;border-bottom: solid 1px #ccc;}
#Menu .menu-list li:nth-child(4) {width: 50%;border-right: solid 1px #ccc;}
#Menu .menu-list li:nth-child(5) {width: 50%;}
#Menu .menu-list li a {
    display: block;
    padding: 1vw 0;
}
#Menu .menu-list li a img {
    width: auto;
    height: 22vw;
}



/****************************************
	オプショナルツアー
*****************************************/
.optional h4{
	background-color:#000;
	color:#FFF;
	padding:0.7em 0 0.5em 0;
	text-align:center;
	font-size:16px;
	width:100%;
	margin-bottom:0.5em;
    font-weight: bold;
}
.optional h4 span{
	border:solid 1px #FFF;
	padding:0em 0.4em;
	font-size:8px;
	display:inline-block;
	margin-right:0.5em;
	position: relative;
	top: -0.4em;
}
.optional h5{
	margin-bottom:0.5em;
	border-top:dotted 2px #5B5C8A;
	border-bottom:dotted 2px #5B5C8A;
	padding:0.5em;
	text-align:center;
	color:#5B5C8A;
    font-weight: bold;
}
.optional h5 span{
	display:block;
	font-size:11px;
}
.optional p.pic100{
	margin-bottom:0.5em;
}
/****************************************
	ロットネスト島
*****************************************/
#area08 .area_info h4{
	border:solid 2px #10A59D;
	color:#10A59D;
	background:#F4FF9D;
	padding:0.5em 0.3em 0.3em 0.3em;
	border-left:none;
	border-right:none;
	text-align:center;
	clear:both;
	font-size:20px;
	margin-bottom:0.5em;
    font-weight: bold;
}
#area08 .area_info h4 span{
	font-size:11px;
	display:block;
	margin-top:0.2em;
}

#area08 .area_info dl{
	width:46%;
	margin:1% 0.5% 1% 2.8%;
	display:block;
	float:left;
}

/*#area08 .area_info dl:nth-child(7),
#area08 .area_info dl:nth-child(3),
#area08 .area_info dl:nth-child(5){
	background:#FDFFE2;
}*/
#area08 .area_info dl:last-child{
	border-bottom:none;
}
#area08 .area_info dl dt{
	float:left;
	width:100%;
	margin-bottom:0.5em;
}

#area08 .area_info dl dt img{
	width:100%;
	margin-bottom:0;
}
#area08 .area_info dl dd{
	float:right;
	width:100%;
	font-size:11px;
}
#area08 .area_info dl strong{
	display:block;
	font-size:1.3em;
	color:#000;
	margin-bottom:0.4em;
}
/* ▽floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから）▽ */
		dl:after {
			clear: both;
			content: url(../../img/blank.gif);
			display: block;
			height: 0px;
		}

		dl {display: inline-table;}
		/* Mac IE には適用させない \*/
		* html dl {height: 1px;}
		dl {display: block;}
		/* */
/* △floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで）△ */
#area08{
	padding-bottom:0.5em;
}
.area_info #cycling{
	width:100%;
	margin-bottom:0.8em;
}
#area08 .area_info #cycling dl{
	width:98%;
	margin:0 auto 0.7em auto;
}
#area08 .area_info #cycling dt{
	width:28%;
	float:left;
}
#area08 .area_info #cycling dd{
	width:72%;
	float:right;
}
/* ▽floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから）▽ */
		.area_info #cycling:after {
			clear: both;
			content: url(../../img/blank.gif);
			display: block;
			height: 0px;
		}

		.area_info #cycling {display: inline-table;}
		/* Mac IE には適用させない \*/
		* html .area_info #cycling {height: 1px;}
		.area_info #cycling {display: block;}
		/* */
/* △floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで）△ */
/* ▽floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから）▽ */
		.area_info #activity:after {
			clear: both;
			content: url(../../img/blank.gif);
			display: block;
			height: 0px;
		}

		.area_info #activity {display: inline-table;}
		/* Mac IE には適用させない \*/
		* html .area_info #activity {height: 1px;}
		.area_info #activity {display: block;}
		/* */
/* △floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで）△ */

/* ▽floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここから）▽ */
		.area_info #bearch:after {
			clear: both;
			content: url(../../img/blank.gif);
			display: block;
			height: 0px;
		}

		.area_info #bearch {display: inline-table;}
		/* Mac IE には適用させない \*/
		* html .area_info #beach {height: 1px;}
		.area_info #bearch {display: block;}
		/* */
/* △floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで）△ */
.area_info #activity{
	margin-bottom:0.8em;
	background:url(../img/activity_bg.jpg) no-repeat right bottom;
	background-size:48%;
}
.area_info #bearch{
	margin-bottom:0.8em;
}
.area_info #bearch dd{
	line-height:120%;
}
.area_info #bearch dl{
	margin-bottom:0.4em;
}
#area08 .area_info #activity dd{
	width:95%;
}
#area08 .area_info #activity dd strong{
	width:100%;
	text-align:center;
}
#area08{
	background:url(../img/area08_img.jpg) no-repeat 0 4.8em;
	background-size:100%;
}
#area08 p.txt100{
	font-size:12px;
	text-shadow: 0 1px 0 #fff,  1px 0 0 #fff,  0 -1px 0 #fff,  -1px 0 0 #fff,  -1px -1px 0 #fff,  1px -1px 0 #fff,  -1px 1px 0 #fff,  1px 1px 0 #fff;
	margin-bottom:1em;
}
#area08 p.txt100 strong{
	font-size:18px;
	display:block;
	text-align:center;
	margin-bottom:0.5em;
	line-height:130%;
	color:#000;
	margin-top:0.2em;
}
/****************************************
	特典
*****************************************/
#tokuten{padding-bottom:0;}


/*ぱんくず*/
#panWrap{
	width: 100%;
}
.panbox{
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 2% 1%;
	font-size: 12px;
}
.panbox li a{text-decoration:none;color:#000;}
.panbox li a:after{
	content:"\f054";
	font-family: FontAwesome;
	padding:0 2px;
	font-size:.6em;
	font-weight:normal;
}


#recommend-hotel img, #recommend-tour img {
    width: 100%;
}

#recommend-hotel h2, #recommend-tour h2 {
    padding: 1.2% 4% 2%;    
}

#recommend-tour .bt-area {
    background: none;
    width: inherit;
}


/*調整*/
#oneItem, .one-item-box {
    margin: 0 auto 20px!important;
}

#pagetop a {
    padding-bottom: 13px!important;
}