/* ============================================================
   株式会社バーニーズ 公式サイト（静的HTML版）スタイル
   ＝最初のモックUI（グリーン配色・全画面ヒーロー・3分割メガ・横カルーセル）
   素のCSS。機能ごとにブロックを分け用途コメント付き。
   ============================================================ */

/* ===== 色などのトークン（ここを変えれば全体に効く）===== */
:root {
  --green:   #1f8a5b;   /* ブランドのグリーン（アクセント） */
  --green-d: #176e48;   /* 濃いグリーン（hover） */
  --ink:     #1a1a1a;
  --muted:   #555;
  --line:    #e6e9e8;
  --maxw:    1100px;
}

/* ===== リセット・基本 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* どこかの要素が一時的に画面幅をはみ出しても（出現アニメの±36pxずらし等）、
   ページ全体が横にパンしないよう根元で遮断（スマホの共通問題対策 2026-06-11）。
   clip はスクロール領域を作らない純粋なクリップ。未対応の古いブラウザは前の行の hidden が効く */
html { overflow-x: hidden; overflow-x: clip; }
/* ↑だけでは iPhone(Safari) に効かない（htmlのoverflowをパン操作が無視する仕様）ため、
   はみ出しの発生源である本文の包み <main> でも横だけクリップして実体を消す。
   出現アニメの「右+36pxずらし待機」が画面の外に出るのが原因（=スマホ幅では+16pxはみ出す）。
   ※ここに hidden を使うと main が縦スクロールコンテナ化してページが壊れるので clip 限定 */
main { overflow-x: clip; }
/* scroll-behavior: smooth はCSSでは指定しない（2026-06-11）。
   ScrollTrigger の refresh（タブ復帰・リサイズ時の位置再計算）の内部スクロールまで
   アニメ化されて位置キャッシュが壊れ「放置後に文字が消える」バグの真因だった。
   アンカーの滑らかスクロールは main.js の smoothAnchors がJSで行う。 */
body { font-family: "Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif; color: var(--ink); line-height: 1.8; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* プレースホルダ画像（実画像が来るまでの色ブロック） */
.ph {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .8rem; letter-spacing: .05em; text-align: center;
  background: linear-gradient(135deg,#8e9eab,#636f7a); text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.todo { color: #c98a00; }  /* （要確認）の目印 */

/* ============================================================
   1) 上部タブナビ（6タブ・固定）
   初期: ヒーロー上に透過で重ねる／ロゴ大きく左
   スクロール後: 白の不透明バー／ロゴ縮小して右へ移動
   ============================================================ */
#site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 24px; height: 96px; padding: 0 32px;
  background: linear-gradient(180deg, #ffffff 0%, #eef7f1 100%); color: var(--ink);  /* 白＋超薄い緑のグラデーション（常時） */
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
  transition: height .35s, background .35s, box-shadow .35s, color .35s;
}
#site-header .logo { display: flex; align-items: center; }
#site-header .logo img { height: 72px; width: auto; max-width: 260px; transition: height .35s; }

/* タブは中央揃え（ロゴは左・大きめ） */
.gnav { display: flex; gap: 2px; margin: 0 auto; align-self: stretch; }
/* li をヘッダー高さいっぱいに＝タブ下端とメガメニュー上端を密着（hover途切れ防止） */
.gnav > li { position: static; display: flex; align-items: center; }
.gnav > li > a { display: flex; align-items: center; height: 100%; padding: 0 14px; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.gnav > li:hover > a { color: var(--green); }

/* トップをスクロールした時だけヘッダーを縮小（JSで .scrolled を付与）。
   下層ページ(.solid)は縮小せず、トップ初期と同じ 96px・ロゴ72px のまま＝全ページでサイズを揃える。 */
#site-header.scrolled {
  height: 64px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
#site-header.scrolled .logo img { height: 52px; filter: none; }

/* スマホ用メニュー（ハンバーガー）はデスクトップでは出さない。実体は下のレスポンシブ内 */
#nav-toggle, #mobile-nav { display: none; }

/* ============================================================
   2) メガドロップダウン（mouseoverで3分割：大分類／中分類 田の字／小分類）
   ============================================================ */
.mega {
  position: absolute; left: 0; top: 100%; width: 100%;
  background: #eef7f1; color: var(--ink); box-shadow: 0 12px 24px rgba(0,0,0,.12);  /* タブ下端のグラデ最下部の色に合わせ地続きに */
  border-top: 1px solid #dcebe2; padding: 28px 48px;
  display: grid; grid-template-columns: 1fr 2.2fr .9fr; gap: 32px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.gnav > li:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* 大分類の画像：奇数タブ=四角(縦長め)／偶数タブ=丸（CSSで自動的に交互） */
.mega .major .major-pic { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.gnav > li:nth-child(4) .mega .major .major-pic { object-position: center 20%; }  /* 代表写真の見切れ防止（顔基準で上寄せ）※代表あいさつタブの位置に合わせる */
.gnav > li:nth-child(even) .mega .major .major-pic { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 14px; }
.mega .major .major-name { font-weight: 300; font-size: 1.4rem; letter-spacing: .1em; margin-bottom: 8px; } /* 大分類は細めでスタイリッシュ */
.mega .major .top-link { color: var(--green-d); font-weight: 600; font-size: .85rem; }
.mega .middle .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mega .middle .item .mid-pic { width: 66%; height: 128px; object-fit: cover; border-radius: 6px; margin: 0 auto 6px; }
.mega .middle .item p { font-size: .9rem; }
.mega .minor li { padding: 7px 0; border-bottom: 1px dashed #e3e3e3; font-size: .92rem; }
.mega .minor li:hover { color: var(--green); }
/* メガ項目をリンク化（クリックで下層へ） */
.mega .middle a.item { cursor: pointer; }
.mega .middle a.item:hover p { color: var(--green-d); }
.mega .minor li a { display: block; color: inherit; }

/* ============================================================
   3) ヒーロー（全画面・5枚カルーセル／キャッチコピー固定）
   ============================================================ */
/* ヒーローはヘッダー(96px)の下から画面下までいっぱいに */
/* touch-action: pan-y … 横方向の指の動きはJSのドラッグ送りに渡し、縦は普通にページスクロール */
/* --hero-img-w/h ＝ 表示中の画像の実寸（下の background-size 式の vw 版 ÷ 3:2）。
   バッジ等を「画像の中」に置くための基準。スマホ(≤900px)では別定義の --hero-img-h が優先される */
#hero { position: relative; height: calc(100vh - 96px); margin-top: 96px; min-height: 520px; overflow: hidden; color: #fff; touch-action: pan-y; user-select: none; --hero-img-w: min(max(80vw, calc(35vw + 540px)), 125vw); --hero-img-h: calc(var(--hero-img-w) / 1.5); }
#hero .track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.4,0,.2,1); }
/* 画像の表示幅は画面幅に応じて自動調整（2026-06-11）:
   ・幅1200px以上 … 80%表示（左右に白余白＝従来どおり）
   ・1200→831px  … 余白がだんだん縮み、831pxでちょうど余白ゼロ（100%）
   ・831→600px   … さらに拡大して左右が切れていき、600pxで125%
   ・600px以下    … 125%固定（＝画像の左右1割ずつカット・中央8割を表示）
   計算式 calc(35% + 540px) は上の (1200px,80%)-(600px,125%) を結ぶ直線。
   調整したい時はこの2つの基準点から式を引き直す。 */
#hero .slide { flex: 0 0 100%; height: 100%; background-size: min(max(80%, calc(35% + 540px)), 125%) auto; background-position: top center; background-repeat: no-repeat; background-color: #ffffff; }
#hero .s1 { background-image: url(../img/hero1.jpg); }
#hero .s2 { background-image: url(../img/hero-financier.jpg); } /* 自社ブランドのフィナンシェ。タップで financier.php へ（main.js） */
#hero .s3 { background-image: url(../img/hero3.jpg); }
#hero .s4 { background-image: url(../img/hero4.jpg); }
#hero .s5 { background-image: url(../img/hero5.jpg); }
/* 文字の座布団（PC・2026-06-12 佐藤さん案）: 画像の左側を暗くする帯。
   文字は左寄せ（上=見出し・下=説明文）なので左帯1本で両方に効く。
   旧 #hero::before と違い「画像の矩形」にだけ掛けるので、白余白は染めない。
   ※文字ごとの楕円座布団（closest-side blob）も試したが、明るい写真の上に
     灰色の楕円が形として浮いて見えるため帯方式を採用（比較: corp-lp-debug\shots\cushion-A/B-*.png） */
#hero .slide { position: relative; }
#hero .slide::before { content: ""; position: absolute; top: 0; left: max(0px, calc((100% - var(--hero-img-w)) / 2)); width: min(var(--hero-img-w), 100%); height: min(var(--hero-img-h), 100%); background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.32) 32%, rgba(0,0,0,0) 65%); }
/* PC: 見出しは画像の上端寄せ・説明文とボタンは下端寄せ（2026-06-12 佐藤さん指定。
   中央寄せだと写真中央の人の顔に文字が被るため上下に逃がす）。
   .inner の高さを画像の実寸（--hero-img-h）に合わせることで、縦長画面で画像が
   ヒーローより短い時も文字が画像の外（白地）に落ちない */
#hero .hero-copy { position: absolute; z-index: 2; inset: 0; display: flex; align-items: flex-start; }
/* 下padding 10px＝説明文とボタンを画像の下端ギリギリへ（2026-06-12 佐藤さん指定。
   ノートPC比率(16:9)だと説明文が写真の顔に被るため、できるだけ下に逃がす） */
#hero .hero-copy .inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 32px 10px; width: 100%; height: min(var(--hero-img-h), 100%); display: flex; flex-direction: column; align-items: flex-start; }
#hero .hero-copy h1 { font-size: clamp(2rem,5vw,3.4rem); line-height: 1.3; margin-bottom: 20px; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
#hero .hero-copy p { margin-top: auto; font-size: clamp(1rem,1.6vw,1.2rem); max-width: 640px; margin-bottom: 18px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
#hero .hero-copy .btns { display: flex; gap: 14px; flex-wrap: wrap; }
#hero .arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; background: rgba(90,100,108,.5); color: #fff; font-size: 1.6rem; backdrop-filter: blur(2px); }
#hero .arrow:hover { background: rgba(255,255,255,.45); }
#hero .prev { left: 24px; } #hero .next { right: 24px; }
#hero .dots { position: absolute; z-index: 3; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
#hero .dots button { width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.5); }
#hero .dots button.active { background: #fff; width: 30px; border-radius: 6px; }
/* フィナンシェのスライド（2枚目）表示中だけ出すバッジ。.show-financier は main.js の goTo() が付け外しする。
   位置は画面ではなく「画像の矩形」基準＝画像は中央寄せ(80%等)なので、右は白余白のぶん内側へ、
   下は画像の下端（画面より画像が短い時）に合わせる。translateY(-100%)で「topの位置＝バッジの下端」 */
.hero-badge { position: absolute; z-index: 3; right: max(20px, calc((100vw - var(--hero-img-w)) / 2 + 20px)); top: min(calc(var(--hero-img-h) - 24px), calc(100% - 24px)); transform: translateY(-100%); padding: 12px 24px 13px; border-radius: 16px; background: #e87722; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.4; box-shadow: 0 3px 14px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.hero-badge .small { display: block; font-size: .78em; font-weight: 600; opacity: .92; }
.hero-badge:hover { background: #cf6315; }
#hero.show-financier .hero-badge { opacity: 1; visibility: visible; }
#hero.show-financier { cursor: pointer; } /* スライド面のどこを押しても商品ページに行けることを示す */

/* ボタン */
.btn { display: inline-block; padding: 13px 26px; border-radius: 6px; font-weight: 700; font-size: .95rem; transition: background .2s, color .2s; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); }
.btn-ghost { border: 1.5px solid #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.more { display: inline-block; margin-top: 14px; color: var(--green-d); font-weight: 700; font-size: .95rem; }
.more::after { content: " →"; }

/* ============================================================
   4) 本文セクション（白と色付きの交互）
   ============================================================ */
section.block { padding: 100px 0; }
section.block[id] { scroll-margin-top: 96px; }  /* アンカー着地時に固定ヘッダーへ潜り込まないクリアランス */
.bg-white  { background: #fff; }
.bg-bright { background: linear-gradient(135deg,#a8e063,#56ab2f); color: #fff; }  /* お客さまの声 */
.bg-navy   { background: linear-gradient(135deg,#1f8a5b,#16324f); color: #fff; }  /* 社会課題 */
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .en { display: block; font-size: .8rem; letter-spacing: .25em; color: var(--green); margin-bottom: 8px; }
.bg-bright .section-head .en, .bg-navy .section-head .en { color: #fff; }
.section-head h2 { font-size: clamp(1.6rem,3vw,2.1rem); letter-spacing: .05em; }
.lead { text-align: center; max-width: 760px; margin: 0 auto 44px; }

/* 実画像（カバー表示）共通 */
.imgcover { display: block; width: 100%; object-fit: cover; }
.service-card .imgcover { height: 150px; }
.message-grid .imgcover { height: auto; border-radius: 12px; }  /* 代表写真は切り抜かずフルサイズで（2026-06-11 佐藤さん指定） */

/* 4-1) サービス：3列×2行=6枚 */
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.service-card .ph { height: 150px; }
.service-card .body { padding: 18px 20px; }
.service-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.service-card p { font-size: .92rem; color: var(--muted); }

/* 4-2) 横カルーセル（お客さまの声・社会課題で共用）5秒ごと1枚送り・4枚表示・ドラッグ可 */
/* touch-action: pan-y … 指の縦の動きはページスクロール専任にし、横送りはJSの方向ロック付き
   ドラッグだけが行う（ブラウザの斜めパンでカードが横にブレるのを防ぐ） */
.scroller { display: flex; gap: 20px; overflow-x: auto; padding: 8px 4px 18px; cursor: grab; scrollbar-width: thin; scroll-snap-type: x mandatory; touch-action: pan-y; }
/* ドラッグ中はスナップを切ってカクつきを無くす（離すと自動送りのスナップに戻る） */
.scroller.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* スクロールバーは背景に馴染ませる（2026-06-11）: 細め・レール透明・
   白地では薄グレー、緑帯(bg-bright)/紺帯(bg-navy)では半透明の白。ホバーで少し濃く */
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.scroller:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); }
.bg-bright .scroller::-webkit-scrollbar-thumb, .bg-navy .scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,.30); }
.bg-bright .scroller:hover::-webkit-scrollbar-thumb, .bg-navy .scroller:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.55); }
/* Firefox用（::-webkit-scrollbar が効かないため） */
.scroller { scrollbar-color: rgba(0,0,0,.15) transparent; }
.bg-bright .scroller, .bg-navy .scroller { scrollbar-color: rgba(255,255,255,.30) transparent; }
.scroller .card { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; background: rgba(255,255,255,.97); color: var(--ink); border-radius: 10px; padding: 22px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
/* 企業ロゴ（お客さまの声カード）: 社名の上に表示。ロゴが無い会社は付けなくてOK。
   中央揃え: どのロゴも「高さ64pxの帯」の中央に置く（上下の余白を半分ずつ）ので、
   隣のカードと社名の開始位置が揃い、ロゴは帯の真ん中に並ぶ。
   大きさ: ロゴ内の文字の見た目が同じくらいになるよう --h を個別調整（2026-06-11） */
.scroller .card .corp-logo {
  --h: 32px;
  display: block; height: var(--h); width: auto; max-width: 85%;
  object-fit: contain;
  margin: calc((64px - var(--h)) / 2) 0 calc((64px - var(--h)) / 2 + 10px);
}
.scroller .card .corp-logo[src*="toppan"]      { --h: 20px; }
.scroller .card .corp-logo[src*="meijiyasuda"] { --h: 25px; }
.scroller .card .corp-logo[src*="ctc"]         { --h: 30px; }
.scroller .card .corp-logo[src*="aeon"]        { --h: 46px; }
.scroller .card .corp-logo[src*="nims"]        { --h: 48px; }
.scroller .card .corp-logo[src*="itetsu"]      { --h: 64px; }
.scroller .card .corp-logo[src*="beautybits"]  { --h: 48px; }
.scroller .card .corp-logo[src*="sanmu"]       { --h: 40px; }
.scroller .card h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--green-d); }
.scroller .card p { font-size: .9rem; color: #333; }
.scroller .card .meta { margin-top: 12px; font-size: .82rem; color: #777; }
.hint { font-size: .82rem; opacity: .9; margin-top: 10px; text-align: center; }
/* お客さまの声・社会課題：色帯を低く・カードを一回り小さく */
#service.block { padding: 50px 0; }            /* サービスは上下余白を半分に(100→50px) */
#voice.block, #social.block { padding: 56px 0; }
#voice .section-head, #social .section-head { margin-bottom: 26px; }
#voice .scroller .card, #social .scroller .card { flex: 0 0 calc((100% - 70px) / 4.5); padding: 15px 16px; }
#voice .scroller .card h3, #social .scroller .card h3 { font-size: .95rem; }
#voice .scroller .card p, #social .scroller .card p { font-size: .84rem; }
#voice .scroller .card .meta { font-size: .76rem; margin-top: 8px; }
/* 社会課題：丸く切り抜いた写真＋テキスト（中央寄せ） */
#social .scroller { gap: 8px; }                /* 横を詰め詰めに */
#social .scroller .card { text-align: center; flex: 0 0 calc((100% - 32px) / 5); padding: 14px 12px; }
#social .scroller .card .round-pic { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }

/* 4-3) 代表あいさつ：左写真／右メッセージ */
.message-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.message-grid .ph { height: 360px; border-radius: 12px; }
.message-grid .msg h3 { font-size: 1.5rem; margin-bottom: 16px; }
.message-grid .msg p { margin-bottom: 12px; color: #333; }
.bg-navy .message-grid .msg p { color: #eaf3ee; }  /* 代表あいさつが紺背景のとき本文を明色に */
.message-grid .msg .name { margin-top: 18px; font-weight: 700; }

/* 4-4) 会社概要＋お問い合わせ：左右分割 */
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ac-grid .map .ph { height: 220px; border-radius: 10px; margin-bottom: 20px; }
.ac-grid table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.ac-grid th, .ac-grid td { text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ac-grid th { width: 32%; color: var(--muted); font-weight: 600; }

/* フォーム（お問い合わせ／contact.php共用） */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: .9rem; margin-bottom: 6px; font-weight: 600; }
.form-field .req { color: #c0392b; font-size: .78rem; margin-left: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 12px 14px; border: 1px solid #c5ced3; border-radius: 8px; font: inherit; background: #fff; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-agree { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: .9rem; }
.form-agree input { margin-top: 5px; }
.submit-btn { background: var(--green); color: #fff; border: none; padding: 14px 28px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.submit-btn:hover { background: var(--green-d); }
.alert { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; }
.alert-error { background: #fdecea; border: 1px solid #f3c4bf; color: #a23b32; }
.alert-error ul { list-style: disc; padding-left: 1.3em; }
.thanks { background: #eaf6f2; border: 1px solid #b7e0d2; color: #1f6f57; padding: 32px 28px; border-radius: 10px; text-align: center; }
.thanks h2 { margin-bottom: 10px; }

/* 下層ページ（contact / privacy）共通：固定ヘッダー分の余白＋タイトル帯＋本文 */
.page-hero { padding: 150px 0 44px; background: #f3f7f5; border-bottom: 1px solid var(--line); }  /* 固定ヘッダー96pxの下に十分なクリアランス */

/* ===== 「別途作成」プレースホルダページ（pending.php） ===== */
.pending-box { text-align: center; padding: 36px 0 20px; }
.pending-box img { height: 120px; margin: 0 auto 18px; }
.pending-code { letter-spacing: .3em; color: var(--green-d); font-weight: 700; font-size: .85rem; }
.pending-box h2 { font-size: 1.5rem; margin: 8px 0 14px; }
.pending-box p { color: var(--muted); }
.pending-box .back-btn { display: inline-block; margin-top: 26px; padding: 12px 34px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; }
.pending-box .back-btn:hover { background: var(--green-d); }
.page-hero h1 { font-size: clamp(1.6rem,3vw,2.1rem); }
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.prose { max-width: 820px; margin: 0 auto; }
.prose > h2 { font-size: 1.3rem; margin: 36px 0 12px; padding-left: 14px; border-left: 4px solid var(--green); }
.prose p { margin-bottom: 14px; color: #333; }
.prose img, .svc img { width: 100%; max-width: 600px; border-radius: 10px; margin: 14px 0; display: block; }
/* 下層ページの本文要素（services/works/company/recruit/news 等が使用）*/
.prose > h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.prose ul.bullets { list-style: disc; padding-left: 1.4em; margin-bottom: 16px; }
.prose ul.bullets li { margin-bottom: 6px; color: #333; }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; margin: 8px 0 20px; }
.prose table th, .prose table td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose table th { width: 28%; color: var(--muted); font-weight: 600; }
.note { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.svc { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 110px; }  /* 固定ヘッダー96px下へのアンカー着地用クリアランス */
.svc:last-child { border-bottom: none; }
.svc h2 { font-size: 1.3rem; margin-bottom: 10px; padding-left: 14px; border-left: 4px solid var(--green); }
.form-wrap { max-width: 680px; margin: 0 auto; }

/* フッター */
footer { background: #14241d; color: #cfe6da; padding: 44px 0 26px; font-size: .9rem; }
footer .f-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
footer .f-brand img { height: 40px; }  /* 白塗りフィルタ解除＝実ロゴ（カラー）をそのまま表示 */
footer nav a { margin-left: 18px; }
footer nav a:hover { color: #fff; }
footer .copyright { text-align: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #8a969d; }

/* ===== レスポンシブ（スマホ）=====
   方針（2026-06-11）: 画像はヒーロー（1枚目の画像部分）以外、スマホでは
   高さ固定の切り抜きをやめて「元の縦横比のまま」縮小表示する。
   ヒーローの扱いとナビ（ハンバーガー化）は要件未確定のため未着手。 */
@media (max-width: 900px) {
  .gnav { display: none; }                 /* メガメニュー付きタブはデスクトップ専用 */
  #site-header { padding: 0 16px; }
  .container { padding: 0 20px; }
  section.block { padding: 64px 0; }

  /* ---- ハンバーガーボタン（三）: ヘッダー右端。タップで body.nav-open を切替（JS） ---- */
  #nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
  }
  #nav-toggle span { display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 1px; background: var(--ink); transition: transform .25s, opacity .25s; }
  /* 開いている間は 三 → × に変形 */
  body.nav-open #nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open #nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open #nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- 開いた時のメニュー: 全画面の縦リスト（ヘッダーの下に重なる） ---- */
  #mobile-nav {
    display: block; position: fixed; inset: 0; z-index: 99;  /* ヘッダー(100)のすぐ下 */
    background: #eef7f1; padding: 120px 28px 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  body.nav-open #mobile-nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }      /* 開いている間は背景をスクロールさせない */
  /* パネルはヘッダーの子要素なので、ロゴと×ボタンをパネル(z:99)より上に出す */
  #site-header .logo, #nav-toggle { position: relative; z-index: 100; }
  #mobile-nav li { border-bottom: 1px solid #dcebe2; }
  #mobile-nav li:last-child { border-bottom: none; }
  #mobile-nav a { display: block; padding: 16px 6px; font-weight: 600; font-size: 1.05rem; }
  #mobile-nav a.cta { margin-top: 20px; background: var(--green); color: #fff; text-align: center; border-radius: 8px; padding: 14px; }

  /* グリッドは1列に積む */
  .service-grid { grid-template-columns: 1fr; }
  .message-grid, .ac-grid { grid-template-columns: 1fr; }

  /* 画像の縦横比を維持（高さ固定をやめる）。ヒーローは対象外 */
  .service-card .imgcover { height: auto; }
  .message-grid .imgcover { height: auto; }

  /* 横カルーセル: 1枚を78%幅に（次のカードが少し見えてスワイプを誘う）。
     #voice/#social の「4枚表示」指定は詳細度が高いので、同じ詳細度で上書き */
  .scroller .card,
  #voice .scroller .card,
  #social .scroller .card { flex: 0 0 78%; }
  #social .scroller { gap: 20px; }
  /* 丸写真: 幅96px固定だと狭いカードで楕円に潰れるため、
     幅はカードに合わせて縮み、比率1:1（真円）を固定する */
  #social .scroller .card .round-pic { width: 96px; max-width: 60%; height: auto; aspect-ratio: 1 / 1; }

  /* ---- ヒーロー（スマホ配置・2026-06-11 佐藤さん指定）----
     ・見出し「ビジネスの言葉で〜」… 画像の左上に重ねる
     ・説明文 … 画像の左下に重ねる
     ・ボタン2つ … 画像（ヒーロー）の外＝すぐ下に出す
     --hero-img-h ＝ いま表示中の画像の高さ。
     上の background-size の式（35% + 540px、上限125%）を 3:2比率(1.5) で割ったもの。
     ※ 2026-06-12: 2枚目を hero2.jpg(4:3) → hero-financier.jpg(3:2) に差し替え、全5枚が3:2に。
        旧注記「hero2だけ下端11%切れ」は解消。
     カルーセル送りはドラッグ／スワイプ（main.js）。矢印ボタンはスマホでは出さない。 */
  #hero { --hero-img-h: min(calc(23.34vw + 360px), 83.34vw); height: auto; min-height: 0; }
  #hero .track { height: var(--hero-img-h); }
  /* 画像を暗くする帯グラデ（PC用 .slide::before）はスマホでは使わない（画像を立たせる）。
     代わりに見出し・説明文へうっすらグレーの座布団（角アンカー楕円）を敷いて可読性を確保 */
  #hero .slide::before { display: none; }
  /* コピーは通常フローに戻し、見出しと説明文だけ画像に絶対配置で重ねる */
  #hero .hero-copy { position: static; display: block; }
  /* 見出し: 画像の左上の角を中心にした楕円グラデーションで溶けるグレー。
     直線グラデだと右端・下端のどこかに薄い切れ目が残るが、楕円なら全方向に
     減衰してどの縁でも透明に着地する＝境界線が完全に消える */
  #hero .hero-copy h1 {
    position: absolute; z-index: 2; top: 0; left: 0; right: auto; max-width: 88%;
    margin: 0; padding: 16px 64px 34px 20px; font-size: 1.6rem; color: #fff;
    background: radial-gradient(135% 145% at 0 0, rgba(35,35,35,.46) 0%, rgba(35,35,35,.15) 50%, rgba(35,35,35,0) 74%);
  }
  /* 説明文: 2層のグレーを重ねる。どちらも上端で透明＝境界線なし。
     1層目=左下角からの楕円（斜めの気配）／2層目=下から上への縦フェード（読みやすさの土台） */
  #hero .hero-copy p {
    position: absolute; z-index: 2; top: var(--hero-img-h); transform: translateY(-100%);
    left: 0; right: 0; margin: 0; padding: 34px 20px 42px;
    font-size: .9rem; line-height: 1.7; color: #fff;
    background:
      radial-gradient(120% 130% at 0 100%, rgba(35,35,35,.2) 0%, rgba(35,35,35,0) 70%),
      linear-gradient(to top, rgba(35,35,35,.42) 0%, rgba(35,35,35,.12) 68%, rgba(35,35,35,0) 100%);
  }
  /* ボタンはヒーロー画像の外（直下）。白地に乗るので白枠ボタンは緑に。
     display/height はPC用の上下振り分けフレックスを通常フローに戻す */
  #hero .hero-copy .inner { padding: 18px 20px 6px; display: block; height: auto; }
  #hero .hero-copy .btns .btn { padding: 12px 22px; font-size: .9rem; }
  #hero .hero-copy .btn-ghost { border-color: var(--green); color: var(--green-d); }
  #hero .arrow { display: none; }
  /* ドットは画像の下端に（ヒーロー全体はボタン分まで伸びるため、bottom基準だとズレる） */
  #hero .dots { bottom: auto; top: calc(var(--hero-img-h) - 24px); }
  /* バッジ: 下端は説明文の座布団と重なるので、見出し2行の下・右寄せに退避（translateYの基準もtop上端に戻す） */
  .hero-badge { top: 120px; right: 10px; transform: none; font-size: .88rem; padding: 9px 16px 10px; border-radius: 13px; }

  footer .f-inner { flex-direction: column; text-align: center; }
  footer nav a { margin: 0 9px; }
}

/* ============================================================
   ★ FX — アニメーション実験（main.js の FX スイッチ盤と対応）
   body に fx-◯◯ クラスが付いた時だけ効く（JSがOFFなら何も起きない）
   ============================================================ */

/* ---- A-1 ふわり出現（data-reveal="up/left/right"）---- */
body.fx-reveal [data-reveal]:not([data-reveal-stagger]) { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
body.fx-reveal [data-reveal="left"]:not([data-reveal-stagger]) { transform: translateX(-36px); }
body.fx-reveal [data-reveal="right"]:not([data-reveal-stagger]) { transform: translateX(36px); }
body.fx-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- A-2 時間差ならび（data-reveal-stagger の子。遅延はJSが付与）---- */
body.fx-reveal [data-reveal-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
body.fx-reveal [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---- A-3 しゅるっと下線（section-head が現れた後、下線が左から伸びる）---- */
body.fx-underline .section-head h2 { display: inline-block; position: relative; padding-bottom: 10px; }
body.fx-underline .section-head h2::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .6s ease .35s; }
body.fx-underline .bg-bright .section-head h2::after, body.fx-underline .bg-navy .section-head h2::after { background: #fff; }
body.fx-underline .section-head.is-visible h2::after { transform: scaleX(1); }

/* ---- C-1 足あとカーソル（肉球。位置と向きはJSがインラインで指定。文字系要素の上では出ない）---- */
.paw { position: fixed; z-index: 9999; pointer-events: none; width: 15px; height: 17px; color: var(--green); opacity: .4; animation: fx-paw 1.6s ease-out forwards; }
.paw svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes fx-paw { 0%, 60% { opacity: .4; } 100% { opacity: 0; } }

/* ---- 共通: OSの「視差効果を減らす」設定がONなら全アニメ停止（安全弁）---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---- FX実験パネル（URLに ?fx を付けた時だけJSが生成。左下固定）---- */
#fx-panel { position: fixed; left: 16px; bottom: 16px; z-index: 10000; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 14px 16px; width: 320px; font-size: .82rem; line-height: 1.6; }
#fx-panel strong { display: block; margin-bottom: 8px; color: var(--green-d); letter-spacing: .06em; }
#fx-panel label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
#fx-panel label:hover { color: var(--green-d); }
#fx-panel input { accent-color: var(--green); }
#fx-panel button { margin-top: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 6px; background: #f5f7f6; cursor: pointer; font-size: .8rem; }
#fx-panel button:hover { background: #e9f1ec; }
#fx-panel small { display: block; margin-top: 8px; color: #888; }