@charset "utf-8";

/*
******************************************************************
* lp.css
* LP全体に作用するCSSです。全体を通したモジュールや設定などを記述してください。
******************************************************************
*/
/*
******************************************************************
* import
******************************************************************/
/* アニメーション用 */
@import url(./lp_animation.css);


/*
******************************************************************
* common
******************************************************************/
html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
html {
	width: 100%;
	height: 100%;
	/*background-color: #000;*/
}
body {
	width: 100%;
	height: 100%;
	color: #333;
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
	line-height: 1.5;
	word-wrap: break-word;
	vertical-align: top;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, p {
	margin: 0;
	padding: 0;
}

img {
	vertical-align: top;
	line-height: 1;
}

*[data-sf] {
 opacity: 0;
}

*[data-sf="toggle"] {
 opacity: 1;
}

.fixed {
	position: fixed;
}

.sp img {
	width: auto;
	max-width: 100%;
}



/*
******************************************************************
* module
******************************************************************/




/*
******************************************************************
* loader
******************************************************************/
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
	background: #111;
}
#loader:before {
	content: "";
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: #111;
	opacity: 1;
	-webkit-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	transition: all 0.75s ease;
}
.pageLoading #loader:before {
	opacity: 0;
}

/* PC */
/* loader__txt */
.loader .loader__txt {
	position: absolute;
	z-index: 3;
	right: 10%;
	bottom: 10%;
	width: 220px;
	height: 80px;
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.loader .loader__txt > span {
	display: block;
	position: relative;
	vertical-align: middle;
	text-align: center;
	max-width: 150px;
}
.loader .loader__txt > span:before {
	content: url(../img/loading_txt01.png);
	display: block;
	position: absolute;
	top: 0;
	-webkit-transform: perspective(200);
	-o-transform: perspective(200);
	transform: perspective(200);
	-webkit-animation: 'loadingTxt_shake' 1s ease infinite;
	-o-animation: 'loadingTxt_shake' 1s ease infinite;
	animation: 'loadingTxt_shake' 1s ease infinite;
}
/* loader__bg */
.loader .loader__bg {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.loader .loader__bg > * {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-ms-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
}
.loader .loader__bgCity {
	background-image: url(../img/loading_bg01.jpg);
	-webkit-transition: background 2.5s ease-in-out;
	-o-transition: background 2.5s ease-in-out;
	transition: background 2.5s ease-in-out;
}
.loader .loader__bgHanma {
	z-index: 3;
	background-image: url(../img/loading_img01.png);
	-webkit-transition: background 2.2s ease-in-out;
	-o-transition: background 2.2s ease-in-out;
	transition: background 2.2s ease-in-out;
}
.loader .loader__bgTable {
	opacity: 0;
	z-index: 2;
	background-image: url(../img/loading_img02.png);
	-webkit-transition: background 2.1s ease-in-out;
	-o-transition: background 2.1s ease-in-out;
	transition: background 2.1s ease-in-out;
}

/* loader__bar */
.loader .loader__bar > *,
.loader .loader__bar > *:before {
	display: block;
	content: "";
	height: 2px;
	-webkit-transition: width 1s ease-in;
	-o-transition: width 1s ease-in;
	transition: width 1s ease-in;
}
.loader .loader__bar > *:before {
	height: 1px;
}
.loader .loader__bar--left:before {
	background: rgba(196,77,141,0.7);
	-webkit-animation: 'loadingTxt_shake' 2.2s 0.5s ease infinite;
	-o-animation: 'loadingTxt_shake' 2.2s 0.5s ease infinite;
	animation: 'loadingTxt_shake' 2.2s 0.5s ease infinite;
}
.loader .loader__bar--right:before {
	background: rgba(38,45,222,0.7);
	-webkit-animation: 'loadingTxt_shake' 2s ease infinite;
	-o-animation: 'loadingTxt_shake' 2s ease infinite;
	animation: 'loadingTxt_shake' 2s ease infinite;
}
.loader .loader__bar--left,
.loader .loader__bar--right {
	position: absolute;
	z-index: 1;
	top: 250px;
	width: 0%;
	-webkit-animation: 'loadingBar_idle' 1.5s ease infinite;
	-o-animation: 'loadingBar_idle' 1.5s ease infinite;
	animation: 'loadingBar_idle' 1.5s ease infinite;
}
.loader .loader__bar--left {
	left: 0;
	background: -moz-linear-gradient(left,  rgba(66,7,94,0.01) -1%, rgba(67,7,95,0.01) 0%, rgba(93,9,124,1) 20%, rgba(197,18,242,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(66,7,94,0.01) -1%,rgba(67,7,95,0.01) 0%,rgba(93,9,124,1) 20%,rgba(197,18,242,1) 100%);
	background: linear-gradient(to right,  rgba(66,7,94,0.01) -1%,rgba(67,7,95,0.01) 0%,rgba(93,9,124,1) 20%,rgba(197,18,242,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0342075e', endColorstr='#c512f2',GradientType=1 );
}
.loader .loader__bar--right {
	margin-top: 45px;
	right: 0;
	background: -moz-linear-gradient(left,  rgba(57,172,249,1) 0%, rgba(13,82,108,1) 80%, rgba(2,59,73,0.01) 100%);
	background: -webkit-linear-gradient(left,  rgba(57,172,249,1) 0%,rgba(13,82,108,1) 80%,rgba(2,59,73,0.01) 100%);
	background: linear-gradient(to right,  rgba(57,172,249,1) 0%,rgba(13,82,108,1) 80%,rgba(2,59,73,0.01) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39acf9', endColorstr='#03023b49',GradientType=1 );
}


/* SP */
.loader__sp {}
.loader__sp .loader__txt {
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../../sp/common/img/loading_bg01.png) center bottom no-repeat #111;
	-webkit-background-size: contain;
	background-size: contain;
}
.loader__sp .loader__txt > span,
.loader__sp .loader__txt > span:before  {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	width: 67px;
	height: 184px;
	margin: -100px auto 0;
}
.loader__sp .loader__txt > span:before  {
	top: 0;
	margin-top: auto;
}
.loader__sp .loader__txt > span > img {
	width: 100%;
}
.loader__sp .loader__txt > span:before {
	content: "";
	background: url(../../sp/common/img/loading_txt01.png);
	-webkit-background-size: contain;
	background-size: contain;
	top: 0;
	-webkit-transform: perspective(200);
	-o-transform: perspective(200);
	transform: perspective(200);
	-webkit-animation: 'loadingTxt_shake' 1s ease infinite;
	-o-animation: 'loadingTxt_shake' 1s ease infinite;
	animation: 'loadingTxt_shake' 1s ease infinite;
}
@media screen and (min-width: 500px) {
	.loader__sp .loader__txt {
		background-position: center;
		-webkit-background-size: cover;
		background-size: cover;
	}
}