/* ============================================================
   about.css — 三益工業について(02-About)ページ固有スタイル
   共通は common.css / 変数は tokens.css。共通クラスは上書きしない。
   FVは共通 .subfv（固定青背景が透ける）。濃紺/薄グレーのセクションは
   各自で背景指定し、Access/沿革は背景を持たず固定青背景を見せる。
   ============================================================ */

/* visually-hidden（common未定義のため自前定義。common昇格候補） */
.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 }

/* ===== 下層FV（Figma 02-About bg-image 2414:6905：濃紺工場写真＋白線画KV合成済み画像）。
   common.css .fv-photo（ページ先頭900px・下端マスクで光アニメへ溶かす）に画像のみ指定。
   旧 .subfv::before 方式（追いグラデで写真が沈む／676px窓でトリミングずれ）は撤去。高さ676・タイトルは左/上中段。 ===== */
body[data-page="about"] .fv-photo{ background-image:url("../pages/about/images/fv-bg.webp") }
body[data-page="about"] .subfv{ min-height:676px; align-items:flex-start }
/* FV白線画KV（Figma 2414:6907 870×532 @570,223。右端フラッシュ・subfv下端をはみ出て message 上部へ続く） */
body[data-page="about"] .subfv__kv{ position:absolute; right:0; top:223px; width:870px; z-index:0; pointer-events:none }
body[data-page="about"] .subfv__kv img{ width:100%; height:auto; display:block }
body[data-page="about"] .subfv__inner{ position:relative; z-index:1 }
@media (max-width:1023px){ body[data-page="about"] .subfv__kv{ display:none } }
body[data-page="about"] .subfv__inner{ flex:1; justify-content:flex-start }
/* タイトルはFigma正リズム（パンくず121→タイトル255）＝common .subfv に従う */
@media (max-width:1023px){ body[data-page="about"] .subfv{ min-height:480px } }
@media (max-width:767px){ body[data-page="about"] .subfv{ min-height:0 } }

/* ===== Message（透明・右ブリード。FV直下に密着）
   2026-07-02: FV後〜会社概要の背景カラーを削除（ユーザー指示）。
   固定FV写真(.fv-photo fixed)がスクロール中も透けて見える。 ===== */
.message{ background:transparent; color:var(--c-white); overflow:hidden;
  padding-top:72px } /* FV直下＝固定背景が透ける帯の始点 */
.message__inner{ max-width:1440px; margin-inline:auto; padding-left:116px } /* 左116・右0=右端までブリード */
.message__row{ display:grid; grid-template-columns:304px minmax(0,1fr); align-items:start }
.message__exec{ min-width:0 }
.message__affil{ font-size:var(--fz-lead); line-height:var(--lh-body); margin-bottom:24px }
.message__name{ font-size:var(--fz-h4); font-weight:700; line-height:var(--lh-h4) }
.message__photo{ min-width:0; overflow:hidden }
.message__photo img{ width:100%; height:auto; object-fit:cover; min-width:0; display:block;
  transform:translate3d(0,var(--motion-y,0px),0) scale(1.035); transform-origin:center; will-change:transform }
@media (max-width:1023px){
  .message{ padding-top:56px }
  .message__inner{ padding-left:48px; padding-right:48px }
  .message__row{ grid-template-columns:1fr; gap:24px }
}
@media (max-width:767px){ .message__inner{ padding-left:20px; padding-right:20px } }

/* ===== 事業紹介（透明・左テキスト＋右ギャラリー・右ブリード）
   2026-07-02: FV後〜会社概要の背景カラー削除（messageと同様・固定FV写真が透ける） ===== */
.intro{ background:transparent; color:var(--c-white); overflow:hidden; padding-top:20px }
.intro__inner{ max-width:1440px; margin-inline:auto; padding-left:116px } /* 右0=ブリード */
.intro__grid{ display:grid; grid-template-columns:minmax(0,1fr) 490px; gap:192px; align-items:start }
.intro__text{ display:flex; flex-direction:column; gap:68px; min-width:0 }
.intro__block{ display:flex; flex-direction:column; gap:40px }
.intro__h{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:0.32px }
.intro__block p{ font-size:var(--fz-body); line-height:var(--lh-body) }
.intro__gallery{ position:relative; width:490px; height:612px }
.intro__gallery img{ position:absolute; width:490px; height:612px; object-fit:cover; border-radius:24px; will-change:transform }
/* デッキ式ローテーション：is-next=背面スロット（旧gallery-backの位置・薄表示）。
   切替で is-next → is-act になると top/left/回転/不透明度がトランジションし
   「背面のプレビューが表示領域へ移動してきて正しく表示される」動きになる。 */
.intro__slide{ top:80px; left:0; opacity:0; z-index:1; transform:none; pointer-events:none;
  transition:opacity .6s var(--motion-ease), top .6s var(--motion-ease),
             left .6s var(--motion-ease), transform .6s var(--motion-ease) }
.intro__slide.is-next{ opacity:.38 } /* 背面スロットで待機（次に来る画像の予告） */
.intro__slide.is-act{ top:3px; left:-70px; opacity:1; z-index:3;
  transform:rotate(-4.18deg) scale(1.015) } /* 前面正位置 */
.intro__slide.is-out{ top:3px; left:-70px; opacity:0; z-index:2;
  transform:rotate(-4.18deg) scale(1.015) } /* 退場：前面位置のままフェードアウト（新actが上に重なる） */

/* ===== intro ピン留め（PCのみ）：セクションが止まり、スクロールでテキストがゆっくり流れ、
   ギャラリーが切り替わる。スクロール距離=100vh+1800px。JS(main.js)が進捗を反映 ===== */
@media (min-width:1024px){
  .intro--pin{ overflow:visible } /* overflow:hiddenはsticky無効化のためピン時解除（横はみ出しはsticky側でクリップ） */
  .intro--pin .intro__pinspace{ height:calc(100vh + 1800px) }
  .intro--pin .intro__sticky{ position:sticky; top:0; min-height:100vh;
    display:flex; align-items:center; overflow:hidden }
  .intro--pin .intro__inner{ width:100% }
  .intro--pin .intro__viewport{ max-height:calc(100vh - 200px); overflow:hidden; min-width:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%) }
  .intro--pin .intro__text{ will-change:transform; padding-block:56px } /* 先頭/末尾行がフェード帯(48px)に掛からない逃げ */
  .intro--pin .intro__grid{ align-items:center }
}
@media (prefers-reduced-motion:reduce){
  .intro--pin .intro__pinspace{ height:auto }
  .intro--pin .intro__sticky{ position:static; min-height:0 }
  .intro--pin .intro__viewport{ max-height:none; -webkit-mask-image:none; mask-image:none }
  .intro__slide{ transition:none }
}
@media (max-width:1023px){
  .intro__inner{ padding-left:48px; padding-right:48px }
  .intro__grid{ grid-template-columns:1fr; gap:48px }
  .intro__text{ gap:56px }
  .intro__gallery{ width:100%; max-width:420px; height:auto; aspect-ratio:490/612; margin-inline:auto }
  .intro__slide{ position:absolute; inset:0; width:100%; height:100%; transform:none }
  .intro__slide.is-next{ opacity:0 } /* 背面スロットはSP/タブレットでは出さない */
  .intro__slide.is-act,.intro__slide.is-out{ inset:0; transform:none }
  .intro__slide.is-out{ opacity:0 }
}
@media (max-width:767px){ .intro__inner{ padding-left:20px; padding-right:20px }
  .intro__h{ font-size:24px } }

/* ===== 大判写真帯（濃紺・フル幅・右64px下げ。dark領域の末尾） ===== */
.image-band{ background:var(--c-main); padding:0 }
.image-band__grid{ display:grid; grid-template-columns:1fr 1fr; align-items:start; overflow:hidden }
.image-band__grid img{ width:100%; height:auto; object-fit:cover; min-width:0; display:block;
  transform:translate3d(0,var(--motion-y,0px),0) scale(1.035); transform-origin:center; will-change:transform }
.image-band__grid img:nth-child(2){ margin-top:64px }
@media (max-width:767px){
  .image-band__grid{ grid-template-columns:1fr }
  .image-band__grid img:nth-child(2){ margin-top:0 }
}
@media (prefers-reduced-motion:reduce){
  .message__photo img,
  .image-band__grid img{ transform:none }
  .intro__slide.is-act{ transform:rotate(-4.18deg) }
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .intro__slide.is-act{ transform:none }
}

/* ===== 会社概要（薄グレー#eef0f6帯・中央1094px・行ごと上罫線、ラベル153/間隔58） ===== */
.company{ background:var(--c-grad-end) }
.company .container{ max-width:calc(1094px + var(--pad-x)*2) }
.company-table{ display:flex; flex-direction:column }
.company-row{ display:flex; gap:58px; align-items:stretch }
.company-row dt{ flex:0 0 153px; border-top:1px solid var(--c-line); padding:32px 0;
  font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-main) }
.company-row dd{ flex:1 1 auto; min-width:0; border-top:1px solid var(--c-line); padding:32px 0;
  font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-main) }
.company-row--last dt,
.company-row--last dd{ border-bottom:1px solid var(--c-line) }
.company-row dd p + p{ margin-top:24px }
@media (max-width:767px){
  /* SPはラベル上→本文下にブロック縦積み（flexの横詰まりを避け確実に折返す）。罫線は行単位 */
  .company-row{ display:block; padding:20px 0; border-top:1px solid var(--c-line) }
  .company-row dt,
  .company-row dd{ display:block; width:auto; border-top:0; border-bottom:0; padding:0 }
  .company-row dt{ font-weight:700; margin-bottom:6px }
  .company-row dd{ overflow-wrap:anywhere; font-size:12px }
  .company-row--last{ border-bottom:1px solid var(--c-line) }
}

/* ===== 主要顧客・産業別売上構成（薄グレー#eef0f6帯・取引先3列＋横棒グラフ）
   Figma 2414:4379＝会社概要の直後・Accessの前。背景は薄グレー(#eef0f6)、
   PC padding 116/144。見出し48px、グループ見出し32px、本文16px/行間1.8。 ===== */
.clients{ background:var(--c-grad-end); padding-top:144px; padding-bottom:144px; color:var(--c-main) }
/* このセクションのタイトルはFigmaで48px（標準section-headより大） */
.section-head--clients{ margin-bottom:64px }
.section-head--clients .section-head__title{ font-size:48px; line-height:1.25; letter-spacing:0.48px }

.clients__group{ padding-bottom:80px }
.clients__group:last-child{ padding-bottom:0 }
.clients__subhead{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700;
  letter-spacing:0.32px; color:var(--c-main); text-align:left; margin-bottom:48px }  /* Figmaは左揃え */
.clients__list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:8px; row-gap:24px }
.clients__list li{ font-size:var(--fz-body); line-height:1.8; color:#000; letter-spacing:1px }

/* .clients-chart系（産業別売上構成の横棒グラフ）はHP-v2指示[row82]反映で未使用化（2026-07-08）：ルール削除 */
@media (max-width:1023px){
  .clients{ padding-top:72px; padding-bottom:72px }
  .section-head--clients .section-head__title{ font-size:36px }
}
@media (max-width:767px){
  .clients__group{ padding-bottom:56px }
  .section-head--clients .section-head__title{ font-size:24px }
  .clients__subhead{ font-size:22px; margin-bottom:32px; text-align:left }
  .clients__list{ grid-template-columns:1fr; row-gap:14px }
}

/* ===== Access（透明＝固定青背景が透ける・白文字・2拠点 住所＋Google Maps iframe） ===== */
.access{ background:transparent; color:var(--c-white) }
.access .container{ max-width:calc(1208px + var(--pad-x)*2) }  /* Figma Access Locations w=1208（580×2＋gap48） */
.access__addr{ color:var(--c-white) }
.access__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px }
.access__item{ display:flex; flex-direction:column; gap:48px; min-width:0 }
.access__name{ font-size:var(--fz-h4); font-weight:700; line-height:1.4; color:var(--c-white); margin-bottom:8px }  /* Figma: 拠点名は太字行（title 580×95 の1行目） */
.access__addr{ font-size:var(--fz-body); line-height:var(--lh-body) }
/* .access__photo（事業所外観写真）はHP-v2指示[row92][row97]反映で未使用化（2026-07-08）：ルール削除 */
.access__map{ position:relative; aspect-ratio:596/433; border-radius:4px; overflow:hidden }
.access__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
@media (max-width:767px){
  .access__grid{ grid-template-columns:1fr; gap:40px }
  .access__item{ gap:24px }
}

/* ===== 沿革（Figma 2414:7094：全幅の薄グレー#eef0f6セクション・角丸パネルではない。
   年代サイドナビは白70%・角丸6px・枠線。アコーディオン年表） ===== */
.history{ background:var(--c-grad-end); color:var(--c-main); padding:88px 0 144px }
.history__panel{ max-width:1440px; margin-inline:auto; padding-inline:116px }  /* コンテナ。背景/角丸なし */
.history__layout{ display:grid; grid-template-columns:153px minmax(0,1fr); gap:57px; align-items:start; max-width:1096px }

/* 年代サイドナビ（白70%box・角丸6px・枠線・sticky） */
.history__sidenav{ display:flex; flex-direction:column; gap:20px; background:rgba(255,255,255,.7);
  border:1px solid rgba(16,32,59,.1); border-radius:6px; padding:24px 20px; position:sticky; top:24px }
.history__sidenav a{ font-size:var(--fz-body); color:var(--c-main); white-space:nowrap }
.history__sidenav a:hover{ color:var(--c-accent) }

/* タイムライン */
.history__timeline{ min-width:0 }
.hist-year{ border-top:1px solid rgba(16,32,59,.18); scroll-margin-top:120px } /* sticky header(96)分の余白 */
.hist-year:last-child{ border-bottom:1px solid rgba(16,32,59,.18) }
.hist-year__summary{ width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:32px 8px 32px 24px; cursor:pointer; color:var(--c-accent); background:none; border:0;
  font-family:inherit; text-align:left }
.hist-year__label{ font-size:28px; font-weight:500; line-height:1 }
.hist-year__en{ font-family:var(--ff-en) }
.hist-year__icon{ position:relative; width:22px; height:22px; flex:0 0 22px }
.hist-year__icon::before,.hist-year__icon::after{ content:""; position:absolute; background:var(--c-accent) }
.hist-year__icon::before{ left:0; top:10.4px; width:22px; height:1.2px }
.hist-year__icon::after{ left:10.4px; top:0; width:1.2px; height:22px; transition:opacity .2s }
.hist-year__summary[aria-expanded="true"] .hist-year__icon::after{ opacity:0 } /* 開=minus */
/* 開閉は max-height + overflow:hidden（paddingごとクリップして閉時の漏れを防ぐ） */
.hist-year__events{ overflow:hidden; max-height:4000px; transition:max-height .4s ease }
.hist-year__summary[aria-expanded="false"] + .hist-year__events{ max-height:0 }
.hist-year__inner{ display:flex; flex-direction:column; gap:36px; padding:4px 8px 36px 24px }
.hist-group{ display:flex; flex-direction:column; gap:18px }
.hist-group__year{ font-size:var(--fz-lead); font-weight:700; color:var(--c-accent); line-height:1.8 }
.hist-event{ display:flex; gap:24px; align-items:flex-start; padding-left:14px;
  font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-main) }
.hist-event__dot{ flex:0 0 6px; width:6px; height:6px; border-radius:50%;
  background:var(--c-accent); margin-top:11px }

@media (prefers-reduced-motion:reduce){
  .hist-year__events{ transition:none }
  .hist-year__icon::after{ transition:none }
}
@media (max-width:1023px){
  .history{ padding:72px 0 88px }
  .history__panel{ padding-inline:48px }
  .history__layout{ grid-template-columns:1fr; gap:24px; max-width:none }
  .history__sidenav{ flex-direction:row; flex-wrap:wrap; gap:12px 20px; position:static }
}
@media (max-width:767px){
  .history{ padding:56px 0 64px }
  .history__panel{ padding-inline:20px }
  .hist-year__label{ font-size:22px }
}