@charset "UTF-8";
/* CSS Document */




@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
400 Regular
500 Medium
*/

@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-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');
}


/* ---------- 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{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
	color:#000;
	font-weight:500;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
    line-height: 1.7;
}

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





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







/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 50px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-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 */
.fade.delighter.started{
	opacity:1;
    top: 0;
}




/* マスクで現れる */
.pointView{
	width:100%;
	box-sizing:border-box;
	position: relative;
	z-index:5;
	margin-top:0px;
}
.point-image{}
.point-image .point-image-motion{
	width:100%;
	height:100%;
	position:absolute;
	background-color:#D6E2E3;
	z-index:100;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	             transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.fiberpile .point-image .point-image-motion{background-color:#98AEBE; }



.point-image .BTinner { visibility: hidden; }
.point-image.mask-image .point-image-motion { width: 0; left: 0; }
.point-image.mask-image .BTinner { visibility: hidden; }
.point-image.show-image .point-image-motion {
	width: 0;
	right: 0;
	left:inherit;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	             transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.point-image.show-image .BTinner {visibility:visible;}


.pointView .BTinner.pcView{display: block;}
.pointView .BTinner.spView{display: none;}


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


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

}

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


/*要素ごとにフィックスさせるなら検討素材
#lead{
	position:-webkit-sticky; position:sticky;
}
#ocean{
position:-webkit-sticky; position:sticky;
}
#mountain{
	background: #954;
	position:-webkit-sticky; position:sticky;
	z-index: 6;
}
*/



.wrapper{
	height: 100%;
	width: 100%;
}

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



.header{
	width: 100%;
	height: 100%;
	background: url("../images/mainimage_pc.jpg") center center no-repeat;
	background-size: cover;


}

.header h1{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 55%;
	-webkit-transform:translateY(-50%);
	             transform:translateY(-50%);
}


.iconInstagram{
	position: fixed;
	top: 15px;
	right: 15px;
	width: 36px;
	z-index: 50;
}

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

.lead{
	width: 100%;
	padding: 180px 0 300px;
	background: url("../images/lead_bk_pc.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
}

.lead .leadInner{
	width: 550px;
	margin: 0 auto;
}
.lead h2{
	width: 450px;
	margin: 0 auto;
	
}
.lead .copy{
	width: 100%;
	margin-top: 60px;
	letter-spacing: 0.08em;
	line-height: 2.1;
}


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

.movBox{
	width: 100%;
	position: relative;
	z-index: 5;
}
.movBox video{
	width: 100%;
}
.movBox .volume{
	position: absolute;
	bottom:25px;
	right:20px;
	width: 50px;
	height: 50px;
	z-index: 50;
	background-size: cover;
	cursor: pointer;
	background: url("../images/volume_on.svg") center center;
}
.movBox .volume.on{
	background-image: url("../images/volume_off.svg");
}
.movBox .volume:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid #FFF;
	border-radius:50%;
}
/* ---------------------------------------------------------------------------- */


.ocean{
	width: 100%;
	position: relative;
	background: url("../images/ocean_bk_pc.jpg") top center no-repeat;
	background-size: cover;
	padding-bottom: 700px;
	z-index: 4;
}
.mountain{
	width: 100%;
	position: relative;
	padding-bottom: 700px;
	z-index: 6;
}
.mountain .bkImage{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: url("../images/ocean_bk_pc.jpg") top center no-repeat;
	background-size: cover;
	-webkit-transform: scale(1, -1);
	             transform: scale(1, -1);
}




.categoryHeader{
	width: 550px;
	margin: 0 auto;
	padding: 230px 0;
	position:relative;
	z-index: 6;
	/*background: rgba(0,0,0,0.1);*/
}
.categoryHeader h2{
	width: 450px;
	margin: 0 auto;
}
.categoryHeader .copy{
	width: 100%;
	margin-top: 70px;
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 2.1;
}


.main{
	width: 90%;
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	z-index: 7;
}

.main .unit{
	width: 100%;
	margin-top: 355px;
/*	background: rgba(0,0,0,0.1);*/
}
.main .unit.sailing{margin-top: 0;}
.main .unit.sportwear{margin-top: 0;}
.fiberpile .main .unit{margin-top: 0;}

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

.unit .subTitle{
	width: 100%;
	position: relative;
}
.unit .subTitle.leftImage .photo{width: 87.5%;}
.unit .subTitle.rightImage .photo{width: 87.5%;margin-left: 12.5%;}

.unit .subTitle .title_svg{
	position: absolute;
	width: 12.5%;
	top: 0;
	bottom: 0;
	opacity:0;
	-webkit-transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	             transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);     
}
.unit .subTitle.leftImage .title_svg{right: -30px;}
.unit .subTitle.leftImage.view .title_svg{right: 0;opacity:1;}
.unit .subTitle.rightImage .title_svg{left: -30px;}
.unit .subTitle.rightImage.view .title_svg{left: 0;opacity:1;}

.unit .subTitle .title_svg h3{
	width: 56%;
	position: absolute;
	bottom: 0;
}
.unit.sailing .subTitle .title_svg h3{left: 0;}
.unit.training .subTitle .title_svg h3{left: 0;}
.unit.angler .subTitle .title_svg h3{right: 0;}

.unit.sportwear .subTitle .title_svg h3{left: 0;}
.unit.camp .subTitle .title_svg h3{right: 0;width: 86.52%;}
.unit.trekking .subTitle .title_svg h3{left: 0;width: 86.52%;}



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

.unit .itemBox{
	width: 100%;
	position:relative;
	margin-top: 100px;
	z-index: 10;
}
.fiberpile .unit .itemBox{margin-top:200px;}
.fiberpile .unit .itemBox.farst{margin-top: 0;}

.unit .itemBox.rightImage .photo{
	width: 49.5%;
	margin-left: 50.5%;
}
.unit .itemBox.leftImage .photo{
	width: 49.5%;
}
.unit .itemBox.centerImage .photo{
	width: 60%;
	margin: 0 auto;
}



.rightImage .itemList{
	position: absolute;
	top: 50%;
	left: 0;
	width: 48%;
	z-index: 20;
	-webkit-transform:translateY(-50%);
	             transform:translateY(-50%);	
}
.leftImage .itemList{
	position: absolute;
	top: 50%;
	max-width: 48%;
	right: 0;
	z-index: 20;
	-webkit-transform:translateY(-50%);
	             transform:translateY(-50%);	
}
.centerImage .itemList{
	position:relative;
	width: 50%;
	margin: 50px auto 0;
	z-index: 20;
}



.itemList h4{
	font-family:'DINPro-Bold';
	margin-top: 2em;
	font-size: 13px;
}
.itemList h4.top{margin: 0;}


.itemList p{
	margin-top: 0.6em;
	font-family:'DINPro-Regular';
	line-height: 1.3;
	font-size: 13px;
}
.itemList p a{color: #000;}
.fiberpile .itemList p a{color: #FFF;}
.itemList p a.noLink{pointer-events: none;}

.itemList p .spec{margin-right: 0.3em;position: relative;}
.itemList p .buy{
	display:inline-block;
	width: 2.2em;
	line-height: 1;
	-webkit-transition: all 0.2s;
	             transition: all 0.2s;
}

.itemList p .date{ font-size: 12px;font-family: 'Noto Sans JP', sans-serif;font-weight: 400;}

@media(min-width: 769px) {
	.itemList p a:hover .spec{text-decoration: underline;}
	.itemList p a:hover .buy{opacity: 0.6;}
	
}



.pcPlusImage{
	display: block;
	margin-top: 100px;
	width: 87.5%;
	margin-left: 12.5%;
}

.spPlusImage{display: none;}

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

.fiberpile{
	width: 100%;
	position: relative;
	z-index: 12;
	color: #FFF;
}
.fiberpile .fiberImage{
	background: url("../images/fiberpile_main_pc.jpg") center center no-repeat;
	background-size: cover;
	width: 100%;
	padding-top: 57%;
}
.fiberpile .fiberInner{
	background: url("../images/lead_bk_pc.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}
.fiberpile .fiberInner .gradation{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	background: -webkit-linear-gradient(top, #A8BAC6,  #0A1D32 80%, #03162C);
	background: linear-gradient(to bottom, #A8BAC6,  #0A1D32 80%, #03162C);
}


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



.footer{
	width: 100%;
	margin-top: 300px;
	padding-top: 300px;
	padding-bottom: 180px;
	position: relative;
	z-index: 10;
}
.footer .hhLogo{
	width: 145px;
	margin: 0 auto;
}
.footer .sns{
	width: 90%;
	margin: 50px auto 160px;
}
.footer .sns ul{
	font-size: 0;
	text-align: center;
}
.footer .sns ul li{
	width: 50px;
	margin: 0 20px;
	display: inline-block;
}
.footer .copyright{
	font-family:'DINPro-Regular';
	line-height: 1.3;
	font-size: 13px;
	text-align: center;
}


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

.appBanner{
	position:fixed;
    bottom:10px;
	left: -200px;
	width:190px;
	z-index:200;
	-webkit-transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	   -moz-transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	    -ms-transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	        transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.appBanner.view{
	left:10px;
}
.appBanner a{
	width: 100%;
	display: block;
	background: rgba(255,255,255,0.6);
	-webkit-border-radius:8px;
	    -moz-border-radius:8px;
		  -ms-border-radius:8px;
		          border-radius:8px;
}
@media(min-width: 769px) {
.appBanner a:hover{background: rgba(255,255,255,1);}
}



.ptSide{
	position:fixed;
    bottom:10px;
	right:-35px;
	width:28px;
	z-index:200;
	cursor: pointer;
	-webkit-opacity:0.5;
	-moz-opacity:0.5;
	-ms-opacity:0.5;
	opacity:0.5;
	-webkit-transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	   -moz-transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	    -ms-transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	        transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.ptSide.view{
	right:10px;
}

@media(min-width: 769px) {
.ptSide:hover{
	-webkit-opacity:0.8;
	-moz-opacity:0.8;
	-ms-opacity:0.8;
	opacity:0.8;
}
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




@media(max-width: 1000px) {


.header h1{width: 60%;}

.itemList h4{font-size: 12px;}
.itemList p{font-size: 12px;}

.ocean{padding-bottom:500px;}
.mountain{padding-bottom: 500px;}

.footer{margin-top: 250px;padding-top: 250px;padding-bottom: 150px;}

.footer .hhLogo{width: 125px;}
.footer .sns{margin: 50px auto 130px;}
.footer .sns ul li{width: 40px;}


}



@media(max-width: 900px) {

.header h1{width: 65%;}
.lead{padding: 150px 0 250px;}

.categoryHeader{padding: 180px 0;}

.ocean{padding-bottom:450px;}
.mountain{padding-bottom: 450px;}

.main .unit{margin-top: 280px;}
.main .unit.sailing{margin-top: 0;}
.main .unit.sportwear{margin-top: 0;}
.fiberpile .main .unit{margin-top: 0;}

.unit .itemBox{margin-top: 80px;}
.centerImage .itemList{width: 60%;}

.pcPlusImage{margin-top: 80px;}




.footer{margin-top: 200px;padding-top: 200px;padding-bottom: 120px;}

}







@media(max-width: 768px) {
.wide{display: none;}

.pointView .BTinner.pcView{display: none;}
.pointView .BTinner.spView{display: block;}


.header{background-image: url("../images/mainimage_sp.jpg");}


.lead{padding: 18% 0 35%;background-image: url("../images/lead_bk_sp.jpg");}
.lead .leadInner{width: 75%;max-width: 550px;}
.lead .copy{margin-top: 8%;}



.ocean{
	padding-bottom:50%;
	background: url("../images/ocean_bk_sp.jpg") center 140vw no-repeat;
	background-size: cover;
}
.mountain{padding-bottom: 50%;}
.mountain .bkImage{background-image: url("../images/ocean_bk_sp.jpg") ;}



.categoryHeader{padding: 35% 0;width: 70%;}
.categoryHeader h2{width: 400px;}
.categoryHeader .copy{margin-top: 8%;font-size: 14px;}


.main{width: 100%;}
.main .unit{margin-top: 35%;}
.main .unit.sailing{margin-top: 0;}
.main .unit.sportwear{margin-top: 0;}
.fiberpile .main .unit{margin-top: 0;}


.unit .subTitle.leftImage .photo{width: 95%;margin-left:0;}
.unit .subTitle.rightImage .photo{width: 95%;margin-left:0;}
.unit.sailing .subTitle .photo{margin-left:5%;}
.unit.training .subTitle .photo{margin-left:5%;}
.unit.sportwear .subTitle .photo{margin-left:5%;}
.unit.trekking .subTitle .photo{margin-left:5%;}


.unit .subTitle .title_svg{position:relative;width: 100%;padding: 15% 0;opacity:1;}
.unit .subTitle.leftImage .title_svg{right:0;}
.unit .subTitle.rightImage .title_svg{left:0;}


.unit .subTitle .title_svg h3,
.unit .subTitle .title_svg h3.delighter{
	width: 85px;
	position:relative;
	margin: 0 auto;
	top: 50px;
	opacity:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-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);
}
.unit .subTitle .title_svg h3.delighter.started{top: 0;opacity:1;}


.unit.camp .subTitle .title_svg h3{width: 130px;}/*154%*/
.unit.trekking .subTitle .title_svg h3{width: 130px;}


.unit .itemBox{width: 70%;margin: 15% auto 0;}
.unit .itemBox.farst{margin-top: 0;}


.unit .itemBox.rightImage .photo{width: 100%;margin-left: 0;}
.unit .itemBox.leftImage .photo{width: 100%;}
.unit .itemBox.centerImage .photo{width: 100%;}


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


.rightImage .itemList{
	position:relative;
	top: 0%;
	width: 100%;
	-webkit-transform:none;
	             transform:none;
}
.leftImage .itemList{
	position:relative;
	top: 0%;
	max-width: 100%;
	width: 100%;
	-webkit-transform:none;
	             transform:none;
}
.centerImage .itemList{
	position:relative;
	width: 100%;
	margin: 0 auto;
}

.itemList h4{margin-top: 2.5em;font-size: 13px;}
.itemList h4.top{margin-top: 2.5em;font-size: 13px;}



.pcPlusImage{display: none;}

.spPlusImage{
	display: block;
	width: 95%;
	margin-top: 15%;
}

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


.fiberpile .fiberImage{background-image: url("../images/fiberpile_main_sp.jpg");padding-top: 103%;}
.fiberpile .fiberInner{background-image: url("../images/lead_bk_sp.jpg");}

.fiberpile .categoryHeader{padding: 25% 0;width: 70%;}

.fiberpile .unit .itemBox{width: 70%;margin: 15% auto 0;}
.fiberpile .unit .itemBox.farst{margin-top: 0;}


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

.footer{
	margin-top: 25%;
	padding-top: 25%;
	padding-bottom: 12%;
}

.footer .hhLogo{width: 115px;}
.footer .sns{width: 90%;margin: 40px auto 15%;}
.footer .sns ul li{width: 35px;margin: 0 15px;}


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



.appBanner{bottom:15px;left: -190px;width:170px;}
.appBanner.view{left:15px;}
.appBanner a{background: rgba(255,255,255,0.8);}

.ptSide{width:26px;}


}


@media(max-width: 610px) {

.header h1{width: 76%;}
.iconInstagram{top: 10px;right: 10px;width: 34px;}


.movBox .volume{bottom:15px;right: 10px;width: 40px;height: 40px;}


.lead{padding: 22% 0 65%;}
.lead .leadInner{width: 85%;max-width:none;}
.lead h2{width: 85%;}
.lead .copy{margin-top: 8%;font-size: 14px;line-height: 2.2;}


.ocean{padding-bottom:70%;}
.mountain{padding-bottom: 70%;}

.categoryHeader{padding: 50% 0;width: 85%;}
.categoryHeader h2{width: 85%;}
.categoryHeader .copy{margin-top: 13%;font-size: 14px;}


.unit .subTitle.leftImage .photo{width: 92.5%;}
.unit .subTitle.rightImage .photo{width: 92.5%;}
.unit.sailing .subTitle .photo{margin-left:7.5%;}
.unit.training .subTitle .photo{margin-left:7.5%;}
.unit.sportwear .subTitle .photo{margin-left:7.5%;}
.unit.trekking .subTitle .photo{margin-left:7.5%;}


.main .unit{margin-top: 40%;}
.main .unit.sailing{margin-top: 0;}
.main .unit.sportwear{margin-top: 0;}
.fiberpile .main .unit{margin-top: 0;}

.unit .subTitle .title_svg{padding: 18% 0;}
.unit .subTitle .title_svg h3,
.unit .subTitle .title_svg h3.delighter{width: 15%;top: 50px;}
.unit.camp .subTitle .title_svg h3{width: 23%;}/*154%*/
.unit.trekking .subTitle .title_svg h3{width: 23%;}

.unit .itemBox{width: 85%;margin-top: 12%;}
.unit .itemBox.farst{margin-top: 0;}


.itemList h4{margin-top: 2.0em;font-size: 13px;}
.itemList h4.top{margin-top: 2.0em;font-size: 13px;}



.spPlusImage{width: 92.5%;margin-top: 10%;}




.fiberpile .categoryHeader{padding: 30% 0;width: 85%;}
.fiberpile .categoryHeader h2{width: 100%;}
.fiberpile .categoryHeader .copy{margin-top: 25%;}

.fiberpile .unit .itemBox{width: 85%;margin-top: 15%;}
.fiberpile .unit .itemBox.farst{margin-top: 0;}





.footer{margin-top: 35%;padding: 35% 0 20%;}

.footer .hhLogo{width: 100px;}
.footer .sns{margin: 40px auto 18%;}
.footer .sns ul li{width: 33px;margin: 0 12px;}

.footer .copyright{font-size: 12px;}



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

.appBanner{bottom:15px;left: -180px;width:160px;}
.appBanner.view{left:15px;}

}






@media(max-width: 460px) {

.iconInstagram{top: 7px;right: 7px;width: 32px;}


.lead{padding: 25% 0 70%;}

.lead h2{width: 95%;}
.lead .copy{margin-top: 10%;letter-spacing: 0.04em;}


.categoryHeader h2{width: 90%;}

.categoryHeader .copy{margin-top:13%;font-size: 14px;letter-spacing: 0.04em;}


.itemList h4{margin-top: 2.0em;font-size: 11px;line-height: 1.1;}
.itemList h4.top{margin-top: 2.0em;font-size: 11px;}
.itemList p{font-size: 11px;}
.itemList p .date{ font-size: 10px;}

.unit .itemBox.sai02item{margin-top: 8%;}

.fiberpile .categoryHeader{overflow: hidden;}
.fiberpile .categoryHeader h2{width: 120%;position:relative;left: -10%;}
.fiberpile .categoryHeader .copy{margin-top: 25%;}

.fiberpile .unit .itemBox{width: 85%;margin-top: 15%;}
.fiberpile .unit .itemBox.farst{margin-top: 10%;}




.footer{margin-top: 40%;padding: 40% 0 20%;}
.footer .hhLogo{width: 90px;}
.footer .sns{margin: 30px auto 18%;}


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

.appBanner{bottom:15px;left: -160px;width:150px;}
.appBanner a{padding: 3px;}
.appBanner.view{left:15px;}

 .ptSide{
 	width:24px;
	bottom: 8px;
	-webkit-opacity:0.7;
	-moz-opacity:0.7;
	-ms-opacity:0.7;
	opacity:0.7;
}
 .ptSide.view{right: 8px;}


}