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

/* タイポグラフ（アクション）
------------------------------*/
@-webkit-keyframes mouseonListItem {
	0% {
	opacity:1;
	color:#777;
	-webkit-transform:translateX(0);
	transform:translateX(0)
	}
	49.9% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(5px);
	transform:translateX(5px)
	}
	50% {
	opacity:0;
	color:#0446a1;
	-webkit-transform:translateX(-5px) scaleY(2);
	transform:translateX(-5px) scaleY(2);
	}
	100% {
	opacity:1;
	color:#333;
	-webkit-transform:translateX(0) scaleY(1);
	transform:translateX(0) scaleY(1)
	}
}
@keyframes mouseonListItem {
	0% {
	opacity:1;
	color:#777;
	-webkit-transform:translateX(0);
	transform:translateX(0)
	}
	49.9% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(5px);
	transform:translateX(5px)
	}
	50% {
	opacity:0;
	color:#0446a1;
	-webkit-transform:translateX(-5px) scaleY(2);
	transform:translateX(-5px) scaleY(2);
	}
	100% {
	opacity:1;
	color:#333;
	-webkit-transform:translateX(0) scaleY(1);
	transform:translateX(0) scaleY(1)
	}
}

@-webkit-keyframes mouseonListItemW {
	0% {
	opacity:1;
	color:#fff;
	-webkit-transform:translateX(0);
	transform:translateX(0)
	}
	49.9% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(5px) scaleY(2);
	transform:translateX(5px) scaleY(2);
	}
	50% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(-5px) scaleY(2);
	transform:translateX(-5px) scaleY(2);
	}
	100% {
	opacity:1;
	color:#fff;
	-webkit-transform:translateX(0) scaleY(1);
	transform:translateX(0) scaleY(1)
	}
}
@keyframes mouseonListItemW {
	0% {
	opacity:1;
	color:#fff;
	-webkit-transform:translateX(0);
	transform:translateX(0)
	}
	49.9% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(5px) scaleY(2);
	transform:translateX(5px) scaleY(2);
	}
	50% {
	opacity:0;
	color:#777;
	-webkit-transform:translateX(-5px) scaleY(2);
	transform:translateX(-5px) scaleY(2);
	}
	100% {
	opacity:1;
	color:#fff;
	-webkit-transform:translateX(0) scaleY(1);
	transform:translateX(0) scaleY(1)
	}
}

@-webkit-keyframes mouseonButtonStr {
	0% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
	}
	49.9% {
	opacity:0;
	-webkit-transform:translateX(10px) scale(.3);
	transform:translateX(10px) scale(.3)
	}
	50% {
	opacity:0;
	-webkit-transform:translateX(-10px) scale(2);
	transform:translateX(-10px) scale(2)
	}
	100% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
	}
}
@keyframes mouseonButtonStr {
	0% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
	}
	49.9% {
	opacity:0;
	-webkit-transform:translateX(20px) scale(.3);
	transform:translateX(20px) scale(.3)
	}
	50% {
	opacity:0;
	-webkit-transform:translateX(-20px) scale(2);
	transform:translateX(-20px) scale(2)
	}
	100% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
	}
}


/* タイポグラフ
------------------------------*/
.js-typo {
	position: relative;
	display: inline-block;
}
.typograph a:hover .js-typo {
	-webkit-animation-name: mouseonButtonStr;
	animation-name: mouseonButtonStr;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-timing-function: cubic-bezier(.785, .135, .15, .86);
	animation-timing-function: cubic-bezier(.785, .135, .15, .86);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.typograph a:hover .js-typo:nth-of-type(1) {-webkit-animation-delay: 0s;animation-delay: 0s}
.typograph a:hover .js-typo:nth-of-type(2) {-webkit-animation-delay: 20ms;animation-delay: 20ms}
.typograph a:hover .js-typo:nth-of-type(3) {-webkit-animation-delay: 40ms;animation-delay: 40ms}
.typograph a:hover .js-typo:nth-of-type(4) {-webkit-animation-delay: 60ms;animation-delay: 60ms}
.typograph a:hover .js-typo:nth-of-type(5) {-webkit-animation-delay: 80ms;animation-delay: 80ms}
.typograph a:hover .js-typo:nth-of-type(6) {-webkit-animation-delay: .1s;animation-delay: .1s}
.typograph a:hover .js-typo:nth-of-type(7) {-webkit-animation-delay: .12;animation-delay: .12s}
.typograph a:hover .js-typo:nth-of-type(8) {-webkit-animation-delay: .14;animation-delay: .14s}
.typograph a:hover .js-typo:nth-of-type(9) {-webkit-animation-delay: .16;animation-delay: .16s}
.typograph a:hover .js-typo:nth-of-type(10) {-webkit-animation-delay: .18;animation-delay: .18s}
.typograph a:hover .js-typo:nth-of-type(11) {-webkit-animation-delay: .2s;animation-delay: .2s}
.typograph a:hover .js-typo:nth-of-type(12) {-webkit-animation-delay: .22s;animation-delay: .22s}
.typograph a:hover .js-typo:nth-of-type(13) {-webkit-animation-delay: .24s;animation-delay: .24s}
.typograph a:hover .js-typo:nth-of-type(14) {-webkit-animation-delay: .26s;animation-delay: .26s}
.typograph a:hover .js-typo:nth-of-type(15) {-webkit-animation-delay: .28s;animation-delay: .28s}
.typograph a:hover .js-typo:nth-of-type(16) {-webkit-animation-delay: .3s;animation-delay: .3s}
.typograph a:hover .js-typo:nth-of-type(17) {-webkit-animation-delay: .32s;animation-delay: .32s}
.typograph a:hover .js-typo:nth-of-type(18) {-webkit-animation-delay: .34s;animation-delay: .34s}
.typograph a:hover .js-typo:nth-of-type(19) {-webkit-animation-delay: .36s;animation-delay: .36s}
.typograph a:hover .js-typo:nth-of-type(20) {-webkit-animation-delay: .38s;animation-delay: .38s}
.typograph a:hover .js-typo:nth-of-type(21) {-webkit-animation-delay: .4s;animation-delay: .4s}

/* アイキャッチライン（アクション）
------------------------------*/
@-webkit-keyframes animateScrollBar {
	0% {
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%)
	}
	80% {
	-webkit-transform:translateY(200%);
	transform:translateY(200%)
	}
}
@keyframes animateScrollBar {
	0% {
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%)
	}
	80% {
	-webkit-transform:translateY(200%);
	transform:translateY(200%)
	}
}

/* アイキャッチライン
------------------------------*/
.tlbar {
	width: 1px;
	height: 60px;
	overflow: hidden;
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	margin: 0 auto;
	background-color: #d7d7d7
}

/* アイキャッチライン（内側）
------------------------------*/
.tlbar-in {
	height: 80%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: #65B047;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.tlbar-in.is-animate {
	-webkit-animation-name: animateScrollBar;
	animation-name: animateScrollBar;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(.645, .045, .355, 1);
	animation-timing-function: cubic-bezier(.645, .045, .355, 1);
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s
}

/* スクリーン
------------------------------*/
@-webkit-keyframes slideScreen {
	0% {
		opacity:1;
		width: 100%;
	}
	20% {
	opacity:.8;
		width: 80%;
	}
	60% {
	opacity:.8;
		width: 90%;
	}
	100% {
	opacity:0;
	width: 0;
	}
}

@keyframes slideScreen {
	0% {
		opacity:1;
		width: 100%;
	}
	20% {
	opacity:.8;
		width: 80%;
	}
	60% {
	opacity:.8;
		width: 90%;
	}
	100% {
	opacity:0;
	width: 0;
	}
}

/* インビューズーム
------------------------------*/
@-webkit-keyframes inviewZoom {
	0% {
		opacity:0;
		transform: scale(0.0);
	}
	40% {
		opacity:.3;
		transform: scale(0.8);
	}
	80% {
		opacity:1;
		transform: scale(1.1);
	}
	100% {
		opacity:1;
		transform: scale(1.0);
	}
}

@keyframes inviewZoom {
	0% {
		opacity:0;
		transform: scale(0.0);
	}
	40% {
		opacity:.3;
		transform: scale(0.8);
	}
	80% {
		opacity:1;
		transform: scale(1.1);
	}
	100% {
		opacity:1;
		transform: scale(1.0);
	}
}

/* ワイプ
------------------------------*/
.inview {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
.inview.zoom.on {
	-webkit-animation-name: inviewZoom;
	animation-name: inviewZoom;
	-webkit-animation-duration: .8s;
	animation-duration: .8s
}
.inview:before,
.inview:after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.inview:before {
	background-color: #fff;
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	z-index: 10;
}
.inview:after {
	background-color: rgba(34,37,42,0.8);
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transform: scaleX(0) translateX(0);
	-ms-transform: scaleX(0) translateX(0);
	transform: scaleX(0) translateX(0);
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	z-index: 5;
}
.inview.on:before {
	-webkit-transform: translateX(101%);
	-ms-transform: translateX(101%);
	transform: translateX(101%);
}
.inview.on:after {
	-webkit-transform: scaleX(1) translateX(101%);
	-ms-transform: scaleX(1) translateX(101%);
	transform: scaleX(1) translateX(101%);
}