@charset "utf-8";
/*=============================================================
 tmpl Layout
=============================================================*/
/* animation
-------------------------------------------------------------*/
.setScMc{
	opacity:0;
	transform:translateY(40px);
	transition:all 0.6s ease 0.2s;
}
.setScMc.enter{
	opacity:1;
	transform:translateY(0);
}
/*=============================================================
 SIDE
=============================================================*/
#sideAll{
	width: calc(100%);
	background: url("../img/side_bg.png") no-repeat center center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
}
#sideL{
	width: calc(50% - 300px);
	background: url("../img/side_bg_l.png") no-repeat center center;
	background-size: contain;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
}
#sideR{
	width: calc(50% - 300px);
	background: url("../img/side_bg_r.png") no-repeat center center;
	background-size: contain;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
}
#sideL div{
	height: 20%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
#sideR div{
	height: 20%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#sideL div img,#sideR div img{
	width: auto !important;
	height: 100% !important;
}



/* header
-------------------------------------------------------------*/
header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
}
#header{
	width: 100%;
	max-width: 600px;
	height: 60px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	position: relative;
	background: #fff;
}
#header h1{
	width: 150px;
}

/* #wrapper
-------------------------------------------------------------*/
article{
}
#wrapper{
	width: 100%;
	max-width: 600px;
	margin: 0 auto 0;
	padding: 60px 0 0;
	background:#fff;
	position: relative;
	z-index: 999;
	box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.6);
}
.section{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	margin-top: clamp(40px, calc(40px + 0.0889 * (100vw - 375px)), 60px);
	padding: 0 20px;
}
.sectionInner{
	position: relative;
	z-index: 1;
}
/* footer
-------------------------------------------------------------*/
footer{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	z-index: 1000;
}
#footerInner{
	background: url("../img/bg_content.png") no-repeat top center;
	background-size: cover;
}
#footer .copy {
	background-color: #fdd000;
	color: #000;
	text-align: center;
		padding: 3% 0;
}
#footer .footerSns{
	width: 58%;
	margin: 0 auto 0;
	padding: 0 0 15%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footer .footerSns li{
	width: 23%;
}
#footer .wh_base {
	width: 100%;
	padding: 0 0 3em;
	text-align: center;
}
#footer .wh_base ul{
	display: inline-block;
	text-align: left;
}
#footer .wh_base ul li+li{
	margin-top: 1em;
}
#footer .wh_base ul li a{
	display: inline-block;
	font-size: 115%;
	font-weight: 600;
	padding: 0 0 0 1.2em;
	background: url("../img/arw.png") no-repeat 0 center;
}
#footer .ftrBtm{
	width: 72.5%;
	margin: 0 auto 0;
	padding: 0 0 3em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footer .ftrBtm .mark50th{
	width: 47.2%;
}
#footer .ftrBtm .logo{
	width: 36.5%;
}