@charset "UTF-8";


/*photo_tabi.css*/

.pc-view{display:block;}
.sp-view{display:none;}
@media(max-width:640px){
	.pc-view{display:none;}
	.sp-view{display:block;}
}


main{
	padding:0;
}

#header{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-bg.jpg) 0 0 repeat;
	position:relative;
}

#header .header-1st{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-1st-pc-bg.png) 0 0 repeat-x;
	position:relative;
}

@media(max-width:767px){
	#header .header-1st{
		background-size:auto 12vw;
	}
}



#header .header-1st .header-2nd{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-2nd-pc-bg.png) 100% 0 no-repeat;
	position:relative;
}
@media(max-width:767px){
	#header .header-1st .header-2nd{background-size:auto 50vw;background-position:100% 40%;}
}
#header h1{
	max-width:1000px;
	margin:0 auto;
	position:relative;
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-dot-bg-pc.png) 100% 180% no-repeat;
}

@media(max-width:767px){
	#header h1{padding:0 15px;}
}

#header h1 img{
	position:relative;
	z-index:9;
	-webkit-filter: drop-shadow(0px 0px 5px rgba(255,255,255.8));
	filter: drop-shadow(0px 0px 5px rgba(255,255,255.8));
}

.top-image{
	position:relative;
	margin-top:-8%;
}
.top-image img,.top-image-sp img{
	position:relative;
	z-index:2;
}
.top-image-sp{display:none;}
@media(max-width:767px){
	.top-image{display:none;}
	.top-image-sp{display:block;margin-top:-8%;}
}


.top-read{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-dot-bg-pc.png) -20% 320% no-repeat;
	padding-bottom:100px;
}
.top-read .inner{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/header-dot-bg-pc.png) 50% -100% no-repeat;
	padding-bottom:0px;
}
.top-read-sp,.back-reaf{display:none;}
@media(max-width:640px){
	.top-read{display:none;}
	.top-read-sp{
		display:block;
		background:url(/wp-content/themes/shuttle/special/photo_tabi/header-dot-bg-pc.png) -20% 320% no-repeat;
		padding-bottom:15vmin;
		position:relative;
	}
	.top-read-sp .inner{
		background:url(/wp-content/themes/shuttle/special/photo_tabi/header-dot-bg-pc.png) 50% -100% no-repeat;
		padding-bottom:0px;
		position:relative;
	}
	.top-read-sp .inner img:first-child{
		position:relative;
		z-index:5;
	}
	.back-reaf{
	display: block;
    width: 50%;
    margin-top: -25%;
    position: relative;
    z-index: 0;
    margin-left:-20%;
	}

	.top-read-sp .top-read-photo{
		padding:5%;
		display: -webkit-flex; display: -ms-flexbox; display: flex;
		-ms-flex-flow:row wrap;flex-flow:row wrap;
		-webkit-justify-content: space-between;-ms-flex-pack: justify; justify-content: space-between;
		position:relative;
		z-index:5;
		margin-top:-20%;
	}
	.top-read-sp .top-read-photo img{
		display:block;
		width:48%;
		margin:1%;
		position:relative;
		z-index:9;
		height:auto;
		align-self: flex-start;
	}
}



#content-area{
	background:#def1fb;
}
#content-area .content-area-base{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/content-area-base-bg-pc.jpg) 50% 100% no-repeat;
	background-size:cover;
	position:relative;
	z-index:2;
}
#content-area .content-area-base .content-area-dot{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/content-area-dot-bg-pc.png) 50% 0% repeat-y;
	background-size:2000px auto;
	position:relative;
	z-index:2;
}
@media(max-width:1300px){
	#content-area .content-area-base .content-area-dot{
		background:url(/wp-content/themes/shuttle/special/photo_tabi/content-area-dot-bg-sp.png) 50% 0% repeat-y;
		background-size:contain;
	}
}

.content-area-reaf{margin-top:-15%;width:23%;}
@media(max-width:640px){
	.content-area-reaf{display:none;}
}

#content-area .content-area-base .content-area-dot .content-outer{
	background:url(/wp-content/themes/shuttle/special/photo_tabi/content-outer-reaf.png) 50% 0% repeat-y;
	background-size:contain;
	margin-top:-10%;
	padding-top:10%;
}
#content-area .content-area-base .content-area-dot .content-outer .inner{
	padding-bottom:10%;
}


#resort-area{
	margin-bottom:2em;
}

#resort-area h2,#churaumi-area h2{
	margin-bottom:3em;
}





.article-box-area{
	display: -webkit-flex; display: -ms-flexbox; display: flex;
	-ms-flex-flow:row wrap;flex-flow:row wrap;
	-webkit-justify-content: space-between;-ms-flex-pack: justify; justify-content: space-between;
	-webkit-align-content: stretch; align-content:         stretch;
}
.article-box{
	width:31%;
	background:#FFF;
	margin-bottom:2%;
	margin-top:2%;
}
.article-box img{
	width:100%;
}

.article-box p{
	padding:1em;
}
.article-box p span,.article-box p a{
	display:block;
	line-height:1.6em;
	font-size:14px;
	font-weight:600;
}

.girls{width:calc(100% - 33%);}

@media(max-width:640px){
	#resort-area{margin-bottom:1em;}
	#resort-area h2,#churaumi-area h2{margin-bottom:1em;}
	.article-box{width:48%;	margin-bottom:2%;margin-top:2%;}
	.article-box p{padding:0.75em;}
	.article-box p span,.article-box p a{font-size:2.5vmin;}
	.girls{width:100%;}


	#churaumi-area .article-box-area .article-box.sp-view{
		background:transparent;
		display: -webkit-flex; display: -ms-flexbox; display: flex;
		-webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; 
	}

}



.link-btn-area{
	display: -webkit-flex; display: -ms-flexbox; display: flex;
	-ms-flex-flow:row wrap;flex-flow:row wrap;
	-webkit-justify-content: space-between;-ms-flex-pack: justify; justify-content: space-between;
	margin-top:5em;
}

.link-btn{
	color:#FFF;
	border:2px solid #FFF;
	width:48%;
	padding:0 1em;
	position:relative;
	display: -webkit-flex; display: -ms-flexbox; display: flex;
	-webkit-align-items: center;  -ms-flex-align: center; align-items: center;
	min-height:4em;
	margin-bottom:1em;
	-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.4));
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,.4));
}
.link-btn::after{
	display:inline-block;
	position:absolute;
	right:5%;
	content:"";
	height:1.5em;
	width:4em;
	background:url(/wp-content/themes/shuttle/special/photo_tabi/fff.svg) 50% 50% no-repeat;
}

.link-btn span{
	font-size:25PX;
	width:100%;
	display:block;
	text-align:center;
	line-height:1.2em;
	letter-spacing: 0.1em;
	margin-right:2em;
}
.link-btn span.small{font-size:0.6em;}

@media(max-width:900px){
	.link-btn span{font-size:20PX;}
}
@media(max-width:767px){
	.link-btn span{font-size:17PX;}
}
@media(max-width:640px){
	.link-btn{width:100%;}
}



.btn-pink{
	background:#bc4b7e;
}

.btn-blue{
	background:#6a90ca;
}

@media(max-width: 767px){

	#content-area .content-area-base .content-area-dot .content-outer .inner{
		padding-bottom:120px;
	}

	#wrapper main section:nth-last-child(1){
		padding-bottom:0px !important;
	}

	.out-links{
		margin-top: -240px;
		padding-top: 160px;
	}

}