:root {
  --font-family-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-family-sippori-mincho: "Shippori Mincho", serif;
  --font-family-urbanist: "Urbanist", sans-serif;

  --color-base-text: #333333;
  --color-point-text: #877545;
  --color-sub-text: #B3A03F;
  --color-background-1: #F1F1E8;
  --color-background-2: #F8F8F3;
  --color-cta-text: #FFFFFF;
  --color-background-base: #FFFFFF;

  --gutter-base: 20px;

  --inline-size-layer: 1440px;
  --inline-size-contents: 1000px;

  --leading-trim: calc((1em - 1lh) / 2);
}

*,
::before,
::after {
  --clamp-root-font-size: 10;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );

  font-size: var(--clamp);
}

/* bodyにデフォルト値を設定する */
body {
  /* --clamp-viewport-min: 375; */
  --clamp-viewport-min: 876;
  --clamp-viewport-max: 1440;
  --clamp-min: 14;
  --clamp-max: 16;
}

picture, img {
  display: block;
  height: auto;
}

.u-visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  contain: strict !important;
  pointer-events: none !important;
  visibility: visible !important;
  border: none !important;
  opacity: 0 !important;
}

/* =============================================
  okameoil
============================================= */
.okameoil {
  font-family: var(--font-family-noto-sans-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-base-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .okameoil {
    --clamp-min: 14;
    --clamp-max: 16;
    /* font-size: 16px; */
    font-size: var(--clamp);
  }
}

.okameoil-header {
  --_gutter-block: var(--gutter-base);
  --_gutter-inline: var(--gutter-base);
  display: grid;
  grid-template-columns: auto minmax(0, var(--inline-size-layer)) auto;
  grid-template-columns: [full-start] auto [content-start] minmax(0, var(--inline-size-layer)) [content-end] auto [full-end];
  background-color: #E3E3E3;
  padding-block: var(--_gutter-block);
  padding-inline: var(--_gutter-inline);
}
@media screen and (min-width: 768px) {
  .okameoil-header {
    --_gutter-block: 32px;
    --_gutter-inline: 37px;
    padding-block: var(--_gutter-block);
    padding-inline: var(--_gutter-inline);
  }
}
.okameoil-header_image {
  grid-area: content;
  margin-block: calc(var(--_gutter-block) * -1);
  margin-inline: calc(var(--_gutter-inline) * -1);
}

.headerLogo {
  position: relative;
  z-index: 1;
  width: fit-content;
  height: fit-content;
  grid-area: content;
  justify-self: center;
}
@media screen and (min-width: 768px) {
  .headerLogo {
    justify-self: start;
  }
}

/* section-headline
---------------------------------------- */

.section-headline + * {
  margin-top: 40px;
}
.section-headline[data-margin-bottom="small"] + * {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .section-headline + * {
    margin-top: 48px;
  }
  .section-headline[data-margin-bottom="small"] + * {
    margin-top: 24px;
  }
}

.section-headline_wrap {
  display: grid;
  row-gap: 12px;
}
.section-headline_wrap[data-align="center"] {
  justify-content: center;
}
.section-headline_wrap[data-align="center"]:has(.section-headline_subTitle) {
  text-align: center;
}
.section-headline_title {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .section-headline_title {
    --clamp-min: 26;
    --clamp-max: 38;
    /* font-size: 38px; */
    font-size: var(--clamp);
  }
}

.section-headline_title[data-color="point"] {
  color: var(--color-point-text);
}

.section-headline_title[data-style="small"] {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;

}
@media (min-width: 768px) {
  .section-headline_title[data-style="small"] {
    --clamp-min: 22;
    --clamp-max: 32;
    /* font-size: 32px; */
    font-size: var(--clamp);
  }
}

.section-headline_subTitle {
  font-family: var(--font-family-urbanist);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
}
@media (min-width: 768px) {
  .section-headline_subTitle {
    --clamp-min: 14;
    --clamp-max: 16;
    /* font-size: 16px; */
    font-size: var(--clamp);
  }
}

/* okameoil-button
---------------------------------------- */
.okameoil-button {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-cta-text);
  background-color: var(--color-point-text);
  padding-block: 20px 21px;
  transition: background-color 0.3s ease;
}
@media (min-width: 768px) {
  .okameoil-button {
    padding-block: 16px;
    padding-inline: 16px;
  }
}
@media (any-hover: hover) {
  .okameoil-button:hover {
    background-color: var(--color-sub-text);
  }
}
.okameoil-button span {
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.okameoil-button::before,
.okameoil-button::after {
  content: "";
}
.okameoil-button::after {
  width: 7px;
  height: 13px;
  mask-image: url(../../img/okameoil/arrow_right.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: currentColor;
  justify-self: start;
}
.okameoil-button[data-icon-kind="arrow-down"]::after {
  width: 13px;
  height: 7px;
  mask-image: url(../../img/okameoil/arrow_down.svg);
}

@media (min-width: 768px) {
  .okameoil-button {
    font-weight: 500;
    line-height: 2;
  }

}

/* text
---------------------------------------- */
.u-read-text {
  font-family: var(--font-family-noto-sans-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .u-read-text {
    --clamp-min: 16;
    --clamp-max: 18;
    /* font-size: 18px; */
    font-size: var(--clamp);
  }
}

/* section-overviews
---------------------------------------- */
.section-overviews {
  container-type: inline-size;
  container-name: howto;
  max-width: var(--inline-size-layer);
  margin-inline: auto;
}

.section-overviews-wrapper {
  --_padding-bottom: 96px;
  display: grid;
  grid-template-areas:
    "image"
    "body"
    ".";
  grid-template-rows: auto minmax(0, 1fr) var(--_padding-bottom);
  grid-template-columns: 1fr;
  max-width: calc(var(--inline-size-contents) + var(--gutter-base) * 2);
  padding-inline: var(--gutter-base);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .section-overviews-wrapper {
    --_padding-top: 154px;
    --_padding-bottom: 128px;
    --_inline-size-contents: 47.7%;
    grid-template-areas:
      ". image"
      "body image"
      "body image";
    grid-template-rows: var(--_padding-top) auto minmax(0, 1fr) var(--_padding-bottom);
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    /* grid-template-columns: minmax(var(--_inline-size-contents), 1fr) minmax(0, 1fr); */
    /* column-gap: calc((48px / var(--inline-size-contents) * 100%)); */
    column-gap: 4.8%;
  }
  .section-overviews-wrapper[data-image-position="left"] {
    grid-template-areas:
      "image ."
      "image body"
      "image body";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
    /* grid-template-columns: minmax(0, 1fr) minmax(var(--_inline-size-contents), 1fr); */
  }
}

.section-overviews_image {
  --_negative-margin: calc(var(--gutter-base) * -1);
  grid-area: image;
  margin-right: var(--_negative-margin);
  position: relative;
  z-index: 1;
}
.section-overviews_image img {
  width: 100%;
}
@media (min-width: 768px) {
  .section-overviews_image {
    --_negative-margin: min(var(--inline-size-contents) / 2 - 50cqw, var(--gutter-base) * -1);
    margin-right: var(--_negative-margin);
  }
}

.section-overviews-wrapper[data-image-position="left"] .section-overviews_image {
  margin-right: 0;
  margin-left: var(--_negative-margin);
}
@media (min-width: 768px) {
  .section-overviews-wrapper[data-image-position="left"] .section-overviews_image {
    margin-left: var(--_negative-margin);
  }
}

.section-overviews_body {
  grid-area: body;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .section-overviews_body {
    margin-top: 0;
  }
}

.section-overviews_subTitle {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
}
@media (min-width: 768px) {
  .section-overviews_subTitle {
    --clamp-min: 22;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
  }
}

.section-overviews-tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 12px;
}
.section-overviews-tag {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 8px;
  place-content: center;
  font-family: var(--font-family-noto-sans-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
  padding-block: 4px;
  padding-inline: 8px;
  border: 1px solid var(--color-point-text);
}
.section-overviews-tag::before {
  content: "";
  min-width: 18px;
  min-height: 18px;
  background-image: url(../../img/okameoil/check.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .section-overviews-tag {
    --clamp-min: 14;
    --clamp-max: 16;
    /* font-size: 16px; */
    font-size: var(--clamp);

  }
}

.section-overviews_text {
  font-family: var(--font-family-noto-sans-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 20px;

}
@media (min-width: 768px) {
  .section-overviews_text {
    --clamp-min: 16;
    --clamp-max: 18;
    /* font-size: 18px; */
    font-size: var(--clamp);
    margin-top: 24px;
  }
}

.section-overviews_note {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  margin-top: 12px;
}
@media (min-width: 768px) {
  .section-overviews_note {
    margin-top: 16px;
  }
}

/* =============================================
  okameoil-section
============================================= */
.okameoil-section {
  padding-block: 96px;
  padding-inline: var(--gutter-base);
}
@media (min-width: 768px) {
  .okameoil-section {
    padding-block: 120px;
  }
}

/* section-natural
---------------------------------------- */
.section-natural {
  padding-block: 96px 64px;
  background-color: var(--color-background-1);
}
@media (min-width: 768px) {
  .section-natural {
    padding-block: 90px 64px;
  }
}

.section-natural-wrapper {
  padding-inline: var(--gutter-base);
}
@media (min-width: 768px) {
  .section-natural-wrapper {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    /* grid-template-columns:
      1.3fr
      min(12.80%, calc(var(--inline-size-contents) * 1.5 / 8.5))
      min(42.68%, calc(var(--inline-size-contents) * 5 / 8.5))
      min(17.07%, calc(var(--inline-size-contents) * 2 / 8.5))
      1fr; */
    grid-template-columns: minmax(0, 200px) minmax(0, 170px) minmax(420px, 1fr) minmax(0, 180px) minmax(0, 200px);
    max-width: var(--inline-size-layer);
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .section-natural_leads {
    grid-row: 1 / 3;
    grid-column: 3 / 4;
    padding-inline: 20px;
    margin-top: 32px;
  }
}

.section-natural_leadText {
  text-align: center;
}

.section-natural_image-left {
  margin-left: calc(var(--gutter-base) * -1);
  margin-right: 31px;
  margin-top: 64px;
  position: relative;
  z-index: 1;
}
.section-natural_image-left img {
  /* width: 100%; */
}
@media (min-width: 768px) {
  .section-natural_image-left {
    grid-row: 1 / 4;
    grid-column: 1 / 3;
    margin-right: 0;
    margin-top: 0;
  }
}

.section-natural_image-right {
  display: none;
}
@media (min-width: 768px) {
  .section-natural_image-right {
    grid-row: 2 / 5;
    grid-column: 4 / 6;
    display: revert;
    margin-right: calc(var(--gutter-base) * -1);
    position: relative;
    z-index: 1;
  }
  .section-natural_image-right img {
    width: 100%;
  }
}

.natural-box {
  display: grid;
  row-gap: 20px;
  padding-block: 96px 40px;
  padding-inline: var(--gutter-base);
  background-color: var(--color-background-2);
  margin-top: -56px;
}
@media (min-width: 768px) {
  .natural-box {
    grid-row: 3 / 6;
    /* grid-column: 2 / 5; */
    grid-column: 1 / 6;
    row-gap: 32px;
    max-width: calc(var(--inline-size-contents));
    width: 100%;
    padding-block: 40px;
    /* margin-top: calc(64px / (var(--inline-size-layer) - var(--gutter-base) * 2) * 100%); */
    margin-top: 64px;
    margin-inline: auto;
  }
}

.natural-box_image img {
  margin-inline: auto;
}

.section-natural_subTitle {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-point-text);
}
@media (min-width: 768px) {
  .section-natural_subTitle {
    --clamp-min: 22;
    --clamp-max: 32;
    /* font-size: 32px; */
    font-size: var(--clamp);
  }
}

.section-natural_subText {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media (min-width: 768px) {
  .section-natural_subText {
    --clamp-min: 18;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
  }
}

/* section-kuromoji
---------------------------------------- */
.section-kuromoji {
  --_gutter-top: 32px;
  border-image: linear-gradient(var(--color-background-1) var(--_gutter-top), #fff var(--_gutter-top)) fill 0 / 0 / 0 100vi;
}
@media (min-width: 768px) {
  .section-kuromoji {
    --_gutter-top: 59px;
  }
}

.section-kuromoji .section-overviews-wrapper {
  --_padding-bottom: 64px;
}
@media (min-width: 768px) {
  .section-kuromoji .section-overviews-wrapper {
    --_padding-top: 105px;
  }
}

.section-kuromoji .section-overviews_text {
  margin-top: 32px;
}

.section-kuromoji-button {
  max-width: calc(484px + var(--gutter-base) * 2);
  padding-inline: var(--gutter-base);
  margin-inline: auto;
}

/* section-effect
---------------------------------------- */
.section-effect {
  max-width: calc(var(--inline-size-contents) + var(--gutter-base) * 2);
  margin-inline: auto;
  padding-block: 96px;
  padding-inline: var(--gutter-base);
}
@media (min-width: 768px) {
  .section-effect {
    padding-block: 128px 126px;
  }
}

.section-effect_leadText {
  text-align: center;
}

.effect-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
  column-gap: 32px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .effect-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
    /* column-gap: calc((32px / var(--inline-size-contents) * 100%)); */
    column-gap: 3.2%;
  }
}

.effect-listItem {
  display: grid;
  grid-template-rows: 19.5px 19.5px 1fr;
}

.effect-listItem-number {
  grid-row: 1 / 3;
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.effect-listItem-title {
  grid-row: 2 / 4;
  grid-column: 1 / -1;
  padding-block: 19px 16px;
  padding-inline: 20px;
  border: 1px solid var(--color-point-text);
}
@media (min-width: 768px) {
  .effect-listItem-title {
    padding-inline: 16px;
  }
}

.effect-listItem-number_label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 39px;
  background-color: #fff;
  font-family: var(--font-family-urbanist);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
  text-align: center;
}
@media (min-width: 768px) {
  .effect-listItem-number_label {
    --clamp-min: 22;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
  }
}

.effect-listItem-title_label {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
  text-align: center;
}
@media (min-width: 768px) {
  .effect-listItem-title_label {
    --clamp-min: 22;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
  }
}

.effect-careList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 40px;
  column-gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .effect-careList {
    row-gap: 24px;
    column-gap: 32px;
  }
}

.effect-careListItem img {
  width: 100%;
  height: auto;
}
.effect-careListItem_title {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
  margin-top: 20px;
}
@media (min-width: 768px) {
  .effect-careListItem_title {
    --clamp-min: 22;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
    margin-top: 16px;
  }
}

.effect-careListItem_text {
  font-family: var(--font-family-noto-sans-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .effect-careListItem_text {
    --clamp-min: 16;
    --clamp-max: 18;
    /* font-size: 18px; */
    font-size: var(--clamp);
  }
}

.effect-box {
  --_gutter-block: 40px;
  --_gutter-inline: var(--gutter-base);
  background-color: var(--color-sub-text);
  padding-block: var(--_gutter-block);
  padding-inline: var(--_gutter-inline);
  margin-top: 40px;
}
@media (min-width: 768px) {
  .effect-box {
    --_gutter-block: 32px;
    --_gutter-inline: 32px;
    margin-top: 32px;
  }
}

.effect-box-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  column-gap: 32px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .effect-box-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }
}

.effect-box_title {
  font-family: var(--font-family-sippori-mincho);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-cta-text);
}
@media (min-width: 768px) {
  .effect-box_title {
    --clamp-min: 22;
    --clamp-max: 26;
    /* font-size: 26px; */
    font-size: var(--clamp);
  }
}

.effect-box-list {
  color: var(--color-cta-text);
}

.effect-box-list > div {
  display: grid;
  row-gap: 12px;
}
@media (min-width: 768px) {
  .effect-box-list > div {
    row-gap: 16px;
  }
}

.effect-box_subTitle {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-cta-text);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-cta-text);
}
@media (min-width: 768px) {
  .effect-box_subTitle {
    --clamp-min: 18;
    --clamp-max: 20;
    /* font-size: 20px; */
    font-size: var(--clamp);
    padding-bottom: 8px;
  }
}

.effect-box_textList li {
  font-weight: 500;
  text-indent: -1em;
  padding-left: 1em;
}

/* section-howto
---------------------------------------- */
.section-howto {
  --_gutter-top: 65px;
  border-image: linear-gradient(#fff var(--_gutter-top), var(--color-background-1) var(--_gutter-top)) fill 0 / 0 / 0 100vi;
}
@media (min-width: 768px) {
  .section-howto {
    --_gutter-top: 58px;
  }
}

.section-howto .section-overviews-wrapper {
  --_padding-bottom: 96px;
}
@media (min-width: 768px) {
  .section-howto .section-overviews-wrapper {
    --_padding-top: 104px;
    --_padding-bottom: 128px;
  }
}

/* okameoil-lineup-section
---------------------------------------- */
.okameoil-lineup-section {
  background-color: var(--color-background-base);
}
@media (min-width: 768px) {
  .okameoil-lineup-section {
    padding-block: 128px;
  }
}

.lineup-list {
  max-width: var(--inline-size-contents);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .lineup-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 32px;
  }
}

@media (min-width: 768px) {
  .lineup-item {
    display: block grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
  }
}

.lineup-item + .lineup-item {
  margin-top: 64px;
}
@media (min-width: 768px) {
  .lineup-item + .lineup-item {
    margin-top: 0;
  }
}

.lineup-item_image {
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-2);
  padding-block: 12px 11px;
}
.lineup-item_image-120 {
  width: 54px;
  height: 198px;
}
.lineup-item_image-400 {
  width: 88px;
  height: 239px;
}
@media (min-width: 768px) {
  .lineup-item_image {
    padding-block: 19px 18px;
  }
  .lineup-item_image-120 {
    width: 90px;
    height: 288px;
  }
  .lineup-item_image-400 {
    width: 135px;
    height: 342px;
  }
}

.lineup-item_text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .lineup-item_text {
    --clamp-min: 14;
    --clamp-max: 16;
    /* font-size: 16px; */
    font-size: var(--clamp);
    margin-top: 24px;
  }
}

.lineup-item_title {
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 8px;

}
@media (min-width: 768px) {
  .lineup-item_title {
    --clamp-min: 16;
    --clamp-max: 18;
    /* font-size: 18px; */
    font-size: var(--clamp);
  }
}

.lineup-item_button {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .lineup-item_button {
    margin-top: 16px;
  }
}


.lineup-box {
  display: grid;
  grid-template-areas:
    "caution caution"
    "howto image";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  row-gap: 12px;
  column-gap: 20px;
  max-width: var(--inline-size-contents);
  margin-inline: auto;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .lineup-box {
    grid-template-areas:
    "image caution"
    "image howto";
    grid-template-columns: auto 1fr;
    row-gap: 16px;
    column-gap: 24px;
    margin-top: 48px;
  }
}
.lineup-box_image {
  grid-area: image;
  justify-self: start;
}
.lineup-box_image img {
  min-width: 120px;
  width: 120px;
  height: 91px;
}
@media (min-width: 768px) {
  .lineup-box_image img {
    width: 192px;
    height: 145px;
  }
}

.lineup-box-caution {
  grid-area: caution;
}
.lineup-box-howto {
  grid-area: howto;
}

.lineup-box_text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .lineup-box_text {
    --clamp-min: 14;
    --clamp-max: 16;
    /* font-size: 16px; */
    font-size: var(--clamp);
  }
}

/* okameoil-voice-section
---------------------------------------- */
.okameoil-voice-section {
  background-color: var(--color-background-1);
}
@media (min-width: 768px) {
  .okameoil-voice-section {
    padding-block: 128px;
  }
}

/* voice-box
---------------------------------------- */
.voice-box {
  --_gutter: 20px;
  display: grid;
  grid-template-areas:
    "image name"
    "body body";
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 12px;
  column-gap: 16px;
  align-items: start;
  background-color: var(--color-background-base);
  padding-block: var(--_gutter);
  padding-inline: var(--_gutter);
}
@media (min-width: 768px) {
  .voice-box {
    --_gutter: 24px;
    column-gap: 15px;
  }
}

.voice-box_image {
  grid-area: image;
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.voice-box_name {
  grid-area: name;
  align-self: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-point-text);
}
@media (min-width: 768px) {
  .voice-box_name {
    line-height: 1.75;
  }
}

.voice-box_body {
  grid-area: body;
}

.voice-box_title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .voice-box_title {
    --clamp-min: 18;
    --clamp-max: 20;
    /* font-size: 20px; */
    font-size: var(--clamp);
  }
}

.voice-box_text {
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .voice-box_text {
    line-height: 1.75;
  }
}

.voice-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 20px;
  column-gap: 32px;
  max-inline-size: var(--inline-size-contents);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .voice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}