@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*		font-style
-------------------------------------------------- */
body {
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
/*	font-family: "游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;*/
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ /zoom: 1; clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}

#hd { width: 100%; position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0 0 5px #aaa; z-index: 100;}
#hd h1 { text-align: center;} 
#hd h1 img{ width: 100%; max-width: 1000px;}

.kv { margin-bottom: 40px; background: url(../img/bg-kv.jpg) no-repeat 50% 50%;}
.kv .inner { width: 92%; max-width: 1200px; margin: 0 auto; padding-top: 100px;}
.kv h2 { text-align: center;}
.kv h2 img{ width: 100%;}
.kv h2 img.sp { display: none;}
@media (max-width: 641px) {
	.kv .inner { width: 100%; padding-top: 50px;}
	.kv h2 img.pc { display: none;}
	.kv h2 img.sp { display: block;}
}

.cvr { position: relative; width: 100%; max-width: 1050px; margin: 0 auto 40px; padding-top: 100px;}
.cvr .inner { width: 94%; max-width: 1000px; margin: 0 auto; padding: 70px 40px 40px; background: #fffae9; border: solid 10px #eae2c5;}
.cvr h2 { position: absolute; width: 100%; top: 0; left: 0;}
.cvr h2 img { width: 100%;}
.cvr h3 { text-align: center;}
.cvr h3 img { width: 100%; max-width: 780px;}
.cvr .product1 { margin: 0 auto 40px;}
.cvr .product1 .img { display: inline-block; width: 32%; text-align: center; vertical-align: bottom;}
.cvr .product1 .txt { display: inline-block; width: 65%; text-align: center; vertical-align: bottom;}
.cvr .product1 .img img{ width: 96%; max-width: 268px;}
.cvr .product1 .txt img{ width: 95%; max-width: 540px; margin: 0 auto 20px;}
.cvr .product1 .txt img.sp{ display: none;}
.cvr .set { width: 100%; text-align: center;}
.cvr .product2,
.cvr .product4 { display: inline-block; width: 48%; margin: 0 auto;}
.cvr .product2 img,
.cvr .product4 img{ width: 96%; max-width: 407px; margin: 0 auto 20px;}
.cvr a { display: block; margin: 0 auto; padding: 20px 0; border-radius: 8px;
 font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
}
.cvr a:before{ content: ''; display: inline-block; margin-right: 20px;
 background: url(../img/arw.png) no-repeat 50% 50%; background-size: 100% 100%; border-radius: 50%;
}
.cvr a:hover { opacity: 0.8;}
.cvr a.btn1 { width: 90%;
 background: #d28506;
 background: linear-gradient(#d58c15, #d18201, #d18200);
 box-shadow: 4px 4px 0 #b57306;
 color: #fff; font-size: 40px; text-shadow: 2px 2px 1px #ba7605;
}
.cvr a.btn1:before { width: 32px; height: 32px; box-shadow: 2px 2px 0px #ba7605;}
.cvr a.btn2 { width: 90%;
 background: #d28506;
 background: linear-gradient(#1580c7, #0276c2, #0075c2);
 box-shadow: 4px 4px 0 #025890;
 color: #fff; font-size: 28px;
}
.cvr a.btn2:before { width: 24px; height: 24px; box-shadow: 2px 2px 0px #025890;}
.cvr a.btn3 { width: 90%;
 background: #d28506;
 background: linear-gradient(#ebdc15, #e9d900, #e9d900);
 box-shadow: 4px 4px 0 #7f7602;
 color: #000; font-size: 28px;
}
.cvr a.btn3:before { width: 24px; height: 24px; box-shadow: 2px 2px 0px #7f7602;}
@media (max-width: 769px) {
	.cvr { padding-top: 60px;}
	.cvr .product1 .img { display: none;}
	.cvr .product1 .txt { display: block; width: 100%;}
	.cvr .product1 .txt img.pc{ display: none;}
	.cvr .product1 .txt img.sp{ display: block;}
}
@media (max-width: 641px) {
	.cvr .inner { padding: 40px;}
	.cvr .product2 { display: block; width: 85%; margin: 0 auto 30px;}
	.cvr .product4 { display: block; width: 85%;}
}
@media (max-width: 481px) {
	.cvr { padding-top: 40px;}
	.cvr .inner { padding: 20px 20px 30px; border: solid 6px #eae2c5;}
	.cvr a { padding: 10px 0;}
	.cvr a.btn1 { width: 85%; font-size: 24px;}
	.cvr a.btn1:before { width: 20px; height: 20px;}
	.cvr a.btn2,
	.cvr a.btn3 { width: 100%; font-size: 20px;}
	.cvr a.btn2:before,
	.cvr a.btn3:before { width: 18px; height: 18px;}
}

.sct { width: 94%; max-width: 1050px; margin: 0 auto 40px;}
.sct p img{ width: 100%;}
.sct p.sp,
.sct p img.sp{ display: none;}
@media (max-width: 641px) {
	.sct p.pc,
	.sct p img.pc{ display: none;}
	.sct p.sp,
	.sct p img.sp{ display: block;}
}
.recipe { width: 92%; max-width: 1050px; margin: 0 auto 40px;}
.recipe1,
.recipe2 { position: relative;}
.recipe1 p img,
.recipe2 p img { width: 100%;}
.recipe1 p img.sp,
.recipe2 p img.sp { display: none;}
.recipe1 .youtube { position: absolute; width: 100%; bottom: 60px;}
.recipe2 .youtube { position: absolute; width: 100%; bottom: 100px;}
.recipe1 .youtube div,
.recipe2 .youtube div{ width: 92%; max-width: 750px; margin: 0 auto; height: 422px;}
.recipe1 .youtube div iframe,
.recipe2 .youtube div iframe{ width: 100%; height: 100%; border: none;}
@media (max-width: 641px) {
	.recipe1 p img.pc,
	.recipe2 p img.pc { display: none;}
	.recipe1 p img.sp,
	.recipe2 p img.sp { display: block;}
	.recipe1 .youtube { bottom: 30px;}
	.recipe2 .youtube { bottom: 70px;}
	.recipe1 .youtube div,
	.recipe2 .youtube div{ width: 88%; height: 290px;}
}
@media (max-width: 481px) {
	.recipe1 .youtube { bottom: 15px;}
	.recipe2 .youtube { bottom: 40px;}
	.recipe1 .youtube div,
	.recipe2 .youtube div{ height: 170px;}
}}
.voice { width: 94%; max-width: 1000px; margin: 0 auto 40px;}
.voice p img{ width: 100%;}
.faq { width: 94%; max-width: 1000px; margin: 0 auto 40px;}
.faq h2 img { width: 100%;}
.faq h3 { margin-bottom: 20px; text-align: center;}
.faq h3 img { width: 80%; max-width: 350px;} 
.faq .inner { width: 100%; padding: 30px 50px 60px; background: #cae3f3;}
.faq .box { margin: 0 auto 30px; padding: 40px 50px; background: #fff; box-shadow: 4px 4px 0 #e2a0a2;}
.faq .box:last-child{ margin: 0 auto;}
.faq .box dl dt{ margin-bottom: 20px; padding: 0px 0px 20px 80px;
 border-bottom: dashed 2px #878787; background: url(../img/icn-Q.png) no-repeat 0 0;
 color: #000; font-size: 30px; font-weight: 700;
}
.faq .box dl dd{ padding: 0px 0px 0px 80px; background: url(../img/icn-A.png) no-repeat 0 0;
 color: #000; font-size: 22px; font-weight: 700; letter-spacing: 0.025rem;
}
@media (max-width: 641px) {
	.faq .inner { padding: 20px 30px 40px;}
	.faq .box { padding: 30px;}
}
@media (max-width: 481px) {
	.faq .box { padding: 20px;}
	.faq .box dl dt{ padding: 0px 0px 20px 50px; background-size: 30px auto; font-size: 18px;}
	.faq .box dl dd{ padding: 0px 0px 0px 50px; background-size: 30px auto; font-size: 15px;}
}

.info { width: 94%; max-width: 1000px; margin: 0 auto 50px; padding: 50px; border: solid 7px #d2ecfa;}
.info h3 { font-size: 23px;}
.info p { font-size: 18px; line-height: 1.8;}
.info p sub{ font-size: 12px; letter-spacing: -0.075rem;}
@media (max-width: 641px) {
	.info { padding: 30px;}
}
@media (max-width: 481px) {
	.info { padding: 20px;}
	.info p{ font-size: 15px;}
	.info p sub{ font-size: 11px;}
}

#ft { padding: 30px 0 35px; background: #f3ede9;}
#ft .btn { width: 80%; max-width: 400px; margin: 0 auto;}
#ft .btn a { display: block; margin: 0 auto; padding: 20px 0; border-radius: 8px;
 background: #d28506;
 background: linear-gradient(#d58c15, #d18201, #d18200);
 box-shadow: 4px 4px 0 #b57306;
 color: #fff; font-size: 27px; text-shadow: 2px 2px 1px #ba7605; font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
}
#ft .btn a:before{ content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 20px;
 background: url(../img/arw.png) no-repeat 50% 50%; background-size: 100% 100%; border-radius: 50%;
}
#ft .btn  a:hover { opacity: 0.8;}