/* ============================================================
   一印上越魚市場 カンプCSS（全ページ共通・TOPと下層を1本に統合）
   想定: WordPress Twenty Twenty-Five（ブロックテーマ）
   ============================================================

   2026/09/18: これまで common.css（下層）と top.css（TOP）に分かれていて、
   変数・リセット・ヘッダー・フッター・お知らせ・下部CTA・アニメーションの
   74ルールが両方に重複していた（＝直すとき2箇所さわる必要があった）。
   TOP用の指定を取り込んでこのファイル1本にし、top.css は廃止した。

   ・TOP専用のセクション（.hero / .about / .bizpin / .scene / .feat / .shop）は
     そのクラスがTOPにしか出てこないので、そのまま置いてある。
   ・両方に出てくるものでカンプの値が違っていた6箇所（本文幅・section余白・h2・
     リード幅・お知らせの行間・お知らせ行の上下余白）は、見た目を変えないために
     ファイル末尾の「TOPだけカンプの値が違う箇所」で body.home のときだけ上書きしている。
     TOPと下層で揃えてよいなら、あのブロックを消せば揃う。

   読み込み順（公開側・編集画面とも）:
     common.css → wp-overrides.css
   ★以前は TOP だけ wp-overrides.css の後に top.css が入り、同じ詳細度だと
     カンプ側が勝つ状態だった（.feat の背景やお知らせの中央揃えが効かない原因）。
     1本にしたことで wp-overrides.css が常に最後になる。
   ============================================================ */

:root {
  --ink: #16232C;
  --navy: #0F2A3A;
  --sea: #0B6E8C;
  --sea-soft: #EAF2F5;
  --shu: #C4472C;
  --paper: #FBFAF7;
  --white: #FFFFFF;
  --line: #E4E0D7;
  --muted: #5C6B74;
  --gold: #B39A63;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
  --wide: 1180px;
  --content: 780px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* アンカーリンクの着地位置を固定ヘッダー（66px）の下へ逃がす */
section[id] { scroll-margin-top: 78px; }
body { font-family: var(--gothic); color: var(--ink); background: var(--paper); line-height: 1.95; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a[href^="tel:"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.inner { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--content); margin: 0 auto; }

/* ---- header ---- */
/* -webkit- 付きも書く。Safari（iOS含む）は接頭辞なしの backdrop-filter を解釈しないため、
   併記しないとヘッダーの背景ぼかしが効かない */
header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head-in { max-width: var(--wide); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); }
.logo img { height: 42px; width: auto; }
.logo-txt { font-family: var(--mincho); font-size: 19px; font-weight: 600; letter-spacing: .14em; line-height: 1; white-space: nowrap; }
nav ul { display: flex; gap: 24px; list-style: none; padding: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
nav a:hover { color: var(--sea); }
nav a.cur { color: var(--sea); border-bottom: 2px solid var(--sea); padding-bottom: 4px; }
.nav-shop { background: var(--shu); color: #fff !important; padding: 9px 16px; border-radius: 3px; font-size: 12.5px; }
.nav-shop:hover { opacity: .88; }
@media (max-width: 900px) { nav ul { display: none; } }

/* ---- hero（TOP） ---- */
.hero { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; background: var(--navy); }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,42,58,.82) 8%, rgba(15,42,58,.45) 46%, rgba(15,42,58,.18) 78%); }
.hero-in { position: relative; z-index: 2; max-width: var(--wide); margin: 0 auto; padding: 110px 20px; width: 100%; }
.hero .en { color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .42em; font-weight: 700; }
.hero h1 { font-family: var(--mincho); font-size: clamp(30px, 5.2vw, 54px); font-weight: 600; color: #fff; line-height: 1.55; letter-spacing: .07em; margin-top: 16px; text-wrap: balance; text-shadow: 0 2px 26px rgba(11,27,38,.5); }
.hero p.sub { color: rgba(255,255,255,.94); margin-top: 20px; font-size: clamp(13.5px, 1.55vw, 15.5px); letter-spacing: .05em; max-width: 33em; text-shadow: 0 1px 14px rgba(11,27,38,.55); }
.hero .btns { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero .tate {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 2;
  writing-mode: vertical-rl; font-family: var(--mincho); color: rgba(255,255,255,.85);
  font-size: 15px; letter-spacing: .5em; border-right: 1px solid rgba(255,255,255,.4); padding-right: 14px;
}
.hero .scroll { position: absolute; left: 20px; bottom: 24px; z-index: 2; color: rgba(255,255,255,.7); font-size: 10px; letter-spacing: .32em; writing-mode: vertical-rl; }
.hero .scroll::after { content: ""; display: block; width: 1px; height: 44px; background: rgba(255,255,255,.55); margin: 10px auto 0; }
@media (max-width: 760px) { .hero .tate { display: none; } }

/* ---- page hero（下層） ---- */
.page-hero { position: relative; min-height: 42vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(15,42,58,.85) 12%, rgba(15,42,58,.35) 70%); }
.ph-in { position: relative; z-index: 2; max-width: var(--wide); margin: 0 auto; padding: 90px 20px 44px; width: 100%; }
.ph-in .en { color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .4em; font-weight: 700; }
.page-title { font-family: var(--mincho); font-size: clamp(27px, 4.2vw, 42px); font-weight: 600; color: #fff; letter-spacing: .08em; margin-top: 10px; line-height: 1.5; text-shadow: 0 2px 22px rgba(11,27,38,.5); }

/* ---- パンくず（下層） ---- */
.crumbs { border-bottom: 1px solid var(--line); background: var(--paper); }
.crumbs .inner { display: flex; gap: 10px; padding-top: 13px; padding-bottom: 13px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.crumbs a:hover { color: var(--sea); }
.crumbs span::before { content: "／"; margin-right: 10px; opacity: .5; }
.crumbs span:first-child::before { content: none; }

/* ---- section 共通 ---- */
section { position: relative; padding: 84px 0; }
.sec-label { font-size: 11px; letter-spacing: .3em; color: var(--sea); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.sec-label::after { content: ""; height: 1px; width: 42px; background: var(--sea); }
h2 { font-family: var(--mincho); font-size: clamp(23px, 3.2vw, 32px); font-weight: 600; color: var(--navy); letter-spacing: .05em; line-height: 1.6; text-wrap: balance; }
h3.sub-ttl { font-family: var(--mincho); font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; color: var(--navy); letter-spacing: .05em; line-height: 1.6; }
.sec-lead { margin-top: 16px; color: var(--muted); font-size: 14.5px; max-width: 42em; }
.bg-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
p.body { font-size: 14.5px; margin-top: 14px; }

/* ---- ボタン・矢印リンク（共通） ---- */
.btn { display: inline-block; padding: 15px 34px; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: .08em; transition: opacity .15s, transform .15s; }
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-shu { background: var(--shu); color: #fff; }
.btn-ghost { border: 1px solid rgba(255,255,255,.75); color: #fff; }
/* margin-top はTOPだけ 26px（ファイル末尾の body.home 参照） */
.link-arrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; color: var(--sea); }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---- 2カラム（写真＋文）＝下層 ---- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
.split img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.split.rev img { order: 2; }
@media (max-width: 880px) { .split, .split.rev { grid-template-columns: 1fr; gap: 28px; } .split.rev img { order: 0; } }

/* ============================================================
   TOPページのセクション
   （.about / .bizpin / .scene / .feat / .shop / .contact は TOP にしか出てこない）
   ============================================================ */

/* ---- 当社について ---- */
.about { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 56px; align-items: center; }
.about-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.about-txt h2 { margin-top: 8px; }
.about-txt p { font-size: 14.5px; margin-top: 16px; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---- 事業内容（標準ブロックの並びのまま、追加CSS＋JSでピン留め横スクロール） ---- */
.bizpin { padding: 0; background: #0B1F2B; height: 300vh; }
.bp-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.bp-rail { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 44px); padding: 0 6vw; will-change: transform; }
.biz-head { flex: none; width: min(38vw, 520px); color: #fff; }
.bp-big {
  font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; letter-spacing: .04em;
  line-height: 1; color: transparent; white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255,255,255,.5);
}
.bp-sub { font-family: var(--mincho); font-size: clamp(18px, 2vw, 24px); letter-spacing: .14em; margin-top: 18px; }
.bp-lead { font-size: 13.5px; opacity: .82; margin-top: 14px; line-height: 2.1; }
.biz-cards { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 44px); flex: none; }
.biz-card {
  position: relative; flex: none; overflow: hidden;
  width: clamp(250px, 27vw, 360px); aspect-ratio: 3 / 3.95;
  background: var(--navy);
}
.biz-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.biz-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(11,27,38,.14) 40%, rgba(11,27,38,.84)); }
.biz-card:hover img { transform: scale(1.05); }
/* ★カード全体をクリックできるようにするため、.biz-cap をカード全面に広げて
     見た目は padding と下寄せで再現している（2026/09/19 ご要望）。
     理由: リンクを広げる `a::after { inset: 0 }` は「最も近い position を持つ祖先」＝
     .biz-cap が基準になる。.biz-cap が left/right/bottom で囲まれた狭い箱のままだと、
     リンクもその箱の大きさにしか広がらない。.biz-cap を inset:0 にすれば基準がカード全面になる。
     ★.biz-card の ::before は矢印、::after はグラデーションで使用済みなので、
       リンク用の擬似要素は h3 の a 側に付けている。 */
.biz-cap {
  position: absolute; inset: 0; z-index: 2; color: #fff;
  padding: 0 70px 20px 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.biz-cap h3 { font-size: clamp(17px, 1.9vw, 24px); font-weight: 700; letter-spacing: .02em; line-height: 1.25; color: #fff; }
.biz-cap p { font-size: 13px; letter-spacing: .1em; margin-top: 8px; opacity: .92; }
/* カード全面をリンクの当たり判定にする。<a> のままなので右クリックの「新しいタブで開く」も
   キーボード操作も効く（JSでクリックを拾う方式だと、どちらもできなくなる）。 */
/* ★a 自身に position を付けてはいけない。付けると ::after の基準が a（テキストの箱）になり、
     当たり判定が文字の上だけに戻ってしまう。static のままにして、基準を .biz-cap に任せる。 */
/* ★z-index が要る。付けないとサブテキスト（.biz-cap p）が DOM 順で擬似要素より後に来るため、
     「鮮魚卸売」などの文字の上だけリンクが効かない（実測 7/9 → 9/9）。
     透明な擬似要素なので、文字の見え方は変わらない。 */
.biz-cap h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* 右下の丸い矢印（追加CSSの装飾） */
.biz-card::before {
  content: "→"; position: absolute; right: 18px; bottom: 20px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--navy);
  display: grid; place-items: center; font-weight: 700;
  transition: background .2s, color .2s, transform .2s;
  /* ★矢印は z-index:3 でリンクより前面にある。装飾なのでクリックを通す */
  pointer-events: none;
}
.biz-card:hover::before { background: var(--shu); color: #fff; transform: translateX(3px); }
/* モバイル: ピン留めをやめて横スワイプに
   ★wp-overrides.css の 19. で、スマホでも縦スクロール連動に戻している */
@media (max-width: 860px) {
  .bizpin { height: auto; }
  .bp-sticky { position: static; height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 64px 0; }
  .bp-rail { padding: 0 20px; transform: none !important; }
  .biz-head { width: 78vw; }
  /* カード上下の紺の余白を詰める（2026/09/19 ご要望）
     wp-overrides.css の 19. でスマホも縦スクロール連動（sticky・高さ100svh）に戻しているため、
     横並びのレールが画面の中央に置かれる。カードは幅基準で高さが決まるので、
     画面が縦長なほどカードが小さくなり、その差が上下の紺の余白になる。
     画面に映る紺の量 ＝ 画面の高さ − レール（カード）の高さ。つまりカードを大きくするしかない。
     実測（390×844px）: カード 281×370px に対して紺が 474px＝画面の56%。
     → 幅を 72vw から 84vw に広げる。上限 620px は 860px幅での元のサイズ（619px）に合わせたもので、
       広い側の見え方は変えずに 601〜740px の帯だけ大きくなる。 */
  .biz-card { width: min(84vw, 620px); }
}
/* スマホ（600px以下）は、見出しとカードを縦2段に積む（2026/09/19 実機確認後に変更）
   ★はじめはカードを縦長（3/5.45）にして余白を埋めたが、実機で見ると
     カード1枚が画面の71%を占め、元写真（4:3）の左右が59%も切れて不自然だった。
     カードの比率は元（3/3.95）に戻し、代わりにレールを縦に積んで見出しの高さ（164px）を
     余白の埋めに使う。カードは画面の51%に収まり、切れる量も43%に下がる。 */
@media (max-width: 600px) {
  .bp-rail { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* ★縦2段では「ヘッダー(66px)＋見出し＋間隔(18px)＋カード＋下の余白」が
       100svh に収まらなければならない。カードを幅基準にすると画面の低い端末で
       見出しがヘッダーに隠れるため、高さ基準にして幅を自動計算させる。
       引く 300px の内訳: ヘッダー66 + 見出し最大192 + 間隔18 + 下の余白24。
       見出しは幅が狭いとリード文が折り返して 164→192px に伸びるので、その分を見込む。
       上限 600px と max-width 96vw は、画面の大きい端末で紺の余白が増えすぎないようにするため
       （2026/09/19 実測: 390×844 で余白 188px → 118px、カード 328→374px）。 */
  .biz-card {
    height: min(calc(100svh - 300px), 600px);
    width: auto;
    max-width: 96vw;
    aspect-ratio: 3 / 3.95;
  }
  /* ★.biz-cap はカード全面（inset:0）で、位置は padding で決めている。
       リンクの当たり判定をカード全面に保つため、left/right/bottom ではなく padding を変える */
  .biz-cap { padding: 0 64px 18px 20px; }
}

/* ---- 働く現場（カラム4列＋自動で流れるギャラリー） ---- */
.scene { background: var(--white); border-bottom: 1px solid var(--line); overflow: hidden; padding-bottom: 96px; }
.scene-day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.day-item { position: relative; padding-top: 24px; }
.day-item::before { content: ""; position: absolute; top: 0; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--shu); }
.day-item::after { content: ""; position: absolute; top: 4px; left: 18px; right: -26px; height: 1px; background: var(--line); }
.day-item:last-child::after { display: none; }
.day-item .time { font-family: var(--mincho); font-size: 13.5px; letter-spacing: .16em; color: var(--sea); font-variant-numeric: tabular-nums; }
.day-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-top: 12px; }
.day-item h3 { font-family: var(--mincho); font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: .05em; margin-top: 14px; }
.day-item p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.9; }
@media (max-width: 860px) {
  .scene-day { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  /* 2列・1列では横に伸びる接続線が意味をなさないので消す（ドットは残す） */
  .day-item::after { display: none; }
}
@media (max-width: 480px) { .scene-day { grid-template-columns: 1fr; } }
/* 全幅フォトマーキー（ギャラリーブロックの中身をJSが2周分に複製してループ） */
.marquee-wrap { margin-top: 64px; overflow: hidden; }
.scene-gallery { display: flex; gap: 12px; width: max-content; animation: marquee 60s linear infinite; }
.scene-gallery figure { margin: 0; flex: none; }
.scene-gallery img { height: clamp(150px, 21vw, 240px); width: auto; aspect-ratio: 3/2; object-fit: cover; }

/* ---- 強み（パララックス背景バンド） ----
   ★背景写真のURLは wp-overrides.css の 8. でメディアライブラリの画像に差し替えている
     （ここはカンプ用の相対パス） */
.feat {
  background:
    linear-gradient(rgba(11,31,43,.88), rgba(15,42,58,.9)),
    url("assets/client_seri_wide.jpg") center / cover no-repeat;
  background-attachment: fixed, fixed;  /* パララックス（PC） */
  color: #fff;
}
.feat .sec-label { color: #9FD2E2; }
.feat .sec-label::after { background: #9FD2E2; }
.feat h2 { color: #fff; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; }
.feat-item .no { font-family: var(--mincho); font-size: 15px; color: #9FD2E2; letter-spacing: .18em; }
.feat-item .no b { font-size: 30px; font-weight: 600; margin-left: 2px; }
.feat-item h3 { font-family: var(--mincho); font-size: 19px; font-weight: 600; color: #fff; margin: 10px 0; letter-spacing: .04em; }
.feat-item p { font-size: 14px; color: rgba(255,255,255,.82); }
.feat-item .bar { width: 34px; height: 2px; background: var(--shu); border: 0; margin: 18px 0 0; }
@media (max-width: 760px) { .feat-grid { grid-template-columns: 1fr; gap: 30px; } }
/* iOS等 fixed非対応・タッチ環境では通常スクロールにフォールバック */
@media (hover: none) { .feat { background-attachment: scroll, scroll; } }

/* ---- オンラインショップ（2026/08/29 再編：写真を主役にした非対称レイアウト） ---- */
.shop { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-grid { display: grid; grid-template-columns: 1fr 1.22fr; gap: clamp(34px, 5.4vw, 78px); align-items: center; }
.shop-txt h2 { margin-top: 6px; }
.shop-lead { font-size: 14.5px; color: var(--muted); margin-top: 18px; }
.shop-txt .link-arrow { margin-top: 26px; }
.shop-note { margin-top: 18px; font-size: 11.5px; letter-spacing: .16em; font-weight: 700; color: var(--shu); }
.shop-ph { margin: 0; position: relative; padding: 0 16px 16px 0; }
.shop-ph img { position: relative; z-index: 2; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.shop-ph::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(100% - 16px); height: calc(100% - 16px); border: 1px solid var(--shu); }
@media (max-width: 880px) { .shop-grid { grid-template-columns: 1fr; gap: 30px; } .shop-ph { padding: 0 12px 12px 0; } }

/* ---- お問い合わせ帯（TOP） ---- */
.contact { background: var(--navy); color: #fff; text-align: center; }
.contact h2 { color: #fff; }
.contact p { margin-top: 14px; font-size: 14px; opacity: .88; }
.contact .tel { font-family: var(--mincho); font-size: clamp(26px, 4vw, 34px); letter-spacing: .06em; margin-top: 22px; display: block; color: #fff; }
.contact .tel small { font-size: 12px; display: block; opacity: .75; letter-spacing: .1em; font-family: var(--gothic); }
.contact .btn { margin-top: 24px; }

/* ============================================================
   下層ページのセクション
   ============================================================ */

/* ---- 会社概要テーブル ---- */
.c-table { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 14.5px; background: var(--white); }
.c-table th, .c-table td { padding: 18px 20px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.c-table th { width: 27%; background: var(--sea-soft); color: var(--navy); font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 640px) {
  .c-table th, .c-table td { display: block; width: 100%; }
  .c-table th { border-bottom: 0; padding: 12px 16px; }
  .c-table td { border-top: 0; padding: 12px 16px 16px; }
}

/* ---- 沿革（テーブルブロック＋追加CSSで縦罫線のタイムライン風に） ---- */
/* display:block にした table はボックスが内容より上にずれる（Chrome）。見出しからの距離は
   正しく出るが、表の下だけ内容がはみ出すので margin-bottom でそのぶんを戻している */
.h-table { width: 100%; margin: 36px 0 28px; display: block; font-size: 0; line-height: 0; }
.h-table tbody { display: block; }
/* 縦罫線は table 側ではなく各行の border-left で引く。
   （table を display:block にすると内部の高さ計算がずれて、罫線が最終行まで届かないため） */
.h-table tr { display: block; position: relative; font-size: 16px; line-height: 1.95; border-left: 2px solid var(--sea); padding: 0 0 22px 28px; }
.h-table tr:last-child { padding-bottom: 0; }
/* ドットは border 込みで実寸14px（疑似要素には box-sizing:border-box が効かない）。
   罫線（border-left 2px）の中心に合わせるため left = 1 - 2 - 7 = -8px */
.h-table tr::before { content: ""; position: absolute; left: -8px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--sea); border: 2px solid var(--paper); }
.h-table th { display: block; width: auto; padding: 0; border: 0; background: none; text-align: left; font-family: var(--mincho); font-size: 18px; font-weight: 600; color: var(--sea); letter-spacing: .08em; white-space: nowrap; }
.h-table td { display: block; padding: 0; border: 0; font-size: 14px; }

/* ---- 契約フロー ---- */
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
.flow-step { background: var(--white); border: 1px solid var(--line); padding: 26px 20px; position: relative; }
.flow-step .st { font-family: var(--mincho); font-size: 12px; letter-spacing: .2em; color: var(--sea); }
.flow-step .st b { font-size: 26px; margin-left: 4px; }
.flow-step h3 { font-family: var(--mincho); font-size: 16.5px; color: var(--navy); margin: 10px 0 8px; font-weight: 600; }
.flow-step p { font-size: 13px; color: var(--muted); }
.flow-step::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--sea); font-weight: 700; z-index: 2; }
.flow-step:last-child::after { content: none; }
@media (max-width: 860px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-step::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
}

/* ---- 写真ご提供予定の仮枠（split レイアウト内） ---- */
.ph-box {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(160deg, rgba(15,42,58,.08), rgba(11,110,140,.15)), var(--sea-soft);
  border: 1px dashed var(--sea);
  display: grid; place-items: center; align-content: center; gap: 8px; text-align: center;
}
.ph-box b { font-size: 11px; letter-spacing: .3em; font-weight: 700; color: var(--sea); }
.ph-box span { font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
.split.rev .ph-box { order: 2; }
@media (max-width: 880px) { .split.rev .ph-box { order: 0; } }

/* ---- 採用ページ ---- */
/* 働く環境（2026/08/31 変更：3列カード → 罫線で区切った縦並び） */
.rc-env { margin-top: 40px; border-top: 1px solid var(--line); }
.rc-env-item { padding: 26px 2px; border-bottom: 1px solid var(--line); }
.rc-env-item h3 { font-family: var(--mincho); font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: .06em; }
.rc-env-item p { font-size: 14px; color: var(--muted); margin-top: 10px; }

.rc-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* ---- 酒類の販売：20歳未満飲酒防止の表示（国税庁の表示基準・2026/08/31 追加） ---- */
.note-age { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
.tbd { color: var(--shu); font-weight: 700; }

/* ---- フォーム ---- */
.form { margin-top: 40px; display: grid; gap: 22px; }
.f-row label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.req, .opt { font-size: 10px; letter-spacing: .1em; padding: 2px 8px; border-radius: 2px; font-weight: 700; }
.req { background: var(--shu); color: #fff; }
/* 文字色は --muted（#5C6B74）だと #E4E0D7 の上で 4.14:1 で、10pxの小さい文字には足りない
   （WCAG AA は 4.5:1）。少し暗くして 5.4:1 にしている */
.opt { background: var(--line); color: #4A5A63; }
.f-row input[type="text"], .f-row input[type="tel"], .f-row input[type="email"], .f-row select, .f-row textarea {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: var(--gothic);
  border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--ink);
}
.f-row textarea { min-height: 170px; resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.consent { text-align: center; font-size: 13px; }
.consent a { color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
/* 個人情報の利用目的（フォームの直前。2026/09/19 追加）
   カンプでは同意チェックのラベル内にプライバシーポリシーのリンクを入れていたが、
   Snow Monkey Forms のチェックボックスのラベルはプレーンテキストしか持てないため、
   リンクと利用目的の説明はフォームの手前に出し、チェックは「プライバシーポリシーに同意する」だけにした */
.consent-note { margin-top: 26px; padding: 16px 18px; background: var(--sea-soft); border-left: 2px solid var(--sea); font-size: 13px; color: var(--ink); }
.consent-note a { color: var(--sea); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.submit-wrap { text-align: center; }
.submit-wrap .btn { min-width: 280px; border: 0; cursor: pointer; font-family: var(--gothic); }

/* ---- 電話の案内（2026/08/31 再修正：ボックスをやめ、ただの段落に） ---- */
.tel-text { margin-top: 12px; font-size: 14px; color: var(--muted); }
.tel-text a { color: var(--sea); font-weight: 700; }

/* ---- アクセス（地図の埋め込み＋ボタン） ---- */
.map-embed { position: relative; aspect-ratio: 16/7; margin-top: 32px; border: 1px solid var(--line); overflow: hidden; background: var(--sea-soft); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   お知らせ（TOPの一覧・お知らせ一覧ページで共通）
   ============================================================

   2026/09/18: 列幅を実測に合わせて詰めた（ご要望）。
     旧 110px 84px 1fr / gap 18px … 日付の文字は 76.7px、カテゴリーの文字は最大 46.2px で
       左2列＋間隔に 230px（うち 65px は余白）を使っていた
     新 max-content 74px 1fr / gap 14px … 日付の列は中身の幅ぴったり。
   ★日付の列を固定px（77px など）にすると、游ゴシック／メイリオしか無いWindowsでは
     文字が数px広くなって2行に折り返す。日付は「2026.09.16」と桁数が必ず同じで
     font-variant-numeric: tabular-nums も効いているので、max-content なら
     どの環境でも全行同じ幅になり、タイトルの先頭も揃う。
   ★カテゴリーは文字数が行ごとに違う（EC／お知らせ／入荷情報）ので、
     こちらは固定幅のまま（max-content にすると行ごとに枠の幅が変わる）。
     74px はスマホ表示の枠幅と同じで、5文字までは枠に収まる。
   ★縦は baseline から center に変更（wp-overrides.css の 20. で中央揃えにしていたぶんを
     こちらへ寄せた。カテゴリー枠の左右余白 4px も同じ理由でここに書いている） */
.news-list { margin-top: 40px; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: max-content 74px 1fr; gap: 14px; padding: 22px 4px; border-bottom: 1px solid var(--line); align-items: center; font-size: 14.5px; transition: background .15s; }
.news-item:hover { background: var(--sea-soft); }
.news-item p a:hover { color: var(--sea); }
.news-item time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.news-item .tag { font-size: 10.5px; text-align: center; padding: 2px 4px; border: 1px solid var(--sea); color: var(--sea); border-radius: 2px; letter-spacing: .1em; }
/* ★列を明示しておく。検索結果には固定ページも出るが、固定ページにはカテゴリーが無く
   post-terms ブロックは何も出力しない。自動配置に任せるとタイトルが
   カテゴリーの列（74px）に入って潰れてしまう */
.news-item .wp-block-post-date { grid-column: 1; }
.news-item .tag { grid-column: 2; }
.news-item .wp-block-post-title { grid-column: 3; }
@media (max-width: 640px) {
  .news-item { grid-template-columns: max-content 74px; }
  .news-item p { grid-column: 1 / -1; margin-top: 2px; }
  .news-item .wp-block-post-title { grid-column: 1 / -1; }
}

/* ---- ページ送り ---- */
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 42px; }
.pager a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; font-variant-numeric: tabular-nums; background: var(--white); }
.pager a.cur { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager a:hover:not(.cur) { border-color: var(--sea); color: var(--sea); }

/* ============================================================
   お知らせ詳細 ／ カテゴリー ／ 検索結果（2026/09/18 追加）
   ============================================================

   カンプには無いページ。トンマナ（白いカード・細い罫線・明朝の見出し）に合わせて作った。
   テンプレート: uploads/_build/tpl-single.html / tpl-category.html / tpl-search.html
   サイドバー  : uploads/_build/part-sidebar.html（管理画面では 外観 → エディター → パターン → テンプレートパーツ）
   ★お知らせ一覧（/news/）はカンプどおり全幅のままで、サイドバーは付けていない。 */

/* ---- 本文＋サイドバーの2カラム ---- */
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 54px; align-items: start; }
.news-layout > * { margin-block-start: 0; margin-block-end: 0; }
@media (max-width: 900px) { .news-layout { grid-template-columns: minmax(0, 1fr); gap: 46px; } }

/* ---- パンくず（記事名を出す版。`.crumbs .inner` の指定はそのまま効く） ---- */
.crumbs .crumbs-dyn { margin-top: 0; margin-bottom: 0; }
.crumbs-dyn > * { margin-block-start: 0; margin-block-end: 0; }
.crumbs-dyn > * + *::before { content: "／"; margin-right: 10px; opacity: .5; }
.crumbs-dyn .crumb-cur { font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* ---- 記事タイトルとメタ ---- */
.post-ttl { font-family: var(--mincho); font-size: clamp(22px, 2.9vw, 30px); font-weight: 600; color: var(--navy); letter-spacing: .04em; line-height: 1.6; }
.post-meta { align-items: center; gap: 14px; margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.post-meta time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* 一覧の `.news-item .tag` と同じ見た目（あちらは .news-item 配下だけの指定なので、ここにも書く） */
.post-meta .tag { font-size: 10.5px; text-align: center; padding: 2px 8px; border: 1px solid var(--sea); color: var(--sea); border-radius: 2px; letter-spacing: .1em; }
.post-meta .tag a { color: var(--sea); }
.post-meta .tag a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 記事本文 ---- */
.post-body { margin-top: 30px; font-size: 15px; }
.post-body > * { margin-block-start: 1.6em; }
.post-body > *:first-child { margin-block-start: 0; }
.post-body h2 { font-family: var(--mincho); font-size: 21px; margin-block-start: 2.2em; }
.post-body h3 { font-family: var(--mincho); font-size: 17.5px; font-weight: 600; color: var(--navy); letter-spacing: .04em; margin-block-start: 2em; }
.post-body a { color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.5em; }
.post-body li + li { margin-top: 6px; }
.post-body img { width: 100%; height: auto; }
.post-body blockquote { border-left: 2px solid var(--sea); padding-left: 18px; color: var(--muted); }
.post-body figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---- 前後の記事 ---- */
/* ★align-items を明示する。WordPress の flex グループは既定が align-items:center で、
     スマホで縦積み（flex-direction:column）にすると横方向が中央寄せになり、
     本文の左端（20px）に対して前後の記事だけ 47px 右にずれていた */
.post-nav { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); gap: 24px; font-size: 13.5px; align-items: flex-start; }
.post-nav .wp-block-post-navigation-link { max-width: 47%; }
.post-nav .post-navigation-link__label { display: block; font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.post-nav a { color: var(--sea); font-weight: 600; line-height: 1.7; }
.post-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-nav .pn-next { text-align: right; }
/* スマホでは左右に分けると1件あたりの幅が半分になって窮屈なので縦に積む */
@media (max-width: 600px) {
  .post-nav { flex-direction: column; gap: 20px; }
  .post-nav .wp-block-post-navigation-link { max-width: 100%; }
  .post-nav .pn-next { text-align: left; }
}

/* ---- 検索結果の見出し ---- */
.search-ttl { font-family: var(--mincho); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--navy); letter-spacing: .04em; line-height: 1.6; }

/* ---- サイドバー ---- */
/* ★列を minmax(0, 1fr) にしないと、grid の auto 列が中身（検索フォーム）の幅まで広がり、
     箱が親より 9px はみ出す */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.side > * { margin-block-start: 0; margin-block-end: 0; }
.side-box { background: var(--white); border: 1px solid var(--line); padding: 22px 20px 20px; }
.side-box > * { margin-block-start: 0; }
.side-box > * + * { margin-block-start: 14px; }
.side-ttl { font-family: var(--mincho); font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: .08em; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side-box ul { list-style: none; padding: 0; margin: 0; }

/* カテゴリー（件数は WordPress が「(3)」という素のテキストで出す） */
.side-cats li { border-bottom: 1px dotted var(--line); font-size: 12px; color: var(--muted); }
.side-cats li:last-child { border-bottom: 0; }
.side-cats a { display: inline-block; padding: 10px 0; font-size: 13.5px; color: var(--ink); }
.side-cats a:hover { color: var(--sea); }
.side-cats .current-cat > a { color: var(--sea); font-weight: 700; }
.side-all { font-size: 12.5px; }
.side-all a { color: var(--sea); font-weight: 600; }
.side-all a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 最近のお知らせ */
.side-latest li { padding: 11px 0; border-bottom: 1px dotted var(--line); }
.side-latest li:last-child { border-bottom: 0; }
.side-latest .wp-block-latest-posts__post-title { display: block; font-size: 13.5px; line-height: 1.7; }
.side-latest .wp-block-latest-posts__post-title:hover { color: var(--sea); }
.side-latest .wp-block-latest-posts__post-date { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* サイト内検索（サイドバーと、検索結果が0件のときの再検索） */
.side-search .wp-block-search__inside-wrapper,
.noresult-search .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.side-search .wp-block-search__input,
.noresult-search .wp-block-search__input {
  min-width: 0; padding: 10px 12px; font-size: 13.5px; font-family: var(--gothic);
  border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--ink);
}
.side-search .wp-block-search__input:focus,
.noresult-search .wp-block-search__input:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.side-search .wp-block-search__button,
.noresult-search .wp-block-search__button {
  flex: none; padding: 10px 16px; border: 0; border-radius: 3px;
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--gothic); cursor: pointer; transition: opacity .15s;
}
.side-search .wp-block-search__button:hover,
.noresult-search .wp-block-search__button:hover { opacity: .85; }
.noresult-search { margin-top: 22px; max-width: 420px; }

/* 404 の「トップページへ」「お知らせ一覧へ」（.link-arrow は inline-flex なので、
   段落を並べただけだと隙間なくくっつく） */
.btn-row { gap: 30px; margin-top: 26px; }
.btn-row > .link-arrow { margin-top: 0; }

/* ---- EC小バナー（下層） ---- */
.cta-mini { position: relative; overflow: hidden; margin-top: 60px; background: var(--navy); }
.cta-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cta-mini .in { position: relative; z-index: 2; padding: 44px 24px; text-align: center; color: #fff; }
.cta-mini .en { font-size: 10px; letter-spacing: .34em; opacity: .8; font-weight: 700; }
.cta-mini h3 { font-family: var(--mincho); font-size: clamp(19px, 2.6vw, 24px); margin-top: 8px; font-weight: 600; letter-spacing: .06em; }
.cta-mini .btn { margin-top: 18px; }

/* ---- 下部CTA（2分割バナー・2026/08/29 追加／全ページ共通） ---- */
.cta-split { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cta-half { position: relative; display: grid; place-items: center; min-height: 330px; overflow: hidden; color: #fff; text-align: center; }
.cta-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.65,.3,1); }
.cta-half::after { content: ""; position: absolute; inset: 0; background: rgba(15,42,58,.58); transition: background .3s; }
.cta-half:hover img { transform: scale(1.06); }
.cta-half:hover::after { background: rgba(15,42,58,.42); }
.cta-in { position: relative; z-index: 2; display: block; padding: 48px 24px; }
.cta-en { font-family: var(--gothic); font-size: clamp(28px, 4.2vw, 54px); font-weight: 700; letter-spacing: .04em; line-height: 1; color: #fff; }
.cta-en a { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 26px); color: #fff; }
.cta-en a::after { content: "→"; flex: none; width: clamp(40px, 3.6vw, 54px); height: clamp(40px, 3.6vw, 54px); background: #fff; color: var(--navy); display: grid; place-items: center; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; transition: background .2s, color .2s; }
.cta-half:hover .cta-en a::after { background: var(--shu); color: #fff; }
.cta-sub { display: block; margin-top: 20px; font-size: 13.5px; letter-spacing: .06em; line-height: 1.9; }
@media (max-width: 760px) { .cta-split { grid-template-columns: 1fr; } .cta-half { min-height: 220px; } }

/* ---- footer ---- */
footer { position: relative; background: #0B1F2B; color: rgba(255,255,255,.8); padding: 48px 0 28px; font-size: 12.5px; margin-top: 0; }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.foot-logo img { height: 36px; width: auto; }
.foot-logo .logo-txt { font-size: 17px; }
.foot-nav { display: flex; gap: 20px; list-style: none; padding: 0; flex-wrap: wrap; }
.foot-nav a:hover { color: #fff; }
.foot-addr { margin-top: 14px; font-size: 12px; opacity: .75; }
/* opacity .55 だと紺背景（#0B1F2B）に対して 4.28:1 で、10.5pxの文字には足りない
   （WCAG AA は 4.5:1）。.65 で 5.5:1。控えめさは保てる範囲 */
.copy { text-align: center; margin-top: 30px; font-size: 10.5px; opacity: .65; letter-spacing: .1em; }

/* ---- ブロック注釈（カンプ確認用。WordPressでは出てこない） ---- */
.annot { display: none; position: absolute; top: 10px; right: 10px; z-index: 30; background: #1B8C46; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.25); max-width: 320px; line-height: 1.5; }
body.show-annot .annot { display: block; }
body.show-annot section, body.show-annot .page-hero,
body.show-annot header, body.show-annot footer, body.show-annot .hero { outline: 1.5px dashed #1B8C46; outline-offset: -6px; }
#annot-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 99; background: var(--navy); color: #fff; border: 0; border-radius: 99px; font-family: var(--gothic); font-size: 12px; font-weight: 700; padding: 11px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(15,42,58,.35); }
#annot-toggle:hover { opacity: .9; }

/* ============================================================
   Animation（上品・控えめ／貴創エステート方式: IO + .has-reveal/.is-in）
   ============================================================ */

/* -- 紺の幕が上がって写真が現れる ※CSSのみ・JS不要 -- */
.hero .bg { z-index: 0; }
.page-hero .bg { z-index: 0; }
.hero::before,
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--navy);
  transform-origin: top;
}
.hero::before { animation: curtainUp 1.1s cubic-bezier(.72,.05,.28,.99) .2s forwards; }
.page-hero::before { animation: curtainUp 1s cubic-bezier(.72,.05,.28,.99) .18s forwards; }
@keyframes curtainUp { to { transform: scaleY(0); } }

/* -- 背景写真がゆっくり漂う（ドリフトズーム・動画のような常時アニメ）
      TOPと下層で寄りの量が少し違うのでキーフレームを分けている -- */
.hero .bg img { animation: heroDriftTop 24s ease-in-out infinite alternate; }
@keyframes heroDriftTop {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.5%); }
}
.page-hero .bg img { animation: heroDrift 22s ease-in-out infinite alternate; }
@keyframes heroDrift {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}

/* -- 導入シーケンス（英字→見出し→リード→ボタンの順に浮上）※CSSのみ・JS不要 -- */
.hero-in > * { opacity: 0; animation: heroRiseTop 1s cubic-bezier(.22,.65,.3,1) forwards; }
.hero-in > .en    { animation-delay: .35s; }
.hero-in > h1     { animation-delay: .55s; }
.hero-in > .sub   { animation-delay: .80s; }
.hero-in > .btns  { animation-delay: 1.05s; }
@keyframes heroRiseTop { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero .tate, .hero .scroll { opacity: 0; animation: heroFade 1.2s ease forwards; }
.hero .tate   { animation-delay: 1.30s; }
.hero .scroll { animation-delay: 1.50s; }
@keyframes heroFade { to { opacity: 1; } }

.ph-in > * { opacity: 0; animation: heroRise .9s cubic-bezier(.22,.65,.3,1) forwards; }
.ph-in > .en { animation-delay: .38s; }
.ph-in > .page-title { animation-delay: .55s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* -- SCROLLの縦線ループ（TOP） -- */
.hero .scroll::after { transform-origin: top; animation: scrollline 2.4s cubic-bezier(.6,.1,.3,.9) infinite; }
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* -- スクロールリビール（下から静かに浮上） -- */
html.js .has-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.65,.3,1); }
html.js .has-reveal.is-in { opacity: 1; transform: none; }

/* -- セクションラベルの罫線が伸びる -- */
html.js .sec-label::after { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22,.65,.3,1) .35s; }
html.js .has-reveal.is-in .sec-label::after,
html.js .sec-label.has-reveal.is-in::after { transform: scaleX(1); }

/* -- コンテンツ画像: 左→右のワイプ＋寄りが戻る -- */
html.js img.has-reveal {
  opacity: 1; /* 親のフェード規則を打ち消し、ワイプで見せる */
  clip-path: inset(0 100% 0 0);
  transform: scale(1.08);
  transition: clip-path 1s cubic-bezier(.72,.05,.28,.99), transform 1.7s cubic-bezier(.22,.65,.3,1);
}
html.js img.has-reveal.is-in { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ============ TOPのセクション固有アニメーション ============ */

/* -- 当社について: 写真は左からワイプ、テキストは右から流れ込む -- */
html.js .about-txt.has-reveal { transform: translateX(46px); }
html.js .about-txt.has-reveal.is-in { transform: none; }

/* -- 事業レール: 見出しとカードは横から静かに流入 -- */
html.js .biz-head.has-reveal, html.js .biz-card.has-reveal { transform: translateX(60px); }
html.js .biz-head.has-reveal.is-in, html.js .biz-card.has-reveal.is-in { transform: none; }

/* -- 働く現場: 時刻ドットが順に点灯し、罫線が左から右へ描かれていく -- */
html.js .day-item::before { transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
html.js .day-item.is-in::before { transform: scale(1); }
html.js .day-item::after { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22,.65,.3,1); }
html.js .day-item.is-in::after { transform: scaleX(1); }
html.js .day-item:nth-child(1)::before { transition-delay: .05s; }
html.js .day-item:nth-child(1)::after  { transition-delay: .25s; }
html.js .day-item:nth-child(2)::before { transition-delay: .55s; }
html.js .day-item:nth-child(2)::after  { transition-delay: .75s; }
html.js .day-item:nth-child(3)::before { transition-delay: 1.05s; }
html.js .day-item:nth-child(3)::after  { transition-delay: 1.25s; }
html.js .day-item:nth-child(4)::before { transition-delay: 1.55s; }

/* -- 写真帯のループ -- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -- 朱の下線バーが伸びる（強み） -- */
html.js .feat-item .bar { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22,.65,.3,1) .45s; }
html.js .feat-item.has-reveal.is-in .bar { transform: scaleX(1); }

/* -- TOPのお知らせ: 行が左から順に流れ込む
      ★お知らせ一覧ページ（body.blog）は共通の「下から浮上」のままにするため body.home で絞る -- */
html.js body.home .news-item.has-reveal { transform: translateX(-32px); }
html.js body.home .news-item.has-reveal.is-in { transform: none; }

/* -- モバイルでは横方向の流入をやめる（アニメ中に横スクロールが出るため） -- */
@media (max-width: 880px) {
  html.js .about-txt.has-reveal,
  html.js .biz-head.has-reveal,
  html.js .biz-card.has-reveal,
  html.js body.home .news-item.has-reveal { transform: translateY(28px); }
  html.js .about-txt.has-reveal.is-in,
  html.js .biz-head.has-reveal.is-in,
  html.js .biz-card.has-reveal.is-in,
  html.js body.home .news-item.has-reveal.is-in { transform: none; }
}

/* -- 動きを減らす設定の尊重 -- */
@media (prefers-reduced-motion: reduce) {
  .hero-in > *, .hero .tate, .hero .scroll, .hero .bg img, .hero::before,
  .ph-in > *, .page-hero .bg img, .page-hero::before,
  html.js .has-reveal, html.js img.has-reveal,
  html.js .sec-label::after, html.js .feat-item .bar {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
    clip-path: none !important;
  }
  .hero::before, .page-hero::before { display: none !important; }
  .scene-gallery { animation: none !important; }
  .marquee-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.js .day-item::before, html.js .day-item::after { transform: none !important; transition: none !important; }
  .bizpin { height: auto !important; }
  .bp-sticky { position: static !important; height: auto !important; overflow-x: auto !important; padding: 64px 0; }
  .bp-rail { transform: none !important; }
}

/* ============================================================
   TOPだけカンプの値が違う箇所（2026/09/18 統合時に判明）
   ============================================================

   TOPのカンプ（index.html）と下層のカンプ（about.html 等）は別々に書かれていて、
   同じセレクタでも値が少しずつ違っていた。見た目を変えないため、TOP側の値を
   body.home のときだけ当てている。

   ・--content   720px / 780px … お知らせ一覧の枠幅（TOPは 680px、下層は 740px で表示される）
   ・section     88px / 84px  … セクションの上下余白
   ・h2          最大34px / 最大32px
   ・.sec-lead   40em / 42em  … リード文の折り返し幅
   ・.news-item  20px / 22px  … お知らせ1行の上下余白

   TOPと下層で揃えてよければ、このブロックをまるごと消せば下層の値に統一される。

   ★`body.home` を素で書くと詳細度が1段上がり、上のカンプ側の指定に勝ってしまう。
     （実測で、`.bizpin`/`.cta-split` の `padding:0`、`.scene` の `padding-bottom:96px`、
       `.cta-en` の文字サイズが潰れてTOPが168px伸びた）
     詳細度に足されない :where() で囲み、上と同じ詳細度のまま「後に書いたので勝つ」形にする。
     変数の --content だけは :root（0,1,0）に勝つ必要があるので body.home のまま。 */

body.home { --content: 720px; }
:where(body.home) section { padding: 88px 0; }
:where(body.home) h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.55; }
:where(body.home) .sec-lead { max-width: 40em; }
:where(body.home) .news-item { padding: 20px 4px; }
:where(body.home) .link-arrow { margin-top: 26px; }