@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;
background:url(../images/bg.jpg) center center fixed;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
min-width:750px;
}

img { border-style:none; vertical-align:bottom; padding:0; max-width:100%;}
figure { margin:30px auto; text-align:center;}
figure.fl_r{ float: right; margin: 0 0 20px 20px; position: relative; z-index: 3;}
figure.fl_r img{ border:8px solid #fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; transform:rotate(2.5deg); max-width: 280px;}
figure.waku img{ border:8px solid #fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; transform:rotate(-2.5deg)}

p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left; background:url(../images/alpha.png);}
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;}

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

/*メイン*/
#content{ width:750px; margin:0 auto; background:#fff; box-shadow:rgba(0, 0, 0, 0.66) 0 0 10px 5px; overflow: hidden; min-height: 100vh;}
section { width:100%; margin:0 auto 90px;}
.maincontent { padding:0 30px; margin:0 auto;}

/*タイトル*/
h2{ background: url("../images/tit_bg.png"); color: #562d16; border-top: 6px solid #562d16; border-bottom: 6px solid #562d16; padding: 15px; font-size: 166%; letter-spacing: 0.1em; line-height: 1.4em; text-align: center; margin-bottom: 30px; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; position: relative;}
h2:after{ content: ""; width: 90px; height: 67px; background: url("../images/tit_ico.png"); position: absolute; right: 10px; top: 10px;}
h2 span{ display: block; background: #fff; color: #c83232; border-radius: 30px; font-size: 75%; line-height: 1.4em; padding: 5px; margin-bottom: 5px;}

/*リスト*/
ol.ol001{ margin: 30px auto;}
ol.ol001 li{ border-bottom: 6px dotted #191919; padding: 15px 15px 15px 60px; position: relative; font-size: 116%;}
ol.ol001 li:first-child{ border-top: 6px dotted #191919;}
ol.ol001 li span{ position: absolute; left: 15px; top: 15px; font-weight: bold; background: #191919; color: #fff; padding: 0 5px;}

ul.list001{ margin: 30px auto;}
ul.list001 li{ border-bottom: 6px dotted #326496; padding: 15px 15px 15px 55px; position: relative; font-size: 116%; color: #326496; font-weight: bold;}
ul.list001 li:first-child{ border-top: 6px dotted #326496;}
ul.list001 li span{ position: absolute; left: 15px; top: 15px; font-weight: bold;}
ul.list001.red li{ border-bottom: 6px dotted #c83232; color: #c83232; font-size: 125%; letter-spacing: 0.1em;}
ul.list001.red li:first-child{ border-top: 6px dotted #c83232;}

ul.list002{ margin: 30px auto; border: 10px solid #c83232; padding: 15px; box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);}
ul.list002 li{ border-bottom: 6px dotted #c83232; padding: 15px 5px 15px 45px; position: relative; font-size: 125%; color: #c83232; font-weight: bold; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
ul.list002 li:first-child{ border-top: 6px dotted #c83232;}
ul.list002 li span{ position: absolute; left: 10px; top: 15px; font-weight: bold;}

/*アイコン*/
.relative{ position: relative;}
.ico_bad{ position: absolute; right: 30px; top: -15px; width: 120px; z-index: 1;}
.ico_good{ position: absolute; right: 30px; top: -15px; width: 240px; z-index: 1;}
.ico_angel{ position: absolute; right: 30px; top: 30px; width: 180px; z-index: 1;}

/*クローズアップ*/
.close_up{ border: 10px double #562d16; background: #efefef; padding: 15px; margin: 30px auto; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);}
.close_up figure{ margin: 15px auto 30px;}
.close_up figure img{ width: 33.3333%; box-shadow: 0 0 5px 2px rgba(255,255,255,1.0);}

/*増やす方法*/
#howto dl{ margin: 30px auto;}
#howto dl dt{ background: #562d16; padding: 15px; font-size: 144%; letter-spacing: 0.1em; font-weight: bold; color: #fff; text-align: center; border-radius: 30px 30px 0 0; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#howto dl dd{ border: 6px solid #562d16; border-top: none; padding: 15px;}
#howto dl dd figure{ margin: 15px auto 30px;}
#howto dl dd figure img{ width: 50%; border-radius: 50%; box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);}

/*成分*/
#seibun ul li{ margin: 30px auto;}
#seibun h3{ background: #562d16; padding: 15px; font-size: 144%; line-height: 1em; letter-spacing: 0.1em; font-weight: bold; color: #fff; text-align: center; border-radius: 30px 30px 0 0; border-bottom: 6px double #fff; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#seibun h3 span{ display: block; font-size: 75%; line-height: 1em; margin-top: 0.25em;}
#seibun dl{ display: table; table-layout: fixed; width: 100%;}
#seibun dl dt{ display: table-cell; vertical-align: middle; width: 180px; background: #d0c3ad; border: 6px solid #562d16; border-right: none; padding: 15px; border-radius: 0 0 0 30px;}
#seibun dl dt figure{ margin: 0 auto;}
#seibun dl dt figure img{ border-radius: 50%; box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);}
#seibun dl dd{ display: table-cell; vertical-align: middle; border: 6px solid #562d16; border-left: none; padding: 0 15px; font-size: 90%; border-radius: 0 0 30px 0;}
#seibun dl dd ul li{ margin: 15px auto; line-height: 1.4em;}

/*質問*/
.qanda dl{ margin: 30px auto;}
.qanda dl dt{ position: relative; padding: 15px 15px 15px 50px; background: #326496; color: #fff; font-weight: bold; line-height: 1.4em; letter-spacing: 0.1em; border-top: 10px double #fff;}
.qanda dl dt span{ position: absolute; left: 15px; top: 15px;}
.qanda dl dd{ border-left: 6px dotted #326496; margin-left: 15px; padding: 15px;}
.qanda dl dd span.okada{ display: block; text-align: right; color: #326496; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; font-style: italic; text-decoration: underline;}

/*5つの理由*/
#reason dl{ margin: 30px auto; position: relative;}
#reason dl:after{ content: ""; width: 60px; height: 65px; background: url("../images/ico_reason.png"); background-size: 100%; position: absolute; right: -25px; top: -20px;}
#reason dl dt{ background: #329632; color: #fff; padding: 15px 15px 15px 65px; position: relative; font-size: 116%; font-weight: bold; line-height: 1.4em; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; border-radius: 40px 80px 0 0; position: relative; z-index: 1;}
#reason dl dt span{ position: absolute; left: 15px; top: 15px; font-weight: bold; background: #fff; color: #329632; padding: 0 10px; border-radius: 50%;}
#reason dl dd{ border: 6px solid #329632; border-top: none; border-radius: 0 0 0 40px; padding: 15px;}

/*3つのこだわり*/
#pick dl{ margin: 6px auto;}
#pick dl dt{ background: #329632; color: #fff; padding: 15px 15px 15px 70px; font-size: 116%; font-weight: bold; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; position: relative;}
#pick dl dt span{ font-size: 80%;}
#pick dl dt span.num{ position: absolute; left: 15px; top: 15px; font-weight: bold; background: #fff; color: #329632; padding: 0 12px; border-radius: 50%; font-size: 100%;}
#pick dl dd{ border: 6px solid #329632; border-top: none; padding: 15px; display: table; table-layout: fixed; width: 100%;}
#pick dl dd figure{ display: table-cell; vertical-align: middle; width: 210px; margin:0 auto;}
#pick dl dd figure img{ border-radius: 15px;}
#pick dl dd p{ display: table-cell; vertical-align: middle; padding-left: 15px; line-height: 1.4em; font-size: 90%;}

/*成分*/
#seibun table{ width: 100%; border-collapse: collapse; border-spacing: 0; border: 2px solid #191919; margin: 30px auto;}
#seibun table th{ display: block; background: #efefef; font-weight: bold; border: 2px solid #191919; padding: 15px; text-align: center; font-size: 116%;}
#seibun table td{ display: block; background: #fff; border: 2px solid #191919; padding: 15px; font-size: 90%;}

/*支払方法*/
#notice{ border: 6px solid #326496; padding: 15px; background: #efefef; margin: 30px auto;}
#notice h3{ text-align: center; color: #326496; font-size: 125%; margin-bottom: 30px;}
#notice ul li{ margin: 30px auto;}
#notice dl.notice01 dt{ border-left: 6px solid #326496; border-bottom: 1px solid #326496; padding: 0 15px; font-weight: bold; color: #326496;}
#notice dl.notice01 dd{ padding: 15px;}
#notice dl.notice01 dd p{ font-size: 90%; line-height: 1.4em;}
#notice dl.notice01 dd figure{ margin: 1em auto;}
#notice dl.notice01 dd figure img{ border: 1px dotted #333;}
#notice dl.notice02 dd{ padding: 15px;}
#notice dl.notice02 dd p{ font-size: 90%; line-height: 1.4em;}

/*喜びの声*/
#voice dl{ margin: 30px auto; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
#voice dl dt{ background: #562d16; color: #fff; padding: 15px; font-size: 125%; font-weight: bold; letter-spacing: 0.1em; border-top: 10px double #fff;}
#voice dl dt span{ float: right;}
#voice dl dd{ border:6px solid #562d16; border-top: none; padding: 15px;}


/*フォーム001*/
.form{ position: relative; margin: 30px auto;}
.form .adcode_btn{ position: absolute; left: 0; right: 0; bottom: 220px; margin: auto; text-align: center;}
.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);}
/*フォーム002*/
.form002{ position: relative; margin: 30px auto;}
.form002 .adcode_btn002_1{ position: absolute; left: 0; right: 0; bottom: 350px; margin: auto; text-align: center;}
.form002 .adcode_btn002_2{ position: absolute; left: 0; right: 0; bottom: 200px; margin: auto; text-align: center;}
.form002 a img{ position: relative; animation: fade ease-in-out 1s infinite alternate; transition: 0.3s;}
.form002 a:hover img{ animation-play-state: paused; transform: scale(1.08);}

p.form_notice{ padding: 0 15px; font-size: 60%; line-height: 1.4em; margin-top: -25px;}


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






/*問合せ*/
#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:220px; vertical-align:middle;}
#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){
.pc{ display:none !important;}
}