/* ヘッダー（企業型DC特設サイト）
   ============================================================
   **このファイルがヘッダーの見た目の正本。** 2か所で使われる。

   1. style.css の先頭に連結されて、通常のページへ配られる（src/generate.mjs の copyAssets）
   2. 組み込みツールのページ（ニュースレター・シミュレーター等）へ、そのまま差し込まれる
      （src/generate.mjs の injectSiteNav）

   組み込みツールは元が別サイトのHTMLで、それぞれ自前のCSSを持っている。以前はそのために
   専用の細い帯を後付けしていたが、ページによってヘッダーが別物になっていた。ここを1か所に
   まとめたので、**直すのはこのファイルだけでよい。**

   ツールのページはサイト本体の style.css を読まないので、:root の変数が無くても動くように
   すべて `var(--x, 既定値)` の形で書く。サイトの theme は injectTheme が :root へ流し込む。
   ============================================================ */

/* 組み込みツールのページでは、ツール自身のヘッダー（sticky・z-index:100）の下にメニューの開いた部分が潜っていた。
   それより上、ツールのモーダル（200〜）より下にする。 */
.site-header{position:sticky;top:0;z-index:150;background:var(--main,#0D1F3C);color:var(--white,#fff);}
.site-header .wrap{width:min(100% - 40px, var(--wrap,1080px));margin-inline:auto;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.brand-logo{max-height:34px;max-width:230px;width:auto;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1.35;}
.brand-name{font-family:var(--heading-font,"Noto Serif JP","Yu Mincho",serif);font-size:16px;font-weight:700;}
.brand-sub{font-size:11px;letter-spacing:.08em;color:var(--accent,#C4A35A);white-space:nowrap;}

.global-nav > ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;}
.global-nav > ul > li{position:relative;}
.global-nav > ul > li + li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.22);}
.global-nav > ul > li:last-child::before{display:none;}
.global-nav a{position:relative;display:block;padding:10px 15px;font-size:13.5px;letter-spacing:.03em;white-space:nowrap;text-decoration:none;color:inherit;transition:color .2s;}
.global-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;background:var(--accent,#C4A35A);transition:left .28s cubic-bezier(.4,0,.2,1),right .28s cubic-bezier(.4,0,.2,1);}
.global-nav a:hover::after,.global-nav a.is-current::after{left:15px;right:15px;}
.global-nav a:hover{color:var(--accent,#C4A35A);}
.global-nav .has-children > a::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;}
.global-nav .nav-button{margin-left:12px;background:var(--accent,#C4A35A);color:#fff;border-radius:3px;font-weight:700;letter-spacing:.06em;}
.global-nav .nav-button::after{display:none;}
.global-nav .nav-button:hover{background:color-mix(in srgb,var(--accent,#C4A35A) 82%,#000);color:#fff;}

.sub-nav{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--main,#0D1F3C);list-style:none;margin:0;padding:8px 0;box-shadow:0 12px 28px -16px rgba(0,0,0,.6);}
.sub-nav li{list-style:none;}
.global-nav li.has-children:hover .sub-nav{display:block;}
.sub-nav a{padding:9px 18px;font-size:13px;}
.sub-nav a::after{bottom:6px;}
.sub-nav a:hover::after{left:18px;right:18px;}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;height:2px;background:var(--white,#fff);transition:.2s;}

/* 白基調（body.base-light）のとき。ヘッダーだけ白地になる。 */
.base-light .site-header{background:var(--white,#fff);color:var(--main,#0D1F3C);box-shadow:0 1px 0 var(--line,#E2DED6);}
.base-light .brand-sub{color:var(--accent-ink,color-mix(in srgb,var(--accent,#C4A35A) 55%,#000));}
.base-light .global-nav > ul > li + li::before{background:var(--line,#E2DED6);}
.base-light .global-nav a:not(.nav-button):hover{color:var(--accent-ink,color-mix(in srgb,var(--accent,#C4A35A) 55%,#000));}
.base-light .global-nav a::after{background:var(--accent,#C4A35A);}
.base-light .sub-nav{background:var(--white,#fff);box-shadow:0 12px 28px -16px rgba(0,0,0,.28);}
.base-light .sub-nav a{color:var(--main,#0D1F3C);}
.base-light .nav-toggle span{background:var(--main,#0D1F3C);}

/* メニューが1行に収まらない幅（ロゴの長い事務所では1000px前後）から、☰メニューに切り替える。 */
@media (max-width:1024px){
  .nav-toggle{display:flex;}
  .global-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--main,#0D1F3C);border-top:1px solid rgba(255,255,255,.15);}
  .global-nav.open{display:block;}
  .global-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .global-nav a{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
  .global-nav .nav-button{border-radius:0;text-align:center;}
  /* スマホでは子の項目を最初から全部見せる。押すたびに開いたり閉じたりすると、どこにいるか迷うため。
     親の項目は見出しとして残し、子は一段下げて並べる。 */
  .global-nav{max-height:calc(100vh - 68px);overflow-y:auto;}
  .sub-nav{display:block;position:static;border-top:0;padding:0;background:rgba(0,0,0,.2);}
  .sub-nav a{padding:12px 20px 12px 36px;}
  .global-nav .has-children > a::before{display:none;}
  .header-inner{position:relative;}
  /* ロゴと「＆ SOKEI DC Alliance」を横に並べると、ロゴの長い事務所ではメニューボタンが画面の外へ押し出される。
     スマホでは縦に積み、ロゴも画面幅に収まる大きさまで縮める。 */
  .brand{flex-direction:column;align-items:flex-start;gap:2px;min-width:0;}
  .brand-logo{max-width:min(230px, calc(100vw - 110px));max-height:30px;}
  .brand-name{font-size:15px;}
  .base-light .global-nav{background:var(--white,#fff);border-top-color:var(--line,#E2DED6);}
  .base-light .sub-nav{background:rgba(0,0,0,.035);box-shadow:none;}
  .base-light .global-nav a{border-bottom-color:var(--line,#E2DED6);}
}

/* ヘッダーのCSSは header.css に移した。生成時にこのファイルの先頭へ連結され、
   同じものが組み込みツールのページにも差し込まれる（src/generate.mjs）。 */
/* 企業型DC特設サイト テンプレート
   色はすべて CSS 変数。サイトごとの theme を :root に流し込むだけで着せ替わる。 */

:root{
  --main: #0D1F3C;
  --accent: #C4A35A;
  --bg: #F5F1EA;
  --text: #1A1A2E;
  --muted: #666;
  --line: #E2DED6;
  --white: #fff;
  --heading-font: "Noto Serif JP", "Yu Mincho", serif;
  --body-font: Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
  --wrap: 1080px;
  /* アクセント色をそのまま文字に使うと、明るい色（ターコイズ等）の事務所で読めなくなる。
     文字に使うときはこの派生色を通す。事務所の色から自動で作るので調整は要らない。 */
  --accent-ink: color-mix(in srgb, var(--accent) 55%, #000);
}

*{box-sizing:border-box;}
body{margin:0;font-family:var(--body-font);color:var(--text);background:var(--white);line-height:1.9;font-size:16px;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto;}
.wrap.narrow{width:min(100% - 40px, 760px);}


/* hero */
.hero{position:relative;background:var(--main);color:var(--white);overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;}
.hero-inner{position:relative;padding:88px 0 76px;text-align:center;}
.hero-eyebrow{font-size:14px;letter-spacing:.1em;color:var(--accent);margin:0 0 12px;}
.hero-title{font-family:var(--heading-font);font-size:clamp(24px,4vw,36px);margin:0 0 24px;line-height:1.5;}
.hero-title-sub{display:block;font-size:14px;letter-spacing:.08em;color:var(--accent);margin-top:8px;}
.hero-catch{font-family:var(--heading-font);font-size:clamp(22px,3.6vw,32px);margin:0 0 18px;line-height:1.6;}
/* 写真の上では文字を全部白にする。アクセント色は写真に負けて読めなくなるため。
   ベタ塗りの背景（写真なし）のときは今までどおりアクセント色を使う。 */
.hero-slides ~ .hero-inner .hero-eyebrow,
.hero-slides ~ .hero-inner .hero-title-sub,
.hero-slides ~ .hero-inner .hero-stat-number,
.hero-slides ~ .hero-inner .hero-stat-label{color:#fff;}
.hero-slides ~ .hero-inner .hero-stat{border-top-color:rgba(255,255,255,.5);}
.hero-slides ~ .hero-inner .hero-title,.hero-slides ~ .hero-inner .hero-catch{text-shadow:0 2px 18px rgba(0,0,0,.55);}
.hero-slides ~ .hero-inner .hero-lead,.hero-slides ~ .hero-inner .hero-eyebrow,
.hero-slides ~ .hero-inner .hero-title-sub,.hero-slides ~ .hero-inner .hero-stat-number{text-shadow:0 1px 12px rgba(0,0,0,.5);}
.hero-lead{font-size:15px;margin:0 auto 32px;max-width:640px;color:rgba(255,255,255,.9);text-align:left;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
/* 枠で囲むとボタンに見えるので、囲まない。細い横線だけで区切る。 */
.hero-stat{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:36px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.35);min-width:220px;}
.hero-stat-note{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px;}
.hero-stat-label{font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.75);}
.hero-stat-number{font-family:var(--heading-font);font-size:clamp(30px,5vw,44px);font-weight:700;line-height:1.1;color:var(--accent);}
.hero-stat-suffix{font-size:16px;font-weight:400;margin-left:4px;}

/* 見出しは日本語の文節で折り返す（word-break:auto-phrase）。
   途中の変なところで切れると読みにくいため、テンプレート全体の決まりにしている。 */
.hero-title,.hero-catch,.sub-heading,.card-title,.reason-title,.flow-title,.news-title{word-break:auto-phrase;}

/* 事務所名とAllianceの連名は途中で切らない。狭い画面では切れないと収まらないので戻す。 */
.nobr{white-space:nowrap;}
@media(max-width:640px){.nobr{white-space:normal;}}

/* buttons */
.btn{display:inline-block;padding:14px 32px;border-radius:4px;font-size:15px;font-weight:700;text-decoration:none;transition:.2s;border:2px solid transparent;cursor:pointer;}
/* 主ボタンの文字色は白。テーマの --btn-text で変えられる。 */
.btn-primary{background:var(--accent);color:var(--btn-text,#fff);}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 82%,#000);color:var(--btn-text,#fff);}
/* 副ボタンは白い板に文字を抜いた形。文字の部分から後ろの写真が透ける。
   mix-blend-mode:screen は「白はそのまま白、黒は下が透ける」ので、
   白地＋黒文字にすると文字だけが抜ける。ホバーでこれを反転させる。
   対応していないブラウザでは、白地に黒文字の普通のボタンとして見える。 */
.btn-ghost{background:var(--white);border-color:var(--white);color:#000;mix-blend-mode:screen;}
.btn-ghost:hover{background:transparent;border-color:rgba(255,255,255,.85);color:var(--white);mix-blend-mode:normal;}
.btn-outline{border-color:var(--main);color:var(--main);padding:10px 22px;font-size:14px;}
.btn-outline:hover{background:var(--main);color:var(--white);}

/* sections */
.section{padding:72px 0;}
.section-light{background:var(--bg);}
.section-navy{background:var(--main);color:var(--white);}
.section-heading{font-family:var(--heading-font);font-size:clamp(20px,2.8vw,28px);text-align:left;margin:0 0 12px;line-height:1.6;word-break:auto-phrase;}
.section-heading em{font-style:normal;color:var(--accent);padding:0 4px;}
.section-navy .section-heading{color:var(--white);}
.sub-heading{font-family:var(--heading-font);font-size:20px;margin:48px 0 16px;}
.lede{max-width:760px;margin:0 0 40px;text-align:left;font-size:15px;color:var(--muted);}
.section-navy .lede{color:rgba(255,255,255,.85);}
.lede p{margin:0 0 12px;}
.empty{text-align:center;color:var(--muted);}

/* cards */
.card-grid{display:grid;gap:20px;}
.card-grid-3{grid-template-columns:repeat(3,1fr);}
.card-grid-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:28px 24px;transition:.2s;}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,31,60,.1);}
.card-title{font-family:var(--heading-font);font-size:16px;margin:0 0 12px;color:var(--main);line-height:1.6;}
.card p{margin:0;font-size:14px;color:var(--muted);}
/* 番号は絶対配置。top:20px + 文字高28px = 48px を占めるので、本文はその下から始める。 */
.card-numbered{position:relative;padding-top:56px;}
.card-number{position:absolute;top:20px;left:24px;font-family:var(--heading-font);font-size:28px;color:var(--accent);line-height:1;}

/* reasons */
.reason-list{list-style:none;margin:0;padding:0;max-width:860px;margin-inline:auto;}
.reason-item{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.15);}
.reason-item:last-child{border-bottom:0;}
.reason-number{flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%;font-family:var(--heading-font);font-size:20px;color:var(--accent);}
.reason-title{font-family:var(--heading-font);font-size:18px;margin:0 0 10px;color:var(--accent);}
.reason-body p{margin:0;font-size:14px;color:rgba(255,255,255,.85);}

/* flow */
.flow-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:820px;margin-inline:auto;}
.flow-step{position:relative;background:var(--bg);border-left:3px solid var(--accent);padding:22px 26px;}
.flow-number{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700;}
.flow-title{font-family:var(--heading-font);font-size:17px;margin:6px 0 8px;color:var(--main);}
.flow-step p{margin:0;font-size:14px;color:var(--muted);}

/* simulator */
.sim-tabs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px;}
.embed-frame{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--white);}
.embed-frame iframe{display:block;width:100%;height:820px;border:0;}

/* news */
.news-list{list-style:none;margin:0;padding:0;max-width:820px;margin-inline:auto;}
.news-item{padding:20px 0;border-bottom:1px solid var(--line);}
.news-date{font-size:13px;color:var(--muted);margin-right:12px;}
.news-category{display:inline-block;padding:2px 10px;border:1px solid var(--accent);border-radius:999px;font-size:11px;color:var(--accent);}
.news-title{font-size:16px;margin:8px 0 8px;font-weight:700;line-height:1.6;}
.news-links a{display:inline-block;margin-right:10px;font-size:13px;color:var(--main);text-decoration:underline;}

/* contact form */
.contact-form{display:grid;gap:20px;}
.form-row{display:grid;gap:8px;}
.form-label{font-size:14px;font-weight:700;}
.required{display:inline-block;margin-left:8px;padding:1px 8px;background:var(--accent);color:var(--main);border-radius:3px;font-size:11px;}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:15px;background:var(--white);}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.form-note{font-size:13px;color:var(--muted);margin:0;}

/* company */
.company-table{width:100%;border-collapse:collapse;font-size:14px;}
.company-table th,.company-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.company-table th{width:30%;color:var(--main);font-weight:700;white-space:nowrap;}
.rep-profile{display:flex;gap:24px;align-items:flex-start;}
.rep-photo{width:140px;border-radius:6px;flex:none;}
.rep-name{font-family:var(--heading-font);font-size:17px;margin:0 0 10px;color:var(--main);}

/* footer */
.site-footer{background:var(--main);color:rgba(255,255,255,.82);padding:52px 0 28px;font-size:14px;}
.footer-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.15);}
.footer-brand{display:flex;flex-direction:column;}
.footer-brand .brand-name{font-family:var(--heading-font);font-size:17px;color:var(--white);}
.footer-address{font-style:normal;line-height:1.9;}
.footer-address a{color:inherit;}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:22px 0 0;padding:0;}
.footer-nav a{font-size:13px;text-decoration:none;}
.footer-nav a:hover{color:var(--accent);}
.copyright{margin:24px 0 0;font-size:12px;color:rgba(255,255,255,.55);}

@media (max-width:900px){
  .card-grid-4{grid-template-columns:repeat(2,1fr);}
  .card-grid-3{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .section{padding:52px 0;}
  .reason-item{flex-direction:column;gap:14px;}
  .rep-profile{flex-direction:column;}
  .embed-frame iframe{height:640px;}
}

/* 共用コンテンツの紹介ページ */
.page-head{padding-bottom:0;}
.lede-left{text-align:left;max-width:820px;}
.center-action{text-align:center;}

/* 自動投稿よけ。表示しないが、スクリーンリーダー由来の誤入力も避けるため領域ごと隠す。 */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{margin:4px 0 0;font-size:14px;min-height:1.5em;}
.form-status.is-ok{color:#1a7f4b;}
.form-status.is-error{color:#b3261e;}
.contact-form button[disabled]{opacity:.6;cursor:progress;}

/* ============================================================
   ヒーローの写真スライドショー
   写真は site.assets.heroImages（配列）。切り替え方は site.heroTransition。
   1枚あたりの秒数は site.heroSeconds（既定6秒）。
   JSは使わず、--i（何枚目か）と --cycle（一周の秒数）だけで各スライドの
   開始タイミングをずらしている。
   ============================================================ */
/* --overlay 覆いの濃さ（0〜100・既定45。小さいほど写真が鮮やかに出る）
   --vivid   写真自体の鮮やかさ（100で元のまま・既定112）
   どちらも site.heroOverlay / site.heroVivid で サイトごとに変えられる。 */
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:1;--overlay:45;--vivid:112;}
/* 写真の上に文字を載せるための覆い。濃くしすぎると写真が沈むので、
   下側だけ強めにして上半分は写真を見せる。文字側にも影を足して可読性を確保する。 */
/* 覆いは、重ね順を動かしている写真（最大 z-index:200）よりも必ず上に置く */
.hero-slides::after{content:"";position:absolute;inset:0;z-index:300;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--main) calc(var(--overlay) * 0.5%),transparent),
    color-mix(in srgb,var(--main) calc(var(--overlay) * 0.95%),transparent) 45%,
    color-mix(in srgb,var(--main) calc(var(--overlay) * 1.6%),transparent));}
/* 1枚ごとに「枠（.hero-slide）」と「写真（.hero-slide-img）」の2層にしてある。
   切り替えの動きは基本的に枠に付ける。写真だけを切り抜きたい動き（glow）は写真側に付け、
   枠の ::before / ::after を切り抜かれない光の演出に使う。 */
.hero-slide{position:absolute;inset:0;opacity:0;
  animation-duration:var(--cycle);animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.16,1,.3,1),linear;
  animation-delay:calc(var(--i) * var(--cycle) / var(--n));}
.hero-slide-img{position:absolute;inset:0;background-size:cover;background-position:center 40%;
  filter:saturate(calc(var(--vivid) * 1%));}
.hero-slide-img--mobile{display:none;}
@media(max-width:767px){
  .hero-slide-img--desktop{display:none;}
  .hero-slide-img--mobile{display:block;background-position:center;}
}
.hero .wrap{position:relative;z-index:3;}

/* 重ね順。どの切り替え方にも、この heroStack を一緒に付ける。
   写真は自分の番が過ぎても消えずに残る作りなので、重ね順を決めておかないと
   HTMLで後ろにある写真（最後の1枚）が、2周目以降ほかの写真の登場をずっと覆い隠してしまう。
   登場した瞬間を一番上（200）にして、一周かけて下げていけば、
   「いちばん最近登場した写真」が常に一番上になる。 */
@keyframes heroStack{
  from{z-index:200;}
  to{z-index:1;}
}

/* 中心から光が広がって現れる（dc-alliance.sokei-401k.com のハブサイトと同じ動き）
   ①前の写真が主色で覆われる → ②中心に光の点 → ③閃光 → ④写真がふちのやわらかい円で開く → ⑤光の輪が広がる
   以前は写真を clip-path の円で切り抜くだけで、光の演出が無く、動きが分かりづらかった。
   光の点と輪は写真の外（枠の ::before / ::after）に置く。写真と一緒に切り抜くと、写真が開く前の光が見えないため。
   タイミングはハブサイト（4枚・16秒）の割合を、前の写真を覆う分だけ後ろへずらしたもの。 */
.hero-slides--glow .hero-slide{animation-name:heroGlowCover,heroStack;background:var(--main);}
.hero-slides--glow .hero-slide-img{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 8%,rgba(0,0,0,.75) 28%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.12) 72%,transparent 95%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 8%,rgba(0,0,0,.75) 28%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.12) 72%,transparent 95%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:0vmax 0vmax;mask-size:0vmax 0vmax;
  animation:heroGlowReveal var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--i) * var(--cycle) / var(--n));}
/* ②③ 中心に現れる光の点が、一瞬で強い閃光になる */
.hero-slides--glow .hero-slide::before{content:"";position:absolute;z-index:1;left:50%;top:50%;
  width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,247,228,.95) 16%,color-mix(in srgb,var(--accent) 50%,transparent) 38%,transparent 70%);
  opacity:0;transform:scale(.04);mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity;
  animation:heroGlowIgnite var(--cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--cycle) / var(--n));}
/* ⑤ 写真が開ききったあとに広がる光の輪 */
.hero-slides--glow .hero-slide::after{content:"";position:absolute;z-index:1;left:50%;top:50%;
  width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:radial-gradient(circle,transparent 0%,transparent 56%,rgba(255,255,255,.9) 64%,rgba(255,255,255,.9) 70%,transparent 80%);
  opacity:0;transform:scale(0);mix-blend-mode:screen;pointer-events:none;
  animation:heroGlowRing var(--cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--cycle) / var(--n));}
@keyframes heroGlowCover{
  0%{opacity:0;}
  2%{opacity:1;}
  100%{opacity:1;}
}
@keyframes heroGlowIgnite{
  0%{opacity:0;transform:scale(.04);}
  2%{opacity:0;transform:scale(.04);}
  2.6%{opacity:1;transform:scale(.09);}
  4.2%{opacity:1;transform:scale(2.4);}
  6.5%{opacity:.5;transform:scale(9);}
  9%{opacity:0;transform:scale(20);}
  100%{opacity:0;transform:scale(20);}
}
@keyframes heroGlowReveal{
  0%{-webkit-mask-size:0vmax 0vmax;mask-size:0vmax 0vmax;}
  4%{-webkit-mask-size:0vmax 0vmax;mask-size:0vmax 0vmax;}
  9%{-webkit-mask-size:230vmax 230vmax;mask-size:230vmax 230vmax;}
  100%{-webkit-mask-size:230vmax 230vmax;mask-size:230vmax 230vmax;}
}
@keyframes heroGlowRing{
  0%{opacity:0;transform:scale(0);}
  10.5%{opacity:0;transform:scale(.4);}
  12.5%{opacity:.08;transform:scale(6);}
  14.5%{opacity:0;transform:scale(14);}
  100%{opacity:0;transform:scale(14);}
}

/* 右から左へ流れる */
.hero-slides--wipe-left .hero-slide{animation-name:heroWipeLeft,heroStack;}
@keyframes heroWipeLeft{
  0%{opacity:0;clip-path:inset(0 0 0 100%);transform:scale(1.06);}
  2%{opacity:1;}
  7%{clip-path:inset(0 0 0 0);}
  92%{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1);}
  100%{opacity:0;}
}

/* 上から下へ降りる */
.hero-slides--wipe-down .hero-slide{animation-name:heroWipeDown,heroStack;}
@keyframes heroWipeDown{
  0%{opacity:0;clip-path:inset(0 0 100% 0);}
  2%{opacity:1;}
  7%{clip-path:inset(0 0 0 0);}
  92%{opacity:1;clip-path:inset(0 0 0 0);}
  100%{opacity:0;}
}

/* 斜めに切り替わる */
.hero-slides--diagonal .hero-slide{animation-name:heroDiagonal,heroStack;}
@keyframes heroDiagonal{
  0%{opacity:0;clip-path:polygon(0 0,0 0,-40% 100%,-40% 100%);}
  2%{opacity:1;}
  8%{clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%);}
  92%{opacity:1;clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%);}
  100%{opacity:0;}
}

/* 細かい粒でシュワシュワと現れる
   粒の「大きさ」ではなく「タイルをどれだけ覆うか」（--dot）を動かす。
   以前は mask-size を 14px→1px と縮めていたが、円がタイルに占める割合は変わらないので、
   円と円の隙間が最後まで残り、写真が網目越しに薄く見えたままになっていた。
   --dot を 0%→100% まで動かすと、最後はタイル全体が不透明になって写真が出そろう。
   @property が無い環境では --dot が初期値の 100% のまま＝粒が残らず素直に現れる。 */
@property --dot{syntax:"<percentage>";inherits:false;initial-value:100%}
.hero-slides--dissolve .hero-slide{animation-name:heroDissolve,heroStack;--dot:100%;
  -webkit-mask-image:radial-gradient(circle at center,#000 var(--dot),transparent calc(var(--dot) + 1%));
  mask-image:radial-gradient(circle at center,#000 var(--dot),transparent calc(var(--dot) + 1%));
  -webkit-mask-size:14px 14px;mask-size:14px 14px;}
@keyframes heroDissolve{
  0%{opacity:0;--dot:0%;filter:blur(6px);}
  2%{opacity:1;}
  9%{--dot:100%;filter:blur(0);}
  92%{opacity:1;--dot:100%;}
  100%{opacity:0;}
}

/* ゆっくり寄りながら重なる */
.hero-slides--kenburns .hero-slide{animation-name:heroKenburns,heroStack;}
@keyframes heroKenburns{
  0%{opacity:0;transform:scale(1.14);}
  8%{opacity:1;}
  88%{opacity:1;}
  100%{opacity:0;transform:scale(1);}
}

/* 動きを減らす設定の人には、切り替えだけにする */
@media (prefers-reduced-motion:reduce){
  .hero-slide{animation-name:heroFade,heroStack !important;-webkit-mask-image:none !important;mask-image:none !important;}
  .hero-slide-img{animation:none !important;-webkit-mask-image:none !important;mask-image:none !important;}
  .hero-slide::before,.hero-slide::after{display:none !important;}
  @keyframes heroFade{0%{opacity:0;}8%{opacity:1;}100%{opacity:1;}}
}

/* 写真がまだ無いときの枠 */
.hero-bg-empty{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  border:2px dashed rgba(255,255,255,.28);margin:14px;border-radius:6px;
  background:color-mix(in srgb,var(--main) 92%,#fff);}
.hero-bg-empty span{font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.55);}

/* ページの中の写真枠 */
.about-block{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;}
.about-photo{width:100%;border-radius:6px;object-fit:cover;aspect-ratio:4/3;}
/* 写真が無いサイトでは枠も出さず、本文を幅いっぱいに広げる。 */
.about-block--noimage{grid-template-columns:1fr;}
.about-block--noimage .lede{margin-inline:auto;}
.office-photo{display:block;width:100%;max-width:720px;margin:0 auto 28px;border-radius:6px;object-fit:cover;aspect-ratio:16/7;}
@media(max-width:820px){
  .about-block{grid-template-columns:1fr;}
  .about-photo{aspect-ratio:16/9;}
}

/* ============================================================
   配色の基調
   theme.base で "light"（白基調）か "dark"（濃色基調）を選ぶ。
   どのパーツを何色にするかはここで一括で決めるので、事務所ごとに
   個別調整しなくてよい。事務所の主色・アクセント色だけ差し替えれば足りる。

   決まりごと
   - 写真の上に載る文字は必ず白。アクセント色は写真に負けるので使わない。
   - 明るいアクセント色を文字に使うときは --accent-ink（自動で濃くしたもの）。
   - アクセント色はベタ塗りの地色か、区切り線・下線として使う。
   ============================================================ */
/* 白基調では、濃い色で塗る面は「選ばれる理由」だけに絞る。 */
.base-light .section-light{background:var(--bg);}

/* カードの写真。共通素材なので templates/dc-lp/images/ に置き、
   content.json の image でファイル名を指定する。指定が無ければ出ない。 */
.card-photo{width:calc(100% + 48px);max-width:none;margin:-28px -24px 18px;border-radius:6px 6px 0 0;aspect-ratio:16/9;object-fit:cover;}
.card-numbered .card-photo{margin-bottom:14px;}
.card-numbered:has(.card-photo){padding-top:0;}
.card-numbered:has(.card-photo) .card-number{position:static;display:block;margin-bottom:4px;}

/* 導入企業の声・従業員教育の満足度（voiceセクション）。
   色は必ず var(--main) / var(--accent) を経由する。テンプレートに本部の色を直接書くと、
   パートナーの配色にしたときにそこだけ浮く（data-model.md「テーマの色はパートナーの色にする」）。 */
.voice-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:28px 0 8px;}
.voice-card{margin:0;padding:22px 24px;background:var(--white,#fff);border:1px solid color-mix(in srgb,var(--main) 14%,transparent);border-radius:6px;}
.voice-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.voice-stars{color:var(--accent);letter-spacing:2px;font-size:17px;line-height:1;}
.voice-average{font-size:20px;font-weight:700;color:var(--main);}
.voice-meta{font-size:12.5px;color:color-mix(in srgb,var(--main) 62%,#fff);}
.voice-quote{margin:0;font-size:14.5px;line-height:1.9;white-space:pre-wrap;}
.voice-quote-small{margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--main) 16%,transparent);font-size:13.5px;}
.voice-card-summary .voice-meta{margin:0 0 4px;}
.voice-note{margin:6px 0 0;font-size:13px;color:color-mix(in srgb,var(--main) 62%,#fff);}

.voice-companies{display:flex;flex-direction:column;gap:24px;margin-top:24px;}
.voice-company{padding:26px 28px;background:var(--white,#fff);border:1px solid color-mix(in srgb,var(--main) 14%,transparent);border-radius:6px;}
.voice-company-name{margin:0 0 6px;font-size:19px;color:var(--main);}
.voice-company-photos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:16px 0;}
.voice-company-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;}
.voice-company-intro{margin:14px 0 0;font-size:14.5px;line-height:1.95;white-space:pre-wrap;}
.voice-company-links{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;}

/* 満足度の内訳（対応の早さ・丁寧さ・説明の分かりやすさ）。
   総合評価より小さく、控えめに置く。読む人がまず見るのは総合評価の星。 */
.voice-breakdown{list-style:none;margin:0 0 12px;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:4px;}
.voice-breakdown li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);}
.voice-breakdown-stars{color:var(--accent);letter-spacing:.05em;white-space:nowrap;}

/* ============================================================
   アクセント色を文字にするところ
   事務所のアクセント色が明るい（ターコイズ・黄緑など）と、白や淡い地の上で読めない。
   明るい地の上の文字は --accent-ink（生成時にコントラスト比4.5以上まで暗くした色）を使う。
   濃い地（選ばれる理由・ヒーロー）の上は明るいままのほうが読めるので、元の色のまま。
   ============================================================ */
.section:not(.section-navy) .section-heading em,
.card-number,
.flow-number,
.news-category,
.voice-stars,
.voice-breakdown-stars{color:var(--accent-ink);}

/* ============================================================
   並べ方のパターン（site.layout）
   400事務所が同じ並びだと、どのサイトも同じ見た目になる。
   文面はAIで事務所ごとに書き分けているので、並びも数種類から選べるようにしておく。
   どのパターンでも中身（HTML）は同じで、CSSだけで組み替える。
   ============================================================ */

/* --- 企業型DCとは: standard（見出し→本文→4つの要点をカードで） --- */
/* 写真が無いとき本文だけが中央に寄り、左揃えの見出しとずれて見えていた。見出しに揃える。 */
.about--standard .about-block--noimage .lede,
.about--split .about-block--noimage .lede{margin-inline:0;}

/* --- 企業型DCとは: split（左に見出しと本文、右に要点を番号付きで縦に） --- */
.about--split .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;column-gap:56px;align-items:start;}
.about--split .section-heading,
.about--split .about-block{grid-column:1;}
.about--split .about-block{grid-template-columns:1fr;gap:20px;}
.about--split .about-block .lede{margin-bottom:0;}
.about--split .about-photo{aspect-ratio:4/5;max-height:560px;}
.about--split .card-grid{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr;gap:0;counter-reset:about-point;border-top:1px solid var(--line);}
.about--split .card{counter-increment:about-point;position:relative;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px 0 22px 64px;}
.about--split .card:hover{transform:none;box-shadow:none;}
.about--split .card::before{content:counter(about-point, decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--heading-font);font-size:26px;line-height:1;color:var(--accent-ink);}
.about--split .card-photo{display:none;}

/* --- 企業型DCとは: band（本文を中央に置き、要点を主色の帯に白文字で並べる） --- */
.about--band .section-heading{text-align:center;}
.about--band .about-block{grid-template-columns:1fr;justify-items:center;}
.about--band .lede{margin-inline:auto;text-align:center;}
.about--band .about-photo{max-width:720px;aspect-ratio:16/7;}
.about--band .card-grid{gap:0;background:var(--main);border-radius:6px;overflow:hidden;}
.about--band .card{background:transparent;border:0;border-radius:0;color:var(--white);padding:30px 26px;}
.about--band .card + .card{border-left:1px solid rgba(255,255,255,.16);}
.about--band .card:hover{transform:none;box-shadow:none;}
.about--band .card-title{color:var(--white);border-bottom:2px solid var(--accent);padding-bottom:10px;}
.about--band .card p{color:rgba(255,255,255,.82);}
.about--band .card-photo{display:none;}

/* --- メリット: rows（大きな番号を左に置いた横長の行を縦に並べる） --- */
.merit--rows .card-grid-3{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);}
.merit--rows .card-numbered{display:grid;grid-template-columns:88px 1fr;column-gap:24px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:28px 0;}
.merit--rows .card-numbered:hover{transform:none;box-shadow:none;}
.merit--rows .card-number{position:static;grid-row:1 / span 3;font-size:44px;}
/* 写真は行の右に置く（photo-slots.js の「各行の右」） */
.merit--rows .card-numbered:has(.card-photo){grid-template-columns:88px 1fr 300px;padding-top:28px;}
.merit--rows .card-photo{grid-column:3;grid-row:1 / span 3;align-self:center;width:100%;margin:0;border-radius:4px;aspect-ratio:4/3;}

/* --- メリット: columns（枠を外し、上に太い線を引いた3列） --- */
.merit--columns .card-numbered{background:transparent;border:0;border-top:3px solid var(--accent);border-radius:0;padding:22px 4px 0;}
.merit--columns .card-numbered:hover{transform:none;box-shadow:none;}
.merit--columns .card-number{position:static;display:block;font-size:40px;margin-bottom:8px;opacity:.9;}
/* 文字だけで見せる並べ方なので、写真は出さない（photo-slots.js） */
.merit--columns .card-photo{display:none;}

@media(max-width:820px){
  .about--split .wrap{grid-template-columns:1fr;}
  .about--split .card-grid{grid-column:1;grid-row:auto;margin-top:28px;}
  .about--band .card + .card{border-left:0;border-top:1px solid rgba(255,255,255,.16);}
  .merit--rows .card-numbered{grid-template-columns:56px 1fr;column-gap:14px;}
  .merit--rows .card-number{font-size:32px;}
  .merit--rows .card-numbered:has(.card-photo){grid-template-columns:56px 1fr;}
  .merit--rows .card-photo{grid-column:2;grid-row:3;margin-top:14px;}
  .about--split .about-photo,
  .merit--rows .card-photo{aspect-ratio:16/9;}
}