@charset "utf-8";

/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
/* RESET HTML5 */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/* GENERAL */
a:link, a:visited {color: #999;text-decoration: none;}
a:hover {color: #999;text-decoration: none;}
a{outline: none;}

/* CLEARFIX */
.clearfix
{zoom: 1;}

.clearfix:after,
.gridList:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaaaa:after,
.aaaaaaaaaa:after
{content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}

strong{
font-weight: bold;
}

img{
vertical-align: bottom;
}

*{
	box-sizing: border-box;
}




/* ------------------------------------------
LAYOUT
------------------------------------------ */

html{
	height: 100%; 
}

body{
	font: 12px/1.4 'source-han-sans-japanese',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight: 200;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	width: 100%; 
	height: 100%; 
	background-color: #f4f2ef;
	color: #000;
	position:relative;
	font-size: 16px;
	letter-spacing: 0.05em;	
	
	line-height: 180%;
}

.onlyPc{
	display: block;
}

.onlySp{
	display: none;
}

.contentsBox{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 80px;
	padding-right: 80px;
}
.contentsBox.contentBoxMini{
	padding-left: 120px;
	padding-right: 120px;
}

.center{
	text-align: center;
}

/*
html,
body{
	overflow: hidden;
}
*/

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

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









/* ------------------------------------------
pointer
------------------------------------------ */

.c-follower,
.c-pointer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .1);
	-webkit-filter: none;
	filter: none;
	-webkit-transform: scale(0);
	transform: scale(0); 
	pointer-events: none;

	mix-blend-mode: none;
}
.c-follower.is-blend,
.is-blend.c-pointer {
	background-color: rgba(0, 0, 0, .1);
	-webkit-filter: invert(100%); 
	filter: invert(100%);

	mix-blend-mode: exclusion;
}
.no-touchdevice .c-follower,
.no-touchdevice .c-pointer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.is-ie .c-follower,
.is-ie .c-pointer {
	background-color: rgba(230, 230, 230, .1);
}
.c-follower span,
.c-pointer span {
	color: #000;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.c-pointer {
	display: none;
	width: 8px;
	height: 8px;
	background-color: #000;
}
.no-touchdevice .c-pointer {
	display: block;
}

main{
	display: block;
	position: relative;
	z-index: 5;
}



/* ------------------------------------------
mainVisual
------------------------------------------ */

.mainVisual{
	position: fixed;
	left: 0;
	top: 0%;
	z-index: 1;
	background-color: #000;
	color: #fff;
	width: 100%;
	height: 100%;

-webkit-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.spacer{
	width: 100%;
	height: 100vh;
}

.mainVisual.loaded{
	background-color: #f4f2ef;
	color: #000;
}

.mainVisual .copy{
	font-size: 48px;
	font-family: 'aktiv-grotesk', 'source-han-sans-japanese',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.055em;
	font-style: normal;

	line-height: 160%;
	
	position: absolute;
	left: 0%;
	top: 50%;
	
	width: 100%;

  -webkit-transform: translate(0%,-50%);
	  -ms-transform: translate(0%,-50%);
		  transform: translate(0%,-50%);

	text-align: center;
	
	opacity: 0;

-webkit-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mainVisual .copy a{
	text-decoration: underline;
}
.mainVisual .copy a{
	color: #fff;

	text-decoration: none !important;

-webkit-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mainVisual.loaded .copy a{
	color: #000;

}

.mainVisual.loaded .copy a:hover{
	color: #b2b2b2;
}


.mainVisual .copy.show{
	opacity: 1;
}


/* ------------------------------------------
scroll
------------------------------------------ */

.scroll{
/* 	pointer-events:none; */

display: none;

	opacity: 0;
	position:absolute;
	bottom:10px;
	-webkit-transform:translate(-50%);
	transform:translate(-50%);
	left:50%;
	z-index:2;

-webkit-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.scroll.show{
	opacity: 1;
}
.scroll .scrollText{
	position:absolute;
	left:50%;
	bottom:130px;
	-webkit-transform:translate(-50%);
	transform:translate(-50%);
	font-size:16px;
	color:#000;
	white-space: nowrap;
	
	font-family: 'aktiv-grotesk', 'source-han-sans-japanese',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.scroll .scrollText a{
	color: #000;
}
.scroll .scrollContainer{
	width:1px;
	height:100px;
	overflow:hidden
}
.scroll .scrollLine{
	background:#000;
	height:100%;
	width:100%;
	-webkit-animation-name:scroll;
	animation-name:scroll;
	-webkit-animation-duration:1.75s;
	animation-duration:1.75s;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	animation-direction:normal;
	-webkit-animation-timing-function:cubic-bezier(.86,0,.07,1);
	animation-timing-function:cubic-bezier(.86,0,.07,1);
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-delay:0s;
	animation-delay:0s
}

@-webkit-keyframes scroll{
	0%{
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
	to{
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}
@keyframes scroll{
	0%{
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
	to{
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}










/* ------------------------------------------
detail
------------------------------------------ */

.mainImg{
	position: relative;
	margin-bottom: 200px;
}

.mainImg .img img{
	width: 100%;
}

.mainImg .despArea{
	position: absolute;
	left: 0%;
	top: 50%;
	
	width: 100%;
	z-index: 2;
	
	color: #fff;

  -webkit-transform: translate(0%,-50%);
	  -ms-transform: translate(0%,-50%);
		  transform: translate(0%,-50%);

	text-align: center;
}


h2.ttl{
	font-size: 42px;
	font-family: 'aktiv-grotesk', 'source-han-sans-japanese',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	margin-bottom: 0px;
	
}
h2.copy{
	margin-bottom: -50%;
	
}

.category{
	font-size: 16px;
	font-family: 'aktiv-grotesk', 'source-han-sans-japanese',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.concept{
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 200px;
}

.concept a{
	padding-right: 20px;
	background-image:url(../images/ico_blank.png);
	background-repeat:no-repeat;
	background-size: 12px auto;
	background-position: right 10px;

-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.concept a:hover{
	color: #000;
}


.logoArea{
	text-align: center;
	margin-bottom: 100px;
}
.logoArea img{
	margin: 0 20px;
}

.wideImg{
	margin-bottom: 40px;
}

.wideImg img{
	max-width: 100%;
}


.slider .each img{
	width: 100%;
}




.gridList{
	margin-left: -20px;
	margin-right: -20px;
}

.gridList li{
	float: left;
	width: calc(50% - 40px);
	margin-left: 20px;
	margin-right: 20px;
	
	margin-bottom: 40px;
}

.gridList li img{
	width: 100%;
}




section.sec{
	padding-bottom: 120px;
	opacity: 1;
	background-color: #f4f2ef;
	
	margin-top: 100vh;

-webkit-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

section.sec.show{
	opacity: 1;
}

section.sec .mainImg{
	position: relative;
	top: 0;

-webkit-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

section.sec.show .mainImg{
	top: -80px;
}