@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:#3c281e;
background:url(../images/bg.webp) center top fixed;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
/* min-width:750px; */
}
@media screen and (max-width:767px){
   html,body {
    font-size: 15px;
   } 
}
img { border-style:none; vertical-align:bottom; padding:0; max-width:100%;}
figure { margin:30px auto; text-align:center;}
figure.waku img{ border:5px solid #fff; box-shadow:rgba(60, 40, 30, 0.2) 0 0 5px 2px;}
figure.waku2 img{ box-shadow:rgba(60, 40, 30, 0.33) 0 0 5px 2px; z-index: 5;}
 
p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left; background:url(../images/alpha.webp);}
p:last-child{margin:0px; }
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa { transition: all 0.3s ease;}
.opa:hover { opacity: 0.6; filter: alpha(opacity=60);}

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

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

/*ヘッダー*/
#header{ text-align: center; margin: 0; padding: 0;}
#header figure{ margin: 0 auto;}

/*フッター*/
#footer{ width:100%; background: #fab41e;}
#footer ul{ letter-spacing: -1em; text-align: center; padding: 15px;}
#footer ul li{ display: inline-block; letter-spacing: normal; margin: 0 20px; font-size: 90%;}
#footer ul li a:hover{ text-decoration: underline;}
p.copyright{ text-align:center; margin:0; padding:5px; background:#3c281e; color:#fff; font-size:75%; letter-spacing:0.1em;}

/*メイン*/
#content{ max-width:750px; margin:0 auto; background:#fff; box-shadow:rgba(60, 40, 30, 0.33) 0 0 10px 5px;
  /*overflow: hidden;*/
  /* min-height: 100vh; */
}
section { width:100%; margin:0 auto 60px;}
.maincontent { padding:0 30px; margin:0 auto;}
@media screen and (max-width:767px){
  .maincontent { padding:0 16px;}
  .maincontent h3{
    font-size: 18px;
  }
}
/*タイトル*/
h2,h3,h4{ line-height: 1.25em; font-family: 'Sawarabi Mincho', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; font-weight: normal;}
h2{ position: relative; padding: 70px 0; margin-bottom: 40px; font-size: 60px; text-align: center; background: #faf0b4; background: -moz-linear-gradient(top,  #ffffff 0%, #faf0b4 33%, #faf0b4 66%, #ffffff 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#faf0b4 33%,#faf0b4 66%,#ffffff 100%); background: linear-gradient(to bottom,  #ffffff 0%,#faf0b4 33%,#faf0b4 66%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); box-shadow:rgba(60, 40, 30, 0.33) 0 0 5px 2px; z-index: 5;}
h2:before{ content: ""; max-width: 750px; height: 70px; position: absolute; left: 0; top: 0; background: url("../images/tit_ico1.webp") center center no-repeat;}
h2:after{ content: ""; max-width: 750px; height: 70px; position: absolute; left: 0; bottom: 0; background: url("../images/tit_ico2.webp") center center no-repeat;}
h2 span.ico{ position: absolute; display: inline-block; right: 20px; top: -30px; width: 210px; background: #f07878; border: 6px double #fff; color: #fff; font-size: 28px; line-height: 1.25em; padding: 20px 0 30px; border-radius: 50%; transform: rotate(11.25deg);}
/*
h2 span.ico:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 16px 16px 0 16px; border-color: #f07878 transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -24px; margin: auto; z-index: -1;}
*/
h3{ text-align: center; position: relative; font-size: 32px; margin-bottom: 20px;}
h3 strong{ position: relative; z-index: 3; background: #fff; padding: 0 0.5em; display: inline-block;}
h3:before{ content: ""; width: 100%; height: 1px; background: #3c281e; position: absolute; left: 0; right: 0; top: 50%;}
@media screen and (max-width:767px){
   h2{
    font-size: 30px;
    padding: 40px 0;
   } 
   h2 span.ico{
    font-size:18px;
    width:160px;
    top:-65px;
    right:10px;
    padding: 20px 0 20px;
   }
   h3{
    font-size:20px;
   }
}
.check{ margin: 40px auto;}
.check dl dt{ text-align: center; font-size: 48px; letter-spacing: 0.1em; line-height: 1em; margin-bottom: 10px;}
.check dl dt strong{ position: relative; display: inline-block; color: #f07878; padding: 0 0.25em;}
.check dl dt strong:before{ content: ""; width: 4px; height: 1em; background: #f07878; position: absolute; left: -0.5em; bottom: 0; transform: rotate(-22.5deg);}
.check dl dt strong:after{ content: ""; width: 4px; height: 1em; background: #f07878; position: absolute; right: -0.5em; bottom: 0; transform: rotate(22.5deg);}
.check dl dd{ background: #efefef; padding: 20px; border: 1px solid #aaa;}
.check ul li{ padding: 0.25em 0.5em 0.25em 1.5em; position: relative; border-bottom: 2px dotted #666; font-size: 28px; font-weight: bold; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
.check ul li:first-child{ border-top: 2px dotted #666;}
.check ul li span.lsf{ position: absolute; left: 0.25em; top: 0.25em; color: #f07878;}
@media screen and (max-width:767px){
  .check dl dt{
    font-size:24px;
  }
   .check ul li{
    font-size: 16px;
   } 
}
/*おすすめ成分*/
.recom dl{ margin: 40px auto; border: 10px solid #f07878; padding: 20px;}
.recom dl dt{ text-align: center; font-size: 48px; line-height: 1em; font-weight: bold; letter-spacing: 0.1em; color: #f07878; margin-bottom: 0.5em;}
.recom dl dt strong{ display: block; color: #f07878; text-align: center; border-top: 1px dotted #f07878; border-bottom: 1px dotted #f07878; font-size: 32px; padding: 0.25em 0px; margin-bottom: 0.25em; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
.recom dl dd{ background: #efefef; padding: 20px; border-radius: 20px;}
@media screen and (max-width:767px){
   .recom dl dt strong,
   .recom dl dt{
    font-size: 24px;
   } 
}
/*理由*/
#reason dl{ margin: 40px auto; border: 10px solid #f07878; padding: 20px;}
#reason dl:nth-child(2){ border-color: #fab41e;}
#reason dl:nth-child(3){ border-color: #3c963c;}
#reason dl dt{ text-align: center; margin-bottom: 20px;}
#reason dl dt span{ display: block; text-align: center; margin-bottom: -30px;}
#reason dl dt span img{ width: 120px;}
#reason dl dt strong{ display: block; color: #fff; background: #f07878; padding: 0.25em; border: 6px double #fff; font-size: 42px; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#reason dl:nth-child(2) dt strong{ background: #fab41e;}
#reason dl:nth-child(3) dt strong{ background: #3c963c;}
#reason dl dd ul{ margin: 1em auto;}
#reason dl dd ul li{ padding: 0.25em; border-bottom: 1px dotted #666;}
#reason dl dd ul li:first-child{ border-top: 1px dotted #666;}
#reason dl dd ul li:before{ content: "・";}
@media screen and (max-width:767px){
  #reason dl dt strong{
    font-size:21px;
    padding: 1em 0.25em 0.5em;
  }
  #reason dl dt span img{
    width:60px;
  }
}
/*差し込みボックス*/
.box{ border: 10px double #3c281e; padding: 20px;}
.box h4{ text-align: center; position: relative; font-size: 36px; margin-bottom: 20px;}
.box h4 strong{ position: relative; z-index: 3; background: #fff; padding: 0 0.5em; display: inline-block;}
.box h4:before{ content: ""; width: 100%; height: 1px; background: #3c281e; position: absolute; left: 0; right: 0; top: 50%;}
.box p{ font-size: 21px;}

.strong_box{ border: 10px double #3c281e; padding: 20px; margin: 40px auto;}
.strong_box h4{ text-align: center; position: relative; font-size: 36px; margin-bottom: 20px;}
.strong_box h4 strong{ position: relative; z-index: 3; background: #fff; padding: 0 0.5em; display: inline-block;}
.strong_box h4 strong:before{ content: ""; width: 4px; height: 2em; background: #3c281e; position: absolute; left: 0; bottom: 0; transform: rotate(-22.5deg);}
.strong_box h4 strong:after{ content: ""; width: 4px; height: 2em; background: #3c281e; position: absolute; right: 0; bottom: 0; transform: rotate(22.5deg);}
.strong_box p{ line-height: 1.5em; margin-bottom: 0;}
@media screen and (max-width:767px){
  .strong_box{
    padding: 16px;
  }
  .box h4,
  .strong_box h4{
    font-size:18px;
  }
  .box p{ font-size: 15px;}
}
/*ここがすごい*/
#point dl{ border: 10px solid #fab41e; padding: 20px; margin: 100px auto;}
#point dl:last-child{ margin-bottom: 40px;}
#point dl dt{ text-align: center; font-size: 36px; line-height: 1.25em; font-weight: bold; margin:-100px auto 20px; border-bottom: 4px dotted #3c281e; padding-bottom: 10px;}
#point dl dt span{ display: block; margin-bottom: 10px;}
#point dl dt span img{ width: 160px;}
#point dl dt strong{ color: #f07878;}
#point ul{ margin: 1em auto; font-weight: bold;}
#point ul li{ padding: 0.25em 0.5em; position: relative; border-bottom: 2px dotted #666;}
#point ul li:first-child{ border-top: 2px dotted #666;}
#point ul li:before{ content: "・";}

/*プレゼント*/
#present{ border: 10px double #f07878; padding: 20px 20px 20px 0; background: #faf0e6; margin: 20px auto;}
#present dl{ display: table; table-layout: fixed; width: 100%;}
#present dl dt{ display: table-cell; vertical-align: middle; width: 120px;}
#present dl dd{ display: table-cell; vertical-align: middle; font-weight: bold;}
#present dl dd strong{ font-size: 126%;}
#present dl dd p{ line-height: 1.5em;}

/*メルマガ*/
#mailmagazine{ background: #efefef; padding: 20px; text-align: center;}
#mailmagazine dl dt{ background: #3c281e; color: #fff; padding: 0.25em; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 10px;}
#mailmagazine dl dd p{ font-size: 20px;}
@media screen and (max-width:767px){
  #point dl dt span img{
    transform: scale(0.75);
  }
  #point dl dt{
    font-size:18px;
  }
  #mailmagazine dl dd p{ font-size: 15px;}
  .form a img{
    width: 90%;
  }
}
/*フォーム*/
.form{ position: relative; box-shadow:rgba(60, 40, 30, 0.33) 0 0 5px 2px; z-index: 5;}
.form01 figure.btn{ position: absolute; left: 0; right: 0; bottom: 220px; margin: auto; text-align: center;}
.form02 figure.btn{ position: absolute; left: 0; right: 0; bottom: 195px; margin: auto; text-align: center;}
.form03 figure.btn{ position: absolute; left: 0; right: 0; bottom: 60px; margin: auto; text-align: center;}
.form04 figure.btn{ position: absolute; left: 0; right: 0; bottom: 60px; margin: auto; text-align: center;}
.form ul{ position: absolute; left: 0; right: 0; bottom: 80px; margin: auto; padding: 0 40px;}
.form ul li{ position: relative; padding-left: 1.25em; font-size: 16px;}
.form ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
.form ul li a{ text-decoration: underline;}
.form a img{ position: relative; animation: fade ease-in-out 1s infinite alternate; transition: 0.3s;}
.form a:hover img{ animation-play-state: paused; transform: scale(1.08); opacity: 0.7;}
.form p{width: 90%;margin:20px auto;font-size:60%;}

/*フェードイン*/
@keyframes fade {
0% { top: -10px;}
100% { top: 10px;}
}

.buy_tyui{font-size:14px;padding: 20px;}

.form_explain h4{ background: #f03c3c; padding: 10px; text-align: center; color: #fff;}
.form_explain h4 span{ display: block; background: #fab41e; color: #f03c3c; font-size: 32px; line-height: 1em; padding: 0.25em 0.25em 0.5em;}
.form_explain h4 strong{ font-size: 48px; line-height: 1em; padding: 0.25em; display: inline-block; background: #f03c3c; position: relative; z-index: 3;}
.form_explain figure{ margin: 0 auto;}
@media screen and (max-width:767px){
  .form03 figure.btn{
    bottom: 40px;
  }
  .form02 figure.btn{
    bottom: 130px;
  }
  .form ul{
    bottom: 20px;
    padding: 0 10px;
  }
  .form ul li{
    font-size:12px;
  }
  .form_explain h4 strong{
    font-size: 24px;
  }
  .form_explain h4 span{
    font-size:16px;
  }
}
#detail{ margin: 40px auto;}
#detail table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#detail table th{ background: #efefef; border: 1px solid #666; padding: 0.5em; width: 160px; text-align: center; font-weight: bold; vertical-align: middle; font-size: 18px; line-height: 1.25em;}
#detail table td{ border: 1px solid #666; padding: 0.5em; vertical-align: middle; font-size: 18px; line-height: 1.25em;}
#detail #notice{ margin: 20px auto; font-size: 18px; background: #fff; padding: 10px; border: 1px solid #666;}
#detail #notice strong{ display: block; text-align: center; border-bottom: 1px dotted #666; padding-bottom: 0.25em; margin-bottom: 0.5em;}
#detail #notice ul li{ position: relative; padding-left: 1.25em; font-size: 16px;}
#detail #notice ul li:before{ content: "・"; position: absolute; left: 0; top: 0;}

/*声*/
#voice dl{ background: #faf0e6; padding:0; margin: 40px auto; box-shadow:rgba(60, 40, 30, 0.2) 0 0 5px 2px; z-index: 5;}
#voice dt{ background: #fab41e; color: #fff; padding: 0.5em; font-weight: bold; font-size: 32px; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#voice dt span{ display: inline-block; background: #fff; color: #fab41e; float: right; font-size: 24px; padding: 0.25em 0.5em;}
#voice dd{ padding: 20px;}
#voice dd p{ font-size: 21px; line-height: 1.5em;}
@media screen and (max-width:767px){
  #detail table th,
  #detail table td{
    font-size:14px;
  }
  #voice dt,
  #voice dt span,
  #voice dd p{
    font-size:16px;
  }
}
/*質問*/
#qanda dl{ background: #e6f0fa; padding:0; margin: 40px auto; box-shadow:rgba(60, 40, 30, 0.2) 0 0 5px 2px; z-index: 5;}
#qanda dt{ background: #326495; color: #fff; padding: 0.5em 0.5em 0.5em 2em; font-weight: bold; font-size: 32px; position: relative; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#qanda dt span{ position: absolute; left: 0.5em; top: 0.5em;}
#qanda dd{ padding: 20px 20px 20px 64px; position: relative;}
#qanda dd span{ font-size: 32px; font-weight: bold; color: #f03c3c; position: absolute; left: 15px; top: 10px; font-family: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#qanda dd p{ font-size: 21px; line-height: 1.5em;}
@media screen and (max-width:767px){
  #qanda dd span,
  #qanda dd p,
  #qanda dt{
    font-size:16px;
  }
  #qanda dd{
    padding: 20px 20px 20px 40px;
  }
}
/*変化*/
.change{ margin: 40px auto;}
.change dl{ display: table; table-layout: fixed; width: 100%;}
.change dl dt{ display: table-cell; vertical-align: middle; width: 160px;}
.change dl dd{ display: table-cell; vertical-align: middle;}
.change dl dd ul li{ padding: 0.5em; border-bottom: 1px dotted #3c281e; line-height: 1.5em; font-size:21px;}
.change dl dd ul li:first-child{ border-top: 1px dotted #3c281e;}
.change dl dt img{ border:5px solid #fff; box-shadow:rgba(60, 40, 30, 0.2) 0 0 5px 2px;}
.change:nth-child(1) dl dt img{ transform: rotate(-2.5deg);}
.change:nth-child(2) dl dt img{ transform: rotate(2.5deg);}


/*問合せ*/
#mail table.mail{ width: 100%; border-collapse: collapse; border: 2px solid #333; margin-bottom: 20px;}
#mail table.mail th{ border: 2px solid #333; padding: 10px; background: #efefef; font-size:84%; width:240px; vertical-align:middle;}
#mail table.mail th span{ font-size: 80%;}
#mail table.mail td{ border: 2px solid #333; padding: 10px; vertical-align:middle;}
input[type=submit]{ -moz-appearance:none; -webkit-appearance:none; appearance:none; background:none; border:none;}
input,textarea{ font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; font-size:100%; width:100%; padding:10px; box-sizing:border-box; border:1px solid #aaa;}
input[type=submit]{ font-weight:bold; font-size: 126%; letter-spacing:0.1em; cursor:pointer; width:100%; margin:0; background: #329632; color: #fff; border: none; border: 10px double #fff;}

@media print, screen and (min-width:641px){
.smp{ display:none !important;}
}
@media screen and (max-width:640px){
  .change dl dt{
    width:120px;
  }
  .change dl dd ul li{
    font-size:14px;
  }
.pc{ display:none !important;}
}

/*スクロール*/
div.scr{margin:120px 0 0;text-align: center;}
div.scr a {
  padding-top: 80px;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color:#0316a5;
}
div.scr a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #0316a5;
  border-bottom: 2px solid #0316a5;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
div.scr a span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
div.scr a span:nth-of-type(2) {
  top: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
div.scr a span:nth-of-type(3) {
  top: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes sdb {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

/*ぬるっとスクロール*/
html {scroll-behavior:smooth;}
@media screen and (max-width:767px){
  div.scr{margin:100px 0 0;}
}
/*------------------------------------------
■  岡田先生メールサポート
------------------------------------------*/
.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;}