@charset "utf-8";
/* CSS Document */
/* *{ margin:0; padding:0; box-sizing:border-box; word-break: break-all;} */
div, span, object, iframe, .lp-wrapper h1, .lp-wrapper h2, .lp-wrapper h3, .lp-wrapper h4, .lp-wrapper h5, .lp-wrapper 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, .lp-wrapper 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 .lp-wrapper {
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.webp") fixed;
}

.lp-wrapper img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto !important;}
.lp-wrapper 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.webp);}
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; max-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;}

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

.lp-wrapper 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;}
.lp-wrapper 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;}
.lp-wrapper 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;}
.lp-wrapper h3.ico{ margin-top: 150px;}
.lp-wrapper h3.ico span{ position: absolute; left: 5px; right: auto; top: -110px; width: 160px; margin: auto; transform: rotate(-5deg);}
.lp-wrapper h3.mt0{ margin-top: 0;}

/*メイン*/
.lp-wrapper section{ width:100%; background:#fff; margin:0 auto 100px;}
.lp-wrapper .maincontent{ padding:0; margin:0 auto; max-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.webp") 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.webp"); 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.webp"); 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.webp") 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.webp") 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;}
}


/*------------------------------------------
■  岡田先生メールサポート
------------------------------------------*/
.okada_sec p{padding: 10px;}
.okada_sub_title{ margin:20px auto; }
.okada_sub_title p:nth-child(1) {color:#EF5A78;font-weight:bold;margin:0px;}
.okada_sub_title p:nth-child(2) {background-color:#EF5A78;color:#ffffff;font-weight:bold;margin:0px;}
.okada_prof_l{float:left;width:45%;margin-left:20px;}
.okada_prof_r{float:right;width:45%;text-align:center;padding:5px;line-height:1.2em;}
.okada_prof{background-color:#FADC96;padding:5px;margin:5px auto 20px;-moz-box-shadow: 0px 0px 5px 2px #aaa;-webkit-box-shadow: 0px 0px 5px 2px #aaa;}
.okada_qa{margin:20px auto;}
.okada_qa p:nth-child(1) {background-color:#EF5A78;color:#ffffff;font-weight:bold;margin:0px;}
.okada_qa p:nth-child(2) {background-color:#EFD1E0;margin:0px;}
.okada_cap p{border:solid #FADC96 4px;border-radius:5px;margin:20px;}

@media screen and (max-width:750px){
        html,body .lp-wrapper {
        font-size:14px;
    }
    .lp-wrapper section{
        margin: 0 auto 60px;
    }
    .maincontent{
        width: 90%;
    }
    figure.waku img{
        max-width:100%;
        width: 100%;
    }
    #check ul{
        margin-right: 0px;
    }
    #hazard dl dt{
        width:100px;
    }
    #voice dl:nth-child(2n+1) dt:after{
        left:-20px;
        top:-30px;
    }
    #voice dl:nth-child(2n) dt:after {
        right: -20px;
        top: -20px;
    }
    #qanda dl dt:before{
        top: 2px;
    }
}

/* 202604追加css */
.lp-wrapper,#hazard dl { box-sizing:border-box; word-break: break-all;}