@charset "UTF-8";

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

body{
	-webkit-text-size-adjust: 100%;
	max-height: 100%;
}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,input,textarea,p,blockquote,table,th,td,address{
	font-size:22px;}

h2{font-size:140%;}

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

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

#wrapper{
min-width:640px;
padding:0;
overflow:hidden}

table th,
table td{
	display:block;
	width:560px;
	padding:40px 0;}

table th{
	border-bottom:none;}

table td{
	border-top:none;
	padding-top:0;}

table td input,
textarea{
	width:100%;
	border:1px solid #ccc;}

.btn{
	width:560px;}


/****************head****************/

#head{
	width:640px!important}

#head #inner{
	position:relative;
	width:640px;
	height:140px;}

#head #linkArea{display:none;}

#head #linkArea{width:640px;}

#head #inner #navArea{
	background-color:#00ABEB;
	position:absolute;
	top:140px;
	left:0;
	width:640px;
	height:20000px;
	margin:0;}

#head #navArea ul#gnav li{
	height:auto;
	color:#fff;
	text-align:left;
	padding:20px 40px;
	border-bottom:1px solid #fff;
	float:none;
	margin:0}

#head #navArea ul#gnav li a{
	color:#fff;
	display:block;
	width:100%;
	height:100%;}

#head #navArea ul#gnav li span{
	text-indent:0;
	width:100% !important;
	height:100% !important;
	margin-bottom:20px;
	padding-left:40px;}
	
#head #navArea ul#gnav li span a{
	display:block;
	width:100%;
	height:100%;
	background:none !important;
	text-indent:0px;}

#head #navArea ul#gnav li .navChild{
	position:static;
	background:none;
	text-align:left;}

#head #navArea ul#gnav li .navChild .inner ul{
	background-color:#fff;
	padding:0;}

#head #navArea ul#gnav li .navChild .inner ul li{
	background:none;
	border-bottom:1px dotted #00ABEB;
	padding-left:80px;}

#head #navArea ul#gnav li .navChild .inner ul li a{color:#00ABEB;}

#head #inner #headLogo{
	position:absolute;
	background:url(../img/common/logo.png) left top no-repeat;
	background-size:300px 61px;
	width:300px;
	height:61px;
	top:60px;
	left:20px;}

#head #telBtn{
	right:180px;
	top:20px;
	width:70px;
	height:70px;
	background:url(../img/common/640/telIcon.jpg) 50% 50% no-repeat #0D1D7B;
	text-indent:-99999px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);}

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

#head #entryBtn{
	right:90px;
	width:70px;
	font-size:38%}
	
#head #entryBtn a{
	height:100%;
	padding:26px 0;}

.menuBtn,
.menuBtn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;}
  
.menuBtn {
  position:absolute;
  top:73px;
  right:140px;
  width: 50px;
  height: 44px;
}
.menuBtn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #00ABEB;
  border-radius: 4px;
}
.menuBtn span:nth-of-type(1) {
  top: 0;
}
.menuBtn span:nth-of-type(2) {
  top: 20px;
}
.menuBtn span:nth-of-type(3) {
  bottom: 0;
}
.menuBtn.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
.menuBtn.active span:nth-of-type(2) {
  opacity: 0;
}
.menuBtn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-20px) rotate(45deg);
}

#head p#kyach{
	width:640px;
	text-align:center;}

#head p#headContact{display:none;}


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

#head #headContactMob{
	margin:0;
	width:640px;
    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: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;}
	
#head p.openTime{
	width:640px;
	padding: 20px 0;
	color:#fff;
	text-align:center;} 

#head #headContactMob a#mobCont,
#head #headContactMob a#mailCont,
#head #headContactMob a#telCont{
	display:block;
	padding:0;
	width:315px;
	height:100px;
	margin:0;
	border:1px #fff solid;
	text-align:left;
	text-indent:-9999px;}
	
#head #headContactMob a#mailCont{
	background:url(../img/common/640/mailIcon.png) 50% 50% no-repeat;}
#head #headContactMob a#telCont{
	background:url(../img/common/640/telIcon.png) 50% 50% no-repeat;}
#head #headContactMob a#mobCont{
	background:url(../img/common/640/mobIcon.png) 50% 50% no-repeat;}

/****************foot****************/
#pageTop{
	bottom:130px}

#contactBtn{
	position: fixed;
	left:0;
	bottom:0;
	display: flex;
	z-index: 2;}
	
#contactBtn p.btn{
	width:213px;
	border-radius:0;
	height: inherit;}
	
#contactBtn p.btn:last-child{
	width:214px;}

#contactBtn p.btn:last-child > a{
	background-color:#FFF000;}
#contactBtn p.btn a{
     border-radius:0;}


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

#bannerArea .h2cont{
	width:640px;}

#bannerArea h2{
	font-size:130%;
	padding:0 40px;}

#bannerArea .h2cont p,
#bannerArea .h2cont p:last-child{
	width:558px;
	margin:0 40px 40px;}

#bannerArea .h2cont p:last-child{
	margin-bottom:0;}
    
    #foot .inner .corpInfo{
        display: block;
        width: 100vw;
        padding: 0;
        margin:0 0 8vw;}
    
    #foot .inner .corpInfo .leftArea{
        text-align: center;
        margin-bottom: 40px;
    }
    #foot .inner .corpInfo #afetyBanner{
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    #foot .inner .corpInfo #afetyBanner img{
        width: 68vw;
        height: auto;
        margin: 4vw 16vw;}
    
	
#foot .inner p{
	float:none;
	margin: 0 auto 40px;}

#foot .inner ul{
	width:100%;}
	
#foot .inner ul li{
	float:none;
	padding:20px 40px;
	margin:0;
	text-align:left;
	border:none;
	border-bottom:1px dotted #fff;}

#foot .inner ul li a{
	display:block;
	width:100%;
	height:100%;}

#foot .inner #linkArea,
#foot .inner ul li{
	width:640px;}

#foot .inner ul{
	border-top:1px dotted #fff;}

#foot .inner #linkArea h3{
	text-align:center;
	margin: 0 auto 40px;}
    
    #foot .inner #linkArea ul,
    #foot .inner #linkArea ul li{
        width: 100%;
    }

#foot .inner .facebookArea{
	margin:0 auto 40px;}

	

/****************main****************/

h1{
	font-size:200%;
	padding: 0 0 40px;}

#h1Area{
	padding-bottom:100px;}
	
#main{
margin:0;
width:560px}

#index #main{
padding:0;
width:640px}

#main h3{font-size:161%;}

h2{margin-bottom:60px}

h2 span{
	font-size:140%;}

h2.w100H2{
    background: url(../img/common/640/w100H2Bg.png) 50% top no-repeat;
    padding: 4vw 0 10vw;
    margin-bottom: 4vw;}

#topics ul{
	width:640px;
	padding: 20px 30px;}
	
#topics ul li:nth-last-child(2){background:none;}

#topics ul li:last-Child{display:none;}

#h1Area .cont,
.inner{width:640px;}


/***********************index***********************/
	
#vaslider{
	position:relative;
	height:calc(100vh - 130px );
    min-height: 890px;
    }

#videoArea{
	display:none;}

.smahoSlider{
	display:block;}

.smahoSlider h1{
	position:absolute;
	left:0;
	bottom: 0;
	z-index:100;
	color:#fff;
	width:560px;
	padding:40px;}
    #index .flexslider ul.slides{
	height:calc(100vh - 130px );
    }
#vaslider .flexslider{
	width:640px;
	height:calc(100vh - 130px );
	z-index:0;}


ul.flex-direction-nav{
	display:none;}

.slides, .flex-control-nav, #carousel .flex-direction-nav{
	width:640px;}

.flexslider .slides > li{
	width:640px !important;
	overflow:hidden;}
.flexslider .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;}

section#access .cont dl{
	width:640px;}

section#access .cont dl dt,
section#access .cont dl dd{
	display:block;
	text-align:center;}

section#access .cont dl dt{
	width:560px;
	margin: 0 auto 20px;}
    
section#access .inner{
    width: 92vw;
    padding: 0 4vw;
    }
    section#access .inner dl{
        width: 92vw;
    }
section#access .inner dl dt{
    width: 100%;
    margin: 0 0 4vw;
    box-sizing: border-box;
    }

#index #blog .inner .blogItem{
	width:560px;
	margin: 0 auto 40px;}

#index #blog .inner{
	width:640px;}

#index #blog .inner .blogItem dl{
	width:360px;}
    
#index #insta .inner ul{
    margin: 0 40px 0;
}
#index #insta .inner ul li{
    width: 275px;
    height: 275px;}

    .comBanner a img{
        width: 100%;
        height: auto;
    }
    
    
/*************　マリンアイランドとは　*************/

    #index .aboutArea .inner{
        flex-wrap: wrap;
    }
    #index .aboutArea .inner figure{
        width: 100%;
        margin-bottom: 4vw;
    }
    #index .aboutArea .inner figure img{
        width: 32.666vw;
        height: 20.19vw;
    }
    #index .aboutArea .inner figure img:last-child{
        margin-right: 0;
    }
    #index .aboutArea .inner .detail{
        width: 100%;
        padding: 0 8vw;
    }
    #index .aboutArea .inner .detail h2,
    #index .aboutArea .inner .detail p{
        width: 100%;
    }
    #index .aboutArea .inner .detail h2{
        font-size: 200%;
    }
    
/*************　パラーセリングまでの流れ　*************/

#index .flowArea .inner .flowList .flowCont{
    padding: 0 8vw;
    margin: 0 0 8vw;
    width: 100vw;
    box-sizing: border-box;
    background: url("../img/index/flow/nextAlor45.png") left 50% bottom 0 no-repeat;
}
    #index .flowArea .inner .flowList .flowCont:last-child{
        padding: 0 4vw;
    }
#index .flowArea .inner .flowList .flowCont .flowNum{
        width: 16vw;
        height: 16vw;
        font-size: 200%;
        margin-bottom: 4vw;
    }
#index .flowArea .inner .flowList .flowCont img{
    width: 84vw;
    height: 52vw;
    margin-bottom: 4vw;
}
#index .flowArea .inner .flowList .flowCont dl{
    padding-bottom: 8vw;
    margin-bottom: 4vw;
    width: 84vw;
}
#index .flowArea .inner .flowList .flowCont dl dt{
    font-size: 200%;
    margin-bottom: 4vw;
}
    
/*************　よくあるご質問　*************/
	
    #index .faqArea .inner{
        padding: 0 8vw 16vw;
    }
    #index .faqArea .inner dl{
        width: 84vw;
        padding: 0;
        border-bottom: none;
        margin: 0 ;
    }
    #index .faqArea .inner dl:last-child{
        margin-bottom: 8vw;
    }
    #index .faqArea .inner p.btn{
        width: 84vw;
        margin: 0;
        box-sizing: border-box;
    }
/**************** 選ばれる理由 ****************/

    #choice{
        background-size: cover;
    }
    #choice .inner{
        padding: 8vw 4vw 16vw;
        width: 100vw;
    }
    #choice .inner item{
        width: 29vw;
        margin-bottom: 10vw;
        padding: 4vw 2vw;
    }
    #choice .inner item:nth-child(4),
    #choice .inner item:nth-child(5),
    #choice .inner item:nth-child(6){
        margin-bottom: 0;
    }
    #choice .inner item p.num{
        margin: -70px auto 0;
        font-size: 259%;
        
    }
    #choice .inner item h3{
        font-size: 83%;
        font-weight: bold;
    }
    
/**************** recruit ****************/
    
    section#recruit figure,
    section#recruit figure img{
        width: 100%;
        height: auto;
    }
    section#recruit .inner .detail{
        width: 100%;
        
    }
/****************courseList ****************/

section#parasailing .inner,
.courseList .inner{
	width:640px;
	flex-direction: column;
  align-items: center;
  justify-content: center;}

.courseList .inner .courseItem{
	width:560px;
	margin-bottom:40px;
	padding-bottom: 40px;
    background: url(../img/course/common/640/moreBg.jpg) 50% bottom no-repeat #fff;
    margin-right: 0;}

.courseList .inner .courseItem p.kyachIcon,
.courseList .inner .courseItem p.kyachIcon3{
    top: 180px;
    min-width: 160px;
    min-height: 160px;
	background:url(../img/course/common/640/kyachIconBg.png) 50% 50% no-repeat;
    padding: 50px 34px;
    }
    .courseList .inner .courseItem p.kyachIcon3{
    padding: 50px 34px;
	background:url(../img/course/common/640/kyachIconSPBg.png) 50% 50% no-repeat;    
    }

.courseList .inner .courseItem:nth-child(3) > p.kyachIcon{
	background:url(../img/course/common/640/kyachIconSPBg.png) 50% 50% no-repeat;}
	
section#parasailing{
    background:url(../img/course/parasailing/common/640/sectionBg.jpg) 50% top repeat-x;}

#courseList section#parasailing{
	background:none;}

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

#course .cont{
    width: 640px;}

p.kyachIcon{
	background:url(../img/course/common/640/kyachIconBg.png) 50% 50% no-repeat;
    padding: 50px 34px;
    min-width: 160px;
    min-height: 160px;
    }
	

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


#course #main{
	padding:0;
	width:640px;
	}

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


#course #point .cont{
    width: 640px;
    flex-direction: column;
    align-items: center;
    justify-content: center;}
	
#course #point .cont .pointcont{
	width:560px;}

#course #point .cont .pointcont p.kyachIcon{
	top:160px;
	left:20px;}
	
#course #point .cont .pointcont .pointImg{
	text-align:center;}
	
#course #point .cont .pointcont .pointImg img{
	margin:0 auto 20px;}

#course #imgArea .cont{
	width:640px;}
	
#course #imgArea .cont h2.kyach,
#course #imgArea .cont p{
	width:560px;
	margin:0 auto 40px;}
	
	
#course #main .mainVisual,
#course #main .mainVisual .flex-viewport,
#course #main .mainVisual .flex-viewport ul li,
#course #main .mainVisual .flex-viewport ul li img{
	width:640px;
	height:320px;}

#course #main .mainVisual ol{
	display:none;}

#course #flow .flowCont{
	display:block;
     flex-direction: row;
    justify-content: center;
    align-items: center;
	width:560px;
	text-align:center;
	margin:0 auto 40px;
	background:url(../img/course/common/flowNextIcon.jpg) 50% bottom no-repeat}

#course #flow .flowCont .flowNum{
	width:40px;
     height:40px;
	 margin:0 auto 40px;
	text-align:center;
    padding: 50px;}

#course #flow .flowCont img{
	text-align:center;
	width:490px;
	margin: 0 0 40px;}

#course #flow .flowCont p{
	text-align:center;
	width:560px;}



table,
#course #main section#disc,
#course #main section#fee dl{
	width:560px;
	margin-bottom:40px;}

table tr th{
	background-color:#E5F6FD;
	padding:20px;
	width:520px}

table tr td{
	padding:20px;
	width:520px}

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

#course #main section#reserv p.btn{
	width:560px;
	margin:0 auto 40px}

#course #main section#fee .payArea{
    display:block;
}
#course #main #fee .cont dl{
	width:640px;}
	
table, #course #main section#disc,
#course #main section#fee dl{
	margin: 0 auto 40px;}

    #course #main section#fee .fishing{
        padding: 0 40px;
    }
#course #main section#fee .fishing dl{
    display:block;
}
#course #main section#fee .fishing dl dt,
    #course #main section#fee .fishing dl dd{
        width: 100%;
        box-sizing: border-box;
    }

/****************ACCESS****************/
	
#course .inner h2{
	text-align:center;}
	
#access #main{
	width:640px;
	padding:0;}

#access section#access h3{
	width:560px;
	margin:0 auto 80px;}

#access section#access ol li{
	margin: 0 40px 40px;
	width:560px;}


/****************SOCIAL****************/

#index #social .inner .leftArea,
#index #social .inner .rightArea{
	margin:0 40px 40px;
	width:560px;}

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

#faq #main{padding:0;}

#faq section ul.janpLink li{
	width:560px;
	margin:0 40px 40px;
	height:140px;} 
	
#faq section ul.janpLink li a{
    height: 120px;}
	
.faq dl{
	background:none;
	border-right:0;
	border-left:0;
	padding: 0 40px 0 40px;
}

.faq dl:last-child {
	border-right:0;
	border-left:0;
	border-bottom:solid 3px #B6BBD7;
}

.faq dl.open {
	background:none;}


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


#staff .staffDetail{
	width:560px;
	padding-bottom:40px;
	border-bottom:1px dotted #00ABEB;
	margin:0 40px 40px;}

#staff .staffDetail:last-child{
	padding-bottom:0;
	border-bottom:none;}

#staff .staffDetail img{
	margin: 0 50px 20px;
	width:460px;
	height:auto;}

/****************CONTACT****************/

#contact #main textarea{width:520px !important}

#contact #div.mfp_err{
	font-size:161%;}

/****************thanks****************/

#contact #main,
#thanks #main{
	width:560px;}

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

#company #main{
	width:640px;}

    #company figure.mapImg{
        width: 100%;
        margin-bottom: 16vw;
    }

    #company figure.mapImg img{
        width: 92vw;
    }
    
/******************bloglist******************/
    
    .post_list .subtitle h2{
        font-size: 140%;
    }
    .post_list p.spcen{
        width: 560px;
        padding: 0;
    }
    
.post_list p.spcen a img {
    width: 560px;
    height: 280px;
    margin-bottom: 40px;
}
    
.post_list .desc_area{
    width: 560px;
}
    
    
    
    
    
    
    
    
    
    
    
    
    
}