@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
*/

/*========================
css easing

easeOutQuart
cubic-bezier(0.165, 0.84, 0.44, 1);

easeInOutQuart
cubic-bezier(0.77, 0, 0.175, 1);
========================*/



/*din_alternate_bold*/
@font-face {
font-family: 'din_alternate';
src: 
url('../../../assets_global/fonts/din_alternate_bold.woff') format('woff'),
url('../../../assets_global/fonts/din_alternate_bold.ttf') format('truetype');
}
/*din_condesed_bold*/
@font-face {
font-family: 'din_condensed';
src: 
url('../../../assets_global/fonts/din_condensed_bold.woff') format('woff'),
url('../../../assets_global/fonts/din_condensed_bold.ttf') format('truetype');
}

.dinAlternate {
	font-family:"din_alternate";
	letter-spacing:0.04em;
	transform:scale(1, 1.01);
	}
.dinCondensed {
	font-family:"din_condensed";
	transform:scale(1, 1.01);
	}

body {
	font-family: "Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	color:#fff;
	font-size:14px;
	line-height:1.6;
	background:#1a1a1a;
	}
	
/*========================
コンテナ
========================*/
/*padding左右8%のボックス*/
.constBox {
	padding:20px 8%;
	}
	
/*ドロップシャドウ*/
.shadow {
	/* box-shadow */
	-moz-box-shadow:15px 18px 21px -6px rgba(0,0,0,0.29);
	-webkit-box-shadow:15px 18px 21px -6px rgba(0,0,0,0.29);
	box-shadow:15px 18px 21px -6px rgba(0,0,0,0.29);
	}
	
/*========================
テキストリンク
========================*/
a {
	color:#fff;
	text-decoration:none;
	}
	
a:hover {
	}
	
.hover {
	opacity:1;
	transition:opacity 0.3s linear;
	}
.hover:hover {
	opacity:0.7;
	}
	
/*========================
ボタン
========================*/
/*クローズボタン*/
.closeButton {
	width:22px;
	height:22px;
	position:absolute;
	right:20px;
	top:20px;
	transition:transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	}
.closeButton::before,
.closeButton::after {
	width:100%;
	height:4px;
	background:#fff;
	display:block;
	content:"";
	position:absolute;
	top:50%;
	left:0;
	margin-top:-2px;
	}
.closeButton::before {
	transform:rotate(45deg);
	}
.closeButton::after {
	transform:rotate(-45deg);
	}
.closeButton:hover {
	transform:rotate(180deg);
	}
	
/*moreボタン*/
.moreButton {
	color:#2FE9B0;
	margin-top:1em;
	display:none;
	}
.moreButton.arrowR::after {
	border-color:#2FE9B0;
	}

/*トリガーボタン 画像切り替え用*/
.triggerButton {
	font-size:36px;
	line-height:1em;
	display:inline-block;
	text-decoration:none;
	}
.triggerButton span {
	text-indent:-9999em;
	display:inline-block;
	overflow:hidden;
	position:relative;
	width:15px;
	height:15px;
	vertical-align:middle;
	margin:0 0.5em;
	transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s linear;
	}
.triggerButton.stay span {
	opacity:0;
	}
.triggerButton span::before,
.triggerButton span::after {
	width:100%;
	height:3px;
	background:#f4d90c;
	display:block;
	content:"";
	position:absolute;
	top:50%;
	left:0;
	margin-top:-1.5px;
	}
.triggerButton span::before {
	transform:rotate(90deg);
	}
.triggerButton.top:hover span {
	transform:translateY(-5px);
	}
.triggerButton.left:hover span {
	transform:translateX(-5px);
	}
.triggerButton.bottom:hover span {
	transform:translateY(5px);
	}
	
/*小窓ポップアップボタン*/
.smallWindowTriggerButton {
	display:block;
	text-indent:-9999em;
	position:relative;
	background:#2FE9B0;
	width:18px;
	height:18px;
	border-radius:100px;
	z-index:1;
	transition:transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
.smallWindowTriggerButton.stay {
	transform:rotate(45deg);
	}
.smallWindowTriggerButton:hover {transform:scale(1.2);}
.smallWindowTriggerButton.stay:hover {transform:scale(1.2) rotate(45deg);}
.smallWindowTriggerButton::before,
.smallWindowTriggerButton::after {
	position:absolute;
	content:"";
	display:block;
	width:12px;
	height:2px;
	background:#fff;
	top:50%;
	left:50%;
	margin-top:-1px;
	margin-left:-6px;
	}
.smallWindowTriggerButton::after {
	transform:rotate(90deg);
	}
	
.smallWindow {
	background:rgba(255, 255, 255, 0.8);
	color:#000;
	font-size:16px;
	line-height:1.4em;
	text-align:center;
	padding:15px;
	border-radius:8px;
	width:180px;
	position:absolute;
	transform:scale(0.9);
	opacity:0;
	transition:
		transofrm 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.3s linear;
	}
.smallWindow.on {
	transform:scale(1);
	opacity:1;
	}


/*罫線ボタン*/
.boxButton {
	display:inline-block;
	border:1px solid #fff;
	line-height:1em;
	padding:1em 2em;
	text-align:center;
	transition:background-color 0.3s linear;
	text-decoration:none;
	}
.boxButton:hover {
	background-color:#aaa;
	}
	
/*========================
矢印アイコン
========================*/

/*左向き*/
.arrowL::before {
	display:inline-block;
	vertical-align:middle;
	border-style:solid;
	border-top-width:2px;
	border-right-width:2px;
	border-bottom-width:0;
	border-left-width:0;
	border-color:#1a1a1a;
	height:0.4em;
	width:0.4em;
	content:"";
	transform:translateZ(0) rotate(-135deg);
	transition:transform 0.3s ease-out;
	margin-right:0.5em;
	}
a.arrowL {overflow:visible;text-decoration:none;}
a.arrowL:hover::before {
	transform:translateZ(0) translateX(-0.2em) rotate(-135deg);
	}
/*右向き*/
.arrowR::after{
	display:inline-block;
	vertical-align:middle;
	border-style:solid;
	border-top-width:2px;
	border-right-width:2px;
	border-bottom-width:0;
	border-left-width:0;
	border-color:#1a1a1a;
	height:0.4em;
	width:0.4em;
	content:"";
	transform:translateZ(0) rotate(45deg);
	transition:transform 0.3s ease-out;
	margin-left:0.5em;
	}
a.arrowR {overflow:visible;text-decoration:none;}
a.arrowR:hover::after {
	transform:translateZ(0) translateX(0.2em) rotate(45deg);
	}
/*上向き*/
.arrowT::before {
	display:inline-block;
	vertical-align:middle;
	border-style:solid;
	border-top-width:2px;
	border-right-width:2px;
	border-bottom-width:0;
	border-left-width:0;
	border-color:#1a1a1a;
	height:0.4em;
	width:0.4em;
	content:"";
	transform:rotate(-45deg);
	transition:transform 0.3s ease-out;
	margin-right:0.5em;
	}
a.arrowT:hover::before {
	transform:translateY(-0.2em) rotate(-45deg);
	}
	
i.arrow {
	display:inline-block;
	width:1.5em;
	height:1.5em;
	border:2px solid #2fe9b0;
	border-radius:100px;
	position:relative;
	vertical-align:middle;
	top:-0.2em;
	margin:0 0.5em;
	transform:translateZ(0);
	transition:transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
i.arrow::after {
	position:absolute;
	display:block;
	content:"";
	border-width:2px;
	border-color:#2fe9b0;
	border-style:solid;
	border-left:none;
	border-bottom:none;
	width:30%;
	height:30%;
	left:50%;
	top:50%;
	margin-top:-23%;
	margin-left:-27%;
	transform:rotate(45deg) translateZ(0);
	}
a:hover i.arrow {
	transform:translateX(0.4em);
	}
	
#wrapper {
	overflow:hidden;
	}



/*========================
アニメーション
========================*/
/*スライドイン 左から右*/
.slideRight {
	transform:translateX(-30px);
	opacity:0;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideRight.on {
	transform:translateX(0px);
	opacity:1;
	}

/*スライドイン 右から左*/
.slideLeft {
	transform:translateX(30px);
	opacity:0;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideLeft.on {
	transform:translateX(0px);
	opacity:1;
	}
	
/*スライドイン 上から下*/
.slideDown {
	transform:translateY(-30px);
	opacity:0;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideDown.on {
	transform:translateY(0px);
	opacity:1;
	}
	
/*スライドイン 下から上*/
.slideUp {
	transform:translateY(30px);
	opacity:0;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideUp.on {
	transform:translateY(0px);
	opacity:1;
	}

/*フェードイン*/
.fadeIn {opacity:0;transition:opacity 0.5s linear;}
.fadeIn.on {opacity:1;}

/*スライド 幅*/
.slideWidth {
	width:0;
	transition:width 1s cubic-bezier(0.77, 0, 0.175, 1);
	}
.slideWidth.on {
	width:100%;
	}
	


.pc {display:block;}
.sp {display:none;}



/*========================
スマホ レイアウト
========================*/
@media (max-width:768px) {
.sp {display:block;}
.pc {display:none;}
	
}