@charset "UTF-8";

/*-------------------------
BASE
-------------------------*/
html {
	font-family: 'Helvetica',
	'Hiragino Kaku Gothic Pro',
	'Meiryo',sans-serif;
	font-size: 62.5%;
	overflow: auto;
}
body {
	min-height: 100vh;
	font-size: 1.4rem;
	overflow: hidden;
	background: #FFF;
}
img {width: 100%; height: auto;}

/*-------------------------
LAYOUT
-------------------------*/
#wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#enterBoxL,#enterBoxR {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.sect1:before {
	content: "";
	display: block;
	padding-top: 112.5%;
}
#enterBoxL {
	border-bottom: solid 1px #CCC;
}

@media screen and (min-width: 768px) {
#wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
}

#enterBoxL,#enterBoxR {
	position: relative;
	width: 50%;
	overflow: hidden;
}
#enterBoxL {
	border-bottom: none;
}
}



#enterBoxL .pict,#enterBoxR .pict {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	transition: all 0.4s;
}
#enterBoxL .pict:hover,#enterBoxR .pict:hover {
	transform: scale(1.1);
	transition-duration: 0.4s;
}
#enterBoxL h1,#enterBoxR h1 {
	position: absolute;
	top: 0; left: 0;
	z-index: 2;
	width: 100%; height: 100%;
	pointer-events: none;
}
#enterBoxL > .btn,#enterBoxR > .btn {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	margin-top: 96.875%;
	width: 200px; height: 40px;
	pointer-events: auto;
}
#enterBoxL .btn {
	background: url(../img/enter/b_ent_uq_off.png) no-repeat center center;
}
#enterBoxR .btn {
	background: url(../img/enter/b_ent_ps_off.png) no-repeat center center;
}
#enterBoxL .btn a,#enterBoxR .btn a {
	display: block;
	width: 100%; height: 100%;
	transition: all 0.4s;
	opacity: 0.0;
}
#enterBoxL .btn a {
	background: url(../img/enter/b_ent_uq_on.png) no-repeat center center;
}
#enterBoxR .btn a {
	background: url(../img/enter/b_ent_ps_on.png) no-repeat center center;
}
#enterBoxL .btn a:hover,#enterBoxR .btn a:hover {
	opacity: 1.0;
}


footer {
	width: 100%;
	background: #FFF;
	border-top: solid 1px #CCC;
	padding: 20px 0;
	text-align: center;
}

#footInner {
	display: flex;
	flex-direction: row;
	width: 245px;
	margin: 0 auto;
}
#footColumn01 {
	width: 100px;
}
#footColumn02 {
	width: 145px;
}
.footLogo {
	width: 145px;
	margin: 0 auto;
}



/*-------------------------
*SHARE
-------------------------*/

#shareArea {
	display: flex;
	justify-content: center;
	pointer-events: auto;
}

#shareArea div a {
	color: #FFF;
	width: 40px; height: 40px;
	text-align: center;
	border-radius: 2.0rem;
	background: #02328f;
	/*border: solid 1px rgba(255,255,255,0.75);*/
	display: block;
	margin: 0 5px 30px;
	text-decoration: none;
	transition: all 0.6s;
}
#shareArea div a:hover {
	color: #02328f;
	background: #FFF;
	/*border: solid 1px rgba(255,255,255,1.0);*/
	box-shadow: 0 0 3px #00deff,0 0 3px #00deff,
	0 0 3px #00deff,0 0 3px #00deff;
}
.shareTw:before {
	content: "\f099";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareFb:before {
	content: "\f39e";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareGo:before {
	content: "\f0d5";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareLi:before {
	content: "LINE";
	font-family: Arial;
	font-size: 12px;
	line-height: 40px;
	font-weight: bold;
}
/*.shareTw {background: #5ba4d9;}
.shareFb {background: #3c5595;}
.shareGo {background: #d44c3c;}
.shareLi {background: #43b748;}*/

.shareTw,.shareFb,.shareGo,.shareLi {}