@-webkit-keyframes animation-top { 0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  60% { opacity: 1; } }

@-moz-keyframes animation-top { 0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  60% { opacity: 1; } }

@keyframes animation-top { 0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  60% { opacity: 1; } }

@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0);
    transform: scale(0); }
  40% { -webkit-transform: scale(1);
    transform: scale(1); } }

@-moz-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0);
    transform: scale(0); }
  40% { -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0);
    transform: scale(0); }
  40% { -webkit-transform: scale(1);
    transform: scale(1); } }

.centerBox, #js_fade p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

/* .spinner { @extend .centerBox; width: 77px; height: 20px; top: 220px; & > div { width: 15px;  height: 15px; background-color: #46a036; margin-left:5px; border-radius: 100%; display: inline-block; @include animation(sk-bouncedelay 1.4s infinite ease-in-out both); } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } */
#js_fade { width: 100%; height: 100%; display: block; background: #ed6c00; position: fixed; z-index: 2000; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg1.png); }

#js_fade p { width: 200px; height: 128px; bottom: 0; }

@font-face { font-family: 'MyYuGothicM'; font-weight: normal; src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); }

@font-face { font-family: 'MyYuGothicM'; font-weight: bold; src: local("YuGothic-Bold"), local("Yu Gothic"); }

#tomamiso-shiru-top { font-family: MyYuGothicM, YuGothic, sans-serif; }

#tomamiso-shiru-top .section { margin: 0 auto; width: 100%; }

#tomamiso-shiru-top .section-full { width: 100%; }

#tomamiso-shiru-top img { width: 100%; max-width: 100%; }

#tomamiso-shiru-top div, #tomamiso-shiru-top ul, #tomamiso-shiru-top li, #tomamiso-shiru-top div, #tomamiso-shiru-top p, #tomamiso-shiru-top dl, #tomamiso-shiru-top dt, #tomamiso-shiru-top dd, #tomamiso-shiru-top figure, #tomamiso-shiru-top figcaption { box-sizing: border-box; }

#tomamiso-shiru-top .bg-shadow, #tomamiso-shiru-top #cont-story:after { content: ''; display: block; position: absolute; bottom: -11px; left: 0; width: 100%; height: 11px; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg-shadow.png); }

#tomamiso-shiru-top .bg-shadow-top, #tomamiso-shiru-top #product-list:after { content: ''; display: block; position: absolute; top: -11px; left: 0; width: 100%; height: 11px; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg-shadow-top.png); z-index: 10; }

#tomamiso-shiru-top .clearfix { content: ''; display: block; clear: both; }

#tomamiso-shiru-top #main-visual { padding: 0; position: relative; text-align: center; z-index: 1; }

#tomamiso-shiru-top #main-visual h1 { padding: 10% 2.5% 5% 2.5%; background: url(../images/tomamiso-shiru/tomamiso-shiru-kvbg-top.jpg); background-size: cover; }

#tomamiso-shiru-top #main-visual .top-pkg { padding: 0 2.5%; width: 100%; display: table; position: relative; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg1.png); }

#tomamiso-shiru-top #main-visual .top-pkg:before { width: 100%; height: 70%; content: ''; display: block; position: absolute; top: 0; left: 0; background: url(../images/tomamiso-shiru/tomamiso-shiru-kvbg-bottom.jpg); z-index: 1; }

#tomamiso-shiru-top #main-visual .top-pkg li { display: table-cell; position: relative; z-index: 2; vertical-align: middle; }

#tomamiso-shiru-top #cont-story { padding: 10% 0 100px 0; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg1.png); position: relative; }

#tomamiso-shiru-top #cont-story > .section { margin: 0 auto; padding: 10% 5%; width: 90%; background: #fff; border-radius: 10px; box-shadow: 7px 7px 0 0px rgba(25, 12, 11, 0.05); }

#tomamiso-shiru-top #cont-story > .section h3 { margin: 0 0 1em 0; text-align: center; }

#tomamiso-shiru-top #cont-story > .section li { margin: 0 0 35px 0; width: 100%; }

#tomamiso-shiru-top #cont-story > .section li:last-child { margin: 0; }

#tomamiso-shiru-top #cont-story > .section li figure { padding: 10%; width: 100%; position: relative; border: 1px solid #e0d9c5; background: #f8f5ec; border-radius: 10px; text-align: center; }

#tomamiso-shiru-top #cont-story > .section li dt { margin: 0 0 20px; padding: 10px 0; font-size: 22px; font-weight: bold; color: #693206; text-align: center; border-bottom: 2px solid #e3e0d6; }

#tomamiso-shiru-top #cont-story > .section li dd { font-size: 16px; line-height: 1.3; }

#tomamiso-shiru-top #cont-recipe { padding: 0 5% 5% 5%; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg2.png); }

#tomamiso-shiru-top #cont-recipe h3 { margin: -40px auto 40px auto; position: relative; z-index: 1; }

#tomamiso-shiru-top #cont-recipe .recipe { margin: 0 0 30px 0; padding: 25px; width: 100%; position: relative; background: #fffded; border-radius: 10px; box-shadow: 7px 7px 0px 0px rgba(25, 12, 11, 0.05); }

#tomamiso-shiru-top #cont-recipe .recipe:after { content: ''; display: block; position: absolute; top: 1%; left: 2%; width: 96%; height: 98%; border: 1px solid #fad7b9; border-radius: 10px; }

#tomamiso-shiru-top #cont-recipe .recipe h4 { margin: 0 0 5% 0; }

#tomamiso-shiru-top #cont-recipe .recipe li { padding: 15px 0; width: 100%; position: relative; font-size: 15px; border-top: 1px solid #dddbca; }

#tomamiso-shiru-top #cont-recipe .recipe li figure { text-align: center; }

#tomamiso-shiru-top #cont-recipe .recipe li img { width: 80%; }

#tomamiso-shiru-top #cont-recipe .recipe li img.full { margin: 5% 0 0 0; width: 100%; }

#tomamiso-shiru-top #cont-recipe .recipe li:after { width: 40px; height: 40px; content: ''; display: block; position: absolute; top: 15px; left: 0; background: url(../images/tomamiso-shiru/tomamiso-shiru-icon.png) no-repeat top left; background-size: 400%; }

#tomamiso-shiru-top #cont-recipe .recipe li:nth-child(1):after { background-position: -6px -3px; }

#tomamiso-shiru-top #cont-recipe .recipe li:nth-child(2):after { background-position: -41px -40px; }

#tomamiso-shiru-top #cont-recipe .recipe li:nth-child(3):after { background-position: -76px -77px; }

#tomamiso-shiru-top #cont-recipe .recipe li:nth-child(4):after { background-position: -110px -115px; }

#tomamiso-shiru-top #product-list { padding: 10% 2.5%; background: url(../images/tomamiso-shiru/tomamiso-shiru-bg1.png); position: relative; }

#tomamiso-shiru-top #product-list h3 { padding: 0 30%; margin: 0 0 10% 0; text-align: center; }

#tomamiso-shiru-top #product-list .product-info { margin: 10% 0; width: 100%; position: relative; }

#tomamiso-shiru-top #product-list .product-chara { padding: 2%; width: 67%; }

#tomamiso-shiru-top #product-list .product-chara.new1 { background: #cddfa3; }

#tomamiso-shiru-top #product-list .product-chara.new2 { background: #edbab3; }

#tomamiso-shiru-top #product-list .product-chara dl { padding: 20px; width: 100%; height: 100%; background: #fff; box-shadow: 0px 0px 6px 0px rgba(25, 12, 11, 0.2); }

#tomamiso-shiru-top #product-list .product-chara dl dt { margin: 0 0 15px 0; text-align: center; }

#tomamiso-shiru-top #product-list .product-chara dl dd { padding: 5% 0; font-size: 14px; color: #a2792e; line-height: 1.35; background: url(../images/tomamiso-shiru/tomamiso-shiru-product-line.png) no-repeat vtop; }

#tomamiso-shiru-top #product-list .product-chara .product-pkg { position: absolute; width: 35%; right: 0; bottom: -2%; }

#tomamiso-shiru-top #product-list .product-composition dl { width: 100%; display: table; border-top: 1px dotted #958b63; }

#tomamiso-shiru-top #product-list .product-composition dl:last-of-type { border-bottom: 1px dotted #958b63; }

#tomamiso-shiru-top #product-list .product-composition dl dt, #tomamiso-shiru-top #product-list .product-composition dl dd { padding: 10px; display: table-cell; font-size: 16px; line-height: 1.5em; color: #403024; }

#tomamiso-shiru-top #product-list .product-composition dl dt span, #tomamiso-shiru-top #product-list .product-composition dl dd span { font-size: 12px; }

#tomamiso-shiru-top #product-list .product-composition dl dt { width: 35%; background: #fff; font-weight: bold; }

#tomamiso-shiru-top #product-list .product-composition dl dd { letter-spacing: -0.05em; }