/* 社労士デモ 共通CSS（demo-kit v1）
   出所: P002 神田事務所のTOP実装（Codex, 2026-09-22）から抽出・一般化。
   案件ごとに変えるのは :root のトークンだけ。構造・余白・挙動は共通。
   このファイルを直接編集しない。案件側は case.css で上書きする。 */

:root{
  /* --- 案件ごとにCodexが決める（ここだけ差し替える） --- */
  --ink:#103f69;        /* 主色。見出し・ボタン・強い線 */
  --ink-hover:#22628e;  /* 主色のhover */
  --body:#344b5c;       /* 本文 */
  --pale:#eff6fa;       /* 淡い面。セクションの地 */
  --line:#cbdce6;       /* 罫線 */
  --muted:#597283;      /* 補助文字 */
  --focus:#b08127;      /* focus-visible の輪郭 */
  --serif:'Yu Mincho','Hiragino Mincho ProN',serif;
  --sans:'Yu Gothic',Meiryo,sans-serif;
  --numeral:Georgia,serif;

  /* --- 素材枠（写真が未取得のあいだ表示する） --- */
  --slot-line:#9bb6c8;
  --slot-bg:#e4eef4;
  --slot-hover:#e0eef6;
  --slot-label:#58768a;
  --numeral-ink:#6c8aa0;

  /* --- 寸法。原則そのまま --- */
  --gutter:9%;
  --section-y:104px;
  --header-offset:110px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}
body{margin:0;color:var(--body);background:#fff;font:500 16px/1.9 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--ink)}
[hidden]{display:none!important}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{position:fixed;top:0;left:0;z-index:100;background:#fff;padding:15px}

/* デモであることの帯。受注前プレビューでは外さない */
.demo-note .note-photo{font-style:normal;display:inline-block}
.demo-note{padding:6px 4%;font-size:11px;letter-spacing:.08em;background:var(--ink);color:#fff;display:flex;justify-content:space-between}

/* ヘッダー・ナビ */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 4%;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.brand{color:var(--ink);font:500 23px/1.5 var(--serif);white-space:nowrap}
.brand-small{display:block;font:500 10px/1.8 var(--sans);letter-spacing:.12em}
.brand strong{font-weight:600}
nav{display:flex;align-items:center;gap:24px;font-size:13px}
nav a{position:relative;padding:12px 0}
nav a:after{content:'';height:1px;background:var(--ink);position:absolute;left:0;right:100%;bottom:6px;transition:right .25s}
nav a:hover:after{right:0}
.nav-contact,.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ink);color:#fff;padding:16px 26px;min-height:48px;transition:background .25s,transform .25s}
.button:hover,.nav-contact:hover{background:var(--ink-hover);transform:translateY(-2px)}
.menu-toggle{display:none}

/* ヒーロー。写真の有無で崩れない */
.hero{position:relative;isolation:isolate;min-height:640px;height:min(760px,78vh);overflow:hidden;color:var(--ink)}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-2}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffff38,transparent 80%);z-index:-1}
.hero-copy{padding:90px var(--gutter) 120px}
.eyebrow{font-size:11px;font-family:var(--sans);letter-spacing:.18em;color:var(--ink);line-height:1.8}
.hero h1{font:500 clamp(48px,5.5vw,80px)/1.5 var(--serif);letter-spacing:.035em;margin:28px 0}
.hero-description{margin-bottom:32px;font-size:17px}
.hero .button{font-size:14px}
/* 生成画像を使うときは必ず出す。実在の場所と誤認させない */
.image-note{position:absolute;bottom:18px;right:4%;font-size:12px;background:#fff;border:1px solid var(--line);padding:7px 14px;color:var(--ink);box-shadow:0 2px 12px #103f6926}
.scroll-hint{position:absolute;bottom:30px;left:var(--gutter);font-size:10px;letter-spacing:.18em;display:flex;align-items:center;gap:24px;background:#ffffffde;padding:8px 16px}
.scroll-hint span{font-size:20px}

.credentials{display:flex;justify-content:space-between;padding:23px var(--gutter);font-size:13px;border-bottom:1px solid var(--line);color:var(--ink)}
.section{padding:var(--section-y) var(--gutter)}
.section-label h2{font:500 34px/1.6 var(--serif);margin:14px 0 22px}
.section-label>p:not(.eyebrow){font-size:15px}
.fine{font-size:12px!important;line-height:1.9}
.section-label .fine{margin-top:22px}
.section-label .text-link{margin-top:20px}
.text-link{display:inline-flex;justify-content:space-between;gap:32px;border-bottom:1px solid var(--ink);padding:14px 0;font-size:14px;color:var(--ink)}
.text-link span{transition:transform .25s}
.text-link:hover span{transform:translate(3px,-3px)}

/* 相談業務（4枚組）。写真は未取得なら .photo-slot の枠、取得済みなら .service-photo の実写 */
.service-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--pale)}
.service-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px}
.service-card{min-width:0}
.photo-slot{aspect-ratio:3/2;background:var(--pale);border:1px dashed var(--slot-line);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:12px;transition:background .35s}
.photo-slot span{font-size:11px;letter-spacing:.18em;color:var(--slot-label)}
.photo-slot p{font-size:12px}
.photo-slot small{font-size:11px}
.service-card:hover .photo-slot{background:var(--slot-hover)}
.service-number{display:block;font:italic 21px/1.4 var(--numeral);color:var(--numeral-ink);margin-top:24px}
.service-card h3{font-size:17px;line-height:1.8;margin:12px 0}
.service-card>p{font-size:13px;line-height:1.9;min-height:80px}
.service-card>a,.service-card>button{font-size:13px;border-bottom:1px solid var(--line);padding:15px 0;display:block;width:100%;text-align:left;margin-top:14px}
.service-card>a:hover,.service-card>button:hover{color:var(--ink-hover);border-color:var(--ink)}

/* 代表者。本人写真はCLIENT必須のため、枠のままでも出せる形にする */
.profile{background:var(--pale);display:grid;grid-template-columns:1fr 1.55fr;column-gap:72px;row-gap:24px}
.profile .section-label{grid-column:1/-1}
.portrait-slot{aspect-ratio:4/5;border:1px dashed var(--slot-line);background:var(--slot-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start;gap:20px;max-width:360px;width:100%}
.portrait-slot>span{letter-spacing:.2em;font-size:11px}
.portrait-slot>p{font:500 30px var(--serif);color:var(--ink)}
.portrait-slot small{text-align:center;font-size:12px}
.profile-lead{font:500 28px/1.8 var(--serif);color:var(--ink);margin-bottom:24px}
.profile-body>p:not(.profile-lead){font-size:14px;margin-bottom:22px}
.qualifications{color:var(--ink)}
.publication{display:flex;gap:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:30px 0}
.publication h3{font:500 19px/1.7 var(--serif)}
.publication p{font-size:12px;margin-top:12px}

/* 読みもの・報酬・お知らせは同じ2欄 */
.reading,.fees,.news{display:grid;grid-template-columns:1fr 1.8fr;gap:72px}
.reading .section-label,.fees .section-label{position:sticky;top:130px;align-self:start}
.reading-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.article-row{position:relative;border-bottom:1px solid var(--line);padding:28px 0;transition:background .25s}
.article-row:hover{background:var(--pale)}
.row-index,.row-arrow{display:none}
.metadata{display:flex;gap:20px;font-size:11px;color:var(--muted);margin-bottom:12px}
.row-main h3{font-size:17px;font-weight:500}
.row-main button{padding:0;width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left}
.row-main button:before{content:'';position:absolute;inset:0}

/* 報酬表。社労士は顧問料の段階表が定型 */
.fees{border-top:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-weight:500}
td{text-align:right;color:var(--ink);font:500 25px/1.5 var(--numeral)}
th,td{border-bottom:1px solid var(--line);padding:18px 16px}
thead{background:var(--pale);font-size:12px}
thead th:last-child{text-align:right}
.spot{border-bottom:1px solid var(--line);margin-top:24px;font-size:14px}
.spot summary{cursor:pointer;padding:18px 0;display:flex;justify-content:space-between}
.spot dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.spot dd{margin:0;text-align:right}

/* お知らせ。CLAUDE.md の必須構成。実物が無いときは掲載例と明示する */
.news{padding-top:48px;padding-bottom:72px;border-top:1px solid var(--line);align-items:center}
.news-example{font-size:14px}
.news-example small{font-size:12px;color:var(--muted)}
.example-label{display:inline-block;font-size:11px;padding:2px 10px;border:1px solid var(--slot-line);margin-bottom:12px}

.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:72px;background:var(--pale);padding:80px var(--gutter)}
.contact h2{font:500 34px/1.7 var(--serif);margin:16px 0 24px}
.contact p{font-size:13px}
.contact-details{align-self:center}
.contact .phone{font:500 36px/1.6 var(--numeral);color:var(--ink);margin:16px 0}
.contact .button{width:100%;max-width:320px;margin-bottom:22px}
.footer{display:flex;justify-content:space-between;gap:20px;padding:30px var(--gutter);font-size:11px}
.footer a{font:500 17px var(--serif);color:var(--ink)}

/* 未制作ページを押されたときの通知。デモで嘘の遷移を起こさない */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:16px 20px;box-shadow:0 5px 30px #103f6933;z-index:50;display:flex;align-items:center;gap:20px;max-width:calc(100% - 32px);width:max-content;font-size:14px}
.toast button{min-width:44px;min-height:44px;color:#fff;font-size:24px}

/* 記事一覧ページ（下層）で使う絞り込み */
.filter-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter-list button{border:1px solid var(--line);padding:10px 16px;font-size:12px;min-height:44px;transition:background .25s,border-color .25s}
.filter-list button:hover{border-color:var(--ink)}
.filter-list button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.search-form{display:flex;gap:12px;margin-bottom:24px}
.search-form input{flex:1;min-height:48px;padding:0 16px;border:1px solid var(--line);font:inherit;font-size:14px;color:var(--body)}
.search-form button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:0 24px;min-height:48px;font-size:13px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.list-head h2{font:500 22px/1.6 var(--serif)}
#result-count{font-size:12px;color:var(--muted)}
#empty-state{padding:40px 0;font-size:14px;color:var(--muted)}
#show-more{display:block;width:100%;border:1px solid var(--line);padding:18px;margin-top:28px;font-size:13px;min-height:48px}
#show-more:hover{border-color:var(--ink);color:var(--ink)}

/* 動き。控えめな1種類だけ */
.motion-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.motion-ready .reveal.is-visible,.motion-ready .reveal:focus-within{opacity:1;transform:none}
@keyframes intro{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy>.eyebrow{animation:intro .7s both}
.hero h1{animation:intro .9s .1s both}
.hero-description{animation:intro .8s .25s both}
.hero-copy>.button{animation:intro .8s .4s both}

@media(max-width:1100px){
  :root{--gutter:6%}
  nav{gap:14px;font-size:11px}
  .brand{font-size:20px}
  .nav-contact{padding:12px}
  .service-list{gap:18px}
  .profile,.reading,.fees{gap:40px}
  .hero-copy{padding-left:7%}
}
@media(max-width:850px){
  .site-header{padding:16px 24px}
  .menu-toggle{display:block;font-size:12px;min-height:44px;min-width:64px}
  .menu-toggle span{margin-left:8px}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:20px 24px;border-bottom:1px solid var(--line);font-size:15px}
  nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
  nav a{padding:12px}
  .hero{min-height:580px;height:75vh;max-height:740px}
  .hero-copy{padding:90px 7%}
  .hero h1{font-size:54px}
  .service-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .service-card>p{min-height:55px}
  .contact{gap:32px}
  .reading,.fees,.news{gap:32px}
  .reading-top{flex-direction:column;gap:4px}
}
@media(max-width:600px){
  :root{--gutter:24px;--section-y:64px;--header-offset:90px}
  .demo-note{font-size:9px;padding:5px 20px;display:block;line-height:1.7;line-break:strict}
  /* 帯の注記が長いため2段に分ける（P004 QA-5・2026-09-27に共通化） */
  .demo-note span{display:block;opacity:.85}
  .site-header{padding:12px 20px;gap:8px}
  .brand{font-size:19px}
  .brand-small{font-size:9px}
  .hero{min-height:580px;height:calc(100svh - 110px);max-height:700px}
  .hero-copy{padding:80px 24px 110px}
  .hero .eyebrow{font-size:9px;letter-spacing:.1em}
  .hero h1{font-size:38px;line-height:1.6;margin:28px 0}
  .hero-description{font-size:13px;margin-bottom:28px}
  .hero .button{font-size:13px;padding:14px 20px}
  .image-note{font-size:11px;bottom:12px;left:24px;right:auto;max-width:calc(100% - 48px);padding:6px 12px}
  .scroll-hint{left:24px;bottom:50px}
  .credentials{padding:20px 24px;display:grid;gap:5px;font-size:11px}
  .section-label h2{font-size:28px;margin:12px 0 20px}
  .section-label>p:not(.eyebrow){font-size:14px}
  .service-list{grid-template-columns:1fr;gap:40px;margin-top:32px}
  .service-number{margin-top:20px}
  .service-card h3{font-size:20px}
  .service-card>p{min-height:0;font-size:14px}
  .profile,.reading,.fees,.news,.contact{grid-template-columns:1fr;gap:32px}
  .portrait-slot{max-width:280px;justify-self:center}
  .profile-lead{font-size:25px}
  .publication{gap:18px}
  .publication h3{font-size:17px}
  .reading .section-label,.fees .section-label{position:static}
  .reading-top{flex-direction:row;font-size:10px}
  .row-main h3{font-size:16px}
  .metadata{font-size:10px;gap:14px}
  th,td{padding:16px 12px}
  td{font-size:24px}
  .spot dl{grid-template-columns:1fr;gap:8px}
  .spot dd{text-align:left;padding-bottom:16px}
  .news{padding-top:40px;padding-bottom:48px}
  .contact{padding:56px 24px}
  .contact h2{font-size:29px}
  .contact .phone{font-size:35px}
  .footer{padding:28px 24px;flex-direction:column;gap:12px}
  .toast{font-size:12px;padding:12px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .motion-ready .reveal{opacity:1;transform:none}
}