@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
/*300 Light / 400 Regular / 500 Medium*/

@font-face {
	font-family:'DINPro-Light';
	src: url("../../fonts/DINPro-Light.eot");
	src: url("../../fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"), 
	url('../../fonts/DINPro-Light.woff2') format('woff2'),
	url('../../fonts/DINPro-Light.woff') format('woff'),
	url('../../fonts/DINPro-Light.ttf') format('truetype'),
	url('../../fonts/DINPro-Light.svg#DINPro-Light') format('svg');
}

@font-face {
	font-family:'DINPro-Regular';
	src:url('../../fonts/DINPro-Regular.eot');
	src:url('../../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Regular.woff2') format('woff2'),
	url('../../fonts/DINPro-Regular.woff') format('woff'),
	url('../../fonts/DINPro-Regular.ttf') format('truetype'),
	url('../../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}

@font-face {
	font-family:'DINPro-Medium';
	src:url('../../fonts/DINPro-Medium.eot');
	src:url('../../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Medium.woff2') format('woff2'),
	url('../../fonts/DINPro-Medium.woff') format('woff'),
	url('../../fonts/DINPro-Medium.ttf') format('truetype'),
	url('../../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}

@font-face {
	font-family:'DINPro-Bold';
	src:url('../../fonts/DINPro-Bold.eot');
	src:url('../../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Bold.woff2') format('woff2'),
	url('../../fonts/DINPro-Bold.woff') format('woff'),
	url('../../fonts/DINPro-Bold.ttf') format('truetype'),
	url('../../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}






.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}






/* ---------- RESET ---------- */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
a.nohover:hover {
  opacity: 1.0;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}




* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}


html,body{
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
	color:#000;
	font-weight:400;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
    line-height: 1.7;
}












/* --------------------- LOADING ------------------------ */
#loader-bg{
	display:block;
	position:fixed;
	width:100%;
	height:100vh;
	min-height:100vh;
	top:0px;
	left:0px;
	background:#FFF;
	z-index:1000;
	overflow:hidden;
}


/* ---------------------------------------------------------- */







/* standard */
.fadeIn,
.fadeIn.delighter{
    -webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
    position: relative;
    top: 50px;
	-webkit-transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);	
	   -moz-transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* start */
.fadeIn.delighter.started{
    -webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	opacity:1;
    top: 0;
}
/* end */
.fadeIn.delighter.ended{
}





/* ---------------------------------------------------------------------------- */


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    min-height:100%;
    top:0px;
    left:0px;
    background:#FFF;
    z-index:1000;
    overflow:hidden;

}


.pcOnly{display: block;}
.spOnly{display: none;}


/* ---------------------------------------------------------------------------- */


html,body{
    height: 100%;
    background: #FFF;
	color: #000;
}





.ocean{
	width: 100%;
	position: relative;
	z-index: 1;
}
#ocean.fixed{
	position: fixed;
}

.mountain{
	width: 100%;
	position: relative;
	z-index: 2;
	pointer-events: none;
}



.ocean .oceanHeader{
	width: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("../images/ocean_bktop.jpg");
	padding-bottom: 12%;
}
.mountain .mountainHeader{
	width: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("../images/mountain_bktop.jpg");
	padding-bottom: 12%;
	pointer-events: auto;
}







.contentsHeader{
	width: 100%;
	padding-top: 10%;
}
.contentsHeader  h1{
	width: 80%;
	margin: 0 auto;
}
.contentsHeader h2{
	font-family:'DINPro-Medium';
	font-size: 2.5vw;
	text-align: center;
	letter-spacing: 0.05em;
	margin: 12% 0 9%;
}
.contentsHeader p{
	width: 65%;
	margin: 0 auto;
	font-size: 1.3vw;
	letter-spacing: 0.05em;
	line-height: 2.0;
}



/*-----------------------------------*/


.categoryHeader{
	width: 100%;
	padding-top: 22%;
}
.categoryHeader .icon{
	width: 2%;
	margin: 0 auto;	
}
.categoryHeader h2{
	font-family:'DINPro-Bold';
	font-size: 5.0vw;
	text-align: center;
	letter-spacing: 0.15em;
	line-height: 1.4;
	margin: 8% 0 6%;
}
.categoryHeader p{
	width: 60%;
	margin: 0 auto;
	font-size: 1.3vw;
	letter-spacing: 0.05em;
	line-height: 2.0;
}

/*-----------------------------------*/



.categoryBody{
	width: 100%;
	overflow:hidden;
	pointer-events: auto;
}
.categoryBody.oceanBK{
	background: -webkit-linear-gradient(#d9c1b4 30%, #d9c1b4 30%, #c6d9dd 50%);
	background: -o-linear-gradient(#d9c1b4 30%, #d9c1b4 30%, #c6d9dd 50%);
	background: linear-gradient(#d9c1b4 30%, #d9c1b4 30%, #c6d9dd 50%);
}
.categoryBody.mountainBK{
	background: -webkit-linear-gradient(#0e2c35 30%, #0e2c35 30%, #000000 50%);
	background: -o-linear-gradient(#0e2c35 30%, #0e2c35 30%, #000000 50%);
	background: linear-gradient(#0e2c35 30%, #0e2c35 30%, #000000 50%);
	color: #FFF;
}


.categoryBody.oceanBK .bottomBKimage{
	width: 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("../images/ocean_bkbottom.jpg");
	overflow:hidden;
	padding:0 0 40%;
	position: relative;
}
.categoryBody.mountainBK .bottomBKimage{
	width: 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("../images/mountain_bkbottom.jpg");
	overflow:hidden;
	padding:0 0 90%;
	position: relative;
}

.categoryBody .inner{
	width: 88%;
	margin: 0 auto;	

}

/*-----------------------------------*/




.categoryBody .fullWideBlock{
	width: 100%;
	position: relative;
	margin-top: 9%;
	padding-top: 10%;
}
.categoryBody .fullWideBlock h3{
	font-family:'DINPro-Bold';
	font-size: 3.7vw;
	text-align: left;
	letter-spacing: 0.05em;
	line-height: 0.9;
	position: absolute;
	top: 0;
}
.categoryBody .fullWideBlock h3 span{
	display: block;
	font-size: 2.6vw;
	margin-top: 0.5em;
}

.categoryBody .fullWideBlock.sailing h3{left: 60%;}
.categoryBody .fullWideBlock.marineResort h3{left: 4%;}
.categoryBody .fullWideBlock.training h3{left: 60%;}

.categoryBody .fullWideBlock.angler h3{left: 4%;width:36%;text-align:right;}
.categoryBody .fullWideBlock.sportswear h3{left: 60%;}
.categoryBody .fullWideBlock.camp h3{left: 4%;width:36%;text-align:right;}
.categoryBody .fullWideBlock.trekking h3{left: 60%;}


.categoryBody  .horizoImage{width: 57%;}
.categoryBody  .horizoImage.left{float: left;}
.categoryBody  .horizoImage.right{float: right;}
.categoryBody  .horizoImage.center{margin: 7% auto;}

.categoryBody  .vertiImage{width: 36%;margin-top: 19%;}
.categoryBody  .vertiImage.left{float: left;margin-left: 4%;}
.categoryBody  .vertiImage.leftright{float: left;margin-left: 21%;}
.categoryBody  .vertiImage.right{float: right;margin-right: 4%;}
.categoryBody  .vertiImage.rightleft{float: right;margin-right: 21%;}

.categoryBody  .vertiImage.narrow{margin-top:0;}


.categoryBody .camp01,
.categoryBody .camp02{
	position: relative;
}

/* ---------------------------------------------------------------------------- */

.categoryBody .itemList{
	position: absolute;
	display: inline-block;
	font-size: 1.0vw;
	line-height: 1.2;
	z-index: 150;
}
.mountain .categoryBody .itemList.relative{
	position:relative;
}


.categoryBody .sailing .itemList{bottom:0;right:43%;}
.categoryBody .marineResort .itemList{bottom:0;left:43%;}
.categoryBody .training .itemList{bottom:0;right:43%;}

.categoryBody .camp01,.categoryBody .camp02{position: relative;}
.categoryBody .camp01 .itemList{bottom:0;left:43%;}
.categoryBody .camp02 .itemList{bottom:0;left:21.5%;}


.categoryBody .itemList h4{font-family:'DINPro-Bold';margin-top: 2em;}
.mountain .categoryBody .itemList h4.top{margin-top: 2em;}
.categoryBody .itemList p{margin-top: 0.3em;}
.categoryBody .itemList p .spec{margin-right: 0.3em;font-family:'DINPro-Regular';}
.categoryBody .itemList p .buy{font-family:'DINPro-Bold';}
.categoryBody .itemList p .buy a{display:inline-block;width: 2.2em;line-height: 1;}

.categoryBody .itemList p .plan{ font-size: 0.9vw;}





/*-----------------------------------------*/

.videoBox{
    width:100%;
    overflow:hidden;
    position:relative;
	line-height: 1;
	font-size: 0;

}

.videoBox video{
	width: 100%;
}



/*-----------------------------------------*/

footer{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5vw;
	margin: 0 auto;
	text-align: center;
}

footer h2{
	width: 8%;
	margin: 0 auto;
}

footer ul{
	text-align: center;
	font-size: 0;
	width: 16%;
	margin: 4% auto 0;
}
footer ul li{
	width: 33.33333%;
	padding: 0 7%;
	display: inline-block;
}

footer .copyright{
    font-family:'DINPro-Regular';
    font-size: 1.0vw;
    margin-top: 7%;
}


.iconInstagram{
	position: fixed;
	top: 2.0vw;
	right: 2.0vw;
	width: 2.7vw;
	z-index: 50;
}









@media (min-width: 769px) {
.categoryBody .itemList a:hover{
	-webkit-opacity:0.6;
	-moz-opacity:0.6;
	-ms-opacity:0.6;
	opacity:0.6;
}
footer ul li a:hover{
	-webkit-opacity:0.6;
	-moz-opacity:0.6;
	-ms-opacity:0.6;
	opacity:0.6;
}
.iconInstagram a:hover{
	-webkit-opacity:0.6;
	-moz-opacity:0.6;
	-ms-opacity:0.6;
	opacity:0.6;
}
}





@media (max-width: 800px) {
.contentsHeader h2{font-size: 3.0vw;margin: 12% 0 8%;}
.contentsHeader p{width: 80%;font-size: 1.6vw;}

.categoryHeader{padding-top: 20%;}
.categoryHeader h2{font-size: 5.5vw;}
.categoryHeader p{width: 75%;font-size: 1.6vw;}


.categoryBody .inner{width: 92%;}
.categoryBody .itemList{font-size: 1.3vw;}
.categoryBody .camp02 .itemList{left:15%;}



.iconInstagram{top: 2.0vw;right: 2.0vw;width: 3.5vw;}



}




@media (max-width: 760px) {
.wide{display: none;}
.pcOnly{display: none;}
.spOnly{display: block;}


.categoryBody.oceanBK{
	background: -webkit-linear-gradient(#d9c1b4 50%, #d9c1b4 50%, #c6d9dd 70%);
	background: -o-linear-gradient(#d9c1b4 50%, #d9c1b4 50%, #c6d9dd 70%);
	background: linear-gradient(#d9c1b4 50%, #d9c1b4 50%, #c6d9dd 70%);
}
.ocean .oceanHeader{
	background-image: url("../images/ocean_bktop_sp.jpg");
	padding-bottom: 40%;
}
.mountain .mountainHeader{
	background-image: url("../images/mountain_bktop_sp.jpg");
	padding-bottom: 50%;
}

/*-------------------------------*/

.contentsHeader{padding-top: 40%;}
.contentsHeader  h1{width: 92%;}
.contentsHeader h2{font-size: 4.2vw;margin: 50% 0 6%;}
.contentsHeader p{width: 80%;font-size: 2.5vw;}

/*-------------------------------*/

.categoryHeader{padding-top: 40%;}
.categoryHeader .icon{width: 4%;}
.categoryHeader h2{font-size: 9.0vw;margin: 8% 0 6%;}
.categoryHeader p{width: 80%;font-size: 2.5vw;}

/*-------------------------------*/

.categoryBody.oceanBK .bottomBKimage{
	background-image: url("../images/ocean_bkbottom_sp.jpg");
	padding-bottom:110%;
}
.categoryBody.mountainBK .bottomBKimage{
	background-image: url("../images/mountain_bkbottom_sp.jpg");
	padding-bottom:160%;
}
.categoryBody .inner{width: 100%;}

/*-------------------------------*/

.categoryBody .fullWideBlock{
	margin-top: 20%;
	padding-top: 20%;
}

.categoryBody .fullWideBlock h3{
	font-size: 6.5vw;
	text-align: center;
	position:relative;
	margin-bottom: 20%;
}
.categoryBody .fullWideBlock h3 span{font-size: 4.7vw;}

.categoryBody .fullWideBlock.sailing h3{left: 0;}
.categoryBody .fullWideBlock.marineResort h3{left:0;}
.categoryBody .fullWideBlock.training h3{left:0;}
.categoryBody .fullWideBlock.angler h3{left:0;width:100%;text-align:center;}
.categoryBody .fullWideBlock.sportswear h3{left:0;}
.categoryBody .fullWideBlock.camp h3{left:0;width:100%;text-align:center;}
.categoryBody .fullWideBlock.trekking h3{left:0;}


.categoryBody  .horizoImage{width: 100%;}
.categoryBody  .horizoImage.left{float: none;}
.categoryBody  .horizoImage.right{float: none;}
.categoryBody  .horizoImage.center{margin: 20% auto 0;}

.categoryBody  .vertiImage{width: 80%;margin: 20% auto 0;}
.categoryBody  .vertiImage.narrow{margin-top:20%;}

.categoryBody  .vertiImage.left{float:none;margin-left:auto;}
.categoryBody  .vertiImage.leftright{float:none;margin-left:auto;}
.categoryBody  .vertiImage.right{float: none;margin-right:auto;}
.categoryBody  .vertiImage.rightleft{float: none;margin-right: auto;}

.categoryBody .angler  .vertiImage.left{margin-left: 4%;}
.categoryBody .angler  .vertiImage.rightleft{margin-left:16%;}

.categoryBody .sportswear  .vertiImage.right{margin-left: 4%;}
.categoryBody .sportswear  .vertiImage.leftright{margin-left: 16%;}

.categoryBody .camp .camp01 .vertiImage.left{margin-left: 4%;}
.categoryBody .camp .camp02 .vertiImage.right{margin-left: 16%;}

.categoryBody .trekking  .vertiImage.right{margin-left: 4%;}
.categoryBody .trekking  .vertiImage.leftright{margin-left: 16%;}


/*-------------------------------*/

.categoryBody .itemList{
	position:relative;
	font-size: 2.5vw;
	line-height: 1.2;
	width: 80%;
	margin: 0 auto;
	display: block;
}
.categoryBody .vertiImage .itemList{width: 100%;}

.categoryBody .sailing .itemList{bottom:0;right:0;}
.categoryBody .marineResort .itemList{bottom:0;left:0;}
.categoryBody .training .itemList{bottom:0;right:0;}


.categoryBody .camp01,.categoryBody .camp02{position: relative;}
.categoryBody .camp01 .itemList{bottom:0;left:0;margin-left: 4%;}
.categoryBody .camp02 .itemList{bottom:0;left:0;margin-left: 16%;}



.categoryBody .itemList h4{margin-top: 3em;}
.mountain .categoryBody .itemList h4.top{margin-top: 3em;}
.categoryBody .itemList p{margin-top: 0.5em;}

.categoryBody .itemList p .plan{ font-size: 2.3vw;}


footer{bottom: 12vw;}
footer h2{width: 14%;}
footer ul{width: 29%;margin-top: 6%;}
footer .copyright{font-size: 2.0vw;margin-top: 9%;}


.iconInstagram{top: 2.0vw;right:2.0vw;width: 5.5vw;}

}



@media (max-width: 450px) {


.ocean .oceanHeader{padding-bottom: 38%;}

.contentsHeader{padding-top: 36%;}
.contentsHeader h2{font-size: 4.8vw;margin: 46% 0 6%;}
.contentsHeader p{width: 82%;font-size: 2.9vw;}

/*-------------------------------*/

.categoryHeader{padding-top: 36%;}
.categoryHeader p{width: 82%;font-size: 2.9vw;}

/*-------------------------------*/


.categoryBody .fullWideBlock h3{font-size: 7.0vw;}
.categoryBody .fullWideBlock h3 span{font-size: 5.0vw;}

.categoryBody  .vertiImage{width: 84%;}

.categoryBody .angler  .vertiImage.rightleft{margin-left:12%;}
.categoryBody .sportswear  .vertiImage.leftright{margin-left: 12%;}
.categoryBody .camp .camp02 .vertiImage.right{margin-left: 12%;}
.categoryBody .trekking  .vertiImage.leftright{margin-left: 12%;}



/*-------------------------------*/

.categoryBody .itemList{font-size: 3.0vw;width: 84%;}

.categoryBody .itemList h4{margin-top: 2.5em;}
.mountain .categoryBody .itemList h4.top{margin-top: 2.5em;}

.categoryBody .camp02 .itemList{margin-left: 12%;}

/*-------------------------------*/

footer h2{width: 17%;}
footer ul{width: 32%;margin-top: 7%;}
footer .copyright{font-size: 2.2vw;margin-top: 10%;}

.iconInstagram{top:3vw;right:3vw;width: 6.5vw;}

}