@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); } }

@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-top-bg2.jpg) center center; z-index: 9999; }

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

#js_fade .loader { top: 350px; }

#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; } }

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

#liquid-shiokouji .step-cont { margin: 0 0 10% 0; padding: 3% 3% 7% 3%; background: #fff; }

#liquid-shiokouji .step-cont:last-of-type { margin: 0; }

#liquid-shiokouji .step-cont dt { position: relative; }

#liquid-shiokouji .step-cont dt:after { display: block; content: ''; width: 40px; height: 3px; background: #e70012; position: relative; bottom: 15px; }

#liquid-shiokouji .step-cont dt span { margin: 20px 0 30px 0; display: block; width: 30%; }

#liquid-shiokouji .step-cont dd p { font-size: 16px; line-height: 1.7; }

#liquid-shiokouji .step-cont .guide li { margin: 0 0 .1em; padding-left: 20px; position: relative; font-size: 16px; }

#liquid-shiokouji .step-cont .guide li:before { display: block; content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: url(../../images/english/liquidshiokoji-howto-icon.png) no-repeat; background-size: 100% auto; }

#liquid-shiokouji .step-cont .guide li:nth-child(2):before { background-position: 0 -16px; }

#liquid-shiokouji .step-cont .guide li:nth-child(3):before { background-position: 0 -31px; }

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

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

#liquid-shiokouji #usage { background: #f5d22e; }

#liquid-shiokouji #usage figure { margin: 0 auto 20px auto; width: 80%; }

#liquid-shiokouji #usage #usage-cont dl { padding: 10%; background: #FFF; border-radius: 3px; -webkit-border-radius: 3px; }

#liquid-shiokouji #usage #usage-cont dl dt, #liquid-shiokouji #usage #usage-cont dl dd { color: #ab8f0a; }

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

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

#liquid-shiokouji .features-cont { position: relative; }

#liquid-shiokouji .features-cont dt { margin: 0 0 15px 0; padding: 0 10px; height: 40px; position: relative; line-height: 40px; color: #fff; font-family: 'EB Garamond', serif; font-size: 24px; background: #1d196f; text-align: center; }

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

#liquid-shiokouji .features-cont dd p:last-of-type { margin: 1em 0 0 0; }

#liquid-shiokouji #kyle-area { padding: 10% 5%; background: #090929; }

#liquid-shiokouji #kyle-area > a { margin: 0 auto; display: block; }

#liquid-shiokouji #kyle-area > a:hover { text-decoration: none; }

#liquid-shiokouji #kyle-area #kyle-area-cont { padding: 5% 5% 10% 5%; background: rgba(253, 253, 253, 0.1); position: relative; }

#liquid-shiokouji #kyle-area #kyle-area-cont h2 { margin: 0 0 7% 0; padding-left: 40px; position: relative; }

#liquid-shiokouji #kyle-area #kyle-area-cont h2:before { margin: auto 0; content: ''; display: block; width: 26px; height: 26px; position: absolute; top: 0; bottom: 0; left: 0; background: url(../../images/english/liquidshiokoji-recipe-arrow.png) no-repeat; background-size: 100% auto; }

#liquid-shiokouji #kyle-area #kyle-area-cont h2 + .person { width: 120%; margin-left: -10%; }

#liquid-shiokouji #kyle-area #kyle-area-cont .recipe-list { display: table; width: 100%; }

#liquid-shiokouji #kyle-area #kyle-area-cont .recipe-list li { display: table-cell; }

#liquid-shiokouji #kyle-area #kyle-area-cont .recipe-list li:first-child { padding-right: 1%; }

#liquid-shiokouji #kyle-area #kyle-area-cont .recipe-list li:nth-child(2) { padding: 0 .5%; }

#liquid-shiokouji #kyle-area #kyle-area-cont .recipe-list li:last-child { padding-left: 1%; }

#liquid-shiokouji .qanda-cont { margin: 0 0 20px 0; }

#liquid-shiokouji .qanda-cont:last-of-type { margin: 0; }

#liquid-shiokouji .qanda-cont dt { width: 100%; display: table; vertical-align: middle; background: #1d196f; color: #fff; position: relative; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; font-family: 'EB Garamond', serif; }

#liquid-shiokouji .qanda-cont dt strong { width: 10%; padding: 5% 2%; display: table-cell; font-size: 20px; font-weight: normal; letter-spacing: .2em; background: #091354; vertical-align: middle; border-right: 5px solid #1d196f; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-shiokouji .qanda-cont dt span { width: 85%; padding: 5% 0; display: inline-block; line-height: 1.2em; font-size: 15px; }

#liquid-shiokouji .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; transition: all 0.5s ease; text-align: center; vertical-align: middle; }

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

#liquid-shiokouji .qanda-cont dt:hover { cursor: pointer; background: #D9B326; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-shiokouji .qanda-cont dt:hover strong { background: #D9B326; border-right: 5px solid #D9B326; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

#liquid-shiokouji .qanda-cont dt.icon-off:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

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

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

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

#liquid-shiokouji .qanda-cont dd .answer { display: table; }

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

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

#liquid-shiokouji .qanda-cont dd .answer .answers-head { width: 30px; font-size: 25px; line-height: 1; color: #df5e5e; font-family: 'EB Garamond', serif; }

#liquid-shiokouji .qanda-cont dd .answer div { padding: 0 0 0 15px; width: auto; border-left: 2px solid #e4e1da; }

#liquid-shiokouji .section { padding: 10% 5%; width: 100%; overflow: hidden; }

#liquid-shiokouji .section.full { padding: 0; width: 100%; }

#liquid-shiokouji .section.bgGray { background: #f7f7f7; }

#liquid-shiokouji h2 { position: relative; font-family: 'EB Garamond', serif; color: #162377; background: none; line-height: 1; max-height: none; }

#liquid-shiokouji h2.head-top { margin: 0; padding: 20px 0; font-size: 24px; text-align: center; border-top: 1px solid #162377; border-bottom: 1px solid #162377; }

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

#liquid-shiokouji h2.head-top:before { top: 2px; }

#liquid-shiokouji h2.head-top:after { bottom: 2px; }

#liquid-shiokouji h2.head-top2 { padding-bottom: 10px; font-size: 30px; border-bottom: 1px solid #162377; text-align: center; }

#liquid-shiokouji h2.head-top3 { padding: 5% 0; font-size: 30px; color: #fff; display: block; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }

#liquid-shiokouji .white-box { padding: 20px 15px; background: rgba(255, 255, 255, 0.8); border: 4px solid #e9e9e9; line-height: 1.7em; font-size: 16px; }

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

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

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

#liquid-shiokouji .bottom-bnr li { margin: 0 0 20px 0; position: relative; z-index: 1; }

#liquid-shiokouji .bottom-bnr li:after { content: ''; display: block; width: 100%; height: 20px; position: absolute; bottom: -10px; background: url(../../images/english/liquidshiokoji-bnr-shadow.png) no-repeat center bottom; background-size: 100% auto; z-index: -1; }

#liquid-shiokouji .bnr-single { margin: 10% auto; width: 90%; text-align: center; position: relative; }

#liquid-shiokouji .bnr-single a { position: relative; z-index: 5; }

#liquid-shiokouji .bnr-single.shadow:after { margin: 0 auto; width: 100%; height: 30px; display: block; content: ''; position: absolute; right: 0; bottom: -5%; left: 0; background: url(../../images/english/liquidshiokoji-bnr-shadow.png) no-repeat center bottom; background-size: 100% auto; z-index: 3; }

.imgMax, #liquid-shiokouji img { width: 100%; height: auto; }

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

#liquid-shiokouji a:hover img { opacity: 1; }

#liquid-shiokouji .section { margin: 0; }

#liquid-shiokouji #liquid-header { width: 100%; height: 45px; position: relative; z-index: 9000; background: #091354; }

#liquid-shiokouji #liquid-header.nav-fix { position: fixed; top: 0; left: 0; -webkit-transform: translateZ; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

#liquid-shiokouji #liquid-header.nav-fix + #sub-title, #liquid-shiokouji #liquid-header.nav-fix + .section { padding-top: 45px; }

#liquid-shiokouji #liquid-header li { font-family: "游明朝","YuMincho","游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 15px; font-weight: bold; letter-spacing: .1em; }

#liquid-shiokouji #liquid-header li.top { width: 60%; }

#liquid-shiokouji #liquid-header li.top a { padding: 5px 10px; display: inline-block; height: 40px; line-height: 40px; }

#liquid-shiokouji #liquid-header li a { text-decoration: none; }

#liquid-shiokouji #liquid-header li #trigger { padding: 5px; position: absolute; top: 5px; right: 20px; background: #fff; border-radius: 5px; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3 { width: 30px; height: 20px; position: relative; -webkit-transform: 0deg; transform: 0deg; -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; cursor: pointer; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3 span { display: block; position: absolute; height: 3px; width: 100%; background: #333; opacity: 1; left: 0; -webkit-transform: 0deg; transform: 0deg; -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3 span:nth-child(1) { top: 2px; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3 span:nth-child(2), #liquid-shiokouji #liquid-header li #trigger #nav-icon3 span:nth-child(3) { top: 9px; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3 span:nth-child(4) { top: 16px; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3.open span:nth-child(1) { top: 5px; width: 0%; left: 50%; }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3.open span:nth-child(2) { -webkit-transform: 0deg; transform: 0deg; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#liquid-shiokouji #liquid-header li #trigger #nav-icon3.open span:nth-child(4) { top: 5px; width: 0%; left: 50%; }

#liquid-shiokouji #liquid-header #sub-menu { display: none; background: #515998; }

#liquid-shiokouji #liquid-header #sub-menu li { position: relative; height: 50px; line-height: 50px; letter-spacing: normal; border-bottom: 1px solid #c1bfbb; }

#liquid-shiokouji #liquid-header #sub-menu li:first-child { border-top: none; }

#liquid-shiokouji #liquid-header #sub-menu li:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 15px; content: ''; display: inline-block; background: url(../../images/english/liquidshiokoji-icon-arrow-white.png) no-repeat; background-size: auto 100%; width: 6px; height: 9px; }

#liquid-shiokouji #liquid-header #sub-menu li a { padding: 0 10px 0 30px; width: 100%; height: 100%; display: block; color: #fff; }

#liquid-shiokouji #topMovie { width: 100%; height: 300px; display: block; }

#liquid-shiokouji #headlineMovie { position: relative; display: block; background: #333; }

#liquid-shiokouji #headlineMovie #slideshow { position: relative; width: 100%; height: 100%; }

#liquid-shiokouji #headlineMovie #slideshow img { position: absolute; top: 0; left: 0; width: 100%; }

#liquid-shiokouji #what-area-wrap .what-area-bg { margin: 10% 0 0 -50%; width: 100%; position: absolute; left: 50%; height: auto; z-index: -1; overflow: hidden; }

#liquid-shiokouji #what-area-wrap .what-area-bg span { margin-left: -10%; width: 120%; display: inline-block; }

#liquid-shiokouji #what-area-wrap #what-area { margin-top: 60%; }

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

#liquid-shiokouji #what-area-wrap #what-area .white-box { margin: 20px 0 0 0; }

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

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

#liquid-shiokouji #koji-material .made-from dt { margin-bottom: 15px; }

#liquid-shiokouji #koji-material .black-box { padding: 15px 15px 5px 15px; display: table; }

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

#liquid-shiokouji #koji-material .black-box dt { line-height: 0; width: 30%; }

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

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

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