/*
 * Recommended recipes section
 *
 * Extracted and organized from the production styles used by:
 * https://www.kikkoman.co.jp/kikkoman/tokumarugenen/
 *
 * Main sources:
 * - /common-kikkoman/css/site-layout.min.css?v=20221027
 * - /common-kikkoman/css/style.min-split-01.css?v=20221027
 * - /common-kikkoman/css/style.min-split-02.css?v=20221027
 * - /common-kikkoman/css/style.min-split-02_adjustment.css
 */

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

.syouyu_contents_wrapper *,
.syouyu_contents_wrapper *::before,
.syouyu_contents_wrapper *::after {
  box-sizing: border-box;
}

.syouyu_contents_wrapper h2,
.syouyu_contents_wrapper h3,
.syouyu_contents_wrapper dl,
.syouyu_contents_wrapper dt,
.syouyu_contents_wrapper dd,
.syouyu_contents_wrapper ul,
.syouyu_contents_wrapper li {
  margin: 0;
  padding: 0;
}

.syouyu_contents_wrapper ul,
.syouyu_contents_wrapper li {
  list-style: none;
}

.syouyu_contents_wrapper img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: middle;
  user-select: none;
}

.syouyu_contents_wrapper a {
  position: relative;
  color: #a10000;
  text-decoration: none;
  outline: 0;
}

.syouyu_contents_wrapper a:hover {
  color: #a10000;
  text-decoration: underline;
}

.syouyu_contents_wrapper a:visited {
  color: #751111;
}

.syouyu_contents_wrapper a:focus {
  outline: 1px solid #f08300 !important;
}

/* Heading */
.elem-heading-lv2 {
  margin: 2.857em auto 1.429em;
  break-inside: avoid;
}

.elem-heading-lv2 > div > div > div > div {
  padding-bottom: 0.714em;
  border-bottom: 2px solid #f08300;
}

.elem-heading-lv2 .heading-container .title-holder h2,
.elem-heading-lv2 .heading-container .title-holder span {
  position: relative;
  margin: 0;
  padding-left: 15px;
  font-family: "Noto Sans Japanese", Meiryo, Osaka, "MS PGothic", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.elem-heading-lv2 .heading-container .title-holder h2 > span,
.elem-heading-lv2 .heading-container .title-holder span > span {
  display: inline-block;
}

.elem-heading-lv2 .heading-container .title-holder h2 > span::before,
.elem-heading-lv2 .heading-container .title-holder span > span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 5px;
  height: 100%;
  content: "";
  border-radius: 3px;
  background: linear-gradient(#f08300 50%, #d1561b 50%) #f08300;
}

/* Four-column recipe layout */
.divide-layout {
  margin: 0 auto 1.429em;
  break-inside: avoid;
}

.divide-layout > div > div > div > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -1.429%;
}

.divide-layout > div > div > div > div::after {
  display: block;
  clear: both;
  content: " ";
}

.divide-layout > div > div > div > div .item--divide {
  display: flex;
  float: none;
  margin: 0 1.389%;
}

.divide-layout[data-column="4"] > div > div > div > div > .item--divide {
  width: 22.222%;
}

.divide-layout[data-column="4"] > div > div > div > div > .item--divide:nth-child(4n + 1) {
  clear: both;
}

.divide-layout > div > div > div > div .item--divide > div.style-color1 {
  width: 100%;
  overflow: hidden;
  padding: 5%;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 9px -3px rgb(0 0 0 / 23%);
  font-family: "Avenir Next", Verdana, メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴシック, "Yu Gothic", Osaka, sans-serif;
  font-size: 16px;
  line-height: 1.357;
}

/* Recipe card */
.elem-pic-block {
  margin: 0 auto 20px;
  break-inside: avoid;
}

.item--recipe .style-color1 > .elem-pic-block:last-child {
  margin-bottom: 0;
}

.elem-pic-block[data-direction="vertical"] .pic-container + .txt-container,
.elem-pic-block[data-direction="vertical"] .pic-container--parent + .txt-container {
  margin-top: 1.071em;
}

.elem-pic-block .pic-container {
  flex-shrink: 0;
}

.elem-pic-block .txt-container {
  flex-grow: 1;
}

.elem-pic-block a:hover {
  text-decoration: none;
}

.elem-pic--title-juntos.reversed > div > div > div > div {
  display: flex;
  flex-direction: column-reverse;
}

.elem-pic--title-juntos.reversed > div > div > div > div > div {
  flex: 0 0 auto;
}

.elem-pic--title-juntos.reversed
  .elem-pic--title-juntos__txt-container
  + .elem-pic--title-juntos__pic-container {
  margin-bottom: 1.071em;
}

.elem-pic--title-juntos h3 a {
  display: block;
}

.elem-pic--title-juntos__pic-container img {
  backface-visibility: hidden;
}

.elem-pic--title-juntos__txt-container span,
.elem-pic--title-juntos__txt-container a {
  font-size: 18px;
  font-weight: 700;
}

.elem-pic-block .style-color1 .txt-container > div [class^="txt-"] + [class^="txt-"],
.style-color1 .elem-pic-block .txt-container > div [class^="txt-"] + [class^="txt-"] {
  margin-top: 0.714em;
}

/* Time, calories and salt */
.item--recipe .elem-pic-block .txt-container .txt-body {
  width: 100%;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl {
  display: inline-block;
  vertical-align: top;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl::after {
  display: block;
  clear: both;
  content: " ";
}

.item--recipe .elem-pic-block .txt-container .txt-body dl + dl {
  padding-left: 4px;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl dt,
.item--recipe .elem-pic-block .txt-container .txt-body dl dd {
  float: left;
  margin: 0;
  font-size: 12px;
}

.material-icons {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-family: "Material Icons";
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

.item--recipe .elem-pic-block .txt-container .txt-body dl .material-icons {
  position: relative;
  top: -1px;
  margin-right: 0.286em;
  font-size: 16px;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl:nth-child(1) .material-icons {
  color: #5a9014;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl:nth-child(2) .material-icons {
  color: #cf7797;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl .material-icons.icon--salt {
  width: 13px;
  height: 13px;
  line-height: 11px;
}

.item--recipe .elem-pic-block .txt-container .txt-body dl .material-icons.icon--salt::before {
  content: url("https://www.kikkoman.co.jp/common-kikkoman/img/img-common/icons/salt.svg");
}

/* Recipe tags */
.elem-tags-list {
  margin: 0;
}

.item--recipe .elem-tags-list > [role="list"] {
  margin: 0;
}

.elem-tags-list > [role="list"] > [role="listitem"] {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  vertical-align: top;
}

.elem-tags-list > [role="list"] > [role="listitem"] > a,
.elem-tags-list > [role="list"] > [role="listitem"] > span {
  position: relative;
  z-index: 1;
  display: block;
  color: #f08300;
  text-decoration: none;
  border: 1px solid #f08300;
  border-radius: 2px;
}

.elem-tags-list > [role="list"] > [role="listitem"] > a::before,
.elem-tags-list > [role="list"] > [role="listitem"] > span::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 2px;
  content: "";
  transform: translateY(-50%);
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBmaWxsPSIjZjA4MzAwIiBkPSJNMjEuNDEgMTEuNThsLTktOUMxMi4wNSAyLjIyIDExLjU1IDIgMTEgMkg0Yy0xLjEgMC0yIC45LTIgMnY3YzAgLjU1LjIyIDEuMDUuNTkgMS40Mmw5IDljLjM2LjM2Ljg2LjU4IDEuNDEuNTguNTUgMCAxLjA1LS4yMiAxLjQxLS41OWw3LTdjLjM3LS4zNi41OS0uODYuNTktMS40MSAwLS41NS0uMjMtMS4wNi0uNTktMS40MnpNNS41IDdDNC42NyA3IDQgNi4zMyA0IDUuNVM0LjY3IDQgNS41IDQgNyA0LjY3IDcgNS41IDYuMzMgNyA1LjUgN3oiLz48L3N2Zz4=") 50% 50% / cover no-repeat;
}

.elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a,
.elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span {
  color: #008c3e;
  border-color: #008c3e;
}

.elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a::before,
.elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span::before {
  margin-top: -1px;
  background: url("https://www.kikkoman.co.jp/common-kikkoman/img/img-common/icons/health.svg") 50% 50% no-repeat;
}

/* CTA button */
.elem-txt-list--btn {
  margin: 3.571em auto;
  break-inside: avoid;
}

.elem-txt-list--btn .txt-list--btn[data-direction="vertical"] .elem-btn > div {
  margin-left: 0;
}

.elem-txt-list--btn .txt-list--btn[data-direction="vertical"][data-align="center"] .elem-btn > div {
  margin-right: auto;
  margin-left: auto;
}

.elem-btn {
  margin: 1.429em auto;
}

.elem-btn > div {
  max-width: 280px;
  margin: 0 auto;
}

.elem-btn > div > div {
  transition: 0.15s;
  border-radius: 5px;
}

.elem-btn[data-btn-color="1"] > div > div {
  background-color: #f08300;
}

.elem-btn[data-btn-color="1"] > div > div:hover {
  background-color: #ffa02e;
}

.elem-btn a {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.929em 1em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

.elem-btn a:visited,
.elem-btn a:hover {
  color: #fff;
}

.elem-btn a span {
  font-size: 0.929em;
  font-weight: 700;
}

.elem-btn a span.ripple-ring {
  position: absolute;
  z-index: 1;
  width: 288px;
  height: 288px;
  pointer-events: none;
  opacity: 0;
  border-radius: 100%;
  background: #ffce94;
  transform: scale(0);
}

@media (min-width: 801px) {
  .elem-tags-list > [role="list"] {
    margin-top: 1.6rem;
    margin-bottom: 0;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] {
    margin-right: 0.1rem;
    margin-bottom: 0.3rem;
    font-size: 12px;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] > a,
  .elem-tags-list > [role="list"] > [role="listitem"] > span {
    padding: 0.3rem 0.6rem 0.3rem 1.7rem;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] > a::before,
  .elem-tags-list > [role="list"] > [role="listitem"] > span::before {
    width: 14px;
    height: 14px;
  }

  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a,
  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span {
    padding-left: 1.9rem;
  }

  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a::before,
  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span::before {
    width: 14px;
    height: 14px;
    background-size: 14px;
  }
}

@media (max-width: 1200px) and (min-width: 801px) {
  .item--recipe .elem-pic-block .txt-container .txt-body dl dt,
  .item--recipe .elem-pic-block .txt-container .txt-body dl dd {
    font-size: 11px;
  }
}

@media (max-width: 800px) {
  .divide-layout {
    margin-bottom: 2.762%;
  }

  .divide-layout[data-column="4"] > div > div > div > div > .item--divide {
    width: 30.556%;
  }

  .divide-layout[data-column="4"] > div > div > div > div > .item--divide:nth-child(4n + 1) {
    clear: none;
  }

  .divide-layout[data-column="4"] > div > div > div > div > .item--divide:nth-child(3n + 1) {
    clear: both;
  }

  .elem-tags-list > [role="list"] {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] {
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    font-size: 11px;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] > a,
  .elem-tags-list > [role="list"] > [role="listitem"] > span {
    padding: 0.4rem 0.6rem 0.3rem 1.4rem;
  }

  .elem-tags-list > [role="list"] > [role="listitem"] > a::before,
  .elem-tags-list > [role="list"] > [role="listitem"] > span::before {
    width: 11px;
    height: 11px;
  }

  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a,
  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span {
    padding-left: 1.6rem;
  }

  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > a::before,
  .elem-tags-list > [role="list"] > [role="listitem"][data-category="health"] > span::before {
    width: 11px;
    height: 11px;
    background-size: 11px;
  }
}

@media (max-width: 640px) {
  .item--recipe .elem-pic-block .txt-container .txt-body dl dt,
  .item--recipe .elem-pic-block .txt-container .txt-body dl dd {
    font-size: 0.857em;
  }
}

@media (max-width: 568px) {
  .divide-layout {
    margin-bottom: 3.831%;
  }

  .divide-layout > div > div > div > div {
    margin: 0 !important;
  }

  .divide-layout > div > div > div > div .item--divide {
    display: inline-block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .divide-layout > div > div > div > div .item--divide:not(:first-child) {
    margin-top: 1.071em !important;
  }

  .divide-layout > div > div > div > div .item--divide > div.style-color1 {
    padding: 3.125%;
  }

  .elem-heading-lv2 {
    margin: 6.25% auto 3.125%;
  }

  .elem-heading-lv2 .heading-container .title-holder h2,
  .elem-heading-lv2 .heading-container .title-holder span {
    font-size: 1.286em;
  }

  .elem-pic--title-juntos__txt-container {
    height: auto !important;
  }

  .elem-btn a {
    padding: 0.929em 0.357em;
    font-size: 0.857em;
  }
}


/* Product information and related products */

/*
 * Product information and related products
 * Adapted from the production site-layout and split stylesheets.
 */

/* Centered section headings */
.elem-heading-lv2[data-align="center"] > div > div > div > div {
  display: table;
  width: 100%;
  padding-bottom: 0;
  border-bottom: 0;
}

.elem-heading-lv2[data-align="center"] .heading-container {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}

.elem-heading-lv2[data-align="center"] .heading-container::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  content: "";
  border-top: 4px solid #f08300;
}

.elem-heading-lv2[data-align="center"] .heading-container .title-holder {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 1.143em;
  vertical-align: middle;
  background-color: #fff;
}

.elem-heading-lv2[data-align="center"] .heading-container .title-holder h2,
.elem-heading-lv2[data-align="center"] .heading-container .title-holder h2 > span {
  padding-left: 0;
}

.elem-heading-lv2[data-align="center"] .heading-container .title-holder h2 > span::before {
  content: none;
}

/* Main product information */
.elem-pic-block[data-direction="horizontal"] > div > div > div > div {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.elem-pic-block[data-direction="horizontal"] .pic-container {
  flex: 0 0 auto;
  padding-right: 3.802%;
}

.elem-pic-block[data-direction="horizontal"] .pic-container img[data-img-fix-width="130"] {
  width: 130px;
  max-width: 130px;
}

.elem-pic-block[data-direction="horizontal"] .txt-container {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.elem-pic-block[data-direction="horizontal"] .txt-container > div [class^="txt-"] + [class^="txt-"] {
  margin-top: 1.071em;
}

.elem-pic-block[data-direction="horizontal"] .txt-container > div [class^="txt-"] > div:first-child {
  margin-top: 0;
}

.elem-pic-block[data-direction="horizontal"] .txt-container > div [class^="txt-"] > div:last-child {
  margin-bottom: 0;
}

.elem-pic-block[data-direction="horizontal"] .elem-paragraph p {
  margin: 0;
  line-height: 1.643;
}

.elem-pic-block[data-direction="horizontal"] .txt-foot {
  display: block;
  min-height: 0;
  margin-top: 1.071em !important;
}

.elem-pic-block[data-direction="horizontal"] .txt-foot .elem-btn {
  width: 100%;
  max-width: none;
  margin: 0;
}

.elem-pic-block[data-direction="horizontal"] .txt-foot .txt-list--btn[data-direction="horizontal"][data-btn-column="auto"] {
  margin: -1.119% -1.119% auto;
  letter-spacing: -0.4em;
}

.elem-pic-block[data-direction="horizontal"] .txt-foot .txt-list--btn[data-direction="horizontal"][data-btn-column="auto"] > li {
  display: inline-block;
  width: 22.761%;
  margin: 1.119%;
  vertical-align: middle;
  letter-spacing: normal;
}

.elem-pic-block[data-direction="horizontal"] .txt-foot .txt-list--btn[data-direction="horizontal"] .elem-btn > div {
  max-width: 280px;
  margin-left: 0;
}

.elem-btn[data-btn-color="2"] > div > div {
  background-color: #5a3a3a;
}

.elem-btn[data-btn-color="2"] > div > div:hover {
  background-color: #8c5a5a;
}

.elem-btn[data-btn-color="2"] a,
.elem-btn[data-btn-color="2"] a:link,
.elem-btn[data-btn-color="2"] a:visited,
.elem-btn[data-btn-color="2"] a:hover,
.elem-btn[data-btn-color="2"] a:active {
  color: #fff;
}

.elem-btn a span.ripple-ring[data-ripple-color="2"] {
  background: #e0e0e0;
}

.elem-heading-lv3 {
  margin: 1.429em auto 1.071em;
}

.elem-heading-lv3:first-child {
  margin-top: 0;
}

.elem-heading-lv3:last-child {
  margin-bottom: 0;
}

/* Related products: six columns on wide screens */
.divide-layout[data-column="6"] > div > div > div > div {
  margin-right: -0.714%;
  margin-left: -0.714%;
}

.divide-layout[data-column="6"] .item--divide {
  display: flex;
  width: 15.211%;
  margin: 0 0.704%;
}

.divide-layout[data-column="6"] .item--divide > .style-color1 {
  width: 100%;
  font-family: "Avenir Next", Verdana, メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴシック, "Yu Gothic", Osaka, sans-serif;
  font-size: 16px;
  line-height: 1.357;
}

.divide-layout[data-column="6"] .item--divide:nth-child(6n + 1) {
  clear: both;
}

.divide-layout[data-column="6"] .item--divide:nth-child(n + 7) {
  margin-top: 1.408%;
}

.divide-layout[data-column="6"] .elem-pic-block:last-child {
  margin-bottom: 0;
}

.divide-layout[data-column="6"] .pic-container img[data-img-fix-width="130"] {
  width: 130px;
  max-width: 100%;
}

.divide-layout[data-column="6"] .elem-txt-list .txt-list > li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.65;
}

.divide-layout[data-column="6"] .elem-txt-list .txt-list > li + li {
  margin-top: 0.357em;
}

.divide-layout[data-column="6"] .elem-txt-list .txt-list > li > a > span::before {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: -1.2em;
  width: 1em;
  height: 1em;
  content: "\e037";
  color: #a10000;
  font-family: "Material Icons";
  font-size: 1.143em;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1200px) and (min-width: 801px) {
  .divide-layout[data-column="6"] .item--divide {
    width: 31.901%;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(6n + 1) {
    clear: none;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(3n + 1) {
    clear: both;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(n + 4) {
    margin-top: 1.408%;
  }
}

@media (max-width: 800px) {
  .elem-heading-lv2[data-align="center"] .heading-container .title-holder {
    max-width: 87.5%;
    padding-right: 2.5%;
    padding-left: 2.5%;
  }

  .divide-layout[data-column="6"] .item--divide {
    width: 48.592%;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(3n + 1),
  .divide-layout[data-column="6"] .item--divide:nth-child(6n + 1) {
    clear: none;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(2n + 1) {
    clear: both;
  }

  .divide-layout[data-column="6"] .item--divide:nth-child(n + 3) {
    margin-top: 1.408%;
  }
}

@media (max-width: 568px) {
  .elem-heading-lv2[data-align="center"] {
    margin: 6.25% -3.125% 4.688%;
  }

  .elem-pic-block[data-direction="horizontal"] > div > div > div > div {
    display: block;
  }

  .elem-pic-block[data-direction="horizontal"] .pic-container {
    width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .elem-pic-block[data-direction="horizontal"] .txt-container {
    width: 100%;
    margin-top: 1.143em;
  }

  .elem-pic-block[data-direction="horizontal"] .txt-foot {
    min-height: 0;
  }

  .divide-layout[data-column="6"] .item--divide {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
  }

  .divide-layout[data-column="6"] .item--divide:not(:first-child) {
    margin-top: 2.641%;
  }
}