@charset "utf-8";
/* TMHサンド 紹介ページ — 共通スタイル
   本文の装飾は index.html 側のインラインstyleに置いている。
   このファイルにはクラス定義とメディアクエリのみを収めている。 */

body { margin: 0; background: #ffffff; }
a { color: oklch(52% 0.20 25); }
/* hover は全てCSSで持つ（インラインstyleに勝たせるため !important を付けている） */
.cta-btn { transition: background-color 0.2s ease; }
.cta-btn:hover { background: oklch(45% 0.20 25) !important; }
.ft-link { transition: color 0.2s ease; }
.ft-link:hover { color: #ffffff !important; }
/* 日本語の折り返し。既定だと空白が無いため単語の途中（例：独自材／料）で改行されてしまう。
   文節単位で折り返し、禁則処理も厳格に適用する。未対応ブラウザでは従来どおりの折り返しになる。 */
body {
  word-break: auto-phrase;
  line-break: strict;
}
p, li, td, th { text-wrap: pretty; }   /* 最終行に1文字だけ残るのを防ぐ */
h1, h2, h3 { text-wrap: balance; }     /* 見出しは各行の長さを揃える */
@keyframes heroUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
/* 斜体見出しの傾き補正：上下の立体テキストと左端の面を揃えるための光学調整 */
:root {
  --italic-fix: -0.19em;
  --card-offset: 14px;              /* 影のずらし量（右下45°） */
  --card-shadow: oklch(20% 0 0 / 0.16);  /* 影の濃さ */
  --gutter: clamp(24px, 6vw, 120px);     /* 画面左右の余白。狭い画面では詰まり、広い画面では広がる */
  --maxw: 1400px;                        /* 本文コンテンツの最大幅 */
}
/* 制作の流れ：6ステップを1行に収める。狭い画面では3列→2列へ落とす */
/* 折り返して2段・3段になったとき、行ごとに高さが変わると矢印の帯が段違いに見える。
   grid-auto-rows: 1fr で全行を同じ高さに揃える。 */
.proc-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; }
@media (max-width: 1080px) { .proc-grid { grid-template-columns: repeat(3, 1fr); } }
/* ── レイアウトの骨格。インラインに置かず、狭い画面で差し替えられるようにする ── */
.ov-grid    { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 88px; align-items: center; }
.st-row     { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.st-row-rev { grid-template-columns: 1.2fr 1fr; margin-top: 96px; }
.st-head    { padding: 40px 56px; display: flex; align-items: center; gap: 24px; }
.st-box     { padding: 48px 72px 64px; margin: 0 -16px; }
.tech-card  { padding: 72px 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.dc-cap     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* キャプションを高さの計算から外し、行の中央揃えを「画像の中心」で合わせる。
   含めたままだとキャプションのぶん画像が上にずれ、隣のテキストが沈んで見える。 */
/* キャプションは通常の流れに残す。絶対配置にすると親が高さを確保できず、白い箱からはみ出す。
   代わりに隣のテキスト列を負のマージンで持ち上げ、画像の中心に揃える。
   負のマージンは行の高さを増やさないので、はみ出しは起きない。 */
/* 図の方が背が高い行だけ、テキスト列を持ち上げてキャプションぶんのずれを打ち消す。
   テキストの方が背が高い行に当てると、行の高さを決めているのがテキスト側のため
   中央揃えが効かず、ただ上へずれて箱の余白を食い潰す。 */
@media (min-width: 981px) { .fig-mate { margin-top: -44px; } }
.draft-fig  { max-width: 520px; }
/* 全体 → 拡大 の関係を矢印で示す。真ん中に矢印列を挟み、キャプションも同じ列構成に揃える。
   不要になったら .usu-arrow の要素と この3行、キャプションの空spanを消せば元に戻る。 */
/* 2枚を並べて見比べる組（樹脂 → 金属）。写真とタイトルを1セルにまとめてあるので、
   縦積みになってもタイトルが相手の写真に付くことがない。 */
.pair-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.usu-pair   { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.usu-cap    { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.usu-arrow  { display: flex; align-items: center; justify-content: center; width: 34px; }
.sand-row   { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.sand-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ft-tmh     { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
/* 3枚のカードは高さを揃える（PC）。縦積みになったら中身なりの高さに戻す */
.tech-list  { display: grid; grid-auto-rows: 1fr; gap: 56px; }
/* 背景がグレーのセクションにだけ方眼を敷く（白のセクションには入れない）。
   重ねdivではなくセクション自身の background-image にしているので、
   インラインは background ではなく background-color で書くこと（短縮形だと画像が消える）。 */
.grid-bg { background-image: linear-gradient(#00000007 1px, transparent 1px), linear-gradient(90deg, #00000007 1px, transparent 1px); background-size: 64px 64px; }
/* 沿革のロゴは本文幅の右端まで寄せる（gap は最小の間隔として残る） */
.hist-logo  { margin-left: auto; }
.tmh-words  { display: flex; gap: 36px; }
.flow-span  { margin-top: 56px; }
.flow-arrow { display: flex; align-items: center; }
.flow-label { text-align: center; margin-top: 18px; font-weight: 900; font-size: clamp(19px, 2.1vw, 26px); line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; color: oklch(22% 0 0); }

/* 比較表と年表は列数を減らせない（横並びであること自体が情報）ので、潰さず横スクロールさせる */
/* overflow-x を指定すると縦も auto になり、カードの影がはみ出して縦スクロールバーが出る。
   影のぼかし(24px)ぶんの余白を確保し、縦は明示的に閉じる。 */
:focus-visible { outline: 3px solid oklch(55% 0.20 25); outline-offset: 3px; box-shadow: 0 0 0 6px #ffffff; }
/* アンカー移動先は画面幅いっぱいに枠が出てしまうので抑制する */
section[tabindex="-1"]:focus-visible, div[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
/* 横スクロールの案内。JSがはみ出しを検知したときだけ表示する */
.x-hint { display: none; align-items: center; justify-content: flex-end; gap: 9px;
  margin: 64px 0 -14px; font-size: 13px; font-weight: 700; color: oklch(45% 0 0);
  transition: opacity 0.45s ease; }
.x-hint.x-hint-on { display: flex; }
.x-hint.x-hint-done { opacity: 0; pointer-events: none; }
.x-hint svg { flex: none; animation: xhintNudge 1.5s ease-in-out infinite; }
@keyframes xhintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .x-hint svg { animation: none; } }
/* スクロールできる側の端をぼかす。JSが位置を見て左右のクラスを付け外しする */
.x-scroll.x-fade-r { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
                             mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.x-scroll.x-fade-l { -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%);
                             mask-image: linear-gradient(to left, #000 88%, transparent 100%); }
.x-scroll.x-fade-l.x-fade-r { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
                                      mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); }
.x-scroll { overflow-x: auto; overflow-y: hidden; padding: 26px 2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.cmp-grid { min-width: 880px; }
.tl-grid  { min-width: 900px; }

/* ── 980px：本文の2カラムを縦積みへ ── */
@media (max-width: 980px) {
  .draft-fig { max-width: none; }
  .ov-grid, .st-row, .tech-card, .sand-row { grid-template-columns: 1fr; gap: 48px; }
  .st-row-rev { margin-top: 64px; }
  /* 画像が先に置かれている行は、縦積みでは見出しから読ませる */
  .st-row-rev > :first-child { order: 2; }
  .st-row-rev > :last-child  { order: 1; }
  .tech-card { padding: 52px 40px; }
  .tech-list { grid-auto-rows: auto; gap: 32px; }
}
/* ── 700px：余白を詰める ── */
@media (max-width: 700px) {
  .sec { padding-top: 88px !important; padding-bottom: 96px !important; }
  header { padding: 20px 24px !important; }
  .st-head { padding: 26px 22px; gap: 16px; }
  .st-box  { padding: 32px 22px 40px; }
  .tech-card { padding: 40px 26px; }
  .sand-cards { grid-template-columns: 1fr; gap: 18px; }
  .ft-tmh { grid-template-columns: 1fr; gap: 32px; }
  .tmh-words { flex-wrap: wrap; gap: 22px 30px; }
  .hist-logo { margin-left: 0; }
  .proc-grid > div { padding: 26px 20px 30px 30px !important; min-height: 0 !important; }
}
/* 画像が左右2枚のままなので、説明も必ず2列を保つ（縦に積むとどちらの図か分からなくなる）。
   狭い画面では列を減らさず、文字と間隔だけを詰める。 */
@media (max-width: 560px) { .dc-cap { gap: 8px; } }
/* 横並びのままだと1枚あたりが小さくなりすぎるので、狭い画面では縦に積む。
   矢印も下向きに回し、キャプションは拡大写真の真下に1列で置く。 */
@media (max-width: 620px) {
  .usu-pair { grid-template-columns: 1fr; gap: 10px; }
  .pair-2 { grid-template-columns: 1fr; gap: 14px; }
  .usu-cap  { grid-template-columns: 1fr; gap: 0; }
  .usu-cap > span:empty { display: none; }
  .usu-arrow { width: auto; transform: rotate(90deg); }
}
/* 1カラムに落ちたら、工程の矢印も右向きから下向きへ差し替える。
   切り欠き(上)と先端(下)に文字がかからないよう、余白も上下へ付け替える。 */
@media (max-width: 620px) {
  .proc-grid { grid-template-columns: 1fr; }
  /* 工程が縦に並ぶので、横に伸びる両矢印は意味が合わない。枠付きのラベルに置き換える */
  .flow-arrow { display: none; }
  .flow-label { margin-top: 0; }
  .flow-label > span { display: inline-block; background: oklch(52% 0.20 25); color: #ffffff; padding: 15px 32px; }
  .proc-grid > div {
    clip-path: polygon(0 0, 50% 26px, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px)) !important;
    padding: 48px 24px 46px !important;
  }
}
/* ヘッダーのメニュー：ラベルが長いので、収まらない幅ではリンクを畳んでCTAだけ残す */
.tmh-nav { display: flex; align-items: center; gap: 18px; }
/* ヘッダーのリンク：ホバーで赤へ。動画の上に載るので、暗い赤ではなくヒーローと同じ明るい赤を使う */
.tmh-nav a { transition: color 0.2s ease, background-color 0.2s ease; }
.tmh-nav a:not(.tmh-nav-cta):hover { color: oklch(68% 0.19 25) !important; }
.tmh-nav a.tmh-nav-cta:hover { background: oklch(68% 0.19 25) !important; }
@media (max-width: 1400px) { .tmh-tagline { display: none; } }
@media (max-width: 1120px) { .tmh-nav a:not(.tmh-nav-cta) { display: none; } }
/* 造形：最先端3Dプリンター — 工程図4枚。各図の真下にその工程の説明を置く */
.proc-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
@media (max-width: 520px) { .proc-diagram { grid-template-columns: 1fr; } }
/* Lenis（慣性スクロール）— 公式CSSを同梱 */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* 紹介動画のプレーヤーだけは操作できるようにする */
.lenis.lenis-smooth #tmh-video-facade iframe { pointer-events: auto; }
/* LEDビジョン風：ドット間の目地＋走査線を薄く重ねる（さりげなく） */
.led-grid {
  background-image:
    radial-gradient(circle, transparent 45%, oklch(20% 0 0 / 0.20) 78%),
    repeating-linear-gradient(0deg, oklch(20% 0 0 / 0.05) 0 1px, transparent 1px 3px);
  background-size: 4px 4px, 100% 3px;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) { .led-grid { background-size: 3px 3px, 100% 3px; } }
.tmh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22,0.7,0.28,1), transform 0.9s cubic-bezier(0.22,0.7,0.28,1); }
.tmh-reveal:not(.tmh-in) { will-change: opacity, transform; }
.tmh-reveal.tmh-in { opacity: 1; transform: none; }
/* 年表：年代順に1つずつ出す。横線→2014→2016→…→2026 */
.tmh-tl { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.22,0.7,0.28,1), transform 0.7s cubic-bezier(0.22,0.7,0.28,1); }
.tmh-tl.tmh-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-hero-anim] { animation: none !important; opacity: 1 !important; }
  .tmh-reveal, .tmh-tl { opacity: 1 !important; transform: none !important; transition: none !important; }
}