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

@import url(notosansjapanese.css);


@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:300;
	font-family: 'Noto Sans Japanese','ヒラギノ角ゴ 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: 60px;
	-webkit-transition:all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);	
	   -moz-transition:all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-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);
}
/* start */
.fadeIn.delighter.started{
    -webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	opacity:1;
    top: 0;
}
/* end */
.fadeIn.delighter.ended{
}



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


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



.mainTitle{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #cbbc9b;
    position: relative;
}
.mainTitle .titleInner{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}
.mainTitle .titleInner h1{
    width: 100%;
    position: absolute;
    top: 56%;
    left: 0;
    right: 0;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
    font-family:'DINPro-Medium';
    font-size: 9.4vw;
    line-height: 1.0;
}
.mainTitle .titleInner h1 p{
    -webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
}
.mainTitle .titleInner h1 p span {
    position: relative;
    top: -20px;
    left: 20px;
    -webkit-opacity:0;
    -moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
}

.mainTitle .titleInner h1 p br{display: none;}

.mainTitle .hhlogo{
    width: 17%;
    position: absolute;
    top:50%;
    left:0;
    margin-top: -23%;
    display: none;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}









/* ------------ NAVIGATION ------------- */


body.fixed{
    position:fixed;
    width:100%;
    height:100vh;
    overflow:hidden;    
}

.navigation{}

.navigation .instagram{
    position:fixed;
    right: 65px;
    top: 17px;
    width: 32px;
    z-index: 199;
}


/*トリガー*/
.menu-trigger{
	position:fixed;
	top:20px;
	right:20px;
	width:32px;
	height:26px;
	cursor:pointer;
	z-index:999;
}
.menu-trigger span{
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background-color:#FFF;
	-webkit-transition: width 0.2s , background 0.8s;
	   -moz-transition: width 0.2s , background 0.8s;
	    -ms-transition: width 0.2s , background 0.8s;
	        transition: width 0.2s , background 0.8s;
}

.menu-trigger span:nth-of-type(1){top:0;}
.menu-trigger span:nth-of-type(2){top:12px;}
.menu-trigger span:nth-of-type(3){bottom:0;}

.menu-trigger.close span:nth-of-type(1){
	-webkit-animation:menu-bar01 .6s forwards;
	   -moz-animation:menu-bar01 .6s forwards;
	    -ms-animation:menu-bar01 .6s forwards;
	        animation:menu-bar01 .6s forwards;
}

@-webkit-keyframes menu-bar01{
	0%{-webkit-transform:translateY(12px) rotate(45deg);}
	50%{-webkit-transform:translateY(12px) rotate(0);}
	100%{-webkit-transform:translateY(0) rotate(0);}
}
@-moz-keyframes menu-bar01{
	0%{-moz-transform:translateY(12px) rotate(45deg);}
	50%{-moz-transform:translateY(12px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@-ms-keyframes menu-bar01{
	0%{-moz-transform:translateY(12px) rotate(45deg);}
	50%{-moz-transform:translateY(12px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@keyframes menu-bar01{
	0%{transform:translateY(12px) rotate(45deg);}
	50%{transform:translateY(12px) rotate(0);}
	100%{transform:translateY(0) rotate(0);}
}

.menu-trigger.open span:nth-of-type(1),
.menu-trigger.open span:nth-of-type(3){
	background-color:#000;
}
.menu-trigger.open span:nth-of-type(1) {
	-webkit-animation:active-menu-bar01 .6s forwards;
	   -moz-animation:active-menu-bar01 .6s forwards;
	    -ms-animation:active-menu-bar01 .6s forwards;
	        animation:active-menu-bar01 .6s forwards;
}
@-webkit-keyframes active-menu-bar01 {
	0%{-webkit-transform:translateY(0) rotate(0);}
	50%{-webkit-transform:translateY(12px) rotate(0);}
	100%{-webkit-transform:translateY(12px) rotate(45deg);}
}
@-moz-keyframes active-menu-bar01 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(12px) rotate(0);}
	100%{-moz-transform:translateY(12px) rotate(45deg);}
}
@-ms-keyframes active-menu-bar01 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(12px) rotate(0);}
	100%{-moz-transform:translateY(12px) rotate(45deg);}
}
@keyframes active-menu-bar01 {
	0%{transform:translateY(0) rotate(0);}
	50%{transform:translateY(12px) rotate(0);}
	100%{transform:translateY(12px) rotate(45deg);}
}


.menu-trigger.close span:nth-of-type(2) {
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
	filter:alpha(opacity=100);
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	opacity:1;
}
.menu-trigger.open span:nth-of-type(2) {
	filter:alpha(opacity=0);
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
}


.menu-trigger.close span:nth-of-type(3){
	-webkit-animation:menu-bar03 .6s forwards;
	   -moz-animation:menu-bar03 .6s forwards;
	    -ms-animation:menu-bar03 .6s forwards;
	        animation:menu-bar03 .6s forwards;
}
@-webkit-keyframes menu-bar03{
	0%{-webkit-transform:translateY(-12px) rotate(-45deg);}
	50%{-webkit-transform:translateY(-12px) rotate(0);}
	100%{-webkit-transform:translateY(0) rotate(0);}
}
@-moz-keyframes menu-bar03{
	0%{-moz-transform:translateY(-12px) rotate(-45deg);}
	50%{-moz-transform:translateY(-12px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@-ms-keyframes menu-bar03{
	0%{-moz-transform:translateY(-12px) rotate(-45deg);}
	50%{-moz-transform:translateY(-12px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@keyframes menu-bar03{
	0%{transform:translateY(-12px) rotate(-45deg);}
	50%{transform:translateY(-12px) rotate(0);}
	100%{transform:translateY(0) rotate(0);}
}

.menu-trigger.open span:nth-of-type(3) {
	-webkit-animation:active-menu-bar03 .6s forwards;
	   -moz-animation:active-menu-bar03 .6s forwards;
	    -ms-animation:active-menu-bar03 .6s forwards;
	        animation:active-menu-bar03 .6s forwards;
}
@-webkit-keyframes active-menu-bar03 {
	0%{-webkit-transform:translateY(0) rotate(0);}
	50%{-webkit-transform:translateY(-12px) rotate(0);}
	100%{-webkit-transform:translateY(-12px) rotate(-45deg);}
}
@-moz-keyframes active-menu-bar03 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(-12px) rotate(0);}
	100%{-moz-transform:translateY(-12px) rotate(-45deg);}
}
@-ms-keyframes active-menu-bar03 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(-12px) rotate(0);}
	100%{-moz-transform:translateY(-12px) rotate(-45deg);}
}
@keyframes active-menu-bar013{
	0%{transform:translateY(0) rotate(0);}
	50%{transform:translateY(-12px) rotate(0);}
	100%{transform:translateY(-12px) rotate(-45deg);}
}


.navigation .sideNavi{
    position:fixed;
    top:0;
    right:-350px;
    width:350px;
    height: 100%;
    z-index:900;
    background:#FFF;
    line-height:1.2;
    color: #000;
    overflow: auto;
    -webkit-transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	   -moz-transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	    -ms-transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	        transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.navigation .sideNavi.open{right:0;}


.navigation .sideNavi a{
    color:#000;
    font-family:'DINPro-Medium';
    font-size: 28px;
}

.navigation .naviInner{
    width: 75%;
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    padding: 0;
    text-align: left;
    margin: 0 auto;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}




.sideNavi .menu{
    width: 100%;
}
.sideNavi .menu ul{
}
.sideNavi .menu ul li{
    margin-bottom: 2.7em;
}
.sideNavi .menu sup{
    font-size: 50%;
}

.sideNavi .naviTitle{
    position: absolute;
    left: 35px;
    right: 0;
    bottom: 30px;
    width: 220px;
}


.cover{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 899;
    display: none;
}



@media (min-width: 769px) {
.navigation .sideNavi .n01 a:hover{color:#cbbc9b;}
.navigation .sideNavi .n03 a:hover{color:#e0b5b5;}
.navigation .sideNavi .n04 a:hover{color:#9cd2d9;}
.navigation .sideNavi .n05 a:hover{color:#cccccc;}
.navigation .sideNavi .n06 a:hover{color:#a6cfb5;}
}

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



.category{
    width: 100%;
    position: relative;
    padding: 100px 0 50px;
}

.category.block01{background: #cbbc9b;}
.category.block02{background: #b9cfdf;}
.category.block03{background: #e0b5b5;}
.category.block04{background: #9cd2d9;}
.category.block05{background: #cccccc;}
.category.block06{background: #a6cfb5;}





.block01cover{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbbc9b;
    z-index: 120;
    display: none;
}








.category header{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.category header .imagecut{
    width: 45%;
    padding-top: 40%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.category.block01 header .imagecut{background-image: url("../images/block01bk.jpg");}
.category.block02 header .imagecut{background-image: url("../images/block02bk.jpg");}
.category.block03 header .imagecut{background-image: url("../images/block03bk.jpg");}
.category.block04 header .imagecut{background-image: url("../images/block04bk.jpg");}
.category.block05 header .imagecut{background-image: url("../images/block05bk.jpg");}
.category.block06 header .imagecut{background-image: url("../images/block06bk.jpg");}


.category .categoryTitle{
    width: 48%;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}

.category .categoryTitle h1{
    font-family:'DINPro-Medium';
    font-size:60px;
    line-height: 1.0;
}
.category .categoryTitle h1 span{
    display: block;
    font-size: 32px;
}
.category .categoryTitle h1 sup{
    font-size: 50%;
}
.category .categoryTitle p{
    margin-top: 30px;
    font-size: 17px;
    letter-spacing: 0.05em;
}
.category .categoryTitle p .fiberpile{
    display: block;
    width: 150px;
}


.category header .spCopy{display: none;}





.imageList{
    width: 90%;
    max-width: 1200px;
    margin:120px auto 0;
}

.imageList .wideFull{
    width: 100%;
    margin-bottom:110px;
}


.imageList .wideHarf{
    width: 100%;
}
.imageList .wideHarf ul{
    width: 103%;
    font-size: 0;
    text-align: center;
}
.imageList .wideHarf ul li{
    width: 47%;
    margin-right: 3%;
    margin-bottom:110px;
    font-size: 12px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}


.imageList .num{
    font-family:'DINPro-Medium';
    font-size:35px;
    line-height: 1.0;
    text-align: left;
    width: 100%;
    padding-bottom: 10px;
    position: relative;
}
/* standard */
.imageList .num.delighter{
    left: 30px;
	-webkit-transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-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);
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
}

/* start */
.imageList .num.delighter.started{
    left: 0;
    -webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	opacity:1;
}
/* end */
.imageList .num.delighter.ended img{
}








.imageList .image{
    overflow: hidden;
    position: relative;
}
/* standard */
.imageList .image:after,
.imageList .image.delighter:after{
    content: "";
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 100px;
    border-style: solid;
	-webkit-transition: all 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition: all 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition: all 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition: all 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* start */
.imageList .image.delighter.started:after{
    border-width: 0px;
}
/* end */
.imageList .image.delighter.ended:after{
}


.block01 .imageList .image:after{border-color:#cbbc9b;}
.block02 .imageList .image:after{border-color:#b9cfdf;}
.block03 .imageList .image:after{border-color:#e0b5b5;}
.block04 .imageList .image:after{border-color:#9cd2d9;}
.block05 .imageList .image:after{border-color:#cccccc;}
.block06 .imageList .image:after{border-color:#a6cfb5;}















.imageList .wideFull .image span{
    display: block;
    width: 100%;
    padding-top: 74.1666%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.imageList .wideHarf .image span{
    display: block;
    width: 100%;
    padding-top:153%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.imageList .image span.img01{background-image: url("../images/look01.jpg");}
.imageList .image span.img02{background-image: url("../images/look02.jpg");}
.imageList .image span.img03{background-image: url("../images/look03.jpg");}
.imageList .image span.img04{background-image: url("../images/look04.jpg");}
.imageList .image span.img05{background-image: url("../images/look05.jpg");}
.imageList .image span.img06{background-image: url("../images/look06.jpg");}
.imageList .image span.img07{background-image: url("../images/look07.jpg");}
.imageList .image span.img08{background-image: url("../images/look08.jpg");}
.imageList .image span.img09{background-image: url("../images/look09.jpg");}
.imageList .image span.img10{background-image: url("../images/look10.jpg");}
.imageList .image span.img11{background-image: url("../images/look11.jpg");}
.imageList .image span.img12{background-image: url("../images/look12.jpg");}
.imageList .image span.img13{background-image: url("../images/look13.jpg");}
.imageList .image span.img14{background-image: url("../images/look14.jpg");}
.imageList .image span.img15{background-image: url("../images/look15.jpg");}
.imageList .image span.img16{background-image: url("../images/look16.jpg");}
.imageList .image span.img17{background-image: url("../images/look17.jpg");}
.imageList .image span.img18{background-image: url("../images/look18.jpg");}
.imageList .image span.img19{background-image: url("../images/look19.jpg");}
.imageList .image span.img20{background-image: url("../images/look20.jpg");}


/* standard */
.imageList .image span,
.imageList .image.delighter span{
    -webkit-transform:scale(1.4);
	   -moz-transform:scale(1.4);
	    -ms-transform:scale(1.4);
	        transform:scale(1.4);	
    display: block;
	-webkit-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* start */
.imageList .image.delighter.started span{
    -webkit-transform:scale(1.0);
	   -moz-transform:scale(1.0);
	    -ms-transform:scale(1.0);
	        transform:scale(1.0);
}
/* end */
.imageList .image.delighter.ended span{
}





.imageList .wideFull .image p{
    position: absolute;
    width: 7%;
    bottom: 2%;
    right: 1%;
    z-index: 50;
}
.imageList .wideHarf .image p{
    position: absolute;
    width: 14%;
    bottom: 2%;
    right: 2%;
    z-index: 50;
}





.imageList .item{
    margin-top: 20px;
}
.imageList .item h5{
    font-family:'DINPro-Medium';
    font-size:14px;
    line-height: 1.2;
    padding-bottom:8px;
}
.imageList .item p{
    font-family:'DINPro-Regular';
    font-size:13px;
    line-height: 1.2;
    margin-bottom: 0.5em;
    color: #FFF;
}
.imageList .item p br{display: none;}
.imageList .item p a{
    color: #FFF;
}
.imageList .item p a:hover{
    text-decoration: underline;
}

.imageList .item p > span{
    font-family: 'Noto Sans Japanese','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
    font-size: 10px;
    border: 1px solid #FFF;
    display: inline-block;
    line-height: 1;
    padding: 2px 3px;
    margin-left: 5px;
}
.imageList .item p > a > span{
    font-family:'DINPro-Regular';
    background: #FFF;
    font-size: 11px;
    border: 1px solid #FFF;
    display: inline-block;
    line-height: 1;
    padding: 2px 3px 1px;
    margin-left: 5px;
    -webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
.imageList .item p > a > i{
    font-family: 'Noto Sans Japanese','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
    font-size: 11px;
    background: #FFF;
    border: 1px solid #FFF;
    display: inline-block;
    line-height: 1;
    padding: 2px 3px;
    margin-left: 5px;
    -webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
.block01 .imageList .item p > a > span{color:#cbbc9b;}
.block02 .imageList .item p > a > span{color:#b9cfdf;}
.block03 .imageList .item p > a > span{color:#e0b5b5;}
.block04 .imageList .item p > a > span{color:#9cd2d9;}
.block04 .imageList .item p > a > i{color:#9cd2d9;}
.block05 .imageList .item p > a > span{color:#cccccc;}
.block06 .imageList .item p > a > span{color:#a6cfb5;}







.imageList .wideFull .itemFullSet{width: 100%;}

.imageList .wideFull .itemFullSet .left{float:left;margin-right:1%;}
.imageList .wideFull .itemFullSet .center{float:left;margin-right:1%;}
.imageList .wideFull .itemFullSet .right{float:left;}

.itemFullSet.look01 .left{width: 32.66666%;}
.itemFullSet.look01 .center{width: 32.66666%;}
.itemFullSet.look01 .right{width: 32.66666%;}

.itemFullSet.look05 .left{width: 32.66666%;}
.itemFullSet.look05 .center{width: 32.66666%;}
.itemFullSet.look05 .right{width: 32.66666%;}

.itemFullSet.look09 .left{width: 32.66666%;}
.itemFullSet.look09 .center{width: 32.66666%;}
.itemFullSet.look09 .right{width: 32.66666%;}












footer{
    background: #a6cfb5;
    width: 100%;
    text-align: center;
    padding: 70px 0 20px;
}
footer .icon{
    text-align: center;
}
footer .icon .hh{
    display: inline-block;
    width: 62px;
    vertical-align: top;
    padding-top: 2px;
    margin-right:40px;
}
footer .icon .insta{
    display: inline-block;
    width: 35px;
    vertical-align: top;
    margin-left:40px;
}
footer .copyright{
    font-family:'DINPro-Regular';
    font-size: 14px;
    margin-top: 100px;
}

/* ============================================================= */

@media (min-width: 1333px) {
.mainTitle .titleInner h1{font-size: 125px;}
}


@media (min-width: 769px) {
.imageList .item p > a:hover > span{color: #FFF !important;}
.block01 .imageList .item p > a:hover > span{background-color:#A18A5E;border-color:#A18A5E;}
.block02 .imageList .item p > a:hover > span{background-color:#86A8C3;border-color:#86A8C3;}
.block03 .imageList .item p > a:hover > span{background-color:#C48080;border-color:#C48080;}
.block04 .imageList .item p > a:hover > span{background-color:#5FACB8;border-color:#5FACB8;}
.block04 .imageList .item p > a:hover > i{background-color:#5FACB8;border-color:#5FACB8;color:#FFF;}
.block05 .imageList .item p > a:hover > span{background-color:#A3A3A3;border-color:#A3A3A3;}
.block06 .imageList .item p > a:hover > span{background-color:#6CA880;border-color:#6CA880;}

}

@media (max-width: 980px) {


.category .categoryTitle{width: 52%;}
.category .categoryTitle h1{font-size:50px;}
.category .categoryTitle h1 span{display: block;font-size: 27px;}
.category .categoryTitle p{font-size: 15px;margin-top:30px;line-height: 1.7;}
.category .categoryTitle p .fiberpile{
    width: 120px;
}
.imageList{margin-top: 120px;}
.imageList .num{font-size:30px;}


}





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


.navigation .sideNavi{right:-320px;width:320px;}
.navigation .naviInner{width: 250px;}






.mainTitle{height: auto;padding-bottom: 30%;}
.mainTitle .titleInner{width: 87%;position: relative;}

.mainTitle .titleInner h1{
    position: relative;
    top:0;
    -webkit-transform:none;
	   -moz-transform:none;
	    -ms-transform:none;
	        transform:none;
    font-size:11.0vw;
    padding-top: 35%;
    line-height: 0.9;
}
.mainTitle .titleInner h1 p br{display: block;}

.mainTitle .hhlogo{
    width: 23%;
    position:absolute;
    top:10%;
    left:-0%;
    margin: 0;
    -webkit-transform:none;
	   -moz-transform:none;
	    -ms-transform:none;
	        transform:none;
}


.category{padding: 10% 0 5%;overflow: hidden;}

.block01cover{display: block;}

.category header{width: 85%;}

.category header .imagecut{width: 90%;margin: 5% auto 5%;padding-top: 80%;}
.category .categoryTitle{ width:100%;position:relative;top: 0;
    -webkit-transform:none;
	   -moz-transform:none;
	    -ms-transform:none;
	        transform:none;
}
.category .categoryTitle h1{font-size:65px;}
.category .categoryTitle h1 span{ font-size: 35px;}
.category .categoryTitle p{display: none;}

.category header .spCopy{display: block;font-size: 16px;letter-spacing: 0.05em;line-height: 1.8;}
.category header .spCopy .fiberpile{display: block;width: 150px;padding-bottom: 5px;}


.imageList{margin-top: 15%;width: 85%;}
.imageList .num{font-size:35px;}


.imageList .wideFull .image span{padding-top:116%;}
.imageList .wideHarf .image span{padding-top:116%;}


.imageList .wideFull .image p{width: 12%;bottom: 3%;right: 2%;}
.imageList .wideHarf .image p{width: 12%;bottom: 3%;right: 2%;}

.imageList .wideFull{margin-bottom:50px;}
.imageList .wideHarf ul{width: 100%;}
.imageList .wideHarf ul li{width: 100%;margin-right: 0%;margin-bottom:50px;}

.imageList .wideFull .itemFullSet .left,
.imageList .wideFull .itemFullSet .center,
.imageList .wideFull .itemFullSet .right{float:none;margin:20px 0 0;}

.itemFullSet.look01 .left,
.itemFullSet.look01 .center,
.itemFullSet.look01 .right,
.itemFullSet.look05 .left,
.itemFullSet.look05 .center,
.itemFullSet.look05 .right,
.itemFullSet.look09 .left,
.itemFullSet.look09 .center,
.itemFullSet.look09 .right{width:100%;}



}





@media (max-width: 640px) {


.navigation .sideNavi{right:-100%; width:100%;}
.navigation .sideNavi a{font-size: 6.0vw;}
.navigation .naviInner{
    width: 80%;
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    padding: 0;
    text-align: center;
    margin: 0 auto;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}
.sideNavi .menu ul li{
    margin-bottom: 2.0em;
}







.mainTitle{padding-bottom: 30%;}
.mainTitle .titleInner{width: 92%;}

.mainTitle .titleInner h1{font-size:12.0vw;padding-top:35%;}
.mainTitle .titleInner h1 p br{display: block;}
.mainTitle .hhlogo{width: 23%;left:0.5%;}

.category{padding: 12% 0 5%;}
.category header{width: 90%;}

.imageList{margin-top:15%;width:90%;}
.imageList .num{font-size:32px; padding-bottom: 5px;}

.imageList .item p br{display: block;}

.category header .imagecut{width:100%;padding-top:90%;}

.category .categoryTitle h1{font-size:52px;}
.category .categoryTitle h1 span{ font-size: 28px;}
.category header .spCopy{font-size: 15px;}



footer{padding: 18% 0 20px;}
footer .icon .hh{width: 62px; margin-right:40px;}
footer .icon .insta{width: 35px;margin-left:40px;}
footer .copyright{font-size: 13px;margin-top: 12%;}


}


@media (max-width: 470px) {



/*トリガー*/
.menu-trigger{
	top:16px;
	right:16px;
	width:28px;
	height:22px;
}
.menu-trigger span:nth-of-type(2){top:10px;}
.navigation .instagram{right: 57px;top: 13px;width: 28px;}

@-webkit-keyframes menu-bar01{
	0%{-webkit-transform:translateY(10px) rotate(45deg);}
	50%{-webkit-transform:translateY(10px) rotate(0);}
	100%{-webkit-transform:translateY(0) rotate(0);}
}
@-moz-keyframes menu-bar01{
	0%{-moz-transform:translateY(10px) rotate(45deg);}
	50%{-moz-transform:translateY(10px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@-ms-keyframes menu-bar01{
	0%{-moz-transform:translateY(10px) rotate(45deg);}
	50%{-moz-transform:translateY(10px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@keyframes menu-bar01{
	0%{transform:translateY(10px) rotate(45deg);}
	50%{transform:translateY(10px) rotate(0);}
	100%{transform:translateY(0) rotate(0);}
}
@-webkit-keyframes active-menu-bar01 {
	0%{-webkit-transform:translateY(0) rotate(0);}
	50%{-webkit-transform:translateY(10px) rotate(0);}
	100%{-webkit-transform:translateY(10px) rotate(45deg);}
}
@-moz-keyframes active-menu-bar01 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(10px) rotate(0);}
	100%{-moz-transform:translateY(10px) rotate(45deg);}
}
@-ms-keyframes active-menu-bar01 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(10px) rotate(0);}
	100%{-moz-transform:translateY(10px) rotate(45deg);}
}
@keyframes active-menu-bar01 {
	0%{transform:translateY(0) rotate(0);}
	50%{transform:translateY(10px) rotate(0);}
	100%{transform:translateY(10px) rotate(45deg);}
}
@-webkit-keyframes menu-bar03{
	0%{-webkit-transform:translateY(-10px) rotate(-45deg);}
	50%{-webkit-transform:translateY(-10px) rotate(0);}
	100%{-webkit-transform:translateY(0) rotate(0);}
}
@-moz-keyframes menu-bar03{
	0%{-moz-transform:translateY(-10px) rotate(-45deg);}
	50%{-moz-transform:translateY(-10px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@-ms-keyframes menu-bar03{
	0%{-moz-transform:translateY(-10px) rotate(-45deg);}
	50%{-moz-transform:translateY(-10px) rotate(0);}
	100%{-moz-transform:translateY(0) rotate(0);}
}
@keyframes menu-bar03{
	0%{transform:translateY(-10px) rotate(-45deg);}
	50%{transform:translateY(-10px) rotate(0);}
	100%{transform:translateY(0) rotate(0);}
}
@-webkit-keyframes active-menu-bar03 {
	0%{-webkit-transform:translateY(0) rotate(0);}
	50%{-webkit-transform:translateY(-10px) rotate(0);}
	100%{-webkit-transform:translateY(-10px) rotate(-45deg);}
}
@-moz-keyframes active-menu-bar03 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(-10px) rotate(0);}
	100%{-moz-transform:translateY(-10px) rotate(-45deg);}
}
@-ms-keyframes active-menu-bar03 {
	0%{-moz-transform:translateY(0) rotate(0);}
	50%{-moz-transform:translateY(-10px) rotate(0);}
	100%{-moz-transform:translateY(-10px) rotate(-45deg);}
}
@keyframes active-menu-bar013{
	0%{transform:translateY(0) rotate(0);}
	50%{transform:translateY(-10px) rotate(0);}
	100%{transform:translateY(-10px) rotate(-45deg);}
}



.mainTitle{padding-bottom: 28%;}
.mainTitle .titleInner h1{font-size:13.0vw;padding-top: 43%;}
.mainTitle .hhlogo{width: 28%;top:5%;}

.category{padding: 20% 0 7%;}
.category .categoryTitle h1{font-size:11.4vw;}
.category .categoryTitle h1 span{ font-size:6.0vw;}
.category header .spCopy{font-size: 14px;line-height: 1.7;}
.category header .spCopy .fiberpile{width: 120px;}


.category.block03 header .imagecut{padding-top: 100%}
.category.block05 header .imagecut{padding-top: 100%}


.imageList .num{font-size:27px;}
.imageList .wideFull{margin-bottom:12%;}
.imageList .wideHarf ul li{margin-bottom:12%;}

.imageList .item p{font-size:12px;}


/* standard */
.imageList .image:after,
.imageList .image.delighter:after{border-width: 70px;}



footer{padding: 20% 0 20px;}
footer .icon .hh{width: 50px; margin-right:8%;}
footer .icon .insta{width: 30px;margin-left:8%;}
footer .copyright{font-size: 12px;margin-top: 20%;}


}








@media (max-width: 360px) {
.mainTitle{padding-bottom: 25%;}
.mainTitle .titleInner h1{font-size:13.5vw;padding-top: 43%;}

.category header .spCopy{letter-spacing: 0.02em;}
.category .categoryTitle h1{font-size:11.0vw;}


.imageList .num{font-size:25px;}
 }