/**
 * 応用電機 — サイト固有スタイル（Lism CSS トークン上書き + Block / Custom）
 * main.css の後に読み込む。
 */

@layer lism-base {
  html {
    scroll-padding-top: var(--s60);
  }

  :root {
    /* 産業機器メーカー向け: 信頼感のネイビー + 加熱を想起するオレンジ */
    --brand: oklch(42% 0.11 245);
    --accent: oklch(62% 0.17 52);
    --link: oklch(42% 0.11 245);
    --text: oklch(22% 0.02 245);
    --text-2: oklch(42% 0.03 245);
    --base: oklch(99% 0.005 245);
    --base-2: oklch(96% 0.012 245);
    --divider: oklch(90% 0.015 245);
    --ff--base: "Noto Sans JP", -apple-system, "BlinkMacSystemFont", "Hiragino Sans",
      sans-serif;
    --fw--bold: 700;
    /* ワイドディスプレイ向けコンテンツ幅（流体 fz ではなくレイアウト幅のみ拡張） */
    --sz--xl: 76rem;
    /* 角丸: Lism 既定より一段控えめ（-bdrs:20/30 等が全体に効く） */
    --bdrs--20: 0.25rem;
    --bdrs--30: 0.375rem;
    --bdrs--40: 0.625rem;
    --bdrs--50: 1rem;
  }

  @media (min-width: 800px) {
    :root {
      --gutter--base: var(--s35);
    }
  }

  @media (min-width: 1120px) {
    :root {
      --gutter--base: var(--s40);
      --sz--xl: 82rem;
    }
  }

  @media (min-width: 1400px) {
    :root {
      --gutter--base: var(--s50);
      --sz--xl: 88rem;
    }
  }
}

@layer lism-block {
  .b--btn {
    --bgc: transparent;
    --bdc: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s10);
    padding: var(--s15) var(--s30);
    border-radius: var(--bdrs--30);
    border: solid 1px var(--bdc);
    background-color: var(--bgc);
    color: var(--c, inherit);
    font-weight: var(--fw--bold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .b--btn.b--btn--primary {
    --bgc: var(--accent);
    --c: var(--white);
    --bdc: transparent;
  }

  .b--btn.b--btn--primary:hover {
    filter: brightness(0.95);
  }

  .b--btn.b--btn--outline {
    --bdc: color-mix(in srgb, currentColor, transparent 55%);
  }

  .b--btn.b--btn--ghost {
    --bgc: transparent;
    --bdc: color-mix(in srgb, currentColor, transparent 60%);
  }

  .b--btn.b--btn--compact {
    padding: var(--s5) var(--s15);
    font-size: var(--fz--xs);
    gap: var(--s5);
    border-radius: 0;
    --bgc: var(--accent);
    --c: var(--white);
    --bdc: transparent;
  }

  .b--btn.b--btn--compact svg {
    flex-shrink: 0;
    inline-size: 0.875em;
    block-size: 0.875em;
  }

  .b--btn.b--btn--compact:hover {
    filter: brightness(0.95);
  }
}

@layer lism-custom {
  .c--profile_row {
    --profile-label: 9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s10);
    position: relative;
    padding-block: var(--s25);
  }

  .c--profile_row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    block-size: 1px;
    background: linear-gradient(
      to right,
      var(--brand) 0 var(--profile-label),
      var(--divider) var(--profile-label)
    );
  }

  @media (min-width: 800px) {
    .c--profile_row {
      grid-template-columns: var(--profile-label) minmax(0, 1fr);
      column-gap: var(--s50);
      align-items: start;
      padding-block: var(--s30);
    }
  }

  .c--featureItem {
    display: flex;
    flex-direction: column;
    gap: var(--s25);
    block-size: 100%;
    background-color: var(--base);
    color: var(--text);
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease;
  }

  .c--featureItem_num {
    color: var(--accent);
    transition: color 0.25s ease;
  }

  .c--featureItem_text {
    color: var(--text-2);
    transition: color 0.25s ease;
  }

  .c--featureItem_arrow {
    display: block;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    margin-block-start: auto;
    margin-inline: auto;
    color: var(--accent);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(0);
    transition:
      color 0.25s ease,
      transform 0.25s ease;
  }

  @media (hover: hover) {
    .c--featureItem:is(:hover, :focus-visible) {
      border-color: var(--brand);
      background-color: var(--brand);
      color: var(--white);
    }

    .c--featureItem:is(:hover, :focus-visible) .c--featureItem_num {
      color: var(--white);
    }

    .c--featureItem:is(:hover, :focus-visible) .c--featureItem_text {
      color: color-mix(in srgb, var(--white), transparent 12%);
    }

    .c--featureItem:is(:hover, :focus-visible) .c--featureItem_arrow {
      color: var(--white);
      transform: rotate(45deg) translateY(var(--s10));
    }
  }

  .c--aboutBlock {
    scroll-margin-top: var(--s60);
    padding-block: var(--s20);
  }

  @media (min-width: 800px) {
    .c--aboutBlock {
      padding-block: var(--s30);
    }
  }

  .c--featureItem_media img {
    display: block;
    width: 100%;
    height: auto;
  }

  .c--mediaTextSplit > * {
    min-inline-size: 0;
  }

  .c--historyBand {
    position: relative;
    isolation: isolate;
    color: var(--text);
    background-color: var(--base);
    background-image: linear-gradient(color-mix(in srgb, var(--base), transparent 28%), color-mix(in srgb, var(--base), transparent 28%)), url("/assets/images/company/bg_history.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .c--historyBand .c--sectionHead_ja,
  .c--historyBand .c--sectionHead_en,
  .c--historyBand .c--history_when {
    color: var(--text);
  }

  .c--historyBand .c--history_item::before {
    background: color-mix(in srgb, var(--text), transparent 55%);
  }

  .c--historyBand .c--history_mark {
    background: var(--brand);
  }

  @media (max-width: 799px) {
    .c--historyBand {
      background-attachment: scroll;
    }
  }

  .c--history {
    --history-year: 7rem;
    --history-gap: var(--s30);
    --history-mark: var(--s15);
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .c--history_item {
    display: grid;
    grid-template-columns: minmax(0, var(--history-year)) var(--history-mark) minmax(0, 1fr);
    column-gap: var(--history-gap);
    align-items: center;
    position: relative;
    padding-block: var(--s20);
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .c--history_item::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(var(--history-year) + var(--history-gap) + (var(--history-mark) / 2));
    top: 0;
    bottom: 0;
    inline-size: 1px;
    background: color-mix(in srgb, var(--brand), transparent 45%);
    transform: translateX(-50%);
  }

  .c--history_item:first-child::before {
    top: 50%;
  }

  .c--history_item:last-child::before {
    bottom: 50%;
  }

  .c--history_item:first-child:last-child::before {
    content: none;
  }

  .c--history_mark {
    position: relative;
    z-index: 1;
    inline-size: var(--history-mark);
    block-size: var(--history-mark);
    border-radius: var(--bdrs--99);
    background: var(--brand);
  }

  .c--history_when,
  .c--history_events {
    position: relative;
    z-index: 1;
    min-inline-size: 0;
  }

  .skip-link {
    position: absolute;
    left: var(--s20);
    top: var(--s20);
    z-index: 200;
    padding: var(--s10) var(--s20);
    background: var(--text);
    color: var(--base);
    border-radius: var(--bdrs--20);
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .c--pageHero_inner {
    position: relative;
    z-index: 1;
  }

  .c--siteHeader {
    backdrop-filter: blur(12px);
    background-color: color-mix(in srgb, var(--base), transparent 8%);
  }

  .c--siteHeader_shell {
    display: contents;
  }

  .c--siteHeader_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s20);
  }

  .c--siteHeader_logo {
    display: block;
    block-size: clamp(2rem, 4.5vw, 2.75rem);
    inline-size: auto;
    max-inline-size: min(100%, 22rem);
  }

  .c--siteHeader_menuBtn {
    position: relative;
    z-index: 104;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s10);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text);
  }

  .c--siteHeader_menuIcon {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentcolor;
    border-radius: 1px;
  }

  .c--siteHeader_menuIcon::before,
  .c--siteHeader_menuIcon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentcolor;
    border-radius: 1px;
    transition: transform 0.2s ease, top 0.2s ease;
  }

  .c--siteHeader_menuIcon::before {
    top: -7px;
  }

  .c--siteHeader_menuIcon::after {
    top: 7px;
  }

  .c--siteHeader_menuBtn[aria-expanded="true"] .c--siteHeader_menuIcon {
    background: transparent;
  }

  .c--siteHeader_menuBtn[aria-expanded="true"] .c--siteHeader_menuIcon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .c--siteHeader_menuBtn[aria-expanded="true"] .c--siteHeader_menuIcon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .c--siteNavBackdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: color-mix(in srgb, var(--text), transparent 55%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease;
  }

  .c--siteNavBackdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html.is-navOpen .c--siteHeader {
    z-index: 101;
    backdrop-filter: none;
    background-color: var(--base);
  }

  .c--siteHeader_navPanel {
    position: fixed;
    z-index: 103;
    isolation: isolate;
    inset-block: 0;
    inset-inline-end: 0;
    block-size: 100dvh;
    max-block-size: 100dvh;
    inline-size: min(88vw, 22rem);
    display: flex;
    flex-direction: column;
    flex: none;
    margin: 0;
    padding: var(--s60) var(--s35) var(--s40);
    border-block-start: none;
    background-color: var(--base);
    box-shadow: -8px 0 32px color-mix(in srgb, var(--text), transparent 82%);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.32s ease,
      visibility 0.32s ease;
  }

  .c--siteHeader_navPanel.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }

  html.is-navOpen {
    overflow: hidden;
  }

  html.is-navOpen .c--pageBlur {
    filter: blur(8px);
  }

  .c--siteHeader_menuBtn.is-floating {
    position: fixed;
    z-index: 104;
    inset-block-start: var(--s20);
    inset-inline-end: max(1rem, var(--gutter--base, 1.25rem));
    background-color: var(--base);
    border-radius: 999px;
  }

  .c--siteHeader_navList {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s20);
    list-style: none;
    margin: 0;
    padding: var(--s10) 0 0;
    font-size: var(--fz--l);
  }

  .c--siteHeader_navLink {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding-block: var(--s5);
  }

  .c--siteHeader_navEn {
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
  }

  .c--siteHeader_navCta {
    padding-block-start: var(--s10);
    align-items: stretch;
  }

  .c--siteHeader_navTel {
    display: block;
    font-size: var(--fz--3xl);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
  }

  .c--siteHeader_navTel:hover {
    text-decoration: underline;
  }

  .c--siteHeader_contactBtn {
    inline-size: 100%;
    min-inline-size: 10.75rem;
    padding-block: var(--s10);
    padding-inline: var(--s35);
  }

  /* 800px 以上: 横並びナビ（ビューポート基準・Lism md と同値） */
  @media (min-width: 800px) {
    .c--siteHeader_inner {
      flex-wrap: nowrap;
      gap: var(--s30);
    }

    .c--siteHeader_brand {
      flex-shrink: 0;
    }

    .c--siteHeader_menuBtn {
      display: none;
    }

    .c--siteNavBackdrop {
      display: none;
    }

    .c--siteHeader_shell {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: space-between;
      gap: var(--s30);
    }

    .c--siteHeader_inner {
      align-items: center;
    }

    .c--siteHeader_navPanel {
      position: static;
      inset: auto;
      block-size: auto;
      max-block-size: none;
      inline-size: auto;
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
      flex: 1 1 auto;
      flex-direction: row;
      padding: 0;
      border-block-start: none;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      transform: none;
      visibility: visible;
      pointer-events: auto;
      transition: none;
    }

    .c--siteHeader_navList {
      flex: 1 1 auto;
      inline-size: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: flex-end;
      gap: var(--s25) var(--s30);
      padding: 0;
      font-size: var(--fz--s);
    }

    .c--siteHeader_navLink {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      block-size: 100%;
      padding-block: 0;
    }

    .c--siteHeader_navLink[aria-current="page"]::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: calc((var(--s25) - 3px) * -1);
      block-size: 3px;
      background-color: var(--brand);
    }

    .c--siteHeader_navList > li:not(.c--siteHeader_navCta) {
      display: flex;
      align-items: stretch;
      align-self: stretch;
      padding-block-start: 0;
    }

    .c--siteHeader_navCta {
      padding-block-start: 0;
      align-items: stretch;
    }

    .c--siteHeader_navTel {
      font-size: 1.5rem;
      letter-spacing: 0.025em;
    }

    .c--siteHeader_contactBtn {
      min-inline-size: 11.5rem;
      padding-block: var(--s5);
      padding-inline: var(--s40);
    }
  }

  @media (min-width: 1120px) {
    .c--siteHeader_navList {
      gap: var(--s25) var(--s40);
    }
  }

  .c--frontHero {
    display: flex;
    flex-direction: column;
    min-block-size: min(88vh, 56rem);
    background-image: linear-gradient(
      155deg,
      oklch(26% 0.05 245) 0%,
      oklch(32% 0.08 245) 50%,
      oklch(36% 0.1 245) 100%
    );
  }

  .c--frontHero_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: clamp(7rem, calc(54vh - 6rem), 15rem);
  }

  .c--scrollHint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s10);
    margin-block-start: auto;
    padding-block: var(--s40) var(--s50);
    font-size: var(--fz--xs);
    letter-spacing: var(--lts--xl);
    text-transform: uppercase;
    opacity: var(--o--pp);
  }

  .c--scrollHint_label {
    display: block;
  }

  .c--scrollHint_icon {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    animation: scrollHintBounce 1.6s ease-in-out infinite;
  }

  @keyframes scrollHintBounce {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(0.45rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c--scrollHint_icon {
      animation: none;
    }
  }

  .c--sectionHead {
    --sectionHead-after-title: var(--s30);
  }

  .c--sectionHead_titleRow {
    justify-content: flex-start;
  }

  .c--sectionHead_en {
    color: var(--text-2);
    letter-spacing: 0.06em;
    translate: 0 0.3em;
  }

  .c--sectionHead_lead {
    /* u--trim の margin-block より padding で見出しとの間隔を確保 */
    padding-block-start: var(--sectionHead-after-title);
    max-inline-size: 52rem;
  }

  @media (min-width: 800px) {
    .c--sectionHead {
      --sectionHead-after-title: var(--s35);
    }

    .c--sectionHead_ja {
      font-size: var(--fz--5xl);
    }

    .c--sectionHead_lead {
      font-size: var(--fz--l);
    }
  }

  @media (min-width: 1120px) {
    .c--sectionHead {
      --sectionHead-after-title: var(--s40);
    }
  }

  .c--productSpecPanel .c--sectionHead_ja {
    color: var(--brand);
  }

  .c--productSpecRows dt,
  .c--productSpecRows dd p {
    font-size: var(--fz--m);
  }

  @media (min-width: 800px) {
    .c--productSpecRows dt,
    .c--productSpecRows dd p {
      font-size: var(--fz--l);
    }
  }

  .c--featureCircles {
    --featureCircles-size: min(16.5rem, 78vw);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--s40);
    list-style: none;
    margin: 0;
    padding: var(--s10) 0 0;
  }

  .c--featureCircles_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: min(100%, var(--featureCircles-size));
    min-width: 0;
  }

  .c--featureCircles_disc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s15);
    inline-size: 100%;
    aspect-ratio: 1;
    padding: clamp(1.25rem, 12%, 2.25rem);
    border: 3px solid var(--divider);
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
  }

  .c--featureCircles_num {
    display: block;
    flex: 0 0 auto;
    color: var(--accent);
    font-size: calc(var(--fz--s) * 2);
    font-weight: var(--fw--bold);
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .c--featureCircles_title {
    margin: 0;
    max-inline-size: 11em;
    font-size: var(--fz--m);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .c--featureCircles_text {
    margin: var(--s20) 0 0;
    max-inline-size: 100%;
    text-align: center;
  }

  @media (min-width: 640px) {
    .c--featureCircles {
      --featureCircles-size: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-items: stretch;
      gap: var(--s30) var(--s25);
    }

    .c--featureCircles_item {
      inline-size: 100%;
    }

    .c--featureCircles_disc {
      inline-size: min(100%, 18rem);
      margin-inline: auto;
    }
  }

  @media (min-width: 1120px) {
    .c--featureCircles {
      --featureCircles-overlap: 0.14;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
    }

    .c--featureCircles_item {
      z-index: calc(var(--featureCircles-z, 0) + 1);
    }

    .c--featureCircles_disc {
      inline-size: calc(100% + (100% * var(--featureCircles-overlap)));
      max-inline-size: none;
    }

    .c--featureCircles_text {
      max-inline-size: 92%;
    }

    .c--featureCircles_title {
      max-inline-size: none;
      min-block-size: 2lh;
      font-size: var(--fz--l);
    }

    .c--featureCircles_titleLine {
      display: block;
    }
  }

  .c--frontNews {
    padding-block: var(--s35);
  }

  .c--frontNews_list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block: 1px dotted var(--divider);
  }

  .c--frontNews_item {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    padding-block: var(--s15);
    border-block-end: 1px dotted var(--divider);
  }

  .c--frontNews_item:last-child {
    border-block-end: none;
  }

  .c--frontNews_date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (min-width: 640px) {
    .c--frontNews {
      padding-block: var(--s40);
    }

    .c--frontNews_item {
      flex-direction: row;
      align-items: baseline;
      gap: var(--s25);
      padding-block: var(--s12);
    }

    .c--frontNews_date {
      flex: 0 0 10.5rem;
    }

    .c--frontNews_title {
      flex: 1 1 auto;
      min-width: 0;
    }
  }

  @media (min-width: 800px) {
    .c--frontNews {
      padding-block: var(--s45);
    }
  }

  .c--placeholderMedia {
    background: repeating-linear-gradient(
      -45deg,
      var(--base-2),
      var(--base-2) 8px,
      var(--divider) 8px,
      var(--divider) 16px
    );
  }

  .c--inductionList {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .c--inductionList .l--cluster > :last-child {
    flex: 1 1 auto;
    min-inline-size: 0;
    line-break: strict;
  }

  @media (min-width: 1120px) {
    .c--inductionUseCols.l--columns {
      --cols: 2;
    }
  }

  .c--inductionIndustry {
    --inductionIndustry-photoW: 17.5rem;
    display: grid;
    gap: var(--s25);
    align-items: stretch;
    padding: var(--s30);
    border: 1px solid var(--divider);
    border-radius: var(--bdrs--30);
    background: var(--base);
    overflow: hidden;
  }

  .c--inductionIndustry_meta {
    margin: calc(var(--s30) * -1);
    margin-block-end: 0;
    padding: var(--s30);
    background-color: var(--brand);
    color: var(--base);
    justify-content: center;
  }

  .c--inductionIndustry_meta > p {
    color: inherit;
  }

  .c--inductionIndustry_term {
    font-size: var(--fz--xl);
  }

  .c--inductionIndustry_desc {
    font-size: var(--fz--m);
  }

  .c--inductionIndustry_dl {
    margin: 0;
  }

  .c--inductionIndustry_dl dd {
    margin: var(--s10) 0 0;
  }

  .c--inductionIndustry_icon {
    inline-size: 5rem;
    block-size: 5rem;
    margin-inline: auto;
  }

  .c--inductionIndustry_icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .c--inductionIndustry_photo {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-block-size: 100%;
  }

  .c--inductionIndustry_photo img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 100%;
    object-fit: contain;
    object-position: center top;
  }

  @media (min-width: 800px) {
    .c--inductionIndustry {
      grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) var(--inductionIndustry-photoW);
      column-gap: var(--s35);
      padding: var(--s35) var(--s40);
    }

    .c--inductionIndustry_meta {
      margin-block: calc(var(--s35) * -1);
      margin-inline-start: calc(var(--s40) * -1);
      margin-inline-end: 0;
      padding: var(--s35) var(--s25);
      align-self: stretch;
    }

    .c--inductionIndustry_photo {
      inline-size: var(--inductionIndustry-photoW);
      max-inline-size: var(--inductionIndustry-photoW);
    }

    .c--inductionIndustry_photo img {
      inline-size: 100%;
      block-size: 100%;
      max-block-size: none;
      object-fit: contain;
      object-position: center;
    }
  }

  .c--inductionGalleryWrap {
    inline-size: 100%;
    padding-block: var(--s35);
  }

  @media (min-width: 800px) {
    .c--inductionGalleryWrap {
      padding-block: var(--s50);
    }
  }

  .c--inductionGallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s30);
    row-gap: var(--s45);
    inline-size: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c--inductionGallery_caption {
    font-size: var(--fz--m);
    line-height: var(--lh--l);
    padding-block: var(--s5);
  }

  .c--inductionGallery_media {
    border-radius: 0;
    border: 1px solid var(--divider);
  }

  .c--inductionGallery_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 800px) {
    .c--inductionGallery {
      gap: var(--s35);
      row-gap: var(--s60);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .c--inductionGallery_caption {
      font-size: var(--fz--l);
      padding-block: var(--s10);
    }
  }

  .c--homeInductionExcerpt > .c--sectionHead {
    margin-block-end: var(--s15);
  }

  @media (min-width: 800px) {
    .c--homeInductionExcerpt > .c--sectionHead {
      margin-block-end: var(--s20);
    }
  }

  .c--homeInductionExcerpt_cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s30);
    align-items: center;
  }

  @media (min-width: 800px) {
    .c--homeInductionExcerpt_cols {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--s60);
    }

    .c--homeInductionExcerpt .c--inductionIntro_media {
      block-size: auto;
      min-block-size: 0;
    }

    .c--homeInductionExcerpt .c--inductionIntro_media img {
      block-size: auto;
    }
  }

  .c--inductionIntro_media {
    display: flex;
    align-items: stretch;
    min-block-size: 0;
  }

  .c--inductionIntro_media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
    object-position: center top;
  }

  @media (min-width: 800px) {
    .c--inductionIntro_media {
      block-size: 100%;
      min-block-size: 100%;
    }

    .c--inductionIntro_media img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: contain;
      object-position: center;
    }

    .c--inductionIntro_body {
      min-inline-size: 0;
    }
  }

  .c--productNotice {
    background-image: linear-gradient(100deg, #141414 0%, var(--brand) 78%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .c--productCustom {
    background-color: var(--brand);
    background-image: linear-gradient(100deg, #141414 0%, var(--brand) 78%);
  }

  .c--card > .l--frame {
    background-color: #fff;
  }

  .c--card .l--frame img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center;
  }

  .c--card--product .c--card_body {
    background-color: var(--brand);
    color: #fff;
  }

  .c--card--product.is--boxLink .c--card_body {
    color: #fff;
  }

  .c--card--product .c--card_title {
    color: #fff;
  }

  .c--card--product.is--boxLink .c--card_title {
    color: #fff;
  }

  .c--card--product .c--card_label {
    color: color-mix(in srgb, #fff, transparent 22%);
  }

  .c--card--product.is--current .c--card_label {
    color: var(--accent);
  }

  .c--card--product .c--card_body .-c\:text-2 {
    color: color-mix(in srgb, #fff, transparent 18%);
  }

  .c--card:hover {
    border-color: color-mix(in srgb, var(--brand), transparent 70%);
  }

  .c--card.is--current {
    border-color: var(--brand);
    border-width: 2px;
    background-color: var(--base-2);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand), transparent 75%);
  }

  .c--card.is--current:hover {
    border-color: var(--brand);
  }

  .c--ctaContact_inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--bdrs--30);
    border: 1px solid var(--divider);
  }

  .c--ctaContact_media {
    min-block-size: 14rem;
  }

  .c--ctaContact_body {
    background-color: var(--text);
    color: var(--base);
    padding: var(--s40) var(--s35);
  }

  .c--ctaContact_note {
    color: color-mix(in srgb, var(--base), transparent 18%);
  }

  .c--ctaContact_tel > .c--ctaContact_telNum {
    margin-block-start: -0.125em;
  }

  .c--ctaContact_telNum:hover {
    opacity: var(--o--p);
  }

  @media (min-width: 800px) {
    .c--ctaContact_inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-block-size: 18rem;
    }

    .c--ctaContact_media {
      min-block-size: 100%;
    }

    .c--ctaContact_body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--s50) var(--s60);
    }
  }

  .c--siteFooter {
    --footer-fg: var(--base);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--brand);
    color: var(--footer-fg);
    padding-block: var(--s60) var(--s50);
  }

  .c--siteFooter_bgLogo {
    position: absolute;
    z-index: 0;
    inset-block-end: 0;
    inset-inline-end: max(0px, calc(var(--gutter--base, 1.25rem) * -0.25));
    inline-size: min(75vw, 56rem);
    block-size: auto;
    max-inline-size: none;
    pointer-events: none;
    user-select: none;
    opacity: 0.15;
    filter: brightness(1.85) contrast(1.05);
  }

  @media (min-width: 800px) {
    .c--siteFooter_bgLogo {
      inline-size: min(72vw, 53rem);
    }
  }

  .c--siteFooter > .is--wrapper {
    position: relative;
    z-index: 1;
  }

  @media (min-width: 800px) {
    .c--siteFooter {
      padding-block: var(--s70) var(--s60);
    }
  }

  .c--siteFooter_grid {
    display: grid;
    gap: var(--s40);
    align-items: start;
    grid-template-areas:
      "brand"
      "nav"
      "copy"
      "pagetop";
  }

  .c--siteFooter_brand {
    grid-area: brand;
  }

  .c--siteFooter_logoImg {
    display: block;
    block-size: clamp(2rem, 4.5vw, 2.75rem);
    inline-size: auto;
    max-inline-size: min(100%, 22rem);
  }

  .c--siteFooter_nav {
    grid-area: nav;
  }

  .c--siteFooter_copy {
    grid-area: copy;
    margin: 0;
    padding-block-start: var(--s10);
  }

  @media (min-width: 800px) {
    .c--siteFooter_grid {
      grid-template-columns: minmax(16rem, 22rem) max-content 1fr;
      grid-template-areas:
        "brand nav pagetop"
        "copy  nav pagetop";
      gap: var(--s30) var(--s40);
      row-gap: var(--s40);
    }

    .c--siteFooter_copy {
      align-self: end;
      padding-block-start: 0;
    }
  }

  @media (min-width: 1120px) {
    .c--siteFooter_grid {
      grid-template-columns: minmax(18rem, 24rem) max-content 1fr;
      column-gap: var(--s50);
    }
  }

  .c--siteFooter_navList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s20);
  }

  @media (min-width: 800px) {
    .c--siteFooter_navList {
      gap: var(--s25);
    }
  }

  .c--siteFooter_navLink {
    color: var(--footer-fg);
    text-decoration: none;
    font-size: var(--fz--l);
    font-weight: var(--fw--bold);
    letter-spacing: var(--lts--s);
    transition: opacity 0.2s ease;
  }

  .c--siteFooter_navLink:hover {
    opacity: var(--o--p);
  }

  .c--siteFooter_contact a:hover {
    opacity: var(--o--p);
  }

  .c--pageTop {
    grid-area: pagetop;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s10);
    color: var(--footer-fg);
    text-decoration: none;
  }

  .c--pageTop_arrow {
    display: block;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-inline-start: 2px solid currentColor;
    border-block-start: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .c--pageTop:hover {
    opacity: var(--o--p);
  }

  .c--siteFooter_divider {
    border: 0;
    border-block-start: 1px dotted color-mix(in srgb, var(--footer-fg), transparent 45%);
    margin-block: var(--s40) 0;
    inline-size: 100%;
    max-inline-size: 16rem;
  }

  .c--googleMap {
    --ar: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--divider);
    border-radius: var(--bdrs--30);
    background: var(--base-2);
    filter: grayscale(1);
  }

  .c--googleMap iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-block-size: 100%;
    border: 0;
  }

  .c--googleMap--hero {
    --ar: 21 / 9;
    inline-size: 100%;
    min-block-size: min(22rem, 72vw);
  }

  .c--accessSection {
    padding-block: 0;
  }

  .c--accessSection .c--googleMapWrap {
    margin-block-start: 0;
  }

  .c--accessSection .c--googleMap--fullBleed {
    --ar: unset;
    aspect-ratio: auto;
    position: relative;
    block-size: min(22rem, 72vw);
    min-block-size: unset;
  }

  .c--accessSection .c--googleMap--fullBleed iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .c--accessSection_body {
    padding-block: var(--s50);
  }

  .c--accessSection_body img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 800px) {
    .c--accessSection_body {
      padding-block: var(--s60);
    }

    .c--accessSection .c--googleMap--fullBleed {
      block-size: 28rem;
    }
  }

  @media (min-width: 1120px) {
    .c--accessSection_body {
      padding-block: var(--s70);
    }

    .c--accessSection .c--googleMap--fullBleed {
      block-size: 36rem;
    }
  }

  .c--googleMap--fullBleed {
    border-radius: 0;
    border-inline: none;
    --ar: 16 / 7;
  }

  @media (min-width: 800px) {
    .c--googleMap--hero {
      min-block-size: 26rem;
    }

    .c--googleMap--fullBleed {
      min-block-size: 28rem;
      --ar: 21 / 8;
    }
  }

  @media (min-width: 1120px) {
    .c--googleMap--hero {
      min-block-size: 32rem;
    }

    .c--googleMap--fullBleed {
      min-block-size: 36rem;
    }
  }
}

/* レイヤー外: Property Class の文字色より優先してグラデーションを乗せる */
.c--pageHero_bgLabel {
  position: absolute;
  z-index: 0;
  top: 62%;
  right: calc(var(--gutter, var(--s30)) * -0.35);
  left: auto;
  margin: 0;
  font-size: clamp(3.5rem, 12vw, 8.5rem);
  font-weight: var(--fw--bold);
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: end;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.18;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.55) 0%,
    var(--brand) 68%,
    var(--brand) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.c--card--product > .l--frame {
  aspect-ratio: 5 / 4;
}

@media (min-width: 640px) {
  .c--card--product > .l--frame {
    aspect-ratio: 4 / 3;
  }
}