@charset "utf-8";
/* CSS Document */
/*webフォントアイコン*/
@font-face {
    font-family: 'LigatureSymbols';
    src: url('font/LigatureSymbols-2.11.eot');
    src: url('font/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('font/LigatureSymbols-2.11.woff') format('woff'),
         url('font/LigatureSymbols-2.11.ttf') format('truetype'),
         url('font/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}

.lsf {
  font-family: 'LigatureSymbols';
  font-weight:normal !important;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
  padding-right:4px;
  display:inline-block;
}
.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
/*webフォントアイコン*/

*{ box-sizing:border-box;}
body {
	margin: 0px auto;
	padding: 0px;
	font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
	font-size: 24px;
	text-align: left;
	color: #32281e;
	background:url(../images/bg.webp) center center fixed;
	}   
@media screen and (max-width:750px) {
  body {font-size: 14px;}
}
/*基本項目*/
img {margin:-1px 0 0;border:0; vertical-align:bottom; max-width:100%;}
#content img{ max-width:100%;}
strong{ font-weight:bold;}
h1,h2,h3,h4,h5 { margin:0; letter-spacing:0em; /*font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;*/}
p,td,table,div,dl,dt,dd{ margin:0; padding:0;}
ul,ol{ list-style:none; margin:0; padding:0;}

p { line-height:1.6em; margin:0px auto 15px;}
p:last-child {margin:0px; }

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

figure {margin:0 auto; text-align:center;}
figure.m0 {margin:0px auto;}
figure.waku img { padding:5px; border:1px dotted #aaa; background:#fff;}

figure.cut img{ border-radius:50%; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 6px 3px; -webkit-box-shadow:(0, 0, 0, 0.2) 0px 0px 6px 3px; -moz-box-shadow:(0, 0, 0, 0.2) 0px 0px 6px 3px;}

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


/*共通項目*/
#wrapper { margin:0px auto; padding:0px; width:100%;}
#content { padding:0; margin:0px auto;}
.content { width:100%; margin:0px auto; background:#fff; padding:20px 2% 40px; box-shadow:rgba(0, 0, 0, 0.33) 0px 0px 6px 3px; -webkit-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px; -moz-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px;}
section { margin:0px auto; padding:0px px; text-align:left;}



/*------------------------------------------
■ リンク設定
------------------------------------------*/
a img{border:none;}
a {color:#32281e; text-decoration:none;}
a:hover {color:#32281e; text-decoration:underline;}


/*------------------------------------------
■ 画像回り込み
------------------------------------------*/
.img_left{float:left;margin-right:20px;margin-bottom:10px;}
.img_right{float:right;margin-left:20px;margin-bottom:10px;}
.img_center{display:block;margin:20px auto;clear:both;}


/*------------------------------------------
■ Footer
------------------------------------------*/
#footer{ background:#f0c8d2; width:100%; margin:0 auto; padding:0px; text-align:center; display:block; letter-spacing:0.05em; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 6px 3px; -webkit-box-shadow:(0, 0, 0, 0.2) 0px 0px 6px 3px; -moz-box-shadow:(0, 0, 0, 0.2) 0px 0px 6px 3px;}
.copyright { background:#fa96af; font-size:12px; padding:10px 0; text-align:center; color:#fff;}
#footer ul li{ display:block; padding:3%; font-size:15px; color:#32281e; border-top:3px solid #fa96af; text-align:left;}
#footer ul li a{ color:#f04b64; font-weight:bold;}

/*------------------------------------------
■ header
------------------------------------------*/
#header{ text-align:center; position:relative; z-index:2;}
#header img{ width:100%;}
h1{ text-align:center; padding:0px 0px}

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

@media screen and (max-width:750px) {
  #content{ width:100%;}
}
/*------------------------------------------
■ Title
------------------------------------------*/
h2{ text-align:center; background:url(../images/h2_bg.webp) center center repeat #f04b64; color:#fff; padding:10px; font-size:21px; border-top:6px solid #f0d278; border-bottom:6px solid #f0d278; line-height:1.4em; position:relative; z-index:1; box-shadow:rgba(0, 0, 0, 0.33) 0px 0px 6px 3px; -webkit-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px; -moz-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px;}
/* h3{ margin:45px auto 15px; border-left:6px solid #6496c8; border-bottom:1px solid #6496c8; color:#6496c8; font-size:18px; line-height:1.4em; padding:5px;} */

/*------------------------------------------
■ list
------------------------------------------*/
.ul_bad{ margin:15px auto; color:#6496c8; font-weight:bold;}
.ul_bad li{ border-bottom:1px dotted #6496c8; padding:5px;}
.ul_bad li:first-child{ border-top:1px dotted #6496c8;}
.ul_good{ margin:15px auto; color:#f04b64; font-weight:bold;}
.ul_good li{ border-bottom:1px dotted #f04b64; padding:5px;}
.ul_good li:first-child{ border-top:1px dotted #f04b64;}

.ul_bad2{ margin:20px auto; color:#6496c8; font-weight:bold;}
.ul_bad2 li{ border-bottom:1px dotted #6496c8; padding:5px; font-size:18px;}
.ul_bad2 li:first-child{ border-top:1px dotted #6496c8;}
.ul_good2{ margin:20px auto; color:#f04b64; font-weight:bold;}
.ul_good2 li{ border-bottom:1px dotted #f04b64; padding:5px; font-size:18px;}
.ul_good2 li:first-child{ border-top:1px dotted #f04b64;}

.ul001{ border:6px solid #f04b64; padding:3%; margin:20px auto;}
.ul001 li{ color:#f04b64; font-weight:bold; border-top:1px dotted #f04b64; border-bottom:1px dotted #f04b64; padding:3%; text-align:center; font-size:18px;}
.ul001 figure{ margin:10px auto;}
.ul001 figure img{ width:33%;}

/*サポート*/
.suppurt_t{ background:#6496c8; color:#fff; font-weight:bold; font-size:18px; padding:10px 10px 5px; letter-spacing:0.1em; margin-bottom:20px; text-align:center; border:6px double #fff;}
.suppurt_t span{ background:#f0d278; color:#32281e; padding:0px 10px; border-radius:20px; display:block; margin-bottom:5px;}
.support ul{ margin:20px auto;}
.support ul li{ padding:10px; border-bottom:1px dotted #333; font-weight:bold;}
.support ul li:first-child{ border-top:1px dotted #333;}
.support ul li span{ display:block; font-size:15px; font-weight:normal;}

.test_t{ border-top:1px solid #333; border-bottom:1px solid #333; text-align:center; font-size:18px; font-weight:bold; padding:3%; margin:45px auto 15px;}
table.test_table{ margin:10px auto 20px; width:100%; border-collapse:collapse; border:1px solid #333;}
table.test_table th{ width:100%; display:block; padding:5px; border:1px solid #333; background:#ededed; text-align:center;}
table.test_table td{ width:100%; display:block; padding:5px; border:1px solid #333; font-size:12px;}

dl.test_zu{ text-align:center; margin:20px auto;}
dl.test_zu figure{ margin:0px auto;}
dl.test_zu figure.waku img { padding:0px;}
dl.test_zu dt span{ display:block; background:#ededed; font-size:18px; font-weight:bold; padding:5px 10px; border:1px solid #ccc;}
dl.test_zu dd{ margin-top:5px;}

.test02{ text-align:center; margin:20px auto;}
.test02 dl{ border:3px double #333; padding:3% 3% 0px; display:block;}
.test02 dl dt{ text-align:center; border-bottom:1px solid #333; padding-bottom:3%; font-size:18px; font-weight:bold;}
.test02 dl dd{ padding:3%; text-align:left;}

/*成分*/
dl.seibun{ display:table; table-layout:fixed; width:100%; background:#fae1c8; padding:3%; margin-bottom:20px; border:6px solid #f0d278; box-shadow:rgba(0, 0, 0, 0.33) 0px 0px 6px 3px; -webkit-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px; -moz-box-shadow:(0, 0, 0, 0.33) 0px 0px 6px 3px;}
dl.seibun:last-child{ margin-bottom:0px;}
dl.seibun dt{ display:block; vertical-align:middle;}
dl.seibun dd{ display:blcok; vertical-align:middle;}
dl.seibun dt strong{ display:block; color:#f04b64; font-size:24px; text-decoration:underline;}
dl.seibun figure{ margin:0px auto;}
dl.seibun figure img{ border-radius:50%; width:33%;}

/*------------------------------------------
■  お願い
------------------------------------------*/
dl.onegai{ border:6px double #6496c8; padding:3% 1.5%; margin:20px auto;}
dl.onegai dt{ background:#6496c8; color:#fff; padding:3% 1.5%; font-size:18px; font-weight:bold; text-align:center; letter-spacing:0.1em; border-radius:40px;}
dl.onegai dd{ padding:3% 3% 0px;}

/*------------------------------------------
■  Form
------------------------------------------*/
.form{ margin:20px auto; text-align:center;}
.form_b{ margin:20px auto 10px; text-align:center;}
.form_b_notice{ text-align:center; text-decoration:underline; margin-bottom:20px;}
.form_b2{ margin:20px auto; text-align:center;}
.form img, .form_b img, .form_b2 img{ width:100%;}
figure.form{background:#e98418;}

/*定期図*/
dl.teiki_zu{ text-align:center; margin:20px auto;}
dl.teiki_zu dt{ color:#f04b64; font-weight:bold; font-size:24px; line-height:1.2em; letter-spacing:0.1em; margin-bottom:5px;}
dl.teiki_zu dd figure{ margin:0px auto;}
.teiki_zu2{ border:6px solid #fa96af; padding:0px 3% 3%; margin:20px auto;}
.teiki_zu2 dl{ padding:3% 0px; border-bottom:1px solid #32281e; width:100%;}
.teiki_zu2 dl dt{ background:#f04b64; border:6px double #fff; text-align:center; color:#fff; font-weight:bold; font-size:18px; padding:5px; margin-bottom:10px;}
.teiki_zu2 dl dd{ font-size:12px;}
.pay_zu{ border:6px solid #fa96af; padding:3% 3% 0px; margin:20px auto;}
.pay_zu h4{ text-align:center; font-size:15px; text-decoration:underline; margin-bottom:10px;}
.pay_zu dl{ border:1px solid #32281e; padding:3%; margin-bottom:10px;}
.pay_zu dl dt{ color:#f04b64; text-decoration:underline; font-weight:bold; font-size:14px; margin-bottom:10px;}
.pay_zu dl dd{ font-size:12px;}
.pay_zu dl dd figure{ margin:5px auto;}

/*製品情報*/
.product_info{ border:6px solid #fa96af; padding:3% 3% 0px; margin:20px auto;}
.product_info h4{ font-size:18px; font-weight:bold; letter-spacing:0.1em; background:#fa96af; color:#fff; padding:5px; border-radius:30px; text-align:center;}
.product_info dl dt{ text-align:center; letter-spacing:-1em; margin:3% auto;}
.product_info dl dt figure{ letter-spacing:normal; display:inline-block; width:48%; margin:0px 1%;}
.product_info dl dt img{ border:1px dotted #3c0000; padding:5px;}
.product_info table{ width:100%; border:1px solid #3c0000; border-collapse:collapse; margin:0px auto 3%; font-size:12px; text-align:center;}
.product_info table th{ padding:1.5%; border:1px solid #3c0000; vertical-align:middle; background:#efefef; font-weight:bold; width:40%;}
.product_info table th.tdth{ width:auto !important;}
.product_info table td{ font-size:11px; padding:1.5%; border:1px solid #3c0000; vertical-align:middle;}
.product_info table td.left{ text-align:left;}

/*お客様の声*/
dl.koe{ margin-bottom:20px;}
dl.koe:last-child{ margin-bottom:0px;}
dl.koe dt{ background:#6496c8; padding:3%; color:#fff; font-weight:bold; font-size:16px; letter-spacing:0.1em; border-radius:10px 10px 0px 0px; text-align:center;}
dl.koe dd{ border:6px solid #6496c8; border-top:none; padding:3%;}


/*よくある質問*/
.qa {padding: 60px 30px 60px 60px; background-color: #fefaf7;}
.qa .ttl{margin-bottom: 50px;}
.qa dl dt{ font-weight: bold; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; color: #e26479; position: relative; padding-left: 37px; font-size: 36px; margin-bottom: 31px; }
.qa dl dt:before{ content: ""; width: 74px; height: 87px; background: url(../images/img_q.webp); background-size: cover; display: block; position: absolute; left: -60px;}
.qa dl dd{font-size: 28px; margin-bottom: 30px; position: relative; padding-left: 72px; font-feature-settings: "palt";}
.qa dl dd:before{ content: ""; width: 48px; height: 39px; background: url(../images/img_a.webp); background-size: cover; display: block; position: absolute; left: 0;}
@media screen and (max-width:750px) {
  .qa {padding: 60px 30px 60px 60px; background-color: #fefaf7;}
  .qa dl dt{ padding-left: 37px; font-size: 20px; margin-bottom: 31px; }
  .qa dl dt:before{width: 74px; height: 87px;}
  .qa dl dd{font-size: 16px;}
}
/*成分*/
#seibun {margin: 0 30px;}
#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;}

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

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

/*支払方法*/
#notice{ border: 6px solid #e26479; padding: 15px; background: #fff3f5; margin: 30px 30px;}
#notice h3{ text-align: center; color: #e26479; font-size: 125%; margin-bottom: 30px; font-weight: bold;}
#notice ul li{ margin: 30px auto;}
#notice dl.notice01 dt{ border-left: 6px solid #e26479; border-bottom: 1px solid #e26479; padding: 0 15px; font-weight: bold; color: #e26479;}
#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 dt{ border-bottom: 1px solid #e26479; font-weight: bold; color: #e26479;}
#notice dl.notice02 dd{ padding: 15px;}
#notice dl.notice02 dd p{ font-size: 90%; line-height: 1.4em;}

/*------------------------------------------
■  Mail
------------------------------------------*/
#mail{ border:6px solid #aaa; padding:3%; margin:20px auto;}
table.mail{ width:100%; border-collapse:collapse; border:1px solid #333; margin-bottom:20px;}
table.mail th{ padding:3%; border:1px solid #333; width:100%; display:block; text-align:center; background:#dedede; vertical-align:middle;}
table.mail td{ padding:3%; border:1px solid #333; display:block;}
input,textarea{ font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; font-size:15px; width:100%; padding:10px; box-sizing:border-box; border:1px solid #aaa;}
input[type=submit]{ font-weight:bold; font-size:18px; letter-spacing:0.1em; cursor:pointer; width:100%; margin:0px;}


/*フローティングボタン*/

.floating-banner {
  background-color:#f5f2d5;
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 0; /* バナーの上下の位置 */
  right: 0; /* バナーの左右の位置 */
}
.floating-banner__image {
  max-width: 100%; /* 画像の最大幅 */
}
.floating-banner {
  display: block;/* 消していたバナーを表示させる */
   width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
   text-align: center;
 }

/*ぬるっとスクロール*/
html {
  scroll-behavior: smooth;
}
section {
  scroll-margin-top: 100px;
  margin-bottom: 50px;
}

/*キラッと光るボタン*/
.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* モバイル修正 */