@charset "utf-8";
/* ===================================================================

CSS information

 style info :common CSS

=================================================================== */
@media only screen and (min-width:641px){
	/* ----------------------------------------------------
		基本設定
	---------------------------------------------------- */
	body{
		color: #333;
		font-size: 13px;
		font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
		line-height: 1.5;
		min-width: 960px;
		-webkit-text-size-adjust: 100%;
	}

	a:link { color:#00873c;text-decoration:underline; }
	a:visited { color:#00873c; }
	a:hover { color:#00873c;text-decoration: underline; }
	a:active { color:#00873c; }
	.br-pc { display:none; }

	/* ----------------------------------------------------
		#wrap
	---------------------------------------------------- */
	#wrap{

	}

	/* ----------------------------------------------------
		#header
	---------------------------------------------------- */
	#header{
		width: 960px;
		margin: 0 auto 0;
		padding: 35px 0;
		position: relative;
		background-color:#fff;
	}
	#logo{text-align: center;}
	#logo .main{margin: 10px 0 15px;}
	#human{
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#tanomana{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	#header ul{
		position: absolute;
		top: 57px;
		right: 0px;
	}
	#header ul li{
		margin: 0 0 10px 0;
	}

	/* ----------------------------------------------------
		#content
	---------------------------------------------------- */
	#contents{
		background: url() no-repeat center 423px;
		background-color: #fff;
	}
	/* ----------------------------------------------------
		共通
	---------------------------------------------------- */
	.inner{
		width: 960px;
		margin: 0 auto;
	}
	h2{
		border: 1px solid #333;
		border-left: none;
		border-right: none;
		padding: 2px 0;
	}
	h2 span{
		display: block;
		width:960px;
		border: 1px solid #333;
		border-left: none;
		border-right: none;
		text-align: center;
		
	}
	.care{
		width:750px;
		margin:0 auto;
		padding-top:18px;
		font-size:20px;
		line-height:1.8;
		padding-bottom:10px;
	}
	.care_2{
		width:750px;
		margin:0 auto;
		font-size:16px;
		line-height:1.8;
		padding-bottom:10px;
	}
	
	.btn{
		margin: 2% 0%;
		text-align: center;
	}
	.pc_none {display: none;}
	#pageback{
		width: 200px;
		margin: 30px auto 0;
	}
	#pageback a{
		display: block;
		text-align: center;
		padding: 10px;
		background-color: #333;
		color: #fff;
		font-size: 14px;
	}
	#pagetop{
		position: fixed;
		bottom: -130px;
		right: 30px;
		z-index: 10000;
	}
	/* ----------------------------------------------------
		#main
	---------------------------------------------------- */
	#main{
		background: url(../img/bg_main.png) repeat-x left;
		background-size: auto;
		height: 250px;
		min-width: 960px;
		margin: 0 0 40px 0;
	}
	#main .inner{
		height: 460px;
		overflow: hidden;
		position: relative;
	}
	#main .inner h1{
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 10;
	}
	/* ----------------------------------------------------
		#section01
	---------------------------------------------------- */
	#section01{
		padding: 0 0 10px 0;
	}
	#section01 .inner ul .toptext{float:left; width:80%; margin-left:30px; margin-top:15px; margin-bottom:10px;}
	#section01 .inner ul .topimg{float:right; width:15%; text-align:center; margin-top:35px; margin-right:10px; margin-bottom:20px;}
	#section01 .catch{
		text-align: left;
		color: #bb7025;
		font-size: 150%;
		margin: 20px 0 30px 0;
	}
	.off{
		color:#cc0000;
	}

	.care{
		width:750px;
		margin:0 auto;
		padding-top:10px;
		font-size:120%;
		line-height:2;
	}
	.care_2{
		width:750px;
		margin:0 auto;
		font-size:120%;
		padding-bottom:20px;
		line-height:2;
	}
	
	.care_3{
		width:750px;
		margin:0 auto;
		font-size:120%;
		padding:10px 0 40px;
		line-height:2;
	}
	
	/* ----------------------------------------------------
		#section02　PC
	---------------------------------------------------- */
	#section02{
		padding: 40px 0 30px 0;
		background-color:#ffffff;
	}
	#section02 h2{margin: 0 0 15px 0;}
	#section02 h2 span{
		padding: 8px 0;
	}
	#section02 .crs{
		width: 760px;
		background:#fff;
		border-radius: 10px;/* CSS3草案 */
		-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
		-moz-border-radius: 10px;/* Firefox用 */
		font-size: 120%;
		padding: 20px 20px 10px;
		margin: 20px auto;
		box-shadow:1px 1px 2px #ddd;
		border:#CCC 1px solid;
	}
	#section02 .crs .lBox{
		float: left;
		width: 150px;
		margin-right: 20px;
	}
	#section02 .crs .rBox{
		float: left;
		width: 590px;
	}
	#section02 .crs .crst{
		font-size: 155%;
		font-weight: bold;
	}
	#section02 .crs .crst span{
		font-size: 60%;
		font-weight: bold;
	}
	#section02 .crs .price{
		font-size: 110%;
		font-weight: bold;
		margin-bottom:1px;
	}
	#section02 .crs .price span.spp{font-size: 100%;}
	#section02 .crs .price span.tryangle{font-size: 65%; color:#333;}
	
	#section02 .crs .price span{
		font-size: 120%;
		font-weight: bold;
	}
	
	
	#section02 .other{
		text-align: center;
		font-size: 180%;
		font-weight: bold;
		margin: 30px 0;
	}
	
	#section02 .inner .sp_none{
		margin:20px 0 auto
	}
	
	#section02 .crs.clearfix .rBox .detail{ padding:20px 0;
		
		
	}
	
	/* ----------------------------------------------------
		#section03
	---------------------------------------------------- */
	#section03{
		padding: 40px 0 10px 0;
		background: url() repeat top left;
	}
	#section03 .date{
		text-align: center;
		margin-bottom: 50px;
	}
	#section03 .notice{
		width: 610px;
		margin: 20px auto;
	}
}
footer{
}
footer #fPagetop{
	text-align:center;
}
footer #fPagetop a{
	color:#333;
	display:block;
	text-decoration:none;
	padding:10px;
}
footer #copyright {
	padding:0px 0 10px 0;
	text-align:center;
}
footer #copyright span {
    display: inline-block;
    margin-right: 4px;
    width: 46px;
}
footer #copyright span img{
	vertical-align:middle;
}
footer ul {
    text-align: center;
	margin-bottom:10px;
}
footer ul li {
    display: inline-block;
    margin-left: 8px;
}
footer ul li:first-child {
    margin-left: 0;
}
footer ul li a{
	color:#999;
	text-decoration:none;
}
footer ul li a:hover{
	text-decoration:underline;
}

#section02 .crsguide{
		width: 860px;
		background:#fff;
		font-size: 120%;
		padding: 20px;
		margin: 20px auto 0;
	}
.guideArea{max-width:900px;margin:0 auto;padding:0 30px 0px;}
.guideArea__ttl{margin:40px auto 20px;}
.guideArea dl{width:100%;max-width:860px;margin:0 auto;padding:20px 0;color:#666;font-size:0;border-bottom:1px solid #a28b67;}
.guideArea dt{display:inline-block;color:#574633;font-size:14px;vertical-align:top}
.guideArea dd{display:inline-block;font-size:14px;vertical-align:top}
.guideArea dl a{color:#666}
.guideArea dt{width:20%;margin-right:10px;font-weight:700;line-height:1.5;padding-right:5%}
.guideArea dd{width:70%;line-height:1.8}
.guideArea dd li{padding-left:1em;text-indent:-1em}
.guideArea dd a{ color:#00873c;}
.guideArea dd .goods-img{padding:0 0 15px 25px;width:47%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}
.guideArea dd span{text-align:center; display: block;}




@media only screen and (max-width:640px){

	/* ----------------------------------------------------
		基本設定
	---------------------------------------------------- */
	body{
		color: #333;
		font-size: 14px;
		font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
		background-color:#fff;
		line-height: 1.5;
		min-width: 100%;
		-webkit-text-size-adjust: 100%;
	}

	a:link { color:#00873c; text-decoration: underline;}
	a:visited { color:#00873c; }
	a:hover { color:#00873c;text-decoration: underline; }
	a:active { color:#00873c; }
	.br-sp { display:none; }

	/* ----------------------------------------------------
		#wrap
	---------------------------------------------------- */
	#wrap{
		background-color:green;

	}

	/* ----------------------------------------------------
		#header
	---------------------------------------------------- */
	#header{
		width: 100%;
		margin: 0 auto 0;
		padding: 6.5% 0;
		position: relative;
		background-color:#ffffff;
	}
	#logo{
		text-align: center;
		margin: 0 20px 20px;
	}
	#logo .main{margin: 10px 0 15px;}
	#human{
		width: 20%;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#tanomana{
		width: 20%;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	#header ul{
		margin: 0 10px;
	}
	#header ul li{
		width: 48%;
		float: left;
		margin: 0 0 10px 0;
	}
	#header ul li:first-child{
		margin: 0 4% 0 0;
	}

	/* ----------------------------------------------------
		#content
	---------------------------------------------------- */
	#contents{
		background-color: #ffffff;
	}
	/* ----------------------------------------------------
		共通
	---------------------------------------------------- */
	img{
		width: 100%;
		height: auto;
	}
	.inner{
		width: 94%;
		margin: 0 auto;
	}
	
	h2{
		border: 1px solid #333;
		border-left: none;
		border-right: none;
		padding: 2px 0;
	}
	h2 span{
		display: block;
		border: 1px solid #333;
		border-left: none;
		border-right: none;
		text-align: center;
	}
	.btn{
		text-align: center;
		margin: 0 20px;
	}
	.sp_none {display: none;
	}
	#pageback{
		width: 200px;
		margin: 30px auto 0;
	}
	#pageback a{
		display: block;
		text-align: center;
		padding: 10px;
		background-color: #333;
		color: #fff;
		font-size: 14px;
	}
	#pagetop{
		width: 15%;
		position: fixed;
		bottom: -130px;
		right: 20px;
		z-index: 10000;
	}
	#pagetop a img{
		width: 100%;
		height: auto;
	}
	
	/* ----------------------------------------------------
		#main
	---------------------------------------------------- */
	#main{
		background: none no-repeat center center;
		background-size: cover;
		min-width: 100%;
		margin: 0;
	}
	#main .inner{
		overflow: hidden;
		position: relative;
	}
	#main .inner h1{
		left: 6%;
		top: 0px;
		z-index: 10;
		width: 100%;
	}
	/* ----------------------------------------------------
		#section01
	---------------------------------------------------- */
	#section01{
		background: #fff url() no-repeat;
		background-size: 85%;
		padding: 4% 2% 1%;
	}
	#section01 .inner ul .toptext{float:left; width:74%; margin-bottom:5%;}
	#section01 .inner ul .topimg{float:right; width:25%; text-align:center;}
	
	#section01 .catch{
		text-align:left;
		color: #bb7025;
		font-size: 105%;
		margin: 0 auto;
		width:95%;
	}
	
	#section01 .catch span{
		letter-spacing:-1px;
		margin-bottom:4%;
	}
	.off{
		color:#cc0000;
	}
	.care{
		width:90%;
		margin:0 auto;
		padding:10px 0;
		font-size:110%;
		line-height:1.6;
	}
	.care_2{
		width:90%;
		margin:0 auto;
		padding-bottom:5%;
		font-size:110%;
		line-height:1.6;
	}
	
	.care_3{
		width:90%;
		margin:0 auto;
		padding-top:10px;
		padding-bottom:5%;
		font-size:110%;
		line-height:1.6;
	}
	
	/* ----------------------------------------------------
		#section02 スマートフォン
	---------------------------------------------------- */
	#section02{
		padding: 4% 0;
		background-size: 85%;
		background-color:#fff;/*ピンクにかえる*/
		
	}
	#section02 h2{margin: 0 10px 20px;}
	#section02 h2 span{
		padding: 8px;
	}
	#section02 .crs{
		width: 92%;
		background: #fff;
		border-radius: 10px;/* CSS3草案 */
		-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
		-moz-border-radius: 10px;/* Firefox用 */
		padding: 4%;
		margin: 8% auto;
		box-shadow:1px 1px 2px #ddd;
		border:#CCC 1px solid;
	}
	#section02 .crs .lBox{
		float: none;
		width: 50%;
		margin: 3% auto;
	}
	#section02 .crs .rBox{
		text-align:left;
		float: none;
		width: 100%;
	}
	#section02 .crs .crst{
		font-size: 130%;
		font-weight: bold;
		text-align:left;
		padding:0; margin:0;
	}
	#section02 .crs .crst span{
		font-size: 80%;
		font-weight: bold;
		
	}
	#section02 .crs .price{
		text-align:center;
		font-size: 100%;
		font-weight: bold;
		margin-bottom: 2%;
	}
	#section02 .crs .price span.spp{font-size: 90%;}
	
	#section02 .crs .price span.tryangle{font-size: 80%; color:#333;}
	
	#section02 .crs .price span{
		font-size: 128%;
		font-weight: bold;
	}
	#section02 .crs .detail{
		width: 70%;
		margin: 0 auto;
		padding:5% 0;
	}
	#section02 .other{
		text-align: center;
		font-size: 115%;
		font-weight: bold;
		margin: 3% 0;
	}
	/* ----------------------------------------------------
		#section03
	---------------------------------------------------- */
	#section03{
		padding: 4% 2%;
		background: #fff url() repeat top left;
		background-size: 85%;
	}
	#section03 .date{
		text-align: center;
		margin-bottom: 4%;
	}
	#section03 .notice{
		width: 100%;
		font-size: 90%;
		margin: 2% auto;
	}
	/* ----------------------------------------------------
		#footer
	---------------------------------------------------- */
	#footer{
		width: 100%;
		margin: 20px auto 20px;
		position: relative;
		font-size: 9px;
		text-align: center;
	}
	#copy{
		margin: 5px 0 0;
	}
#section02 .crsguide{
		width: 90%;
		background:#fff;
		font-size: 110%;
		padding: 0px 20px 20px;
		margin: 20px auto 0;
	}	
.guideArea{margin:0;padding:0;}
.guideArea dl{width:100%}
.guideArea dt{width:100%;font-size:12px;font-size:4vw;padding-right:0;}
.guideArea dd{width:100%;font-size:11px;font-size:3.5vw;line-height:1.45;}
.guideArea dd li+li{margin-top:5px;}	
}