@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=EB+Garamond");
@-webkit-keyframes animation-bounce { from, 35%, 70% to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  35% { -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2); }
  70% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  to { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-moz-keyframes animation-bounce { from, 35%, 70% to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  35% { -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2); }
  70% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  to { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes animation-bounce { from, 35%, 70% to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  35% { -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2); }
  70% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  to { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

#js_fade { display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: url(../../images/english/liquidshiokoji-load-bg.jpg) center bottom/100% auto no-repeat #fdfbd9; z-index: 9999; }

#js_fade p, #js_fade .loader { margin: auto; width: 120px; height: 316px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }

#js_fade .loader { height: 16px; top: 400px; }

#js_fade .loader span { width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: absolute; left: 50%; margin-left: -10px; -webkit-animation: 3s infinite linear; -moz-animation: 3s infinite linear; -o-animation: 3s infinite linear; }

#js_fade .loader span:nth-child(1) { background: #5052a1; -webkit-animation: kiri 1.2s infinite linear; -moz-animation: kiri 1.2s infinite linear; -o-animation: kiri 1.2s infinite linear; }

#js_fade .loader span:nth-child(2) { background: #dcb53e; z-index: 100; }

#js_fade .loader span:nth-child(3) { background: #f15937; -webkit-animation: kanan 1.2s infinite linear; -moz-animation: kanan 1.2s infinite linear; -o-animation: kanan 1.2s infinite linear; }

@-webkit-keyframes kanan { 0% { -webkit-transform: translateX(20px); }
  50% { -webkit-transform: translateX(-20px); }
  100% { -webkit-transform: translateX(20px);
    z-index: 200; } }

@-moz-keyframes kanan { 0% { -moz-transform: translateX(20px); }
  50% { -moz-transform: translateX(-20px); }
  100% { -moz-transform: translateX(20px);
    z-index: 200; } }

@-webkit-keyframes kiri { 0% { -webkit-transform: translateX(-20px);
    z-index: 200; }
  50% { -webkit-transform: translateX(20px); }
  100% { -webkit-transform: translateX(-20px); } }

@-moz-keyframes kiri { 0% { -moz-transform: translateX(-20px);
    z-index: 200; }
  50% { -moz-transform: translateX(20px); }
  100% { -moz-transform: translateX(-20px); } }

/* common-setting
------------------------------ */
#liquid-gnav { background: #091354; width: 100%; z-index: 9998; }

#liquid-gnav.nav-fix, #liquid-gnav.fancy-navfix { position: fixed; top: 0; left: 0; -webkit-transform: translateZ; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

#liquid-gnav.nav-fix + #sub-title, #liquid-gnav.fancy-navfix + #sub-title { position: relative; top: 60px; margin-bottom: 60px; }

#liquid-gnav.nav-fix + #main_contents, #liquid-gnav.fancy-navfix + #main_contents { top: 60px; }

#liquid-gnav.nav-fix + #title, #liquid-gnav.fancy-navfix + #title { padding-top: 60px; }

#liquid-gnav ul { width: 960px; height: 60px; margin: 0 auto; display: table; background: #091354; }

#liquid-gnav ul li { display: table-cell; position: relative; left: -1px; font-size: 16px; letter-spacing: normal; vertical-align: middle; line-height: 60px; }

#liquid-gnav ul li:before, #liquid-gnav ul li:last-of-type:after { margin: auto 0; content: ''; display: block; width: 1px; height: 13px; background: #313b7d; position: absolute; top: 0; bottom: 0; left: 0; }

#liquid-gnav ul li:last-child:after { left: auto; right: 0; }

#liquid-gnav ul li:hover:before { opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-gnav ul li:hover + li:before { opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-gnav ul li.top { padding-right: 100px; }

#liquid-gnav ul li.top.active:after { content: none; }

#liquid-gnav ul li.top.active a { background: none; }

#liquid-gnav ul li.top:before { content: none; }

#liquid-gnav ul li a { padding: 0 20px; position: relative; display: block; height: 100%; width: 100%; text-decoration: none; color: #fff; text-align: center; font-family: 'EB Garamond', serif; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-gnav ul li a:hover { background: #313b7d; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#sub-title { width: 100%; min-width: 960px; height: 383px; }

#sub-title h2 { width: 960px; margin: 0 auto; text-align: left; }

#sub-title.kv-howtouse { background: url(../../images/english/liquidshiokoji-howto-ttlbg.jpg) no-repeat; background-size: cover; }

#sub-title.kv-howtouse h2 { padding-top: calc((383px - 133px)/2); -webkit-padding-top: calc((383px - 133px)/2); }

#sub-title.kv-features { background: url(../../images/english/liquidshiokoji-features-ttlbg.jpg) no-repeat; background-size: cover; }

#sub-title.kv-features h2 { padding-top: calc((383px - 279px)/2); -webkit-padding-top: calc((383px - 279px)/2); }

#sub-title.kv-recipes { background: url(../../images/english/liquidshiokoji-recipe-ttlbg.jpg) no-repeat; background-size: cover; }

#sub-title.kv-recipes h2 { padding-top: calc((383px - 168px)/2); -webkit-padding-top: calc((383px - 168px)/2); }

#sub-title.kv-qa { background: url(../../images/english/liquidshiokoji-qa-ttlbg.jpg) no-repeat center center; background-size: cover; }

#sub-title.kv-qa h2 { text-align: center; padding-top: 170px; }

.pseudo, div#main_contents .bottom-bnr li:after, div#main_contents .bnr-single.shadow:after, div#main_contents #kyle-area #kyle-area-cont h2:before, div#main_contents .step-cont dt:after, div#main_contents .step-cont .guide li:before, #what-area:after { content: ''; display: block; }

.section { padding: 60px 0; margin: 0 auto; width: 960px; min-width: 960px; position: relative; }

.section > .section { padding: 0; }

.section.full { width: 100%; }

.section.bgGray { background: #f7f7f7; }

div#main_contents { position: relative; min-width: 960px; overflow: hidden; }

div#main_contents.cont-howtouse { background: #f7f7f7; }

div#main_contents p { padding: 0; }

div#main_contents .white-box { padding: 20px 15px; background: rgba(255, 255, 255, 0.8); border: 4px solid #e9e9e9; line-height: 2em; }

div#main_contents .black-box { padding: 10px; background: rgba(145, 111, 45, 0.6); border-radius: 4px; -moz-border-radius: 4px; }

div#main_contents .normal-tx { font-size: 16px; font-family: "游明朝","YuMincho","游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }

div#main_contents .bottom-bnr { padding: 20px 0; }

div#main_contents .bottom-bnr ul:after { content: ''; display: block; clear: both; }

div#main_contents .bottom-bnr li { margin: 0 0 20px 0; float: left; position: relative; }

div#main_contents .bottom-bnr li:after { width: 100%; height: 20px; position: absolute; bottom: -15px; background: url(../../images/english/liquidshiokoji-bnr-shadow.png) no-repeat; }

div#main_contents .bottom-bnr li:nth-child(odd) { margin-right: 20px; }

div#main_contents .bnr-single { text-align: center; position: relative; }

div#main_contents .bnr-single a { position: relative; z-index: 5; }

div#main_contents .bnr-single.shadow:after { margin: 0 auto; width: 960px; height: 65px; position: absolute; right: 0; bottom: -30px; left: 0; background: url(../../images/english/liquidshiokoji-recipe-bnr-shadow.png) no-repeat center bottom; z-index: 3; }

h2 { position: relative; font-family: 'EB Garamond', serif; color: #162377; }

h2.head-top { margin: 0 0 60px 0; padding: 20px 0; font-size: 48px; text-align: center; border-top: 2px solid #162377; border-bottom: 2px solid #162377; }

h2.head-top:before, h2.head-top:after { content: ''; display: block; width: 100%; height: 1px; background: #8a91bb; position: absolute; left: 0; }

h2.head-top:before { top: 3px; }

h2.head-top:after { bottom: 3px; }

h2.head-top2 { width: 95%; padding-bottom: 10px; font-size: 30px; border-bottom: 1px solid #162377; }

h2.head-top2 span { padding-bottom: 7px; border-bottom: 3px solid #162377; }

h2.head-top3 { padding: 25px 0; font-size: 44px; color: #fff; display: inline; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }

/* page-Q&A
------------------------------ */
#qanda-wrap #qandaList { margin: 0 auto; }

#qanda-wrap #qandaList .qanda-cont { margin: 0 0 20px 0; }

#qanda-wrap #qandaList .qanda-cont dt { width: 100%; min-height: 60px; line-height: 60px; display: table; vertical-align: middle; background: #1d196f; color: #fff; position: relative; font-size: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; font-family: 'EB Garamond', serif; }

#qanda-wrap #qandaList .qanda-cont dt span { padding: 0 10px; width: 45px; display: table-cell; font-size: 26px; font-weight: normal; letter-spacing: .2em; background: #091354; vertical-align: middle; border-right: 20px solid #1d196f; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#qanda-wrap #qandaList .qanda-cont dt .q-num { padding: 0; width: 10%; height: 100%; font-family: 'Oswald', sans-serif; font-weight: bold; font-size: 16px; background: #8b6247; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; text-align: center; vertical-align: middle; }

#qanda-wrap #qandaList .qanda-cont dt .q-text { padding: 10px 50px 10px 20px; }

#qanda-wrap #qandaList .qanda-cont dt:hover { cursor: pointer; background: #D9B326; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#qanda-wrap #qandaList .qanda-cont dt:hover span { background: #D9B326; border-right: 20px solid #D9B326; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#qanda-wrap #qandaList .qanda-cont dt.icon-off:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#qanda-wrap #qandaList .qanda-cont dt:after { margin: auto 0; width: 18px; height: 11px; content: ''; display: block; background: url(../../images/english/liquidshiokoji-qa-arrow.png) no-repeat; background-size: 100% auto; position: absolute; right: 20px; top: 0; bottom: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

#qanda-wrap #qandaList .qanda-cont dt:before { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.3); content: ''; display: block; position: absolute; right: 50px; top: 0; }

#qanda-wrap #qandaList .qanda-cont dd { margin: 15px 0; padding: 30px 15px; display: none; background: #fff; border: 2px solid #e4e1da; }

#qanda-wrap #qandaList .qanda-cont dd .answer { display: table; }

#qanda-wrap #qandaList .qanda-cont dd .answer p { line-height: 2em; font-size: 16px; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; }

#qanda-wrap #qandaList .qanda-cont dd .answer .answer-head, #qanda-wrap #qandaList .qanda-cont dd .answer div { display: table-cell; vertical-align: top; }

#qanda-wrap #qandaList .qanda-cont dd .answer .answers-head { width: 40px; font-size: 30px; color: #df5e5e; font-family: 'EB Garamond', serif; }

#qanda-wrap #qandaList .qanda-cont dd .answer div { padding: 0 0 0 20px; width: auto; border-left: 2px solid #e4e1da; }

/* page- features
------------------------------ */
div#main_contents .features-cont { margin: 35px 0 0 0; padding: 28px 15px; width: 550px; border: 3px solid #e5e5e5; min-height: 320px; position: relative; }

div#main_contents .features-cont dt { margin: 0 0 55px 0; padding: 0 40px; width: 350px; height: 40px; position: relative; z-index: 2; line-height: 40px; color: #fff; font-family: 'EB Garamond', serif; font-size: 24px; background: #1d196f; }

div#main_contents .features-cont dd p, div#main_contents .features-cont dd li { margin: 0 0 1em 0; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-size: 16px; }

div#main_contents .features-cont dd:first-of-type { width: 275px; }

div#main_contents .features-cont dd:last-of-type { position: absolute; right: -450px; top: -50px; }

/* for recipe
------------------------------ */
div#main_contents #kyle-area { background: url(../../images/english/liquidshiokoji-recipe-bg1.jpg) center top/1366px 352px no-repeat #090929; }

div#main_contents #kyle-area > a { margin: 0 auto; width: 960px; display: block; }

div#main_contents #kyle-area > a:hover { text-decoration: none; }

div#main_contents #kyle-area > a:hover #kyle-area-cont { background: rgba(253, 253, 253, 0.35); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

div#main_contents #kyle-area > a:hover img { opacity: 1; }

div#main_contents #kyle-area #kyle-area-cont { padding: 100px 40px 30px 40px; background: rgba(253, 253, 253, 0.1); position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

div#main_contents #kyle-area #kyle-area-cont h2 { margin-left: 40px; position: relative; }

div#main_contents #kyle-area #kyle-area-cont h2:before { width: 26px; height: 26px; position: absolute; top: 40px; left: -40px; background: url(../../images/english/liquidshiokoji-recipe-arrow.png) no-repeat; }

div#main_contents #kyle-area #kyle-area-cont h2 + .person { position: absolute; top: -35px; right: 2px; }

div#main_contents #kyle-area #kyle-area-cont .recipe-list { margin-top: 135px; }

div#main_contents #kyle-area #kyle-area-cont .recipe-list:after { content: ''; display: block; clear: both; }

div#main_contents #kyle-area #kyle-area-cont .recipe-list li { float: left; }

div#main_contents #kyle-area #kyle-area-cont .recipe-list li:nth-child(2) { margin: 0 20px; }

div#main_contents #kyle-area #kyle-area-cont .recipe-list li span { padding: .5em 0 0 0; display: block; color: #fff; font-family: 'EB Garamond', serif; font-size: 18px; letter-spacing: normal; text-decoration: none; }

/* page- how to use」
------------------------------ */
div#main_contents .step-cont { margin-top: 20px; padding: 0 40px; min-height: 347px; position: relative; background: #fff; }

div#main_contents .step-cont.step2 { margin-top: 85px; }

div#main_contents .step-cont dt { position: relative; top: -25px; }

div#main_contents .step-cont dt:after { width: 40px; height: 6px; background: #e70012; position: relative; top: 25px; }

div#main_contents .step-cont dd p, div#main_contents .step-cont dd li { margin: 0 0 1em 0; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-size: 16px; }

div#main_contents .step-cont dd:first-of-type { margin-top: 25px; width: 370px; }

div#main_contents .step-cont dd:last-of-type { position: absolute; right: -43px; top: -70px; }

div#main_contents .step-cont .guide li { margin: 0 0 .1em; padding-left: 30px; position: relative; }

div#main_contents .step-cont .guide li:before { position: absolute; left: 0; top: 4px; width: 24px; height: 24px; background: url(../../images/english/liquidshiokoji-howto-icon.png) no-repeat; }

div#main_contents .step-cont .guide li:nth-child(2):before { background-position: 0 -22px; }

div#main_contents .step-cont .guide li:nth-child(3):before { background-position: 0 -46px; }

div#main_contents .step-cont .guide li span { width: 6em; display: inline-block; }

div#main_contents .step-cont .guide li span:after { content: '：'; float: right; }

div#main_contents #usage { background: #f5d22e; }

div#main_contents #usage #usage-cont { display: table; }

div#main_contents #usage #usage-cont figure, div#main_contents #usage #usage-cont dl { display: table-cell; vertical-align: top; }

div#main_contents #usage #usage-cont dl { width: 520px; padding: 40px; background: #FFF; border-radius: 3px; -webkit-border-radius: 3px; }

div#main_contents #usage #usage-cont dl dt, div#main_contents #usage #usage-cont dl dd { color: #ab8f0a; }

div#main_contents #usage #usage-cont dl dt { margin: 0 0 15px 0; font-family: 'EB Garamond', serif; font-size: 36px; color: #ab8f0a; }

div#main_contents #usage #usage-cont dl dd { font-size: 16px; line-height: 1.5em; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; }

.imgMax { width: 100%; height: auto; }

div, li, p, ul, a, dl, dd, dt { box-sizing: border-box; }

#title { position: relative; width: 100%; margin: 0; padding: 0; z-index: 800; }

#title #headlineMovie { width: 100%; min-height: 500px; max-height: 500px; min-width: 960px; text-align: center; }

#title #headlineMovie h1 { display: block; height: 237px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 999; }

#title #headlineMovie #koujiPlayer { width: 100%; height: 500px; text-align: center; position: relative; overflow: hidden; }

#title #headlineMovie #koujiPlayer .video-wrap { height: 500px; }

#title #headlineMovie #top-movie-wrap { position: relative; width: 100%; padding-top: 56.25%; }

#title #headlineMovie #top-movie-wrap #top-movie { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; min-height: 610px; }

#what-area-wrap { position: relative; overflow: hidden; height: 760px; /*  background:url(../../images/english/liquidshiokoji-top-bg1.png) no-repeat top right; */ }

#what-area { position: absolute; left: 50%; margin-left: -480px; }

#what-area:after { position: absolute; top: -160px; right: -220px; width: 793px; height: 563px; background: url(../../images/english/liquidshiokoji-top-bg1.png) no-repeat; z-index: -1; }

#what-area ul { width: 630px; }

#what-area ul li { margin: 0 0 0 1em; font-size: 18px; line-height: 2em; font-family: "游明朝","YuMincho","游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; list-style: disc; }

#what-area .white-box { margin: 80px 0 0 0; }

#koji-material { position: relative; background: url(../../images/english/liquidshiokoji-top-bg2.jpg) no-repeat center center; background-size: cover; }

#koji-material .made-from, #koji-material .black-box { width: 750px; display: table; }

#koji-material .made-from dt, #koji-material .made-from dd, #koji-material .black-box dt, #koji-material .black-box dd { display: table-cell; vertical-align: top; }

#koji-material .made-from { margin: 30px 0; }

#koji-material .made-from dt { width: 440px; }

#koji-material .made-from dd { padding: 10px 0 0 15px; width: 310px; }

#koji-material .black-box dt { line-height: 0; }

#koji-material .black-box dd { padding-left: 20px; color: #fff; }

#koji-material .black-box dd p { font-family: "游明朝","YuMincho","游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 14px; }

#koji-material .black-box dd p:first-child { margin: 0 0 .5em 0; font-family: 'EB Garamond', serif; font-size: 24px; }

#koji-material .product-koji { position: absolute; bottom: -65px; right: 0; }