@charset "UTF-8";
@-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; }

#js_fade { width: 100%; height: 100%; display: block; background: #ed6c00; position: fixed; z-index: 2000; background: url(../images/karaage-panko/karaage-panko-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"); }

#karaage-panko-top { font-family: MyYuGothicM, YuGothic, sans-serif; }

#karaage-panko-top .section { margin: 0 auto; width: 100%; }

#karaage-panko-top .section-full { width: 100%; }

#karaage-panko-top img { width: 100%; max-width: 100%; }

#karaage-panko-top div, #karaage-panko-top ul, #karaage-panko-top li, #karaage-panko-top div, #karaage-panko-top p, #karaage-panko-top dl, #karaage-panko-top dt, #karaage-panko-top dd, #karaage-panko-top figure, #karaage-panko-top figcaption, #karaage-panko-top h1, #karaage-panko-top h2, #karaage-panko-top h3, #karaage-panko-top h4, #karaage-panko-top span { box-sizing: border-box; }

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

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

#karaage-panko-top .clearfix, #karaage-panko-top #main-cont #recipe:after, #karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl:after { content: ''; display: block; clear: both; }

#karaage-panko-top .tx-red { color: #da0009; }

#karaage-panko-top .area-shadow, #karaage-panko-top #main-cont #chara-cont #person-box, #karaage-panko-top #main-cont #effect-cont, #karaage-panko-top #main-cont #recipe .recipe-detail { box-shadow: 5px 5px 0px 0px rgba(25, 12, 11, 0.05); }

#karaage-panko-top #main-visual { padding: 0; position: relative; text-align: center; z-index: 1; background: url(../images/karaage-panko/karaage-panko-kv-bg.jpg) no-repeat; background-size: 100% auto; }

#karaage-panko-top #main-visual h1 { padding: 3% 2.5% 5% 2.5%; position: relative; }

#karaage-panko-top #main-visual h1:after { margin: 0 auto; content: ''; display: block; position: absolute; right: 0; bottom: -40%; left: 0; width: 60%; height: 60%; background: url("../images/karaage-panko/karaage-panko-kv-person-icon.png") no-repeat top center; background-size: 50% auto; }

#karaage-panko-top #main-visual h1 span { display: block; padding: 0 10%; }

#karaage-panko-top #main-visual h1 span img { margin-top: 0; }

#karaage-panko-top #main-visual h1 img { margin-top: -7%; }

#karaage-panko-top #main-visual .kv-product { padding: 9% 2.5% 0 2.5%; width: 100%; display: table; position: relative; }

#karaage-panko-top #main-visual .kv-product li { display: table-cell; position: relative; z-index: 2; vertical-align: top; }

#karaage-panko-top #main-visual .kv-product li:nth-child(1) { padding-right: 5%; }

#karaage-panko-top #main-visual .kv-product li:nth-child(2) { padding-left: 5%; }

#karaage-panko-top #main-cont { margin-top: -25%; padding: 30% 2.5% 10% 2.5%; position: relative; z-index: -1; background-image: url(../images/karaage-panko/karaage-panko-bg-nature.png), url(../images/karaage-panko/karaage-panko-bg2.jpg); background-size: 100% auto, 200% auto; background-position: top,top; background-repeat: no-repeat, repeat; }

#karaage-panko-top #main-cont:before { top: 5px; }

#karaage-panko-top #main-cont h3 { text-align: center; }

#karaage-panko-top #main-cont #chara-cont h3 { padding: 0 5%; margin: 0 0 15% 0; }

#karaage-panko-top #main-cont #chara-cont #person-box { margin: 0 0 45px 0; padding: 5% 5% 8% 5%; position: relative; background: #272731; color: #fff; }

#karaage-panko-top #main-cont #chara-cont #person-box:before { margin: auto; width: 96%; height: 96%; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #666666; }

#karaage-panko-top #main-cont #chara-cont #person-box dl dt { padding: 20% 60% 20% 0; position: relative; }

#karaage-panko-top #main-cont #chara-cont #person-box dl dt:after { margin: auto 0; width: 60%; height: 100%; content: ''; position: absolute; right: 0; top: 0; bottom: 0; background: url(../images/karaage-panko/karaage-panko-chara-bg.png) no-repeat center bottom; background-size: 100% auto; }

#karaage-panko-top #main-cont #chara-cont #person-box dl dd { line-height: 1.6; font-size: 3.75vw; }

#karaage-panko-top #main-cont #effect-cont { padding: 10% 4%; border-radius: 5px; background: #fff; text-align: center; }

#karaage-panko-top #main-cont #effect-cont h3 { margin: 0 0 5% 0; }

#karaage-panko-top #main-cont #effect-cont ul li:first-child { margin-bottom: .5em; }

#karaage-panko-top #main-cont #effect-cont .cont-figure { margin: 10% 0 0 0; padding: 7% 5%; border-radius: 5px; border: 1px solid #e0d9c5; background: #f8f5ec; text-align: center; }

#karaage-panko-top #main-cont #effect-cont .cont-figure dt { padding: 0 10%; }

#karaage-panko-top #main-cont #effect-cont .cont-figure dd, #karaage-panko-top #main-cont #effect-cont .cont-figure + p { font-weight: bold; text-align: center; }

#karaage-panko-top #main-cont #effect-cont .cont-figure dd { margin-top: 1em; font-size: 3.75vw; color: #71543a; }

#karaage-panko-top #main-cont #effect-cont .cont-figure + p { margin-top: .5em; font-size: 6.25vw; color: #693206; }

#karaage-panko-top #main-cont #recipe { padding: 20% 0 0 0; }

#karaage-panko-top #main-cont #recipe h3 { margin: 0 0 15% 0; }

#karaage-panko-top #main-cont #recipe .recipe-detail { border-radius: 5px; }

#karaage-panko-top #main-cont #recipe .recipe-detail > p:first-of-type { margin-top: -10%; }

#karaage-panko-top #main-cont #recipe .recipe-detail .detail-area { padding: 10% 4% 4% 4%; background: #fff; border-radius: 3px; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list { margin: 5% auto; padding: 5% 0; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl { margin: 0 0 .5em 0; position: relative; overflow: hidden; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl:before { overflow: hidden; position: absolute; display: block; content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・'; z-index: 1; letter-spacing: -0.5em; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl dt, #karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl dd { display: inline; background: #fff; vertical-align: middle; position: relative; z-index: 5; font-size: 3.75vw; color: #403024; line-height: 1.375; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl dt { padding-right: .5em; float: left; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl dd { padding-left: .5em; float: right; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl.line2:before { top: 10px; }

#karaage-panko-top #main-cont #recipe .recipe-detail .material-list dl.line2 dd { padding-top: 10px; }

#karaage-panko-top #main-cont #recipe .recipe-detail.karaage { margin: 0 0 15% 0; background: #5cb0dd; border: 7px solid #5cb0dd; }

#karaage-panko-top #main-cont #recipe .recipe-detail.karaage .material-list { border-top: 2px solid #5cb0dd; border-bottom: 2px solid #5cb0dd; }

#karaage-panko-top #main-cont #recipe .recipe-detail.karaage .material-list li span { color: #082884; font-weight: bold; }

#karaage-panko-top #main-cont #recipe .recipe-detail.karaage h4 { padding: 0 25%; }

#karaage-panko-top #main-cont #recipe .recipe-detail.karaage .point { background: #82bfd6; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko { background: #16b563; border: 7px solid #16b563; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko .material-list { border-top: 2px solid #16b563; border-bottom: 2px solid #16b563; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko .material-list li span { color: #33ba70; font-weight: bold; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko h4 { padding: 0 25%; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko .point { background: #43BA70; }

#karaage-panko-top #main-cont #recipe .recipe-detail.panko .point:before { border-top: 2px solid #16b563; }

#karaage-panko-top #main-cont #recipe .steps li { margin: 0 0 20px 0; padding: 0 0 0 13%; position: relative; }

#karaage-panko-top #main-cont #recipe .steps li:last-of-child { margin: 0; }

#karaage-panko-top #main-cont #recipe .steps li:before { width: 10%; height: 50%; content: ''; display: block; position: absolute; top: 0; left: 0; }

#karaage-panko-top #main-cont #recipe .steps li:nth-of-type(1):before { background: url(../images/karaage-panko/karaage-panko-icon-step1.png) no-repeat; background-size: 100% auto; }

#karaage-panko-top #main-cont #recipe .steps li:nth-of-type(2):before { background: url(../images/karaage-panko/karaage-panko-icon-step2.png) no-repeat; background-size: 100% auto; }

#karaage-panko-top #main-cont #recipe .steps li:nth-of-type(3):before { background: url(../images/karaage-panko/karaage-panko-icon-step3.png) no-repeat; background-size: 100% auto; }

#karaage-panko-top #main-cont #recipe .steps li:nth-of-type(4):before { background: url(../images/karaage-panko/karaage-panko-icon-step4.png) no-repeat; background-size: 100% auto; }

#karaage-panko-top #main-cont #recipe .steps dl dt { width: 70%; padding: 0 0 .2em 0; font-size: 6.25vw; color: #403024; font-weight: bold; }

#karaage-panko-top #main-cont #recipe .steps dl dd { width: 66%; font-size: 3.75vw; color: #403024; line-height: 1.5; letter-spacing: -0.05em; text-align: justify; }

#karaage-panko-top #main-cont #recipe .steps dl dd:last-of-type { width: 25%; position: absolute; top: 25%; right: 0; }

#karaage-panko-top #main-cont #recipe .point { margin: 20% auto 0 auto; padding: 5%; position: relative; clear: both; }

#karaage-panko-top #main-cont #recipe .point:before { position: absolute; top: -10%; left: 0; content: ''; border-top: 2px solid #5cb0dd; display: block; width: 100%; }

#karaage-panko-top #main-cont #recipe .point p { font-size: 6.25vw; color: #fff; text-align: center; letter-spacing: -0.05em; }

#karaage-panko-top #main-cont #recipe .point p:first-of-type { font-size: 5vw; }

#karaage-panko-top #main-cont #recipe .point p.description { padding-top: 1.5em; text-align: left; font-size: 3.75vw; }

#karaage-panko-top #main-cont #recipe .point figure { margin-top: 20px; text-align: center; }

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

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

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

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

#karaage-panko-top #product-list .product-chara.new1 { background: #5cb0dd; }

#karaage-panko-top #product-list .product-chara.new2 { background: #16b563; }

#karaage-panko-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); }

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

#karaage-panko-top #product-list .product-chara dl dd { padding: 5% 0; font-size: 14px; color: #a2792e; line-height: 1.35; position: relative; }

#karaage-panko-top #product-list .product-chara dl dd:before, #karaage-panko-top #product-list .product-chara dl dd:after { width: 100%; height: 10px; content: ''; display: block; position: absolute; left: 0; background: url(../images/karaage-panko/karaage-panko-product-line.png) no-repeat; }

#karaage-panko-top #product-list .product-chara dl dd:before { top: -10px; }

#karaage-panko-top #product-list .product-chara dl dd:after { bottom: -10px; }

#karaage-panko-top #product-list .product-chara .product-pkg { position: absolute; width: 35%; right: 3%; bottom: -2%; }

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

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

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

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

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

#karaage-panko-top #product-list .product-composition dl dt span { line-height: 1.3; display: inline-block; }

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