@charset "UTF-8";
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}address,blockquote,dl,figure,form,iframe,p,pre,table{margin:0;display: block;}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0}ol,ul{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit}[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}[type=button][disabled],[type=reset][disabled],[type=submit][disabled],button[disabled]{cursor:default}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}select::-ms-expand{display:none}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]{outline:none}table{border-collapse:collapse;border-spacing:0}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}[hidden],template{display:none}html{font-size:62.5%}

body{font-family: 'Noto Sans JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;font-display:swap;color: #470000;word-break:normal;word-wrap:break-word;overflow-wrap:break-word;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image: url(../img/top/bg.jpg);background-size: 100%;}
img{vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
.backToTop{position:fixed;z-index:9;pointer-events:none;opacity:0;-webkit-transition:opacity .4s cubic-bezier(.19,1,.22,1);transition:opacity .4s cubic-bezier(.19,1,.22,1)}
.backToTop.show{pointer-events:auto;opacity:1}
.backToTop button{display:block}
.backToTop img{width:100%;height:100%}
.borderButton{position:relative}
.borderButton:after{position:absolute;display:block;content:"";background-repeat:no-repeat;background-position:50%;background-size:100%}
@-webkit-keyframes bound{0%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(5px);transform:translateX(5px)}
to{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes bound{0%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(5px);transform:translateX(5px)}
to{-webkit-transform:translateX(0);transform:translateX(0)}
}

#foot{text-align:center;background-color:#fff;}
#foot .sns{display:none}
.fWrap{max-width:1000px;padding:17px 0;margin:0 auto}
#fNav{float:left;font-size:0}
#fNav li{display:inline-block;margin-right:15px}
#fNav li a{font-size:13px}
#fNav li a:hover{opacity:.7}
.fWrap .copyright{float:right;font-size:13px;vertical-align:middle}
.fWrap .copyright a{float:right;width:100px;margin-top:-5px;margin-left:15px}

.header{position:fixed;top: 0;left:0;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%}
.header h1{margin:0}
.menu{display:-webkit-box;display:-ms-flexbox;display:flex}
.menu a span{position:relative}
.menu a span:after{position:absolute;top: 50%;right:0;display:block;width: 10px;height:12px;content:"";background-repeat:no-repeat;background-position:50%;background-size:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.menu .onlineshop{color:#fff;text-align:center;background-color:#0226aa;font-family: ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;font-weight: 400;border: none;}
.menu a.onlineshop img{padding: 0.75em 0.4em 0 0;}

.share{display:-webkit-box;display:-ms-flexbox;display:flex}
.share_text{display:none}
.share a.twitter {display: flex;align-items: center;justify-content: center;background-color: #000;border-radius: 50%;}
.share a.twitter img {width: 50%;height: 50%;}
.share img{width:100%;height:auto}
#hamburgerToggle{display:none}
#hamburgerToggle:checked+.hamburgerToggleButton{background-image: url(../img/top/close.svg);background-repeat:no-repeat;background-position:50%;background-size: 11vw 5vw;}
#hamburgerToggle:checked+.hamburgerToggleButton img{opacity:0}
#hamburgerToggle:checked~nav{display:block}


*{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}
.prodlink{padding: 102px 0 40px;background-color:#fff;}
.prodlink img{vertical-align:top}
.prodlink a img{opacity:1;-webkit-transition:.3s;transition:.3s}
.prodlink a:hover img{opacity:.7}
.prodlink li{list-style:none}
.prodlink__in{max-width:960px;margin:0 auto}
.prodlink__ttl{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;align-items:center;justify-content:center;padding:1.25% 0;cursor:pointer;background-color:#003e9b;border-radius:26.04167px;opacity:1;-webkit-transition:.3s;transition:.3s;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center}
.prodlink__ttl img{width:28.75%}
.prodlink__ttl:hover{opacity:.7}
.prodlink__ttl:after{position:absolute;top:0;right:23.125%;display:-webkit-box;display:-ms-flexbox;display:flex;align-items:center;height:100%;font-family:FontAwesome;font-size:250%;color:#fff;content:"";-webkit-transition:.3s;transition:.3s;-webkit-box-align:center;-ms-flex-align:center}
.prodlink__ttl.is_show:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.prodlink__list{max-height:0;overflow:hidden;-webkit-transition:max-height .5s;transition:max-height .5s}
.prodlink__list ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-top:1.875%}
.prodlink__list li{width:18.75%;margin:0 1.5625% 1.5625% 0}
.prodlink__list li img{width:100%;max-width:100%}
.prodlink__list li:nth-child(5n){margin-right:0}
.prodlink__list.is_show{max-height:1000px}

.kvArea{height: 100vh;background-image: url(../img/top/kv_bg.jpg),url(../img/top/kv_bg_1.png),url(../img/top/kv_bg_2.png);background-repeat: no-repeat,no-repeat;background-position: 50% 25%,right calc(50vw + -111vh) bottom 5.8vh,left calc(50vw + -96vh) bottom 5.8vh;background-size: auto 60.5%, auto 122%, auto 99%;overflow: hidden;}
.kv{height: 100%;position: relative;}
.kv_title{display: block;width: auto;margin: 0 auto 0;padding: 20.5vh 0 0;height: 47.9%;}
.kv_title picture{display: block;}
.kv_title img{display: block;margin: auto;width: auto;height: 100%;}
.kv_80kcal_icon{
    position: absolute;
    top: 20.2%;
    right: calc(50% - 57.4vh);
    width: auto;
    height: 25.7%;
}
.kv_80kcal_icon img{
    width: auto;
    height: 100%;
}

.kv_list{display: flex;width: 900px;margin: -5.1vh auto 0;height: 52.2%;justify-content: center;}
.kv_el{height: 100%;}
.kv_el img{height: 100%;width: auto;}
.kv_el.milk{}
.kv_el.oats{}
.kv_el.yeast{
    margin: 14.7vh 0 0 -6px;
}
.kv_el.online{
    display: none;
}
.kv_el.soy{
    margin: 8.5vh 0 0 5px;
}
.kv_el.grains{
    margin: 15.3vh 0 0 10px;
}
.kv_el.barley{
    margin: 3.3vh 0 0 -4px;
}
.kv_el a{display:block}
.kv_el.milk a{
    padding-bottom: 7%;
    height: 70%;
    background-image: url(../img/top/kv_pkg_bg_milk.png);
    background-size: 80.6%;
    background-repeat: no-repeat;
    background-position: bottom 3.8% right 8%;
}
.kv_el.oats a{
    padding-bottom: 7%;
    height: 70%;
    background-image: url(../img/top/kv_pkg_bg_oats.png);
    background-size: 80.6%;
    background-repeat: no-repeat;
    background-position: bottom 3.8% right 8%;
}
.kv_el.yeast a{
    padding: 0 17px 28px 0;
    height: 73%;
    background-image: url(../img/top/kv_pkg_bg_yeast.png);
    background-size: 97.6%;
    background-repeat: no-repeat;
    background-position: bottom 0% right -174%;
}
.kv_el.online a{}
.kv_el.soy a{
    padding: 0 16px 35px 16px;
    height: 69%;
    background-image: url(../img/top/kv_pkg_bg_soy.png);
    background-size: 124%;
    background-repeat: no-repeat;
    background-position: bottom -27.5% right 50%;
}
.kv_el.grains a{
    padding: 0 0 29px 7px;
    height: 71%;
    background-image: url(../img/top/kv_pkg_bg_grains.png);
    background-size: 102%;
    background-repeat: no-repeat;
    background-position: bottom -5.5% left 319%;
}
.kv_el.barley a{
    padding: 0 0 18px;
    height: 72%;
    background-image: url(../img/top/kv_pkg_bg_barley.png);
    background-size: 84%;
    background-repeat: no-repeat;
    background-position: bottom 1.5% right 100%;
}

.kv_el:hover img{animation:flisk .2s linear;transform-origin: center bottom 20px ;}
@keyframes flisk{ 0% { transform: rotate(0deg) }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }}
}

.kv .packageNotes{max-width: 1280px;margin: 0.6% auto 0;padding: 0 5px;}
.kv .notesText{font-size: 1.2rem;}
.kv_scroll{
    position: absolute;
    top: 93.2%;
    left: 50%;
    transform: translateX(-50%);
    height: 0.9%;
}
.kv_scroll:after{
    content:"";
    width: 1px;
    height: 420%;
    background: #32190E;
    display: block;
    margin: 37% auto;
}

.what{
    padding: 82px 0;
    background-image: url(../img/top/line_bgpart_grains_2.png),url(../img/top/line_bgpart_yeast_2.png),url(../img/top/line_bgpart_barley_2.png),url(../img/top/bg_part_1.png),url(../img/top/bg_part_2.png);
    background-repeat: no-repeat;
    background-position: right 1690px top 400px,right 1610px top 1000px,left 1610px top 740px,right 1630px bottom 0px,left 1540px top 1130px;
}
.what h3{color:#ffffff;font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;font-size: 3.7em;font-weight: 900;}

.what_ttl{
    text-align: center;
}
.what_ttl img{
    max-height: 157px;
    height: 11vw;
}
.what_ttl_1{
    max-width: 942px;
    width: 86vw;
    margin: 1.8% auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4%;
    background-image: url(../img/top/what_ttl_1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}
.what_ttl_1 img{max-width: 120px;margin-right: 0.9%;width: 11vw;}
.what_ttl_1 h3{padding-left: 19.2px;/* font-size: 1vw; */}
.what_spec{
    position: relative;
    max-height: 524px;
    margin: 34px auto  0px;
    height: 48vw;
    width: 260px;
}
.what_list{
    position: relative;
    height: 100%;
}
.what_el{
    position: absolute;
    max-width: 380px;
    width: 30vw;
}
.what_el img{
    width: 100%;
}
.what_el:nth-of-type(1){
    top: 2.7%;
    right: calc(50% - -257px);
}
.what_el:nth-of-type(2){
    top: 49.8%;
    right: calc(50% - -82px);
}
.what_el:nth-of-type(3){
    top: -4%;
    right: calc(50% - 198px);
}
.what_el:nth-of-type(4){
    top: 46%;
    right: calc(50% - 326px);
}
.what_el:nth-of-type(5){
    top: 11%;
    right: calc(50% - 613px);
}
.what_spec_img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.what_spec_img img{
    position: absolute;
}
.what_spec_img img:nth-of-type(1){
    max-width: 227.19px;
    top: 12%;
    left: calc(50% - 423px);
    width: 18vw;
}
.what_spec_img img:nth-of-type(2){
    max-width: 306px;
    top: -6%;
    left: calc(50% - -83px);
    width: 24vw;
}
.what_spec_img img:nth-of-type(3){
    /*max-width: 315.94px;
    top: 49%;
    left: calc(50% - -249px);
    width: 25vw;*/
    max-width: 230.19px;
    top: 60%;
    left: calc(50% - -249px);
    width: 18.5vw;
}
.what_ttl_2{
    max-width: 942px;
    width: 86vw;
    margin: 123px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
    background-image: url(../img/top/what_ttl_2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    text-align: center;
}
.what_how{
    margin: 38px auto 0;
    background-color: #ffffff;
    max-width: 1280px;
    padding: 2.3% 1.5% 2.7%;
    width: 92vw;
    max-height: 664px;
    box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
}
.what_how_ttl{padding: 3.4% 0 3.1%;font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;font-size: 3.9em;font-weight: 900;text-align: center;background-image: url(../img/top/what_how.svg),url(../img/top/what_how_line.png),url(../img/top/what_how_line.png),url(../img/top/what_how_line_re.png);background-repeat: no-repeat;background-size: 10%,42.1% 6%,42.1% 6%,100% 6%;background-position: 50% 1%,0 5.7%,100% 5.7%,0 100%;}
.what_how_desc{
    margin: 43px auto 0;
    text-align: center;
    font-size: 2.2em;
}
.what_how_ex{
    margin: 4.1% auto 0;
    border: solid #FF884D 4px;
    border-radius: 0.8vw;
    box-sizing: border-box;
}
.what_how_ex_ttl{
    width: 13%;
    margin: -22px auto;
    background: #fff;
    padding: 4px 2.1%;
}
.what_how_ex_ttl img{
    width: 100%;
}

.what_how_ex_list{
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    padding: 4.7% 0 6%;
}
.what_how_ex_el{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.what_how_ex_img{width: 83%;}
.what_how_ex_text{
    font-size: 1.5em;
    text-align: center;
}
.what_how_ex_img img{width:100%}

.recommend{background-image: url(../img/top/what_spec_img_4.png),url(../img/top/what_spec_img_1.png);background-repeat: no-repeat;background-position: left 1500px top 130px,right 1530px bottom 0px;background-size: 340px,260px;padding-bottom: 59px;}
.recommend_ttl{
    text-align: center;
    padding: 119px 0 0;
}
.recommend_ttl img{
max-height: 140px;
    height: 11vw;
}
.recommend_list{
    display: flex;
    justify-content: center;
    margin: 59px 0 0;
    height: 100%;
}
.recommend_el{
    width: 32.9%;
    max-width: 359px;
}
.recommend_el img{
    width: 100%;
}
.recommend_el:nth-of-type(1){
    margin: 0 -1% 0 3.1%;
}
.recommend_el:nth-of-type(2){
    margin: 2.5% 0 0 -0.1%;
}
.recommend_el:nth-of-type(3){
    margin: 0 0 0 -0.8%;
}
.recommend_txt {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  font-size: 3.0rem;
  font-weight: 500;
  line-height: 2.4;
  text-align: center;
}
.recommend_txt::before {
  position: absolute;
  top: -120px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: calc(2068px * 0.5);
  height: calc(1193px * 0.5);
  background-image: url(../img/top/recommend_txt_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
}


.lineup{
    padding: 100px 0 0;
    overflow: hidden;
}
.lineup_ttl{
    text-align: center;
}
.lineup_ttl img{
    max-height: 140px;
    height: 11vw;
}
.lineup_list{
    margin: auto;
}
.lineup_el{
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
}
.lineup_imgbox{
    width: 53.5%;
    max-width: 674px;
}
.lineup_descbox{
    width: 40.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.2em;
    max-width: 510px;
}
.lineup_descsubttl{
    margin: 31px 0 1em;
    max-height: 43px;
    height: 3.4vw;
}
.lineup_desctext{
    width: 96%;
    line-height: 1.9em;
}
.lineup_descbtnbox{
    margin: 12px auto 0;
    width: 100%;
}
.lineup_descbtn{
    width: 79%;
    margin: auto;
    padding: 18px 1.8em 22px 0;
    border-radius: 10px;
    font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;
    font-weight: 900;
    text-align: center;
    position: relative;
    font-size: 1.1em;
    cursor: pointer;
    background:#fff;
    transition: all .3s;
    border-style: solid;
    border-width: 4px;
}
.lineup_descbtntext{}
.lineup_descbtntext svg{position: absolute;top: 50%;transform: translateY(-50%);right: 8%;}
.lineup_descbtntext path{
}
.lineup .packageNotes{
    align-self: baseline;
    font-size: 0.7em;
    margin: 1em 0.8em 1em;
}
.lineup_el:nth-of-type(even){
    flex-direction:row-reverse;
}
.lineup_el:nth-of-type(odd) .lineup_imgbox{
    text-align: right;
    padding: 73px 51px 0 0;
}
.lineup_el.milk{
    background-image: url(../img/top/line_bgpart_milk_1.png),url(../img/top/line_bgpart_milk_2.png),url(../img/top/line_bgpart_milk_3.png),url(../img/top/line_bg_milk.png);
    background-position: calc(50% - 40px) 320px,calc(50% - 589px) 194px,calc(50% - 70px) 119px,calc(50% - 290px) 10px;
    padding: 50px 0 0;
}
.lineup_el.oats{
    background-image: url(../img/top/line_bgpart_oats_1.png),url(../img/top/line_bgpart_oats_2.png),url(../img/top/line_bgpart_oats_3.png),url(../img/top/line_bg_oats.png);
    background-position: calc(50% - 40px) 320px,calc(50% - 589px) 194px,calc(50% - 70px) 119px,calc(50% - 290px) 10px;
    background-size: auto auto, 229px 249px, auto auto, auto auto;
    padding: 50px 0 0;
}

.lineup_descbtn:hover{color: #fff!important;}
.lineup_descbtn:hover .lineup_descbtntext path{fill: #ffffff;}
.milk .lineup_descbtn:hover{background: #001976}
.oats .lineup_descbtn:hover{background: #5c070c}
.yeast .lineup_descbtn:hover{background: #00ACE6}
.soy .lineup_descbtn:hover{background: #470000}
.grains .lineup_descbtn:hover{background: #DC000C}
.barley .lineup_descbtn:hover{background: #DE6A08}


.milk .lineup_descbox{margin: 125px 0 0;}
.milk .lineup_img{max-width: 510px;width: 81.8%;}
.milk .lineup_descttl{
    width: 95%;
}
.milk .lineup_descbtn{
    border-color: #001976;
    color: #001976;
}
.milk .lineup_descbtntext path{
    fill: #001976;
}

.oats .lineup_descbox{margin: 125px 0 0;}
.oats .lineup_img{max-width: 510px;width: 81.8%;}
.oats .lineup_descttl{
    width: 95%;
}
.oats .lineup_descbtn{
    border-color: #5c070c;
    color: #5c070c;
}
.oats .lineup_descbtntext path{
    fill: #5c070c;
}

.lineup_el.yeast{
    padding: 140px 0 0;
    background-image: url(../img/top/line_bgpart_yeast_1.png),url(../img/top/line_bgpart_yeast_2.png),url(../img/top/line_bg_yeast.png);
    background-position: calc(50% - -580px) 280px,calc(50% - -81px) 129px,calc(50% - -330px) -20px;
}
.yeast .lineup_descbox{margin: 34px 0 0;}
.yeast .lineup_img{max-width: 820px;width: 111.8%;padding: 0 0 0 38%;}
.yeast .lineup_descttl{
    width: 95%;
}

.yeast .lineup_descbtn{
    border-color: #00ACE6;
    color: #00ACE6;
}
.yeast .lineup_descbtntext path{
    fill: #00ACE6;
}
.lineup_el.soy{
    padding: 40px 0 0;
    background-image: url(../img/top/line_bgpart_soy_1.png),url(../img/top/what_spec_img_1.png),url(../img/top/line_bg_soy.png);
    background-position: calc(50% - 40px) 320px,calc(50% - 589px) 194px,calc(50% - 310px) 50px;
    background-size: auto ,248px ,auto;
}
.soy .lineup_descbox{margin: 134px 0 0;}
.soy .lineup_img{max-width: 510px;width: 81.8%;}
.soy .lineup_descttl{
    width: 77%;
}
.soy .lineup_descbtn{
    border-color: #470000;
    color: #470000;
}
.soy .lineup_descbtntext path{
    fill: #470000;
}
.lineup_el.grains{
    padding: 150px 0 0;
    background-image: url(../img/top/line_bgpart_grains_1.png),url(../img/top/line_bgpart_grains_2.png),url(../img/top/line_bg_grains.png);
    background-position: calc(50% - -610px) 300px,calc(50% - -21px) 109px,calc(50% - -330px) 20px;
}
.grains .lineup_descbox{margin: 28px 0 0;}
.grains .lineup_img{max-width: 820px;width: 111.8%;padding: 0 0 0 38%;}
.grains .lineup_descttl{
    width: 65%;
}
.grains .lineup_descbtn{
    border-color: #DC000C;
    color: #DC000C;
}
.grains .lineup_descbtntext path{
    fill: #DC000C;
}
.lineup_el.barley{
    background-image: url(../img/top/line_bgpart_barley_1.png),url(../img/top/line_bgpart_barley_2.png),url(../img/top/line_bg_barley.png);
    background-position: calc(50% - 30px) 140px,calc(50% - 559px) 154px,calc(50% - 310px) 10px;
    padding: 60px 0 0;
}
.barley .lineup_descbox{margin: 108px 0 0;}
.barley .lineup_img{max-width: 510px;width: 81.8%;}
.barley .lineup_descttl{
    width: 74%;
}
.barley .lineup_descbtn{
    border-color: #DE6A08;
    color: #DE6A08;
}
.barley .lineup_descbtntext path{
    fill: #DE6A08;
}
.brandBanner {
    display: flex;
    justify-content: center;
    margin-top: 120px;
}
.brandBanner li {
    margin: 0 18px;
    max-width: 534px;
}
.brandBanner li img:hover {
    opacity: .7;
}
.brandBanner li img {
    transition: .3s;
    width: 100%;
}
.brandBanner_ttl {
  margin-bottom: 5px;
  font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;
  font-size: 2.42rem;
  font-weight: 900;
  text-align: center;
}

.snshare{
    margin: 124px 0 0;
    background-image: url(../img/top/sns_bg.png);
    width: 100%;
    background-size: cover;
    padding: 3.7% 0 15%;
    max-height: 740px;
    background-position: center;
}
.snshare_box{
    background: rgb(255 255 255 / 75%);
    max-width: 660px;
    width: 51.6vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3% 0 3.5%;
}
.snshare_ttl{
    max-width: 90%;
}
.snshare_text{
    margin: 9%;
    width: 31%;
}
.snshare_list{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content: space-between;width: 55%;}
.snshare_list img{width:100%;height:auto}
.snshare_list a{width: 22%;-webkit-transition:opacity .4s cubic-bezier(.19,1,.22,1);transition:opacity .4s cubic-bezier(.19,1,.22,1)}
.snshare_list a:hover{opacity:.7}
.snshare_list a.twitter{display: flex;align-items: center;justify-content: center;background-color: #000;border-radius: 50%;}
.snshare_list a.twitter img{width: 50%;height: 50%;}


@media screen and (min-width:768px) and (max-width:1100px){
.kvArea{height: 87vw;background-image: url(../img/top/kv_bg.jpg);background-position: 50% 7.1vw;background-size: 80vw auto;}
.kv_title{padding: calc(50% - 32vw) 0 0;height: 43.9vw;}
.kv_title pictuure{display: block;}
.kv_80kcal_icon{top: 17.2vw;right: calc(50% - 48.4vw);height: 22.7vw;}
.kv_list{width: 90vw;margin: -5% auto 0;}
.kv_el{height: 100%;}
.kv_el.milk {}
.kv_el.oats {}
.kv_el.yeast {
    margin: 13% 0 0 0;
}
.kv_el.soy {
    margin: 8% 0 0 0;
}
.kv_el.grains {
    margin: 14% 0 0 0;
}
.kv_el.barley {
    margin: 4% 0 0 0;
}
.kv_el.milk a{height: 30vw;}
.kv_el.oats a{height: 30vw;}
.kv_el.yeast a{height: 30vw;}
.kv_el.soy a{height: 30vw;}
.kv_el.grains a{height: 30vw;}
.kv_el.barley a{height: 30vw;}
.kv .packageNotes{margin: 0 auto;}
}
@media screen and (min-width:768px) and (max-width:1279px){
body{
    font-size: 0.8vw;
}
.nav .menu a{border-width: 2px;font-size: 25.9px;max-height: 71px;}
.what_list{
    position: relative;
    height: 100%;
}
.what_el{
}
.what_el img{
    width: 100%;
}
.what_el:nth-of-type(1){
    top: 1vw;
    right: calc(50% - -20vw);
}
.what_el:nth-of-type(2){
    top: 20.5vw;
    right: calc(50% - -6vw);
}
.what_el:nth-of-type(3){
    top: -1.7vw;
    right: calc(50% - 15.5vw);
}
.what_el:nth-of-type(4){
    top: 18.8vw;
    right: calc(50% - 25.6vw);
}
.what_el:nth-of-type(5){
    top: 4.5vw;
    right: calc(50% - 48vw);
}
.what_spec_img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.what_spec_img img{
    position: absolute;
}
.what_spec_img img:nth-of-type(1){
    top: 4.9vw;
    left: calc(50% - 33vw);
    width: 18vw;
}
.what_spec_img img:nth-of-type(2){
  top: -2.5vw;
  left: calc(50% - -6.5vw);
  width: 24vw;
}
.what_spec_img img:nth-of-type(3){
    top: 20vw;
    left: calc(50% - -19.3vw);
    width: 25vw;
}

.lineup_el.milk{
    background-position: calc(50% - 3vw) 25vw,calc(50% - 46vw) 15vw,calc(50% - 5.4vw) 9vw,calc(50% - 290px) 0.5vw;
    background-size: 15vw,18vw,15vw,80vw;
}
.lineup_el.oats{
    background-position: calc(50% - 3vw) 25vw,calc(50% - 46vw) 15vw,calc(50% - 5.4vw) 9vw,calc(50% - 290px) 0.5vw;
    background-size: 15vw,18vw,15vw,80vw;
}
.lineup_el.yeast{
    background-position: calc(50% - -45.5vw) 22vw,calc(50% - -6.5vw) 10.5vw,calc(50% - -26vw) -2.1vw;
    background-size: 15vw,20.5vw,80vw;
}
.lineup_el.soy{
    background-position: calc(50% - 3vw) 25vw,calc(50% - 46vw) 15vw,calc(50% - 24vw) 4vw;
    background-size: 15.5vw, 19vw, 80vw;
}
.lineup_el.grains{
    background-position: calc(50% - -47.7vw) 23.5vw,calc(50% - -1.7vw) 8.3vw,calc(50% - -26vw) 1vw;
    background-size: 17vw,22vw,78vw;
}
.lineup_el.barley{
    background-position: calc(50% - 2.5vw) 11vw,calc(50% - 43.5vw) 12vw,calc(50% - 24vw) 1vw;
    background-size: 19vw,23vw,80vw;
}

.snshare{
    margin: 21vw 0 0;
}

}



.modal{position:relative;z-index:100}
.modal__overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background: rgba(255,255,255,.8);}
.modal__container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:30px;overflow:visible;background-repeat:no-repeat}
#modal-1 .modal__container{position:relative;margin-right:auto;margin-left:auto;background-repeat:repeat;background-position:0;background-size:auto}

.modal__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}
.modal__title{-webkit-box-sizing:border-box;box-sizing:border-box;width: 100%;font-weight:500;font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;display: flex;flex-direction: column;align-items: center;}
.modal__title span{line-height:1.833;letter-spacing:.06em;}
.modal__title span.value--taste{display:block}
.modal__title span.value--taste img{width:auto;height:100%}
.modal__title span.value--title{font-size: 2.1rem;width: 80%;display: block;border-radius: 1000px;}
#modal-1 .modal__title span.value--title{color:#ffffff}
.modal__close{position:absolute;width: 58px;height: 37px;border:0}
#modal-1 .modal__close{top:-42px;right:-1px}
.modal__header .modal__close:before{content:"✕"}

@-webkit-keyframes mmfadeIn{0%{opacity:0}
to{opacity:1}
}
@keyframes mmfadeIn{0%{opacity:0}
to{opacity:1}
}
@-webkit-keyframes mmfadeOut{0%{opacity:1}
to{opacity:0}
}
@keyframes mmfadeOut{0%{opacity:1}
to{opacity:0}
}
@-webkit-keyframes mmslideIn{0%{-webkit-transform:translateY(15%);transform:translateY(15%)}
to{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes mmslideIn{0%{-webkit-transform:translateY(15%);transform:translateY(15%)}
to{-webkit-transform:translateY(0);transform:translateY(0)}
}
@-webkit-keyframes mmslideOut{0%{-webkit-transform:translateY(0);transform:translateY(0)}
to{-webkit-transform:translateY(-10%);transform:translateY(-10%)}
}
@keyframes mmslideOut{0%{-webkit-transform:translateY(0);transform:translateY(0)}
to{-webkit-transform:translateY(-10%);transform:translateY(-10%)}
}

.micromodal-slide{display:none}
.micromodal-slide.is-open{display:block}
.micromodal-slide[aria-hidden=false] .modal__overlay{-webkit-animation:mmfadeIn .3s cubic-bezier(0,0,.2,1);animation:mmfadeIn .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide[aria-hidden=false] .modal__container{-webkit-animation:mmslideIn .3s cubic-bezier(0,0,.2,1);animation:mmslideIn .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide[aria-hidden=true] .modal__overlay{-webkit-animation:mmfadeOut .3s cubic-bezier(0,0,.2,1);animation:mmfadeOut .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide[aria-hidden=true] .modal__container{-webkit-animation:mmslideOut .3s cubic-bezier(0,0,.2,1);animation:mmslideOut .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide .modal__container,.micromodal-slide .modal__overlay{will-change:transform}
.modal__nutritionFacts{display:-webkit-box;display:-ms-flexbox;display:flex;letter-spacing:.06em}
.modal__nutritionFacts li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}
.modal__nutritionFacts li:after{position:absolute;display:block;width:100%;height:1px;content:"";}
.modal__nutritionFacts li span:first-child{width:152px}
.modal__nutritionFacts li span:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}
main{position:relative;}
/*#modal-1-content ul:nth-child(1) li:nth-child(3):after,#modal-1-content ul:nth-child(2) li:nth-child(1):after,#modal-1-content ul:nth-child(2) li:nth-child(2):after{content:none}*/

.modal--milk{}
.modal--milk .modal__close rect{fill:#0226aa}
.modal--milk .modal__container{background-color:#ffffff;border-color:#0226aa}
.modal--milk .modal__title span{color:#0226aa}
.modal--milk .modal__title span.value--title{background-color:#0226aa}
.modal--milk .modal__nutritionFacts{color:#0226aa}
.modal--milk .modal__nutritionFacts li:after{background-color:#0226aa}

.modal--oats{}
.modal--oats .modal__close rect{fill:#5c070c}
.modal--oats .modal__container{background-color:#ffffff;border-color:#5c070c}
.modal--oats .modal__title span{color:#5c070c}
.modal--oats .modal__title span.value--title{background-color:#5c070c}
.modal--oats .modal__nutritionFacts{color:#5c070c}
.modal--oats .modal__nutritionFacts li:after{background-color:#5c070c}

.modal--yeast{}
.modal--yeast .modal__close rect{fill:#00ACE6}
.modal--yeast .modal__container{background-color:#F2FCFF;border-color:#00ACE6}
.modal--yeast .modal__title span{color:#00ACE6}
.modal--yeast .modal__title span.value--title{background-color:#00ACE6}
.modal--yeast .modal__nutritionFacts{color:#00ACE6}
.modal--yeast .modal__nutritionFacts li:after{background-color:#00ACE6}

.modal--soy{}
.modal--soy .modal__close rect{fill:#470000}
.modal--soy .modal__container{background-color:#FFF9F2;border-color:#470000}
.modal--soy .modal__title span{color:#470000}
.modal--soy .modal__title span.value--title{background-color:#470000}
.modal--soy .modal__nutritionFacts{color:#470000}
.modal--soy .modal__nutritionFacts li:after{background-color:#470000}

.modal--grains{}
.modal--grains .modal__close rect{fill:#DC000C}
.modal--grains .modal__container{background-color:#ffffff;border-color:#DC000C}
.modal--grains .modal__title span{color:#DC000C}
.modal--grains .modal__title span.value--title{background-color:#DC000C}
.modal--grains .modal__nutritionFacts{color:#DC000C}
.modal--grains .modal__nutritionFacts li:after{background-color:#DC000C}

.modal--barley{}
.modal--barley .modal__close rect{fill:#DE6A08}
.modal--barley .modal__container{background-color:#ffffff;border-color:#DE6A08}
.modal--barley .modal__title span{color:#DE6A08}
.modal--barley .modal__title span.value--title{background-color:#DE6A08}
.modal--barley .modal__nutritionFacts{color:#DE6A08}
.modal--barley .modal__nutritionFacts li:after{background-color:#DE6A08}



@media screen and (min-width:768px){
.backToTop{left: 50%;bottom: 0px;transform: translateX(-50%) translateY(38%);}
.backToTop button{width: 17vw;max-width: 180px;height: 17vw;max-height: 180px;-webkit-transition:opacity .4s cubic-bezier(.19,1,.22,1);transition:opacity .4s cubic-bezier(.19,1,.22,1)}
.backToTop button:hover{opacity:.7}
#foot{height:54px}

#modal-1 .modal__container{max-width:900px;height: 600px;padding-top: 24px;margin-top:61px;border-radius: 8px;border-style: solid;border-width: 4px;width: 90vw;}
.modal--chocolateChipCookie .modal__header{border-bottom-color:#32190e}
.modal--soybeanFlour .modal__header{border-bottom-color:#6fc3d3}
.modal--cheesecake .modal__header{border-bottom-color:#fca400}
#modal-1 .modal__header{width:531px;padding-bottom:17px;margin:0 auto;white-space:nowrap;-webkit-transform:translateX(-4px);transform:translateX(-4px)}
.modal__title span{font-size: 3.1rem;line-height:1.833;font-weight: 900;}
.modal__title span.value--taste{height: 140px;margin-bottom: -8px;}
.modal__nutritionFacts{width:531px;margin: 6px auto 0;font-size:18px;font-size:1.8rem;line-height:3;-webkit-transform:translateX(-4px);transform:translateX(-4px)}
.modal__nutritionFacts ul:first-child{width:221px}
.modal__nutritionFacts ul:last-child{width: 221px;margin-left:80px}
.modal__nutritionFacts li{padding-left:3px}
.modal__nutritionFacts li:after{bottom:7px;left:3px}
.br--pc{display:block}
.displayNone--pc{display:none}
}

@media screen and (max-width: 767px){
body{
    font-size: 2.1vw;
}
.backToTop{left: 50%;bottom: 0;transform: translateX(-50%) translateY(35%);}

.kvArea{}
.kv{}
.kv_title{
    max-height: 24.4%;
    height: 51.5vw;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}
.kv_title picture{}
.kv_title img{
}
.kv_80kcal_icon{display: none;}
.kv_80kcal_icon img{
}

.kv_list{
    position: absolute;
    top: 0;
    width: 100%;
}
.kv_el{
    position: absolute;
    height: 64%;
}
.kv_el img{}
.kv_el.milk img{}
.kv_el.oats img{}
.kv_el.soy img{
    transform: rotateZ(-14.2deg) translateX(6%) translateY(0%);
}
.kv_el.yeast img{transform: rotateZ(9.8deg) translateX(12%) translateY(-5%);}
.kv_el.grains img{
    transform: rotateZ(-9.7deg) translateX(-10%) translateY(4%);
}
.kv_el.barley img{
    transform: rotateZ(0.8deg) translateX(12%) translateY(-5%);
}


.kv_el.milk{
    top: 22%;
    left: calc(50% - 31.9vw);
    transform: translateX(-50%);
    height: 44.2%;
}
.kv_el.oats{
    top: 22%;
    left: calc(50% - 31.9vw);
    transform: translateX(-50%);
    height: 44.2%;
}
.kv_el.yeast{top: 16%;left: 49.4%;transform: translateX(-50%);margin: 0 0 0 0;height: 47%;}
.kv_el.online{top: 40.7%;left: calc(50% + 31.4vw);/* max-height: 22vw; *//* max-width: 22vw; */transform: translateX(-50%);height: 26%;display: block;}
.kv_el.online img{width: auto;height: 100%;}
.kv_el.online p{
    color: #ffffff;
    font-size: 1.6em;
    font-weight: 900;
    margin: 1em 0 0;
    word-break: keep-all;
}
.kv_el.online:after{
}
.kv_el.soy{top: 121%;left: calc(50% - 32vw);height: 47%;transform: translateX(-50%);margin: 0;}
.kv_el.grains{top: 112%;left: calc(50%);margin: 0 0 0 -2vw;transform: translateX(-36%);height: 48%;}
.kv_el.barley{top: 121.3%;left: calc(50% - -30vw);transform: translateX(-50%);margin: 0;height: 45%;}
.kv_el a{}
.kv_el.milk a{
    height: 100%;
}
.kv_el.oats a{
    height: 100%;
}
.kv_el.yeast a{
    background-size: 93.6%;
    background-position: bottom 11% right 1%;
    padding: 0 0% 16% 0;
    height: 100%;
}
.kv_el.online a{height: 100%;}
.kv_el.soy a{background-size: 107%;background-position: bottom 5.5% right 130%;padding: 0 5vw 4vh 12px;height: 100%;}
.kv_el.grains a{height: 100%;}
.kv_el.barley a{background-size: 91%;background-position: bottom 16.5% right 30%;height: 100%;}

.kv_el:hover img{
    animation: none;
    transform-origin: initial;
}
.kv .packageNotes{
    position: absolute;
    bottom: 1vh;
    left: 6vw;
}
.kv .notesText{}
.kv_scroll{bottom: 28px;top: auto;}
.kv_scroll:after{height: 275%;margin: 7% auto;}

.what{
    padding: 14.7vw 0 8.7vw;
}
.what h3{
    text-align: center;
    font-size: 2.3em;
    line-height: 1.5em;
}

.what_ttl{
}
.what_ttl img{
    max-height: none;
    height: 21.1vw;
}
.what_ttl_1{max-width: none;width: 89vw;background-image: url(../img/top/what_ttl_1_sp.png);margin: 11.4vw auto 0;padding: 2.7vw 0vw;}
.what_ttl_1 img{
    width: 26vw;
    max-width: none;
}
.what_ttl_1 h3{
    white-space: nowrap;
}
.what_spec{max-height: none;margin: 3.2vw auto 0px;width: 98vw;height: 130vw;}
.what_list{}
.what_el{max-width: none;width: 51vw;}
.what_el img{
}
.what_el:nth-of-type(1){
    right: 43vw;
    top: 0.8vw;
}
.what_el:nth-of-type(2){right: 4vw;top: 18vw;}
.what_el:nth-of-type(3){right: 43vw;top: 44vw;}
.what_el:nth-of-type(4){right: 43.1vw;top: 93.7vw;}
.what_el:nth-of-type(5){right: 4vw;top: 69vw;}
.what_spec_img{}
.what_spec_img img{max-width: none;}
.what_spec_img img:nth-of-type(1){top: 4vw;left: 32vw;width: 32vw;}
.what_spec_img img:nth-of-type(2){top: 70vw;left: -2vw;width: 35.6vw;}
/*.what_spec_img img:nth-of-type(3){top: 98vw;left: 47vw;width: 40vw;}*/
.what_spec_img img:nth-of-type(3){top: 104vw;left: 44vw;width: 34vw;}
.what_ttl_2{max-width: none;width: 90vw;background-image: url(../img/top/what_ttl_2_sp.png);margin: 12.6vw auto 0;padding: 6vw 0;}
.what_how{margin: 5.6vw auto 0;max-width: none;width: 89.6vw;padding: 5.4vw 3.3vw 5vw;max-height: none;}
.what_how_ttl{
    font-size: 2.5em;
    padding: 6.3vw 0 4.8vw;
    background-size: 20.2%,35.8% 8.8%,35.8% 8.8%,100% 8%;
    background-position: 50% 1%,0 5.7%,100% 5.7%,0 100%;
}
.what_how_desc{margin: 5vw auto 0;font-size: 1.35em;line-height: 2em;}
.what_how_ex{margin: 12.3vw auto 0;border-radius: 2vw;}
.what_how_ex_ttl{width: 22vw;margin: -4.5vw auto 0;padding: 1.3vw 2.1vw;}
.what_how_ex_ttl img{
}

.what_how_ex_list{
    flex-wrap: wrap;
    padding: 0vw 3.5vw 2.1vw;
}
.what_how_ex_el{width: 32%;}
.what_how_ex_el:nth-of-type(1),.what_how_ex_el:nth-of-type(2){width:50%;margin: 0 0 3.4vw;}
.what_how_ex_el:nth-of-type(3) .what_how_ex_img{
    width: 28.4vw;
}
.what_how_ex_el:nth-of-type(4) .what_how_ex_img{
    width: 25.3vw;
}
.what_how_ex_el:nth-of-type(5) .what_how_ex_img{
    width: 28.7vw;
}
.what_how_ex_img{}

.what_how_ex_img {}
.what_how_ex_text{
}
.what_how_ex_img img{}

.recommend{
    padding: 0px;
    overflow: hidden;
}
.recommend_ttl{padding: 10vw 0 0;}
.recommend_ttl img{
    max-height: none;
    height: 19.2vw;
}
.recommend_list{margin: 7.6vw auto;flex-wrap: wrap;}
.recommend_el{width: 48%;max-width: none;}
.recommend_el img{
}
.recommend_el:nth-of-type(1){
}
.recommend_el:nth-of-type(2){margin: 7vw 0 0 -2vw;z-index: 1;}
.recommend_el:nth-of-type(3){margin: -13vw 0 0 0;z-index: 0;}
.recommend_txt {
  margin-top: 7vw;
  font-size: 4.2vw;
  line-height: 2.4;
}
.recommend_txt::before {
  top: -17vw;
  margin-left: 2vw;
  width: 140vw;
  height: 140vw;
}


.lineup{
    padding: 8vw 0 0;
}
.lineup_ttl{
}
.lineup_ttl img{max-height: none;height: 19vw;}
.lineup_list{}
.lineup_el{flex-wrap: wrap;}
.lineup_imgbox{width: 92%;max-width: none;}
.lineup_descbox{width: 92%;position: relative;}
.lineup_descbox:after{
    position: absolute;
    width: 23.2vw;
    height: 30vw;
    display: block;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
}
.lineup_descsubttl{margin: 5vw 0 5.3vw;max-height: none;height: 7.7vw;}
.lineup_desctext{width: 97%;font-size: 0.65em;line-height: 2em;}
.lineup_descbtnbox{margin: 9.3vw auto 0;}
.lineup_descbtn{width: 61.4vw;font-size: 1em;padding: 3.6vw 0.8vw 3.6vw 0;border-width: 0.6vw;}
.lineup_descbtntext{}
.lineup_descbtntext svg{
    width: 1.8vw;
    right: 7%;
}
.lineup_descbtntext path{
}
.lineup .packageNotes{margin: 0 1.5vw 0;}
.lineup_el:nth-of-type(even){
}
.lineup_el:nth-of-type(odd) .lineup_imgbox{
    padding: 0 0 0 9vw;
}
.lineup_el.milk{
    background-image: url(../img/top/line_bgpart_milk_2.png),url(../img/top/line_bgpart_milk_3.png),url(../img/top/line_bg_milk.png);
    background-position: -3vw 27vw,70vw 16vw,-22vw 1vw;
    background-size: 31vw, 25vw, 141vw;
}
.lineup_el.oats{
    background-image: url(../img/top/line_bgpart_oats_2.png),url(../img/top/line_bgpart_oats_3.png),url(../img/top/line_bg_oats.png);
    background-position: -3vw 27vw,70vw 16vw,-22vw 1vw;
    background-size: 31vw, 25vw, 141vw;
}

.lineup_descbtn:hover{
}
.lineup_descbtn:hover .lineup_descbtntext path{}
.milk .lineup_descbtn:hover{}
.oats .lineup_descbtn:hover{}
.yeast .lineup_descbtn:hover{}
.soy .lineup_descbtn:hover{}
.grains .lineup_descbtn:hover{}
.barley .lineup_descbtn:hover{}


.milk .lineup_descbox{margin: 3vw 0 0;}
.milk .lineup_descbox:after{background-image: url(../img/top/line_bgpart_milk_1.png);top: 16.5vw;left: -3vw;}
.milk .lineup_img{}
.milk .lineup_descttl{
}
.milk .lineup_descbtn{
}
.milk .lineup_descbtntext path{
}
.oats .lineup_descbox{margin: 3vw 0 0;}
.oats .lineup_descbox:after{background-image: url(../img/top/line_bgpart_milk_1.png);top: 16.5vw;left: -3vw;}
.oats .lineup_img{}
.oats .lineup_descttl{
}
.oats .lineup_descbtn{
}
.oats .lineup_descbtntext path{
}
.lineup_el.yeast{padding: 17vw 0 0;background-image: url(../img/top/line_bgpart_yeast_2.png),url(../img/top/line_bg_yeast.png);background-position: -3vw 27vw,-22vw 1vw;background-size: 37vw, 141vw;}
.yeast .lineup_descbox{
    margin: 2vw 0 0;
}
.yeast .lineup_descbox:after{background-image: url(../img/top/line_bgpart_yeast_1.png);top: 16.5vw;left: -6vw;}
.yeast .lineup_img{
    max-width: none;
    width: 92vw;
    padding: 0 0 0 25vw;
}
.yeast .lineup_descttl{width: 85vw;}

.yeast .lineup_descbtn{
}
.yeast .lineup_descbtntext path{
}
.lineup_el.soy{padding: 16vw 0 0;background-image: url(../img/top/what_spec_img_1.png),url(../img/top/line_bg_soy.png);background-position: -3vw 27vw,-22vw 1vw;background-size: 37vw, 141vw;}
.soy .lineup_descbox{
    margin: 2vw;
}
.soy .lineup_descbox:after{background-image: url(../img/top/line_bgpart_soy_1.png);top: -0.5vw;left: -2vw;}
.soy .lineup_img{}
.soy .lineup_descttl{width: 63vw;}
.soy .lineup_descbtn{
}
.soy .lineup_descbtntext path{
}
.lineup_el.grains{padding: 15vw 0 0;background-image: url(../img/top/line_bgpart_grains_2.png),url(../img/top/line_bg_grains.png);background-position: -3vw 27vw,-22vw 1vw;background-size: 37vw, 141vw;}
.grains .lineup_descbox{
    margin: 2vw 0 0;
}
.grains .lineup_descbox:after{background-image: url(../img/top/line_bgpart_grains_1.png);top: 20.5vw;left: -1vw;}
.grains .lineup_img{
    max-width: none;
    width: 92vw;
    padding: 0 0 0 24vw;
}
.grains .lineup_descttl{width: 51vw;}
.grains .lineup_descbtn{
}
.grains .lineup_descbtntext path{
}
.lineup_el.barley{padding: 17vw 0 0;background-image: url(../img/top/line_bgpart_barley_2.png),url(../img/top/line_bg_barley.png);background-position: -3vw 27vw,-22vw 1vw;background-size: 37vw, 141vw;}
.barley .lineup_descbox{
    margin: 2vw;
}
.barley .lineup_descbox:after{background-image: url(../img/top/line_bgpart_barley_1.png);top: 19.5vw;left: -3vw;}
.barley .lineup_img{}
.barley .lineup_descttl{width: 56vw;}
.barley .lineup_descbtn{
}
.barley .lineup_descbtntext path{
}
.brandBanner {
    display: block;
    margin-top: 60px;
}
.brandBanner li {
    margin-top: 30px;
}
.brandBanner li:first-child {
    margin-top: 0;
}
.brandBanner_ttl {
  margin-bottom: 0.5vw;
  font-size: 5.08vw;
}

.snshare{
    margin: 19.7vw 0 0;
    padding: 8.8vw 0 19vw;
}
.snshare_box{
    max-width: none;
    width: 89vw;
    padding: 8vw 1.8vw 9vw;
}
.snshare_ttl{}
.snshare_text{width: 29vw;margin: 8.1vw;}
.snshare_list{}
.snshare_list img{}
.snshare_list a{}


.backToTop button{width: 25vw;height: 25vw;max-width: 120px;max-height: 120px;}
.notesText{font-size:10px;font-size: 0.8em;line-height: 2.5;}
.modal--chocolateChipCookie .modal__container:before{bottom:-60px;width:334px;height:210px;background-image:url(/carbbalance/img/top/img_modal1-choco-sp.png);background-size:auto 210px;-webkit-transform:translateX(-50%) translateX(-14px);transform:translateX(-50%) translateX(-14px)}
.modal--soybeanFlour .modal__container:before{bottom:-40px;width:308px;height:174px;background-image:url(/carbbalance/img/top/img_modal1-soybean-sp.png);background-size:308px auto;-webkit-transform:translateX(-50%) translateX(1px);transform:translateX(-50%) translateX(1px)}
.modal--cheesecake .modal__container:before{bottom:-51px;width:320px;height:186px;background-image:url(/carbbalance/img/top/img_modal1-cheesecake-sp.png);background-size:320px auto;-webkit-transform:translateX(-50%) translateX(-2px);transform:translateX(-50%) translateX(-2px)}
#modal-1 .modal__container:after{top:-1.0666666667vw;left:-1.0666666667vw;border-radius:.2666666667vw}
#modal-1 .modal__container{width: 84vw;padding: 0 0 9vw;margin:0 auto;border-radius: 3vw;border-style: solid;max-width: 560px;border-width: 1vw;}
.modal--chocolateChipCookie .modal__header .modal__title{border-bottom-color:#32190e}
.modal--soybeanFlour .modal__header .modal__title{border-bottom-color:#6fc3d3}
.modal--cheesecake .modal__header .modal__title{border-bottom-color:#fca400}
#modal-1 .modal__header .modal__title{width: 100%;margin-top: 4vw;}
.modal__title{width:100%;padding-bottom:10px;margin-top:36px;}
.modal__title span{font-size: 2.8em;line-height:1.375;margin: 1.7vw 0;font-weight: 900;}
.modal__title span.value--taste{height: 21vw;margin-bottom: -2vw;max-height: 140px;}
.modal__title span.value--title{font-size:12px;font-size: 1.4em;line-height:1.833;width: 57vw;}
#modal-1 .modal__content{}
.modal__nutritionFacts li span:first-child {
    width: 43vw;
}
.modal__nutritionFacts{width: 69vw;margin:0 auto;font-size:12px;font-size: 1.2em;line-height:2.5;flex-wrap: wrap;justify-content: center;}
.modal__nutritionFacts ul:first-child{width: 80%;}
.modal__nutritionFacts ul:last-child{width: 80%;}
.modal__nutritionFacts li:after{bottom:2px;left:0}
.kvArea{margin: 0 0 17vw;min-height: 130vw;background-position: 50% 38%,right -17vw top 5vw,left -9vw bottom 0vw;background-size: 150vw auto, 51vw,111vw;max-height: 217vw;background-repeat: no-repeat;background-image: url(../img/top/kv_bg.jpg),url(../img/top/sp_bg_01.png),url(../img/top/sp_bg_02.png);}
.top .contentArea{background-image:url(/carbbalance/img/top/bg_slash.svg),url(/carbbalance/img/top/bg_pc.jpg);background-repeat:no-repeat,repeat;background-position:center bottom -1108px,center 0;background-size:2000px auto,767px auto}
.br--sp{display:block}
.displayNone--sp{display:none}
}

@media (max-width:750px){.pageTop{right:2.667%;width:13.333%;margin-bottom:2.667%}
.pageTop.fixed{margin-bottom:67.067%}
.pageTop a,.pageTop img{width:100%}
.pageTop a:hover{opacity:1}
#foot .sns{display: none;}
#foot .sns li{display:inline-block;width:11.2%;margin:0 4%}
.fWrap{width:100%;padding:8% 0;margin:0 auto}
#fNav{float:none;margin-bottom:7.333%;font-size:0;text-align:center}
#fNav li{margin-right:4%}
#fNav li:last-child{margin-right:0}
#fNav li a{font-size:3.2vw}
#fNav li a:hover{opacity:1}
.fWrap .copyright{float:none;font-size:2.667vw;text-align:center}
.fWrap .copyright a{display:block;float:none;width:30.133%;margin:0 auto 8%}
}

@media screen and (min-width: 1280px){.header{padding: 2.1vw calc(50% - 650px) 0;margin: auto;}
.header h1{width:175px;height:40px;padding-left: 0.7vw;}
.header h1 a{-webkit-transition:opacity .4s cubic-bezier(.19,1,.22,1);transition:opacity .4s cubic-bezier(.19,1,.22,1)}
.header h1 a:hover{opacity:.7}
.header .nav__inner{display:-webkit-box;display:-ms-flexbox;display:flex;padding-right: 0.8vw;}
.menu{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width: 889px;height:48px;padding-left:40px;border-radius:24px;font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;}
.menu a{position:relative;display:block;font-size:16px;line-height:48px;color: #470000;font-weight: 900;margin-right: 11px;}
.menu a span{margin-right: 5px;}
.menu a span:after{background-image: url(../img/top/icon_arrow-header.svg);}
.menu a.onlineshop span:after{background-image: url(../img/top/icon_arrow-header-white.svg);}
.menu a.onlineshop:hover{color:#fff;background-color:#e60008}
.menu a.onlineshop:hover:before{content:none}
.menu a:hover{}
.menu a:hover:before{position:absolute;bottom:8px;left:0;display:block;width:100%;height: 5px;content:"";background-image: url(../img/top/munu_bar.svg);background-size: cover;}
.menu .onlineshop{width:220px;height:40px;margin-top:4px;margin-right:4px;line-height:40px;border-radius:20px}
.share a{width: 40px;height: 40px;margin-left: 15px;margin-top: 3.2px;-webkit-transition:opacity .4s cubic-bezier(.19,1,.22,1);transition:opacity .4s cubic-bezier(.19,1,.22,1)}
.share a:hover{opacity:.7}
.hamburgerToggleButton{display:none}
}
@media screen and (max-width:1279px){.header h1{width: 16vw;height:20px;margin:20px 0 0 20px;z-index: 20;}
.header .nav{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:none;overflow:auto;/* background-image: url(../img/top/menu_bg.jpg); */background-repeat:repeat-x;background-position:top;background-size:cover;background-color: white;}
.header .nav__inner{display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;}
.menu_ttl{
    width: 53vw;
    margin: 0 auto 6.1vh;
    max-width: 350px;
}
.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;font-family: 'Noto Serif JP',ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,meiryo,arial,sans-serif;margin: 7vh 0 0;}
.menu a{font-size: 2.4em;font-weight: 900;line-height:1.389;color: #470000;letter-spacing:.06em;/* background-color: #ffffff; */border-radius: 10vw;border: solid #470000 0.5vw;width: 70vw;margin: 0 auto 3.8vh;padding: 0.7vh 0;max-width: 510px;position: relative;}
.menu a:after{content:"";background-image: url(../img/top/menu_arrow.svg);width: 0.8em;height: 0.6em;display: block;background-repeat: no-repeat;position: absolute;top: 34.8%;background-size: contain;right: 1%;}
.menu a:last-child:after{content:none}
.menu a span{padding-right:16px}
.menu a span:after{background-image:url(/carbbalance/img/top/icon_arrow-header-white.svg)}
.menu a+a{
}
.menu .onlineshop{width: 70vw;margin: 0 auto 0;border-radius: 72.5px;padding: 1.3vh;}
.menu a.onlineshop img{
    padding: 0.1em 0.3em 0 0;
    width: 1.6em;
}
.share{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width: 51vw;padding-top: 1.3vh;margin:0 auto;background-image:url(/carbbalance/img/top/text_sns.svg);background-repeat:no-repeat;background-position:center 80px;background-size:185px auto;flex-wrap: wrap;max-width: 390px;}
.share_text{
    width: 38%;
    margin: 10vh 0 5.2vh;
    display: block;
    text-align: center;
}
.share_text img{width:100%}

.share a{width: 11vw;height: 11vw;max-width: 90px;max-height: 90px;}
.hamburgerToggleButton{position:absolute;top: 1vw;right: 1vw;z-index:10;width: 18vw;padding:20px;max-width: 80px;}
}

@media screen and (max-width:960px){.prodlink{padding: 9.16667vw 0;}
.prodlink__in{padding:0 2.08333vw}
.prodlink__ttl:after{font-size:4.16667vw}
}
@media screen and (max-width:599px){.prodlink{padding: 15.01503vw 0 0;}
.prodlink__in{max-width:none;padding:0 5.34224vw}
.prodlink__ttl{padding:3.3389vw 0;border-radius:5.34224vw}
.prodlink__ttl img{width:46.07679vw}
.prodlink__ttl:after{top:0;right:8.68114vw;height:100%;font-size:10.68447vw}
.prodlink__list ul{padding-top:3.06452%}
.prodlink__list li{width:31.29032%;margin:0 3.06452% 3.06452% 0}
.prodlink__list li:nth-child(5n){margin-right:3.06452%}
.prodlink__list li:nth-child(3n){margin-right:0}
}
@media screen and (min-width:500px) and (max-width:768px){
    .kvArea{
    background-position: 50% 39%,right -14% top 5vw,left -9vw bottom -7vw;
    background-size: 790px auto,221px,531px;
}
}

/* KV4つ用 */
.kv_el.yeast {
    margin: 7.7vh 0 0 -6px;
}
.kv_el.yeast a {
    padding: 0 27px 48px 14px;
    height: 71%;
    background-size: 107.6%;
    background-position: bottom 0% right 45%;
}
.kv_el.soy {
    margin: 8.5vh 0 0 5px;
}
.kv_el.soy a {
    padding: 0 16px 35px 16px;
    height: 69%;
    background-size: 124%;
    background-position: bottom -27.5% right 50%;
}
.kv_el.grains {
    margin: 1.3vh 0 0 10px;
}
@media screen and (max-width: 767px){
  .kv_el.yeast {
    margin:0;
  }
  .kv_el.yeast a {
    background-size: 93.6%;
    background-position: bottom 11% right 1%;
    padding: 0 0% 16% 0;
    height: 100%;
  }
  .kv_el.yeast img {
    transform: rotateZ(5deg) translateX(12%) translateY(-5%);
  }
  .kv_el.soy {
      margin:0;
      left: calc(50% - 19vw);
      top: 118%;
  }
  .kv_el.soy a {
    background-size: 107%;
    background-position: bottom 5.5% right 130%;
    padding: 0 5vw 4vh 12px;
    height: 100%;
  }
  .kv_el.soy img {
    transform: rotateZ(-19.2deg) translateX(6%) translateY(0%);
  }
  .kv_el.grains {
      margin: 1.3vh 0 0 10px;
      left: calc(50% + 13vw);
      top: 111%;
  }
  .kv_el.grains img {
    transform: rotateZ(5.3deg) translateX(3%) translateY(9%);
  }

}