@charset "utf-8";
/* CSS Document */
#contents img, #contents2 img, #contents3 img {
	width:100%;
	max-width: 100%;
	height: auto;}
div, section{
	display:block;}
.mt20{
	margin-top: 20px;}
.mt30{
	margin-top: 30px;}
.mt40{
	margin-top: 40px;}
.mt50{
	margin-top: 50px;}
.mb25{
	margin-bottom: 25px;}
.mb30{
	margin-bottom: 30px;}
.mb40{
	margin-bottom: 40px;}
.mb50{
	margin-bottom: 50px;}
.mb100{
	margin-bottom: 100px;}
.ml30{
	margin-left: 30px;}
.page_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
 	background: url(../room/img/room_icatch.jpg) center center / cover no-repeat;}
.left003{
	display:block;
	float:left;
	max-width:400px;
	width:100%;
	margin:1em 20px 1em 0; }
.right003{
	display:block;
	float:right;
	max-width:560px;
	width:100%;
	margin:1em 0; }
.large{
	color:#3F73AB;
	font-size:18px;
	font-weight:bold;}
.small{
	font-size: 0.7em;
	line-height: 1.2;}
.br{display: none;}
.br480{display: none;}
dd img{
	width: 240px !important;
	height: auto;
	margin: 1em 0;}
/*===============================
 * 館内施設
 ==================================*/
.page_facility{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/facility/facility.jpg) center center / cover no-repeat;}
.facility{
	display: block;
	margin: 2em auto;}
.left004{
	max-width:550px;
	margin-right: 30px;
	width: 100%;
	float:left;}
.right004{
	max-width: 400px;
	width: 100%;
	float: right;}
.floormap{
	text-align: center;
	max-width: 900px;
	width: 90%;
	display: block;
	margin: 5em auto;}
/*====================================
 * ライブビュー
 ===================================*/

.page_live{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/live.jpg) center center / cover no-repeat;}
.sea{
	max-width: 854px !important;
	width: 100%;
	/*max-height: 480px;
	height: 90%;*/
	height: auto;}
/*ユーチューブレスポ*/
.live{
	position:relative;
	width:100%;
	padding-top:56.25%;}
.live iframe{
	position:absolute;
	top:0;
	left:0;
	/*max-width: 960px;*/
	width: 100% !important;
    height: 100% !important;}
.bnr{
	max-width: 400px;
	width: 50%;
	text-align: center;
	margin: 1em auto 3em;}
.bnr img {
	box-shadow: 2px 2px 2px #666;}
.weather{
	max-width: 350px;
	width: 100%;
	height: auto;
	display: block;
	margin: 3em auto 5em !important;}
#ppwj_388e9994-7bcd-42eb-9fb8-390170e28ec9{
	margin: 0 auto;
	max-width: 350px;
	width: 100%;
	height: auto;}
.mb30{
	margin-bottom: 30px;}
.right{text-align: left !important;}
/*==================================
 * reservation
 =================================*/

.page_reservation{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/reservation.jpg) center center / cover no-repeat;}
/*====================================
 * contact
 =============================*/

.page_contact{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/contact.jpg) center center / cover no-repeat;}
/*==========================
 * access
 ==================================*/
.access{
	max-width: 750px;
	width: 100%;
	height: auto;
	margin: 3em auto;}
.access img{
	max-width: 750px;
	width: 100%;
	height: auto;}
.rentacar{
	margin: 3em auto;}
.rentacar1{
	margin: 1em auto 2em;}
.access a, .facility a, .rentacar a{
	text-decoration: underline;
	color: #3F73AB;}
.accesss a:hover, .facility a:hover, .rentacar a:hover {
	text-decoration: none;
	color:#FACA3A;}
/*#contents img {
	width:100%;
	max-width: 100%;
	height: auto;
}*/
/*グーグルマップ*/
.google-maps {
position: relative;
padding-bottom: 30%; /* これが縦横比*/
height: 0;
overflow: hidden;}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;}

.waku002{
    max-width: 370px !important;
    width: 100%;}

@media (max-width: 767px) {

}
/*=================================
 * activity
 ====================================*/

.activity_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../activity/img/page_activity.jpg) center center / cover no-repeat;}
.col_3 {
	overflow:hidden;
	max-width:100%}
.col_3 ul {
	overflow:hidden;
	margin:2% -2% 0 0;}
.col_3 li {
	list-style:none;
	float:left;
	width:31.2%;
	margin:0 2% 3% 0;}
.col_3 li:nth-child(3n+1) {
	clear:both;}
.col_3 li img {
	width:100%;
	margin-bottom:2.5%;}
.fee{
	text-align: right;}
.tax{
    font-size: 0.9em;
    text-align: right;
    margin-top: 0em;}
/*===================================
 * activity_freediving
 ====================================*/
.section{
    max-width: 960px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;}
article img {
    width:100%;
    max-width: 100%;
    height: auto;}
.freediving_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(800 / 2480 * 100%); 
 	background: url(../activity/img/freediving/freediving_icatch.jpg) center center / cover no-repeat;}
.blue_line{
    max-width: 2400px;
    width: 100%;
    height: auto;
    background-color:#B5D5E1;
    padding-top: 2em ;
    padding-bottom: 0.5em;
    margin-bottom: 100px;}
.w350{
    max-width: 350px;
    width: 100%;
    height: auto;
    /*text-align: center;*/
    padding: 5em auto 1em;
    margin: 0 auto;}
.free{
    color: #fff;
    font-size: 2.5em;
    text-align: center !important;
    font-weight: bold;}
.wrap{
    max-width: 960px !important;
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 100px;}
.levitation2{
    flex-basis: 65%;
    margin-right: 5%;}
.levitation1{
    flex-basis: 30%;
     order:1;}
.levitation2 .free{
    color: #B5D5E1;
    fonot-size:2.8em;
    text-align: center;
    margin: 0.5em auto;
    border:none;}
.pp{
    font-size: 1.2em;}
.pink_line{
    max-width: 2400px;
    width: 100%;
    height: auto;
    background-color:#DDB3C2;
    padding-top: 2em ;
    padding-bottom: 0.5em;
    margin-bottom: 100px;}
.w700{
    max-width: 700px;
    width: 100%;
    height: auto;
    padding: 5em auto 1em;
    margin: 0 auto;}
.wrap02{
    max-width: 960px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 3em;}
.pfree{
    color:#DDB3C2;
    font-size: 2.2em;
    margin: 0em auto;
    border:none;
    line-height: 1.2;
    font-weight: bold;
    /*backgroundo-color:none !important;*/}
.item0, .item1, .item2, .item3, .item4, .item5, .item6{
    flex-basis:47%;
    margin-bottom: 4em;}
.green_line{
    max-width: 2400px;
    width: 100%;
    height: auto;
    background-color:#99D4A5;
    padding-top: 2em ;
    padding-bottom: 0.5em;
    margin-bottom: 100px;}
.red_lesson{
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    color:#f00;
    margin: 1.5em auto 0}
.white_001{
    font-size: 2em;
    text-align: center;
    color:#fff;
    font-weight: bold;
    margin: 0 auto 0.2em;}
.fdgs{
    font-size: 2.5em;
    text-align: center;
    color:#E61874;
    font-weight: bold;
    text-shadow: 2px 2px 2px #666;}
.waku001{
    max-width: 960px;
    width: 100%;
    height: auto;}
.ppc{
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 4em;}
.wrap03{
    max-width: 960px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 3em;}
.step{
    flex-basis:33%;
    margin-bottom: 4em;}
.need{
    color: #0D3387;
    text-align: center;
    font-size: 1.5em;
    line-height: 1;
    margin: 0 auto;
    padding: 10px;}

.waku002{
    max-width: 370px !important;
    width: 100%;}
/*.col_3 {
	overflow:hidden;
	max-width:100%}
.col_3 ul {
	overflow:hidden;
	margin:2% -2% 0 0;}
.col_3 li {
	list-style:none;
	float:left;
	width:31.2%;
	margin:0 2% 3% 0;}
.col_3 li:nth-child(3n+1) {
	clear:both;}
.col_3 li img {
	width:100%;
	margin-bottom:2.5%;}
.fee{
	text-align: right;}
.tax{
    font-size: 0.9em;
    text-align: right;
    margin-top: 0em;}*/
    
/*============================================
 * tourist
 ================================================*/
.tourist_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/tourist/page_tourist.jpg) center center / cover no-repeat;
}

/*================================================
 * plan
 ================================================*/
.big{
	font-size: 1.2em;
	font-weight: bolder;
	color:#3F73AB;
}
.big2{
	font-size: 1.2em;
	font-weight: bolder;
	color:#3F73AB;
	line-height: 2;
}
.private_img{
	max-width: 940px;
	width:100%;
	height: auto;
	text-align: center;
	margin: 3.5em auto;
}
.time_img{
	width: 100%;
  	height: 0;
  	/*padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/tourist/page_tourist.jpg) center center / cover no-repeat;*/
	padding-top: calc(330 / 2048 * 100%); 
	background: url(../plan/img/time.jpg) center center / cover no-repeat;
}
.space{
	max-width:900px;
	width:100%;
	height:auto;
	margin:2em auto;
}
.photo img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
/* 吹き出し本体 - 左右の中心 */
.flow{
  position: relative;
  padding: 20px;
  min-height: 180px;
  /*background-color:#F2F2F2;*/
  margin:2em auto;
  text-align:center;
  font-weight:bold;
  /*border-radius:10px;*/
  font-size:1.2em;
  background: #ffffff;
  box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
  display: block;
  /*border:solid 1px #686868; */
}
/* 三角アイコン - 左右の中心 */
.flow::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #F2F2F2;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.last{
	position: relative;
	padding: 20px;
	min-height: 180px;
	background-color:#Fff;
	margin:2em auto 6em;
	/*text-align:center;
	font-weight:bold;
	border-radius:10px;
	background-color:#CC0104;
	color:#fff;*/
	font-size:1.2em;
	box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
  	display: block;
}
/*
.last{
	position: relative;
	padding: 20px;
	max-width: 860px;
	width: 100%;
	margin: 2em auto 6em;
	height: auto;
	/*background-color:#F2F2F2;*/
	/*text-align:center;*/
	/*font-weight:bold;
	/*border-radius:10px;*/
	/*background-color:#CC0104;
	color:#fff;*/
	/*font-size:1em;
	background: #ffffff;
 	box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
}*/
.item{
	max-width: 800px;
	width: 90%;
	padding: 20px;
	min-height: 180px;
	margin:1em auto;
	font-weight:bold;
	font-size:1.2em;
	display: block;
	border-bottom:dotted 6px #87b5de;
	/*border-bottom:dotted 6px #3F73AB;*/
}

.time{
	max-width: 500px;
	width: 100%;
	display: block;
	position: absolute;
	left:20px;
	top:20px;
}
.photo{
	max-width: 300px;
	width: 100%;
	display: block;
	position: absolute;
	right:20px;
	top:20px;
}
.time2{
	max-width: 430px;
	width: 100%;
	height: auto;
	display: block;
	float: left;
}
.photo2{
	max-width: 300px;
	width: 100%;
	height: auto;
	display: block;
	float: right;
}

.time h1, .item h1{
	font-size: 24px;
	margin: 0 0 15px;
	color: #87b5de;
	/*color:#3F73AB;*/
	text-align: left;
}
.time p, .item p{
  margin: 0 0 10px;
  text-align: left;
  max-width: 550px;
}
.detail{
	font-size: 0.85em;
	max-width: 500px;
	display: block;
}
.application li{
	list-style-type: none;
	float: left;
	margin-right: 20px;
}
.download li a{
	text-decoration: underline;
	font-size: 1.1em;
	margin: 1em auto;
	line-height: 2.4;
	padding: 2px;
	
}
.download li a:hover{
	text-decoration: none;
	background-color:#FBCA3B;
	color:#3F73AB;
}
.butler{
	border-top:dashed 1px #3F73AB;
	padding-top: 14px;
	width: 80%;
	margin-bottom: 2em;
}
.large_b{
	font-weight: bold;
	color:#3F73AB;
}
/*================================================
 * plan 7ページの方
 ================================================*/

.col_4 {
	overflow:hidden;
	max-width:100%
}
.col_4 ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_4 li {
	list-style:none;
	float:left;
	width:23%;
	margin:0 2% 3% 0;
}
.col_4 li:nth-child(4n+1) {
	clear:both;
}
.col_4 li img {
	width:100%;
	margin-bottom:2.5%;
}
.fee{
	text-align: right;
}
.smaii_h4{
	font-size: 0.9em;
}
.page_private05{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/adv.jpg) center center / cover no-repeat;
}
.page_private07{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/hashikui.jpg) center center / cover no-repeat;
}

/*================================================
 * privacypolicy
 ================================================*/
.page_privacy{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/privacy.jpg) center center / cover no-repeat;
}
/*================================================
 * off_moodel
 ================================================*/
.off_model_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/off_model.jpg) center center / cover no-repeat;
}

/*================================================
 * メールフォーム
 ================================================*/
.page_form{
	width: 100%;
  	height: 0;
  	padding-top: calc(348 / 1920 * 100%); 
 	background: url(../contact/img/contact.jpg) center center / cover no-repeat;
}
.page_thanks{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2207 * 100%); 
 	background: url(../contact/img/thanks.jpg) center center / cover no-repeat;
}
.top_page{
	max-width: 300px;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 12em auto;
}
.top_logo01{
	margin-top: 1em;
	display: block;}

/*================================================
 * 串本手作り弁当
 ================================================*/
a.linkImg:hover {
    position: relative;
    text-decoration: none;}
a.linkImg span {
    display: none;
    position: absolute;
    top: 2.5em;
    left: 20px;}
a.linkImg:hover span {
    border: none;
    display: block;
    width: 300px;}
.mb100{
    margin-bottom: 100px;
}
/*================================================
 * FAQ
 ================================================*/
.page_faq{
	width: 100%;
  	height: 0;
  	padding-top: calc(348 / 1920 * 100%); 
 	background: url(../faq/img/faq.jpg) center center / cover no-repeat;}
.faq_title{
	width: 100%;
	height: auto;
	display: block;
	box-sizing: border-box;}
.faq_title ul li{
	width: 24%;
	height: auto;
	float: left;
	margin: 1em 0.5%;
	font-weight: 500;}
	
dl.faq dt:before,
dl.faq dd:before{
  font-size: 2.5em;
  margin-right: .5em;
}
dl.faq dt:before{
  content:"Q";
  color: #c80021;
}
.tocontact{
	max-width: 61.2%;
	width: 600px;
	margin: 5em auto;
	background:#fff;
	border: solid 6px #FBCA3B;
	border-radius: 10px;
	padding: 3em;
	font-weight: bold;}
.tocontact p{
	text-align: center;}
.tocontact a:link{
	color:#3F73AB;
	text-decoration: underline;
}
.tocontact a:hover{
	text-decoration: none;}
.hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	margin: 3em auto 6em;}
dl.faq dd:before{
  content:"A";
  color: #0085C8;
}
dl.faq dd{
  border-bottom: 1px dotted #999;
  margin-left: 0;
　padding-bottom: 5px;
  text-indent: -2em;
  padding-left: 4em;
}
.faqh3{
	font-size: 1.5em;
	padding-left: 1.5em;
}
/*================================================
 * press
 ================================================*/

.press_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/privacy.jpg) center center / cover no-repeat;
}
.press li day{
	margin-bottom: 0px;}
/*.col_4 {
	overflow:hidden;
	max-width:100%
}
.col_4 ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
/*.col_4 li {
	list-style:none;
	float:left;
	width:31.2%;
	margin:0 2% 3% 0;
}
.col_3 li:nth-child(3n+1) {
	clear:both;
}
.col_3 li img {
	width:100%;
	margin-bottom:2%;
}
.fee{
	text-align: right;
}*/
.center{
    text-align: center;
}

/*================================================
 * メディアクエリ
 ================================================*/

@media screen and (max-width: 768px){
	.page_img, .page_facility, .activity_img, .tourist_img, .page_privacy{
		padding-top: calc(600 / 2480 * 100%);
	}
	.left003, .right003{
		float: none;
		margin: 1em auto 2em;
		text-align: center;
	}
	.left003 img{
		margin: 1em auto 3em;
	}
/*access*/
/*グーグルマップ*/
.google-maps {
padding-bottom: 40%; /* これが縦横比*/
	}
/*PLAN**************************************/
.detail{
	font-size: 0.85em;
	max-width:200px !important;
	}
/*faq***************************************/
	.tocontact{
		max-width: 500px;
		width: 90%;
		margin: 5em auto;
		background:#fff;
		border: solid 6px #FBCA3B;
		border-radius: 10px;
		padding: 2em;
		font-weight: bold;
	}
    
/***************free diving***********/     .section{
        max-width: 768px;
        width: 100%;}
    .blue_line{
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 80px;}
    .w350{
        max-width: 350px;
        width: 100%;
        height: auto;
        /*text-align: center;*/
        padding: 5em auto 1em;
        margin: 0 auto;}
    .free{
        font-size: 2.5em;}
    .try{
        max-width: 700px;
        width: 95%;
        height: auto;}
    .wrap{
        max-width: 768px !important;
        width: 90%;
        height: auto;
       /* display: flex;*/
        margin-bottom: 80px;
    /*margin: 0 auto;*/}
    .levitation2{
        flex-basis: 65%;
        margin-right: 5%;}
    .levitation1{
        flex-basis: 30%;
         order:1;}
    .levitation2 .free{
        /*color: #B5D5E1;*/
        fonot-size:2.8em;
        margin: 0.5em auto;
       /* text-align: center;
        border:none;*/}
    .pp{
        font-size: 1.2em;}
    .pink_line{
        /*max-width: 2400px;
        width: 100%;
        height: auto;
        background-color:#DDB3C2;*/
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 80px;}
    .w700{
        max-width: 700px;
        width: 100%;
        height: auto;
        padding: 5em auto 1em;
        margin: 0 auto;}
    .wrap02{
        max-width: 768px;
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto 3em;}
    .pfree{
        font-size: 2.2em;
        margin: 0em auto;
        /*border:none;*/
        line-height: 1.2;
        /*backgroundo-color:none !important;*/}
    .item0{
        flex-basis:47%;
        margin-bottom: 4em;}
    .green_line{
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 80px;}
    .red_lesson{
        font-size: 1.5em;
        margin: 1.5em auto 0}
    .white_001{
        font-size: 2em;
        margin: 0 auto 0.2em;}
    .fdgs{
        font-size: 2.5em;
        text-shadow: 2px 2px 2px #666;}
    .waku001{
        max-width: 768px;
        width: 100%;
        height: auto;}
    .ppc{
        font-size: 1.2em;
        margin-bottom: 4em;}
    .wrap03{
        max-width: 768px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto 3em;}
    .step{
        flex-basis:33%;
        margin-bottom: 4em;}
    .need{
        font-size: 1.3em;}  
}



@media screen and (max-width: 610px){
	/* 吹き出し本体 - 左右の中心 */
	.flow{
	  position: relative;
	  padding: 15px;
	  min-height: 340px;
	  margin:2em auto;
	  font-size:1em;
	}
	.last{
		position: relative;
		padding: 15px;
		min-height: 340px;
		margin:2em auto 6em;
	}
	.time{
		max-width: 500px;
		width: 100%;
		position: absolute;
		left:20px;
		top:20px;
	}
	.photo{
		max-width: 300px;
		width: 100%;
		display: block;
		position: absolute;
		top:160px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;
	}
	.time h1, .time h1{
		font-size: 18px;
		margin: 0 0 8px;
	}
	.time p, .item p{
	  margin: 0 0 4px;
	  max-width: 550px;
	}
	.detail{
		font-size: 18px;
		max-width: 320px !important;
		width: 100%;
		display: block;
	}
	/*================================================
	 * plan 
	 ================================================*/
/*
	.col_4 {
		overflow:hidden;
		max-width:100%
	}
	.col_4 ul {
		overflow:hidden;
		margin:2% -2% 0 0;
	}*/
	.col_4 li {
		list-style:none;
		float:left;
		width:48%;
		margin:0 2% 3% 0;
	}
	/*
	.col_4 li:nth-child(4n+1) {
		clear:both;
	}
	.col_4 li img {
		width:100%;
		margin-bottom:2.5%;
	}
	.fee{
		text-align: right;
	}
	.smaii_h4{
		font-size: 0.9em;
	}*/
}

@media screen and (max-width: 550px){
	.col_3 li {
		float:none;
		width:100%;
		margin:0 2% 3% 0;
	}
	.col_3 li:nth-child(3n+1) {
		clear:both;
	}
	.col_3 li img {
		width:100%;
		margin-bottom:2.5%;
	}
	.br{
		display: inline-block;}
	.tocontact{
		max-width:540px;
		width: 80%;
		margin: 5em auto;
		background:#fff;
		border: solid 6px #FBCA3B;
		border-radius: 10px;
		padding: 2em;
	}
}
@media screen and (max-width: 480px){
	.tourist .top_btn{
		display: block;
		margin-bottom: 3em !important;}
	.photo{
		position: absolute;
		top:180px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;}
/*================================================
	 * plan 
	 ================================================*/
	.col_4 li {
		list-style:none;
		float:left;
		width:96% !important;
		margin:0 2% 3% 0;}
/*================================================
	 * FAQ
================================================*/
	.faq_title ul li{
		width: 49%;
		height: auto;
		float: left;
		margin: 1em 0.5%;
		font-weight: 500;}
    
    
/************free diving***********/
    .br480{display: inline-block;}
    .section{
        max-width: 480px;
        width: 100%;}
    .blue_line{
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 50px;}
    .w350{
        max-width: 350px;
        width: 100%;
        height: auto;
        /*text-align: center;*/
        padding: 5em auto 1em;
        margin: 0 auto;}
    .free{font-size: 1.2em;}
    .try{
        max-width: 480px;
        width: 96%;
        height: auto;
        margin: 1em auto;}
    .wrap{
        max-width: 480px !important;
        width: 90%;
        height: auto;
       display: block;
        margin: 1em auto;
        margin-bottom: 30px;
    /*margin: 0 auto;*/}
    .levitation2{
        flex-basis: 95%;
        margin-right: 0%;}
    .levitation1{
        flex-basis: 95%;
         order:1;}
    .levitation2 .free{
        /*color: #B5D5E1;*/
        font-size:2.8em;
        margin: 0.5em auto;
       /* text-align: center;
        border:none;*/}
    .pp{
        font-size: 1.2em;}
    .pink_line{
        /*max-width: 2400px;
        width: 100%;
        height: auto;
        background-color:#DDB3C2;*/
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 30px;}
    .w700{
        max-width: 480px;
        width: 90%;
        height: auto;
        padding: 3em auto 1em;
        margin: 0 auto;}
    .wrap02{
        max-width: 480px;
        width: 95%;
        display: block;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 auto 1em;}
    .pfree{
        font-size: 2em;
        margin: 0em auto;
        text-align: center;
        /*border:none;*/
        line-height: 1.2;
        /*backgroundo-color:none !important;*/}
    .item0, .item1, .item2, .item3, .item4, .item5, .item6{
        flex-basis:95%;
        margin-bottom: 1em;}
    .item0{order:1;}
    .item1{order:2;}
    .item2{order:4 !important;}
    .item3{order:3;}
    .item4{order:5;}
    .item5{order:6;}
    
    .green_line{
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 80px;}
    .red_lesson{
        font-size: 1.5em;
        margin: 1.5em auto 0}
    .white_001{
        font-size: 2em;
        margin: 0 auto 0.2em;}
    .fdgs{
        font-size: 2.5em;
        text-shadow: 2px 2px 2px #666;}
    .waku001{
        max-width: 480px;
        width: 95%;
        height: auto;
        margin: 0em auto;}
    .ppc{
        font-size: 1.2em;
        margin-bottom: 4em;}
    .wrap03{
        max-width:480px;
        width: 95%;
        display: block;
        justify-content: space-between;
        margin: 0 auto 5em;}
    .step{
        flex-basis:95%;
        margin: 1em auto;}
    .need{
        font-size: 1.5em;}
    .inq{
        max-width: 480px;
        width: 95%;
        height: auto;
        margin: 0 auto;}
    
    
    
    
    
    
}
@media screen and (max-width: 400px){
	.flow{
	  position: relative;
	  padding: 15px;
	  min-height: 360px;
	  margin:2em auto;
	  font-size:1em;
	}
	.photo{
		position: absolute;
		top:180px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;
	}
	.photo img{
	max-width: 260px;
	width: 90%;
	height: auto;
	}
	.detail{
		font-size: 0.85em;
		max-width: 270px !important;
		width: 90%;
	}
}



@media screen and (max-width: 375px){

/************free diving***********/
    .br480{display: inline-block;}
    .section{
        max-width: 375px;
        width: 100%;}
    .blue_line{
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 50px;}
    .w350{
        max-width: 350px;
        width: 100%;
        height: auto;
        /*text-align: center;*/
        padding: 5em auto 1em;
        margin: 0 auto;}
    .free{font-size: 1.3em;}
    .try{
        max-width: 480px;
        width: 96%;
        height: auto;
        margin: 1em auto;}
    .wrap{
        max-width: 480px !important;
        width: 90%;
        height: auto;
       display: block;
        margin: 1em auto;
        margin-bottom: 30px;
    /*margin: 0 auto;*/}
    .levitation2{
        flex-basis: 95%;
        margin-right: 0%;}
    .levitation1{
        flex-basis: 95%;
         order:1;}
    .levitation2 .free{
        /*color: #B5D5E1;*/
        font-size:2em;
        margin: 0.5em auto;
       /* text-align: center;
        border:none;*/}
    .pp{
        font-size: 1.1em;}
    .pink_line{
        /*max-width: 2400px;
        width: 100%;
        height: auto;
        background-color:#DDB3C2;*/
        padding-top: 2em ;
        padding-bottom: 0.5em;
        margin-bottom: 30px;}
    .w700{
        max-width: 480px;
        width: 90%;
        height: auto;
        padding: 3em auto 1em;
        margin: 0 auto;}
    .wrap02{
        max-width: 480px;
        width: 95%;
        display: block;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 auto 1em;}
    .pfree{
        font-size: 2em;
        margin: 0em auto;
        text-align: center;
        /*border:none;*/
        line-height: 1.2;
        /*backgroundo-color:none !important;*/}
    .item0{
        flex-basis:95%;
        margin-bottom: 1em;}
    .green_line{
        padding-top: 1em ;
        padding-bottom: 0.5em;
        margin-bottom: 80px;}
    .red_lesson{
        font-size: 1.5em;
        margin: 1.5em auto 0}
    .white_001{
        font-size: 1.5em;
        margin: 0 auto 0.2em;}
    .fdgs{
        font-size: 2.5em;
        text-shadow: 2px 2px 2px #666;}
    .waku001{
        max-width: 480px;
        width: 95%;
        height: auto;
        margin: 0em auto;}
    .ppc{
        font-size: 1em;
        margin-bottom: 4em;}
    .wrap03{
        max-width:480px;
        width: 95%;
        display: block;
        justify-content: space-between;
        margin: 0 auto 5em;}
    .step{
        flex-basis:95%;
        margin: 1em auto;}
    .need{
        font-size: 1.5em;}
    .inq{
        max-width: 480px;
        width: 95%;
        height: auto;
        margin: 0 auto;}
    }