@charset "utf-8";


/* --------------------------
 #infoArea
-------------------------- */
#infoArea .contents{
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.2rem;
}
#infoArea .contents a { color: #000; letter-spacing: 0.05em; font-weight: 300;}
#infoArea .contents a:hover { opacity: 0.5;}


/* --------------------------
 #top01
-------------------------- */

#top01 .keyBox{
text-align: center;
background: rgba(245,0,0,0.80);
}
#top01 .keyBox h2{
line-height: 1.4;
color: #fff;
}

@media only screen and (max-width:750px) {
/* sp */
	#top01{
	position:relative;
	padding-top: 110px;
	padding-bottom: 126px;
	background:url('../img/kv01_sp.jpg') center center no-repeat;
	background-size: cover;
	}
	#top01 .keyBox{
	padding-top: 80px;
	padding-bottom: 90px;
	}
	#top01 .keyBox h2{
	margin-bottom: 25px;
	font-size: 3.0rem;
	}
    #top01 .keyBox h2 img { width: 90%; height: auto;}
	#top01 .keyBox p{ padding: 0 20px;}

}

@media only screen and (min-width: 751px) {
/* PC */
	#top01{
	height: 710px;
	padding-top: 207px;
	background:url('../img/kv01.jpg') center center no-repeat;
	background-size: cover;
	overflow:hidden;
	}
	#top01 .keyBox{
	padding-top: 70px;
	padding-bottom: 50px;
	min-height: 380px;
	}
	#top01 .keyBox h2{
	margin-bottom: 40px;
	font-size: 5.8rem;
	}
}



/* --------------------------
 #top02
-------------------------- */

#top02 .keyBox{background: #fff;color: #e60012;}
#top02 h2{text-align: center;}
#top02 h2.top02ttl{color: #e60012; letter-spacing: 0.07em;}

/* 赤まる */
#top02 ul.roundBox li{
/*position: relative;
background: #e60012;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 1.4;
	width: 180px;
	height: 180px;*/
	margin: 15px;
/*	padding-top: 85px;*/
}
/*#top02 ul.roundBox li span{
position: absolute;
font-family: Arial, Helvetica, "sans-serif";
line-height: 1;
	top: 35px;
	left: 45%;
	font-size: 3.6rem;
}
#top02 ul.roundBox li p{
display: table-cell;
padding: 0 15px;
vertical-align: middle;
	font-size: 1.6rem;
	height: 70px;
	width: 180px;
}
#top02 ul.roundBox li:first-child p{
	font-size: 1.3rem;
}
*/

@media only screen and (max-width:750px) {
/* sp */
	#top02{
	position:relative;
	padding-top: 50px;
	padding-bottom: 20px;
	background:url('../img/kv02_sp.jpg') center center no-repeat;
	background-size: cover;
	}
	#top02 .keyBox{
	padding-top: 35px;
	margin-bottom: 40px;
	}
	#top02 .keyBox h2{
	margin: 0 20px 30px;
	font-size: 2.0rem;
	line-height: 1.75;
    letter-spacing: 0.09em;
	}
	#top02 .keyBox p{
	padding: 0 20px 20px;
    letter-spacing: 0.08em;
	}
	#top02 h2.top02ttl{
	font-size: 2.4rem;
	margin-bottom: 30px;
	}
	#top02 ul.roundBox{margin-bottom: 25px;}

#top02 ul.roundBox li{
line-height: 1.4;
	width: 140px;
	height: 140px;
	margin: 10px;
}
#top02 ul.roundBox li span{
position: absolute;
line-height: 1;
	top: 15px;
	left: 45%;
	font-size: 3.2rem;
}
#top02 ul.roundBox li p{ font-size: 1.1rem;}
#top02 ul.roundBox li:first-child p{ font-size: 1.0rem;}
#top02 ul.roundBox li img { width: 100%; height: auto;}
}

@media only screen and (max-width:328px) {
#top02 ul.roundBox li{
	width: 120px;
	height: 120px;
}

}

@media only screen and (min-width: 751px) {
/* PC */
	#top02{
	padding-top: 80px;
	padding-bottom: 40px;
	background:url('../img/kv02.jpg') center center no-repeat;
	background-size: cover;
	}
	#top02 .keyBox{
	padding-top: 70px;
	padding-bottom: 40px;
	margin-bottom: 75px;
	}
	#top02 .keyBox h2{
	margin-bottom: 40px;
	font-size: 2.4rem;
	line-height: 1.6;
	}
	#top02 .keyBox p{
	padding: 0 110px 20px;
    text-align: justify;
    line-height: 1.9em;
    letter-spacing: 0.07em;
	}
	#top02 h2.top02ttl{
	font-size: 3.0rem;
	margin-bottom: 20px;
    letter-spacing: 0.15em;
	}
	#top02 ul.roundBox{margin-bottom: 40px;}
	#top02 ul.roundBox img{ width: 180px; height: auto;}
}




/* --------------------------
 #bizArea
-------------------------- */
#bizArea h2{
text-align: center;
color: #e60012;
}
#bizArea ul{text-align: center;}
#bizArea ul li{
display: inline-block;
padding: 0 15px;
text-align: center;
}

@media only screen and (max-width:750px) {
/* sp */
	#bizArea{padding: 20px 0 25px;}
	#bizArea h2{
	padding: 0 0 40px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#bizArea ul{margin-bottom: 45px;}
	#bizArea ul li .bizlogoImg{width: 90px;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#bizArea{padding: 80px 0 80px;}
	#bizArea h2{
	padding: 0 0 80px;
	letter-spacing: 1.0rem;
	font-size: 3.0rem;
	}
	#bizArea ul{margin-bottom: 90px;}
	#bizArea ul li .bizlogoImg{width: 158px;}
}


/* --------------------------
 #topicsArea
-------------------------- */

#topicsArea {
color: #e60012;
text-align: center;
}
#topicsArea .topicImg {width: 100%;}

@media only screen and (max-width:750px) {
/* sp */
	#topicsArea{
	position:relative;
	padding: 20px 15px 0;
	background:url('../img/kv03_sp.jpg') center center no-repeat;
	background-size: cover;
	}
	#topicsArea h2{
	padding: 0 0 30px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#topicsArea{ letter-spacing: 0.08em;}
	#topicsArea p{ text-align: justify;}

	#topicsArea .bnrlist { margin-top: 25px;}
	#topicsArea .bnrlist li{ margin-bottom: 20px;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#topicsArea{
	padding-top: 80px;
	padding-bottom: 100px;
	background:url('../img/kv03.jpg') center center no-repeat;
	background-size: cover;
	}
	#topicsArea h2{
	padding: 0 0 45px;
	letter-spacing: 1.0rem;
	font-size: 3.0rem;
	}
	#topicsArea .bnrlist { margin-top: 35px;}
	#topicsArea .bnrlist li{ margin-bottom: 40px;}
	#topicsArea p{ letter-spacing: 0.08em;}
}







/* --------------------------
 #stepArea
-------------------------- */

#stepArea {color: #e60012;}
#stepArea img {width: 100%;}

#stepArea h2{
background-color: #fff;
padding: 0;
text-align: center;
}

#stepArea .steplist li{
background: #fff;
padding: 8px 20px 20px;
margin-bottom: 20px;
}
#stepArea .steplist li span{
display: inline-block;
margin-left: -13px;
line-height: 1;
}
#stepArea .steplist li strong{
display: block;
margin-bottom: 1rem;
}

@media only screen and (max-width:750px) {
/* sp */
	#stepArea{
	position:relative;
	padding: 40px 0 35px;
	background:url('../img/kv04_sp.jpg') center center no-repeat;
	background-size: cover;
	}
	#stepArea h2{
	margin-bottom: 30px;
	padding: 7px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	background: rgba(255,255,255,0.85);
	}
	#stepArea .steplist { margin-top: 25px;}
	#stepArea .steplist li{
	width: 100%;
	height: 100%;
	margin: 0 20px 20px;
	background: rgba(255,255,255,0.8);
	}
	#stepArea .steplist li span{ font-size: 2.4rem;}
	#stepArea .steplist li strong{ font-size: 2.4rem;line-height: 1.4;}
	
	#stepArea .prev,
	#stepArea .next{
	position: absolute;
	top: 48%;
	background: #e60012;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 1;
	text-align: center;
	color: #fff;
	}	
	#stepArea .prev{ left: -10px;}
	#stepArea .next{ right: -10px;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#stepArea{
	padding-top: 90px;
	padding-bottom: 50px;
	background:url('../img/kv04.jpg') center center no-repeat;
	background-size: cover;
	}
	#stepArea h2{
	margin-bottom: 40px;
	letter-spacing: 1.0rem;
	font-size: 3.0rem;
	}
	#stepArea .steplist { margin-top: 35px;}
	#stepArea .steplist li{
	margin-bottom: 40px;
	width: 30%;
	}
	#stepArea .steplist li span{ font-size: 3.0rem; letter-spacing: 0.09em;}
	#stepArea .steplist li p{ font-size: 1.3rem;letter-spacing: 0.06em;text-align: justify;}
	#stepArea .steplist li strong{ font-size: 1.8rem; letter-spacing: 0.07em;}
}



/* --------------------------
 #officeArea
-------------------------- */

#officeArea h2{
text-align: center;
color: #e60012;
}

#officeArea ul.officImg img{width: 100%;}

@media only screen and (max-width:750px) {
/* sp */
	#officeArea{padding: 20px 10px 0;}
	#officeArea h2{
	padding: 0 0 30px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#officeArea ul.officImg li{
	width: 50%;
	margin-bottom: 20px;
	padding: 0 10px 10px;
	}
}

@media only screen and (min-width: 751px) {
/* PC */
	#officeArea{padding: 100px 0 90px;}
	#officeArea h2{
	padding: 0 0 60px;
	letter-spacing: 1.0rem;
	font-size: 3.0rem;
	}
	#officeArea ul.officImg li{width: 120px;}
}



/* --------------------------
 #recArea
-------------------------- */

#recArea {
background:#e60012;
color: #fff;
}
#recArea h2{text-align: center;}
#recArea a{color: #fff;}



@media only screen and (max-width:750px) {
/* sp */
	#recArea{padding: 50px 15px 40px;}
	#recArea h2{
	padding-bottom: 50px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#recArea h3{
	padding-bottom: 30px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#recArea h4{
	padding-bottom: 20px;
	letter-spacing: 0.5rem;
	font-size: 1.8rem;
	}
	#recArea ul{font-size: 1.2rem;}
	#recArea .recList01,
	#recArea .recList02,
	#recArea .recList03,
	#recArea .recList04{padding-bottom: 40px;}
	#recArea .recList01 li,
	#recArea .recList02 li,
	#recArea .recList03 li,
	#recArea .recList04 li{
	width: 47%;
	padding: 8px 0;
	line-height: 1.4;
    letter-spacing: 0.08em;
	}
	#recArea ul.recList01,
	#recArea ul.recList03{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#recArea{padding-top: 90px;padding-bottom: 70px;}
	#recArea h2{
	padding: 0 0 35px;
	letter-spacing: 1.0rem;
	font-size: 3.0rem;
	}
	#recArea h3{
	padding: 0 0 15px;
	letter-spacing: 0.5rem;
	font-size: 2.4rem;
	}
	#recArea h4{
	padding: 0 0 15px;
	letter-spacing: 0.3rem;
	font-size: 1.6rem;
	}	
	#recArea ul{font-size: 1.4rem; letter-spacing: 0.08em;}
	#recArea ul.recList01,
	#recArea ul.recList03{
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #fff;
	}	
	#recArea ul.recList02,
	#recArea ul.recList04{padding-bottom: 65px;}
    #recArea ul.recList01 li,
	#recArea ul.recList02 li,
	#recArea ul.recList03 li{
	width: 33.33%;
	padding: 5px 0;
	}
	#recArea ul.recList04 li{
	width: 25%;
	padding: 5px 0;
	}
}



/* --------------------------
 #bnrArea
-------------------------- */

#bnrArea ul.bnrImg li{padding: 0 0 20px; text-align: center;}
	
@media only screen and (max-width:750px) {
/* sp */
	#bnrArea{padding: 50px 15px 10px;}
	#bnrArea ul.bnrImg li{width: 100%;}
	#bnrArea ul.bnrImg img{width: 100%;}
}
@media only screen and (min-width: 751px) {
/* PC */
	#bnrArea{padding: 100px 0 50px;}
	#bnrArea ul.bnrImg li{width: 33.3%;}
	#bnrArea ul.bnrImg img{width: 240px;}
}