@charset "UTF-8";
.font20 { font-size: 20px; font-size: 2rem; }

body { box-sizing: border-box; margin: 0; padding: 0; }

#amazake h1, #amazake h2, #amazake h3, #amazake h4, #amazake h5, #amazake h6, #amazake p, #amazake dl, #amazake dt, #amazake dd, #amazake ol, #amazake ul, #amazake li, #amazake blockquote, #amazake form, #amazake table, #amazake label, #amazake input, #amazake div, #amazake a, #amazake section, #amazake img, #amazake table, #amazake thead, #amazake tbody, #amazake tr, #amazake th, #amazake td, #amazake figure, #amazake figcaption, #amazake span, #amazake strong, #amazake em { box-sizing: border-box; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, th, td { font-weight: normal; font-size: 100%; }

th, td { text-align: left; line-height: 1.75; }

img { border: none; vertical-align: bottom; }

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

html { font-size: 62.5%; }

.normal { font-weight: normal; }

.bold { font-weight: bold; }

.lineH1 { line-height: 1; }

.left { float: left; }

.right { float: right; }

.textLeft { text-align: left; }

.textRight { text-align: right; }

.textCenter { text-align: center; }

.clearFix:after { display: block; clear: both; content: ""; }

.animate { opacity: 0; }

.fadeInUp3 { -webkit-animation: fadeInUp3 1.5s; -moz-animation: fadeInUp3 1.5s; animation: fadeInUp3 1.5s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; }

@-webkit-keyframes fadeInUp3 { from { opacity: 0;
    -webkit-transform: translate3d(0, 2%, 0);
    -moz-transform: translate3d(0, 2%, 0);
    -o-transform: translate3d(0, 2%, 0);
    -ms-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none; } }

@-moz-keyframes fadeInUp3 { from { opacity: 0;
    -webkit-transform: translate3d(0, 2%, 0);
    -moz-transform: translate3d(0, 2%, 0);
    -o-transform: translate3d(0, 2%, 0);
    -ms-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none; } }

@keyframes fadeInUp3 { from { opacity: 0;
    -webkit-transform: translate3d(0, 2%, 0);
    -moz-transform: translate3d(0, 2%, 0);
    -o-transform: translate3d(0, 2%, 0);
    -ms-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none; } }

@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@-moz-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% { opacity: .9;
    -webkit-transform: scale3d(0.99, 0.99, 0.99);
    -moz-transform: scale3d(0.99, 0.99, 0.99);
    -o-transform: scale3d(0.99, 0.99, 0.99);
    -ms-transform: scale3d(0.99, 0.99, 0.99);
    transform: scale3d(0.99, 0.99, 0.99); }
  to { -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

/* ハナマルキ甘酒
------------------------------ */
#contents { position: relative; width: 100%; min-width: 960px; margin: 0; }

#gnav { margin-bottom: 0; }

#plist { position: absolute; top: 0; right: 0; left: 0; width: 960px; margin: 14px auto 0; z-index: 900; }

#amazake { position: relative; font-family: "游明朝","YuMincho","游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 20px; font-size: 2rem; line-height: 1.6; overflow: hidden; }

#amazake:after { clear: both; display: block; content: ''; }

#amazake *, #amazake *:before, #amazake *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

#amazake section { display: block; position: relative; }

#amazake img { vertical-align: bottom; }

#amazake a { cursor: pointer; }

#amazake a .nrmlBtn, #amazake a .hoverBtn { position: absolute; top: 0; right: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; }

#amazake a .hoverBtn { opacity: 0; }

#amazake a:hover .hoverBtn { opacity: 1; }

#amazake .inner { display: block; position: relative; top: 0; left: 0; width: 960px; height: auto; margin: 0 auto; }

#amazake .btn { display: inline-block; position: relative; top: 0; left: 0; }

#amazake .tategaki { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

#amazake .tgt, #amazake .tgt2 { opacity: 0; }

#amazake .tgt span, #amazake .tgt2 span { opacity: 0; }

#amazake #js_loading, #amazake #js_loading_white { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; }

#amazake #js_loading { top: 0; left: 0; background: url(../images/kv-bgi.png) no-repeat center center; background-size: cover; }

#amazake #js_loading img { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

#amazake #js_loading_white { background: #fff; z-index: 980; }

#amazake .amazakeKv { position: relative; width: 100%; height: 100vh; background: url(../images/kv-bgi.png) no-repeat center center; background-size: cover; }

#amazake .amazakeKv p, #amazake .amazakeKv a { display: block; position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 900; }

#amazake .amazakeKv .btn { display: block; top: 20px; width: 100%; text-align: right; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }

#amazake .amazakeKv .scroll { display: inline-block; width: auto; top: auto; bottom: 0; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }

#amazake .amazakeKv .scroll .nrmlBtn { position: relative; }

#amazake .amazakeKv:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/kv-set.svg) no-repeat center center; background-size: contain; content: ""; }

#amazake .amazakeKv:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/kv-item.png) no-repeat center center; background-size: contain; content: ""; }

#amazake .amazakeKv h1 { opacity: 0; }

@media only screen and (max-height: 768px) { #amazake .amazakeKv { min-height: 644px; } }

#amazake .leadArea { height: 730px; padding: 90px 0 0; background: url(../images/lead-item.png) no-repeat center center, url(../images/lead-bgi.png) repeat-x center center; background-size: auto, cover; }

#amazake .leadArea h2 { position: absolute; right: 0; }

#amazake .leadArea .leadTxt { float: right; margin: 0 11em 0 0; line-height: 1.9; font-size: 20px; font-size: 2.0rem; }

#amazake .leadArea .notice { color: #600; }

#amazake .applyArea { height: 340px; }

#amazake .applyArea:before { display: block; position: absolute; top: 0; right: 50%; width: 50%; height: 100%; background: url(../images/apply-bgi-brown.png); background-size: cover; content: ""; }

#amazake .applyArea:after { display: block; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; background: url(../images/apply-bgi-white.png); background-size: cover; content: ""; }

#amazake .applyArea .inner { height: 100%; background: url(../images/apply-bgi-blur.png) no-repeat center bottom; }

#amazake .applyArea h2 { position: absolute; top: 0; left: 0; margin-top: 100px; }

#amazake .applyArea .item { position: relative; top: 0; z-index: 900; text-align: center; }

#amazake .applyArea .item img { position: relative; top: 0; width: 194px; height: auto; margin-top: -20px; }

#amazake .applyArea .catch { position: absolute; top: 0; right: 0; margin-top: 77px; text-align: right; z-index: 900; }

#amazake .applyArea .catch > img { display: block; }

#amazake .applyArea .btn { margin-top: 24px; }

#amazake .applyArea .btn .nrmlBtn { position: relative; }

#amazake .feature .tategaki { float: right; padding: 2.5em 6.5em 0 0; }

#amazake .feature .detailLabel { position: relative; width: 320px; height: 450px; color: #b1874d; opacity: 0; }

#amazake .feature li { position: relative; }

#amazake .feature li .detailLabel { position: relative; top: 0; margin-top: -80px; }

#amazake .feature .seiho { height: 910px; background: url(../images/feature-bgi-1.jpg) no-repeat center center; background-size: cover; }

#amazake .feature .seiho h2 { padding-top: 80px; }

#amazake .feature .seiho .detailLabel { float: right; margin-top: 80px; background: url(../images/feature-label-1.png) no-repeat; }

#amazake .feature .aji { height: 450px; background: url(../images/feature-bgi-2.jpg) no-repeat center; background-size: cover; }

#amazake .feature .aji .detailLabel { float: left; background: url(../images/feature-label-2.png) no-repeat; }

#amazake .feature .sozai { height: 450px; background: url(../images/feature-bgi-3.jpg) no-repeat center; background-size: cover; }

#amazake .feature .sozai .detailLabel { float: right; background: url(../images/feature-label-3.png) no-repeat; }

#amazake .howtoDrink { height: 1050px; background: url(../images/howtoDrink-img.png) no-repeat center bottom, url(../images/howtoDrink-bgi.png) repeat-x; }

#amazake .howtoDrink h2 { padding-top: 80px; }

#amazake .howtoDrink .inner { margin-top: 40px; font-size: 0; }

#amazake .howtoDrink li { display: inline-block; position: relative; width: 25%; color: #372129; letter-spacing: -0.05em; }

#amazake .howtoDrink li span { display: block; position: absolute; left: 0; bottom: 0; margin: 0 0 -320px 0; border-bottom: solid 1px #000; font-size: 14px; font-size: 1.4rem; }

#amazake .howtoDrink li span .font17 { font-size: 16px; font-size: 1.6rem; }

#amazake .howtoDrink li span .font20 { font-size: 20px; font-size: 2rem; }

#amazake .howtoDrink li.tea { padding-right: 45px; }

#amazake .howtoDrink li.tounyu { padding-left: 15px; }

#amazake .howtoDrink li.tounyu span { margin-left: 22px; }

#amazake .howtoDrink li.tansan { padding-left: 35px; }

#amazake .howtoDrink li.tansan span { margin-left: 37px; }

#amazake .howtoDrink .lead { position: absolute; bottom: 0; width: 100%; margin: 0 auto 73px; }

#amazake .applyArea.area2 { height: 660px; }

#amazake .applyArea.area2 h2 { margin-top: 170px; }

#amazake .applyArea.area2 .item img { width: 303px; height: auto; margin: 60px 115px 0 0; }

#amazake .applyArea.area2 .catch { margin-top: 170px; }

#amazake .requirement { background: url(../images/requirement-bgi.png) repeat-x center bottom; }

#amazake .requirement .inner { background: url(../images/requirement-item.png) no-repeat 716px bottom; }

#amazake .requirement h2 { float: right; margin-right: 80px; padding-top: 80px; }

#amazake .requirement .requireTable { width: 640px; padding: 150px 0 180px; }

#amazake .requirement dl { padding: 1.25em 0; border-top: solid 1px #e6daca; color: #b1874d; overflow: hidden; }

#amazake .requirement dl:last-child { border-bottom: solid 1px #e6daca; }

#amazake .requirement dl dt { float: left; width: 195px; line-height: 1.2; }

#amazake .requirement dl dd { float: left; width: 445px; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 18px; font-size: 1.8rem; line-height: 1.3333333333; letter-spacing: 0.08em; }

#amazake .requirement dl ul { list-style-type: disc; padding-left: 1.25em; }

#amazake .requirement dl li { padding-left: .5em; }

#amazake .bottomApply a { display: block; width: 100%; padding-top: 40px; background: url(../images/bottom-apply-bgi.png) repeat-x; }

#amazake .bottomApply a h2 { position: relative; z-index: 900; }

#amazake .bottomApply a:before, #amazake .bottomApply a:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; z-index: 800; content: ""; }

#amazake .bottomApply a:before { background: url(../images/bottom-apply-bgi.png) repeat-x; }

#amazake .bottomApply a:after { background: url(../images/bottom-apply-bgi-hover.png) repeat-x; opacity: 0; }

#amazake .bottomApply a:hover img, #amazake .bottomApply a:hover:after { opacity: 1; }

#amazake .pageTop { display: block; position: relative; background: #10090b; }

#amazake .pageTop:before { opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #362028; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; z-index: 0; content: ""; }

#amazake .pageTop:hover:before { opacity: 1; }