/* --- variables ------------------------------------------------ */
:where(:root) {
  --_font-sans: "Noto Sans JP", sans-serif;
  --_font-serif: "Noto Serif JP", serif;
  --_font-pinyon: "Pinyon Script", serif;

  --_color-background: oklch(0 0 0); /* #000000 */
  --_color-foreground: oklch(1 0 0); /* #ffffff */
  --_color-primary: oklch(0.2 0.03 16.5); /* #231112 */
  --_color-secondary: oklch(0.6 0.06 88.18); /* #8f7f58 */
  --_color-tertiary: oklch(0.85 0 0); /* #cecece */

  --_container-width: 92.5%;
  --_container-max-width: 1280px;
}

/* --- utility ------------------------------------------------ */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-lf {
  display: inline-block;
}

.u-br-sp {
  @media (min-width: 768px) {
    display: none;
  }
}

.u-br-pc {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

/* --- components ------------------------------------------------ */
.p-lp-button {
  --border-color: var(--_color-secondary);
  --text-color: var(--_color-foreground);
  --background-color: var(--_color-primary);

  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 1em 1.5em;
  border: solid 1px var(--border-color);
  text-align: center;
  font-weight: 600;
  color: var(--text-color);
  background: var(--background-color);

  @media (any-hover: hover) {
    &:hover {
      background: var(
        --hover-background,
        color-mix(in srgb, var(--background-color) 90%, var(--text-color))
      );
    }
  }

  /* 2重ボーダー(bevel) */
  &:where([data-variant="bevel"]) {
    /* SP: bevel x=14% (≈23px on ~165px wide button, ~45° at ~57px tall) */
    --border-path: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><line x1='0' y1='0' x2='86' y2='0' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='86' y1='0' x2='100' y2='44' stroke='%238f7f58' stroke-width='3' vector-effect='non-scaling-stroke'/><line x1='100' y1='44' x2='100' y2='100' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='100' y1='100' x2='14' y2='100' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='14' y1='100' x2='0' y2='56' stroke='%238f7f58' stroke-width='3' vector-effect='non-scaling-stroke'/><line x1='0' y1='56' x2='0' y2='0' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/></svg>");

    /* PC: bevel x=10% (≈28px on ~280px wide button, ~45° at ~64px tall) */
    @media (min-width: 1024px) {
      --border-path: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><line x1='0' y1='0' x2='90' y2='0' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='90' y1='0' x2='100' y2='44' stroke='%238f7f58' stroke-width='3' vector-effect='non-scaling-stroke'/><line x1='100' y1='44' x2='100' y2='100' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='100' y1='100' x2='10' y2='100' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/><line x1='10' y1='100' x2='0' y2='56' stroke='%238f7f58' stroke-width='3' vector-effect='non-scaling-stroke'/><line x1='0' y1='56' x2='0' y2='0' stroke='%238f7f58' stroke-width='5' vector-effect='non-scaling-stroke'/></svg>");
    }

    padding: 1.25em 1.5em;
    border: none;
    background-color: transparent;
    background-image: var(--border-path);
    background-size: 100% 100%;

    &::after {
      content: "";
      position: absolute;
      inset: 7px 6px;
      border: 1px solid var(--_color-secondary);
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: transparent;
        background-image: var(--border-path);
        background-size: 100% 100%;
        opacity: 0.7;
      }
    }
  }

  /* 角が丸くえぐられている（共通） */
  &:where(
    [data-variant="scoop"],
    [data-variant~="scoop"][data-variant~="circle"]
  ) {
    --text-color: var(--_color-secondary);
    border-radius: 0.4em;
    corner-shape: scoop;
  }

  /* 角が丸くえぐられている */
  &:where([data-variant="scoop"]) {
    padding: 0.5em 1.5em;
  }

  /* 角が丸くえぐられている & 矢印 */
  &:where([data-variant~="scoop"][data-variant~="circle"]) {
    --hover-background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--_color-primary) 90%, var(--_color-foreground))
        75%,
      color-mix(in srgb, var(--_color-background) 90%, var(--_color-foreground))
        100%
    );

    padding: 0.5em 5em 0.5em 1.5em;
    background: linear-gradient(
      90deg,
      var(--_color-primary) 75%,
      var(--_color-background) 100%
    );

    /* 矢印 - 横線 */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 1.85em;
      display: block;
      width: 2em;
      height: 1px;
      background: var(--text-color);
    }

    /* 矢印 - 円 */
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 1.1em;
      translate: 0 -50%;
      display: block;
      width: 1.2em;
      height: auto;
      aspect-ratio: 1/1;
      border: solid 1px var(--text-color);
      border-radius: 50%;
    }
  }

  /* 画像付き（共通） */
  &:where(
    [data-variant="img01"],
    [data-variant="img02"],
    [data-variant="img03"]
  ) {
    --border-color: var(--_color-foreground);
    --hover-background: none;
    --overlay-color: var(--background-color);

    isolation: isolate;
    padding: 1.5em 1em;
    border: solid 1px var(--border-color);
    font-weight: 500;
    line-height: 1.25;
    text-shadow: 0 0 0.25em var(--_color-background);
    background: unset;

    @media (any-hover: hover) {
      &:hover {
        --overlay-color: color-mix(
          in srgb,
          var(--background-color) 90%,
          var(--_color-foreground)
        );
      }
    }

    @media (min-width: 768px) {
      border: solid 2px var(--border-color);
    }

    /* 背景画像 */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      display: block;
      margin: auto;
      width: 100%;
      height: 100%;
      background: var(--img-path) no-repeat var(--img-position) / cover;
    }

    /* 背景色 */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      display: block;
      margin: auto;
      width: 100%;
      height: 100%;
      background-color: var(--overlay-color);
      opacity: 0.7;
    }

    & .p-lp-button__em {
      display: block;
      margin-top: 0.75em;
      text-align: center;
      color: var(--_color-secondary);
    }
  }

  /* 画像付き01 */
  &:where([data-variant="img01"]) {
    --img-path: url("https://www.tanzo.jp/wp-content/themes/tanzo/assets/images/lp/hero_img_pc.webp");
    --img-position: 30% center;
  }

  /* 画像付き02 */
  &:where([data-variant="img02"]) {
    --img-path: url("https://www.tanzo.jp/wp-content/themes/tanzo/assets/images/lp/hero_img_pc02.webp");
    --img-position: center center;
  }

  /* 画像付き03 */
  &:where([data-variant="img03"]) {
    --img-path: url("https://www.tanzo.jp/wp-content/themes/tanzo/assets/images/lp/hero_img_pc03.webp");
    --img-position: center center;
  }

  /* 矢印（共通） */
  &:where(
    [data-variant="arrow"],
    [data-variant~="arrow"][data-variant~="ghost"]
  ) {
    padding: 0.75em 3em;

    /* 矢印アイコン */
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 1.5em;
      translate: 0 -50%;
      display: block;
      width: 0.6em;
      height: auto;
      aspect-ratio: 1/1;
      border-top: solid 1.5px var(--text-color);
      border-right: solid 1.5px var(--text-color);
      rotate: 45deg;
    }
  }

  /* 矢印 */
  &:where([data-variant="arrow"]) {
    --border-color: var(--_color-tertiary);
    --background-color: var(--_color-tertiary);
    --text-color: var(--_color-background);
  }

  /* 矢印（透明） */
  &:where([data-variant~="arrow"][data-variant~="ghost"]) {
    --background-color: transparent;
    --hover-background: color-mix(
      in srgb,
      var(--_color-foreground) 10%,
      transparent
    );
    --border-color: var(--_color-foreground);
    --text-color: var(--_color-foreground);
  }
}

.p-lp-section {
  position: relative;
  isolation: isolate;
  -webkit-clip-path: inset(-2px 0);
  clip-path: inset(-2px 0);
  padding: 3em 0;
  background-color: var(--_color-background);

  & + & {
    margin-top: -2px;
  }

  @media (min-width: 768px) {
    padding: 4em 0;
  }

  @media (min-width: 1024px) {
    padding: 5em 0;
  }

  &:nth-child(odd of .p-lp-section) {
    --bg-left: 0;
    --bg-right: auto;
    --bg-fade-x: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 1) 100%
    );
  }

  &:nth-child(even of .p-lp-section) {
    --bg-left: auto;
    --bg-right: 0;
    --bg-fade-x: linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 1) 100%
    );
  }

  &:where(:nth-child(odd of .p-lp-section), :nth-child(even of .p-lp-section)) {
    &::after {
      content: "";
      position: absolute;
      inset: -2px 0;
      z-index: -1;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.6) 20%,
        rgba(0, 0, 0, 0.6) 80%,
        rgba(0, 0, 0, 1) 100%
      );
      pointer-events: none;
    }
  }

  :where(.p-lp-section__bg-wrap) {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: var(--bg-opacity, 0);
    pointer-events: none;
    --bg-width: 70%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );
    transition: opacity 0.15s ease-out;
    will-change: opacity;

    @media (min-width: 768px) {
      --bg-width: 50%;
    }

    @media (prefers-reduced-motion: reduce) {
      transition-duration: 0.01ms;
    }
  }

  :where(.p-lp-section__bg-frame) {
    position: fixed;
    top: 50vh;
    top: 50svh;
    left: var(--bg-left, 0);
    right: var(--bg-right, auto);
    transform: translateY(-50%);
    width: var(--bg-width);
    aspect-ratio: 488 / 759;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 28%,
          rgba(0, 0, 0, 0) 72%,
          rgba(0, 0, 0, 1) 100%
        ),
        var(
          --bg-fade-x,
          linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
        );
      pointer-events: none;
    }
  }

  :where(.p-lp-section__bg) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
  }
  :where(.p-lp-section__container) {
    width: var(--_container-width);
    margin: 0 auto;

    @media (min-width: 768px) {
      max-width: var(--_container-max-width);
    }
  }

  :where(.p-lp-section__heading-icon) {
    display: block;
    width: 48px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin: 0 auto 0.6em;
  }

  :where(.p-lp-section__heading) {
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: var(--_color-secondary);

    @media (min-width: 768px) {
      font-size: 1.5em;
    }
  }

  :where(.p-lp-section__description) {
    margin-top: 0.65em;
    text-align: center;
    font-size: 0.8em;
    font-family: var(--_font-sans);
    font-weight: 300;
    letter-spacing: 0;
  }

  &:where(
      .p-lp-section--section03,
      .p-lp-section--section04,
      .p-lp-section--section05
    ) {
    :where(.p-lp-section__description) {
      font-family: var(--_font-serif);
    }
  }
}

.p-lp-banner {
  width: var(--_container-width);
  max-width: 800px;
  margin: 0 auto;
  padding: 1em 0 3em;

  @media (min-width: 768px) {
    font-size: 1.1em;
  }

  :where(.p-lp-banner__link) {
    display: block;
    width: 100%;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.23))
      drop-shadow(0 0 32px rgba(255, 255, 255, 0.12));
  }

  :where(.p-lp-banner__link:hover) {
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.27))
      drop-shadow(0 0 36px rgba(255, 255, 255, 0.15));
  }

  :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- project ------------------------------------------------ */

.p-lp {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.025em;
  font-weight: 300;
  background: var(--_color-background);
  color: var(--_color-foreground);

  :where(strong, b) {
    font-weight: 500;
  }

  @media (min-width: 640px) {
    font-size: 17px;
  }

  @media (min-width: 768px) {
    font-size: 18px;
  }

  @media (min-width: 1024px) {
    font-size: 19px;
  }
}

/* --- メインビジュアル ------------------------------------------------ */
.p-lp-mainVisual {
  height: 100svh;
  position: relative;

  :where(.p-lp-mainVisual__video-container) {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 0.5fr 1fr 0.5fr;
      overflow: hidden;
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  :where(.p-lp-mainVisual__video-wrap) {
    height: 100%;
    position: relative;

    &:where(.p-lp-mainVisual__video-wrap--img02) {
      &::after {
        position: absolute;
        inset: 0;
        margin: auto;

        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: oklch(0 0 0 / 0.5);
      }
    }

    &:where(
      .p-lp-mainVisual__video-wrap--img01,
      .p-lp-mainVisual__video-wrap--img03
    ) {
      display: none;

      @media (min-width: 768px) {
        display: block;
      }

      &::after {
        position: absolute;
        inset: 0;
        margin: auto;

        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: oklch(0 0 0 / 0.8);
      }
    }
  }

  :where(.p-lp-mainVisual__video) {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 2;
  }

  :where(.p-lp-mainVisual__text-container) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--_container-width);
    height: 100%;
    margin: 0 auto;
    padding: calc(3em + 6em) 0 2em; /* calcはヘッダーの高さ分(大体) */

    @media (min-width: 768px) {
      align-items: flex-start;
      padding: 8.5vw 0 7em;
    }

    @media (min-width: 1024px) {
      padding-top: 8.5vw;
    }
  }

  :where(.p-lp-mainVisual__title) {
    margin-right: 14%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.65em;
    font-weight: bold;
    font-family: var(--_font-serif);
    letter-spacing: 0.1em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;

    @media (max-height: 700px) {
      font-size: 1.45em;
      letter-spacing: 0.08em;
    }

    @media (max-height: 600px) {
      font-size: 1.3em;
      letter-spacing: 0.06em;
    }

    @media (min-width: 640px) {
      margin-right: 11%;
    }

    @media (min-width: 768px) {
      margin-right: 0;
      margin-left: 25%;
    }

    @media (min-width: 1024px) {
      margin-left: 33.5%;
    }
  }

  :where(.p-lp-mainVisual__description) {
    font-size: 0.875em;
    font-family: var(--_font-sans);
    font-weight: 300;

    @media (min-width: 768px) {
      width: fit-content;
      margin: 0 5% 0 auto;
    }

    @media (min-width: 1024px) {
      margin-right: 17%;
    }
  }
}

/* --- TOC ------------------------------------------------ */
.p-lp-toc {
  --_gradient-stop: 75%;

  background: radial-gradient(
    circle,
    var(--_color-primary) var(--_gradient-stop),
    var(--_color-background) 100%
  );

  @media (min-width: 768px) {
    --_gradient-stop: 85%;
  }

  :where(.p-lp-toc__container) {
    --grid-cols: 2;

    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 1em;
    width: var(--_container-width);
    margin: 0 auto;
    padding: 1em 0;

    @media (min-width: 768px) {
      --grid-cols: 4;
      gap: 0.25em;
      max-width: var(--_container-max-width);
    }
  }

  :where(.p-lp-toc__button) {
    width: 100%;
    font-size: 0.875em;
    font-family: var(--_font-serif);
    letter-spacing: 0;

    @media (min-width: 768px) {
      font-size: 0.825em;
    }

    @media (min-width: 1024px) {
      font-size: 1em;
    }
  }
}

/* --- 譲れない品格 ------------------------------------------------ */
.p-lp-feature {
  display: grid;
  grid-template:
    "text text"
    "heading list";
  grid-template-columns: auto 1fr;
  gap: 1.5em 4%;

  @media (min-width: 768px) {
    grid-template:
      "heading text"
      "heading list";
    grid-template-columns: auto 1fr;
    gap: 2.5em 4%;
    margin-top: 1em;
  }

  :where(.p-lp-feature__heading) {
    grid-area: heading;
    display: flex;
    gap: 0.5em;
    align-items: center;
    padding: 0 0.15em;
    font-size: 2em;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--_color-secondary);

    @media (min-width: 1024px) {
      padding: 0 0.25em;
    }
  }

  :where(.p-lp-feature__heading-icon) {
    width: 1.25em;
    height: auto;
    aspect-ratio: 1/1;
  }

  :where(.p-lp-feature__text) {
    grid-area: text;
    width: fit-content;
    margin-left: auto;
    font-size: 0.8em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;

    @media (min-width: 768px) {
      margin-left: 0;
    }
  }

  :where(.p-lp-feature__list) {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-top: 2.5em;

    @media (min-width: 768px) {
      margin-top: 0;
    }
  }

  :where(.p-lp-feature__list-item) {
    @media (min-width: 1024px) {
      display: grid;
      grid-template:
        "heading heading"
        "text img";
      grid-template-columns: 6fr 7fr;
      gap: 1em 2.5%;
    }
  }

  :where(.p-lp-feature__list-item-heading) {
    padding: 0.25em 0 0.25em 1em;
    font-size: 1.1em;
    letter-spacing: 0;
    background: linear-gradient(
      90deg,
      var(--_color-primary) 75%,
      var(--_color-background) 100%
    );
    color: var(--_color-secondary);
    position: relative;

    @media (min-width: 1024px) {
      grid-area: heading;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: -0.5em;
      translate: 0 -50%;
      content: "";
      display: block;

      width: 1em;
      height: 2px;
      background-color: var(--_color-secondary);
    }
  }

  :where(.p-lp-feature__list-item-text) {
    margin: 0.75em 0 0 1.5em;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;

    @media (min-width: 1024px) {
      grid-area: text;
      margin-top: 0;
    }
  }

  :where(.p-lp-feautre__list-item-imgs) {
    --grid-cols: 2;

    margin: 1em 0 0 1.5em;
    display: grid;
    gap: 2.5%;
    grid-template-columns: repeat(var(--grid-cols), 1fr);

    @media (min-width: 768px) {
      --grid-cols: 3;
      gap: 2%;
    }

    @media (min-width: 1024px) {
      grid-area: img;
      margin: 0;
    }
  }

  :where(.p-lp-feature__list-item-img) {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;

    &:last-child {
      display: none;

      @media (min-width: 768px) {
        display: block;
      }
    }
  }
}

/* --- 選ばれる鍛造製法 ------------------------------------------------ */
.p-lp-method {
  margin-top: 3em;

  @media (min-width: 768px) {
    margin-top: 4em;
  }

  @media (min-width: 1024px) {
    margin-top: 5em;
  }

  :where(.p-lp-method__item + .p-lp-method__item) {
    margin-top: 3.5em;

    @media (min-width: 1024px) {
      margin-top: 5em;
    }
  }

  :where(.p-lp-method__item-heading) {
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--_color-secondary);
    font-size: 1.1em;
    line-height: 1.25;
    color: var(--_color-secondary);

    @media (min-width: 768px) {
      font-size: 1.25em;
    }
  }

  :where(.p-lp-method__item-description) {
    margin-top: 0.5em;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;

    @media (min-width: 768px) {
      margin-top: 1.5em;
    }
  }

  :where(.p-lp-method__item-index) {
    display: block;
    width: fit-content;
    font-size: 1.7em;
    font-family: var(--_font-pinyon);
    line-height: 1;
  }

  :where(.p-lp-method__item-card) {
    width: calc(100% - 1.4em);
    margin-top: 3em;

    @media (min-width: 768px) {
      display: grid;
      grid-template:
        "heading heading"
        "description img";
      grid-template-columns: 4fr 3fr;
      gap: 0.5em 1em;
      width: 95%;
      margin: 3em auto 0;
    }
  }

  :where(.p-lp-method__card-heading) {
    font-family: var(--_font-sans);
    font-weight: 500;

    &::before {
      content: "◆";
      margin-right: 0.3em;
    }

    @media (min-width: 768px) {
      grid-area: heading;
    }
  }

  :where(.p-lp-method__card-description) {
    margin: 0.25em 0 0 1.4em;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;

    @media (min-width: 768px) {
      grid-area: description;
      margin-top: 0;
    }
  }

  :where(.p-lp-method__card-imgs) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    margin: 1em 0 0 1.25em;

    @media (min-width: 768px) {
      grid-area: img;
      gap: 5%;
      margin: 0;
    }
  }

  :where(.p-lp-method__card-img) {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  :where(:not(.p-lp-method__card-imgs) > .p-lp-method__card-img) {
    width: calc(100% - 1.25em);
    margin: 1em 0 0 1.25em;
    aspect-ratio: 2/1;

    @media (min-width: 768px) {
      margin: 0;
    }
  }

  :where(.p-lp-method__table) {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    margin-top: 3em;
    font-size: 0.75em;
    line-height: 1.25;

    @media (min-width: 768px) {
      max-width: 800px;
      margin: 4em auto 0;
    }

    :where(.p-lp-method__table-col--sample) {
      width: 43%;
    }

    :where(.p-lp-method__table-col--method) {
      width: 34%;
    }

    :where(.p-lp-method__table-col--load) {
      width: 23%;
    }

    :where(th, td) {
      height: 3em;
      padding: 0.65em 0.5em 0.45em;
      border: none;
      border-bottom: solid 2px var(--_color-secondary);
      font-family: var(--_font-sans);
      font-weight: 300;
      line-height: 1.5;
      vertical-align: bottom;
      line-break: strict;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    :where(th) {
      font-size: 1.1em;
      font-weight: 800;
      padding: 0.65em 0.5em 0.1em;
      text-align: center;
      vertical-align: middle;
      color: var(--_color-secondary);
      background-color: transparent;
    }

    :where(.u-lf) {
      font-family: inherit;
    }

    :where(td) {
      &:where(.value) {
        text-align: right;
      }
    }

    @media (min-width: 768px) {
      :where(td),
      :where(td.value) {
        text-align: center;
      }
    }

    :where(td:nth-child(2)) {
      white-space: nowrap;
    }

    @media (max-width: 767px) {
      :where(.p-lp-method__table-col--sample) {
        width: 39%;
      }

      :where(.p-lp-method__table-col--method) {
        width: 32%;
      }

      :where(.p-lp-method__table-col--load) {
        width: 29%;
      }

      :where(th, td) {
        height: 4em;
        padding: 0.65em 0.5em 0.65em;
        font-size: 1em;
        vertical-align: bottom;
      }

      :where(th:last-child) {
        letter-spacing: -0.06em;
        white-space: nowrap;
      }

      :where(th:last-child .u-lf) {
        display: inline;
      }

      :where(td:nth-child(2)) {
        font-size: 1em;
        letter-spacing: 0;
      }

      :where(.value) {
        font-size: 1em;
        white-space: nowrap;
      }
    }
  }

  :where(.p-lp-method__table-caption) {
    margin-bottom: 0.5em;
    font-family: var(--_font-sans);
    font-weight: 300;

    @media (min-width: 768px) {
      margin-bottom: 0.75em;
      font-size: 1.25em;
    }
  }
}

/* --- TANZO.のリング ------------------------------------------------ */
.p-lp-strength {
  display: flex;
  flex-direction: column;
  gap: 3.5em;
  margin-top: 3em;

  @media (min-width: 768px) {
    margin-top: 4em;
  }

  @media (min-width: 1024px) {
    max-width: 1024px;
    margin: 5em auto 0;
  }

  :where(.p-lp-strength__item) {
    display: grid;
    grid-template:
      "index heading"
      "description description"
      "img img";
    grid-template-columns: auto 1fr;
    gap: 0 1em;

    @media (min-width: 768px) {
      grid-template:
        "index heading ."
        "index description img";
      grid-template-columns: auto 2.5fr 1fr;
      gap: 0 1.5em;
    }
  }

  :where(.p-lp-strength__item-index) {
    grid-area: index;
    padding: 0.3em 0.5em 0.3em 0;
    font-size: 2em;
    font-family: var(--_font-pinyon);
    line-height: 1;
    border-right: solid 1px var(--_color-secondary);
    color: var(--_color-secondary);

    @media (min-width: 768px) {
      display: grid;
      place-items: center;
      padding: 0 0.4em 0 0;
      border-right: none;
      font-size: 2.25em;
    }
  }

  :where(.p-lp-strength__item-heading) {
    grid-area: heading;
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-size: 1.1em;
    line-height: 1.25;
    color: var(--_color-secondary);

    @media (min-width: 768px) {
      padding-bottom: 0.5em;
      border-bottom: solid 1px var(--_color-secondary);
    }
  }

  :where(.p-lp-strength__item-description) {
    grid-area: description;
    margin-top: 0.75em;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;

    a {
      text-decoration: underline;

      &:hover {
        opacity: 0.75;
        text-decoration: none;
      }
    }
  }

  :where(.p-lp-strength__item-notes) {
    display: block;
    margin-top: 0.75em;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
    text-indent: hanging 1em;
  }

  :where(.p-lp-strength__item-img) {
    grid-area: img;
    display: block;
    width: 60%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin: 1em auto 0;

    @media (min-width: 768px) {
      width: 100%;
      margin-top: 0;
    }
  }
}

/* --- 作品の軌跡 ------------------------------------------------ */
.p-lp-trajectory {
  display: flex;
  flex-direction: column;
  gap: 4em;
  margin-top: 3em;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5em 5%;
    margin-top: 4em;
  }

  @media (min-width: 1024px) {
    margin-top: 5em;
  }

  :where(.p-lp-trajectory__item) {
    display: grid;
    grid-template:
      "heading img"
      "heading description"
      "heading button";
    grid-template-columns: auto 1fr;
    gap: 0.5em 3.5%;
  }

  :where(.p-lp-trajectory__item-heading) {
    grid-area: heading;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    color: var(--_color-secondary);
  }

  :where(.p-lp-trajectory__item-index) {
    padding: 0 0.35em 0.25em 0.35em;
    font-size: 1.7em;
    font-family: var(--_font-pinyon);
    line-height: 1;
    border-bottom: 1px solid var(--_color-secondary);
  }

  :where(.p-lp-trajectory__item-title) {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  :where(.p-lp-trajectory__item-img) {
    grid-area: img;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
  }

  :where(.p-lp-trajectory__item-description) {
    grid-area: description;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;
  }

  :where(.p-lp-trajectory__item-button) {
    grid-area: button;
    margin-top: 1em;
    font-size: 0.875em;

    @media (min-width: 768px) {
      margin: 1em auto;
      padding: 0.4em 5em 0.4em 1.5em;
      font-size: 0.8em;
    }
  }
}

/* --- 完成までの流れ ------------------------------------------------ */
.p-lp-flow {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  margin-top: 3em;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3em 2.5%;
    margin-top: 4em;
  }

  @media (min-width: 1024px) {
    margin-top: 5em;
    gap: 4em 3.5%;
  }

  :where(.p-lp-flow__item) {
    display: grid;
    grid-template:
      "img heading"
      "img description";
    grid-template-columns: 5.5em 1fr;
    align-items: center;
    gap: 0.5em;
  }

  :where(.p-lp-flow__item-img) {
    grid-area: img;
    border-radius: 50%;
    border: 1px solid var(--_color-secondary);
  }

  :where(.p-lp-flow__item-heading) {
    grid-area: heading;
    padding-bottom: 0.5em;
    font-size: 1.1em;
    line-height: 1.125;
    border-bottom: 1px solid var(--_color-secondary);
    color: var(--_color-secondary);
  }

  :where(.p-lp-flow__item-index) {
    display: block;
    width: fit-content;
    font-family: var(--_font-pinyon);
  }

  :where(.p-lp-flow__item-description) {
    grid-area: description;
    font-size: 0.75em;
    font-family: var(--_font-sans);
    font-weight: 300;
    line-height: 1.5;
  }
}

/* --- CTA ------------------------------------------------ */
.p-lp-cta {
  padding: 3em 0;
  background-image:
    linear-gradient(0deg, oklch(0 0 0 / 0.5) 85%, oklch(0 0 0 / 1) 100%),
    url("https://www.tanzo.jp/wp-content/themes/tanzo/assets/images/lp/img3.jpg");
  background-size: cover;
  background-position: center;

  @media (min-width: 768px) {
    padding: 5em 0;
  }

  :where(.p-lp-cta__container) {
    width: 90%;
    margin: 0 auto;
    padding: 2em 4%;
    background: oklch(0 0 0 / 0.65);

    @media (min-width: 768px) {
      max-width: var(--_container-max-width);
      padding: 2em 4% 2.5em;
    }
  }

  :where(.p-lp-cta__heading) {
    padding-bottom: 0.95em;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.25;
    border-bottom: 1px solid var(--_color-secondary);
    color: var(--_color-secondary);
  }

  :where(.p-lp-cta__description) {
    margin-top: 1.5em;
    text-align: center;
    font-size: 0.875em;

    @media (min-width: 768px) {
      line-height: 1.5;
    }
  }

  .p-lp-cta__description,
  .p-lp-cta__description :where(p, span) {
    font-family: var(--_font-serif);
    font-weight: 300;
  }

  :where(.p-lp-cta__description-text + .p-lp-cta__description-text) {
    margin-top: 1.25em;

    @media (min-width: 768px) {
      margin-top: 0;
    }
  }

  :where(.p-lp-cta__buttons) {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    margin-top: 2em;

    @media (min-width: 768px) {
      flex-direction: row;
      gap: 3.5%;
      max-width: 720px;
      margin: 1.5em auto 0;
    }
  }

  :where(.p-lp-cta__button) {
    width: 80%;
    margin: 0 auto;
  }
}