@charset "UTF-8";
/***********************************************/
/* HTML tag styles                             */
/***********************************************/

body{
background-color:#fff;
margin:0;
min-width:640px;
padding:0;
text-align:center;
-webkit-text-size-adjust: none;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,input,textarea,p,blockquote,table,th,td,address{
margin:0;
padding:0;
color:#333;
font-style:normal;
font-family: 'M PLUS Rounded 1c', sans-serif,"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
font-size:16px;
line-height:161%;
word-wrap:break-word}

table{
border-collapse:collapse;
border-spacing:0}

table{
	width:100%;
	margin-bottom:40px;}

table th{
	width:30%;
	padding:30px 20px;
	border-top:1px dotted #ccc;}

table th.req{
	background:url(../img/contact/hissuIcon.jpg) right 50% no-repeat;}
	
table td{
	padding:30px;
	border-top:1px dotted #ccc;}
	
table th,
table td{
	border-bottom:1px dotted #ccc;
	vertical-align:middle;}

textarea,input{margin:0;padding:0}

caption,th{text-align:left}
td,th{vertical-align: top}

fieldset,img,abbr{border:none}
li{list-style-type:none}
hr{display:none}

a,a:link{color:#00ABEB;overflow:hidden;text-decoration:none;}
a:visited{color:#00ABEB}
a:hover{color:#00ABEB;text-decoration:underline;}
strong{font-weight:bold}

img{vertical-align:bottom}

img.smp,
br.smp{display:none}

input{
	padding:10px;
	width:80%;
    vertical-align : middle;}

textarea{
	width:100%;
	height:40px;}


/***********************************************/
/* layout divs                                 */
/***********************************************/

#wrapper{
min-width:1020px;
position:relative;
overflow:hidden}

/***********************************************/
/* #head style                                 */
/***********************************************/

#head{
	background:url(../img/common/headBg.png) 50% top repeat-x;
	width:100%;
    position: fixed;
	z-index:100;}
	
#head #inner{
	text-align:left;
	margin: 0 auto;
	height:140px;
	width:1020px;
	position:relative;}

#head #headLogo{
	position:absolute;
	top:50px;
	left:0;
	width:300px;
	height:80px;
	background:url(../img/common/logo.png) left top no-repeat;
	text-indent:-9999px;
	z-index:999;}

#head #inner #headLogo a{
	display:block;
	width:100%;
	height:100%;}

#head p#kyach{
	padding:10px 0 0;
	color:#fff;
	font-size:80%;}
	
#head #telBtn{
	position:absolute;
	top:10px;
	right:190px;
	font-size:200%;}

#head #telBtn a{
	color:#FF7F00;
	text-decoration:none;}
	
#head #reservBtn{
	position:absolute;
	top:40px;
	right:0;
	width:100px;
	height:100px;
	background:url(../img/common/headerReservIcon.jpg) 50% 20px no-repeat #FFF000;
	text-align:center;}

#head #reservBtn a{
	display:block;
	width:100%;
	height:40px;
	padding: 60px 0 0;
	color:#00ABEB;
	transition: .3s;}

#head #reservBtn:hover{
	opacity: 0.5 ;}

#head #reservBtn:hover > a{
	text-decoration:none;}
	
#head #inner #navArea{
	position:absolute;
	top:70px;
	right:110px;}

#head #headContact{
	position:absolute;
	top:8px;
	right:0;
	text-align:right;
	margin-bottom:10px;
	color:#fff;}


#head p.openTime,
#head #headContactMob{
	display:none;}

#head #headContact a#mailCont{
	margin-left:20px;
	width:100px;
	padding:0 0 0 45px;
	background:url(../img/common/headMailIcon.png) left 50% no-repeat #00ABEB;
	color:#fff;
	text-decoration:none;}
	
#head #headContact a#mobCont,
#head #headContact a#telCont{
	font-weight:normal;
	color:#fff;
	padding: 3px 0 3px 25px;
	background:url(../img/common/headMobIcon.png) left 50% no-repeat;
	margin-left:20px;}
	
#head #headContact a#telCont {
	background:url(../img/common/headTelIcon.png) left 50% no-repeat;}


#head #headContact a#mobCont:hover,
#head #headContact a#telCont:hover{
	text-decoration:none;}

	
#head #linkArea ul{text-align:right;}

#head #linkArea ul li{
    display:inline-block; 
    zoom:1 // IE7以下;
	padding:7px 0 7px 18px;
	margin-left:20px;
	background:url(../img/common/listIcon.jpg) left 50% no-repeat;}

#head #linkArea ul:before,
#head #linkArea ul:after{content:"";display:table;}
#head #linkArea ul:after{clear:both;}
	
#head #inner:before,
#head #inner:after{content:"";display:table;}
#head #inner:after{clear:both;}

#head #menuBtn{display:none}

#head #navArea ul#gnav li{
	float:left;
	border-left:1px dotted #00ABEB;}

#head #navArea ul#gnav li:hover{
	background-color:#FFF000;}

#head #navArea ul#gnav li:hover > a{
	text-decoration:none;}

#head #navArea ul#gnav li span,	
#head #navArea ul#gnav li span a{
	display:block;}
	
#head #navArea ul#gnav li .navChild{
	display:none;
	position:fixed;
	top:100px;
	left:0;
	width:100%;
	background-color:#333;
	color:#fff;
	z-index:5;}

#head #navArea ul#gnav li a{
	display:block;
     padding: 10px 20px;}

#head #navArea ul#gnav li .navChild .inner{
	color:#fff;
	margin:0 auto;}

#head #navArea ul#gnav li .navChild .inner ul{padding-left: 200px;}

#head #navArea ul#gnav li .navChild .inner ul li{
	padding:20px;
	margin-right:20px;
	height:auto;}

#head #navArea ul#gnav li .navChild .inner ul li a{
	font-weight:bold;
	color:#fff;}

/***********************************************/
/* #foot style                                 */
/***********************************************/

#contactBtn{
	display:none;}

#bannerArea{
	padding:40px 0 ;
	background:url(../img/common/bannerAreaBg.jpg) 50% top no-repeat}

#bannerArea .h2cont{
	margin:0 auto;
	width:1020px;}

#bannerArea h2{
	color:#fff;
	margin-bottom:40px;}

#bannerArea .h2cont p{
    width: 240px;
	margin-right:20px;
	float:left;}

#bannerArea .h2cont p.lineBtn a{
    background-color: #06C755;
}

#bannerArea .h2cont:before,
#bannerArea .h2cont:after{content:"";display:table;}
#bannerArea .h2cont:after{clear:both;}

#bannerArea .h2cont p:last-child{
	margin:0;}
	
#bannerArea .h2cont p.btn a{
	padding:30px 0;}

#bannerArea .h2cont p.btn:last-child > a{
	background-color:#FFDE00;
	color:#00ABEB;}
	

#foot{
	background-color:#333;
	padding:40px 0;}

#foot .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}

#foot .inner .corpInfo{
    width:340px;
    box-sizing: border-box;
    padding-right: 40px;
    border-right:1px dotted #fff;
    margin-right: 40px;
}

#foot .inner .corpInfo .leftArea{
    text-align: left;
    margin-bottom: 40px;
}

#foot .inner .corpInfo #afetyBanner{
    text-align: left;
}
#foot .inner .corpInfo #afetyBanner img{
    margin-bottom: 20px;
}
    
#foot .inner .corpInfo p{
	color:#fff;
	margin-bottom:20px;}


#foot .inner .corpInfo p.address{
	margin:0;}


#foot .inner #linkArea{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 550px;}

#foot .inner #linkArea h3{
	text-align:left;
	color:#fff;
	margin-bottom:20px;}

#foot .inner #linkArea ul{
    width: 255px;
    box-sizing: border-box;
}
	
#foot .inner #linkArea ul li{
    width: 270px;
    box-sizing: border-box;
}

#foot .inner ul li{
	margin-bottom:20px;
	width:245px;
	text-align:left;}
	
#foot .inner ul li a{
	color:#fff;
	font-size:80%;}

#foot .inner .facebookArea{
	float:right;}

address{
	padding:10px 0;
	width:100%;
	background-color:#000;
	color:#fff;}

/***********************************************/
/* #main style                                 */
/***********************************************/

a:hover img {
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
filter: alpha(opacity=70);	/* IE lt 8 */
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

#main{
margin:0 auto;
padding:0;
position:relative;
text-align:left;}

#index #main{width:100%}

#pageTop{
position:fixed;
right:40px;
bottom:40px;
z-index:1;}

#pageTop a{
background:url(../img/common/pageTop.png) no-repeat 0 0;
height:105px;
display:block;
text-indent:-10000px;
width:105px}

h1{z-index:0;}

#h1Area{
	padding:300px 0 100px;
	background:url(../img/common/sech1Bg.jpg) 50% top no-repeat;
	margin-bottom:80px;}

h1{
	padding:0 40px;
	font-size:261%;
	margin:0 auto 20px;
	color:#fff;
    line-height: 120%;
	font-weight:normal;}
	
h1 span{
	font-size:62%;
	color:#FFF000;}

h2{
	margin-bottom:40px;
	font-size:161%;
	text-align:center;
	font-weight:normal;
	line-height:200%;}

h2.w100H2{
	width:100%;
	background:url(../img/common/w100H2Bg.png) 50% top no-repeat;
	padding:30px 0 70px;
	font-size:161%;
	color:#00ABEB;
	line-height:120%;}

h2.w100H2 img{
	margin-bottom:20px;}

h2.w100H2 span{
	color:#FFDE00;
	font-size:66%;}

h2 span{
	color:#00ABEB;
	font-size:161%;}
	
	
.btn{
	width:313px;
	text-align:center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	background:#fff;
	border-radius: 10px;}


.btn a{
	display:block;
	padding:20px 20px;
	color:#fff;
	background-color:#00ABEB;
	font-size:100%;
	text-decoration:none;
	transition: 0.3s ;
	border-radius: 10px;}

.btn a:hover{opacity: 0.5 ;}

.inner {
	width:1020px;
	margin: 0 auto;}

.content_outline{
    max-width: 1020px; 
    margin: 0 auto 40px; 
} 

/***********************index***********************/

.smahoSlider{
	display:none;}

#vaslider {
    position: relative;
	margin-top:40px;
	width: 100%;
	height: 100vh;
	max-height:1020px;
    min-height: 890px;
	z-index: 0;
}

#vaslider p.todayIcon{
    position: absolute;
    bottom:10px;
    left: 0;
    right: 0;
	z-index: 2;}

#vaslider .flexslider{
	width:100%;
	height:100vh;
	max-height:1020px;
	z-index:0;}

#index .flexslider ul.slides{
	width:100%;
	height:100vh;}

#index .flexslider ul.slides li{
	width:100%;
	height:100vh;
	max-height:1020px;
	position:relative;
	overflow:hidden;}

#index .flexslider ul.slides li img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:auto;
	height:100vh;
	max-height:1020px;
	min-height:100%;}

#videoArea{
    position: relative;
    width: 100%;
    height: 100vh;}

#videoArea h1{
    position:relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 0;
    font-size: 100%;
    border: none;
    background: url(../img/index/va/h1bg.png);
    }
#videoArea h1 img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: auto;
    height: 203px;}

#videoArea p.reserveIcon{
    position: absolute;
    bottom: 40px;
    left: -822px;
    right: 0;
    margin: auto;
    padding: 0;
    font-size: 100%;
    border: none;
    width: 22.8vh;
    height: 22.8vh;
    z-index: 3;
    }
#videoArea p.reserveIcon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#videoArea p.nextIcon{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 100;
    padding: 0;
    font-size: 100%;
    border: none;
    }

#videoArea video{
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    width: 110%;
    height: auto;
    min-height: 100vh;
    z-index: 0;}
    
/*************　マリンアイランドとは　*************/

#index .aboutArea .inner{
    padding: 80px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#index .aboutArea .inner figure{
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    padding: 0;
    margin: 0;
}

#index .aboutArea .inner figure img{
    width: 32%;
    margin-right: 1%;
    height: auto;
    min-height: 540px;
    object-fit: cover;
}
#index .aboutArea .inner figure img:last-child{
    margin: 0;}

#index .aboutArea .inner .detail{
    width: 50%;
    padding: 0 80px;
    box-sizing: border-box;
}

#index .aboutArea .inner .detail h2{
    width: 70%;
    padding: 0;
    margin-bottom: 40px;
    color:#00ABEB;
    font-size: 259%;
}

#index .aboutArea .inner .detail p{
    width: 70%;
    padding: 0;
    margin: 0;
}
    
/*************　パラーセリングまでの流れ　*************/

#index .flowArea .inner{
    padding: 0 0 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
#index .flowArea .inner .flowList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 80px;
}
#index .flowArea .inner p.btn{
    margin: 0 auto;
}

#index .flowArea .inner .flowList .flowCont{
    width: 200px;
    padding-right: 40px;
	align-items: center;
	background:url("../img/index/flow/nextAlor.png") right 0 top 130px no-repeat;}

#index .flowArea .inner .flowList .flowCont:last-child{
	background:none;
    padding: 0;
    margin: 0;
}

#index .flowArea .inner .flowList .flowCont:first-child > .flowNum,
#index .flowArea .inner .flowList .flowCont:last-child > .flowNum{
	border-color:#FF7F00;
	color:#FF7F00;}

#index .flowArea .inner .flowList .flowCont img{
	width:200px;
	margin-right:40px;
	border-radius: 10px;
    margin-bottom: 10px;
}

#index .flowArea .inner .flowList .flowCont dl dt{
    font-size: 161%;
    margin-bottom: 10px;
    text-align: center;
    color:#00ABEB;
}


#index .flowArea .inner .flowList .flowCont .flowNum{
	text-align:center;
	font-size:161%;
    display: flex;
    justify-content: center;
    align-items: center;
	color:#00ABEB;
	width: 60px;
	height: 60px;
	border:4px solid #00ABEB;
    border-radius: 50%;
    margin: 0 auto 10px}

#index .flowArea .inner .flowList .flowCont p{
	text-align:left;
	width:670px;
	font-size:140%;}
    
/*************　よくあるご質問　*************/

#index .faqArea .inner{
    padding: 40px 0 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
	
#index .faqArea .inner dl{
    width: 49%;
    margin-bottom: 40px;
    box-sizing: border-box;
	border-bottom:1px dotted #00ABEB;
	cursor:pointer;}

#index .faqArea .inner dl:last-child{
	border-bottom:3px solid #00ABEB;}

#index .faqArea .inner dl dt{
	padding:30px 40px 30px 70px;
	background:url(../img/faq/QIcon.png) left 20px top 50%  #E5F6FD no-repeat;
	font-weight:bold;}

#index .faqArea .inner dl dd{
	padding:30px 0 30px 50px;
    background:url(../img/faq/AIcon.png) left top 30px no-repeat;}

#index .faqArea .inner p.btn{
    margin: 0 auto;
}
    
/*************選ばれる理由*************/

#choice{
    background: url("../img/index/choice/bgImg03.jpg") 50% 50% no-repeat;
}

#choice .inner{
    width: 1020px;
    padding: 0 0 160px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}
#choice .inner item{
    text-align: center;
    padding: 40px 20px;
    background-color: #FFF;
    width: 313px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}
#choice .inner item p.num{
    font-size: 416%;
    color:#FF7F00;
    font-weight: bold;
    margin: -97px auto 0;
}
#choice .inner item img{
    margin-bottom: 20px;
}
#choice .inner item h3{
    font-size: 140%;
    color: #008FE1;
    font-weight: bold;
}

#choice .inner item:nth-child(4),
#choice .inner item:nth-child(5),
#choice .inner item:nth-child(6){
    margin-bottom: 0;
}
/*************course*************/

section#recruit{
    padding: 80px 0;
    background-color: #E5F6FD;
}
section#recruit .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;}

section#recruit .inner figure{
    padding: 0;
    margin: 0;
}
section#recruit .inner figure img{
    border-radius: 10px 0 0 10px;}

section#recruit .inner .detail{
    background-color: #fff;
    padding: 40px;
    width: 482px;
    box-sizing: border-box;
    border-radius: 0 10px 10px 0;
}
section#recruit .inner .detail h2{
    padding: 30px 0 10px;
    margin-bottom: 20px;
    background: url("../img/index/recruit/beginner.jpg") 50% top no-repeat;
    border-bottom: 3px solid #00ABEB;
    font-size: 259%;
    font-weight: bold;
    color:#00ABEB;
}
section#recruit .inner .detail p strong{
    text-align: center;
    font-weight: bold;
    color:#00ABEB;
}

section#recruit .inner .detail p{
    margin-bottom: 20px;
    text-align: center;}

section#recruit .inner .detail p.btn{
    width: 100%;
    margin: 0 auto;}

    
/*************course*************/

section#parasailing{background:url(../img/course/parasailing/common/sectionBg.jpg) 50% top repeat-x;}
section#parasailing .inner{
    width: 1420px;
    padding-top: 60px;
}

section#marineSports{
    background:url(../img/course/marine/common/sectionBg.jpg) 50% bottom repeat-x;
}
section#marineSports .inner{
    width: 100%;
    justify-content: center;
}

.courseList .inner{
	width:1080px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
	padding-bottom:40px;
    flex-wrap: wrap;}

.courseList .inner .courseItem{
	position:relative;
	width:313px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	background-color:#fff;
	transition:0.3s;
	margin-bottom:40px;
	padding-bottom:20px;
	background:url(../img/course/common/moreBg.jpg) 50% bottom no-repeat #fff;
    margin-right: 40px;
	}

.courseList .inner .courseItem:nth-child(4n){
    margin-right: 0;}

	
.courseList .inner .courseItem:hover{
	opacity:0.5;}

p.kyachIcon,
p.kyachIcon3{
	position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
	top:90px;
	left:-36px;
    min-width: 129px;
    min-height: 110px;
    box-sizing: border-box;
	padding:33px 32px;
	text-align:center;
	color:#fff;
	line-height:120%; 
	font-size:100%;
	background:url(../img/course/common/kyachIconBg.png) 50% 50% no-repeat;}

p.kyachIcon3{
	background:url(../img/course/common/kyachIconSPBg.png) 50% 50% no-repeat;}

.courseItem:nth-child(3n) > p.kyachIcon{
	background:url(../img/course/common/kyachIconSPBg.png) 50% 50% no-repeat;}

.courseList .inner .courseItem img{
	width:100%;
	border-radius: 10px 10px 0 0;}

.courseList .inner .courseItem dl{padding:20px;}

.courseList .inner .courseItem dl dt{
	font-size:140%;
	text-align:center;
	color:#00ABEB;
	margin-bottom:20px;}
	
.courseList .inner .courseItem dl dd{
	margin-bottom:20px;}

.courseList .inner .courseItem dl dd.price,
.courseList .inner .courseItem dl dd.priceOff{
	text-align:right;}

.courseList .inner .courseItem dl dd.price strong,
.courseList .inner .courseItem dl dd.priceOff strong{
	font-size:200%;
	color:#FF7F00;
	margin-bottom:0;}

.courseList .inner .courseItem dl dd.priceOff{
    background-color: #FFF000;
    padding: 10px;}

.courseList .inner .courseItem dl dd.priceOff strong{
    font-size: 140%;
    color:#00ABEB;
}

.courseList .inner .courseItem p.detailLink{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;}

.courseList .inner .courseItem p.detailLink a{
	display:block;
	width:100%;
	height:100%;
	text-indent:-9999px;}

#setImg ul{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    justify-content:center;}

#setImg ul li{
	width:20%;}

#setImg ul li img{
	width:100%;}

/*************ACCESS*************/

#company figure.mapImg{
    margin: 0 auto 80px;
    padding: 0;
    text-align: center;
}

#company figure.mapImg img{
    max-width: 740px;
    height: auto;
    margin: 0 auto;
}
 
#access .inner{
	margin:0 auto 40px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
  flex-wrap: wrap;
}

#access .inner dl{
	width:490px;
	margin-bottom:20px;}
	
#access .inner dl dt{
	padding:10px 20px;
	width:110px;
	margin-right:20px;
	background-color:#00ABEB;
	border-radius: 10px;
	text-align:center;
	color:#fff;}

#access .inner dl dt,
#access .inner dl dd{
	display:inline-block;
	vertical-align:middle;}
	
#access .inner dl dd{}

#access p{
	margin-bottom:40px;
	text-align:center;}

#access #googleMap{
	margin-bottom:80px;}

#access p.btn{
	margin: 0 auto;
	border-radius: 10px;
	margin-bottom:80px;
}

/************* INSTAGRAM *************/

#index #insta .inner{
    margin-bottom: 80px;
}
#index #insta .inner ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#index #insta .inner ul li{
    width: 196px;
    height: 196px;
    margin-bottom: 10px;
}
#index #insta .inner ul li img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
#index #insta p.btn{
    margin: 0 auto 80px;
}
/*************STAFF BLOG*************/

#index #blog .inner{
	width:1020px;
	margin:0 auto 40px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
	flex-wrap: wrap;
	justify-content: space-between;}

#index #blog .inner .blogItem{
	position:relative;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
	flex-wrap: wrap;
	width:490px;
	margin-bottom:40px;
	transition:0.3s;}

#index #blog .inner .blogItem:hover{
	opacity:0.5;}

#index #blog .inner .blogItem p.imgArea,
#index #blog .inner .blogItem dl{
	display:inline-block;}
	
#index #blog .inner .blogItem p.imgArea{
	margin-right:20px;
	height:160px;
	width:160px;
	border-radius:50%;
	overflow:hidden}
	
#index #blog .inner .blogItem p.imgArea img{
	object-fit: cover;
	width: 160px;
	height:160px;}
	
#index #blog .inner .blogItem dl{
	width:310px;}
	
#index #blog .inner .blogItem dl dt{
	font-weight:bold;
	margin-bottom:12px;
	color:#00ABEB;}
	
#index #blog .inner .blogItem dl dd{
	margin-bottom:12px;}
	
#index #blog .inner .blogItem dl dd.date{
	color:#FF7F00}

#index #blog .inner .blogItem a.linkArea{
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-9999px;}

#index #blog p.btn{
	margin:0 auto 80px;}

.comBanner{
    margin-bottom: 40px;
    text-align: center;
}
.comBanner a{
    display: block;
    margin: 0 auto;
}

/*************FAQ*************/

#faq section ul.janpLink{
	margin-bottom:80px;}
	
#faq section ul.janpLink li{
	float:left;
	text-align:center;
	width:489px;
	height:120px;
	border:1px solid #00ABEB;
	margin-right:38px;}

#faq section ul.janpLink li:last-child{
	margin-right:0;}

#faq section ul.janpLink li a{
	display:block;
	width:100%;
	height:100px;
	padding-top:20px;
	background:url(../img/faq/janpBg.png) 50% 20px no-repeat;
	background-position:left 50% bottom 15px;}

#faq section ul.janpLink li a:hover{
	text-decoration:none;
	background-color:#F9FDFF;}
	
#faq section ul.janpLink:before,
#faq section ul.janpLink:after{content:"";display:table;}
#faq section ul.janpLink:after{clear:both;}

section#faq{
	margin-bottom:80px;}

#faq #h201{
	margin-bottom:80px;}

section#faq h2{
	margin-bottom:0;
	padding-bottom:40px;
	border-bottom:3px solid #00ABEB;}
	
.faq dl{
	padding:0 40px 0 40px;
	border-bottom:1px dotted #00ABEB;
	cursor:pointer;}

.faq dl:last-child{
	border-bottom:3px solid #00ABEB;}

.faq dl dt{
	padding:30px 0 30px 50px;
	background:url(../img/faq/QIcon.png) left 50% no-repeat;
	font-weight:bold;}

.faq dl dd{
	border-top:1px dotted #ccc;
	padding:30px 0 30px 50px;
    background:url(../img/faq/AIcon.png) left top 30px no-repeat;}


/***********************course LIST***********************/

#courseList #main{
	width:100%;
	margin-bottom:80px;}

#courseList section#parasailing{
	background:none;}
	
/***********************course***********************/

#course .cont{
	width:1020px;
	margin:0 auto;
	padding-bottom:80px;}
	
#course #h1Area{
	margin-bottom:0;}

#h1Area .cont{
	width:840px;
	position:relative;
	margin:0 auto;}

#h1Area .cont p.kyachIcon{
	position:absolute;
	top:-90px;
	left:-20px;}　

#h1Area .cont p.kyachIcon{
	background:url(../img/course/common/kyachIconSPBg.png) 50% 50% no-repeat}

#h1Area .cont h1{
	border-width: 0 0 3px 0;}

#h1Area .cont p.kyach{
	border-top:2px solid #fff;
    padding-top: 20px;
	color:#fff;}

#course #point{
	background:url(../img/course/parasailing/100m/pointBg.png) 50% top no-repeat;}

#course #point .cont{
	width:1020px;
	margin:0 auto 40px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
	flex-wrap: wrap;
	justify-content: space-between;}

#course #point .cont .pointcont{
	position:relative;
	width:313px;}

#course #point .cont .pointcont p.kyachIcon{
	top:220px;}

#course #point .cont .pointcont p img{
	margin-bottom:20px;}

#course #point .cont .pointcont dl dt{
	font-size:161%;
	text-align:center;
	color:#00ABEB;
	margin-bottom:16px;}



#course #imgArea .cont{
	width:1020px;
	margin:0 auto;
	padding-bottom:80px;}	

#course #imgArea .cont .mainVisual{
	margin-bottom:40px;}
#course #imgArea .cont .mainVisual .flex-viewport{
	height:565px;
	margin-bottom:10px;}
#course #imgArea .cont .mainVisual .flex-control-thumbs li{
	width:194px;
	margin-right:10px;}

#course #imgArea .cont section{
	margin-bottom:80px;}

#course #imgArea .cont section#disc{
	padding-bottom:40px;
	margin-bottom:40px;
	border-bottom:1px dotted #00ABEB}
	
#course #imgArea .cont h2.kyach{
	font-size:161%;
	color:#00ABEB}

#course #flow .flowCont{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-bottom:40px;
	background:url(../img/course/common/flowNextIcon.jpg) 180px bottom no-repeat;
	margin-bottom:20px;}

#course #flow .flowCont:last-child{
	background:none;}

#course #flow .flowCont:first-child > .flowNum,
#course #flow .flowCont:last-child > .flowNum{
	border-color:#FF7F00;
	color:#FF7F00;}

#course #flow .flowCont:first-child > p,
#course #flow .flowCont:last-child > p{
	border-color:#FF7F00;
	color:#FF7F00;}

#course #flow .flowCont img{
	width:200px;
	margin-right:40px;
	border-radius: 10px;}


#course #flow .flowCont .flowNum{
	line-height:100%;
	text-align:center;
	font-size:161%;
	color:#00ABEB;
	width: 40px;
	height: 40px;
	padding: 30px 20px 10px;
	border:4px solid #00ABEB;
    border-radius: 50%;
	margin-right:40px;}

#course #flow .flowCont p{
	text-align:left;
	width:670px;
	font-size:140%;}


#course #movie{
	background:url(../img/course/common/movieBg.jpg) 50% top no-repeat;}
	
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.movie-wrap:first-child {
    margin-bottom: 40px;}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

#course #main section#fee .payArea{
    display:flex;
}

#course #main section#fee dl{
	width:500px;
	margin-right:20px;
	margin-bottom:40px;
    border-bottom: 1px dotted #00ABEB;
	text-align:center;}

#course #main section#fee dl.time{
	margin-right:0;}

#course #main section#fee dl dt{
	padding:20px;
	background-color:#00ABEB;
	font-size:161%;
	color:#fff;}

#course #main section#fee dl dd{
	padding:20px;
	font-size:161%;}

#course #main section#fee dl dd strong{
	font-weight:bold;
	color:#FF7F00;}

#course #main section#fee dl dd span{
    font-size: 64%;
}
span.gentei{
    color:#00ABEB;
}
#course #main section#fee dl dd span.gentei{
    display: block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #fff000;
}
#course #main section#fee dl dd sup{
    font-size: 67%;}

#course #main section#fee .fishing{
    flex-wrap: wrap;
}
#course #main section#fee .fishing dl{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}
#course #main section#fee .fishing dl:last-child{
    margin-bottom: 80px;
}
#course #main section#fee .fishing dl dt{
    width: 25%;
    box-sizing: border-box;
    padding: 20px 0;
}
#course #main section#fee .fishing dl dd{
    width: 75%;
    box-sizing: border-box;
    text-align: left;
}



table tr:first-child{border-top:2px solid #00ABEB;}
table tr th,
table tr td{border-bottom:1px dotted #00ABEB;}
table tr:last-child{border-bottom:2px solid #00ABEB;}

#course #main #googleMap{
	margin-bottom:80px;}

#course #main section#reserv p.btn{
	width:100%;
}

#course #main section#reserv p.btn a{
	padding:30px;
    background-color: #FF7F00;
	font-size:161%;}

/******************STAFF******************/

#staff .staffDetail{
	width:313px;
	float:left;
	margin:0 40px 40px 0;
	min-height:630px;}

#staff .staffDetail:nth-child(3n){
	margin-right:0;}

#staff .staffDetail img,
#staff .staffDetail dl dt,
#staff .staffDetail dl dd{margin-bottom:10px;}

#staff .staffDetail img{
	border-radius:50%;}

#staff .staffDetail dl dt{
	font-size:161%;
	text-align:center;}
#staff .staffDetail dl dd{
	text-align:center;}

#staff .staffDetail dl dt span{
	font-size:62%;
	color:#00ABEB}

/******************ACCESS******************/

#access #main{
	width:1020px;}

#access section{
	margin-bottom:80px;}

section#access p{
	margin-bottom:40px;
	text-align:center;}

section#access p.telNum{
	font-size:261%;}

section#access h3{
	width:100%;
	margin: 0 auto 40px;
	font-size:161%;
	color:#00ABEB;
	text-align:center;
	padding:20px;
	background-color:#E5F6FD;
    box-sizing: border-box;
}

section#access ol li{
	text-align:center;
	padding:0 0 65px;
	margin-bottom:30px;
	background:url(../img/access/alorIcon.jpg) 50% bottom no-repeat;}

section#access ol li:last-child{
	background:none;
	padding-bottom:none;
	margin-bottom:40px;}

/******************contact******************/

#contact #main{
	width:1020px;
	margin:0 auto 40px;}

#contact #h201 table tr td.select label{
	display:block;
	padding:10px 20px;
	border:1px solid #ccc;
	background-color:#f5f5f5}

#contact #h201 table tr td.select input{
	width:20px;
	height:20px;
	margin-right:10px;}

#contact #h201 table tr td.postcode{
	border-bottom:none;}
	
#contact #h201 table tr td.address{
	border-top:none;
	padding-top:0;}

#contact #h201 .btn{margin: 0 auto 80px;}

#contact #h201 .btn input{
    display: block;
    padding: 20px 20px;
    color: #fff;
    background-color: #FF7F00;
    font-size: 140%;
    text-decoration: none;
    transition: 0.3s;
	width:100%;
	border:none;
	height:auto;}
	
#contact #h201 .btn input:hover{opacity: 0.5 ;}

.sizeSmall input{width:20%;}

#contact #mfp_overlay{
	width:100%;}

#contact #mfp_overlay_inner{
	padding:40px;
	margin: 0 auto;}

#mfp_overlay_inner h4{
	font-size:140%;
	padding:40px;}

table#mfp_confirm_table tr th,
table#mfp_confirm_table tr td{
	padding:20px !important;
	border-top:1px dotted #ccc !important;}

div.mfp_buttons button{
    display:block;
    padding: 20px;
    color: #fff;
    background-color: #FF7F00;
    font-size: 140%;
    text-decoration: none;
    transition: 0.3s;
    border: none;
    height: auto;
	width:43%;
	float:left;
	margin:20px;}

div.mfp_buttons button:hover{opacity: 0.5 ;}
	
div.mfp_buttons button#mfp_button_cancel{
    background-color: #ccc;}
	
div.mfp_buttons:before,
div.mfp_buttons:after{content:"";display:table;}
div.mfp_buttons:after{clear:both;}
	
/******************thanks******************/

#thanks #main{
	width:1020px;
	margin:0 auto 80px;}

#thanks section .btn{
	margin: 80px auto;}

#thanks section .btn a{
	background-color:#FF7F00;}
	
/******************個人情報保護******************/

#discPage #main section h2{
	font-size:140%;
	background-color:#E5F6FD;
	text-align:left;
	padding:10px 20px;}

#discPage #main section p{
	margin-bottom:40px;}

#discPage #main section ul{
	margin-bottom:40px;
	margin-left:20px;}

#discPage #main section ul li{
	margin-bottom:20px;
	list-style-type:square;}
	
/******************サイトマップ******************/

#sitemap #main{
    max-width: 1020px;
}
#sitemap #main section{
	margin-bottom:80px;}

#sitemap #main section ul li{
	width:100%;
	border-bottom:1px dotted #00ABEB;}

#sitemap #main section ul li:first-child{
	border-top:1px dotted #00ABEB;}

#sitemap #main section ul li a{
	display:block;
	widows:100%;
	height:100%;
	padding:20px;}

/******************会社概要******************/

#company #main{
	width:1020px;}

#company #main #googleMap{
	margin-bottom:80px}

/*********************** BLOG LIST ***********************/

.post_list{
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    background-color: #fff;
    transition: 0.3s;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.post_list:hover{
    opacity: 0.7;}

.post_list .subtitle {
    margin-bottom:20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.post_list .subtitle h2{
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
    width: 100%;
}

.post_list p.spcen{
    width: 220px;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;}

.post_list p.spcen a img{
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.post_list .desc_area{
    width: 467px;
    margin: 0 20px 0 0;}

.post_list a.read_more{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -99999px;
}

.tumb_l a img{
    border-radius: 50%;
}

.side-head{
    padding: 10px 0;
    text-align: center;
    background-color: #D9F2FC;
    margin-bottom: 20px;
    border-radius: 10px;
}

.rarti{
    padding-bottom: 20px;
    border-bottom: 1px dotted #00ABEB;
    margin-bottom: 20px;
}

/*********************** BLOG DETAIL ***********************/