@charset "utf-8";
/*-----------------------------------------------------
common
--------------------------------------------------------*/
	.forPC,
	.forTB{display:none;}
	.forSP{display:inherit;}

/*-----------------------------------------------------
sp
-------------------------------------------------------*/
html{font-size:10px;}
img {max-width:100%; height:auto;}
body{font-size:1.4rem;}
@media screen and (max-width: 374px) {
	body{font-size:1.3rem;}
}


/*--------------------------------------------------------------------
   header
---------------------------------------------------------------------*/
header{padding-top:80%;}
header .logo{
	width: calc(513px / 2);
	height: calc(80px/ 2);
	max-width: calc(100% - 30px);
	top: 5px;
	left: 5px;
}
header #hdrIn{
	width:calc(714px / 1.1);
	height:calc( 391px / 1.1);
	margin-top: 10%;
}
/*--------------------------------------------------------------------
  footer
---------------------------------------------------------------------*/
footer p{font-size:1rem;}
/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
#container{
	margin-top:80%;
	padding-top:35px;
	padding-bottom: 60px;
}
#container::before{
	background: url( "../images/main_btm_sp.png") center bottom no-repeat;
	background-size:100% 100%;
	padding-top:35px;
	position: absolute;
	top: -35px;
	left: 0;
}

/* lead
--------------------------------------------------------*/
#container .lead{padding-bottom:30px;}
#container .lead p{font-size: 1.4rem;}
/* attention
--------------------------------------------------------*/
#container .attention{
	margin: 0 auto 15px;
	padding-bottom: 20px;
}
#container .attention p{
	padding: 10px 5px 10px 30px;
	font-size: 	1.4rem;
}
#container .attention p::before{
	width: 20px;
	height: 20px;
	left: 5px;
	margin-top: -10px;
}
#container .attention p::after{
	width: 15px;
	height: 15px;
	bottom: -15px;
	right: 20px;
}

.itemList{
	max-width: 400px;
	margin: 0 auto;
}
.itemList .linkBox{
	width: 100%;
	float: none;
	padding-top: 100%;
	overflow: hidden;
	margin: 0 0 5%;
	position: relative;
}

/*modal*/
.modaal-container{max-width: 350px;	}
.modaal-content-container{padding: 0 0 25px;}
.modalContents .img {padding-bottom:15px;}
.modalContents .heading{
	max-width: 95%;
	padding-left: 40px;
	margin-bottom: 10px;
	font-size: 	1.4rem;
}
.modalContents .heading::before{
	width: 30px;
	height: 25px;
	margin-top: -13px;
}
.modalContents .linkBtn {
	max-width:260px;
	height: 45px;
}
.modalContents .linkBtn a{line-height: 45px; font-size: 1.2rem;}
.modalContents .linkBtn a::after{
	width: 15px;
	height: 15px;
	right: 10px;
	margin-top: -8px;
}



.modalContents .linkBtn a.forSP{display: block !important;}
.modalContents .linkBtn a.forTB,
.modalContents .linkBtn a.forPC{display: none;}

@media screen and (max-width: 374px) {
    /*iphone5*/
}