/* ==========================================================================
   株式会社流通物産 公式サイト 共通スタイル
   P-0137 / P2。意匠（配色・写真・余白の詰め）は Astra が後工程で調整する前提で、
   ここでは「構造」と「壊れない土台」だけを持つ。
   ========================================================================== */

:root{
  --ink:#1f2933;        /* 本文 */
  --ink-2:#55616b;      /* 補助文字 */
  --line:#ecdfd4;       /* 罫線。橙に寄せた暖色グレー */
  --bg-soft:#fff6ee;    /* 淡い橙の面 */
  --brand:#c95100;      /* 主色。白文字が 4.51:1 で通るぎりぎりの鮮やかさ */
  --brand-ink:#9c3e00;  /* 主色の暗い側。白文字 6.77:1 */
  --accent:#c95100;     /* 文字にも小さな面にも載るのでコントラスト安全側 */
  --brand-vivid:#eb6e00;/* **当社のテーマカラー**（旧サイト記載の色・CEO 2026-09-22）。
                         文字を載せない面と線だけに使う（白文字は 3.11:1 で不可・墨文字なら 5.00:1） */
  --maxw:1120px;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:#fff;line-height:1.9;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- ヘッダー ----------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:68px}
.site-logo{font-size:19px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
.site-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.site-nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:var(--radius);
  padding:9px 13px;font-size:14px;cursor:pointer}

/* --- ヒーロー ----------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:80px 0 64px;border-bottom:1px solid var(--line)}
.hero__copy{font-size:clamp(26px,4.4vw,42px);font-weight:700;line-height:1.5;margin:0 0 20px;letter-spacing:.02em}
.hero__lead{font-size:16.5px;color:var(--ink-2);max-width:44em;margin:0 0 30px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:14px 30px;border-radius:var(--radius);font-weight:700;font-size:15.5px;
  transition:background .2s}
.btn:hover{background:var(--brand-ink)}
.btn--ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn--ghost:hover{background:var(--bg-soft)}

/* --- セクション --------------------------------------------------------- */
.section{padding:72px 0}
.section--soft{background:var(--bg-soft)}
.section__title{font-size:clamp(21px,3vw,28px);font-weight:700;margin:0 0 10px;letter-spacing:.03em}
.section__title::after{content:"";display:block;width:52px;height:3px;background:var(--accent);margin-top:14px}
.section__lead{color:var(--ink-2);max-width:46em;margin:22px 0 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px;margin-top:38px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:#fff}
.card h3,.card .card__title{margin:0 0 12px;font-size:17.5px;font-weight:700}
.card p{margin:0;color:var(--ink-2);font-size:15px}

/* --- 取扱メーカー ロゴ流し（マーキー） ---------------------------------------
   プラグイン・JavaScript・外部ライブラリ不要。同じ並びを 2 セット置き、
   1 セット分（-50%）だけ左へ動かして先頭へ戻す。継ぎ目が出ない。
   ------------------------------------------------------------------------ */
/* 既定（広い画面）＝静止。全社が一度に目に入る。
   実測: ロゴ帯を持つ16社中9社が静止。Notion / Vercel / Linear は
   「広い画面は静止、狭い画面だけ流す」の切替を採っていた。 */
.marquee{position:relative;overflow:hidden;padding:26px 0}
.marquee__track{display:flex;flex-wrap:wrap;justify-content:center;
  width:auto;gap:20px 40px;align-items:center}
.marquee__track .mq-dup{display:none}   /* 静止時は複製列を出さない */
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 狭い画面＝流す。横に並べきれないので、流して全社を見せる。 */
@media (max-width:820px){
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .marquee__track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:40px;
    animation:marquee-scroll 38s linear infinite}
  .marquee__track .mq-dup{display:inline-flex}
  .marquee:hover .marquee__track{animation-play-state:paused}
}
.mq-name{font-size:17px;font-weight:600;color:#3d4a57;white-space:nowrap;letter-spacing:.04em}
/* ロゴ枠の寸法は実測に合わせた（調査16社: 高さ32〜44px・間隔32〜48px・1行6〜7社）。
   「ふだん灰色でホバーでカラー」は 16社中0社だったため採用しない。 */
.mq-logo{height:40px;width:164px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px dashed #c3cedb;border-radius:var(--radius);
  color:#8595a6;font-size:11.5px;white-space:nowrap;padding:0 8px}

/* 一時停止ボタン（スマホ幅のみ表示）は社長判断で廃止（2026-09-25「見た目が良くない・止める必要はない」）。
   止め方はマウスを載せる（PC）と、端末の「動きを減らす」設定（流さず折り返して並べる）の 2 つ。 */


/* --- 取扱メーカー 静止グリッド版（マーキーの代替案） -----------------------
   .marquee の代わりに .logo-grid を使うと、流さずに全社を一度に並べる。
   中身（.mq-name / .mq-logo）は共通なので、囲みのクラスを差し替えるだけ。
   ------------------------------------------------------------------------ */
.logo-grid{display:grid;gap:18px 20px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.logo-grid .mq-name{display:flex;align-items:center;justify-content:center;
  min-height:70px;padding:10px 14px;text-align:center;white-space:normal;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;transition:border-color .2s,color .2s}
.logo-grid .mq-name:hover{border-color:var(--brand);color:var(--brand)}
.logo-grid .mq-logo{width:100%;height:64px;border-style:solid;border-color:var(--line)}

/* --- 会社概要テーブル --------------------------------------------------- */
.table-company{border-collapse:collapse;width:100%;margin-top:32px;font-size:15px}
.table-company th,.table-company td{border-bottom:1px solid var(--line);padding:15px 14px;
  text-align:left;vertical-align:top}
.table-company th{width:180px;background:var(--bg-soft);font-weight:600;white-space:nowrap}

/* --- フッター ----------------------------------------------------------- */
.site-footer{background:var(--ink);color:#c8d2dc;padding:52px 0 28px;margin-top:0}
.site-footer a{color:#e4ebf1}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.site-footer h2{font-size:15px;margin:0 0 12px;color:#fff;letter-spacing:.05em}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:14px}
.site-footer li{margin:7px 0}
.site-footer__copy{border-top:1px solid #33414f;margin-top:34px;padding-top:20px;
  font-size:12.5px;color:#93a1ad}

/* --- 動きへの配慮（OS の「視差効果を減らす」設定を尊重） ------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:22px 40px}
  .marquee__track .mq-dup{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  *{transition-duration:.01ms !important}
}

/* --- スマートフォン ------------------------------------------------------ */
@media (max-width:820px){
  .site-nav{display:none}
  .site-nav.is-open{display:block;position:absolute;left:0;right:0;top:68px;background:#fff;
    border-bottom:1px solid var(--line);padding:14px 24px}
  .site-nav.is-open ul{flex-direction:column;gap:2px}
  .site-nav.is-open a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block}
  .hero{padding:56px 0 46px}
  .section{padding:52px 0}
  .table-company th{width:auto;display:block;border-bottom:none;padding-bottom:4px}
  .table-company td{display:block;padding-top:4px}
}

/* --- 店舗評価の実測値表示 ------------------------------------------------
   数字は「載せた時点の実測値」。各モールの店舗ページを開けば誰でも確認できる。
   ------------------------------------------------------------------------ */
.card__rating{margin:14px 0 0 !important;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2)}
.card__rating b{font-size:17px;color:var(--accent)}
.stat-line{margin:18px 0 0;font-size:16px;color:var(--ink)}
.stat-line b{font-size:22px;color:var(--accent)}
.stat-note{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}

/* --- メーカーロゴ画像（支給され次第、社名テキストと差し替える） -------------
   実測に合わせ 高さ40px。着色の加工はしない（16社中0社がホバー着色を実装）。
   ------------------------------------------------------------------------ */
.mq-logo-img{height:40px;width:auto;max-width:164px;object-fit:contain;flex:0 0 auto}
.logo-grid .mq-logo-img{max-width:100%;margin:0 auto}

/* --- お知らせ枠 --------------------------------------------------------- */
.notice{border:1px solid var(--line);border-left:5px solid var(--brand);background:var(--bg-soft);
  padding:20px 24px;margin:30px 0;border-radius:0 var(--radius) var(--radius) 0}
.notice--warn{border-left-color:var(--accent)}
.notice__title{margin:0 0 10px;font-size:16.5px}
.notice p{margin:0;color:var(--ink-2);font-size:15px}

/* --- フォーム ----------------------------------------------------------- */
.form{max-width:680px;margin-top:34px}
.form__row{margin-bottom:26px}
.form__label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.req{display:inline-block;margin-left:10px;background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:700;border-radius:3px;padding:2px 7px;vertical-align:2px}
.form__control{width:100%;border:1px solid #c9d4de;border-radius:var(--radius);
  padding:12px 14px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.form__control:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.form__help{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.form__consent{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.form__consent input{width:19px;height:19px;margin-top:4px;flex:0 0 auto}
.form__row--consent{border-top:1px solid var(--line);padding-top:24px}
/* ハニーポット: 見た目にも読み上げにも出さない（機械だけが埋める欄） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__result{margin:18px 0 0;font-size:15px;min-height:1.6em}
.form__result.is-ok{color:#0a7d4b;font-weight:700}
.form__result.is-ng{color:#b3261e;font-weight:700}

/* ==========================================================================
   意匠レイヤー R7「光と奥行き」（第 7 回 確定 b5・社長承認 2026-09-26）
   ＝下の R6「番号で読ませる白い紙面」を土台に、末尾へ handoff/from_opus/20260926_o55_r7/ の
   a・b・bfix・bfinal・bppp・b4・b5.css を scripts/_apply_r7.py が機械で連結した（戻すときは git から R6 版を取り出す）。
   --- 以下は R6 の見出し ---
   意匠レイヤー R6「番号で読ませる白い紙面」
   CEO 決裁 2026-09-25（第 6 回・β・動きは今の強さで入れる）。A1「オレンジ・モノリス」から差し替え。
   出典: handoff/from_opus/20260925_o55_r5/beta.css（Opus 5.5）＋ handoff/from_opus/20260925_o55_r6/common_r6.css
   （独自書体・登場演出・画面に入ったら現れる動き・読み進めた量の線）。scripts/_apply_r6.py が機械で連結した。
   画面に入ったら現れる動きは /assets/js/reveal.js が付ける（スクリプトが動かない端末では最初から全部見える）。
   A1 へ戻すときは git から前版のブロックを取り出して入れ替える。
   ========================================================================== */

/* 意匠レイヤー R5-β「番号で読ませる白い紙面」 */
/* 根拠: Stripe・SmartHR の罫線＋小見出しラベル／Linear・Vercel・Figma の等幅の小さな数字／
   PFN・Ubie・freee の「大きく、太くしない」和文の大見出し（第 5 回 §3）。
   図版・装飾図形は置かない。線は節の区切りにだけ使う。 */

:root{
  --r5-rule:#d8d2cb;     /* 区切り線（暖色の灰） */
  --r5-soft:#faf8f5;     /* 淡い地（相対輝度 0.94） */
  --r5-num:#9c3e00;      /* 番号・ラベルの橙（白地 6.77:1・淡い地 6.38:1） */
}

body{background:#fff;color:var(--ink)}

/* --- ヘッダー: 土台のぼかしを打ち消す（第 5 回 §7-3） --- */
.site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--r5-rule)}
.site-logo{font-weight:600;letter-spacing:.04em}
.site-nav a{font-weight:500}
.site-nav a:hover{color:var(--r5-num);border-bottom-color:var(--r5-num)}

/* --- 見出しの改行を文節で整える（§3-3・§7-11） --- */
h1,h2{text-wrap:balance}
.hero__copy,.hero__lead,.section__title,.section__lead,.card h3,.card p{word-break:auto-phrase}

/* --- ヒーロー: 大きく細い見出し・説明・ボタンを左の縁にそろえて縦に積む（審査: 右の列へずらすと「ずれ」に見える） --- */
.hero{background:#fff;padding:128px 0 112px;border-bottom:1px solid var(--r5-rule)}
.hero__copy{font-size:clamp(34px,8.4vw,84px);font-weight:400;line-height:1.28;
  letter-spacing:.02em;font-feature-settings:"palt";margin:0 0 48px;max-width:none}
.hero__lead{font-size:17px;line-height:1.95;color:var(--ink-2);max-width:36em;margin:0 0 36px}

/* --- 節: 左に見出し・右に本文（PC 幅） --- */

.section{padding:104px 0}
.section--soft{background:var(--r5-soft)}
.section > .container{border-top:1px solid var(--r5-rule);padding-top:32px}
.section__title{font-size:clamp(26px,3vw,34px);font-weight:500;line-height:1.45;
  letter-spacing:.02em;font-feature-settings:"palt";margin:0}
/* 見出し上の番号（01・02…）は社長判断で廃止（2026-09-25・海外17社/日本8社とも実例0）。 */
.section__title::after{content:none}
.section__lead{color:var(--ink-2);max-width:40em;margin:24px 0 0;line-height:1.95}

@media (min-width:1060px){
  .section > .container{display:grid;grid-template-columns:248px minmax(0,1fr);column-gap:72px}
  .section > .container > *{grid-column:2}
  .section > .container > .section__title{grid-column:1;grid-row:1 / span 3;align-self:start}
  .section__lead{margin-top:0}
}

/* --- カード: 線囲み・角 0・影なし --- */
.cards{gap:0;margin-top:44px;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--r5-rule);border-left:1px solid var(--r5-rule)}
.cards:has(> .card:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:0;border-right:1px solid var(--r5-rule);border-bottom:1px solid var(--r5-rule);
  border-radius:0;padding:30px 28px 32px;transition:background-color .2s}
.card:hover{background:var(--r5-soft)}
.section--soft .card:hover{background:#fff}
.card h3{font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:.02em;margin:0 0 12px}
.card p{color:var(--ink-2);font-size:15px;line-height:1.85}

/* --- ボタン: 角 2px・影なし・矢印は文字（読み上げない） --- */
.btn{border-radius:2px;background:var(--brand);color:#fff;font-weight:600;font-size:15px;
  padding:15px 26px;letter-spacing:.03em;transition:background-color .2s,color .2s,border-color .2s}
.btn::after{content:"→" / "";margin-left:14px;font-weight:400}
.btn:hover{background:var(--brand-ink)}
.btn--ghost{background:transparent;color:var(--r5-num);border:1px solid var(--r5-num)}
.btn--ghost:hover{background:var(--r5-num);color:#fff}

/* ボタンの並び: HTML の style="margin-left:10px" を打ち消し、間隔は gap で持つ（狭い画面で 2 つ目が右へずれない） */
.hero__lead + p{display:flex;flex-wrap:wrap;gap:12px}
.hero__lead + p .btn{margin-left:0 !important}

/* 本文中のリンク: 土台の #c95100 は淡い地（#fff6ee・#faf8f5）で 4.5:1 を割る（お問い合わせで 4.22 を実測）→ #9c3e00 */
main a:not(.btn){color:var(--r5-num)}

/* --- 取扱メーカー: 本文の幅にそろえて上下を罫線で挟む --- */
.marquee-wrap{max-width:var(--maxw);margin:44px auto 0;padding:0 24px}
.marquee{border-top:1px solid var(--r5-rule);border-bottom:1px solid var(--r5-rule);padding:30px 0}
.mq-name{font-weight:500;color:#3d4a57;letter-spacing:.04em}

/* --- フッター: 明るい地・上に罫線 1 本 --- */
.site-footer{background:#fff;color:var(--ink-2);border-top:1px solid var(--r5-rule);padding:64px 0 32px}
.site-footer a{color:var(--ink);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--r5-num);text-decoration:underline}
.site-footer h2{color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.12em}
.site-footer__copy{border-top:1px solid var(--r5-rule);color:var(--ink-2)}

/* --- 読み込み時の動き: 見出し→説明→ボタンの順に 1 回だけ浮かぶ（§3「動きの採否」） --- */
@keyframes r5-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero__copy,.hero__lead,.hero__lead + p{animation:r5-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero__lead{animation-delay:.15s}
.hero__lead + p{animation-delay:.3s}

@media (prefers-reduced-motion: reduce){
  .hero__copy,.hero__lead,.hero__lead + p{animation:none}
}

/* --- 狭い画面 --- */
@media (max-width:1059px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards:not(:has(> .card:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .hero{padding:72px 0 64px}
  .hero__copy{margin-bottom:28px}
  .section{padding:64px 0}
  .cards,.cards:has(> .card:nth-child(4)),.cards:not(:has(> .card:nth-child(4))){grid-template-columns:minmax(0,1fr)}
}

/* 実測したコントラスト比（WCAG 2.x・scripts/contrast.py で検算）は第 5 回ノートに記載 */

/* ==========================================================================
   第 6 回 共通の足し分（Claude 作・β/α の両案の末尾へ同じものを連結する）
   社長評（第 5 回）「シンプルすぎる・明らかに最新と分かる様子を入れたい」＋
   実測（benchmark 第 12 節 改訂）: 独自書体 17/17 サイト・スクロール中に文字を動かす 6/17 サイト。
   画面に入った時の動きは reveal_r6.js（数行）で付ける。スクリプトが動かない端末では最初から全部見え、
   動きを減らす設定では一切動かさない。読み進めた量の線だけ CSS のスクロール連動（未対応なら出ない）。
   ========================================================================== */

/* --- 1. 独自書体（自社サーバーから配る Noto Sans JP・可変 100〜900・SIL OFL 1.1） --- */
@font-face{font-family:"Noto Sans JP R6";src:url("/assets/fonts/noto-sans-jp-r6.woff2") format("woff2"),url("/assets/fonts/noto-sans-jp-r6.woff") format("woff");
  font-weight:100 900;font-style:normal;font-display:swap}
body{font-family:"Noto Sans JP R6","Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif}

/* 横へ滑り込む間に横スクロールを出さない（clip はスクロール領域を作らない） */
main{overflow-x:clip}

@keyframes r6-wipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-24px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}}
@keyframes r6-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes r6-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion: no-preference){
  /* --- 2. 大見出しは左から拭うように現れ、説明とボタンが続く（読み込み時に 1 回・1.4 秒で終わる） --- */
  .hero .container > .hero__copy{animation:r6-wipe 1.1s cubic-bezier(.65,0,.35,1) .05s both}
  .hero .container > .hero__lead{animation:r6-rise .8s cubic-bezier(.2,.7,.2,1) .45s both}
  .hero .container > .hero__lead + p{animation:r6-rise .8s cubic-bezier(.2,.7,.2,1) .6s both}
}

/* --- 3. 画面に入った節の見出しだけ下から浮かぶ（0.9 秒）。説明・カード・メーカー帯は最初から見せる
   社長決裁 2026-09-25: 海外テック 17 社のページ内実測（浮かせる会社の中央値 11%・当社旧版 91%）に合わせ見出しのみへ縮小。
   reveal_r6.js が html に r6-js を付けた時だけ隠す＝スクリプトが動かない端末では最初から見える --- */
@media (prefers-reduced-motion: no-preference){
  html.r6-js .section__title{opacity:0;transform:translateY(48px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  html.r6-js .is-in{opacity:1;transform:none}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* --- 4. ヘッダーの下端に、読み進めた量だけ伸びる橙の細い線（2px） --- */
    .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
      background:var(--brand-vivid);transform-origin:0 50%;
      animation:r6-progress linear both;animation-timeline:scroll(root)}
  }
}

@media (prefers-reduced-motion: reduce){
  .hero .container > .hero__copy,.hero .container > .hero__lead,.hero .container > .hero__lead + p{
    animation:none;opacity:1;transform:none;clip-path:none}
}

/* ==========================================================================
   意匠レイヤー R7-A「静かな精度」（第 7 回・Opus 5.5・2026-09-26）
   R6 の末尾へ後ろから上書きする。動きは足さない。主要テック 10 社の実測（260926_hp635_主要テック企業サイトの技術構成）で
   当社が未使用だった上位 4 技法を入れる: ① 広色域の当社オレンジ ② コンテナクエリ＋subgrid ③ View Transitions
   ④ AVIF／WebP 画像・woff2 書体（④は scripts/make_round7_preview.py が画像・書体を変換し HTML を <picture> に差し替える）。
   ========================================================================== */

/* --- ① 当社オレンジを 1 色（#eb6e00）から作る -------------------------------------------------
   sRGB 端末: #eb6e00 と同じ値を oklch で書く（見え方は現行と同じ）。濃淡は color-mix(in oklch) で 1 色から作る。
   白文字を載せる --brand は黒を 16% 混ぜて白 4.76:1（現行 #c95100 は 4.51:1）＝4.5 を余裕を持って超える側へ。
   広色域（display-p3）の画面だけ、明るさ（L）はそのままに鮮やかさ（C）を上げる＝濃淡も一緒に鮮やかになる。 */
@supports (color: color-mix(in oklch, red, blue)){
  :root{
    --r7-orange:oklch(67.69% 0.1796 49.75);                              /* = #eb6e00 */
    --brand-vivid:var(--r7-orange);
    --brand:color-mix(in oklch, var(--r7-orange) 84%, black);             /* 白文字 4.76:1 */
    --accent:var(--brand);
    --brand-ink:color-mix(in oklch, var(--r7-orange) 70%, black);         /* 白文字 7.05:1（≒#9c3e00） */
    --r5-num:var(--brand-ink);
    --bg-soft:color-mix(in oklch, var(--r7-orange) 8%, white);            /* ≒#fff6ee */
  }
}
@media (color-gamut: p3){
  @supports (color: oklch(0% 0 0)){
    :root{--r7-orange:oklch(67.69% 0.215 49.75)}                          /* sRGB の外＝P3 の画面だけで出る橙 */
  }
}

/* --- ② コンテナクエリ＋subgrid ----------------------------------------------------------------
   カード列（事業・店舗・商品）: 各カードが親の行を 3 本またいで subgrid で受ける
   ＝横に並んだカードの見出し・本文・評価欄の高さが一列で揃う（本文の短いカードだけ見出しが浮かない）。
   置き場所の幅（コンテナ）で余白と見出しの大きさを決める（画面幅ではなく、カード列そのものの幅）。 */
.cards{container:r7-cards / inline-size;grid-auto-rows:auto;row-gap:0}
.card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.card > *{margin-top:0}
@container r7-cards (max-width: 560px){
  .card{padding:24px 20px 26px}
  .card h3,.card .card__title{font-size:17px}
}
@container r7-cards (min-width: 900px){
  .card{padding:34px 32px 36px}
}

/* 取扱メーカーの帯: 帯の幅でロゴの高さと間隔を決める（狭い置き場所では一回り小さく） */
.marquee-wrap{container:r7-logos / inline-size}
.marquee__track picture,.logo-grid picture{display:contents}   /* <picture> で包んでも並びは現行のまま */
picture > source{display:none}   /* display:contents の下では <source> が空の並び要素になり間隔（gap）を 2 つずつ増やす（実測） */
@container r7-logos (max-width: 600px){
  .mq-logo-img{height:34px}
}

/* --- ③ ページ切替を滑らかにつなぐ（View Transitions・同じサイト内の移動だけ） ---------------------
   ヘッダーは切替の間も動かさず、本文だけを 0.28 秒で入れ替える。動きを減らす設定では使わない。 */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:r7-header}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
}

/* ==========================================================================
   意匠レイヤー R7-B「光と奥行き」（第 7 回・Opus 5.5・2026-09-26）
   a.css（A 案の 4 技法）の後ろへ連結する＝B 案は A 案＋以下の 3 つ。動きは CSS だけ（JS は増やさない）。
   動きを減らす設定（prefers-reduced-motion: reduce）では全て静止した最終の姿で見せる。
   ========================================================================== */

/* --- ⑤ @property で登録した「光の位置」を、最上部の見出しの周りだけでゆっくり動かす（1 か所だけ） -----
   型を登録した値（<percentage>）は途中の値が計算できるので、グラデーションそのものが滑らかに移ろう。
   文字の地は白に近いまま（橙は最も濃い所でも 16%）＝見出し・説明の読みやすさは変えない。 */
@property --r7-glow-x{syntax:"<percentage>";inherits:false;initial-value:78%}
@property --r7-glow-a{syntax:"<percentage>";inherits:false;initial-value:16%}
.hero{
  background:
    radial-gradient(60% 90% at var(--r7-glow-x) 0%,
      color-mix(in oklch, var(--r7-orange, #eb6e00) var(--r7-glow-a), transparent) 0%, transparent 70%),
    #fff;
}
@keyframes r7-glow{
  0%{--r7-glow-x:78%;--r7-glow-a:16%}
  50%{--r7-glow-x:40%;--r7-glow-a:11%}
  100%{--r7-glow-x:18%;--r7-glow-a:15%}
}
@media (prefers-reduced-motion: no-preference){
  .hero{animation:r7-glow 24s ease-in-out infinite alternate}
}

/* --- ⑥ 節見出しの下の細い線が、スクロールに合わせて伸びて灰色から橙へ変わる（CSS のスクロール連動） ----
   未対応の端末・動きを減らす設定では、伸びきった橙の線が最初から見える（隠れる物は無い）。 */
.section__title::after{content:"";display:block;width:56px;height:2px;margin-top:18px;
  background:var(--r7-orange, #eb6e00);transform-origin:0 50%}
@keyframes r7-rule{
  from{transform:scaleX(.18);background-color:var(--r5-rule)}
  to{transform:scaleX(1);background-color:var(--r7-orange, #eb6e00)}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section__title::after{animation:r7-rule linear both;animation-timeline:view();animation-range:entry 10% cover 42%}
  }
}

/* --- ⑦ すりガラスを面として少し広げる（R5 で外したヘッダーのぼかしを戻し、スマホのメニューにも） ----
   最上部の橙の光がヘッダー越しに透ける。文字は墨色のまま（地は白 78% 以上）。 */
.site-header{background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid color-mix(in oklch, var(--r5-rule) 70%, transparent)}
@media (max-width:820px){
  .site-nav.is-open{background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
}

/* ==========================================================================
   意匠レイヤー R7-B′（B 案の修正・Opus 5.5・2026-09-26 社長評）
   a.css＋b.css の後ろへ連結する。
   (1) ヘッダーの社名だけが大きく浮く: 原因＝.site-logo が 19px・太字（土台）で、ナビ 14.5px の 1.31 倍・印が無い。
       → 「流」の印（ブランド素材 favicon と同じ意匠を当社オレンジで・make_brand_assets.py の MARK）と社名を 1 つの組みにし、
         社名はナビとほぼ同じ 15px・字間 .06em に落とす。
   (2) 境界が二重: 原因＝R5 の .section > .container{border-top}（見出し上の線）が、背景色の切り替わる節
       （.section--soft とその直後の節）にも出ていた＝色の境目と線が 100px 離れて 2 本の区切りに見える。
       → 背景色が切り替わる節では線を出さない（色の境目だけで区切る）。同じ白地が続く所だけ線で区切る。
   (3) フッターの社名が単独: 原因＝.site-footer__grid の 1 列目が社名の h2 だけ・© は罫線の下の独立した行。
       → 印＋社名（上）と ©（下）を 1 列目の 1 つの組みにし、ナビ 2 列と同じ段に並べる（罫線の下の単独行をなくす）。
   ========================================================================== */

/* --- (1) ヘッダー: 印＋社名の組み --- */
.site-logo{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.2}
.site-logo::before,.site-footer__grid > div:first-child > h2::before{content:"流" / "";display:inline-grid;place-items:center;
  flex:0 0 auto;width:30px;height:30px;border-radius:7px;background:var(--brand);color:#fff;
  font-size:17px;font-weight:600;letter-spacing:0;line-height:1}

/* --- (2) 境界を 1 つに: 背景色が切り替わる節では見出し上の線を出さない --- */
.section--soft > .container,.section--soft + .section > .container,.hero + .section > .container,
main > .section:first-child > .container{border-top:0;padding-top:0}   /* 最初の節: ヘッダーの下線と 2 本にならない */

/* --- (3) フッター: 印＋社名と © を 1 列目の組みに、ナビ 2 列と同じ段へ --- */
.site-footer > .container{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
.site-footer__grid{display:contents}
.site-footer__grid > div:first-child{grid-column:1;grid-row:1}
.site-footer__grid > div:nth-child(2){grid-column:2;grid-row:1 / span 2}
.site-footer__grid > div:nth-child(3){grid-column:3;grid-row:1 / span 2}
.site-footer__grid > div:first-child > h2{display:flex;align-items:center;gap:10px;margin:0;
  font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.site-footer__copy{grid-column:1;grid-row:2;align-self:start;margin:10px 0 0 40px;padding:0;border-top:0;font-size:12.5px}
@media (max-width:820px){
  .site-footer > .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:0}
  .site-footer__grid > div:first-child{grid-column:1 / -1;grid-row:1}
  .site-footer__copy{grid-column:1 / -1;grid-row:2;margin-bottom:28px}
  .site-footer__grid > div:nth-child(2){grid-column:1;grid-row:3}
  .site-footer__grid > div:nth-child(3){grid-column:2;grid-row:3}
}

/* ==========================================================================
   意匠レイヤー R7-B″（確定版・Opus 5.5・2026-09-26 社長判定）
   a.css＋b.css＋bfix.css の後ろへ連結する。社長指摘の 7 点だけを直す（これ以上の作り込みはしない）。
   ========================================================================== */

/* 1・2. ヘッダーの「流」の印と社名を見た目から外す（トップへのリンクと社名は読み上げ用に残す）。ナビは右端のまま */
.site-logo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}
.site-logo::before,.site-footer__grid > div:first-child > h2::before{content:none}
.site-header__inner{justify-content:flex-end}
.site-footer__copy{margin-left:0}
/* 印が無くなり社名の行が低くなった分、ナビ列の高さが 1 段目にも配られて © が社名から離れる（実測）→ 余りは 2 段目だけへ */
.site-footer > .container{grid-template-rows:auto 1fr}
@media (max-width:820px){ .site-footer > .container{grid-template-rows:none} }

/* 3・4. 区切りの線を全ページで外し、境界は背景色だけにする
   （ヘッダー下・最上部の下・見出し上の罫線・フッター上）。フッターは淡い地と白の両方と色で分かれる地にする */
.site-header{border-bottom:0}
.hero{border-bottom:0}
.section > .container{border-top:0;padding-top:0}
.site-footer{border-top:0;background:#f1ede8}

/* 5. PC 幅の左の見出し列を 248px → 288px（「新規お取引先様を」の 8 文字が 1 行に入る幅）。語の途中では割らない（auto-phrase は既存） */
@media (min-width:1060px){
  .section > .container{grid-template-columns:288px minmax(0,1fr);column-gap:56px}
}

/* 6. フッターのリンクは 1 語として改行させない（「プライバシーポリシー」の「ー」だけが落ちない） */
.site-footer a{white-space:nowrap}

/* 7. スマホのメニューを開いた面は不透明な白（すりガラスをやめる） */
@media (max-width:820px){
  .site-nav.is-open{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ==========================================================================
   意匠レイヤー R7-B‴（確定版の追加修正・Opus 5.5・2026-09-26 社長確認）
   a.css＋b.css＋bfix.css＋bfinal.css の後ろへ連結する。フッターの HTML は scripts/make_round7d_preview.py が差し替える
   （見出し「サイトマップ」「会社情報」「株式会社流通物産」を外し、リンクを 1 列の並びに集約）。
   ========================================================================== */

/* 4. 左上の社名を戻す（印なし・ナビと同じ大きさ・同じ太さ・トップへのリンク） */
.site-logo{position:static;width:auto;height:auto;margin:0;padding:6px 0;overflow:visible;clip:auto;clip-path:none;
  white-space:nowrap;font-size:14.5px;font-weight:500;letter-spacing:.04em;line-height:1.2;color:var(--ink)}
.site-header__inner{justify-content:space-between}

/* 3. ヘッダーと最上部の面を段差なくつなぐ
   ・ヘッダー自身の地は透明にし、すりガラスの面は ::before へ移して下端 28px を透明へにじませる（mask）
   ・最上部の面（.hero）をヘッダーの高さ 68px ぶん上へ伸ばし、橙の光をヘッダーの裏まで回す
   スクロールしてヘッダーが本文に重なっても、すりガラス（白 72%＋ぼかし）はそのまま効く */
.site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-28px;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%)}
.hero{margin-top:-68px;padding-top:196px}
.nav-toggle{background:transparent;border-color:rgba(31,41,51,.18)}
@media (max-width:820px){
  .hero{padding-top:140px}
}

/* 1・2. フッター: リンクを 1 列の横並びにし、© をいちばん下へ */
.site-footer > .container{display:block}
.site-footer__grid{display:block}
.site-footer ul{display:flex;flex-wrap:wrap;gap:10px 32px;font-size:14px}
.site-footer li{margin:0}
.site-footer__copy{margin:36px 0 0;padding:0}
@media (max-width:820px){
  .site-footer ul{gap:10px 24px}
  .site-footer__copy{margin:32px 0 0}
}

/* ==========================================================================
   意匠レイヤー R7-B⁗（確定版の追加修正・Opus 5.5・2026-09-26 社長確認）
   a.css＋b.css＋bfix.css＋bfinal.css＋bppp.css の後ろへ連結する。
   (1) ヘッダーが独立して見える原因（B‴ の実測）: ヘッダーの ::before（白 72%＋ぼかし 18px・彩度 1.6）が最上部の橙の光を
       0〜52px で一様に白く洗い、52〜96px で元へ戻る＝「平らな白い帯＋にじみ」になっていた。光の芯は面の上端（y=0）にあるのに、
       帯の中では (255,250,243)、帯の直下 y=100 では (252,237,225)（PC・右 15% の列）＝光がヘッダーの下から始まって見えた。
       → 最上部ではヘッダーの地・すりガラスを完全に無し（不透明度 0）にし、光をヘッダーの裏から一続きに見せる。
         地はスクロールに合わせて 0→1（CSS のスクロール連動・scroll(root) の 0〜160px）。
         不透明度だけの変化なので「動きを減らす」設定でも有効（2026-09-26 改）。未対応の端末だけ白 90% の地＋下端 32px のにじみ。
   (2) 左上の社名: 書体・大きさ・太さ・字間・行の高さ・上下の余白と下線の枠をナビの項目と同じにし、縦の中心とベースラインを揃える。
   ========================================================================== */

/* --- (1) 最上部の光: 半径を画面基準（60vw・560px）にして、ヘッダーの固定描画と同じ形にする --- */
.hero{background:radial-gradient(60vw 560px at var(--r7-glow-x) 0%,
  color-mix(in oklch, var(--r7-orange, #eb6e00) var(--r7-glow-a), transparent) 0%, transparent 70%), #fff}

/* 既定＝animation-timeline 未対応のブラウザだけ: 白 90% の地＋下端 32px を地→透明へにじませる（くっきりした帯を残さない） */
.site-header::before{bottom:-32px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 32px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 32px),transparent 100%)}

/* 対応ブラウザ: 地はスクロールに合わせて不透明度 0→1（位置も形も動かない＝「動きを減らす」設定でも有効にする・社長の Chrome は reduce）。
   最上部（scrollY=0）では地・ぼかし・縁は不透明度 0＝無し。本文が下に入る 160px までに白 72%＋すりガラスが現れ、下端 44px はにじむ。
   reduce で止めるのは光の移ろい（r7-glow）など位置や形が動くものだけ（b.css） */
@keyframes r7-hdr{from{opacity:0}to{opacity:1}}
@supports (animation-timeline: scroll()){
  .site-header::before{bottom:-28px;background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%);
    opacity:0;animation:r7-hdr linear both;animation-timeline:scroll(root);animation-range:0px 160px}
  @media (prefers-reduced-motion: no-preference){
    /* スクロールできない短いページ（404 等）では時間軸が働かず動きの値が当たらない（実測）→ R6 の読み進めた量の線を全幅で出さない */
    .site-header::after{transform:scaleX(0)}
  }
}

/* --- (2) 左上の社名をナビの項目と同じ文字・同じ枠に（縦の中心・ベースラインを揃える） --- */
.site-logo{display:block;font-family:inherit;font-size:14.5px;font-weight:500;letter-spacing:normal;line-height:1.9;
  padding:6px 0;border-bottom:2px solid transparent;margin:-6px 0 -8px}

/* ==========================================================================
   フッター確定（b5・社長決定 2026-09-26）: B⁗ の後ろへ連結する。
   PC: リンク 6 本を 1 行で中央揃え＋その下に © を中央（F1 と同じ）。
   切替点 616px: リンク 6 本が 1 行に収まる最小の画面幅（B⁗ で 560〜900px を 2px 刻みに実測・615px 以下は 2 行）。
   616px 未満（スマホ）: リンクは B⁗ のまま（左揃え・今の折り返し）、最下部の © の行だけ中央。
   ========================================================================== */
.site-footer__copy{text-align:center}
@media (min-width:616px){
  .site-footer ul{justify-content:center}
}