@charset "UTF-8";
/* ============================================================
   株式会社エヌエスセミコン 共通CSS
   - カラーはDESIGN.md「カラーパレット(確定)」の実測値のみ使用
   - 赤 #D01000 は ::before マーカー類のみ(テキスト・ボタン禁止)
   - 紫 #65649C はメインビジュアル演出のみ(UIパーツ禁止)
   - デザイン言語:余白+現行踏襲の赤マーカー記号。シグネチャーはヒーロー航路図
   - レイヤー構成: reset < base < components < layout < utilities
   ============================================================ */

:root {
  /* --- カラー(DESIGN.md実測値) --- */
  --color-base: #FFFFFF;
  --color-base-alt: #F6F7FA;
  --color-text: #1A1A1A;
  --color-text-sub: #5A6270;
  --color-muted: #757575;         /* 中間グレー(連絡先ページの大きな数値・メールアドレス)。contact.png実測 */
  --color-primary: #162142;
  --color-accent: #4F75B9;
  --color-accent-hover: #3E5F9C;
  --color-accent-red: #D01000;    /* ::beforeマーカー専用 */
  --color-visual-purple: #65649C; /* メインビジュアル演出専用。現状はMVが写真のため未使用 */
  --color-heading: #113377;       /* セクション見出し(英語メイン)専用 */
  --color-line: #D9DDE4;
  --color-line-tile: #E3E7EF;     /* タイル枠線(--color-lineより淡い) */
  --color-line-invert: rgb(255 255 255 / 0.2);
  /* 影・backdrop・MVグロー用。rgb()のスペース区切り記法で不透明度を都度指定する */
  --shadow-rgb: 11 22 44;         /* 紺(#162142系)の影 */
  --mv-glow-rgb: 11 44 77;        /* MV社名のグロー専用 */

  /* --- タイポグラフィ(フルード) --- */
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --fs-s: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --fs-m: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --fs-l: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);

  /* --- 余白(フルード) --- */
  --space-2xs: clamp(0.375rem, 0.35rem + 0.15vw, 0.5rem);
  --space-xs: clamp(0.625rem, 0.55rem + 0.3vw, 0.875rem);
  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --space-l: clamp(2.5rem, 2rem + 2.2vw, 4.5rem);
  --space-xl: clamp(3.5rem, 2.8rem + 3.5vw, 6.5rem);

  /* --- レイアウト --- */
  --container-max: 72rem;
  --container-pad: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --radius: 3px; /* 操作要素のみ。面には使わない */
  --radius-card: 6px; /* 面の角丸。既定では面に角丸を使わないが、連絡先カードのみ例外(contact.png準拠) */
  --header-h: 4.75rem; /* 白1段バー(実測75px。ロゴ120px固定でPC/モバイル共通) */
}

@layer reset, base, components, layout, utilities;

/* ============================== reset ============================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }
  ul,
  ol {
    padding: 0;
    list-style: none;
  }
  img,
  svg {
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: middle;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  table {
    border-collapse: collapse;
  }
}

/* ============================== base ============================== */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    font-family: var(--font-ja);
    font-size: var(--fs-m);
    line-height: 1.85;
    color: var(--color-text);
    background: var(--color-base);
    overflow-wrap: anywhere;
  }
  /* 固定ヘッダー分のアンカーオフセット(DESIGN.md ナビゲーション仕様) */
  [id] {
    scroll-margin-block-start: calc(var(--header-h) + 1rem);
  }
  a {
    color: var(--color-accent-hover);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  /* ホバー演出はマウス等のポインタがある環境だけ。タッチ端末(iOS)ではタップで :hover が
     適用されたまま残り、別の場所をタップするまで解除されないため */
  @media (hover: hover) {
    a:hover {
      color: var(--color-accent);
    }
  }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  em {
    font-style: normal;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1.4;
    text-wrap: balance;
    font-feature-settings: "palt" 1; /* 見出しは詰め組みで人の手の組版に寄せる */
  }
  /* p に text-wrap: pretty は使わない。
     WebKit(Safari)は段落全体の行長を揃える最適化として実装しているため、
     和文の本文で1行目をわざと短く折り返し、右側が大きく空いて左に寄って見える
     (Chromeは行末の孤立語を避ける程度で、エンジン間の差が大きい)。
     見出し(h1〜h4)の text-wrap: balance は意図どおりの挙動なので維持する */
}

/* ============================== components ============================== */
@layer components {
  /* --- セクション見出し:赤■マーカー(現行サイト踏襲)+日本語+英中小見出し --- */
  .c-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5em;
    row-gap: 0.15em;
    margin-block-end: var(--space-m);
  }
  /* メイン=英語(大)。Interで組む */
  .c-heading__main {
    font-family: var(--font-en);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-heading);
  }
  /* サブ=日本語(小) */
  .c-heading__sub {
    font-family: var(--font-ja);
    font-size: var(--fs-s);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text);
  }
  /* --- Facebook フィード(第三者ウィジェット SociableKIT の埋め込み枠) ---
     min-height でロード完了までの高さを予約し、ウィジェット注入時のレイアウトシフトを
     抑える。ウィジェットは幅100%でコンテナ(最大1152px)に収まり、SPは自動で1カラム化する */
  .c-fb-feed {
    min-block-size: 40rem; /* PC:実ウィジェット高に合わせて調整可 */
  }
  .c-fb-feed .sk-ww-facebook-page-posts {
    inline-size: 100%;
  }
  @media (max-width: 39.999em) {
    .c-fb-feed {
      min-block-size: 32rem; /* SP:予約高を控えめに */
    }
  }

  /* --- 小見出し(下層・セクション内) --- */
  .c-subheading {
    position: relative;
    padding-inline-start: 0.85em;
    margin-block-end: var(--space-s);
    font-size: var(--fs-l);
    font-weight: 700;
    color: var(--color-primary);
  }
  .c-subheading::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.25em;
    inline-size: 4px;
    background: var(--color-accent-red);
  }

  /* --- ボタン --- */
  .c-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.8em 1.8em;
    border-radius: var(--radius);
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
  }
  .c-btn .c-icon {
    transition: translate 0.25s;
  }
  .c-btn--primary {
    color: #fff;
    background: var(--color-primary);
  }
  .c-btn--ghost {
    color: var(--color-primary);
    border-color: currentcolor;
  }
  @media (hover: hover) {
    .c-btn:hover .c-icon {
      translate: 4px 0;
    }
    .c-btn--primary:hover {
      color: #fff;
      background: var(--color-accent-hover);
    }
    .c-btn--ghost:hover {
      color: var(--color-accent-hover);
    }
  }

  /* --- テキストリンク(→つき) --- */
  .c-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-en);
    font-size: var(--fs-s);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    text-decoration: none;
    border-block-end: 1px solid var(--color-line);
    padding-block-end: 0.2em;
  }
  .c-more .c-icon {
    transition: translate 0.25s;
  }
  @media (hover: hover) {
    .c-more:hover {
      color: var(--color-accent-hover);
      border-color: currentcolor;
    }
    .c-more:hover .c-icon {
      translate: 3px 0;
    }
  }

  /* --- アイコン(Feather Icons: stroke系インラインSVG) --- */
  .c-icon {
    inline-size: 1.1em;
    block-size: 1.1em;
    flex: none;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .c-icon--lg {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    stroke-width: 1.5;
  }

  /* --- リンクリスト(現行の「▸リンク」形式の置き換え) --- */
  .c-linklist {
    display: grid;
    gap: 0.5em var(--space-s);
  }
  .c-linklist--cols {
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }
  .c-linklist a,
  .c-linklist span {
    position: relative;
    display: inline-block;
    padding-inline-start: 1em;
    font-size: var(--fs-s);
    line-height: 1.8;
  }
  /* 行頭マーカー:グレーの小さな丸 */
  .c-linklist a::before,
  .c-linklist span::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.72em;
    inline-size: 0.35em;
    block-size: 0.35em;
    border-radius: 50%;
    background: var(--color-text-sub);
  }
  .c-linklist span {
    color: var(--color-text-sub);
  }
  /* --red:行頭マーカーを赤い三角にする(現行サイトのリンク矢印 icon_submenu.gif #D01000 踏襲) */
  .c-linklist--red a::before,
  .c-linklist--red span::before {
    inset-block: auto;
    inset-block-start: 0.6em;
    inline-size: 0.45em;
    block-size: 0.45em;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--color-accent-red);
  }

  /* --- 画像+テキストのリンクタイル ---
     グループ会社/活動協会/製品情報/AFRICA。現行サイトの画像素材(gif)を
     そのまま踏襲し、下にテキストラベルを併記(画像+テキスト構成) */
  /* 横並びタイル:画像=左 / テキスト=中央 / リンク記号=右端。デスクトップ3列(参考レイアウト踏襲) */
  .c-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  @media (min-width: 40em) {
    .c-tiles {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 60em) {
    .c-tiles {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  /* カードの面は item が持つ(白地+細い枠線+角丸。影は使わない) */
  .c-tiles__item {
    display: flex;
    border: solid 1px var(--color-line-tile);
    border-radius: 4px;
    background: var(--color-base);
  }
  .c-tiles__link,
  .c-tiles__static {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    inline-size: 100%;
    padding: var(--space-xs) var(--space-s);
    border-radius: inherit;
    text-decoration: none;
    color: var(--color-primary);
  }
  /* ホバーは文字・アイコンの色変化のみ(背景・浮き上がり・影は使わない) */
  .c-tiles__label,
  .c-tiles__pdf,
  .c-tiles__meta .c-icon {
    transition: color 0.3s, stroke 0.3s;
  }
  @media (hover: hover) {
    .c-tiles__link:hover .c-tiles__label,
    .c-tiles__link:hover .c-tiles__pdf {
      color: var(--color-accent);
    }
    .c-tiles__link:hover .c-icon {
      stroke: var(--color-accent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .c-tiles__label,
    .c-tiles__pdf,
    .c-tiles__meta .c-icon {
      transition: none;
    }
  }
  /* gifは白地前提の旧素材のため、サムネ枠は常に白背景にする(枠線なし) */
  .c-tiles__thumb {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4.5rem;
    block-size: 3.25rem;
    background: #fff;
  }
  .c-tiles__thumb img {
    max-block-size: 100%;
    max-inline-size: 100%;
    inline-size: auto;
  }
  .c-tiles__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: 1.45;
  }
  .c-tiles__meta {
    flex: none;
    display: flex;
    align-items: center;
    color: var(--color-text-sub);
  }
  .c-tiles__pdf {
    padding: 0.1em 0.5em;
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-text-sub);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }
  /* 活動協会・AFRICAはオフホワイト地に置くため、枠線は白にして面だけで見せる */
  #activity .c-tiles__item,
  #africa .c-tiles__item {
    border: solid 1px #fff;
  }

  /* --- SP(〜40em)のみ:2列の縦積みカード
     画像=左上 / リンク記号=右上 / テキスト=下段全幅(assets/reference/トップページレイアウト２.png)
     40em以上(タブレット・PC)の横並びレイアウトには影響させない --- */
  @media (max-width: 39.999em) {
    .c-tiles {
      grid-template-columns: repeat(2, 1fr);
    }
    .c-tiles__link,
    .c-tiles__static {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "thumb meta"
        "label label";
      align-items: start;
      gap: var(--space-2xs);
      padding: var(--space-s);
    }
    .c-tiles__thumb {
      grid-area: thumb;
      justify-content: start;
      inline-size: 100%;
      block-size: 3.5rem;
    }
    .c-tiles__meta {
      grid-area: meta;
      align-items: start;
    }
    .c-tiles__label {
      grid-area: label;
    }
  }


  /* --- 製品カタログ(カテゴリ別グルーピング) --- */
  .c-catalog {
    display: grid;
    gap: var(--space-l);
  }
  .c-subheading--sm {
    font-family: var(--font-en);
    font-size: var(--fs-l);
    letter-spacing: 0.06em;
  }

  /* --- 会社概要リスト(現行サイトのテーブル組みを踏襲した定義リスト)
     左=日本語ラベル+英語サブ / 右=内容。行は細い罫線で区切る --- */
  .c-profile {
    border-block-start: 1px solid var(--color-line);
  }
  .c-profile__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xs) var(--space-m);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-line);
  }
  @media (min-width: 48em) {
    .c-profile__row {
      grid-template-columns: 13rem 1fr;
      gap: var(--space-m);
      padding-block: var(--space-m);
    }
  }
  .c-profile__term {
    font-size: var(--fs-s);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--color-primary);
  }
  /* 英語サブラベル(見出しと同じ「日本語+英語」の組み方) */
  .c-profile__term-en {
    display: block;
    font-family: var(--font-en);
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-text-sub);
  }
  .c-profile__desc {
    display: grid;
    gap: var(--space-s);
    font-size: var(--fs-s);
    line-height: 1.8;
  }
  /* 内容+写真枠を横に並べる行(所在地など) */
  .c-profile__desc--media {
    align-items: start;
  }
  @media (min-width: 48em) {
    .c-profile__desc--media {
      grid-template-columns: 1fr minmax(0, 10rem);
    }
  }
  /* 併記の英語(現行サイトの outlineEng 踏襲) */
  .c-profile .eng {
    display: inline-block;
    font-family: var(--font-en);
    font-style: normal;
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--color-text-sub);
  }

  /* 写真(現行サイトの画像をそのまま1枚で配置) */
  .c-figs {
    display: grid;
    gap: var(--space-2xs);
    align-items: start;
  }
  /* 縦長の1枚(本社ビル)は幅を抑える */
  .c-figs--narrow {
    grid-template-columns: minmax(0, 10rem);
  }
  .c-figs img {
    inline-size: 100%;
    block-size: auto;
  }

  /* --- 海外拠点(Over Sea Network) --- */
  .c-offices {
    display: grid;
    gap: var(--space-m);
  }
  .c-offices__name {
    position: relative;
    margin-block-end: 0.35em;
    padding-inline-start: 0.85em;
    font-family: var(--font-en);
    font-size: var(--fs-m);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
  }
  .c-offices__name::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.375em;
    inline-size: 4px;
    background: var(--color-accent);
  }
  .c-offices__body {
    display: grid;
    gap: var(--space-s);
    align-items: start;
  }
  /* 右側は写真2枚が並ぶ幅を確保する */
  @media (min-width: 48em) {
    .c-offices__body {
      grid-template-columns: 1fr minmax(16rem, 24rem);
    }
  }
  .c-offices__addr {
    font-style: normal;
    line-height: 1.8;
  }

  /* --- アクセス:最寄駅(赤マーカーの行リスト) --- */
  .c-access__routes {
    gap: 0.2em;
  }

  /* --- Googleマップ埋め込み(内容カラムの幅いっぱい) --- */
  .c-map {
    aspect-ratio: 5 / 2;
  }
  /* SPは横幅が狭く5:2だと細長すぎるため4:3にする */
  @media (max-width: 39.999em) {
    .c-map {
      aspect-ratio: 4 / 3;
    }
  }
  .c-map iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  /* --- カード(下層テンプレート用に維持) --- */
  .c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-s);
    background: var(--color-base);
    border: 1px solid var(--color-line);
  }
  .c-card__title {
    font-size: var(--fs-m);
    font-weight: 700;
    color: var(--color-primary);
  }
  .c-card__text {
    font-size: var(--fs-s);
    color: var(--color-text-sub);
  }
  .c-card--link {
    transition: border-color 0.3s, background-color 0.3s;
  }
  @media (hover: hover) {
    .c-card--link:hover {
      border-color: var(--color-accent);
      background: var(--color-base-alt);
    }
  }
  .c-card__anchor {
    color: inherit;
    text-decoration: none;
  }
  .c-card__anchor::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* --- タグ/チップ --- */
  .c-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.9em;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-base-alt);
    border: 1px solid var(--color-line);
  }

  /* --- ニュースリスト --- */
  .c-newslist {
    display: grid;
  }
  .c-newslist__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.25em var(--space-m);
    align-items: baseline;
    padding: var(--space-s) var(--space-2xs);
    border-block-end: 1px dashed var(--color-line); /* 現行サイトのdashed区切り踏襲 */
  }
  .c-newslist__date {
    font-family: var(--font-en);
    font-size: var(--fs-s);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-sub);
  }
  .c-newslist__title {
    font-size: var(--fs-s);
  }
  .c-newslist__title a {
    color: inherit;
  }
  @media (hover: hover) {
    .c-newslist__title a:hover {
      color: var(--color-accent-hover);
    }
  }
  @media (max-width: 39.999em) {
    .c-newslist__item {
      grid-template-columns: 1fr;
    }
  }

  /* --- グリッド(汎用・下層用) --- */
  .c-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }

  /* --- ライトボックス(リンク先が画像の項目用。<dialog>ベース) --- */
  .c-lightbox {
    inline-size: min(92vw, 68rem);
    max-inline-size: none;
    max-block-size: 90dvh;
    /* リセットの margin:0 が dialog 既定の中央寄せを打ち消すため明示的に戻す */
    margin: auto;
    padding: var(--space-s);
    background: var(--color-base);
    border: 0;
  }
  .c-lightbox::backdrop {
    background: rgb(var(--shadow-rgb) / 0.8);
  }
  .c-lightbox__figure {
    display: grid;
    gap: var(--space-xs);
  }
  .c-lightbox__img,
  .c-lightbox__video {
    display: block;
    inline-size: 100%;
    max-block-size: calc(90dvh - 5rem);
    margin-inline: auto;
    object-fit: contain;
  }
  .c-lightbox__img[hidden],
  .c-lightbox__video[hidden] {
    display: none;
  }
  /* メディア上のタイトル(GGGのみ使用) */
  .c-lightbox__title {
    font-size: var(--fs-l);
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
  }
  .c-lightbox__caption {
    font-size: var(--fs-s);
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
  }
  /* キャプション下の外部リンク(GGGのみ使用) */
  .c-lightbox__link {
    font-size: var(--fs-s);
    text-align: center;
    color: var(--color-accent);
    overflow-wrap: anywhere;
  }
  @media (hover: hover) {
    .c-lightbox__link:hover {
      color: var(--color-accent-hover);
    }
  }
  .c-lightbox__close {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--color-primary);
    background: var(--color-base);
    border-radius: 50%;
  }
  @media (hover: hover) {
    .c-lightbox__close:hover {
      color: var(--color-accent);
    }
  }

  /* --- パンくず(下層用) --- */
  .c-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding-block: var(--space-xs);
    font-size: var(--fs-xs);
    color: var(--color-text-sub);
  }
  .c-breadcrumb a {
    color: inherit;
  }
  .c-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: 0.5em;
    color: var(--color-line);
  }

  /* --- 多言語併記ブロック(DESIGN.md: 言語ブロックを縦に並べ罫線で区切る) --- */
  .c-langblock + .c-langblock {
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-line);
  }
  .c-langblock--en,
  .c-langblock--zh {
    color: var(--color-text-sub);
    font-size: var(--fs-s);
  }
  .c-langblock--en {
    font-family: var(--font-en);
  }
}

/* ============================== layout ============================== */
@layer layout {
  .l-container {
    inline-size: min(100% - var(--container-pad) * 2, var(--container-max));
    margin-inline: auto;
  }

  /* --- セクション(余白リズムに変化をつける: DESIGN.md品質基準) --- */
  .l-section {
    padding-block: var(--space-l);
  }
  .l-section--roomy {
    padding-block: var(--space-xl);
  }
  .l-section--alt {
    background: var(--color-base-alt);
  }
  .l-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-s);
  }
  .l-section__head .c-heading {
    flex: 1 1 auto;
    margin-block-end: 0;
  }
  .l-section__head + * {
    margin-block-start: var(--space-m);
  }

  /* --- 見出し+本文の2カラム分割(グループ会社セクション等) --- */
  .l-split {
    display: grid;
    gap: var(--space-m) var(--space-l);
  }
  @media (min-width: 60em) {
    .l-split {
      grid-template-columns: minmax(15rem, 19rem) 1fr;
      align-items: start;
    }
    .l-split__side {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-m));
    }
  }
  .l-split__side .c-heading {
    flex-direction: column;
    align-items: flex-start;
    border-block-end: 0;
    margin-block-end: var(--space-s);
    padding-block-end: 0;
  }
  .l-split__note {
    font-size: var(--fs-s);
    color: var(--color-text-sub);
  }

  /* ============ ヘッダー ============ */
  /* ヘッダー影の切り替え用センチネル。ページ最上部の1pxを監視し、
     レイアウトに影響しないよう負マージンで打ち消す */
  .scroll-sentinel {
    block-size: 1px;
    margin-block-end: -1px;
  }
  /* 白1段バー(KVレイアウト2PC.png踏襲):ロゴ / 英語インラインナビ / CONTACTボタン / FB丸 */
  .l-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: var(--color-base);
    transition: box-shadow 0.3s ease;
  }
  /* 画面最上部では影なし。スクロールが始まったら JS が is-scrolled を付与して影を出す */
  .l-header.is-scrolled {
    box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.1);
  }
  @media (prefers-reduced-motion: reduce) {
    .l-header {
      transition: none;
    }
  }
  .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: 1rem; /* ロゴ上下余白(0.7rem→約1.5倍のキリのいい値) */
  }
  .l-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .l-header__logo img {
    inline-size: 120px;
  }
  .l-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 0.2rem + 1.4vw, 1.75rem);
  }
  .nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.5em;
    font-family: var(--font-en);
    font-size: var(--fs-s);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    text-decoration: none;
  }
  /* ホバー下線(青アクセント) */
  .nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--color-accent);
    scale: 0 1;
    transform-origin: inline-start;
    transition: scale 0.25s;
  }
  @media (hover: hover) {
    .nav__link:hover {
      color: var(--color-accent);
    }
    .nav__link:hover::after {
      scale: 1 1;
    }
  }
  /* CONTACT ボタン(紺・角丸) */
  .nav__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.6em 1.5em;
    border-radius: 4px;
    font-family: var(--font-en);
    font-size: var(--fs-s);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.25s;
  }
  @media (hover: hover) {
    .nav__cta:hover {
      color: #fff;
      background: var(--color-accent-hover);
    }
  }
  /* FB 丸アイコン(紺円+白f) */
  .l-header__fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    color: #fff;
    background: var(--color-primary);
    transition: background-color 0.25s;
  }
  @media (hover: hover) {
    .l-header__fb:hover {
      background: var(--color-accent);
    }
  }
  .l-header__fb .c-icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: currentcolor;
    stroke: none;
  }
  .l-footer__fb {
    display: inline-flex;
    color: #fff;
  }
  @media (hover: hover) {
    .l-footer__fb:hover {
      color: rgb(255 255 255 / 0.7);
    }
  }
  .nav__drawer-toggle {
    display: none;
  }

  /* --- モバイル:ドロワー --- */
  @media (max-width: 60em) {
    .nav__drawer-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      padding: 0.5em 0.75em;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--color-primary);
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
    }
    .nav__drawer-toggle .c-icon--close {
      display: none;
    }
    .nav__drawer-toggle[aria-expanded="true"] .c-icon--open {
      display: none;
    }
    .nav__drawer-toggle[aria-expanded="true"] .c-icon--close {
      display: block;
    }
    /* ナビ全体をドロワー化。開始位置と高さはJSがヘッダー実寸から設定(以下はフォールバック) */
    .l-header__nav {
      position: fixed;
      inset: 0;
      inset-block-start: var(--header-h);
      block-size: calc(100dvh - var(--header-h));
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--space-s);
      z-index: 90;
      background: var(--color-base);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-m) var(--container-pad) var(--space-l);
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s, visibility 0.25s;
    }
    .l-header__nav.is-open {
      visibility: visible;
      opacity: 1;
    }
    .nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      inline-size: min(100%, 26rem);
      margin-inline: auto;
    }
    .nav__item {
      border-block-end: 1px solid var(--color-line);
    }
    .nav__link {
      display: block;
      padding: 0.9em 0.5em;
      font-size: var(--fs-m);
    }
    .nav__link::after {
      content: none;
    }
    .nav__cta {
      justify-content: center;
      inline-size: min(100%, 26rem);
      margin-inline: auto;
      margin-block-start: var(--space-s);
      padding-block: 0.9em;
    }
    .l-header__fb {
      margin-inline: auto;
    }
  }

  /* ============ メインビジュアル ============ */
  /* 地球写真の上に 社名(h1) と 事業内容テキスト帯 を重ねる(KVレイアウト2PC/2SP.png踏襲)。
     DESIGN.mdの「紫=MV演出のみ」の役割は、この写真そのものが担う */
  .mv {
    position: relative;
    background: #000;
  }
  .mv__img {
    display: block;
    inline-size: 100%;
    block-size: clamp(17rem, 46vw, 42rem);
    object-fit: cover;
    object-position: center 28%;
  }
  /* 上段=社名(余白の中央)/下段=事業内容テキスト帯(下端) */
  .mv__inner {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: start;
    padding-block: var(--space-m);
  }
  .mv__name {
    /* SP(390px)で1行に収まる下限。PCは3.5rem */
    font-size: clamp(1.375rem, 0.75rem + 3.4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: #fff;
    /* 濃紺のグローで写真の明部でも社名が沈まないようにする(3重掛けで中心ほど濃く) */
    text-shadow:
      0 0 60px rgb(var(--mv-glow-rgb) / 0.9),
      0 0 40px rgb(var(--mv-glow-rgb) / 0.9),
      0 0 20px rgb(var(--mv-glow-rgb) / 0.9);
  }
  .mv__biz {
    padding: var(--space-xs) var(--space-m);
    background-color: rgb(255 255 255 / 0.85);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--color-text);
  }
  .mv__biz .eng {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 0.6875rem;
    color: var(--color-text-sub);
  }
  /* SP:テキスト帯は画面幅いっぱい・最下端に密着(KVレイアウト2SP.png) */
  @media (max-width: 39.999em) {
    .mv__inner {
      padding-block: var(--space-s) 0;
    }
    .mv__biz {
      justify-self: stretch;
      margin-inline: calc(var(--container-pad) * -1);
      padding: var(--space-2xs) var(--container-pad);
      font-size: 0.6875rem;
      line-height: 1.6;
    }
    .mv__biz .eng {
      font-size: 0.625rem;
    }
  }

  /* ============ トップ:帝国データバンク ============ */
  .tdb {
    display: flex;
    justify-content: center;
  }
  .tdb__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.25s;
  }
  @media (hover: hover) {
    .tdb__link:hover {
      opacity: 0.7;
    }
  }
  .tdb__link img {
    inline-size: 180px;
  }

  /* ============ フッター ============ */
  .l-footer {
    background: var(--color-primary);
    color: #fff;
    padding-block: var(--space-l) var(--space-s);
    font-size: var(--fs-s);
  }
  .l-footer a {
    color: #fff;
    text-decoration: none;
  }
  @media (hover: hover) {
    .l-footer a:hover {
      color: rgb(255 255 255 / 0.7);
    }
  }
  .l-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--color-line-invert);
  }
  .l-footer__name {
    font-weight: 700;
    font-size: var(--fs-m);
  }
  .l-footer__name .eng {
    display: block;
    font-family: var(--font-en);
    font-weight: 400;
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.7);
  }
  /* メニュー+FBを右側にまとめ、FBのすぐ隣にメニューを配置 */
  .l-footer__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-s) var(--space-m);
  }
  .l-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25em 1.5em;
  }
  .l-footer__nav a {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
  }
  .l-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    padding-block-start: var(--space-s);
  }
  .l-footer__copy {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.6);
  }
}

/* ============================== utilities ============================== */
@layer utilities {
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .u-skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 200;
    padding: 0.75em 1.25em;
    background: var(--color-primary);
    color: #fff;
    translate: 0 -110%;
    transition: translate 0.2s;
  }
  .u-skip-link:focus {
    translate: 0 0;
  }
  .u-scroll-lock {
    overflow: hidden;
  }

  /* スクロール連動フェードイン(JS有効時のみ初期非表示) */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      translate: 0 1.25rem;
      transition: opacity 0.7s ease-out, translate 0.7s ease-out;
      transition-delay: calc(var(--reveal-delay, 0) * 90ms);
    }
    .js [data-reveal].is-visible {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* ============================================================
   お問い合わせページ(contact/index.html)専用
   デザイン: assets/new-images/contact.png 準拠
   - ヒーロー:MVと同じ地球写真を右に敷き、左は紺グラデで沈めて白タイトルを重ねる
   - 連絡先カード:白面+角丸(面の角丸は本ページのみの例外)+淡い影
   ============================================================ */
@layer layout {
  .l-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-block-size: clamp(8rem, 4.5rem + 10vw, 13rem);
    background-color: var(--color-primary);
    overflow: hidden;
    isolation: isolate; /* z-index をこのヒーロー内に閉じる */
  }
  .l-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: right 27.5%; /* 地球の上部を見せる。news-details.png準拠 */
  }
  /* 紺→透明の左グラデ。左のタイトル域を沈めつつ右の地球を見せる */
  .l-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      rgb(var(--shadow-rgb) / 0.7) 32%,
      rgb(var(--shadow-rgb) / 0) 76%
    );
  }
  .l-hero__inner {
    position: relative;
    z-index: 2;
  }
  .l-hero__title {
    font-family: var(--font-en);
    font-size: clamp(2rem, 1.3rem + 3.4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 2px 16px rgb(var(--shadow-rgb) / 0.55);
  }

  /* お問い合わせ本文の面(オフホワイト) */
  .l-contact {
    padding-block: var(--space-xl);
    background: var(--color-base-alt);
  }
}

@layer components {
  /* 連絡先カードの縦積み。1行目だけ2枚を横並び(SPは縦積み) */
  .c-contact {
    display: grid;
    gap: var(--space-m);
  }
  .c-contact__pair {
    display: grid;
    gap: var(--space-m);
  }
  @media (min-width: 48em) {
    .c-contact__pair {
      grid-template-columns: 1fr 1fr;
    }
  }
  /* メールカードとLEDカードの間の区切り線(contact.png) */
  .c-contact__sep {
    block-size: 0;
    border: 0;
    border-block-start: 1px solid var(--color-line);
    margin-block: var(--space-s);
  }

  .c-contact-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
    text-align: center;
    background: var(--color-base);
    border-radius: var(--radius-card);
  }
  /* 見出し部(英語大+日本語小)。下辺に区切り線 */
  .c-contact-card__head {
    padding-block-end: var(--space-s);
    border-block-end: 1px solid var(--color-line);
  }
  .c-contact-card__title {
    font-family: var(--font-en);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-heading);
  }
  .c-contact-card__sub {
    margin-block-start: var(--space-2xs);
    font-size: var(--fs-s);
    color: var(--color-text);
  }
  /* 大きな連絡先値(電話番号・メール)。中間グレー・Inter */
  .c-contact-card__value {
    margin-block-start: var(--space-m);
    font-family: var(--font-en);
    font-size: clamp(1.75rem, 1.1rem + 2.7vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--color-muted);
    overflow-wrap: anywhere;
  }
  .c-contact-card__value a {
    color: inherit;
    text-decoration: none;
  }
  @media (hover: hover) {
    .c-contact-card__value a:hover {
      color: var(--color-accent);
    }
  }
  /* 電話の受付時間など、値に添える小さな注記 */
  .c-contact-card__note {
    margin-block-start: var(--space-2xs);
    font-size: var(--fs-s);
    color: var(--color-text-sub);
  }
  /* LEDカード内の入れ子ブロック(Customer support …) */
  .c-contact-card__block {
    margin-block-start: var(--space-m);
  }
  .c-contact-card__subtitle {
    font-family: var(--font-en);
    font-size: var(--fs-l);
    font-weight: 700;
    color: var(--color-heading);
  }
}

/* ============================================================
   ニュース詳細ページ(news/news_*.html)専用
   デザイン: assets/new-images/news-details.png 準拠
   - ヒーロー・ヘッダー・フッターは他の下層ページと共通(.l-hero)
   - 記事タイトルは h2。本文中の「■…■」は見出し化せず太字段落で表現
   ============================================================ */
@layer components {
  .c-article__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-heading);
    text-wrap: balance; /* 見出しは balance 可(本文pには使わない=iPhone対策) */
  }
  /* タイトル下・本文末の区切り線 */
  .c-article__rule {
    block-size: 0;
    border: 0;
    border-block-start: 1px solid var(--color-line);
    margin-block: var(--space-m);
  }
  /* 本文の段落リズム */
  .c-article__body {
    line-height: 1.9;
  }
  .c-article__body > * {
    margin-block-start: var(--space-s);
  }
  .c-article__body > :first-child {
    margin-block-start: 0;
  }
  /* 「■移転先住所■」等の小見出し的な太字。h3にはせず、大きさは本文と同じ */
  .c-article__lead {
    margin-block-start: var(--space-m);
    font-weight: 700;
    color: var(--color-text);
  }
  .c-article__lead + * {
    margin-block-start: var(--space-2xs);
  }
  /* 一覧へ戻るボタン(中央寄せ)。本ページのみボタンを大きめに */
  .c-article__back {
    margin-block-start: var(--space-l);
    text-align: center;
  }
  .c-article__back .c-btn {
    padding: 0.95em 2.3em;
    font-size: var(--fs-m); /* .c-btn 既定(fs-s)から一段階上げる */
  }
}