@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break: break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:24px;
text-align:left;
color:#191919;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
min-width:750px;
background: url("../images/tree_bark.png") fixed;
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto !important;}
figure{ margin:20px auto; text-align:center;}
figure.waku img{ padding:5px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; max-width: 600px;}

p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left; background:url(../images/alpha.png);}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

#wrapper{ background: #fff; width: 750px; margin: 0 auto; box-shadow:rgba(0, 0, 0, 0.25) 0 0 10px 5px;}

/*ヘッダー*/
#header figure{ margin: 0 auto;}

/*フッター*/
#footer ul li{ border-top: 2px solid #fff; letter-spacing: 0.1em;}
#footer ul li a{ display: block; background: #dedede; padding: 0.5em 20px 0.5em 50px; position: relative;}
#footer ul li a:after{ content: "▶"; position: absolute; left: 20px; top: calc(50% - .66em);}
#footer p.copyright{ background: #191919; color: #fff; font-size: 80%; text-align: center; padding: 0.5em;}

/*タイトル*/
h1,h2,h3,h4{ font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; letter-spacing: 0.1em;}
h2{ position: relative; z-index: 3; transform: rotate(0deg); box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
h2.red_tit{ background: #d70000;}
h2{ font-size: 200%; line-height: 1.4em; background: #191919; color: #fff; padding: 10px; text-align: center; margin-bottom: 40px;}
h2 strong{ display: block; padding: 20px 10px; border: 1px dashed #fff;}
h2:before{ content: ""; position: absolute; left: 5px; top: 5px; width: 0; height: 0; border-style: solid; border-width: 25px 25px 0 0; border-color: #fff transparent transparent transparent;}
h2:after{ content: ""; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 25px 25px; border-color: transparent transparent #fff transparent;}

h3{ text-align: center; font-size: 175%; line-height: 1.25em; border-top: 6px double #191919; border-bottom: 6px double #191919; margin: 60px auto 40px; padding: 10px; position: relative;}
h3:before{ content: ""; position: absolute; left: 5px; top: 5px; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color: #191919 transparent transparent transparent;}
h3:after{ content: ""; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #191919 transparent;}
h3.ico{ margin-top: 150px;}
h3.ico span{ position: absolute; left: 5px; right: auto; top: -110px; width: 160px; margin: auto; transform: rotate(-5deg);}
h3.mt0{ margin-top: 0;}

/*メイン*/
section{ width:100%; background:#fff; margin:0 auto 100px;}
.maincontent{ padding:0; margin:0 auto; width:690px;}

/*リスト*/
.list001 ul{ border: 6px double #191919; padding: 20px; margin: 20px auto;}
.list001 ul li{ border-bottom: 2px dotted #191919; padding: 0.25em 0.5em; font-size: 120%; letter-spacing: 0.1em; font-weight: bold;}
.list001 ul li:first-child{ border-top: 2px dotted #191919;}
.list001 ul li span.lsf{ color: #fa1919;}
.list002 ol{ margin: 20px auto; list-style: decimal inside;}
.list002 ol li{ border-bottom: 2px dotted #191919; padding: 0.25em 0.5em; font-size: 120%; letter-spacing: 0.1em; font-weight: bold;}
.list002 ol li:first-child{ border-top: 2px dotted #191919;}

/*不妊の原因*/
#check{ background: url("../images/check_bg.jpg") right center no-repeat #fafa32; padding: 20px; margin: 20px auto;}
#check ul{ margin-right: 180px; padding: 20px; background: #fff; border: 10px double #fafa32;}
#check ul li{ border-bottom: 2px dotted #191919; padding: 0.25em 0; font-size: 120%; letter-spacing: 0em; font-weight: bold;}
#check ul li:first-child{ border-top: 2px dotted #191919;}

/*有害物質*/
#hazard{ background: url("../images/dark-grey-terrazzo.png"); margin: 20px auto; padding: 0 20px; overflow: hidden;}
#hazard dl{ margin: 40px auto; padding: 20px; background: rgba(255,255,255,0.9); display: table; table-layout: fixed; width: 100%; border-radius: 20px;}
#hazard dl dt{ display: table-cell; vertical-align: middle; width: 200px;}
#hazard dl dd{ display: table-cell; vertical-align: top;}
#hazard dl dt img{ border-radius: 12px; padding: 4px; background: #fff; /*box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;*/}
#hazard dl:nth-child(2n+1) dd{ padding-right: 20px;}
#hazard dl:nth-child(2n) dd{ padding-left: 20px}
#hazard dl:nth-child(2n+1) dt img{ transform: rotate(5deg)}
#hazard dl:nth-child(2n) dt img{ transform: rotate(-5deg)}
#hazard h4{ background: #326496; color: #fff; text-align: center; font-size: 125%; margin-bottom: 0.25em;}
#hazard p{ font-size: 90%; line-height: 1.6em;}

/*３つの炭*/
figure#carbon{ margin: 40px auto; box-shadow:rgba(0, 0, 0, 0.5) 0 0 10px 5px; position: relative; z-index: 3;}

/*フォーム*/
img.form_img{ box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px; position: relative; z-index: 3; margin-top: 40px;}
img.form_img.mt0{ margin-top: 0;}
.form{ background: #191919; padding: 10px; color: #fff;}
.form_in{ border: 1px solid #fff; padding: 20px;}
.form_in p{ font-size: 75%; line-height: 1.5em;}
.form_in ul li{ position: relative; font-size: 75%; line-height: 1.25em; padding-left: 1em; margin-bottom: 0.25em;}
.form_in ul li span{ position: absolute; left: 0; top: 0;}
figure.form_btn a{ display: block; position: relative; animation: fade ease-in-out 0.6s infinite alternate; transition: 0.3s;}
figure.form_btn a:hover{ /*animation-play-state: paused;*/ opacity: 0.7;}
/*フェードイン*/
@keyframes fade {
0% { transform: rotate(-3deg);}
25% { transform: rotate(3deg);}
50% { transform: rotate(-1.5deg);}
75% { transform: rotate(1.5deg);}
}

/*お便りお願い*/
#letter{ background: url("../images/bg_letter.png"); padding: 10px; margin: 40px auto; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px; position: relative; z-index: 3;}
#letter dl{ background: rgba(255,255,255,1.0); padding: 20px; border-radius: 20px;}
#letter dl dt{ text-align: center; font-weight: bold; font-size: 120%; letter-spacing: 0.1em; color:#fa1919; line-height: 1.25em;}
#letter dl dt strong{ display: block; background: #fa1919; padding: 0.33em; font-size: 120%; line-height: 1.25em; color: #fff; border: 6px double #fff;}
#letter dl dt a{ display: block; color: #326496; text-decoration: underline; margin: 20px auto;}
#letter dl dd{ margin-top: 20px; font-size: 84%; text-align: center;}

/*商品詳細*/
#detail table{ width: 100%; border: 1px solid #191919; border-spacing: 0; border-collapse: collapse; margin: 40px auto; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; position: relative; z-index: 3;}
#detail table th{ border: 1px solid #191919; padding: 0.5em; background: #efefef; width: 30%; text-align: center; vertical-align: middle;}
#detail table th span{ display: block; font-size: 80%;}
#detail table td{ border: 1px solid #191919; padding: 0.5em; vertical-align: middle; font-size: 75%;}

/*ご利用者の声*/
#voice dl{ position: relative; background: #fafac8; margin: 20px auto;}
#voice dl dt{ background: #f9f932; padding: 0.5em; text-align: center; font-weight: bold; font-size: 120%; letter-spacing: 0.1em; position: relative;}
#voice dl:nth-child(2n+1) dt:after{ content: ""; width: 84px; height: 66px; background: url("../images/koe_ill1.png") center center no-repeat; background-size: 100%; position: absolute; left: 20px; top: 4px;}
#voice dl:nth-child(2n) dt:after{ content: ""; width: 61px; height: 70px; background: url("../images/koe_ill2.png") center center no-repeat; background-size: 100%; position: absolute; right: 20px; top: 0;}
#voice dl dt span{ display: inline-block; vertical-align: middle; margin-left: 1em; font-size: 80%; background: #191919; color: #f9f932; padding: 0.1em 1em; border-radius: 30px;}
#voice dl dd{ padding: 1em; font-size: 90%;}
#voice_notice{ margin: 40px auto;}
#voice_notice dl dt{ background: #191919; color: #fff; text-align: center; padding: 0.25em; font-weight: bold; letter-spacing: 0.1em;}
#voice_notice dl dd p{ text-align: center; font-size: 80%; line-height: 1.5em;}
#voice_notice dl dd{ border: 1px solid #191919; border-top: none; padding: 0.5em;}
#voice_message{ text-align: center; color: #fa1919; font-size: 150%; font-weight: bold; line-height: 1.25em; letter-spacing: 0.1em; text-decoration: underline;} 

/*よくある質問*/
#qanda dl{ margin: 20px auto; padding: 20px 0; border-bottom: 4px dotted #191919;}
#qanda dl:first-child{ border-top: 4px dotted #191919;}
#qanda dl dt{ background: #f9f932; padding: 0.5em 0.5em 0.5em 45px; font-weight: bold; letter-spacing: 0.1em; position: relative;}
#qanda dl dt:before{ content: "Q."; position: absolute; left: 0.5em; top: 0.5em; font-size: 24px;}
#qanda dl dd{ position: relative; padding: 0.5em 0.5em 0 45px; font-size: 90%;}
#qanda dl dd:before{ content: "A."; position: absolute; left: 0.5em; top: 0.5em; color: #fa1919; font-weight: bold; letter-spacing: 0.1em; font-size: 24px;}




@media print, screen and (min-width:751px){
.smp{ display:none !important;}
}
@media screen and (max-width:750px){
.pc{ display:none !important;}
}