@charset "UTF-8";
/*! ==================================================
 * Noto Sans Japanese (japanese) is lisenced under the SIL Open Font License 1.1
 * by http://www.google.com/fonts/earlyaccess
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');
a:hover p,a:link p,a:visited p {  color: #373737; }
br { font-family: sans-serif !important; }


/*=============================================================

* PC & all

=============================================================*/

.article {
  font-family: "Roboto", "YakuHanJP", "BaseFont-JP", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 15px;
  color: #373737;
  font-weight: 400;
}
.header {
  width: 100%;
  height: 400px;
  background: url("/prouse/cat_assets/img/recommend/sauce_soup/mv_bg.png") no-repeat center center / cover;
  padding: 5px 0;
}
.header-inner {
  width: 100%;
  height: 100%;
  border-top: solid 3px #744E07;
  border-bottom: solid 3px #744E07;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.header-ttl {
  text-align: center;
  width: 370px;
  height: 287px;
  background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h1.svg") no-repeat center center / auto 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.4;
}
.header-ttl-item1 {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 20px;
}
.header-ttl-item2 {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 27px;
}
.header-ttl-item3 {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 49px;
  margin-top: -10px;
  margin-bottom: 7px;
}
.header-ttl-item4 {
  display: block;
  width: 216px;
  padding: 7px;
  background: #fff;
  border-radius: 50px;
  text-align: center;
  color: #744E07;
  font-size: 16px;
  font-family: 'BaseFont-JP';
  margin-top: -6px;
  font-weight: bold;
}
.header-txt  {
  color: #fff;
  font-size: 12px;
  text-align: right;
  width: 100%;
  margin: 20px 100px 0 0;
}

/*--------------------------*/

.intro {
  padding: 60px 0;
}
.intro-ttl {
  text-align: center;
  background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2.svg") no-repeat center bottom / 874px auto;
  font-size: 17px;
  color: #744E0D;
  line-height: 1.7;
  padding-bottom: 10px;
  font-family: 'Noto Serif JP', serif;
}
.intro-ttl span {
  font-size: 38px;
  color: #fff;
}
.intro-ttl-sub {
  text-align: center;
  font-size: 30px;
  color: #6A4D15;
  font-family: 'Noto Serif JP', serif;
  margin: 26px 0 0;
}
.intro-txt {
  font-size: 20px;
  text-align: center;
}
.intro-nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 946px;
  margin: 30px auto 0;
}
li[class^="intro-nav-item-"] {
  width: 299px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
li[class^="intro-nav-item-"] > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
li[class^="intro-nav-item-"]:hover {
  opacity: 0.7;
}
.intro-nav-item-ttl {
  border-radius: 11px;
  border-bottom: solid 3px #744E07;
  height: 100px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 80px;
  color: #fff;
  font-size: 23px;
  font-family: 'Noto Serif JP', serif;
}
.intro-nav-item-ttl::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #744E07;
  border-right: solid 2px #744E07;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 80%;
  left: 0;
  right:  0;
  margin: -4px auto 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
li[class^="intro-nav-item-"]:hover .intro-nav-item-ttl::after {
  top: 86%;
}
.intro-nav-item-01 .intro-nav-item-ttl { background: #E295AA; }
.intro-nav-item-02 .intro-nav-item-ttl { background: #DEB261; }
.intro-nav-item-03 .intro-nav-item-ttl { background: #94B44A; }
.intro-nav-item-img {
  width: 299px;
  text-align: center;
  position: absolute;
  left: 0;
  top: -90px;
  padding-right: 8px;
}
.intro-nav-item-img img {
  width: auto;
  height: 88px;
  margin: 0;
}

/* section */

.section {
  border-bottom: solid 3px #744E07;
  padding: 104px 0;
	background-image: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_01.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_02.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_03.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_01.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_02.png");
  background-position: left -5% top 50px, right -5% top 400px, left -5% top 1200px, right -5% top 1800px, left -5% top 2600px;	
  background-size: 30% auto, 35% auto, 40% auto, 30% auto, 30% auto;	
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.section01 { background-color: #EDE4E8; border-top: solid 3px #744E07; }
.section02 { background-color: #E5D6C0; }
.section03 { background-color: #DEE2D5; }
.section-head {
  background: #fff;
  width: 1041px;
  border-radius: 16px;
  margin: 0 auto 60px;
  position: relative;
  padding: 80px 0 40px;
}
.section-head-ttl {
  text-align: center;
  font-size: 28px;
  color: #fff;
  padding: 1px 0 15px;
  font-family: 'Noto Serif JP', serif;
  top: -31px;
  left: 0;
  width: 1041px;  
  position: absolute;
}
.section01 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_01.svg") no-repeat center top / 467px auto; }
.section02 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_02.svg") no-repeat center top / 467px auto; }
.section03 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_03.svg") no-repeat center top / 467px auto; }
.section-head-img {
  text-align: center;
  margin-bottom: 24px;
}
.section-head-img img {
  width: auto;
  height: 135px;
  margin: 4px;
}
.section-head-txt {
  text-align: center;
  font-size: 20px;
}
.section-products {
  background: #fff;
  margin: 60px auto 0;
  width: 1041px; 
  position: relative;
  padding: 68px 70px 56px;
}
.section-products-ttl {
  width: 500px;
  background: #6A4D15;
  font-size: 25px;
  font-family: 'Noto Serif JP', serif;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50px;
  line-height: 1;
  vertical-align: bottom;
}
.section-products-point {
  width: 100%;
  margin: 0 auto;
  padding: 26px 50px;
}
.section01 .section-products-point { border: dashed 1px #E295AA; background-color: #FDF8F8; }
.section02 .section-products-point { border: dashed 1px #DEB261; background-color: #F5F1E9; }
.section03 .section-products-point { border: dashed 1px #94B44A; background-color: #F6F7F4; }
.section-products-point-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
          align-items: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.section-products-point-item {
  width: 49%;
}
.section-products-point-item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: 100%;
}
.section-products-point-item-num {
  width: 96px;
  height: 96px;
  font-family: 'Noto Serif JP', serif;
  color: #fff;
  font-size: 19px;
  text-align: center;
  padding: 21px 0 0;
  border-radius: 50%;
  line-height: 1.3;
  margin-right: 8px;
}
.section-products-point-item-num span {
  font-size: 30px;
}
.section01 .section-products-point-item-num { background-color: #E295AA; }
.section02 .section-products-point-item-num { background-color: #DEB261; }
.section03 .section-products-point-item-num { background-color: #94B44A; }
.section-products-point-item-txts {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}
.section-products-point-item-txts-ttl {
  color: #6A4D15;
  font-size: 23px;
  font-weight: bold;
  margin-bottom: 0;
}
.section-products-point-item-txts-txt {
  font-size: 17px;
}
.section-products-product-list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.section-products-product-item {
  width: 47%;
  margin-top: 57px;
}
.section-products-product-img {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}
.section-products-product-img img:first-child {
  width: auto;
  height: 187px;
  margin-right: 0;
  z-index: 2;
  mix-blend-mode: multiply
}
.section-products-product-img img:nth-child(2) {
  width: 164px;
  height: auto;
  z-index: 1;
}
.anmfree-icon {
  position: absolute;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  background: #378E41;
  border-radius: 4px;
  right: 30px;
  bottom: 10px;
  text-align: center;
  padding: 4px;
  z-index: 3;
  line-height: 1.2;
}
.section-products-product-ttl {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: #6A4D15;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: nowrap;
}
.section-products-product-ttl span {
  display: inline-block;
}
.section01 .section-products-product-item:nth-child(1) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #EDD387), to(#EDD387)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #EDD387 80%, #EDD387 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #EDD387 80%, #EDD387 100%); }
.section01 .section-products-product-item:nth-child(2) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #F0C36F), to(#F0C36F)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #F0C36F 80%, #F0C36F 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #F0C36F 80%, #F0C36F 100%); }
.section01 .section-products-product-item:nth-child(3) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #E6B992), to(#E6B992)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #E6B992 80%, #E6B992 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #E6B992 80%, #E6B992 100%); }
.section01 .section-products-product-item:nth-child(4) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #CDCDCD), to(#CDCDCD)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #CDCDCD 80%, #CDCDCD 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #CDCDCD 80%, #CDCDCD 100%); }
.section02 .section-products .section-products-product-item:nth-of-type(1) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(60%, #fff), color-stop(60%, #F4B98B), to(#F4B98B)); background: -o-linear-gradient(top, #fff 0%, #fff 60%, #F4B98B 60%, #F4B98B 100%); background: linear-gradient(180deg, #fff 0%, #fff 60%, #F4B98B 60%, #F4B98B 100%); }
.section02 .section-products .section-products-product-item:nth-of-type(2) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(60%, #fff), color-stop(60%, #E6E7DB), to(#E6E7DB)); background: -o-linear-gradient(top, #fff 0%, #fff 60%, #E6E7DB 60%, #E6E7DB 100%); background: linear-gradient(180deg, #fff 0%, #fff 60%, #E6E7DB 60%, #E6E7DB 100%); }
.section02 .section-products.__02 .section-products-product-item:nth-of-type(1) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(60%, #fff), color-stop(60%, #F2E468), to(#F2E468)); background: -o-linear-gradient(top, #fff 0%, #fff 60%, #F2E468 60%, #F2E468 100%); background: linear-gradient(180deg, #fff 0%, #fff 60%, #F2E468 60%, #F2E468 100%); }
.section02 .section-products.__02 .section-products-product-item:nth-of-type(2) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(60%, #fff), color-stop(60%, #FAD230), to(#FAD230)); background: -o-linear-gradient(top, #fff 0%, #fff 60%, #FAD230 60%, #FAD230 100%); background: linear-gradient(180deg, #fff 0%, #fff 60%, #FAD230 60%, #FAD230 100%); }
.section03 .section-products-product-item:nth-child(1) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #D3C9BC), to(#D3C9BC)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #D3C9BC 80%, #D3C9BC 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #D3C9BC 80%, #D3C9BC 100%); }
.section03 .section-products-product-item:nth-child(2) .section-products-product-ttl span { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), color-stop(80%, #C1D98B), to(#C1D98B)); background: -o-linear-gradient(top, #fff 0%, #fff 80%, #C1D98B 80%, #C1D98B 100%); background: linear-gradient(180deg, #fff 0%, #fff 80%, #C1D98B 80%, #C1D98B 100%); }
.section-products-product-txt-01 {
  font-size: 19px;
  color: #6A4D15;
  text-align: center;
  margin-bottom: 19px;
  line-height: 1.7;
}
.section-products-product-txt-02 {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 17px;
}
.section-products-product-btn a,
.section-products-product-btns a {
  display: inline-block;
  width: 48%;
  padding: 6px;
  text-align: center;
  border-radius: 10px;
  border: solid 1px #744E0D;
  color: #744E07;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.section-products-product-btn a {
  width: 100%;
}
.section-products-product-btn a::after,
.section-products-product-btns a::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 1px #744E07;
  border-right: solid 1px #744E07;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right:  17px;
  margin: auto 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.section-products-product-btn a:hover,
.section-products-product-btns a:hover {
  background: #744E07;
  color: #fff;
}
.section-products-product-btn a:hover::after,
.section-products-product-btns a:hover::after {
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  right:  12px;
}
.section-recipe {
  width: 1041px;
  margin: 60px auto 0;
  background: #fff;
  padding: 0 37px 50px;
}
.recipe {
  position: relative;
  padding-top: 60px;
}
.recipe-head-ttl {
  width: 500px;
  background: #DEB261;
  font-size: 25px;
  font-family: 'Noto Serif JP', serif;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50px;
  line-height: 1;
  vertical-align: bottom;
}
.recipe-head-txt {
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
}
.recipe-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.recipe-item {
  width: 307px;
  margin: 20px 11px 0;
  background: #F8F7F5;
}
.recipe-item:nth-of-type(3n+1) {
  margin-left: 0;
}
.recipe-item:nth-of-type(3n) {
  margin-right: 0;
}
.recipe-item-inner {
  display: block;
  width: 100%;
  height: 100%;
}
.recipe-img {
  width: 100%;
  position: relative;
}
.recipe-img img:first-child {
  width: 100%;
  height: auto;
}
.recipe-img img:last-child {
  position: absolute;
  right: 8px;
  bottom: -16px;
  width: auto;
  height: 90px;
  border: solid 4px #fff;
  border-radius: 3px;
}
.recipe-ttl {
  font-size: 19px;
  color: #6A4D15;
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 78px;
}
.recipe-txt {
  font-size: 15px;
  line-height: 1.5;
  padding: 0 25px;
  height: 90px;
  letter-spacing: 1px;
}
.recipe-btn {
  display: block;
  width: 86%;
  padding: 6px;
  text-align: center;
  border-radius: 10px;
  border: solid 1px #744E0D;
  color: #744E07;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  margin: 0 auto 20px;
}
.recipe-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 1px #744E07;
  border-right: solid 1px #744E07;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right:  17px;
  margin: auto 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.recipe-item:hover .recipe-btn {
  background: #744E07;
  color: #fff;
}
.recipe-item:hover .recipe-btn::after {
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  right:  12px;
}
.section-anmfree {
  width: 1041px;
  margin: 60px auto 0;
  background: #fff;
  padding: 50px 73px;
}
.section-anmfree .recipe-head-ttl {
  background: #378E41;
}
.section-anmfree-flex {
  border-radius: 16px;
  border: solid 3px #378E41;
  padding: 29px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 60px;
}
.section-anmfree-txts {
  width: 50%;
}
.section-anmfree-ttl {
  color: #378E41;
  font-size: 26px;
}
.section-anmfree-txt {
  font-size: 16px;
  line-height: 1.8;
}
.section-anmfree-imgs {
  width: 46%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section-anmfree-img img {
  width: 105px;
  margin-right: 10px;
}
.section-anmfree-img-right img {
  width: 213px;
  height: auto;
  margin-bottom: 10px;
}
.section-anmfree-txt-attn {
  text-indent: -1em;
  padding-left: 1em;
  color: #E4002B;
  line-height: 1.5;
  margin-top: 0.5em;
}

.pb-1 { padding-bottom: 1.5em; }

#foot_text {
  width: 1040px;
  margin: 0 auto;
  font-size: 13px;
  color: #333;
  text-align: right;
}

/*=============================================================

* SP

=============================================================*/

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

  .article {
    font-size: 3.73333vw;
  }
  .header {
    height: 106.6666667vw;
    background: url("/prouse/cat_assets/img/recommend/sauce_soup/mv_bg_sp.png") no-repeat top center / cover;
    padding: 1.333333333vw 0;
  }
  .header-inner {
    border-top: solid 0.8vw #744E07;
    border-bottom: solid 0.8vw #744E07;
  }
  .header-ttl {
    width: 72vw;
    height: 57.33333333vw;
    margin-top: 11vw;
  }
  .header-ttl-item1 {
    font-size: 4vw;
  }
  .header-ttl-item2 {
    font-size: 5.333333333vw;
  }
  .header-ttl-item3 {
    font-size: 9.6vw;
    margin-top: -2.133333333vw;
    margin-bottom: 1.333333333vw;
  }
  .header-ttl-item4 {
    width: 42.93333333vw;
    padding: 1.6vw;
    border-radius: 8.8vw;
    font-size: 2.933333333vw;
    margin-top: -1.066666667vw;
  }
  .header-txt  {
    font-size: 3.2vw;
    margin-top: 7.333333333vw;
    margin-right: 10vw;
  }

  /*--------------------------*/

  .intro {
    padding: 6.4vw 4vw 18.93333333vw;
  }
  .intro-ttl {
    background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_sp.svg") no-repeat center bottom / 100% auto;
    font-size: 4.533333333vw;
    padding-bottom: 3.066666667vw;
  }
  .intro-ttl span {
    font-size: 9.866666667vw;
  }
  .intro-ttl-sub {
    font-size: 7.466666667vw;
    margin: 5.866666667vw 0 4vw;
    line-height: 1.5;
  }
  .intro-txt {
    font-size: 4.8vw;
    line-height: 1.8;
  }
  .intro-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 80vw;
    margin: 2.8vw auto 0;
  }
  li[class^="intro-nav-item-"] {
    width: 100%;
  }
  li[class^="intro-nav-item-"]:hover {
    opacity: 1;
  }
  .intro-nav-item-ttl {
    border-radius: 2.933333333vw;
    border-bottom: solid 0.8vw #744E07;
    height: 18.66666667vw;
    margin-top: 23.33333333vw;
    font-size: 6.133333333vw;
  }
  .intro-nav-item-ttl::after {
    width: 2.133333333vw;
    height: 2.133333333vw;
    border-top: solid 0.533333333vw #744E07;
    border-right: solid 0.533333333vw #744E07;
    margin: -1.066666667vw auto 0;
  }
  li[class^="intro-nav-item-"]:hover .intro-nav-item-ttl::after {
    top: 80%;
  }
  .intro-nav-item-img {
    width: 100%;
    top: -17.8vw;
  }
  .intro-nav-item-img img {
    height: 16.33333333vw;
    margin: 0 0.8vw;
  }

  /* section */

  .section01 { border-top: solid 0.8 #744E07; }
  .section {
    border-bottom: solid 0.8 #744E07;
    padding: 37.86666667vw 0 21.33333333vw;
    background-image: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_01.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_02.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_03.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_01.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_02.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_03.png"), url("/prouse/cat_assets/img/recommend/sauce_soup/bg_soup_01.png");
    background-position: left -10% top 4vw, right -10% top 130vw, left -10% top 300vw, right -10% top 500vw, left -10% top 800vw, right -10% top 1000vw, left -10% top 1200vw;	
    background-size: 60% auto, 60% auto, 70% auto, 60% auto, 60% auto, 70% auto, 60% auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .section-head {
    width: 89.86666667vw;
    border-radius: 4.266666667vw;
    margin: 0 auto 11.46666667vw;
    padding: 10.93333333vw 0;
  }
  .section-head-ttl {
    font-size: 7.466666667vw;
    padding: 0 0 5vw;
    top: -26.86666667vw;
    left: -2vw;
    margin: 0 auto;
    width: 94.66666667vw;
    position: absolute;
  }
  .section01 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_01_sp.svg") no-repeat center top / 100% auto; }
  .section02 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_02_sp.svg") no-repeat center top / 100% auto; }
  .section03 .section-head-ttl { background: url("/prouse/cat_assets/img/recommend/sauce_soup/bg_h2_03_sp.svg") no-repeat center top / 100% auto; }
  .section-head-img {
    margin-bottom: 6.666666667vw;
  }
  .section-head-img img {
    width: auto;
    height: 25.33333333vw;
    margin: 0.8vw;
  }
  .section-head-txt {
    font-size: 5.333333333vw;
  }
  .section-products {
    margin: 21.33333333vw auto 0;
    width: 89.86666667vw; 
    padding: 10.46666667vw 5.333333333vw 16vw;
  }
  .section-products-ttl {
    width: 89.86666667vw;
    font-size: 5.866666667vw;
    padding: 3vw 0;
    top: -7.466666667vw;
    border-radius: 13.33333333vw;
  }
  .section-products-point {
    padding: 7.466666667vw 4.8vw;
  }
  .section-products-point-list {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .section-products-point-item {
    width: 100%;
  }
  .section-products-point-item + .section-products-point-item {
    margin-top: 4vw;
  }
  .section-products-point-item-list {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .section-products-point-item-num {
    width: 20.53333333vw;
    height: 20.53333333vw;
    font-size: 4vw;
    padding: 4.266666667vw 0 0;
    margin-right: 2.4vw;
  }
  .section-products-point-item-num span {
    font-size: 6.133333333vw;
  }
  .section-products-point-item-txts {
    width: 65%;
  }
  .section-products-point-item-txts-ttl {
    font-size: 6.133333333vw;
    font-weight: bold;
    margin-bottom: 1.866666667vw;
    line-height: 1.4;
  }
  .section-products-point-item-txts-txt {
    font-size: 4.266666667vw;
    line-height: 1.7;
  }
  .section-products-product-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-products-product-item {
    width: 100%;
    margin-top: 14.13333333vw;
  }
  .section-products-product-img {
    margin-bottom: 2.666666667vw;
  }
  .section-products-product-img img:first-child {
    width: auto;
    height: 41.33333333vw;
    margin-right: 0;
  }
  .section-products-product-img img:nth-child(2) {
    width: 36.26666667vw;
  }
  .anmfree-icon {
    font-size: 3.2vw;
    border-radius: 1.066666667vw;
    right: 2vw;
    bottom: 1.666666667vw;
    padding: 1.066666667vw;
  }
  .section-products-product-ttl {
    font-size: 5.066666667vw;
    margin-bottom: 5.333333333vw;
  }
  .section-products-product-txt-01 {
    font-size: 4.8vw;
    margin-bottom: 4.8vw;
  }
  .section-products-product-txt-02 {
    font-size: 3.733333333vw;
    margin-bottom: 4.733333333vw;
  }
  .section-products-product-btn a,
  .section-products-product-btns a {
    padding: 1.6vw;
    border-radius: 2.666666667vw;
  }
  .section-products-product-btn a::after,
  .section-products-product-btns a::after {
    width: 2.133333333vw;
    height: 2.133333333vw;
    right:  2.133333333vw;
  }
  .section-products-product-btn a:hover,
  .section-products-product-btns a:hover {
    background: #fff;
    color: #744E07;
  }
  .section-products-product-btn a:hover::after,
  .section-products-product-btns a:hover::after {
    border-top: solid 1px #744E07;
    border-right: solid 1px #744E07;
    right:  2.133333333vw;
  }
  .section-recipe {
    width: 89.86666667vw;
    margin: 18.13333333vw auto 0;
    background: #fff;
    padding: 0 4vw 12.8vw;
  }
  .recipe {
    padding-top: 18.13333333vw;
  }
  .recipe-head-ttl {
    width: 71.73333333vw;
    font-size: 6.666666667vw;
    padding: 3vw 0;
    text-align: center;
    position: absolute;
    top: -3.2vw;
    border-radius: 21.33333333vw;
    line-height: 1.3;
  }
  .recipe-head-txt {
    font-size: 5.333333333vw;
  }
  .recipe-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .recipe-item {
    width: 100%;
    margin: 8vw 0 0;
  }
  .recipe-img img:last-child {
    right: 1.733333333vw;
    bottom: -4.266666667vw;
    height: 24.26666667vw;
  }
  .recipe-ttl {
    font-size: 5.066666667vw;
    display: block;
    height: auto;
    padding: 5.333333333vw 0;
    text-align: center;
  }
  .recipe-txt {
    font-size: 4vw;
    padding: 0 6.666666667vw;
    height: auto;
    margin-bottom: 1em;
  }
  .recipe-btn {
    padding: 1.6vw;
    border-radius: 2.666666667vw;
    margin: 0 auto 5.333333333vw;
  }
  .recipe-btn::after {
    width: 2.133333333vw;
    height: 2.133333333vw;
    right:  2.133333333vw;
  }
  .recipe-item:hover .recipe-btn {
    background: #fff;
    color: #744E07;
  }
  .recipe-item:hover .recipe-btn::after {
    border-top: solid 1px #744E07;
    border-right: solid 1px #744E07;
    right:  2.133333333vw;
  }
  .section-anmfree {
    width: 89.86666667vw;
    margin: 18.13333333vw auto 0;
    padding: 8.266666667vw 4vw;
  }
  .section-anmfree-flex {
    border-radius: 4.266666667vw;
    border: solid 0.8vw #378E41;
    padding: 5.333333333vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 12.53333333vw;
  }
  .section-anmfree-txts {
    width: 100%;
  }
  .section-anmfree-ttl {
    font-size: 6.933333333vw;
    line-height: 1.5;
    text-align: center;
  }
  .section-anmfree-txt {
    font-size: 4.266666667vw;
    margin: 4vw 2vw;
  }
  .section-anmfree-imgs {
    width: 100%;
  }
  .section-anmfree-img img {
    width: 17.33333333vw;
    margin-right: 2.666666667vw;
  }
  .section-anmfree-img-right img {
    width: 45.33333333vw;
    margin-bottom: 2.666666667vw;
  }

  .pb-1 { padding-bottom: 0; }
  
  #head_text {
    width: 100%;
    text-align: center;
    font-size: 2.93333vw;
  }
  #foot_text {
    width: 100%;
    text-align: center;
    font-size: 2.93333vw;
  }

}