@charset "utf-8";

/* BASE CSS RESET and NEW SETTING */
#contents #main_inner.protein_soup article * {
box-sizing: border-box;
}
#contents #main_inner.protein_soup article *:focus { outline: none; }
#product #main_inner.protein_soup {
width: 100%;
overflow-x: hidden;
}
#product #main_inner.protein_soup a:hover {
text-decoration: none;
}
#product #main_inner.protein_soup .pankuzu {
margin: 0 auto 20px;
max-width: 960px;
}
#product #main_inner.protein_soup article {
font-size: var(--font-size-sp);
line-height: 1.7;
color: var(--font-color);
}


@media screen and (min-width:768px) {
#product #main_inner.protein_soup article {
font-size: var(--font-size-tb);
line-height: 1.8;
}

}/* min-width:768px */


@media screen and (min-width:960px) {
#product #main_inner.protein_soup article {
font-size: var(--font-size-pc);
}

}/* min-width:960px */





/* COMMON */
:root {
--red:#D64C40;
--yellow:#FFE06B;
--cream_100:#FFEEAC;
--cream_50:#FFF6D5;
--beige:#FFFCF2;
--gray:#F7F7F7;
--brown:#472B18;
}

/* bg */
.bg_cream {background-color: var(--cream_100);}
.bg_cream_50 {background-color: var(--cream_50);}
.bg_beige {background-color: var(--beige);}
.bg_yellow {background-color: var(--yellow);}
.bg_gray {background-color: var(--gray);}

/* parts */
.box_round {
border-radius: 14px;
box-sizing: border-box;
}
.anchor {
display: block;
margin-top:-50px;
padding-top:50px;
}

.protein_soup .wrap_container.pd-6em {
padding: 2.5rem 0 4rem;
}


/* text */
.t_red {color: var(--red);}
.t13 {font-size: var(--14px);}
.t14 {font-size: var(--14px);}
.t15 {font-size: var(--15px);}
.t16 {font-size: var(--16px);}
.t18 {font-size: var(--18px);}
.t20 {font-size: var(--20px);}

.title_20 {
font-size: var(--19px);
font-weight: 600;
}
.title_20 strong {
font-size: 140%;
}
.title_26 {
font-size: var(--26px);
font-weight: 600;
}
.title_dashborder {
position: relative;
margin-bottom: 1rem;
text-align: center;
z-index: 1;
}
.title_dashborder:after {
position: absolute;
bottom:35%;
left:0;
content: "";
display: block;
width: 100%;
height: 2px;
border-top: 1px dashed #C3AA98;
z-index: -1;
}
.title_dashborder > span {
display: inline-block;
width: 75%;
max-width: 330px;
}

@media screen and (max-width:768px) {
.t12_sp {font-size: var(--12px);}
.t13_sp {font-size: var(--13px);}
.t14_sp {font-size: var(--14px);}
.t15_sp {font-size: var(--15px);}
.t16_sp {font-size: var(--16px);}
.t17_sp {font-size: var(--17px);}
.t18_sp {font-size: var(--18px);}
.t19_sp {font-size: var(--19px);}
.t20_sp {font-size: var(--20px);}
.text-left_sp {text-align: left;}
.text-center_sp {text-align: center;}
}/* max-width:768px */

#product .protein_soup h3{/* #product h3 reset */
background: none;
color: var(--font-color);
font-size: 100%;
font-weight: normal;
line-height: 1.7;
padding: 0;
border-radius: 0;
max-height: initial;
max-height: auto;
text-align: left;
}

/* link */
a.other {
position: relative;
display: block;
padding: 5px 20px;
background-color:var(--red);
border-radius: 20px;
box-sizing: border-box;
font-size: var(--16px);
font-weight: 600;
color: #FFF;
}
a.other:after {
position: absolute;
right:20px;
top:50%;
transform: translateY(-50%);
content: "";
display: block;
width: 17px;
height: 17px;
background:url(/nutricare/public/products/img/knorr_protein_soup/icon_other.svg) no-repeat 0 0;
background-size: 100%;
}
.flex .other {
width: calc(50% - 5px);
}
.btn_yellow_round {
display: block;
background: var(--yellow);
text-align: center;
padding: 7px 20px;
border-radius: 20px;
line-height: 1.4;
}
.arrow_red {
position: relative;
display: inline-block;
padding: 0 50px 10px 40px;
font-size: var(--18px);
}
.arrow_red:before,
.arrow_red:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
display: block;
width: 100%;
height: 1px;
background: var(--red);
}
.arrow_red:after {
width: 20px;
bottom: 5px;
transform: rotate(30deg);
}


@media screen and (min-width:768px) {
.protein_soup .wrap_container.pd-6em {
padding: 6rem 0 8rem;
}
.title_20 {
font-size: var(--22px);
}
a.other {
padding: 5px 20px 3px;
}
.arrow_red {
font-size: var(--20px);
}
.title_dashborder {
margin-bottom: 2rem;
}

}/* COMMON min-width:768px */




/* fv */
.protein_soup .wrap_container#fv {
position: relative;
padding: 3rem 0 2rem;
background: linear-gradient(var(--yellow) 0, var(--beige) 90%);
overflow-x: hidden;
box-sizing: border-box;
z-index: 1;
}
.protein_soup .wrap_container#fv:after {
position: absolute;
bottom:275px;
right:0;
content: "";
display: block;
width: 200px;
height: 120px;
background:url(/nutricare/public/products/img/knorr_protein_soup/fv_bg_soup_sp.png) no-repeat right bottom;
background-size: 100%;
z-index: -1;
}


@media screen and (min-width:768px) {
.protein_soup .wrap_container#fv {
padding: 7rem 0;
}
.protein_soup .wrap_container#fv:after {
bottom:auto;
top:0;
width: 60%;
max-width: 680px;
height: 280px;
background-image: url(/nutricare/public/products/img/knorr_protein_soup/fv_bg_soup.png);
background-position: top right;
}
}/* fv min-width:768px */






/* gnav */
.protein_soup .gnav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.protein_soup .gnav a {
position: relative;
display: inline-flex;
align-items: center;
width:calc(33.3% - 3px);
margin-bottom: 5px;
padding: 10px 10px 20px;
text-align: center;
justify-content: center;
font-size: var(--16px);
box-sizing: border-box;
background:var(--yellow);
line-height: 1.4;
font-weight: 600;
}
.protein_soup .gnav a:hover {
text-decoration: none;
}
.protein_soup .gnav a:after {
position: absolute;
bottom:10px;
left:50%;
content: "";
display: block;
width: 7px;
height: 7px;
border-right: 2px solid var(--red);
border-bottom: 2px solid var(--red);
transform: translateX(-50%) rotate(45deg);
}
.protein_soup .gnav a:last-child > span:before {
content: "　";
}


@media screen and (min-width:768px) {
.protein_soup .gnav {
justify-content: center;
align-items: center;
background:var(--yellow);
}
.protein_soup .gnav a {
display: block;
padding: 20px 20px 20px 15px;
width: auto;
margin-bottom: 0;
font-size: var(--15px);
}
.protein_soup .gnav a:after {
bottom:auto;
left:auto;
top:46%;
right:5px;
transform: translate(0,-46%) rotate(45deg);
}
.protein_soup .gnav a:last-child > span:before {
display: none;
}

}/* gnav min-width:768px*/



@media screen and (min-width:960px) {
.protein_soup .gnav a {
padding: 20px 30px;
font-size: var(--16px);
}

}/* gnav min-width:960px*/







/* about */
#about{
background: url(/nutricare/public/products/img/knorr_protein_soup/about_bg.jpg);
background-size: 430px;
}
#about .col3 {
  padding: 5px;
}


/* check */
#check {
position: relative;
display: none;
}
#check:before {
position: absolute;
top:0;
left:0;
content: "";
display: block;
width: 100%;
height: 185px;
background: #D6ECFF url(/nutricare/public/products/img/knorr_protein_soup/check_bg.svg) no-repeat center center;
background-size: 130%;
}
#check .wrapper.lack,
#check .wrapper.enough {
align-items: center;
justify-content: space-between;
}






#check .wrapper.lack,
#check .wrapper.enough{
display: flex;
position: absolute;
z-index: 80;
left: 0;
margin: auto;
}
#check .wrapper.lack{
right: 10px;
top: 100px;
}
#check .wrapper.enough{
right: -10px;
top: 80px;
}
@media screen and (min-width: 768px){
#check .wrapper.lack{
right: 14px;
top: 152px;
}
#check .wrapper.enough{
right: 0px;
top: 122px;
}

.lack .yesno{
transform: translate(7px, 0);
}


}




#check .result_text,
#check .result_scale {
box-sizing: border-box;
}
#check .result_text {
position: relative;
padding-right: 0;
width: 52%;
padding-right: 10px;
}
#check .result_scale {
width: 48%;
padding-left: 0;
padding-right: 0;
}
#check .result_scale > object,
#check .result_scale > img {
width: 100%;
max-width: 295px;
}
#check .result_scale.first > img {
max-width: 280px;
}

#check .enough .result_scale > object {
width: 143%;
overflow: hidden;
}
#check .result_text.arrow:after {
position: absolute;
top:50%;
right:0;
content: "";
display: block;
width: 25px;
height: 25px;
background:url(/nutricare/public/products/img/knorr_protein_soup/arrow_right.svg) no-repeat center center;
background-size: 100%;
transform: translateY(-50%);
}

#check .select_area {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
#check .select_area > a {
cursor:pointer;
text-align: center;
padding:5px;
}
#check .select_area > a:hover {
text-decoration: none;
}
#check .select_area .selected {
text-align: center;
cursor: default;
}
#check .select_area .selected:hover {
opacity: 1;
}
#check .select_area .selected img {
display: block;
filter: drop-shadow(0 0px 3px rgba(193, 153, 44, 1));
}
#check .select_area h3 {
margin-top: 1.3rem;
text-align: center;
}
#check .select_area h3 > strong {
position: relative;
display:inline-block;
font-size: var(--18px);
font-weight: 600;
line-height: 1;
}
#check .select_area .selected h3 > strong {
background:linear-gradient(transparent 40%,#FFD119 0%);
border-bottom: 3px solid #FFD119;
}
#check .select_area .selected h3 > strong:before {
position: absolute;
top:50%;
transform: translateY(-50%);
left:-23px;
content: "";
display: inline-block;
width: 20px;
height: 20px;
background:url(/nutricare/public/products/img/knorr_protein_soup/icon_check.svg) no-repeat center center;
background-size: cover;
}
#check .select_area ul {
display: inline-block;
margin-top: .5rem;
}
#check .select_area li {
position: relative;
text-align: left;
font-size: 87%;
line-height: 1.5;
}
#check .select_area li:before {
display: inline-block;
transform: translateX(-15px);
margin-right: -15px;
content: "・";
}
#check .select_area.yesno {
flex-wrap: wrap;
justify-content: center;
}
#check .select_area.yesno .col4 {
width: 36%;
padding-right: 0;
}
#check .select_area.yesno .col4 > img {
max-width: 115px;
}
#check .select_area.yesno .col8 {
width: 64%;
}
#check .select_area.yesno .box_round {
padding:1rem 1.5rem 2rem;
}
#check .select_area .box_round .flex {
justify-content: space-between;
margin-top: 1rem;
}
#check .select_area .box_round .flex > a {
display: block;
padding:.5rem;
width: calc(50% - 4px);
border-radius: 5px;
background:#A8A8A8;
text-align: center;
font-size: var(--18px);
font-weight: 600;
color: #FFF;
cursor: pointer;
transition: background .2s;
}
#check .select_area .box_round .flex > a:hover,
#check .select_area .box_round .flex > a.selected {
background:var(--red);
opacity:1;
}

#check .select_area.enough {
flex-wrap: wrap;
justify-content: center;
}
#check .select_area.enough .result_menu {
display: flex;
justify-content: space-between;
width: 100%;
padding-bottom: 0;
}
#check .select_area.enough .result_menu > img {
display: block;
width: 36%;
max-width: 115px;
}
#check .select_area.enough .result_menu h3 {
margin-top: 0;
width: calc(64% - 20px);
}

#check .select_area.enough .box_round {
position: relative;
padding:1rem 4rem 3rem;
}
#check .select_area.enough .box_round > p {
position: relative;
padding: 30px 0;
}
#check .select_area.enough .box_round > p:before {
position: absolute;
top: -20px;
left:50%;
transform: translateX(-50%);
content: "";
display: block;
width: 35px;
height: 50px;
background:url(/nutricare/public/products/img/knorr_protein_soup/icon_plus.svg) no-repeat center bottom;
background-size: 100%;
}
#check .select_area .btn_retry {
position: absolute;
bottom:1.5rem;
right:0;
left: 0;
width: 11em;
margin: auto;
display: inline-block;
padding:.6rem 2rem;
background: var(--red);
color: #FFF;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
text-align: center;
}
.marker {
background:linear-gradient(transparent 40%,#FFD119 0%);
border-bottom: 3px solid #FFD119;
}



@media screen and (min-width:768px) {
#check:before {
height: 330px;
background-size: auto 235px;
}
#check .result_text {
width: 50%;
padding-right: 30px;
padding-left: calc(16% + 20px);
}
#check .result_text.arrow {
padding-bottom: 20px;
}
#check .result_text.arrow:after {
width: 34px;
height: 34px;
}
#check .result_scale {
width: 50%;
padding-left: 30px;
padding-right: 30px;
}
#check .enough .result_scale > object {
max-width: 440px;
}

#check .select_area {
}
#check .select_area > a {
padding:20px;
}
#check .select_area h3 {
margin-top: 2rem;
}
#check .select_area h3 > strong {
font-size: var(--21px);
}
#check .select_area .selected h3 > strong {
padding: 0 10px;
}
#check .select_area .selected h3 > strong:before {
left:-40px;
width: 33px;
height: 33px;
}
#check .select_area ul {
margin-top: .8rem;
}
#check .select_area.yesno .col4 {
width: 33.3333%;
padding-right: 20px;
}
#check .select_area.yesno .col4 > img {
max-width:100%;
}
#check .select_area.yesno .col8 {
width: 66.666%;
}
#check .select_area.yesno .box_round {
padding:2rem 4rem 5rem;
}
#check .select_area .box_round .flex {
margin-top: 3rem;
}
#check .select_area .box_round .flex > a {
padding:1.5rem 1rem;
width: calc(50% - 20px);
border-radius: 10px;
font-size: var(--26px);
}

#check .select_area.enough .result_menu {
display: block;
width: 33.3333%;
}
#check .select_area.enough .result_menu > img {
width: 100%;
max-width: 100%;
}

#check .select_area.enough .result_menu h3 {
width: 100%;
margin-top: 1.5rem;
}
#check .select_area.enough .box_round {
padding:1rem 2rem;
}
#check .select_area.enough .box_round > p {
padding: 10px 0 80px 100px;
}
#check .select_area.enough .box_round > p:before {
top:50%;
left:10px;
transform: translateY(-50%);
width: 63px;
height: 83px;
}
#check .select_area .btn_retry {
padding:1rem 2.5rem;
font-size: var(--20px);
bottom:2.5rem;
}




}/* check min-width:768px*/







/* feature */
#feature .title_dashborder > span {
width: calc(75% + 2rem);
}
#feature .inner-wrapper {
padding: 2rem 0 4rem;
}
#feature dl {
display: flex;
justify-content: space-between;
align-items: center;
padding-left:0;
}
#feature dt,
#feature dd {
box-sizing: border-box;
}
#feature dt {
width: 40%;
}
#feature dd {
width: 55%;
font-size: var(--16px);
}
#feature .package{
text-align:center;
}



@media screen and (min-width:768px) {
#feature .inner-wrapper {
padding: 5rem 0;
}
#feature .inner-wrapper .col4 {
width: var(--col4);
}
#feature .inner-wrapper .col5 {
width: var(--col5);
}
#feature .inner-wrapper .col7 {
width: var(--col7);
}
#feature dl {
display: block;
padding-left:20px;
}
#feature dt,
#feature dd {
width: 100%;
}
#feature dd {
font-size: var(--17px);
margin-top: 2rem;
}
#feature dt > img {
width: 250px;
}
#feature .title_26 {
padding-bottom: 0;
text-align: center;
}
#feature .package{
text-align:right;
transform: translateY(7px);
}

}/* feature min-width:768px */


@media screen and (min-width:960px) {
#feature .inner-wrapper {
width: calc(100% - 60px);
}

}/* feature min-width:960px */






/* information */
#information .box_product {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2rem 1.5rem 4rem;
box-sizing: border-box;
background:var(--cream_50) url(/nutricare/public/products/img/knorr_protein_soup/bg_box_product.svg) no-repeat center top;
background-size: 100%;
}
#information .box_product .head {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#information .box_product .head h2 {
width: 128px;
}
#information .box_product .head .title_20 + p {
margin-top: .6rem;
}
#information .box_product .col {
padding: 30px 15px 0;
}
#information .box_product .col > h3 {
font-size: var(--24px);
font-weight: 600;
text-align: center;
letter-spacing: 0.2em;
}

#information .component {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px dashed var(--yellow);
}
#information .component .trigger {
position: relative;
padding: .8rem 1rem .5rem;
background:var(--yellow);
text-align: center;
transition: opacity .2s;
cursor: pointer;
}
#information .component .trigger:hover {
opacity: .7;
}
#information .component .trigger:after {
position: absolute;
right:20px;
top:45%;
content: "";
display: block;
width: 7px;
height: 7px;
border-right: 1px solid var(--font-color);
border-bottom: 1px solid var(--font-color);
transform:translateY(-45%) rotate(45deg);
}
#information .component .trigger.current:after {
top:55%;
transform:translateY(-55%) rotate(-135deg);
}
#information .component dd {
display: none;
padding-top:2rem;
font-size: var(--15px);
}




@media screen and (min-width:768px) {
#information .box_product {
padding: 3rem;
}
#information .box_product .head {
justify-content: center;
margin-bottom: 6rem;
}
#information .box_product .head h2 {
width: 185px;
margin-right: 15px;
}
#information .box_product .head > div {
width: calc(100% - 200px);
}
#information .box_product .head h3 {
letter-spacing: 0.05em;
}
#information .box_product .head h3 + p {
margin-top: 0;
}
#information .box_product .col > h3 {
font-size: var(--28px);
}
#information .box_product .col {
width: 50%;
padding: 10px;
}
#information .component {
margin-top: 3rem;
padding-top: 3rem;
}


}/* information min-width:768px*/


@media screen and (min-width:960px) {
#information .box_product .head h2 {
margin-right: 60px;
}
#information .box_product .head h3 + p {
margin-left: 1rem;
}
#information .box_product .head > div {
width:auto;
}
#information .box_product .col {
padding: 20px 10px;
}

}/* information min-width:960px */






/* recipe */
#recipe dt {
margin: 1.8rem 0 .8rem;
font-weight: 600;
font-size: var(--20px);
}
#recipe dd p {
font-size: var(--16px);
}
#recipe dd p.t15 {
font-size: 86%;
}
#recipe .btn_yellow_round {
margin-top: 1.5rem;
}
#recipe .btn_yellow_round:after {
content: "";
display: inline-block;
margin-left: .5rem;
transform: translateY(2px);
width: 16px;
height: 16px;
background: url(/nutricare/public/products/img/knorr_protein_soup/icon_spoon.svg) no-repeat center center;
background-size: 100%;
}


@media screen and (min-width:768px) {
#recipe .btn_yellow_round:after {
width: 18px;
height: 18px;
}

}/*recipe min-width:768px*/





/* faq */
#faq dt {
position: relative;
padding: 15px 20px 10px 40px;
background: #FFF;
font-weight: 600;
}
#faq dt:before {
position: absolute;
top:8px;
left:15px;
content: "Q";
font-size: var(--24px);
color: var(--red);
}
#faq dd {
padding: 1.5rem 0 3rem;
}

@media screen and (min-width:768px) {

}/*faq  min-width:768px*/






/* IE11 */
@media all and (-ms-high-contrast: none){

#product #main_inner.protein_soup article {
font-size: 16px;
color: #472B18;
}
.bg_cream {background-color: #FFEEAC;}
.bg_cream_50 {background-color: #FFF6D5;}
.bg_beige {background-color:#FFFCF2;}
.bg_yellow {background-color: #FFE06B;}
.bg_gray {background-color: #F7F7F7;}
.t_red {color: #D64C40;}
.t14 {font-size: 82%;}
.title_20 { font-size: 129%;}
.title_26 { font-size: 153%;}

a.other {background-color:#D64C40;font-size:94%;
}
.btn_yellow_round {background: #FFE06B;}
.arrow_red {font-size: 118%;}
.arrow_red:before,.arrow_red:after {background: #D64C40;}

.protein_soup .wrap_container#fv {
background: linear-gradient(#FFE06B 0, #FFFCF2 90%);
}
.protein_soup .gnav {background:#FFE06B;}
.protein_soup .gnav a {font-size: 88%;}
.protein_soup .gnav a:after {
border-right: 2px solid #D64C40;
border-bottom: 2px solid #D64C40;
}

#check .select_area .box_round .flex > a {font-size: 106%;}
#check .select_area .box_round .flex > a:hover,
#check .select_area .box_round .flex > a.selected {background: #D64C40;}
#check .select_area .btn_retry {background: #D64C40;font-size: 118%;
}

#check .result_scale {
text-indent: -9999px;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
#check #check_start .result_scale {
height: 215px;
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_start_scale.png);
}
#check .lack .result_scale {height: 255px;}
#check .enough .result_scale {height: 283px;}
#check .lack#check_lack_rice .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_lack_rice_scale.png);
}
#check .lack#check_lack_bread .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_lack_bread_scale.png);
}
#check .lack#check_lack_serial .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_lack_serial_scale.png);
}
#check .enough#check_enough_rice .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_enough_rice_scale.png);
}
#check .enough#check_enough_bread .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_enough_bread_scale.png);
}
#check .enough#check_enough_serial .result_scale {
background-image: url(/nutricare/public/products/img/knorr_protein_soup/check_enough_serial_scale.png);
}

#check .select_area .box_round .flex > a {font-size: 153%;}
#feature .inner-wrapper .wrapper {margin:0;}
#feature .inner-wrapper .col4 {width: 33.3333%;}
#feature .inner-wrapper .col5 {width: 41.6666%;}
#feature .inner-wrapper .col7 {width:58.333%;}
#information .box_product {
background:#FFF6D5 url(/nutricare/public/products/img/knorr_protein_soup/bg_box_product.svg) no-repeat center top;
}
#information .box_product .col > h3 {font-size:165%;}
#information .component {border-top: 1px dashed #FFE06B;}
#information .component .trigger {background:#FFE06B;}
#information .component .trigger:after {
border-right: 1px solid #472B18;
border-bottom: 1px solid #472B18;
}
#recipe dt {font-size: 118%;}
#recipe dd p {font-size: 94%;}
#faq dt:before {font-size: 141%;color: #D64C40;}


}/* //IE11 */



/* Edge(EdgeHTML) */
_:-ms-lang(x)::backdrop, .index_list a > figure img {
height: auto;
}

_:lang(x)::-ms-, .index_list a > figure img {
height: auto;
}