@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

/*! ==================================================
 * Noto Sans Japanese (japanese) is lisenced under the SIL Open Font License 1.1
 * by http://www.google.com/fonts/earlyaccess
=================================================== */
@font-face {
  font-family: 'BaseFont-JP';
  src: url("/assets/fonts/Basefont-Demilight.woff") format("woff");
  font-style: normal;
  font-weight: normal; }

@font-face {
  font-family: 'BaseFont-JP';
  font-style: normal;
  font-weight: bold;
  src: url("/assets/fonts/Basefont-Medium.woff") format("woff"); }

@font-face {
  font-family: 'BaseFont-JP--strong';
  font-style: normal;
  font-weight: normal;
  src: url("/assets/fonts/Basefont-Medium.woff") format("woff"); }

/*
 * "Roboto" is lisenced under the Apache License, version 2.0
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://www.apache.org/licenses/LICENSE-2.0.html
 */
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  src: url(//fonts.gstatic.com/s/roboto/v16/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format("woff2"); }

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: bold;
  src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2"); }

/* latin */
@font-face {
  font-family: 'Roboto--strong';
  font-style: normal;
  font-weight: normal;
  src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2"); }

/*! ==================================================
*  Web Fonts Title: Yaku Han JP
*  Version: 1.3.1
*  GitHub URL: https://github.com/qrac/yakuhanjp
*  Author: Qrac
*  Author URL: https://twitter.com/Qrac_jp
*  "Noto Sans CJK JP" licensed under the SIL Open Font License
*  https://www.google.com/get/noto/#/
=================================================== */
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/YakuHanJP-Demilight.woff") format("woff"); }

@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/YakuHanJP-Medium.woff") format("woff"); }

@font-face {
  font-family: "YakuHanJP--strong";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/YakuHanJP-Medium.woff") format("woff"); }


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

* PC & all

=============================================================*/
.article {
  font-family: 'BaseFont-JP';
  font-size: 15px;
}
.section-inner {
  width: 1040px;
  margin: 0 auto;
  padding: 0;
}
.header-content {
  position:relative;
  width:100%;
  min-width:1040px;
  background: url("/prouse/cat_assets/img/recommend/oroshi_yasai_dre/header_bg.png") no-repeat top center / 100% auto;
  text-align: center;
  padding: 40px 0;
}
.header-content > div {
  position: relative;
  width: 1040px;
  margin: 0 auto;
}
.header-content > div > div:last-child {
  z-index: 2;
  position: relative;
}
.header-content-text01 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-indent: 0.5em;
}
.header-content h1 img {
  width: 554px;
  height: auto;
  margin-bottom: 18px;
}
.header-content figure img {
  width: 420px;
  height: auto;
  margin-bottom: 20px;
}
.header-content-text02 {
  line-height: 1.7;
  font-size: 19px;
  font-weight: bold;
  color          : #000;
  letter-spacing : 2px;
  text-shadow    : 
    #fff 2px 0px,  #fff -2px 0px,
    #fff 0px -2px, #fff 0px 2px,
    #fff 2px 2px , #fff -2px 2px,
    #fff 2px -2px, #fff -2px -2px,
    #fff 1px 2px,  #fff -1px 2px,
    #fff 1px -2px, #fff -1px -2px,
    #fff 2px 1px,  #fff -2px 1px,
    #fff 2px -1px, #fff -2px -1px;
}
.p-imgs {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  z-index: 1;
}
.p-imgs img {
  width: auto;
  height: 453px;
  padding-right: 50px;
}
.p-imgs div {
  width: 100%;
  padding: 10px 0 0 30px;
  background: url("/prouse/cat_assets/img/recommend/oroshi_yasai_dre/header_illust_01.png") no-repeat left bottom / 306px auto;
  text-align: right;
}
.product {
  width: 1040px;
  margin: 0 auto;
  padding: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.product .product-img {
  width: 169px;
  height: 464px;
  position: relative;
}
.product .product-img figure {
  position: absolute;
  top: 0;
  right: 0;
  height: 464px;
  width: 282px;
}
.product .product-img figure img {
  width: 100%;
  height: auto;
}
.product-name {
  width: 346px;
}
.product-name-text01 {
  font-size: 21px;
  margin-bottom: 14px;
  letter-spacing: 0;
}
.product-name-text02 {
  font-size: 18px;
  margin-top: 14px;
  line-height: 1.6;
}
.product-point {
  width: 343px;
  padding: 36px 25px;
  position: relative;
}
.product-point::before {
  content: "";
  position: absolute;
  width: 97%;
  height: 97%;
  border-radius: 20px 16px 16px 16px;
  top: 0;
  left: 0;
  border: solid 2px #FFCA91;
}
.product-point::after {
  content: "";
  position: absolute;
  width: 97%;
  height: 97%;
  border-radius: 16px 16px 20px 16px;
  right: 0;
  bottom: 0;
  border: solid 2px #FFCA91;
}
.product-point ul li {
  position: relative;
  padding-left: 0.8em;
  font-size: 24px;
  margin-bottom: 26px;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
  line-height: 1.5;
}
.product-point ul li:last-child {
  margin-bottom: 0;
}
.product-point ul li::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #D65314;
  position: absolute;
  top: 18px;
  left: 0;
}
.ginger_lemon_dre .product-point::before,
.ginger_lemon_dre .product-point::after {
  border: solid 2px #E2D892;
}
.ginger_lemon_dre .product-point {
  padding: 9px 7px;
}
.ginger_lemon_dre .product-point ul {
  background: #fff;
  border-radius: 16px;
  padding: 27px 21px;
  letter-spacing: 0;
}
.ginger_lemon_dre .product-point ul li::before {
  background: #E5AD00;
}
.recipe {
  padding-bottom: 76px;
}
.recipe ul {
  width: 1040px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  flex-wrap: wrap;
  gap: 24px 0;
}
.recipe ul li {
  width: 50%;
}
.recipe ul li img {
  width: 100%;
  height: 286px;
}
.recipe h3 {
  font-size: 21px;
  margin-top: 17px;
}
.recipe span {
  font-size: 17px;
  padding: 10px 20px;
  border-bottom: solid 1px #CEA35F;
}
.recipe a{
  display: block;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.recipe a:hover {
  color: #333;
  opacity: 0.6;
}
.ginger_lemon_dre {
  background: #F8F8F2;
}
.movie {
  background: #f4eddf;
  text-align: center;
  padding: 75px 0 70px;
}
.movie-content {
  width: 725px;
  height: 408px;
  position: relative;
  text-align: left;
}
.movie-content-wrap {
  background: #fff;
  padding: 16px;
  margin: 26px auto 0;
  width: 757px;
}
.movie h2 {
  font-size: 31px;
  color: #714b22;
  font-family: 'Noto Serif JP', serif;
}

.product-name-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 50px;
  border-radius: 8px;
  background: #D65314;
  font-size: 20px;
  margin-top: 32px;
  color: #fff;
  transition: opacity 0.3s;
}
.product-name-btn:hover {
  opacity: 0.7;
  color: #fff;
}
.product-name-btn:link,
.product-name-btn:visited {
  color: #fff;
}
.banner {
  width: 800px;
  margin: 24px auto 64px;
}
.banner-link {
  display: block;
  transition: opacity 0.3s;
}
.banner-link:hover {
  opacity: 0.7;
}
.banner-img {
  width: 100%;
  height: auto;
}

#foot_text {
  max-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;
  letter-spacing:0;
  }
  .header-content {
    min-width:100%;
    background: url("/prouse/cat_assets/img/recommend/oroshi_yasai_dre/header_bg.png") no-repeat top center / auto 100%;
    padding: 4.817708333vw 0 6vw;
  }
  .header-content > div {
    width: 100%;
  }
  .header-content > div > div:last-child {
    z-index: 2;
    position: relative;
  }
  .header-content-text01 {
    font-size: 3.645833333vw;
    margin-bottom: 4.036458333vw;
    line-height: 1.7;
    text-indent: 0;
  }
  .header-content h1 img {
    width: 52.34375vw;
    margin-bottom: 26.90625vw;
  }
  .header-content figure img {
    width: 92.96875vw;
    margin-bottom: 5.46875vw;
  }
  .header-content-text02 {
    font-size: 4.166666667vw;
    font-weight: 600;
    color          : #000;
    letter-spacing : 0.260416667vw;
    text-shadow    : 
        #fff 1px 1px 0, #fff -1px -1px 0,
        #fff -1px 1px 0, #fff 1px -1px 0,
        #fff 0px 1px 0, #fff  0-1px 0,
        #fff -1px 0 0, #fff 1px 0 0;
  }
  .p-imgs {
    position: absolute;
    top: 2vw;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    z-index: 1;
  }
  .p-imgs img {
    width: auto;
    height: 59.11458333vw;
    margin-right: 0;
    padding-right: 3vw;
  }
  .p-imgs div:first-child {
    width: 100%;
    padding: 0 0 0 5.208333333vw;
    background: url("/prouse/cat_assets/img/recommend/oroshi_yasai_dre/header_illust_01.png") no-repeat left bottom / 30.59895833vw auto;
    text-align: right;
  }
  .product {
    width: 100%;
    margin: 0 auto;
    padding: 7.552083333vw 0 9.552083333vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .product .product-img {
    width: 31.51041667vw;
    height: auto;
    position: relative;
  }
  .product .product-img figure {
    position: relative;
    width: 100%;
    height: auto;
  }
  .product .product-img figure img {
    width: 100%;
    height: auto;
  }
  .product-name {
    width: 55.98958333vw;
    position: relative;
    margin-right: 8.463541667vw;
  }
  .product-name img {
    width: 100%;
    height: auto;
  }
  .product-name-text01 {
    font-size: 4.557291667vw;
    margin-bottom: 2.34375vw;
    line-height: 1.5;
  }
  .product-name-text02 {
    font-size: 3.90625vw;
    margin-top: 0;
    position: absolute;
    width: 100vw;
    bottom: -18vw;
    right: -8.463541667vw;
    text-align: center;
  }
  .product-point {
    width: 87.890625vw;
    margin: 35.10416667vw auto 0;
    padding: 6.901041667vw;
  }
  .product-point::before,
  .product-point::after {
    height: 96%;
  }
  .product-point ul li {
    padding-left: 1em;
    font-size: 4.557291667vw;
    margin-bottom: 8.854166667vw;
  }
  .product-point ul li::before {
    content: "";
    display: block;
    width: 2.083333333vw;
    height: 2.083333333vw;
    border-radius: 1vw;
    background: #D65314;
    top: 2.734375vw;
    left: 0;
  }
  .ginger_lemon_dre .product-point {
    padding: 2.302083333vw 1.302083333vw;
  }
  .ginger_lemon_dre .product-point ul {
    background: #fff;
    border-radius: 16px;
    padding: 6.114583333vw;
    letter-spacing: 0;
  }
  .recipe {
    padding-bottom: 16.27604167vw;
  }
  .recipe ul {
    width: 87.890625vw;
    margin: 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .recipe ul li {
    width: 100%;
  }
  .recipe ul li img {
    height: auto;
  }
  .recipe ul li:first-child {
    margin-bottom: 7.46875vw;
  }
  .recipe h3 {
    font-size: 4.296875vw;
    margin-top: 2.34375vw;
  }
  .recipe span {
    font-size: 3.515625vw;
    padding: 2.34375vw 5.46875vw;
    border-width: 0.570416667vw;
  }
  .recipe a:hover {
    opacity: 1;
  }
  .movie {
    background: #f4eddf;
    text-align: center;
    padding: 10vw 0 14.666666666666667vw;
  }
  .movie-content {
    width: 86vw;
    height: 48.3vw;
  }
  .movie-content-wrap {
    background: #fff;
    padding: 2.266666666666667vw;
    margin: 4.6vw auto 0;
    width: 90.533333333333334vw;
  }
  .movie h2 {
    font-size: 8.266666666666667vw;
  }
  
  .product-name-btn {
    position: absolute;
    left:-20vw;
    bottom: -31vw;
    width: 70vw;
    height: 10vw;
    border-radius: 2vw;
    font-size: 4vw;
  }
  .banner {
    width: 94%;
    margin: 0 auto 10vw;
  }
  .banner-link:hover {
    opacity: 1;
  }

  #foot_text {
    width: 100%;
    text-align: center;
    font-size: 2.93333vw;
  }

}