/* Legacy CMS components used only by the recipe and product-information area. */
.syouyu_contents_wrapper .legacy-content {
  max-width: 1180px;
  margin: 0 auto 3rem;
  color: #333;
  font-size: 18.004px;
  font-family: "Avenir Next", Verdana, "メイリオ", Meiryo,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック",
    "Yu Gothic", Osaka, sans-serif;
  font-weight: 400;
  line-height: 1.357;
}

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

.legacy-content img {
  max-width: 100%;
  height: auto;
}

.legacy-content a {
  color: #a10000;
  text-decoration: none;
}

.legacy-content .elem-heading-lv2 {
  margin: 2.857em 0 1.429em;
}

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

.legacy-content .elem-heading-lv2 h2 {
  position: relative;
  margin: 0;
  padding: 0 0 0 15px;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
}

.legacy-content .elem-heading-lv2 h2 span {
  display: inline-block;
}

.legacy-content .elem-heading-lv2 h2 span::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f08300 50%, #d1561b 50%);
  content: "";
}

.legacy-content .elem-heading-lv2[data-align="center"] h2 {
  padding-left: 0;
  text-align: center;
}

.legacy-content .elem-heading-lv2[data-align="center"] {
  text-align: center;
}

.legacy-content .elem-heading-lv2[data-align="center"] h2 span::before {
  content: normal;
}

.legacy-content .elem-heading-lv2[data-align="center"] > div > div > div > div {
  display: table;
  width: 100%;
  padding-bottom: 0;
  border-bottom: 0;
}

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

.legacy-content .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;
  border-top: 4px solid #f08300;
  content: "";
}

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

.legacy-content .divide-layout {
  margin-bottom: 1.429em;
}

.legacy-content .divide-layout > div > div > div > div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1.429%;
}

.legacy-content .divide-layout[data-column="4"] .item--divide {
  width: 22.222%;
  margin: 0 1.389%;
}

.legacy-content .item--recipe > .style-color1 {
  height: 100%;
  padding: 5%;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.23);
  font-size: 16px;
}

.legacy-content .item--recipe .elem-pic--title-juntos__txt-container h3 {
  margin: 0;
  font-family: "Avenir Next", Verdana, "メイリオ", Meiryo,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック",
    "Yu Gothic", Osaka, sans-serif;
  font-size: 18px;
  line-height: 1.357;
  font-weight: 400;
}

.legacy-content .item--recipe .elem-pic--title-juntos__txt-container h3 a {
  position: relative;
  display: block;
  font-weight: 700;
}

#main .legacy-content .item--recipe .elem-pic--title-juntos > div > div > div > div {
  display: flex;
  flex-direction: column-reverse !important;
}

.legacy-content .item--recipe .elem-pic--title-juntos__txt-container {
  min-height: 49px;
  margin-top: 1.071em;
}

#main .legacy-content .item--recipe .elem-pic--title-juntos__pic-container img {
  display: inline !important;
  width: 100%;
  margin-top: 0;
}

.legacy-content .item--recipe .txt-container {
  margin-top: 1.071em;
}

.legacy-content .item--recipe .txt-body dl {
  display: inline-block;
  margin: 0;
  font-size: 16px;
  vertical-align: top;
}

.legacy-content .item--recipe .txt-body dl + dl {
  padding-left: 4px;
}

.legacy-content .item--recipe .txt-body dt,
.legacy-content .item--recipe .txt-body dd {
  float: left;
  margin: 0;
  font-size: 12px;
}

.legacy-content .item--recipe .txt-body dt {
  margin-right: 0.2em;
}

.legacy-content .item--recipe .material-icons {
  color: #5a9014;
  font-family: "Material Icons";
  font-style: normal;
  font-weight: normal;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: middle;
}

.legacy-content .item--recipe .icon--salt::before {
  content: url("/common-kikkoman/img/img-common/icons/salt.svg");
}

.legacy-content .item--recipe .icon--salt {
  width: 13px;
  height: 13px;
  color: #f08300;
}

.legacy-content .item--recipe .recipe-tags {
  margin-top: 0.714em;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 1.357;
}

.legacy-content .elem-tags-list [role="listitem"] {
  display: inline-block;
  margin: 4px 1px 3px 0;
  font-size: 12px;
  line-height: 1.357;
}

.legacy-content .elem-tags-list [role="listitem"] a {
  position: relative;
  display: block;
  padding: 3px 6px 3px 17px;
  border: 1px solid #f08300;
  border-radius: 2px;
  color: #f08300;
}

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

.legacy-content .elem-tags-list [role="listitem"][data-category="health"] a {
  padding-left: 19px;
  border-color: #008c3e;
  color: #008c3e;
}

.legacy-content .elem-tags-list [role="listitem"][data-category="health"] a::before {
  background: url("/common-kikkoman/img/img-common/icons/health.svg") no-repeat center / 14px;
}

.legacy-content .elem-tags-list [role="listitem"] a:hover,
.legacy-content .item--recipe h3 a:hover {
  text-decoration: underline;
}

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

.legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .pic-container {
  flex: 0 0 calc(130px + 3.802%);
  width: calc(130px + 3.802%);
  max-width: 52%;
  padding-right: 3.802%;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .txt-container {
  flex: 1 1 auto;
  width: auto;
}

#main .legacy-content .elem-pic-block[data-direction="horizontal"] img[data-img-fix-width="130"] {
  max-width: 130px !important;
  width: 130px !important;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] .elem-heading-lv3 h3 {
  margin: 0;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] .txt-head + .txt-body {
  margin-top: 0.714em;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] .elem-heading-lv3 h3 span {
  display: inline-block;
  padding-bottom: 2px;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] .elem-paragraph p {
  margin: 0;
  font-size: 18.004px;
  font-weight: 400;
  line-height: 1.643;
}

.legacy-content .elem-pic-block[data-direction="horizontal"] .txt-foot {
  margin-top: 1.429em;
}

.legacy-content .txt-list--btn {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Copied from the styles used by the original page. */
.legacy-content .elem-txt-list--btn .txt-list--btn[data-direction="horizontal"] {
  margin-top: -0.714em;
}

.legacy-content .elem-txt-list--btn .txt-list--btn[data-direction="horizontal"] > li {
  display: inline-block;
  margin-top: 0.714em;
  vertical-align: middle;
}

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

.legacy-content .elem-txt-list--btn .txt-list--btn[data-direction="horizontal"][data-btn-column="auto"] > li {
  width: 22.761%;
  margin: 1.119%;
  letter-spacing: normal;
}

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

.legacy-content .elem-txt-list--btn .elem-btn {
  margin: 0;
}

.legacy-content .elem-btn[data-btn-color="2"] > div > div {
  border-radius: 5px;
  background: #5a3a3a;
  transition: all 0.15s ease;
}

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

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

.legacy-content .elem-btn[data-btn-color="2"] a {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.929em 1em;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.legacy-content .elem-btn[data-btn-color="2"] a > span:first-child {
  font-size: 0.929em;
  font-weight: 700;
}

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

@media screen and (max-width: 800px) {
  .syouyu_contents_wrapper .legacy-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .legacy-content .divide-layout[data-column="4"] .item--divide {
    width: 30.556%;
    margin-bottom: 2.858%;
  }
}

@media screen and (max-width: 567px) {
  .syouyu_contents_wrapper .legacy-content {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.357;
  }

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

  .legacy-content .elem-heading-lv2 h2 {
    font-size: 1.286em;
    line-height: 1.25;
  }

  .legacy-content .divide-layout {
    margin-bottom: 3.831%;
  }

  .legacy-content .divide-layout > div > div > div > div {
    display: block;
    margin: 0;
  }

  .legacy-content .divide-layout[data-column="4"] .item--divide {
    width: 100%;
    margin: 0;
  }

  .legacy-content .divide-layout[data-column="4"] .item--divide + .item--divide {
    margin-top: 1.071em;
  }

  .legacy-content .item--recipe > .style-color1 {
    padding: 3.125%;
  }

  .legacy-content .item--recipe .elem-pic--title-juntos__txt-container {
    height: auto !important;
    min-height: 0;
  }

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

  .legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .pic-container,
  .legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .txt-container {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .pic-container {
    text-align: center;
  }

  .legacy-content .elem-pic-block[data-direction="horizontal"] > div > div > div > div > .txt-container {
    margin-top: 0.714em;
  }

  .legacy-content .elem-pic-block[data-direction="horizontal"] .elem-heading-lv3 h3 {
    font-size: 1.143em;
    line-height: 1.45;
  }

  .legacy-content .elem-pic-block[data-direction="horizontal"] .elem-paragraph p {
    font-size: 14px;
    line-height: 1.643;
  }

  .legacy-content .elem-txt-list--btn .txt-list--btn[data-direction="horizontal"][data-btn-column="auto"] > li {
    width: 47.761%;
  }

  .legacy-content .elem-btn[data-btn-color="2"] a {
    padding: 0.929em 0.357em;
    font-size: 0.857em;
  }

  .legacy-content .elem-btn[data-btn-color="2"] a > span:first-child {
    font-size: 0.929em;
  }
}