/* ── 実績詳細ページ専用 ── */
.wd-wrap{max-width:1220px;margin:0 auto;padding:0 6vw;}
.crumb{font-family:var(--serif-en);font-style:italic;font-size:0.74rem;color:var(--ink-soft);letter-spacing:0.04em;padding:6px 0;}
.crumb a{color:var(--ink-soft);transition:color .3s;}
.crumb a:hover{color:var(--gold);}
.crumb .sep{margin:0 8px;color:var(--line);}
.crumb .cur{color:var(--gold);}

.wd-cat-en{font-family:var(--serif-en);font-style:italic;font-size:0.85rem;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;}

/* ── ヒーロー：メインビジュアル＋情報パネル ── */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-2xl);align-items:start;margin:var(--sp-md) 0 var(--sp-2xl);}
.hs-visual{min-width:0;}
.hs-main{width:100%;aspect-ratio:32/25;height:auto;view-transition-name:kk-work-hero;}
.hs-carousel-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
.hs-nav{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s;color:var(--ink-soft);}
.hs-nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.hs-nav:hover{border-color:var(--gold);color:var(--gold);}
.hs-nav:disabled{opacity:0.3;cursor:default;border-color:var(--line);color:var(--ink-soft);}
.hs-carousel-viewport{overflow:hidden;width:100%;}
.hs-carousel{display:flex;gap:10px;transition:transform .35s ease;}
.hs-thumb{flex:0 0 calc((100% - 40px)/5);aspect-ratio:104/76;height:auto;padding:0;border:1px solid var(--line-soft);background:none;cursor:pointer;transition:border-color .25s;}
.hs-thumb .ph{width:100%;height:100%;border:none;}
.hs-thumb .ph::before{inset:5px;}
.hs-thumb .ph-mark{font-size:0.6rem;letter-spacing:0.08em;}
.hs-thumb:hover{border-color:var(--gold-soft);}
.hs-thumb.active{border-color:var(--gold);}
.hs-thumb.active .ph{background:var(--paper);}
.hs-thumb.active .ph-mark{color:var(--gold);opacity:1;}

.hs-info{padding-top:6px;}
.hs-cat-en{font-family:var(--serif-en);font-style:italic;font-size:0.8rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;}
.hs-title{font-family:var(--serif-jp);font-weight:500;font-size:1.5rem;color:var(--navy);letter-spacing:0.06em;line-height:1.5;margin:0.6rem 0 1.2rem;}
.hs-rule{border-top:1px solid var(--line);margin-bottom:1rem;}
.hs-sub{font-size:0.86rem;color:var(--ink-soft);letter-spacing:0.05em;margin-bottom:2rem;}
.hs-meta-row{margin-top:1.5rem;}
.hs-meta-row:first-child{margin-top:0;}
.hs-meta-label{font-family:var(--sans-jp);font-weight:700;font-size:0.72rem;letter-spacing:0.1em;color:var(--navy);text-transform:uppercase;padding-bottom:0.6rem;border-bottom:1px solid var(--line);}
.hs-meta-value{font-size:0.86rem;color:var(--ink);line-height:1.75;margin-top:0.7rem;}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;}
}

.body-sec{margin-bottom:var(--sp-2xl);}
.h-mark{font-family:var(--serif-jp);font-size:1.2rem;font-weight:500;color:var(--navy);margin:var(--sp-xl) 0 0.7rem;padding-left:15px;border-left:2px solid var(--gold);letter-spacing:0.08em;}
.h-mark .en{font-family:var(--serif-en);font-style:italic;font-size:0.78rem;color:var(--gold);margin-left:0.6rem;letter-spacing:0.06em;}
.body-sec p{font-size:0.95rem;line-height:2.15;color:var(--ink);max-width:800px;margin-bottom:1rem;}
.voice-cite{font-size:0.8rem;color:var(--gold);letter-spacing:0.04em;margin-top:-0.4rem;}

.print-area{text-align:center;margin:0 0 var(--sp-2xl);}
.print-btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--navy);background:none;cursor:pointer;font-family:var(--serif-jp);font-size:0.92rem;color:var(--navy);padding:0.9rem 2.6rem;letter-spacing:0.1em;transition:all .25s ease;}
.print-btn:hover{background:var(--navy);color:var(--cream);}
.print-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4;}
.print-cap{font-size:0.74rem;color:var(--ink-soft);margin-top:0.7rem;letter-spacing:0.04em;}

.meta-tags{margin-bottom:var(--sp-2xl);}
.mt-row{display:flex;align-items:center;gap:16px;margin-bottom:0.9rem;}
.mt-label{font-family:var(--sans-jp);font-size:0.76rem;color:var(--navy);font-weight:500;width:74px;letter-spacing:0.08em;}
.pill{display:inline-block;background:var(--navy);color:var(--cream);font-family:var(--serif-jp);font-size:0.78rem;padding:0.3rem 1.1rem;border-radius:2px;margin-right:8px;letter-spacing:0.06em;}
.mt-tag{font-family:var(--serif-jp);font-size:0.8rem;color:var(--ink-soft);margin-right:14px;cursor:pointer;transition:color .3s;}
.mt-tag::before{content:"#";color:var(--gold-soft);margin-right:2px;}
.mt-tag:hover{color:var(--gold);}

.related{border-top:1px solid var(--line);padding-top:var(--sp-xl);margin-bottom:var(--sp-2xl);}
.related h2{font-family:var(--serif-jp);font-size:1.2rem;font-weight:300;color:var(--navy);letter-spacing:0.1em;}
.related .rsub{font-family:var(--serif-en);font-style:italic;font-size:0.78rem;color:var(--ink-soft);margin:0.3rem 0 var(--sp-lg);letter-spacing:0.04em;}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.rcard{cursor:pointer;transition:transform .3s ease;}
.rcard:hover{transform:translateY(-4px);}
.rcard .ph{height:130px;margin-bottom:0.6rem;}
.rcard .rcat{font-family:var(--serif-en);font-style:italic;font-size:0.68rem;color:var(--gold);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.2rem;}
.rcard .rname{font-family:var(--serif-jp);font-size:0.84rem;color:var(--navy);line-height:1.6;}

/* 写真プレースホルダ（一覧と同調） */
.ph{background:var(--cream);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.ph::before{content:'';position:absolute;inset:10px;border:1px solid rgba(139,115,85,0.18);}
.ph .ph-mark{font-family:var(--serif-en);font-style:italic;font-size:0.72rem;letter-spacing:0.18em;color:var(--gold-soft);opacity:0.7;}

/* 印刷専用（営業レポート） */
.print-only{display:none;}
@media print{
  @page{size:A4 portrait;margin:14mm 15mm;}
  body{background:#fff;font-size:10.5pt;line-height:1.7;}
  nav,.crumb,.hs-carousel-row,.print-area,.related,footer,.demo-badge,.nav-spacer{display:none !important;}
  .wd-wrap{max-width:none;padding:0;}
  .print-only{display:block !important;}
  .pr-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:14px;}
  .pr-head .pr-logo .en{font-family:var(--serif-en);font-size:14pt;letter-spacing:2px;color:var(--navy);font-weight:600;}
  .pr-head .pr-logo .jp{font-size:8.5pt;color:#555;}
  .pr-head .pr-tag{font-size:8.5pt;color:#555;text-align:right;line-height:1.5;}
  .hero-split{display:block;margin:0 0 12px;}
  .hs-main{height:60mm;}
  .hs-info{margin-top:8px;}
  .hs-title{font-size:15pt;margin:4px 0;}
  .hs-sub{font-size:9pt;margin-bottom:8px;}
  .hs-meta-row{margin-top:6px;}
  .hs-meta-label{font-size:8pt;padding-bottom:2px;}
  .hs-meta-value{font-size:9pt;margin-top:2px;}
  .body-sec{margin-bottom:12px;}
  .h-mark{font-size:11pt;margin:12px 0 5px;}
  .body-sec p{font-size:10pt;line-height:1.65;max-width:none;margin-bottom:7px;}
  .meta-tags{margin:10px 0 0;}
  .mt-row{margin-bottom:6px;}
  .pill{background:none;color:var(--navy);border:1px solid var(--navy);font-size:8.5pt;padding:2px 10px;}
  .mt-tag{font-size:8.5pt;}
  .pr-foot{border-top:1px solid var(--line);margin-top:14px;padding-top:8px;font-size:8.5pt;color:#555;line-height:1.6;display:flex;justify-content:space-between;}
}


/* View Transitions：一覧→詳細で画像がつながって開く */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(kk-work-hero){ animation-duration:.5s; }
  ::view-transition-old(kk-work-hero),::view-transition-new(kk-work-hero){ animation-timing-function:cubic-bezier(.4,0,.2,1); }
}

/* 画像を枠に収める（実装時に追加・260816）
   属性の width / height がそのまま効いて、枠からはみ出していた */
.hs-main img,
.hs-thumb img,
.rel-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.rel-img{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--cream);}
.wd-wrap img{max-width:100%;height:auto;}
.wd-body img{width:100%;height:auto;margin:var(--sp-md) 0;}

/* ── 実装時に足りなかった指定（260816） ──
   マークアップを書き直したときにクラス名が変わり、CSSが当たっていなかった箇所 */

/* パンくず */
.wd-crumb{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  /* 固定ヘッダーの下に潜らないよう、ここで高さぶんを空ける */
  padding-top:calc(var(--header-h, 92px) + 28px);
  margin:0 0 var(--sp-md);
  font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);
}
.wd-crumb a{color:var(--ink-soft);transition:color .3s;}
.wd-crumb a:hover{color:var(--gold);}
.wd-crumb span{color:var(--line);}
.wd-crumb [aria-current]{color:var(--navy);}

/* サムネイル。5枚を横一列に */
.hs-thumbs{display:flex;gap:10px;margin-top:12px;width:100%;}
.hs-thumbs .hs-thumb{flex:0 0 calc((100% - 40px) / 5);}
.hs-thumbs .hs-thumb.on{border-color:var(--gold);}

/* 本文とタグ */
.wd-body{max-width:760px;margin:var(--sp-2xl) 0;font-size:.92rem;line-height:2.2;letter-spacing:.04em;}
.wd-body p{margin-bottom:1.4rem;}
.voice{max-width:760px;margin:var(--sp-2xl) 0;padding-left:18px;border-left:2px solid var(--gold);}
.voice-label{font-family:'Marcellus',serif;font-size:.62rem;letter-spacing:.22em;color:var(--gold);}
.voice-cite{margin-top:.7rem;font-size:.95rem;line-height:2.1;color:var(--ink);}
.wd-back{margin:var(--sp-2xl) 0 var(--sp-3xl);font-size:.8rem;letter-spacing:.12em;}
.wd-back a{border-bottom:1px solid var(--line);padding-bottom:.2rem;color:var(--navy);}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:var(--sp-lg);}
}
@media (max-width:640px){
  .hs-thumbs .hs-thumb{flex:0 0 calc((100% - 20px) / 3);}
}

/* 実装時に足りなかった指定・その2（260816） */
.hs-media{min-width:0;}
.hs-body{min-width:0;}
.hs-title-en{margin-top:.6rem;font-family:var(--serif-en);font-style:italic;font-size:.86rem;letter-spacing:.04em;color:var(--ink-soft);line-height:1.7;}

.related{margin:var(--sp-3xl) 0;padding-top:var(--sp-2xl);border-top:1px solid var(--line-soft);}
.related-title{font-size:1.05rem;letter-spacing:.16em;color:var(--navy);font-weight:400;}
.related-grid{margin-top:var(--sp-lg);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.rel-card{display:block;}
.rel-name{margin-top:.8rem;font-size:.86rem;letter-spacing:.06em;line-height:1.7;color:var(--navy);font-weight:400;}
.rel-date{margin-top:.3rem;font-family:var(--serif-en);font-size:.72rem;color:var(--gold-soft);}
.rel-card:hover .rel-name{color:var(--gold);}

@media (max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr;gap:var(--sp-lg);}}