@charset "utf-8";
/* ------------------------------------------------------------ common */
body { min-width: 1367px; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
a:link,
a:visited { color: #000; text-decoration: none; }
a:hover,
a:hover img,
input[type="submit"]:hover { text-decoration: none; transform:translateX(5px) translateY(5px); }

.inner { max-width: 1200px; margin: 0 auto; }
.SP { display: none; }

/* ------------------------------------------------------------ 素材 */
/* ----- ぽよぽよ ----- */
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  70%, 90% {
    transform: scale(0.95);
  }
}

/* ----- ぽよぽよ 大サイズ ----- */
.poyopoyo_L {
  animation: poyopoyo_L 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo_L {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.8);
  }
}

/* ----- フェードイン ----- */
.u-fade{
    opacity: 0;
}
.u-fade.is-active{
    transition: .6s;
    opacity: 1;
}

/* ----- マウスオーバーで画像拡大 ----- */
/*.image_mouseover_1 {
overflow: visible;
width: 100%;
height: 100%;
}*/
.mouseover_zoom img {
/*display: block;*/
transition-duration: 0.5s;
}
.mouseover_zoom img:hover {
transform: scale(1.1,1.1);
transition-duration: 0.5s;
}

/* ----- マウスオーバーで画像拡大 大サイズ ----- */
.mouseover_zoom_L img {
transition-duration: 0.5s;
}
.mouseover_zoom_L img:hover {
transform: scale(1.25,1.25);
transition-duration: 0.5s;
}

/* ------------------------------------------------------------ fv */
#fv { position: relative; top:0; left:0; background: #ffed00; }
#fv h1 { text-align: center; }
#fv img { width: 95%; height: auto; }
#fv .fv_text01 { position: absolute; top: 3%; left: 46%; }
#fv .fv_text01 img { width: 85%; height: auto; }
#fv .fv_text02 { width: 70%; position: absolute; top: 99%; left: 50%; transform: translate(-50%, -50%); }
#fv .fv_text02 img { width: 100%; height: auto; max-width: 1300px; }
#fv .box_top_L { left: 0; bottom: 0; width: 100%; height: 33px; }
#fv .box_top_L div { width: 100%; height: 100%; background: url(../images/box_top_L.png) repeat-x; }

/* ------------------------------------------------------------ product01 */
#product01 { padding: 100px 0 0; margin: 0 auto; background: #000; }
#product01 img { width:100%; height: auto; }
#product01 .w_box { display: table; padding: 0 0 20px; width:100%; }
#product01 .w_box .img_text { display: table-cell; vertical-align: middle; padding: 0 20px; width:42%; }
#product01 .w_box .img_item { display: table-cell; vertical-align: middle; padding: 0 20px; width:50%; }
#product01 .box_bottom { left: 0; bottom: 0; width: 100%; height: 40px; }
#product01 .box_bottom div { width: 100%; height: 100%; background: url(../images/box_bottom.png) repeat-x; }

/* ------------------------------------------------------------ recipe */
#recipe { padding: 40px 0 0; margin: 0 auto; background: #ffed00; background-image: url(../images/recipe_bg_L.png),url(../images/recipe_bg_R.png); background-repeat: repeat-y; background-position: left 10px,right 10px; background-size:150px; }
#recipe img { width: 100%; height: auto; }
#recipe .s_box { margin: 0 0 20px; width:100%; }
#recipe .s_box .img { width: 100%; height: auto; }
#recipe .box_top { left: 0; bottom: 0; width: 100%; height: 40px; margin-top: 50px; }
#recipe .box_top div { width: 100%; height: 100%; background: url(../images/box_top.png) repeat-x; }

/* ------------------------------------------------------------ product02 */
#product02 { padding: 40px 0 0; margin: 0 auto; background: #000; }
#product02 img { width: 100%; height: auto; }
#product02 .s_box { display: block; margin: 0 auto; width: 80%; }
#product02 .s_box .img { display: block; width: 100%; box-sizing: border-box; }
#product02 .w_box { display: table; padding: 0 0 20px; margin:0 auto; }
#product02 .w_box .img { display: table-cell; vertical-align: middle; padding: 0 50px; }
#product02 .box_bottom { left: 0; bottom: 0; width: 100%; height: 40px; }
#product02 .box_bottom div { width: 100%; height: 100%; background: url(../images/box_bottom.png) repeat-x; }

/* ------------------------------------------------------------ footer */
footer { padding: 40px 0; margin: 0 auto; background: #ffed00; border-bottom: solid 6px #d1091e; }
footer small { display: block; font-size: 14px; color: #000; text-align: center; }
.footer_share .inner { max-width: 1080px; box-sizing: border-box; padding: 80px 0px 85px; margin: 0 auto; }
.footer_share { width: 16%; margin: 0 auto 3%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; }
.footer_share_item { width: 25%; }
.footer_share_item a { border-radius: 50%; overflow: hidden; display: block; }
.footer_share_item img { width: 100%; height: auto; }
.footer_share a:hover,
.footer_share a:hover img { text-decoration: none; transform:translateX(0px) translateY(0px); }


/* ------------------------------------------------------------ tablet/iPad Pro */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
/* ------------------------------------------------------------ common */
body { min-width: inherit; }
.inner { width: 80%; }

/* ------------------------------------------------------------ fv */
#fv img { width: 100%; height: auto; }
#fv .fv_text01 { position: absolute; top: 2%; left: 45%; }
#fv .fv_text01 img { width: 60%; height: auto; }
#fv .fv_text02 { width: 90%; position: absolute; top: 98%; left: 50%; transform: translate(-50%, -50%); }
#fv .fv_text02 img { width: 100%; height: auto; max-width: 1366px; }

/* ------------------------------------------------------------ product01 */
#product01 { padding: 70px 0 0; margin: 0 auto; background: #000; }

/* ------------------------------------------------------------ recipe */
#recipe { padding: 40px 0 0; margin: 0 auto; background: #ffed00; }

/* ------------------------------------------------------------ product02 */
#product02 { padding: 20px 0 0; margin: 0 auto; background: #000; }
#product02 .w_box { display: table; padding: 20px 0; margin:0 auto; width: 50%; }
#product02 .w_box .img { display: table-cell; vertical-align: middle; padding: 0 40px; }

/* ------------------------------------------------------------ footer */
footer { padding: 60px 0 30px; margin: 0 auto; background: #ffed00; border-bottom: solid 6px #d1091e; }
footer small { display: block; font-size: 12px; color: #000; text-align: center; }
.footer_share { width: 20%; margin: 0 auto 5%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; }

}


/* ------------------------------------------------------------ tablet/iPad */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
/* ------------------------------------------------------------ common */
body { min-width: inherit; }
.inner { width: 80%; }

/* ------------------------------------------------------------ fv */
#fv img { width: 100%; height: auto; }
#fv .fv_text01 { position: absolute; top: 2%; left: 45%; }
#fv .fv_text01 img { width: 50%; height: auto; }
#fv .fv_text02 { width: 90%; position: absolute; top: 98%; left: 50%; transform: translate(-50%, -50%); }
#fv .fv_text02 img { width: 100%; height: auto; max-width: 1023px; }

/* ------------------------------------------------------------ product01 */
#product01 { padding: 60px 0 0; margin: 0 auto; background: #000; }

/* ------------------------------------------------------------ recipe */
#recipe { padding: 40px 0 0; margin: 0 auto; background: #ffed00; }

/* ------------------------------------------------------------ product02 */
#product02 { padding: 20px 0 0; margin: 0 auto; background: #000; }
#product02 .w_box { display: table; padding: 20px 0; margin:0 auto; width: 50%; }
#product02 .w_box .img { display: table-cell; vertical-align: middle; padding: 0 20px; }

/* ------------------------------------------------------------ footer */
footer { padding: 40px 0 30px; margin: 0 auto; background: #ffed00; border-bottom: solid 6px #d1091e; }
footer small { display: block; font-size: 12px; color: #000; text-align: center; }
.footer_share { width: 25%; margin: 0 auto 5%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; }

}


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width: 767px) {
/* ------------------------------------------------------------ common */
body { min-width: inherit; }
.inner { width: 95%; }
.SP { display: inline; }

/* ------------------------------------------------------------ fv */
#fv img { width: 100%; height: auto; }
#fv .fv_text01 { position: absolute; top: 42%; left: 1%; }
#fv .fv_text01 img { width: 50%; height: auto; }
#fv .fv_text02 { width: 92%; position: absolute; top: 98%; left: 50%; transform: translate(-50%, -50%); }
#fv .fv_text02 img { width: 100%; height: auto; max-width: 767px; }

/* ------------------------------------------------------------ product01 */
#product01 { padding: 70px 0 0; margin: 0 auto; background: #000; }
#product01 .w_box { display: block; padding: 0px; }
#product01 .w_box .img_text, #product01 .w_box .img_item { display: block; width: 100%; padding: 0 0 20px; box-sizing: border-box; }

/* ------------------------------------------------------------ recipe */
#recipe { padding: 40px 0 0; margin: 0 auto; background: #ffed00; }
#recipe img { width: 100%; }
#recipe .s_box { margin: 0 auto; padding: 0 0 20px; width:100%; }
#recipe .s_box .img { width: 100%; height: auto; }

/* ------------------------------------------------------------ product02 */
#product02 { padding: 20px 0 0; margin: 0 auto; background: #000; }
#product02 .s_box { display: block; margin: 0 auto; width: 100%; }
#product02 .w_box { display: table; padding: 20px 0; margin:0 auto; width: 80%; }
#product02 .w_box .img { display: table-cell; vertical-align: middle; padding: 0 20px; }

/* ------------------------------------------------------------ footer */
footer { padding: 40px 0 30px; margin: 0 auto; background: #ffed00; border-bottom: solid 6px #d1091e; }
footer small { display: block; font-size: 10px; color: #000; text-align: center; }
.footer_share { width: 50%; margin: 0 auto 10%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; }

}