@charset "shift_jis";

/*reset and clear*/
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form, div { margin: 0; padding: 0; border: none; text-align: left; list-style-type: none; outline:none}


.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}

* html .clearfix { height: 1px; /*\*//*/ height: auto; overflow: hidden;/**/}


/*-html-*/
body{ margin:0; padding:0; font-size:16px; line-height:1.6; color:#383838; font-family:'ƒqƒ‰ƒMƒmŠpƒS Pro W3','Hiragino Kaku Gothic Pro','ƒƒCƒŠƒI',Meiryo,'‚l‚r ‚oƒSƒVƒbƒN',sans-serif;}

a{ color:#0d3989; text-decoration:none;}
a:link{ color:#0d3989; text-decoration:none;}
a:visited{ color:#0d3989; text-decoration:none;}
a:hover{ color:#0d3989; text-decoration:underline;}
a:active{ color:#0d3989; text-decoration:underline;}

a img{ border:0;}
.clear{ clear:both;}
.bottom{ margin-bottom:10px;}
.big{ font-size:120%; font-weight:bold;}
.notice_big{ font-size:24px; font-weight:bold; color:#ec2743;}
.color{ color:#fe929d;}
.notice{ color:#ec2743;}

hr{ border-bottom:1px solid #fe929d; border-top:0px; border-right:0px; border-left:0px; padding:0; margin:5px 0;height:1px}

.center{ text-align:center}

.fl_right{ float:right; padding-left:10px}
.fl_left{ float:left; padding-right:10px}

.pc_only{ display: block}
.sp_only{ display:none}

p{ margin-bottom:10px;}
p.small{ font-size:11px}

#wrapper{ width:100%; background:url(../images/bentsu_main_back.jpg) repeat-x left  top;}
.contWrap{ width:100%; background-image:url(../images/h2_back.png) ; background-repeat:repeat-x; padding-bottom:50px}
.cont{ width:1000px; margin:40px auto 0 auto; position:relative;}
.cont img{ line-height:0.1em}
.yellow{ background:url(../images/bentsu_cont_back.jpg) repeat-x left top; padding-top:30px}
.center{ text-align:center}
/*ƒwƒbƒ_*/
#head{ background:white; height:50px; width:100%}
#headInn{ width:1000px; margin:0 auto}
#headInn:after{content: "."; display: block; clear: both; height: 0; visibility: hidden;}
#head .lead{ float:left; padding-top:15px; font-size:15px; padding-left:20px}
#header_FB_wrapper,#header_Twitter_wrapper,#header_google_wrapper{ float:right; padding-top:10px; margin-right:20px}
#header_FB_wrapper{}
#head img.logo{ float:right; padding-top:5px}

/*ƒƒCƒ“‰æ‘œ*/
#mainImg{ width:100%; height:760px; background:url(../images/bentsu_main.jpg) no-repeat center top;}
#mainImg h1{ display:none}

/*w“üƒ{ƒ^ƒ“*/
.btBox{ background:url(../images/bentsu_bt_box.jpg) no-repeat; width:1000px; height:539px; position:relative; margin:20px auto}
.btBox a{ display:block; width:580px; position:absolute; text-indent:-9999px}
.btBox a.teiki{ height:130px; left:20px; top:260px; background:url(../images/teiki_bt.png) no-repeat}
.btBox a.tsujo{ height:119px; left:20px; top:406px; background:url(../images/tsujo_bt.png) no-repeat}
.btBox a.otameshi{ height:139px; left:20px; top:110px; background:url(../images/otameshi_bt.png) no-repeat}
.btBox a:hover{ opacity:0.7}

/*–îˆó*/
div.arrowBox{ position:absolute; top:-50px; margin:20px auto; text-align:center; width:100%}



@media (max-width:768px) {
	#head{ height: auto;}
	#head .lead{ font-size: 10px; padding-top: 5px}
	#head img.logo{width: 20%; float: left; padding: 5px}
	body,
	#wrapper{ overflow-x: hidden}
	.cont { width: 98%; margin: 10px auto}
	.cont  img{ width: 100%}
	#headInn{ width:100%; padding-bottom: 10px}
		#mainImg{ background-size: 100%; height: 550px}
	.btBox{ width: 100%; background-size: 100%; height: 420px}
	.btBox a{ width: 55%; background-size:100%!important; top: 80px!important; left: 20px!important; height: 105px!important; position: relative}
	
	#header_Twitter_wrapper{ clear: both;}
}

@media (max-width:480px) {
		#mainImg{ background-size: cover;height: 300px}
		.btBox{ width: 100%; background:none; height: auto}
	.btBox a{ width: 95%; background-size:100%!important; margin: 0 auto; top: auto!important; left: auto!important; height: 100px!important; position: relative}
	
	.pc_only{ display: none}
	.sp_only{ display:block}
}


/*ƒRƒ“ƒeƒ“ƒcƒ{ƒbƒNƒX*/

/*ƒgƒbƒv¤•iÐ‰î*/
#topProduct{ margin-top:-20px; margin-bottom:30px}
#topProduct .cont img.product{ float:left; padding:0 10px 0 40px}
#topProduct .cont h2{ width:452px; height:100px; background:url(../images/productName.png) no-repeat; text-indent:-9999px; margin-top:20px}
#topProduct .cont h3{ padding:20px 0}
a:hover img{ opacity:0.7; filter: alpha(opacity=70); -moz-opacity:0.7;}

/*ƒRƒ“ƒeƒ“ƒc‚ÆŒ©o‚µ*/
.cont h2{ margin:20px 0 0 0; text-align:center}


/*LKM‚É‚Â‚¢‚Ä*/
#aboutLead{ background:url(../images/about_back1.gif) no-repeat; position:relative; width:1000px; height:357px;}
#aboutLead p.aboutLead1{ position:absolute; left:20px; top:0px; font-size:18px; line-height:36px}
#aboutLead p.aboutLead1:first-letter{ font-size:24px}
#aboutLead p.aboutLead2{ display:none}

#aboutLead2{ background:url(../images/about_back2.gif) no-repeat; position:relative; width:1000px; height:271px;}
#aboutLead2 h3{ text-indent:-9999px}
#aboutLead2 p{ position:absolute; left:50px; top:90px; font-size:18px; line-height:30px; width:514px}

/*“Á’¥*/
#feature{ padding:20px 0}
#feature img{ padding-bottom:20px}

/*Œ¤‹†ŽÒ‚æ‚è*/
#fromDr{ background:#ffffd6; padding:30px 0; margin-top:-30px}
#fromDr h3{ text-indent:-9999px; width:477px; height:41px; background:url(../images/fromDr_h3.gif) no-repeat; float:left; margin:20px}
#fromDr p.txtRight{ text-align:right; float:right; padding-top:50px; font-size:16px}
#fromDr p.txtRight span{ font-size:14px}
#fromDr div.main{ clear:both; padding-top:20px; padding-left:10px}
#fromDr div.main p{ float:left; padding-left:20px; width:742px}

/*‚¨‹q—l‚Ìº*/
.voice{ padding:10px 25px 20px 25px}
.voice:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.voice { min-height: 1px;}

.voice div.fukidashi{ width:660px; border:3px solid #1d7868; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:10px 20px; position:relative}
img.fukidashiLeft{ position:absolute; top:93px; left:-25px}
img.fukidashiRight{ position:absolute; top:93px; left:700px}
.voice div.fukidashi p{ margin-bottom:5px}
.voice div.fukidashi p.txtRight{ margin-bottom:0; text-align:right}

/*’èŠúƒR[ƒX‚²ˆÄ“à*/
.arrow{ position:absolute; top:-40px; left:470px}

#tokuten{ padding:20px 0}
#tokuten h3{ padding:0 0 50px 0}
#tokuten .box{ width:310px; float:left; text-align:center; padding-top:20px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin-bottom:50px; position:relative}
#tokuten .box.no1{ width:1000px; border:3px solid #f6b275; text-align:left}
#tokuten .box.no1 img.off{ position:absolute; right:10px; bottom:0}
#tokuten .box.no2{ border:3px solid #dec0dd; margin-right:26px; height:330px}
#tokuten .box.no3{ border:3px solid #c5d692; margin-right:26px; height:330px}
#tokuten .box.no4{ border:3px solid #aad0f7; height:330px}

#tokuten .box.no2 img, #tokuten .box.no3 img,#tokuten .box.no4 img{ margin:10px}

#tokuten .box img.no{ position:absolute; left:0px; top:-60px}
#tokuten .box.no1 img.no{ position:absolute; left:10px; top:-60px}


#tokuten .box h4{ font-size:28px; font-weight:normal; line-height:1.4em; padding:20px}
#tokuten .box h4 span{ font-size:20px}
#tokuten .box.no1 h4{ font-size:50px; padding:40px 20px 30px 50px; line-height:1.2em}
#tokuten .box.no1 h4 span{ font-size:30px;}

.middleProduct{ padding:20px 0 10px 0}
.middleProduct img.product{ float:left; padding:0 0 0 20px}
.middleProduct h3{ width:452px; height:100px; background:url(../images/productName.png) no-repeat; text-indent:-9999px; margin-top:20px}
.middleProduct h4{ padding:20px 0}
.middleProduct img.medal{ position:absolute; right:20px; top:70px;}
.middleProduct img.medal2{ position:absolute; right:20px; top:140px;}


.price{ padding:20px}
.price .box{ width:100%; padding: 30px 0; position:relative}
.price .box h4{ color:white; padding:5px 10px; font-size:24px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
.price .box h5{ width:54px; height:42px; border-radius:27px; -webkit-border-radius:27px; -moz-border-radius:27px; text-align:center; font-size:22px; padding-top:12px; color:white; float:left; margin-top:5px}
.price .box h5.second{ font-size:16px; line-height:1.3em;}
.price .box a.order{ width:366px; height:92px; display:block; text-indent:-9999px; margin:0 auto 10px auto}
.bt1{ background:url(../images/order_bt1.png) no-repeat}
.bt2{ background:url(../images/order_bt2.png) no-repeat}
.bt3{ background:url(../images/order_bt3.png) no-repeat}
.bt5{ background:url(../images/order_bt5.png) no-repeat}
.price .box a.order:hover{ opacity:0.7; filter: alpha(opacity=70); -moz-opacity:0.7;}

.teikiBt a.teiki{ display: block; text-indent: -9999px; margin: 10px auto; height:130px; width: 580px; background:url(../images/teiki_bt.png) no-repeat}
.teikiBt a.teiki:hover{ opacity: 0.7}

.price .box.one h4{ margin-bottom: 20px}
.price .box.one h4,.price .box.one h5{ background:#f28585;}
.price .box.three h4,.price .box.three h5{ background:#decd31;}
.price .box.two,.price .box.five{ float:right;}
.price .box.two h4,.price .box.two h5{ background:#5ac2be;}
.price .box.five h4,.price .box.five h5{ background:#7fb4e9;}

.price .box.one img,.price .box.three img,.price .box.two img{ position:absolute; right:10px; top:10px}
.price .box.five img{ position:absolute; right:10px; top:-18px}

.price .box p.exp{ width:200px; float:left; line-height:1.5em; padding-top:5px; padding-left:5px; margin-top:5px}
.price .box p.prices{ text-align:right; color:#ec2743; width:180px; float:right}
.price .box p.prices span{ font-size:30px; font-weight:bold}
.price .box p.prices span.small{ color:#383838; font-size:12px; font-weight:normal}

@media (max-width:768px) {
	#voice{ width: 100%}
	.price .box{ width: 100%}
.price .box.one img, .price .box.three img, .price .box.two img,.price .box.five img{ width: 30%}
.price .fl_left,
	.price .fl_right{ float: none; padding: 0}
.price .box p.exp{ width:60%;}
.price .box a.order{ width:60%; background-size:100%; height:120px}	
}
@media (max-width:480px) {
	.price .box{ width: 100%}
.price .box.one img, .price .box.three img, .price .box.two img,.price .box.five img{display:none}
	
.price .box p.exp{ width:70%;}
.price .box a.order{ width:90%; background-size:100%; height:80px}	
	.teikiBt a.teiki{width:100%; background-size:100%; height:80px}
}

div.pconly{ display:none}
div.sponly{ display:block}

.bt{ text-align:center; margin:20px}
.bt img{ padding-bottom:10px}

.user{ padding:20px; background:#fffee4; border:4px solid #ebebeb}
.user h5{ font-size:18px; padding-bottom:10px}
.user ul{ font-size:14px}
.user ul li{ background:url(../images/li.png) no-repeat left 0px; padding-left:20px; margin-bottom:10px; line-height:1.4em}

#lastProduct{ padding:0px 20px 40px 20px; width:1000px; margin:0 auto; font-size:14px}
#lastProduct h4{ color:white; padding:10px; font-size:130%; margin-bottom:10px}
 #lastProduct h4.y2{ background:#fff96a; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; color:#383838}
#lastProduct h5{ font-size:110%; padding-bottom:5px; color:#125bbf;}
#lastProduct table{ border-top:1px solid #666; border-left:1px solid #666; margin:0 0 10px 0; border-collapse:collapse}
#lastProduct table th{ background:#efefef; padding:10px; border-bottom:1px solid #666; border-right:1px solid #666; white-space:nowrap}
#lastProduct table td{ padding:10px; padding:10px; border-bottom:1px solid #666; border-right:1px solid #666;}

#lastProduct .cont div.txt{ width:700px; float: right}

#footer{ width:100%; background:#76b226; font-size:14px; color:white}
#footerIn{ width:1000px; padding:30px 0; margin:0 auto}
.footer_text{ float:left;}
.footer_text a{ color:#fff}
.copy{ float:right}

@media (max-width:768px) {
	#lastProduct,
	#lastProduct .cont { width: 100%; box-sizing: border-box; padding: 10px}
	#lastProduct .cont div.txt{ width: 70%}
#lastProduct .cont div img{ width:auto; margin:0 auto}
	
	#footerIn{ width: 100%}
}
@media (max-width:480px) {
	#lastProduct,
	#lastProduct .cont { width: 100%; box-sizing: border-box; padding: 10px}
	#lastProduct .cont div,
	#lastProduct .cont div.txt{ width:auto!important; padding:10px; float: none!important}
#lastProduct .cont div img{ display: block;width:50%; margin:0 auto; float: none!important}
	
	#footerIn{ width: 100%}
}




/*user guide*/
div.guide{ padding:20px 0; width:1000px; margin:0 auto; font-size:14px}
div.guide h2.y2{ background:#fff96a; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:10px; color:#383838; margin-bottom:20px}
div.guide h3{ margin:0 0 10px 0!important; padding:5px 6px!important; border-left:13px solid #e2f783; background:none; line-height:1; color:#5a3535; font-size:110%!important;}
div.guide h4{ border-bottom:1px dashed #f5cfcf; padding:5px 0 1px 5px; font-size:100%; font-weight:bold; margin-bottom:10px; color:#ea3338; background:none;}

div.guide p{ padding-bottom:5px}

div.guide ul{ padding:5px 0 0 10px;}
div.guide ul li{ list-style-type:none; background:url(../images/arrow.gif) no-repeat left 5px; margin-bottom:3px; padding-left:10px;}

div.guide .guideBox{ float:left; width:480px}

div.guide a.inq_mail,
div.guide a.inq_faq{ display:inline-block; background:#0c5cb3; padding:5px 10px; margin-right:10px; color:white; text-decoration:none}
div.guide a.inq_mail:hover,
div.guide a.inq_faq:hover{background-color:#ffae00;}


@media (max-width:768px) {
	div.guide{ width: 100%; box-sizing: border-box}
	div.guide .guideBox{ float: none; width: auto; padding: 10px!important;}
	div.guide .guideBox img{ width: 100%; margin-bottom: 10px}
}


table.bordered{border:1px solid #000;border-collapse:collapse;margin:0.5em 0;width:400px;}
table.bordered th,table.bordered td{border:1px solid #000;border-collapse:collapse;padding:2px 5px;vertical-align:top;}
table.bordered th{background-color:#EEEEEE;white-space:nowrap;}
table.bordered td{background-color:#fff;}

table.itemData{border:1px solid #000;border-collapse:collapse;margin:0.5em 0;width:480px;}
table.itemData th,
table.itemData td{border:1px solid #000;border-collapse:collapse;padding:2px 5px;vertical-align:top;font-size:93%}
table.itemData th{background-color:#EEEEEE;white-space:nowrap;}
table.itemData td{background-color:#fff;}