/* layout.css — v3-windows-green の構図（案件をまたいで共通。案件ごとに編集しない）
   出所: P004 小西経営計算センターの case.css（Codex 2026-09-23 ／ HQ QA 2026-09-26）から、
         案件固有の値をトークンへ出し、使われなくなった旧ヒーロー（流れる写真カード）を除いたもの。
   読み込み順: base.css → layout.css → hero.css → case.css
   色の直書きはしない。case.css の :root トークンだけで色が変わるようにする。 */

:root{
  --sidebar-w:clamp(300px,24vw,370px);
  /* 窓・カードの列数。HTML側で style="--service-cols:4" のように上書きしてよい */
  --service-cols:3;
  --staff-cols:3;
}

body{background:var(--paper)}
.demo-note{position:fixed;top:0;left:var(--sidebar-w);right:0;z-index:35}
.site-header{display:none;background:color-mix(in srgb,var(--paper) 97%,transparent)}
main{margin-left:var(--sidebar-w);padding-top:28px}
.contact,.footer{margin-left:var(--sidebar-w)}

/* ページ全体を通して固定するブランド兼メニュー。 */
.site-sidebar{
  position:fixed;
  z-index:36;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  display:flex;
  flex-direction:column;
  padding:clamp(22px,4vh,42px) clamp(26px,2.6vw,42px) clamp(18px,3vh,30px);
  overflow:hidden;
  color:#fff;
  background:var(--ink);
  border-right:1px solid rgba(255,255,255,.2);
  box-shadow:14px 0 36px color-mix(in srgb,var(--ink) 12%,transparent);
}
.rail-brand{position:relative;padding-left:76px}
/* ロゴが無い案件は .rail-logo-plate を削り、.rail-brand に .no-logo を付ける */
.rail-brand.no-logo{padding-left:0}
.rail-logo-plate{
  position:absolute;
  top:1px;
  left:0;
  display:grid;
  place-items:center;
  width:60px;
  aspect-ratio:1;
  overflow:hidden;
  padding:4px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:var(--paper);
}
.rail-logo-plate img{display:block;width:100%;height:100%;object-fit:contain}
.rail-name{color:#fff;font:500 20px/1.45 var(--serif);letter-spacing:.04em}
.rail-name strong{font-size:25px;font-weight:500}
.rail-en{margin-top:12px;font-size:9px;line-height:1.7;letter-spacing:.16em;color:rgba(255,255,255,.68)}
.rail-contact{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:clamp(18px,3vh,30px);
  padding:clamp(14px,2vh,18px) 18px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:4px;
  background:var(--paper);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}
.rail-contact:hover{background:#fff;color:var(--ink-hover);transform:translateY(-1px)}
.rail-contact span:last-child{font-size:18px;font-weight:400}
.rail-statement{margin:clamp(18px,3vh,30px) 0 clamp(14px,2vh,22px);padding-top:clamp(14px,2vh,22px);border-top:1px solid rgba(255,255,255,.28);font:500 15px/1.8 var(--serif)}
.sidebar-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0 0 clamp(12px,2vh,20px);font-size:12px}
.sidebar-nav a{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:clamp(7px,1.15vh,10px) 0;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.sidebar-nav a:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.sidebar-nav a:after{display:none}
.sidebar-nav a span{font:400 11px/1.8 var(--numeral);color:rgba(255,255,255,.42)}
.sidebar-nav a:hover,.sidebar-nav a[aria-current="page"]{color:#fff}
.sidebar-nav a[aria-current="page"]{padding-left:12px;border-left:2px solid var(--seal)}
/* 節へ飛んだとき、その節のメニューに印を移す。節のidはテンプレートの5つに固定 */
body:has(:target) .sidebar-nav a[aria-current="page"]{padding-left:0;border-left:0;color:rgba(255,255,255,.7)}
body:has(#main:target) .sidebar-nav a[href="#main"],
body:has(#services:target) .sidebar-nav a[href="#services"],
body:has(#first:target) .sidebar-nav a[href="#first"],
body:has(#staff:target) .sidebar-nav a[href="#staff"],
body:has(#news:target) .sidebar-nav a[href="#news"]{padding-left:12px;border-left:2px solid var(--seal);color:#fff}
.rail-facts{margin:auto 0 0}
.rail-facts>div{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:clamp(9px,1.5vh,14px) 0;border-top:1px solid rgba(255,255,255,.18)}
.rail-facts>div:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.rail-facts dt{font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.rail-facts dd{margin:0;font-size:12px;line-height:1.7;color:#fff}
.rail-facts>div:first-child dd{font:400 26px/1 var(--numeral)}
/* ロゴが生成の作成例のときだけ置く。既存ロゴと誤認させない（P004 QA-3） */
.rail-logo-note{margin-top:10px;font-size:10px;line-height:1.7;letter-spacing:.02em;color:rgba(255,255,255,.72)}

/* 台帳のように、区切りと番号が視線を運ぶ。 */
.credentials{background:var(--ink);border:0;color:#fff;letter-spacing:.05em}
.section{border-bottom:1px solid var(--line)}
.section-kicker{margin:0 0 clamp(24px,3vw,40px);color:var(--seal);white-space:nowrap}
.section>.section-label h2{margin-top:0}
.news{display:block;background:var(--paper)}
.news>.section-label+.news-example{margin-top:44px}
.service-number{font-style:normal;color:var(--seal)}
#staff .service-list{grid-template-columns:repeat(var(--staff-cols),minmax(0,1fr))}

/* 01 業務カード */
.service-list-main{grid-template-columns:repeat(var(--service-cols),minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.service-list-main .service-card{display:flex;flex-direction:column}
.service-list-main .service-card>p{min-height:102px}
.service-list-main .service-card>button{margin-top:auto}
.photo-slot.has-photo{padding:0;border:0;overflow:hidden;background:var(--slot-bg)}
.photo-slot.has-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.service-card:hover .photo-slot.has-photo img{transform:scale(1.03)}

/* 02 初めての方へ */
.first-guide{background:var(--pale)}
.first-guide-panel{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) auto;
  align-items:end;
  gap:clamp(36px,6vw,88px);
  margin-top:44px;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);
  background:var(--paper);
}
.first-guide-panel>p{max-width:760px;color:var(--ink);font:500 clamp(19px,2vw,27px)/2 var(--serif)}
.first-guide-panel button{min-width:190px;padding:16px 0;border-bottom:1px solid var(--ink);text-align:left;font-size:13px;color:var(--ink)}
.first-guide-panel button span{float:right}
.first-guide-panel button:hover{color:var(--ink-hover);border-color:var(--ink-hover)}

/* 連携図（任意）: 事業主 → 事務所 → 関係行政機関。画像にせずHTML/CSSで示す。
   事務所の業務が1つだけの案件では、節ごと削ってよい。 */
.business-map{margin-top:clamp(48px,6vw,78px)}
.business-map-client{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink)}
.business-map-client strong{margin-top:10px;font:500 19px/1.5 var(--serif)}
.business-map-client small{margin-top:2px;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.map-person-icon{position:relative;width:64px;height:64px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 8px color-mix(in srgb,var(--seal) 8%,transparent)}
.map-person-icon:before{content:'';position:absolute;top:12px;left:50%;width:17px;height:17px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.map-person-icon:after{content:'';position:absolute;left:50%;bottom:11px;width:30px;height:25px;border-radius:15px 15px 8px 8px;background:#fff;transform:translateX(-50%)}
.map-flow{display:grid;position:relative;margin-inline:auto}
.map-flow span{position:relative;display:block;margin-inline:auto;width:3px;background:repeating-linear-gradient(to bottom,var(--seal) 0 5px,transparent 5px 11px)}
.map-flow span:after{content:'';position:absolute;left:50%;bottom:-1px;width:9px;height:9px;border-right:3px solid var(--seal);border-bottom:3px solid var(--seal);transform:translateX(-50%) rotate(45deg)}
.map-flow-in{width:30px;height:68px;padding-bottom:10px}
.map-flow-in span{height:56px}
.business-map-center{position:relative;padding:0 clamp(24px,3.5vw,52px) clamp(30px,4vw,48px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#fff,var(--paper));box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 8%,transparent)}
.business-map-brand{display:grid;grid-template-columns:48px auto;grid-template-rows:auto auto;align-items:center;width:max-content;max-width:calc(100% - 48px);margin:-25px auto 28px;padding:10px 22px;background:var(--paper)}
.business-map-brand img{grid-row:1/3;width:42px;height:42px;object-fit:contain;margin-right:13px}
.business-map-brand p{color:var(--ink);font:500 clamp(20px,2vw,28px)/1.4 var(--serif)}
.business-map-brand span{font-size:9px;letter-spacing:.12em;color:var(--muted)}
.service-list-map{grid-template-columns:repeat(var(--service-cols),minmax(0,1fr));gap:clamp(18px,2.3vw,30px);margin-top:0}
.service-list-map .service-card{display:flex;flex-direction:column;min-height:100%;padding:clamp(20px,2.5vw,32px);border-radius:18px;background:var(--ink);color:#fff}
.service-list-map .service-card:nth-child(3n+2){background:var(--seal)}
.service-list-map .service-card:nth-child(3n){background:var(--muted)}
.service-list-map .service-number{margin:0;color:rgba(255,255,255,.7)}
/* カード見出しは上の業務カードと同じ語になるため、h3にせず p で見た目だけ揃える（P004 QA-2） */
.service-card>.map-card-title{min-height:0;margin:8px 0 14px;color:#fff;font:500 clamp(19px,1.8vw,25px)/1.55 var(--serif)}
.service-sublist{margin:4px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.35);list-style:none}
.service-sublist li{position:relative;padding:13px 0 13px 18px;border-bottom:1px solid rgba(255,255,255,.25);font-size:12px;line-height:1.65;color:#fff}
.service-sublist li:before{content:'';position:absolute;top:21px;left:2px;width:5px;height:5px;border-radius:50%;background:#fff}
/* 10pxの補足。--seal / --muted の面で AA を満たす不透明度（P004 QA-1 実測 5.2以上） */
.service-sublist small{display:block;margin-top:3px;color:rgba(255,255,255,.88);font-size:10px;line-height:1.6}
.map-flow-out{grid-template-columns:repeat(6,1fr);width:100%;height:76px;padding:10px clamp(20px,3vw,48px) 12px}
.map-flow-out span{height:54px}
.business-map-offices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.business-map-offices>div{text-align:center;color:var(--ink)}
.business-map-offices p{margin-top:10px;font-size:11px;line-height:1.55}
.map-building-icon{--office-color:var(--ink);position:relative;display:block;width:54px;height:54px;margin:auto;border-radius:50%;background:var(--office-color)}
.business-map-offices>div:nth-child(3n+2) .map-building-icon{--office-color:var(--seal)}
.business-map-offices>div:nth-child(3n) .map-building-icon{--office-color:var(--muted)}
.map-building-icon:before{content:'';position:absolute;left:15px;bottom:9px;width:24px;height:31px;border:3px solid #fff;background:repeating-linear-gradient(90deg,transparent 0 4px,#fff 4px 6px),repeating-linear-gradient(0deg,transparent 0 5px,#fff 5px 7px)}
.map-building-icon:after{content:'';position:absolute;left:25px;bottom:9px;width:5px;height:8px;background:#fff}

.contact{background:var(--ink);color:#fff}
.contact h2,.contact .phone,.contact .eyebrow{color:#fff}
.contact .button{background:var(--paper);color:var(--ink)}
.contact .button:hover{background:#fff}

/* 日本語の禁則。事務所名が「〜センタ／ー」と割れないように（P004 QA-4） */
.rail-name,.demo-note,.window-head h1{line-break:strict}

@media(max-width:1100px){
  :root{--sidebar-w:290px}
  .site-sidebar{padding:clamp(20px,3.2vh,34px) 28px clamp(16px,2.5vh,26px)}
  .rail-brand{padding-left:62px}
  .rail-logo-plate{width:48px;padding:3px;border-radius:10px}
  .rail-name strong{font-size:21px}
  .rail-statement{margin-top:40px}
}

@media(min-width:851px) and (max-height:760px){
  .site-sidebar{padding-top:18px;padding-bottom:14px}
  .rail-logo-plate{width:44px}
  .rail-brand{padding-left:58px}
  .rail-name{font-size:17px;line-height:1.35}
  .rail-name strong{font-size:20px}
  .rail-en{display:none}
  .rail-contact{margin-top:14px;padding:12px 16px}
  .rail-statement{margin:14px 0 10px;padding-top:12px;font-size:13px;line-height:1.65}
  .sidebar-nav{margin-bottom:8px}
  .sidebar-nav a{padding:6px 0}
  .rail-facts>div{padding:7px 0}
}

/* メニューが6項目以上（下層1枚への入口がある）ときは、背の低い画面で下の事実3行が切れる
   （P004の下層は 1440×900 でも切れていた）。上と同じ詰め方を、920pxの高さから当てる */
@media(min-width:851px) and (max-height:920px){
  .site-sidebar:has(.sidebar-nav a:nth-child(6)){padding-top:18px;padding-bottom:14px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-logo-plate{width:44px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-brand{padding-left:58px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-name{font-size:17px;line-height:1.35}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-name strong{font-size:20px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-en{display:none}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-contact{margin-top:14px;padding:12px 16px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-statement{margin:14px 0 10px;padding-top:12px;font-size:13px;line-height:1.65}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .sidebar-nav{margin-bottom:8px}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .sidebar-nav a{padding:6px 0}
  .site-sidebar:has(.sidebar-nav a:nth-child(6)) .rail-facts>div{padding:7px 0}
}

@media(max-width:850px){
  :root{--sidebar-w:0px}
  .site-sidebar{display:none}
  .demo-note{position:static}
  .site-header{display:flex}
  main{margin-left:0;padding-top:0}
  .contact,.footer{margin-left:0}
  .business-map-center{padding-inline:20px}
  .service-list-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-list-map{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .service-list-map .service-card{padding:18px 16px}
  .business-map-offices{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .map-flow-out{display:none}
  #staff .service-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .service-list-main,.service-list-map{grid-template-columns:1fr}
  .business-map-brand{grid-template-columns:38px auto;max-width:calc(100% - 20px);padding-inline:10px}
  .business-map-brand img{width:34px;height:34px}
  .business-map-brand p{font-size:18px}
  .business-map-center{padding:0 14px 20px;border-radius:20px}
  .business-map-offices{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
  .first-guide-panel{grid-template-columns:1fr;align-items:start;padding:24px}
  .first-guide-panel button{min-width:0;width:100%}
  #staff .service-list{grid-template-columns:1fr}
}