@charset "UTF-8";

/* リセット */
*{box-sizing:border-box;}
body,div,p,blockquote,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,caption,tr,td,th,address,form,header,footer,nav,article,section,aside,figure,figcaption {/*font-size:12px;*/line-height:1.6;margin:0; padding:0;}
body,div,p,blockquote,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,address,header,footer,nav,article,section,aside,figure,figcaption {display:block;}
ul,ol {list-style-type:none;}
img {border:none;height:auto;vertical-align:middle;width:100%;}

/* ユーティリティー */
a {zoom:1; text-decoration:none;}
/*a:hover, a.active {opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)";}*/
a.nohover, #gnav a, #gnav-small a {opacity: 1.0; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)";	}
.fnt-g {font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "平成ゴシック", "メイリオ", "Meiryo", Helvetica, Arial, Verdana, "ＭＳ Ｐゴシック", "MS UI Gothic", sans-serif;	}
.fnt-m {font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "平成明朝", "細明朝", "ＭＳ Ｐ明朝", Times, serif;}
.flt-l, .left {float: left;}
.flt-r, .right {float: right;}
.clearfix:after {clear: both; content:"."; display: block; font-size: 0px; line-height: 0px; height: 0px; visibility: hidden; width: 0px;}
* html .clearfix {zoom:1;} /* IE6 */
*:first-child+html .clearfix {zoom:1;} /* IE7 */
.clrb {clear:both;}
.ta-l {text-align:left;}
.ta-c {text-align:center;}
.ta-r {text-align:right;}
.va-t {vertical-align:top;}
.va-m {vertical-align:middle;}
.va-b {vertical-align:bottom;}
.ime-d {ime-mode:disabled;}

body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "平成ゴシック", "メイリオ", "Meiryo", Helvetica, Arial, Verdana, "ＭＳ Ｐゴシック", "MS UI Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
}
.wrapper {
	margin: 0 auto;
	/*max-width: 1366px;*/
	max-width: 1154px;
	width: 100%;
}
footer p {
	font-size: .75em;
	padding: 10px 0;
	text-align: center;
}

/* common-anim */
.anim-movetop {
	opacity: 0;
}
.movetop {
	animation: movetop .5s linear .75s;
	animation-fill-mode: forwards;
}
@keyframes movetop {
	0% {
		opacity: 0;
		transform: translate(0, 10px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

.anim-scalex {
	opacity: 0;
	transform: scale(0, 0);
}
.scalex {
	animation: scalex .5s linear .5s;
	animation-fill-mode: forwards;
}
@keyframes scalex {
	0% {
		opacity: 0;
		transform: scale(0, 1);
		transform-origin: left center;
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: left center;
	}
}

.anim-scalex2 {
	position: relative;
	width: 0;
}
.scalex2 {
	animation: scalex2 2s ease;
	animation-fill-mode: forwards;
	position: relative;
	width: 0;
}
@keyframes scalex2 {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

.anim-maskx {
	display: inline-block;
}
.maskx {
	animation: maskx 2s ease;
	animation-fill-mode: forwards;
	overflow: hidden;
	text-align: right;
}
@keyframes maskx {
	0% {
		opacity: 1;
		transform: scale(0, 0);
		transform-origin: left top;
	}
	25% {
		transform: scale(0, 1);
		transform-origin: left top;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: left top;
	}
	50.1% {
		transform-origin: right top;
	}
	99.9% {
		transform-origin: right top;
		transform: scale(0, 1);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

.anim-fadein {
	opacity: 0;
}
.fadein {
	animation: fadein 2s ease .5s;
	animation-fill-mode: forwards;
	/*opacity: 0;*/
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeout {
	animation: fadeout 2s ease;
	animation-fill-mode: forwards;
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.anim-slideright {
	left: -100%;
	opacity: 0;
	position: relative;
}
.slideright {
	animation: slideright 2s ease .5s;
	animation-fill-mode: forwards;
	left: -100%;
	opacity: 0;
	position: relative;
}
@keyframes slideright {
	0% {
		left: -100%;
		opacity: 0;
	}
	100% {
		left: 0;
		opacity: 1;
	}
}

.anim-sliderightbkg {
	background-position: -10% 50%;
	opacity: 0;
}
.sliderightbkg {
	animation: sliderightbkg 1s linear;
	animation-fill-mode: forwards;
	background-position: 0 50%;
	opacity: 0;
}
@keyframes sliderightbkg {
	0% {
		background-position: -10% 50%;
		opacity: 0;
	}
	100% {
		background-position: 0 50%;
		opacity: 1;
	}
}

.anim-slideleft {
	right: -100%;
	opacity: 0;
	position: relative;
}
.slideleft {
	animation: slideleft 2s ease .5s;
	animation-fill-mode: forwards;
	right: -100%;
	opacity: 0;
	position: relative;
}
@keyframes slideleft {
	0% {
		opacity: 0;
		right: -100%;
	}
	100% {
		opacity: 1;
		right: 0;
	}
}

.anim-slideleftbkg {
	background-position: 110% 50%;
	opacity: 0;
}
.slideleftbkg {
	animation: slideleftbkg 1s linear;
	animation-fill-mode: forwards;
	background-position: 110% 50%;
	opacity: 0;
}
@keyframes slideleftbkg {
	0% {
		background-position: 110% 50%;
		opacity: 0;
	}
	100% {
		background-position: 100% 50%;
		opacity: 1;
	}
}

.zoomin {
	animation: zoomin 1s ease;
	animation-fill-mode: forwards;
}
@keyframes zoomin {
	0% {
		filter: grayscale(100%);
		transform: scale3d(1, 1, 1);
	}
	100% {
		filter: grayscale(0%);
		transform: scale3d(1.15, 1.15, 1.15);
	}
}

.moverb {
	animation: moverb .25s linear;
	animation-fill-mode: forwards;
}
@keyframes moverb {
	0% {
		box-shadow: 6px 6px 0 #db0716;
		left: 0;
		top: 0;
	}
	100% {
		box-shadow: -6px -6px 0 #db0716;
		left: 6px;
		top: 6px;
	}
}

.grayscale2color {
	animation: grayscale2color 1s ease;
	animation-fill-mode: forwards;
}
@keyframes grayscale2color {
	0% {
		filter: grayscale(100%);
	}
	100% {
		filter: grayscale(0%);
	}
}

@media screen and (min-width: 1024px) {
	footer p {
		font-size: .9375em;
		padding: 30px 0;
	}
}