/* ================================================================
   Agnos — Sub Pages (page.css)
   front-page.php 以外の全ページで読み込む。
   design-source/assets/sub.css + 各配下ページのインライン CSS を統合。
================================================================ */

/* ================================================================
   PAGE HERO（配下ページ共通の見出しバナー）
================================================================ */
.page-hero{
  position:relative;
  padding: calc(var(--header-h) + 88px) var(--gutter) 88px;
  background:var(--bg-warm);
  border-bottom:1px solid var(--line-soft);
}
.page-hero-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr;gap:80px;
  align-items:end;
}
.page-hero .crumbs{
  font-family:var(--serif-en); font-size:13px; letter-spacing:.18em;
  color:var(--mute);
  margin-bottom:32px;
  display:flex; gap:14px; align-items:center;
}
.page-hero .crumbs a{transition:color .3s}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .crumbs .sep{opacity:.4}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{
  font-family:var(--serif-jp); font-weight:400;
  font-size:clamp(34px, 4.4vw, 52px); letter-spacing:.08em;
  line-height:1.45; color:var(--ink); text-wrap:balance;
}
.page-hero h1 .subtitle-jp{
  display:block;
  font-family:var(--serif-jp); font-weight:300;
  font-size:.55em; letter-spacing:.08em; color:var(--ink-3);
  margin-top:14px;
}
.page-hero h1 .en{
  display:block;
  font-family:var(--serif-en); font-style:italic;
  font-size:.4em; letter-spacing:.18em; color:var(--mute);
  margin-top:18px; font-weight:400;
}
.page-hero .lede{
  color:var(--ink-3); font-size:14px; line-height:2.1;
  max-width:42ch; padding-bottom:8px;
}

/* ================================================================
   GENERIC SECTION (sub pages)
================================================================ */
.sub-section{padding:120px var(--gutter)}
.sub-section.warm{background:var(--bg-warm)}
.sub-section.sub{background:var(--bg-sub)}
.sub-section.dark{background:var(--bg-dark);color:#fff}
.sub-wrap{max-width:var(--max); margin:0 auto}
.sub-head{
  margin-bottom:64px;
  display:grid; grid-template-columns:1fr auto;
  gap:40px; align-items:end;
}
.sub-head .eyebrow{margin-bottom:14px}
.sub-head h2{
  font-family:var(--serif-jp); font-weight:400;
  font-size:clamp(26px, 3vw, 36px); letter-spacing:.06em;
  line-height:1.55; color:var(--ink); text-wrap:balance;
}
.sub-head .side{
  font-family:var(--serif-en); font-style:italic;
  font-size:12px; letter-spacing:.28em; color:var(--mute);
}

/* dummy text helper */
.dummy{color:var(--ink-3); font-size:14px; line-height:2.1}
.dummy + .dummy{margin-top:1.6em}

/* ================================================================
   SUB CTA（配下ページ共通フッター直前 CTA ブロック）
================================================================ */
.subcta{
  padding:120px var(--gutter);
  background:var(--bg-warm);
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.subcta .eyebrow{margin-bottom:24px}
.subcta h2{
  font-family:var(--serif-jp); font-weight:400;
  font-size:clamp(28px, 3.4vw, 40px); letter-spacing:.08em;
  line-height:1.55; margin-bottom:36px; text-wrap:balance;
}
.subcta .lede{
  color:var(--ink-3); max-width:46ch;
  margin:0 auto 48px; line-height:2.1;
}
.subcta .actions{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}

/* ================================================================
   PROPERTIES — Catalogue Cover（archive-property.php ヒーロー）
   2026-05-18 page-hero から雑誌カタログ風カバーに差し替え。
================================================================ */
.prop-cover{
  position:relative;
  width:100%;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  color:#FAFAFA;
  font-family:var(--serif-jp);
  isolation:isolate;
}
.prop-cover-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  filter:saturate(1.05);
}
.prop-cover-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.42) 0%,
      rgba(0,0,0,0.12) 28%,
      rgba(0,0,0,0.18) 70%,
      rgba(0,0,0,0.55) 100%);
  z-index:1;
}

/* 上部メタバー（カタログ・Vol/シーズン） */
.prop-cover-topbar{
  position:absolute; z-index:3;
  top:max(96px, calc(var(--nav-h, 88px) + 16px));
  left:0; right:0;
  padding:0 6vw;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Cormorant Garamond', serif;
  font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.prop-cover-topbar .pc-top-c{
  font-size:14px; letter-spacing:.32em;
}

/* 縦書きサイド要素 */
.prop-cover-vert-left,
.prop-cover-vert-right{
  position:absolute; z-index:3;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  letter-spacing:.4em;
  color:rgba(255,255,255,0.7);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
  writing-mode:vertical-rl;
  white-space:nowrap;
}
.prop-cover-vert-left{
  left:max(24px, 2.4vw);
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase;
}
.prop-cover-vert-right{
  right:max(24px, 2.4vw);
  font-family:var(--serif-jp);
  letter-spacing:.5em;
  font-size:13px;
}

/* メイン本文（左寄せ、画面中央〜やや下） */
.prop-cover-content{
  position:absolute; z-index:3;
  left:0; right:0;
  top:50%;
  transform:translateY(-46%);
  padding:0 max(80px, 8vw);
  max-width:1100px;
}
.prop-cover-crumbs{
  font-family:'Cormorant Garamond', serif;
  font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  margin-bottom:36px;
  display:inline-flex; align-items:center; gap:10px;
}
.prop-cover-crumbs a{color:inherit;}
.prop-cover-crumbs a:hover{color:#fff;}
.prop-cover-crumbs .sep{opacity:.5;}
/* ページの正体を日本語で瞬時に伝えるラベル（日本語=主／英語=従）。雑誌風の世界観は維持。
   ★サイズ調整ノブ：--pc-eyebrow-jp-size（日本語の大きさ）。叩き台として実機で微調整可。 */
.prop-cover-eyebrow{
  --pc-eyebrow-jp-size:clamp(16px, 1.7vw, 21px);
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  margin-bottom:24px;
}
.prop-cover-eyebrow .pc-eyebrow-jp{
  font-family:var(--serif-jp, 'Noto Serif JP', serif);
  font-weight:500;
  font-size:var(--pc-eyebrow-jp-size);
  letter-spacing:.26em;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}
.prop-cover-eyebrow .pc-eyebrow-en{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:13px; letter-spacing:.18em;
  color:rgba(255,255,255,0.78);
}
.prop-cover-title{
  font-size:clamp(34px, 4.6vw, 72px);
  line-height:1.4;
  letter-spacing:.04em;
  font-weight:400;
  margin:0 0 28px;
  text-shadow:0 2px 12px rgba(0,0,0,0.35);
  white-space:nowrap;
}
@media (max-width: 640px){
  .prop-cover-title{
    white-space:normal;
    font-size:28px;
    letter-spacing:.02em;
    line-height:1.5;
  }
}
.prop-cover-en{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(16px, 1.6vw, 22px);
  line-height:1.55;
  letter-spacing:.04em;
  margin:0 0 32px;
  color:rgba(255,255,255,0.92);
}
.prop-cover-lede{
  font-size:13px;
  line-height:2.0;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.88);
  max-width:520px;
  margin:0;
}

/* 下部メタ（販売数 / Coming Soon / 発行月 / クレジット / スクロール） */
.prop-cover-bottom{
  position:absolute; z-index:3;
  bottom:max(40px, 4vh);
  left:0; right:0;
  padding:0 max(80px, 8vw);
  display:grid;
  grid-template-columns:repeat(3, auto) 1fr auto;
  align-items:end;
  gap:48px;
  font-family:var(--serif-jp);
}
.prop-cover-stat{
  display:flex; flex-direction:column; gap:8px;
}
.prop-cover-stat .lbl{
  font-family:'Cormorant Garamond', serif;
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}
.prop-cover-stat .val{
  font-family:'Cormorant Garamond', serif;
  font-size:30px; letter-spacing:.04em;
  color:#fff;
  line-height:1;
  display:flex; align-items:baseline; gap:8px;
}
.prop-cover-stat .val small{
  font-family:var(--serif-jp);
  font-size:13px; letter-spacing:.18em;
  color:rgba(255,255,255,0.85);
}
.prop-cover-stat .val-italic{ font-style:italic; }
.prop-cover-credit{
  justify-self:end;
  align-self:end;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:12px; letter-spacing:.14em;
  color:rgba(255,255,255,0.75);
}
.prop-cover-scroll{
  justify-self:end;
  font-family:'Cormorant Garamond', serif;
  font-size:11px; letter-spacing:.4em;
  color:rgba(255,255,255,0.7);
}

/* ===== レスポンシブ（タブレット〜スマホ） ===== */
@media (max-width: 1024px){
  .prop-cover-vert-left,
  .prop-cover-vert-right{ display:none; }
  .prop-cover-content{ padding:0 6vw; transform:translateY(-44%); }
  .prop-cover-bottom{
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:auto auto;
    gap:24px;
    padding:0 6vw;
  }
  .prop-cover-credit{
    grid-column:1 / -1;
    justify-self:start;
  }
  .prop-cover-scroll{ display:none; }
}
@media (max-width: 640px){
  .prop-cover{ min-height:640px; height:auto; padding-bottom:40px; }
  .prop-cover-topbar{
    flex-direction:column; align-items:flex-start;
    gap:6px;
    font-size:10px;
  }
  .prop-cover-content{
    position:relative;
    transform:none;
    top:auto;
    padding:200px 6vw 40px;
  }
  .prop-cover-bottom{
    position:relative;
    bottom:auto;
    padding:32px 6vw 0;
    grid-template-columns:1fr 1fr;
  }
  .prop-cover-stat .val{ font-size:24px; }
}

/* ================================================================
   PROPERTIES — Archive（archive-property.php）
   design-source/properties.html インライン から移植
================================================================ */
.prop-list{padding:120px var(--gutter)}
.prop-list .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:80px;
}
.pcard{
  display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
  text-decoration:none;color:inherit;
}
.pcard:nth-child(even){grid-template-columns:1fr 1.2fr}
.pcard:nth-child(even) .pcard-photo{order:2}

/* カバー画像と同じ物件のカード：写真をスキップしてテキストのみ。
   2026-05-18 重複表示回避のため追加。 */
.pcard--no-photo{
  grid-template-columns:1fr;
  max-width:720px;
  margin:0 auto;
  padding:48px clamp(28px, 5vw, 64px);
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  transition:transform .4s ease, box-shadow .4s ease;
}
.pcard--no-photo:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.05);
}
.pcard--no-photo .pcard-text{
  text-align:center;
}
.pcard--no-photo .pcard-text .num{
  text-align:center;
}
.pcard--no-photo .pcard-text h3{
  text-align:center;
}
.pcard--no-photo .pcard-text p{
  text-align:center;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.pcard--no-photo .pcard-meta{
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  text-align:left; /* metric pair はラベル＋値で左揃え維持、ブロック自体は中央 */
}
.pcard--no-photo .pcard-cta{
  margin:0 auto;
}
.pcard-photo{
  aspect-ratio:4/3;overflow:hidden;
  background:var(--bg-sub);position:relative;
}
.pcard-photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard-photo img{transform:scale(1.04)}
.pcard-photo .ph{
  position:absolute; inset:0;
  width:100%;height:100%;aspect-ratio:auto;
}
.pcard-status{
  position:absolute;left:18px;top:18px;
  background:#fff;padding:8px 16px;
  font-family:var(--serif-en);font-size:11px;letter-spacing:.28em;
  color:var(--ink);text-transform:uppercase;
  z-index:2;
}
.pcard-status.sold{background:var(--ink);color:#fff}
.pcard-text .num{
  font-family:var(--serif-en);font-style:italic;
  font-size:14px;letter-spacing:.3em;color:var(--mute);
  display:block;margin-bottom:18px;
}
.pcard-text h3{
  font-family:var(--serif-jp);font-weight:400;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.06em;line-height:1.5;
  margin-bottom:24px;text-wrap:balance;
}
.pcard-text p{
  color:var(--ink-3);font-size:14px;line-height:2;
  margin-bottom:32px;
}
.pcard-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;
  font-size:12.5px;color:var(--ink-2);
  margin-bottom:32px;
  border-top:1px solid var(--line-soft);padding-top:24px;
}
.pcard-meta dt{
  font-family:var(--serif-en);font-style:italic;
  font-size:11px;letter-spacing:.22em;color:var(--mute);
  text-transform:uppercase;margin-bottom:4px;
}
.pcard-meta dd{margin-bottom:8px}
.pcard-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.22em;
  padding:8px 0;border-bottom:1px solid currentColor;
  transition:gap .35s;
}
.pcard:hover .pcard-cta{gap:24px}
.pcard-cta .arrow{
  display:inline-block;width:28px;height:1px;background:currentColor;
}

/* ================================================================
   PROPERTIES — Single（single-property.php / 雑誌風レイアウト）
   2026-05-13 Claude Design ハンドオフ準拠
   ベース: 案B EDITORIAL / ヒーロー: 案A ATELIER / クロージング: 案C JOURNAL
   全セレクタは body.single-property に scope（他ページ無影響）
================================================================ */

/* ---- スコープ用トークン（このテーマの基本トークンと重複しない名前で導入）---- */
body.single-property{
  --paper:           #F7F4ED;
  --paper-2:         #FFFFFF;
  --paper-warm:      #EFEAE0;
  --paper-deep:      #ECE6D8;
  --pj-ink:          #14130F;
  --pj-ink-2:        #38362F;
  --pj-ink-3:        #6A675D;
  --pj-ink-mute:     #9C988C;
  --pj-line:         #C5C0B0;
  --pj-line-soft:    #DFDACA;
  --pj-mint:         #63E1E5;
  --pj-mint-d:       #2E8689;
  --pj-max:          1320px;
  --pj-gutter:       48px;
  --pj-gutter-mob:   22px;
  --pj-space-section:    160px;
  --pj-space-section-mob: 88px;
  --pj-space-block:      80px;
  background:var(--paper);
  color:var(--pj-ink);
}

/* ---- typography helpers ---- */
body.single-property .pj-en{font-family:var(--serif-en);font-weight:400}
body.single-property .pj-en-it{font-family:var(--serif-en);font-style:italic;font-weight:400}

/* ================================================================
   HERO（案A ATELIER 由来：フルブリード）
================================================================ */
body.single-property .hero{
  position:relative;
  height:100vh;min-height:680px;
  background:#000;overflow:hidden;
}
body.single-property .hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 60%;
  z-index:0;
}
body.single-property .hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
}
body.single-property .hero-meta{
  position:absolute;top:96px;right:var(--pj-gutter);z-index:2;
  text-align:right;color:#fff;
  font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;opacity:.92;
}
body.single-property .hero-meta .vol{display:block;margin-bottom:6px}
body.single-property .hero-meta .on-sale{font-style:normal;letter-spacing:.4em;font-size:10.5px}
body.single-property .hero-title{
  position:absolute;left:var(--pj-gutter);right:var(--pj-gutter);bottom:96px;z-index:2;
  color:#fff;max-width:680px;
}
body.single-property .hero-title .pre{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--serif-en);font-style:italic;font-size:12px;
  letter-spacing:.36em;text-transform:uppercase;opacity:.92;
  margin-bottom:22px;
}
body.single-property .hero-title .pre::before{content:"";display:block;width:32px;height:1px;background:currentColor;opacity:.7}
body.single-property .hero-title h1{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(28px,4.4vw,52px);letter-spacing:.06em;line-height:1.55;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.18);
}
body.single-property .hero-title .en-sub{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:.36em;letter-spacing:.18em;
  margin-top:24px;opacity:.86;font-weight:300;
}
body.single-property .hero-title .location{
  margin-top:28px;display:flex;gap:20px;flex-wrap:wrap;
  font-family:var(--serif-en);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;opacity:.88;
}
body.single-property .hero-title .location span{padding-right:20px;border-right:1px solid rgba(255,255,255,.4)}
body.single-property .hero-title .location span:last-child{border-right:0}
body.single-property .hero-scroll{
  position:absolute;right:var(--pj-gutter);bottom:32px;z-index:2;
  color:#fff;font-family:var(--serif-en);font-size:10px;
  letter-spacing:.4em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:.85;
}
body.single-property .hero-scroll::after{content:"";width:1px;height:48px;background:#fff;opacity:.7;animation:pjScrollPulse 2.4s ease-in-out infinite}
@keyframes pjScrollPulse{
  0%,100%{opacity:.3;transform:scaleY(.7);transform-origin:top}
  50%{opacity:.9;transform:scaleY(1)}
}

/* ================================================================
   OPENING LEDE（案B 由来）
================================================================ */
body.single-property .opening{
  padding:var(--pj-space-section) var(--pj-gutter);
  text-align:center;
}
body.single-property .opening-inner{max-width:760px;margin:0 auto}
body.single-property .opening .marker{
  display:inline-flex;align-items:center;gap:18px;
  font-family:var(--serif-en);font-style:italic;font-size:12px;
  letter-spacing:.36em;color:var(--pj-ink-mute);text-transform:uppercase;
  margin-bottom:48px;
}
body.single-property .opening .marker::before,
body.single-property .opening .marker::after{content:"";display:block;width:32px;height:1px;background:var(--pj-line)}
body.single-property .opening h2{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(22px,3vw,34px);letter-spacing:.1em;line-height:2;
  color:var(--pj-ink);margin-bottom:40px;text-wrap:balance;
}
body.single-property .opening h2 .accent{
  background:linear-gradient(transparent 64%, rgba(99,225,229,.32) 64%);
  padding:0 .05em;
}
body.single-property .opening p{
  font-family:var(--serif-jp);font-size:15px;line-height:2.4;
  color:var(--pj-ink-3);letter-spacing:.06em;text-wrap:pretty;
}

/* ================================================================
   TABLE OF CONTENTS（案B 由来）
================================================================ */
body.single-property .toc{
  padding:0 var(--pj-gutter) var(--pj-space-section);
  background:var(--paper);
}
body.single-property .toc-inner{max-width:var(--pj-max);margin:0 auto}
body.single-property .toc-head{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:end;gap:32px;
  padding-bottom:24px;border-bottom:1px solid var(--pj-ink);
  margin-bottom:48px;
}
body.single-property .toc-head .num{
  font-family:var(--serif-en);font-style:italic;font-size:13px;
  letter-spacing:.3em;color:var(--pj-ink-mute);text-transform:uppercase;
}
body.single-property .toc-head h2{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:.1em;
}
body.single-property .toc-head h2 .pj-en{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:13px;letter-spacing:.32em;color:var(--pj-ink-mute);
  text-transform:uppercase;margin-bottom:6px;font-weight:400;
}
body.single-property .toc-head .side{
  font-family:var(--serif-en);font-style:italic;font-size:12px;
  letter-spacing:.18em;color:var(--pj-ink-mute);
}
body.single-property .toc-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
body.single-property .toc-item{
  display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--pj-line);padding-top:24px;
  transition:transform .35s;
}
body.single-property .toc-item:hover{transform:translateY(-6px)}
/* TOC ホバー時：数字の「1/2/3」(=.accent) だけ色変更。「0」と「.」は据え置き */
body.single-property .toc-item:hover .toc-num .accent{color:var(--pj-mint)}
body.single-property .toc-num{
  font-family:var(--serif-en);font-style:italic;font-weight:300;
  font-size:48px;color:var(--pj-ink);letter-spacing:.01em;line-height:1;
  transition:color .35s;
}
body.single-property .toc-title{
  font-family:var(--serif-jp);font-weight:400;font-size:18px;
  letter-spacing:.1em;line-height:1.7;color:var(--pj-ink);
}
body.single-property .toc-title .pj-en{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:12px;letter-spacing:.28em;color:var(--pj-ink-mute);
  text-transform:uppercase;margin-bottom:6px;font-weight:400;
}
body.single-property .toc-meta{
  font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.2em;color:var(--pj-ink-3);margin-top:auto;
}

/* ================================================================
   CHAPTER（案B 由来）
================================================================ */
body.single-property .chapter{
  padding:var(--pj-space-section) 0;
  border-top:1px solid var(--pj-line-soft);
}
body.single-property .chapter:nth-of-type(even){background:var(--paper-2)}
body.single-property .ch-head{
  display:grid;grid-template-columns:auto 1fr;gap:64px;
  padding:0 var(--pj-gutter) var(--pj-space-block);
  max-width:var(--pj-max);margin:0 auto;
  border-bottom:1px solid var(--pj-line);
  align-items:end;
}
body.single-property .ch-head .num{
  font-family:var(--serif-en);font-style:italic;font-weight:300;
  font-size:clamp(120px,15vw,220px);line-height:.8;
  color:var(--pj-ink);letter-spacing:-.02em;
}
body.single-property .ch-head .num .accent{color:var(--pj-mint)}
body.single-property .ch-head .head-text{padding-bottom:16px}
body.single-property .ch-head .label{
  font-family:var(--serif-en);font-style:italic;font-size:13px;
  letter-spacing:.36em;color:var(--pj-ink-mute);text-transform:uppercase;
  margin-bottom:18px;display:flex;align-items:center;gap:14px;
}
body.single-property .ch-head .label::before{content:"";display:block;width:32px;height:1px;background:var(--pj-ink-mute)}
body.single-property .ch-head h3{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(26px,3.4vw,44px);letter-spacing:.06em;line-height:1.55;
  color:var(--pj-ink);text-wrap:balance;margin-bottom:24px;
}
body.single-property .ch-head .lede{
  font-family:var(--serif-en);font-style:italic;font-size:18px;
  letter-spacing:.02em;color:var(--pj-ink-2);line-height:1.6;max-width:32em;
}

/* Asymmetric photo grids (L1/L2/L3) */
body.single-property .ch-grid{
  max-width:var(--pj-max);margin:var(--pj-space-block) auto 0;padding:0 var(--pj-gutter);
  display:grid;gap:36px 32px;
}
body.single-property .ch-grid.l1{
  grid-template-columns:1.6fr 1fr;
  grid-template-rows:auto auto;
}
body.single-property .ch-grid.l1 .gx-big{grid-row:1/3}
body.single-property .ch-grid.l1 .gx-big img{aspect-ratio:4/5;width:100%;height:100%;object-fit:cover}
body.single-property .ch-grid.l1 .gx-det img{aspect-ratio:5/4;width:100%;object-fit:cover}
body.single-property .ch-grid.l1 .gx-text{padding:24px 0}
body.single-property .ch-grid.l2{
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
}
body.single-property .ch-grid.l2 .gx-full{grid-column:1/-1}
body.single-property .ch-grid.l2 .gx-full img{aspect-ratio:3/2;width:100%;object-fit:cover}
body.single-property .ch-grid.l2 .gx-det img{aspect-ratio:4/5;width:100%;object-fit:cover}
body.single-property .ch-grid.l2 .gx-text{grid-column:1/3;padding:24px 0}
body.single-property .ch-grid.l3{
  grid-template-columns:1fr 1.5fr;
  grid-template-rows:auto auto;
}
body.single-property .ch-grid.l3 .gx-wide img{width:100%;height:auto;display:block}
body.single-property .ch-grid.l3 .gx-text{padding:24px 0}
body.single-property .ch-grid.l3 .gx-bot{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:32px}
body.single-property .ch-grid.l3 .gx-bot img{aspect-ratio:4/3;width:100%;object-fit:cover}
/* figure が1枚しかない場合は中央寄せの単独レイアウトに（左寄り間延び防止）
   小さめ表示で低解像度画像のピンボケを目立たせない */
body.single-property .ch-grid.l3 .gx-bot:has(figure:only-child){grid-template-columns:minmax(0,480px);justify-content:center}
body.single-property .ch-grid figure{position:relative;overflow:hidden}
body.single-property .ch-grid figcaption{
  margin-top:14px;
  font-family:var(--serif-en);font-style:italic;font-size:12px;
  letter-spacing:.08em;color:var(--pj-ink-3);
}
body.single-property .ch-grid figcaption .id{
  font-family:var(--serif-en);font-style:normal;font-size:10px;
  letter-spacing:.32em;color:var(--pj-ink-mute);text-transform:uppercase;
  margin-right:14px;
}
body.single-property .ch-grid .gx-text h4{
  font-family:var(--serif-jp);font-weight:400;font-size:20px;
  letter-spacing:.1em;line-height:1.7;color:var(--pj-ink);
  margin-bottom:24px;text-wrap:balance;
}
body.single-property .ch-grid .gx-text h4::before{
  content:"";display:block;width:32px;height:1px;background:var(--pj-ink);
  margin-bottom:18px;
}
body.single-property .ch-grid .gx-text p{
  font-family:var(--serif-jp);font-size:14.5px;line-height:2.35;
  color:var(--pj-ink-2);letter-spacing:.06em;text-wrap:pretty;
}
body.single-property .ch-grid .gx-text p + p{margin-top:1.4em}

/* ================================================================
   PULL QUOTE（案B 由来）
================================================================ */
body.single-property .pullquote{
  max-width:1000px;margin:0 auto;padding:140px var(--pj-gutter);
  text-align:center;
}
body.single-property .pullquote q{quotes:none}
body.single-property .pullquote q::before,
body.single-property .pullquote q::after{content:""}
body.single-property .pullquote .qmark{
  font-family:var(--serif-en);font-size:120px;line-height:.6;
  color:var(--pj-mint);opacity:.6;display:block;margin-bottom:24px;
}
body.single-property .pullquote p{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(22px,3vw,34px);line-height:1.85;letter-spacing:.08em;
  color:var(--pj-ink);text-wrap:balance;
}
body.single-property .pullquote p .accent{
  background:linear-gradient(transparent 65%, rgba(99,225,229,.32) 65%);
  padding:0 .05em;
}
body.single-property .pullquote p .pj-en{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:.5em;letter-spacing:.02em;color:var(--pj-ink-3);
  margin-top:24px;line-height:1.5;font-weight:300;
}
body.single-property .pullquote .src{
  margin-top:36px;font-family:var(--serif-en);font-size:11px;
  letter-spacing:.32em;color:var(--pj-ink-mute);text-transform:uppercase;
}

/* ================================================================
   FACTS（案B 由来：sticky + 詳細表 + 価格カード）
================================================================ */
body.single-property .facts{
  padding:var(--pj-space-section) var(--pj-gutter);
  background:var(--paper-warm);
  border-top:1px solid var(--pj-line-soft);
}
body.single-property .facts-inner{max-width:var(--pj-max);margin:0 auto}
body.single-property .facts-layout{
  display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;
}
body.single-property .facts-left{
  position:sticky;top:96px;align-self:start;
}
body.single-property .facts-left .num{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:13px;letter-spacing:.3em;color:var(--pj-ink-mute);
  text-transform:uppercase;margin-bottom:24px;
}
body.single-property .facts-left h2{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(26px,3.2vw,40px);letter-spacing:.08em;line-height:1.5;
  margin-bottom:32px;color:var(--pj-ink);
}
body.single-property .facts-left h2 .pj-en{
  display:block;font-family:var(--serif-en);font-style:italic;
  font-size:.4em;letter-spacing:.32em;color:var(--pj-ink-mute);
  text-transform:uppercase;margin-bottom:14px;font-weight:400;
}
body.single-property .facts-left .desc{
  font-family:var(--serif-jp);font-size:14px;line-height:2.3;
  color:var(--pj-ink-2);letter-spacing:.06em;max-width:26em;
}
body.single-property .facts-table{border-top:1px solid var(--pj-ink)}
body.single-property .facts-row{
  display:grid;grid-template-columns:160px 1fr;
  padding:18px 0;border-bottom:1px solid var(--pj-line-soft);
  gap:32px;align-items:baseline;
}
body.single-property .facts-row dt{
  font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.3em;color:var(--pj-ink-mute);text-transform:uppercase;
}
body.single-property .facts-row dt .ja{
  display:block;font-family:var(--serif-jp);font-style:normal;
  font-size:10px;letter-spacing:.28em;margin-top:4px;color:var(--pj-ink-3);
  text-transform:none;
}
body.single-property .facts-row dd{
  font-family:var(--serif-jp);font-size:14px;letter-spacing:.06em;
  color:var(--pj-ink);line-height:1.85;
}
body.single-property .facts-row dd .small{
  display:block;font-size:11.5px;color:var(--pj-ink-3);letter-spacing:.04em;
  margin-top:3px;
}
body.single-property .price-card{
  margin-top:48px;padding:36px 36px 40px;
  background:#fff;border:1px solid var(--pj-ink);
  position:relative;
}
body.single-property .price-card::before{
  content:"PRICE";position:absolute;top:-9px;left:24px;
  background:#fff;padding:0 12px;
  font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.4em;color:var(--pj-ink);text-transform:uppercase;
}
body.single-property .price-card .label{
  display:block;font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.3em;color:var(--pj-ink-mute);text-transform:uppercase;
  margin-bottom:10px;
}
body.single-property .price-card .value{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(38px,4.6vw,60px);letter-spacing:.04em;
  color:var(--pj-ink);line-height:1;
  font-feature-settings:"tnum";
}
body.single-property .price-card .value .num-en{
  font-family:var(--serif-en);font-weight:300;letter-spacing:-.005em;
}
body.single-property .price-card .value .unit{
  font-family:var(--serif-jp);font-size:.4em;letter-spacing:.12em;
  color:var(--pj-ink-2);margin-left:6px;font-weight:400;vertical-align:baseline;
}
body.single-property .price-card .tax{
  margin-top:10px;font-family:var(--serif-en);font-style:italic;font-size:11px;
  letter-spacing:.3em;color:var(--pj-ink-mute);text-transform:uppercase;
}
body.single-property .price-card .bottom{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--pj-line-soft);
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif-jp);font-size:12px;color:var(--pj-ink-2);letter-spacing:.1em;
}
body.single-property .price-card .bottom .accent{
  font-family:var(--serif-en);font-style:italic;font-size:16px;
  color:var(--pj-mint-d);letter-spacing:.04em;font-weight:400;
}

/* ================================================================
   CLOSING（案C JOURNAL 由来：印章 + CTA）
================================================================ */
body.single-property .closing{
  padding:var(--pj-space-section) var(--pj-gutter);
  text-align:center;background:var(--paper);
}
body.single-property .closing-inner{max-width:760px;margin:0 auto}
body.single-property .closing .marker{
  display:inline-flex;align-items:center;gap:18px;
  font-family:var(--serif-en);font-style:italic;font-size:12px;
  letter-spacing:.36em;color:var(--pj-ink-mute);text-transform:uppercase;
  margin-bottom:48px;
}
body.single-property .closing .marker::before,
body.single-property .closing .marker::after{
  content:"";display:block;width:32px;height:1px;background:var(--pj-line);
}
body.single-property .stamp-wrap{
  display:flex;justify-content:center;margin:0 0 64px;
}
body.single-property .stamp{
  width:220px;height:220px;
  border:2.5px solid var(--pj-mint-d);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  color:var(--pj-mint-d);text-align:center;
  font-family:var(--serif-jp);font-weight:400;
  transform:rotate(-8deg);
  position:relative;
  background:rgba(99,225,229,.05);
}
body.single-property .stamp::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--pj-mint-d);
  border-radius:50%;opacity:.4;
}
body.single-property .stamp .top{
  font-family:var(--serif-en);font-style:italic;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  white-space:nowrap;
}
body.single-property .stamp .big{
  font-family:var(--serif-jp);font-weight:500;
  font-size:26px;letter-spacing:.18em;line-height:1;
  padding:4px 0;white-space:nowrap;
}
body.single-property .stamp .sub{
  font-family:var(--serif-jp);font-weight:400;
  font-size:11px;letter-spacing:.18em;
  white-space:nowrap;
}
body.single-property .closing h2{
  font-family:var(--serif-jp);font-weight:300;
  font-size:clamp(22px,3.2vw,34px);letter-spacing:.1em;line-height:1.85;
  color:var(--pj-ink);margin-bottom:24px;text-wrap:balance;
}
body.single-property .closing .sub-line{
  font-family:var(--serif-en);font-style:italic;font-size:15px;
  letter-spacing:.02em;color:var(--pj-ink-3);line-height:1.6;margin-bottom:56px;
}
body.single-property .closing-actions{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
}
body.single-property .cta-btn{
  display:inline-flex;align-items:center;gap:18px;
  padding:22px 44px;
  font-family:var(--serif-jp);font-size:13px;letter-spacing:.24em;
  border:1px solid var(--pj-ink);color:var(--pj-ink);background:transparent;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
body.single-property .cta-btn:hover{background:var(--pj-ink);color:#fff}
body.single-property .cta-btn.fill{background:var(--pj-ink);color:#fff}
body.single-property .cta-btn.fill:hover{background:transparent;color:var(--pj-ink)}
body.single-property .cta-btn .arrow{display:inline-block;width:24px;height:1px;background:currentColor;transition:width .35s}
body.single-property .cta-btn:hover .arrow{width:32px}

/* ================================================================
   MOBILE BOTTOM PRICE BAR
================================================================ */
body.single-property .mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--pj-ink);
  padding:12px 16px;
  align-items:center;gap:12px;
}
body.single-property .mobile-bar .mb-price{
  flex:1;display:flex;flex-direction:column;gap:2px;
}
body.single-property .mobile-bar .mb-price .label{
  font-family:var(--serif-en);font-style:italic;font-size:9.5px;
  letter-spacing:.32em;color:var(--pj-ink-mute);text-transform:uppercase;
}
body.single-property .mobile-bar .mb-price .v{
  font-family:var(--serif-jp);font-weight:500;font-size:17px;
  letter-spacing:.05em;color:var(--pj-ink);
  font-feature-settings:"tnum";
}
body.single-property .mobile-bar .mb-price .v .unit{font-size:12px;color:var(--pj-ink-3);margin-left:3px;font-weight:400}
body.single-property .mobile-bar .mb-cta{
  flex:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 14px;
  background:var(--pj-ink);color:#fff;
  font-family:var(--serif-jp);font-size:12px;letter-spacing:.18em;font-weight:400;
}
body.single-property .mobile-bar .mb-cta .arrow{display:inline-block;width:18px;height:1px;background:currentColor}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1100px){
  body.single-property{
    --pj-space-section:120px;
    --pj-space-block:64px;
    --pj-gutter:36px;
  }
  body.single-property .ch-head .num{font-size:clamp(96px,13vw,160px)}
  body.single-property .facts-layout{grid-template-columns:1fr;gap:48px}
  body.single-property .facts-left{position:static}
}
@media (max-width: 880px){
  body.single-property{
    --pj-space-section:var(--pj-space-section-mob);
    --pj-space-block:40px;
    --pj-gutter:var(--pj-gutter-mob);
    padding-bottom:72px;
  }
  body.single-property .hero{height:92vh;min-height:580px}
  body.single-property .hero-meta{top:80px;right:22px;font-size:10px}
  body.single-property .hero-title{left:22px;right:22px;bottom:80px}
  body.single-property .hero-title h1{font-size:26px;letter-spacing:.05em;line-height:1.7}
  body.single-property .hero-title .location{gap:14px;font-size:10px}
  body.single-property .hero-title .location span{padding-right:14px}
  body.single-property .hero-scroll{display:none}
  body.single-property .opening h2{font-size:19px;line-height:2.1}
  body.single-property .opening p{font-size:13.5px;line-height:2.2}
  body.single-property .toc-head{grid-template-columns:1fr;gap:14px}
  body.single-property .toc-head .side{display:none}
  body.single-property .toc-list{grid-template-columns:1fr;gap:24px}
  body.single-property .toc-num{font-size:36px}
  body.single-property .chapter{padding:88px 0}
  body.single-property .ch-head{grid-template-columns:1fr;gap:24px;padding-bottom:48px}
  body.single-property .ch-head .num{font-size:96px;line-height:.85}
  body.single-property .ch-head h3{font-size:24px;line-height:1.65}
  body.single-property .ch-grid{margin-top:48px;gap:24px}
  body.single-property .ch-grid.l1,
  body.single-property .ch-grid.l2,
  body.single-property .ch-grid.l3{grid-template-columns:1fr;grid-template-rows:auto}
  body.single-property .ch-grid.l1 .gx-big,
  body.single-property .ch-grid.l1 .gx-det,
  body.single-property .ch-grid.l2 .gx-full,
  body.single-property .ch-grid.l2 .gx-det,
  body.single-property .ch-grid.l3 .gx-wide{grid-column:auto;grid-row:auto}
  body.single-property .ch-grid.l2 .gx-text{grid-column:auto}
  body.single-property .ch-grid.l3 .gx-bot{grid-template-columns:1fr;gap:24px}
  body.single-property .ch-grid.l1 .gx-big img,
  body.single-property .ch-grid.l2 .gx-full img,
  body.single-property .ch-grid.l3 .gx-wide img{aspect-ratio:5/4}
  body.single-property .pullquote{padding:72px 22px}
  body.single-property .pullquote .qmark{font-size:88px}
  body.single-property .pullquote p{font-size:20px;line-height:1.95;letter-spacing:.06em}
  body.single-property .facts-row{grid-template-columns:110px 1fr;padding:14px 0;gap:14px}
  body.single-property .facts-row dt{font-size:10px;letter-spacing:.22em}
  body.single-property .facts-row dd{font-size:13px}
  body.single-property .price-card{padding:28px 24px 32px}
  body.single-property .stamp{width:160px;height:160px}
  body.single-property .stamp .big{font-size:19px;letter-spacing:.14em}
  body.single-property .closing h2{font-size:20px;line-height:1.9}
  body.single-property .closing .sub-line{font-size:13px;margin-bottom:40px}
  body.single-property .cta-btn{padding:18px 28px;font-size:12px;letter-spacing:.18em}
  body.single-property .closing-actions{flex-direction:column;align-items:stretch;gap:12px}
  body.single-property .mobile-bar{display:flex}
}
@media (max-width: 420px){
  body.single-property .hero-title h1{font-size:22px}
  body.single-property .hero-title .location span{padding-right:10px;font-size:9.5px}
  body.single-property .ch-head .num{font-size:80px}
  body.single-property .pullquote p{font-size:18px}
  body.single-property .price-card .value{font-size:34px}
  body.single-property .stamp{width:140px;height:140px}
  body.single-property .stamp .big{font-size:17px}
}
/* ================================================================
   HERO ナビのガラス効果（2026-05-13 案A 由来、当面維持）
   - solid-on-load の白背景を打ち消し、半透明＋blur でガラス感
   - 2026-05-18: 元の「書き込みありのおしゃれヒーロー」に戻したため、
     画像オーバーレイ要素の display:none 一掃ルールは撤去
================================================================ */
body.single-property.solid-on-load .nav:not(.scrolled){
  background:rgba(0,0,0,.18);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.12);
}
body.single-property.solid-on-load .nav:not(.scrolled) .nav-cta{
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
body.single-property.solid-on-load .nav:not(.scrolled) .nav-cta:hover{
  background:#fff;color:var(--ink);border-color:#fff;
}

@media print{
  body.single-property .mobile-bar,
  body.single-property .hero-scroll{display:none !important}
  body.single-property .hero{height:auto;page-break-after:always}
  body.single-property .chapter{page-break-inside:avoid}
  body.single-property{padding-bottom:0}
}
/* ================================================================
   WORKS — Archive（archive-work.php）
   design-source/works.html インライン から移植
================================================================ */
.works-grid-page{padding:80px var(--gutter) 120px}
.works-grid-page .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;
}
.wcard{display:block;text-decoration:none;color:inherit}
.wcard .ph,
.wcard .img{
  aspect-ratio:4/5;margin-bottom:20px;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;background:var(--bg-sub);
  position:relative;
}
.wcard .img img{width:100%;height:100%;object-fit:cover}
.wcard:hover .ph,
.wcard:hover .img{transform:translateY(-4px)}
.wcard .meta{
  font-family:var(--serif-en);font-style:italic;
  font-size:11px;letter-spacing:.22em;color:var(--mute);
  text-transform:uppercase;margin-bottom:10px;
}
.wcard h3{
  font-family:var(--serif-jp);font-weight:400;
  font-size:18px;line-height:1.6;letter-spacing:.05em;
  color:var(--ink);text-wrap:balance;
}
.wcard .tag{
  display:inline-block;font-size:11px;letter-spacing:.18em;
  color:var(--mute);margin-top:8px;
}

/* ================================================================
   VOICE — Archive（archive-voice.php）
   design-source/voice.html インライン から移植
================================================================ */
.voice-list{padding:120px var(--gutter)}
.voice-list .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:96px;
}
.vlist-card{
  display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
  text-decoration:none;color:inherit;
  padding-bottom:96px;border-bottom:1px solid var(--line-soft);
}
.vlist-card:last-child{border-bottom:0;padding-bottom:0}
.vlist-card:nth-child(even){grid-template-columns:1fr 1.2fr}
.vlist-card:nth-child(even) .vlist-photos{order:2}

.vlist-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vlist-photos figure{
  position:relative;aspect-ratio:4/5;
  overflow:hidden;background:var(--bg-sub);
}
.vlist-photos figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.vlist-card:hover .vlist-photos figure img{transform:scale(1.04)}
.vlist-photos figcaption{
  position:absolute;left:12px;top:12px;
  background:rgba(255,255,255,.94);
  font-family:var(--serif-en);font-size:10px;letter-spacing:.32em;
  padding:5px 11px;color:var(--ink);text-transform:uppercase;
}
.vlist-photos .ph{position:absolute;inset:0}

.vlist-text .num{
  font-family:var(--serif-en);font-style:italic;
  font-size:14px;letter-spacing:.3em;color:var(--mute);
  display:block;margin-bottom:18px;
}
.vlist-text .mark{
  font-family:var(--serif-en);font-style:italic;
  font-size:48px;color:var(--teal);opacity:.7;
  line-height:1;margin-bottom:14px;
}
.vlist-text .q{
  font-family:var(--serif-jp);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.95;letter-spacing:.06em;
  color:var(--ink);margin-bottom:28px;text-wrap:balance;
}
.vlist-text .attr{
  font-family:var(--serif-jp);font-size:13px;letter-spacing:.08em;
  color:var(--mute);margin-bottom:32px;
}
.vlist-text .cta{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.22em;
  padding:8px 0;border-bottom:1px solid currentColor;
  transition:gap .35s;
}
.vlist-card:hover .cta{gap:24px}
.vlist-text .cta .arrow{
  display:inline-block;width:28px;height:1px;background:currentColor;
}
.vlist-text.no-photos{
  grid-column:1/-1;max-width:780px;margin:0 auto;text-align:center;
}
.vlist-noimg{
  padding:64px 56px;background:var(--bg-warm);
  border:1px solid var(--line-soft);text-align:center;
}

/* ================================================================
   VOICE — Single（single-voice.php）
   design-source/voice/y-sama.html インライン から移植
================================================================ */
/* M様の物語: Hero タイトル → Before/After への距離を 15% 詰めて
   「読み始めるまでの距離」を縮める。極細セパレータで視線誘導も追加 */
.vp-ba{padding:68px var(--gutter) 0;position:relative}
.vp-ba::before{
  content:'';
  display:block;
  position:absolute;
  left:50%;
  top:0;
  width:48px;
  height:1px;
  background:rgba(0,0,0,.18);
  transform:translateX(-50%);
}
.vp-ba .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.vp-ba figure{
  position:relative;aspect-ratio:4/5;
  overflow:hidden;background:var(--bg-sub);
}
.vp-ba figure img{width:100%;height:100%;object-fit:cover}
.vp-ba .ph{position:absolute;inset:0}
.vp-ba figcaption{
  position:absolute;left:14px;top:14px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--serif-en);font-size:11px;letter-spacing:.32em;
  padding:7px 14px;text-transform:uppercase;
}

.vp-quote{padding:120px var(--gutter);text-align:center}
.vp-quote .wrap{max-width:780px;margin:0 auto}
.vp-quote .mark{
  font-family:var(--serif-en);font-style:italic;
  font-size:80px;color:var(--teal);opacity:.65;
  line-height:1;margin-bottom:24px;
}
.vp-quote .q{
  font-family:var(--serif-jp);font-weight:400;
  font-size:clamp(22px,2.6vw,30px);line-height:2.1;letter-spacing:.08em;
  color:var(--ink);text-wrap:balance;
}
.vp-quote .attr{
  margin-top:36px;
  font-family:var(--serif-jp);font-size:13px;letter-spacing:.18em;
  color:var(--mute);
}

.vp-body{padding:120px var(--gutter);background:var(--bg-warm)}
.vp-body .wrap{max-width:740px;margin:0 auto}
.vp-body h3{
  font-family:var(--serif-jp);font-weight:400;
  font-size:22px;letter-spacing:.08em;line-height:1.7;
  margin-top:64px;margin-bottom:24px;text-wrap:balance;
}
.vp-body h3:first-child{margin-top:0}
.vp-body p{
  color:var(--ink-2);font-size:15px;line-height:2.2;margin-bottom:1.4em;
}
.vp-body .pull{
  font-family:var(--serif-jp);font-weight:400;
  font-size:20px;line-height:2;color:var(--ink);
  border-left:2px solid var(--ink);
  padding:18px 0 18px 28px;margin:48px 0;
  letter-spacing:.06em;text-wrap:balance;
}
.vp-body figure{margin:48px 0}
.vp-body figcaption{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;letter-spacing:.2em;color:var(--mute);
  margin-top:14px;text-align:center;
}

.vp-info{padding:96px var(--gutter);background:var(--bg-sub)}
.vp-info .wrap{max-width:var(--max);margin:0 auto}
.vp-info-table{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 64px;border-top:1px solid var(--line);
}
.vp-info-table dl{
  display:grid;grid-template-columns:140px 1fr;
  border-bottom:1px solid var(--line);
  padding:18px 8px;margin:0;
}
.vp-info-table dt{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;letter-spacing:.24em;
  color:var(--mute);text-transform:uppercase;
}
.vp-info-table dd{color:var(--ink-2);font-size:14px;margin:0}

.vp-other{padding:120px var(--gutter)}
.vp-other .grid{
  max-width:var(--max);margin:48px auto 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.vp-other a{
  display:block;padding:48px 40px;
  border:1px solid var(--line-soft);background:#fff;
  transition:border-color .35s,transform .35s;
  text-decoration:none;color:inherit;
}
.vp-other a:hover{border-color:var(--ink);transform:translateY(-3px)}
.vp-other .mark{
  font-family:var(--serif-en);font-style:italic;
  font-size:40px;color:var(--teal);opacity:.7;
  line-height:1;margin-bottom:14px;
}
.vp-other .q{
  font-family:var(--serif-jp);font-size:17px;line-height:1.95;letter-spacing:.06em;
  color:var(--ink);margin-bottom:18px;text-wrap:balance;
}
.vp-other .attr{
  font-family:var(--serif-jp);font-size:12px;letter-spacing:.08em;color:var(--mute);
}

/* ---- PROJECT DATA（しんちゃん設計の構造化ブロック）
   interview_body 内に section.voice-project-data として埋め込む */
.voice-project-data{
  max-width:720px;
  margin:80px auto;
  padding:60px 40px;
  background:rgba(0,0,0,0.02);
  border:1px solid rgba(0,0,0,0.08);
}
.voice-project-data__title{
  font-size:12px;
  letter-spacing:.3em;
  font-weight:400;
  color:rgba(0,0,0,.55);
  margin-bottom:40px;
  text-align:left;
}
.voice-project-data__list{margin:0 0 40px;padding:0}
.voice-project-data__row{
  display:grid;
  grid-template-columns:120px 1fr;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  align-items:baseline;
}
.voice-project-data__row dt{
  font-size:13px;color:rgba(0,0,0,.55);letter-spacing:.1em;
}
.voice-project-data__row dd{
  margin:0;font-size:15px;color:rgba(0,0,0,.85);letter-spacing:.05em;
}
.voice-project-data__block{margin-top:32px}
.voice-project-data__block h4{
  font-size:13px;color:rgba(0,0,0,.55);letter-spacing:.1em;
  font-weight:400;margin-bottom:12px;
}
.voice-project-data__block p{
  font-size:15px;line-height:2.0;color:rgba(0,0,0,.85);
  letter-spacing:.05em;margin:0;
}
.voice-project-data__concept{
  margin-top:40px;padding-top:32px;
  border-top:1px solid rgba(0,0,0,.15);
}
.voice-project-data__concept h4{
  font-size:12px;letter-spacing:.3em;color:rgba(0,0,0,.55);
  font-weight:400;margin-bottom:16px;
}
.voice-project-data__concept p{
  font-size:17px;line-height:1.9;color:rgba(0,0,0,.85);
  letter-spacing:.08em;margin:0;
}
@media (max-width: 768px){
  .voice-project-data{padding:40px 24px;margin:60px 16px}
  .voice-project-data__row{grid-template-columns:90px 1fr;padding:12px 0}
  .voice-project-data__row dt{font-size:12px}
  .voice-project-data__row dd,
  .voice-project-data__block p{font-size:14px}
}

/* ---- vp-info セクション内の voice-project-data（M様事例で使用）：
   奈良案件の interview_body 内カード版とは別スタイルでフル幅・大きめ */
.vp-info .voice-project-data__list{
  margin:48px 0 0;padding:0;max-width:880px;
}
.vp-info .voice-project-data__row{
  display:grid;grid-template-columns:200px 1fr;
  padding:18px 0;border-bottom:1px solid rgba(0,0,0,.1);
  align-items:baseline;
}
.vp-info .voice-project-data__row dt{
  font-size:13px;letter-spacing:.3em;color:rgba(0,0,0,.55);
  text-transform:uppercase;font-weight:400;
}
.vp-info .voice-project-data__row dd{
  margin:0;font-size:16px;color:rgba(0,0,0,.85);letter-spacing:.05em;
}
.vp-info .voice-project-data__block{
  margin-top:48px;max-width:880px;
}
.vp-info .voice-project-data__block h4{
  font-size:13px;letter-spacing:.3em;color:rgba(0,0,0,.55);
  text-transform:uppercase;font-weight:400;margin-bottom:16px;
}
.vp-info .voice-project-data__block p{
  font-size:16px;line-height:2.0;color:rgba(0,0,0,.85);
  letter-spacing:.05em;margin:0;
}
.vp-info .voice-project-data__concept{
  margin-top:64px;padding-top:40px;
  border-top:1px solid rgba(0,0,0,.15);max-width:880px;
}
.vp-info .voice-project-data__concept h4{
  font-size:12px;letter-spacing:.4em;color:rgba(0,0,0,.55);
  text-transform:uppercase;font-weight:400;margin-bottom:20px;
}
.vp-info .voice-project-data__concept p{
  font-size:19px;line-height:1.9;color:rgba(0,0,0,.85);
  letter-spacing:.08em;margin:0;
}
@media (max-width: 768px){
  .vp-info .voice-project-data__row{grid-template-columns:110px 1fr;padding:14px 0}
  .vp-info .voice-project-data__row dt{font-size:11px;letter-spacing:.2em}
  .vp-info .voice-project-data__row dd,
  .vp-info .voice-project-data__block p{font-size:14px}
  .vp-info .voice-project-data__concept p{font-size:16px}
}

/* ================================================================
   NEWS — Archive（archive-news.php）
   design-source/news.html インライン から移植
================================================================ */
.news-page{padding:120px var(--gutter)}
.news-page .wrap{max-width:var(--max);margin:0 auto}
/* お知らせ一覧：デザイン見本(Agnos_お知らせ_News.html .news-row)のCSSに完全一致（.npage-* へマッピング） */
.news-page-list{border-top:1px solid var(--line)}
.npage-row{
  display:grid;
  grid-template-columns:260px 1fr 40px;
  gap:48px;align-items:start;
  padding:46px 6px;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
  transition:background .4s;
}
.npage-row:hover{background:var(--bg-warm)}
.npage-meta{display:flex;flex-direction:column;gap:18px;padding-top:5px}
.npage-meta .date{
  font-family:var(--serif-en);font-style:italic;font-weight:400;
  font-size:18px;letter-spacing:.16em;color:var(--mute);
}
.npage-meta .cat{
  align-self:flex-start;
  font-family:var(--sans-jp);font-weight:400;
  font-size:11px;letter-spacing:.16em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:6px;
  padding:6px 15px;line-height:1;white-space:nowrap;
  transition:border-color .4s,color .4s;
}
.npage-row:hover .npage-meta .cat{border-color:var(--teal);color:var(--ink-2)}
.npage-body{min-width:0}
.npage-body .title{
  font-family:var(--serif-jp);font-weight:400;
  font-size:clamp(19px,1.9vw,24px);line-height:1.62;letter-spacing:.04em;
  color:var(--ink);text-wrap:balance;
  display:inline;padding-bottom:3px;
  background-image:linear-gradient(var(--teal),var(--teal));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  transition:background-size .5s cubic-bezier(.2,.8,.2,1);
}
.npage-row:hover .npage-body .title{background-size:100% 1.5px}
.npage-body .excerpt{
  display:block;margin-top:16px;max-width:62ch;
  font-family:var(--sans-jp);font-weight:300;
  font-size:13.5px;line-height:2;letter-spacing:.03em;color:var(--ink-3);
}
.npage-row .arrow{
  place-self:center end;
  font-family:var(--serif-en);font-size:20px;color:var(--line);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),color .4s;
}
.npage-row:hover .arrow{transform:translateX(8px);color:var(--ink-2)}

/* ================================================================
   NEWS / SKETCH / WORK — Single（最小レイアウト）
================================================================ */
.single-body{padding:80px var(--gutter) 120px;background:#fff}
.single-body .wrap{max-width:740px;margin:0 auto}
.single-body p{color:var(--ink-2);font-size:15px;line-height:2.2;margin-bottom:1.4em}
.single-body h2{
  font-family:var(--serif-jp);font-weight:400;
  font-size:24px;letter-spacing:.08em;line-height:1.6;
  margin:48px 0 20px;
}
.single-body h3{
  font-family:var(--serif-jp);font-weight:400;
  font-size:18px;letter-spacing:.06em;line-height:1.6;
  margin:36px 0 16px;
}
.single-body img{margin:24px 0}
/* news 個別本文の内部リンク（八尾詳細リンク等）に控えめホバー（news限定スコープ） */
body.single-news .single-body .wrap a{
  color:var(--ink);text-decoration:none;
  background-image:linear-gradient(#63E1E5,#63E1E5);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  padding-bottom:2px;transition:background-size .3s ease;
}
body.single-news .single-body .wrap a:hover{background-size:100% 1px}

.single-meta{
  max-width:740px;margin:0 auto 24px;
  display:flex;gap:24px;align-items:center;
  font-family:var(--serif-en);font-size:11px;letter-spacing:.3em;
  color:var(--mute);text-transform:uppercase;
}
.single-meta .cat{
  border:1px solid var(--line);padding:5px 12px;color:var(--ink-3);
}

/* ================================================================
   SKETCH — Archive（archive-sketch.php）
================================================================ */
.sketch-list{padding:80px var(--gutter) 120px}
.sketch-list .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;
}
.skcard{display:block;text-decoration:none;color:inherit}
.skcard .ph,
.skcard .img{
  aspect-ratio:4/3;margin-bottom:20px;
  overflow:hidden;background:var(--bg-sub);
  position:relative;
}
.skcard .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.skcard:hover .img img{transform:scale(1.04)}
.skcard .meta{
  font-family:var(--serif-en);font-size:10.5px;letter-spacing:.3em;
  color:var(--mute);text-transform:uppercase;margin-bottom:12px;
}
.skcard h3{
  font-family:var(--serif-jp);font-weight:400;
  font-size:18px;line-height:1.6;letter-spacing:.05em;
  color:var(--ink);margin-bottom:8px;text-wrap:balance;
}
.skcard p{font-size:13px;line-height:1.95;color:var(--ink-3)}

/* ================================================================
   ABOUT — Editorial Split Hero
   2026-05-27 Claude Design ハンドオフ design_handoff_about_hero 仕様で全面再実装
   ・left  : eyebrow + display title + lede（垂直中央）+ 左上絶対配置パンくず
   ・right : フルブリード写真 + 暗グラデオーバーレイ + 白文字 JP 引用
================================================================ */
.about-hero{
  position:relative;
  padding-top: var(--header-h);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line-soft);
}
.about-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 507px;
}

/* ---- LEFT: type column ---- */
.about-hero-left{
  padding: 56px 64px 52px 72px;
  display:flex; flex-direction:column; justify-content:center;
  gap: 28px;
  position:relative;
}
.about-hero-crumbs{
  position:absolute; top:32px; left:72px; right:64px;
  display:flex; align-items:center; gap:18px;
  font-family: var(--serif-en); font-size:11px;
  letter-spacing:.36em; text-transform:uppercase;
  color: var(--mute);
}
.about-hero-crumbs a,
.about-hero-crumbs span{color:inherit; text-decoration:none}
.about-hero-crumbs a{transition:color .3s}
.about-hero-crumbs a:hover{color:var(--ink)}
.about-hero-crumbs .home{font-style:italic}
.about-hero-crumbs .sep{opacity:.4}
.about-hero-crumbs .jp{font-style:italic; letter-spacing:.24em}

.about-hero-eyebrow{
  display:flex; align-items:center; gap:20px;
  color: var(--mute);
}
.about-hero-eyebrow .rule{width:48px; height:1px; background:currentColor; opacity:.6}
.about-hero-eyebrow .label{
  font-family: var(--serif-en); font-style:italic; font-weight:400;
  font-size: 13px; letter-spacing:.34em; text-transform:uppercase;
}

.about-hero-h1{
  margin:0;
  font-family: var(--serif-en); font-weight:400;
  font-size: 78px; line-height: 1; letter-spacing: .005em;
  color: var(--ink);
  white-space:nowrap;
}
.about-hero-h1 .it{font-style:italic; font-weight:400}

.about-hero-lede{
  margin: 0;
  font-family: var(--serif-jp); font-weight:300;
  font-size: 14px; line-height: 2; letter-spacing:.08em;
  color: var(--ink-3);
  max-width: 42ch;
}

/* ---- RIGHT: image + quote overlay ---- */
.about-hero-right{position:relative; overflow:hidden}
.about-hero-right img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.72) contrast(1.03) saturate(.94);
}
.about-hero-right::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,20,18,.12) 0%, rgba(20,20,18,.42) 100%);
  pointer-events:none;
}
.about-hero-quote{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 0 56px 56px;
  color:#fff;
}
/* 上段：英文キッカー */
.about-hero-quote .kicker{
  display:flex; align-items:center; gap:14px;
  margin-bottom: 22px;
  font-family: var(--serif-en); font-style:italic; font-weight:400;
  font-size: 11px; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.about-hero-quote .kicker .rule{
  width:36px; height:1px; background:currentColor; opacity:.7;
}
/* 中央：和文キャッチ（主役） */
.about-hero-quote .catch{
  margin:0;
  font-family: var(--serif-jp); font-weight:300;
  font-size: 46px; line-height: 1.45; letter-spacing: .18em;
  color:#fff;
}
.about-hero-quote .catch .em{
  display:inline-block; margin-left: 1.4em;
}
/* 下段：英文サブライン + 罫線 */
.about-hero-quote .sub{
  margin-top: 20px;
  display:flex; align-items:center; gap:14px;
  font-family: var(--serif-en); font-style:italic; font-weight:300;
  font-size: 11px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.about-hero-quote .sub .rule{
  flex:1; height:1px; background:currentColor; opacity:.45;
}

/* ---- Responsive: stack at ≤880px ---- */
@media (max-width: 880px){
  .about-hero-grid{grid-template-columns:1fr; min-height:0}
  .about-hero-left{padding: 72px 22px 36px; gap:20px}
  .about-hero-crumbs{position:static; left:auto; right:auto; top:auto}
  .about-hero-h1{font-size: 52px; white-space:normal}
  .about-hero-right{aspect-ratio:16/9}
  .about-hero-quote{padding: 28px 22px 28px}
  .about-hero-quote .catch{font-size: 30px}
  .about-hero-quote .catch .em{margin-left: 1em}
}

/* ================================================================
   ABOUT — Credits / 独立スクロールコンテナ式（page-about.php）
   セクション自体は 100vh の枠で固定。中で写真は absolute で画面全体に展開、
   記事だけが overflow-y:auto の独立スクロールコンテナで自動スクロール。
   window.scroll は触らず、記事内部の scrollTop を linear で動かす。
================================================================ */
.about-credits{
  position:relative;
  height:100vh;                     /* セクションは 1 viewport だけ占有 */
  background:var(--bg-dark);
  color:rgba(255,255,255,.94);
  isolation:isolate;
  overflow:hidden;
}

.about-stage{
  position:relative;
  width:100%;
  height:100%;
}

/* ---- 写真：absolute で画面全体に固定表示 ---- */
.about-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.about-bg img{
  width:100%;height:100%;
  object-fit:cover;
  /* 2026-05-17 写真を少し下にシフト：手元が中途半端にクロップされて
     「ポケットに手を入れてる」風に見えた問題への調整。Y=30% で頭上スペースを
     優先表示し、フレーム下端の手元クロップを目立たせない */
  object-position:center 30%;
  display:block;
}

/* ---- 控えめな暗グラデ：右側ほど暗くして記事の可読性を底上げ ---- */
.about-bg-gradient{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,0.4) 100%);
}

/* ---- 代表者表記：画面下端から 40px、横位置は左から 12vw（caption 全体を黒スーツ上に） ---- */
.about-rep-caption{
  position:absolute;
  left:12vw;
  bottom:40px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#FAFAFA;
  text-shadow:0 1px 3px rgba(0,0,0,0.65), 0 0 14px rgba(0,0,0,0.5);
  letter-spacing:.12em;
  font-family:var(--serif-jp);
  font-weight:300;
}
.about-rep-caption .rep-company{font-size:14px;letter-spacing:.18em}
.about-rep-caption .rep-name{font-size:16px;letter-spacing:.16em}
.about-rep-caption .rep-en{
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-size:16px;
  letter-spacing:.06em;
  margin-right:2px;
}

/* ---- 記事：右側 36vw の独立スクロールコンテナ（内部だけ動く） ---- */
.about-credits-content{
  position:absolute;
  top:0;
  right:0;
  z-index:3;
  width:36vw;
  height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;       /* スクロールチェーンを止め、ページに伝播させない */
  padding:50vh 4vw 50vh 0;            /* 上下 50vh：読み始め/終わりを中央寄せ */
  color:#FAFAFA;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  /* スクロールバーは控えめに常時表示（進捗インジケータ） */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.about-credits-content::-webkit-scrollbar{width:6px}
.about-credits-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35);
  border-radius:3px;
}
.about-credits-content::-webkit-scrollbar-track{background:transparent}

.credits-section{
  padding:88px 0;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.credits-section:first-child{padding-top:0}
.credits-section:last-child{border-bottom:0}

.credits-label{
  display:block;
  font-family:'Cormorant Garamond', var(--serif-jp), serif;
  font-style:italic;
  font-size:16px;
  letter-spacing:.18em;
  color:#E8E8E8;                      /* 細字も #E5E5E5 以上の明度 */
  margin-bottom:36px;
  font-weight:400;
}

/* ---- 冒頭ブロック ---- */
.credits-intro{text-align:center}
.credits-lead{
  font-family:var(--serif-jp);
  font-weight:300;
  font-size:clamp(20px,2.2vw,26px);
  line-height:2.2;
  letter-spacing:.08em;
  color:#FAFAFA;
  text-wrap:balance;
}

/* ---- 5本柱（Agnos ロゴ流：頭文字だけティール、残りはグレー） ---- */
.credits-name{
  display:block;
  font-family:var(--serif-en);
  font-weight:400;
  font-size:clamp(32px,3.6vw,46px);
  line-height:1.2;
  letter-spacing:.04em;
  color:#AEAFB3;
  margin:0 0 14px;
}
.credits-name::first-letter{
  color:var(--teal);
}
.credits-pillar .credits-label{
  margin-bottom:48px;
}

/* ---- 本文 ---- */
.credits-text p{
  font-family:var(--serif-jp);
  font-weight:300;
  font-size:15.5px;
  line-height:2.5;
  letter-spacing:.06em;
  color:#FAFAFA;
  margin-bottom:1.6em;
  text-wrap:pretty;
}
.credits-text p:last-child{margin-bottom:0}

/* ---- 締めブロック ---- */
.credits-closing{text-align:center}
.credits-closing .credits-text p{
  font-size:16px;
  letter-spacing:.08em;
  color:#FAFAFA;
  margin-bottom:0.6em;
}
.credits-end-logo{
  margin-top:96px;
  text-align:center;
}
.credits-end-logo .logo{display:inline-block}

/* ---- 代表経歴（気になる人だけが読む、控えめな表示）
   margin-bottom: calc(40px - 50vh) で、スクロール最下端時に bio の最終行 bottom が
   署名 .about-rep-caption の bottom:40px と同じ y 座標で揃う。
   （container の padding-bottom:50vh が中央停止位置、+40px - 50vh で署名ライン到達） */
.about-bio{
  max-width:480px;
  margin:60px auto calc(40px - 65vh);
  font-size:13px;
  line-height:2.2;
  letter-spacing:.05em;
  color:#FAFAFA;
  font-weight:300;
  text-align:left;
}
.about-bio p{
  margin-bottom:1.4em;
}
.about-bio p:last-child{
  margin-bottom:0;
  /* 2026-05-17 末尾文字の bottom を、署名 .about-rep-caption の bottom:40px と
     同じ y 座標で揃える。 p 自身に padding-bottom を持たせることで、 Chrome の
     overflow:auto + scrollHeight バグの影響を受けず確実に効く。 */
  padding-bottom:40px;
}
@media (max-width: 768px){
  .about-bio{
    max-width:100%;
    font-size:12px;
    margin:40px 0 30px;
    padding:0 20px;
  }
}

/* ================================================================
   CONTACT — Channels & Form（page-contact.php）
   design-source/contact.html インライン から移植
================================================================ */
.contact-channels{padding:120px var(--gutter)}
.contact-channels .grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.cc{
  display:flex;flex-direction:column;gap:20px;
  padding:56px 36px;
  border:1px solid var(--line);background:#fff;
  text-decoration:none;color:inherit;
  transition:border-color .35s, transform .35s;
}
.cc:hover{border-color:var(--ink);transform:translateY(-3px)}
.cc .label{
  font-family:var(--serif-en);font-style:italic;
  font-size:11px;letter-spacing:.36em;color:var(--mute);
}
.cc .title{
  font-family:var(--serif-jp);font-weight:400;
  font-size:20px;letter-spacing:.08em;color:var(--ink);
  line-height:1.5;text-wrap:balance;
  transition:color .35s ease;
}
/* カードホバー時：メインフレーズをダークミントに（services / TOC と統一） */
.cc:hover .title{color:var(--teal)}
.cc .desc{
  color:var(--ink-3);font-size:12.5px;line-height:1.95;
  flex:1;
}
.cc .arrow-row{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid var(--line-soft);
  font-family:var(--serif-en);font-size:11px;letter-spacing:.3em;
  color:var(--ink);
}
.cc .arrow{display:inline-block;width:32px;height:1px;background:currentColor}

.contact-form{padding:120px var(--gutter);background:var(--bg-warm)}
.contact-form .wrap{max-width:780px;margin:0 auto}
.cf-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
  margin-top:48px;
}
.cf-grid .full{grid-column:1/-1}
/* eyebrow ラベル（直接子のみに限定 ── .cf-radio など孫 label に効かないように） */
.cf-field > label{
  display:block;
  font-family:var(--serif-en);font-style:italic;
  font-size:11px;letter-spacing:.24em;color:var(--mute);
  margin-bottom:12px;text-transform:uppercase;
}
.cf-field > label .req{color:var(--teal-deep);margin-left:8px}
.cf-field input,
.cf-field textarea,
.cf-field select{
  width:100%;
  background:transparent;border:0;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-family:var(--sans-jp);font-size:14px;color:var(--ink);
  letter-spacing:.04em;
  transition:border-color .3s;
  border-radius:0;
}
.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus{
  outline:0;
  border-bottom-color:var(--ink);
}
.cf-field textarea{min-height:140px;resize:vertical}
.cf-submit{margin-top:48px;text-align:center}
.cf-submit .btn{cursor:pointer}
.cf-note{
  margin-top:24px;font-size:12px;color:var(--mute);
  text-align:center;letter-spacing:.06em;
}

/* honeypot：bot対策、視覚ユーザーには見えない */
.cf-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ラジオボタン群（Agnosトーン：細線・余白・凛） */
.cf-radios{
  display:flex;flex-wrap:wrap;
  gap:20px 56px;            /* 縦20px / 横56px ── 凛とした余白 */
  padding:22px 0 18px;
  border-bottom:1px solid var(--line);
}
.cf-radio{
  display:inline-flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  font-size:14px;
  color:var(--mute);                /* 未選択：薄く */
  letter-spacing:.04em;
  line-height:1;
  height:16px;                      /* container を input と同じ高さに固定 → flex center 一致 */
  transition:color .25s;
  user-select:none;
}
.cf-radio:hover{color:var(--ink-2)}                       /* hover：少し濃く */
.cf-radio:has(input[type="radio"]:checked){color:var(--ink)}  /* 選択中：完全に濃く */

.cf-radio input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:16px;height:16px;
  min-width:16px;min-height:16px;
  flex:0 0 16px;
  aspect-ratio:1 / 1;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:border-color .25s;
  margin:0;padding:0;
  box-sizing:border-box;
}
.cf-radio input[type="radio"]:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:2px;
}
.cf-radio input[type="radio"]:checked{
  border-color:var(--ink);
}
.cf-radio input[type="radio"]:checked::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ink);
}

/* 送信成功 / エラーメッセージ */
.cf-alert{
  padding:24px 28px;
  margin-bottom:32px;
  border:1px solid var(--line);background:#fff;
  font-size:14px;line-height:1.8;color:var(--ink-2);
}
.cf-alert.success{
  border-color:var(--teal-deep);
  background:rgba(99,225,229,.06);
}
.cf-alert.error{
  border-color:#c25555;
  background:rgba(194,85,85,.05);
  color:#9a3a3a;
}

/* ================================================================
   MOBILE (≤880px)
================================================================ */
@media (max-width: 880px){
  .page-hero{padding: calc(var(--header-h) + 48px) 22px 56px}
  .page-hero-inner{grid-template-columns:1fr; gap:32px}
  .page-hero .lede{max-width:none}

  .sub-section{padding:72px 22px}
  .subcta{padding:72px 22px}
  .sub-head{grid-template-columns:1fr; gap:14px}

  /* Properties Archive */
  .prop-list{padding:72px 22px}
  .prop-list .grid{gap:48px}
  .pcard,.pcard:nth-child(even){grid-template-columns:1fr;gap:24px}
  .pcard:nth-child(even) .pcard-photo{order:0}

  /* Properties Single */
  .prop-firstview{padding:24px 22px 0}
  .prop-firstview-image{aspect-ratio:4/3}
  .prop-firstview-copy{margin-top:32px}
  .prop-summary{padding:72px 22px}
  .prop-summary .grid{grid-template-columns:1fr;gap:36px}
  .prop-story h2{margin:48px 0 20px;font-size:22px}
  .prop-story h3{margin:36px 0 12px;font-size:16px}
  .prop-swiper{margin:32px 0 40px}
  .prop-swiper .swiper-slide{aspect-ratio:1/1}
  .prop-spec{padding:72px 22px}
  .spec-table{grid-template-columns:1fr;gap:0}
  .spec-table dl{grid-template-columns:120px 1fr;padding:16px 0}
  .prop-floor{padding:72px 22px}
  .prop-loc{padding:72px 22px}
  .prop-loc .grid{grid-template-columns:1fr;gap:32px}

  /* Works Archive */
  .works-grid-page{padding:48px 22px 72px}
  .works-grid-page .grid{grid-template-columns:1fr 1fr;gap:32px 14px}

  /* Voice Archive */
  .voice-list{padding:72px 22px}
  .voice-list .grid{gap:48px}
  .vlist-card,.vlist-card:nth-child(even){grid-template-columns:1fr;gap:24px;padding-bottom:48px}
  .vlist-card:nth-child(even) .vlist-photos{order:0}

  /* Voice Single */
  .vp-ba{padding:36px 22px 0}
  .vp-ba .grid{grid-template-columns:1fr;gap:14px}
  .vp-quote{padding:72px 22px}
  .vp-body{padding:72px 22px}
  .vp-info{padding:64px 22px}
  .vp-info-table{grid-template-columns:1fr}
  .vp-info-table dl{grid-template-columns:120px 1fr;padding:14px 0}
  .vp-other{padding:72px 22px}
  .vp-other .grid{grid-template-columns:1fr;gap:14px}

  /* News Archive（見本 @media(max-width:880px) 相当） */
  .news-page{padding:72px 22px}
  .npage-row{grid-template-columns:1fr;gap:18px;padding:34px 2px}
  .npage-meta{flex-direction:row;align-items:center;gap:16px;padding-top:0}
  .npage-meta .date{font-size:16px}
  .npage-body .excerpt{margin-top:12px}
  .npage-row .arrow{display:none}

  /* Sketch Archive */
  .sketch-list{padding:48px 22px 72px}
  .sketch-list .grid{grid-template-columns:1fr 1fr;gap:32px 14px}

  /* Single body */
  .single-body{padding:48px 22px 72px}

  /* Contact */
  .contact-channels{padding:72px 22px}
  .contact-channels .grid{grid-template-columns:1fr;gap:14px}
  .contact-form{padding:72px 22px}
  .cf-grid{grid-template-columns:1fr;gap:24px}

  /* About Credits（モバイル：縦積み。写真を上部にしっかり表示→その下に署名→5本柱を静的に縦読み。
     PC版の絶対配置＋エンドロール演出は解除し、通常フローに落とす。DOM順=写真→署名→記事なので
     static 化するだけで自然に縦積みになる。エンドロール自動スクロールは main.js 側でスマホ省略。） */
  .about-credits{
    height:auto; overflow:visible;
    /* ★署名オーバーレイの微調整ノブ（写真右の空白に置く署名の位置・幅・色）*/
    --rep-top:41vh;       /* 縦位置：写真(51vh)上端からの距離。下端寄り＝写真の下の方。大きくすると下へ */
    --rep-right:6%;       /* 横位置：右端からの距離。大きくすると左へ */
    --rep-width:50%;      /* 署名ブロックの幅（右の空白に収める）*/
    --rep-color:#FAFAFA;  /* 文字色：白（濃い影でグレー壁でも読める。見やすさ優先で白採用） */
    --photo-crop:110%;    /* 写真の拡大率。100%超で下端(手元/ポケット)をクリップ＝下端を切り上げ。大きくするほど多く切る */
  }
  .about-stage{height:auto; display:block; position:relative}  /* 署名absoluteの基準 */

  /* 写真：背景敷きをやめて上部のブロックに。顔が見える高さ＆位置で表示。
     ★object-position は「横位置 縦位置」。横=10%（人物が左寄りの横構図なので左へ寄せて枠中央に＝右余白のスカスカ感を解消）、
       縦=20%（頭が切れないよう上寄り）。実機で微調整する場合はこの1行の数値を変えるだけ。 */
  .about-bg{position:relative; inset:auto; height:51vh; z-index:auto; overflow:hidden}  /* 写真の高さ。54→51vhへ約1行ぶん切り上げ。overflow:hidden で拡大時の下端をクリップ */
  /* height:--photo-crop(110%) で画像を少し拡大→上端(顔)を残し下端(手元/ポケット)をはみ出させて overflow でクリップ */
  .about-bg img{height:var(--photo-crop); object-position:10% 20%}
  .about-bg-gradient{display:none}

  /* 署名：写真右側の空白(グレー壁)にオーバーレイ。人物は左なので右に置いて左右バランスを取る。
     位置・幅・色は .about-credits の --rep-* 変数で微調整可（top=vhで写真高さ基準）。 */
  .about-rep-caption{
    position:absolute; top:var(--rep-top); right:var(--rep-right);
    left:auto; bottom:auto; z-index:2;
    width:var(--rep-width); padding:0;
    align-items:flex-end; text-align:right; gap:4px;
    color:var(--rep-color);
    text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(0,0,0,0.35);  /* 白文字を明るい壁で読ませる濃い影 */
  }
  .about-rep-caption .rep-company{font-size:12px}
  .about-rep-caption .rep-name{font-size:14px}
  .about-rep-caption .rep-en{font-size:14px}

  /* 記事：内部スクロールをやめ通常フロー全幅。5本柱が縦に読める */
  .about-credits-content{
    position:static; width:100%; height:auto; overflow:visible;
    padding:8px var(--gutter-mobile) 64px;
    text-shadow:0 1px 3px rgba(0,0,0,0.55);
  }
  .credits-section{padding:48px 0}
  .credits-section:first-child{padding-top:32px}
  .credits-name{font-size:28px}
  .credits-text p{font-size:15px;line-height:2.3}
  .credits-end-logo{margin-top:56px}
  .about-bio{margin:40px auto 0; max-width:100%; padding:0}
}

/* =================================================================
   STATUS — /status/ ページ
   2026-05-23 受注状況開示システム Phase 1
   参照: ai-review/status.html
   「肉声のミニマル」。バッジも信号機もない。
   定義リストの呼吸だけで、いまの状況を、淡々と。
================================================================= */

/* ---------- HERO 局所調整 ---------- */
.page-hero.st-hero{
  padding: calc(var(--header-h) + 104px) var(--gutter) 104px;
  background:var(--bg-warm);
}
.page-hero.st-hero .page-hero-inner{
  grid-template-columns:1.2fr 1fr; gap:80px; align-items:end;
}
.page-hero.st-hero h1{
  font-size:clamp(34px,4.4vw,54px);
  letter-spacing:.08em;
  line-height:1.5;
}
.page-hero.st-hero h1 .accent{
  background:linear-gradient(transparent 70%, rgba(99,225,229,.38) 70%);
  padding:0 .06em;
}
.page-hero.st-hero .lede{
  color:rgba(0,0,0,.74);
  font-size:14.5px;
  line-height:2.2;
  letter-spacing:.05em;
  max-width:38ch;
  text-wrap:pretty;
}
.st-hero-marker{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:56px;padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-family:var(--serif-en);font-style:italic;font-size:11.5px;
  letter-spacing:.32em;color:var(--mute);text-transform:uppercase;
}
.st-hero-marker .right{font-style:normal;letter-spacing:.18em;color:var(--ink-3)}
.st-hero-marker .breath{
  display:inline-flex;align-items:center;gap:14px;
}
.st-hero-marker .breath::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  animation:st-breath 4.2s ease-in-out infinite;
}
@keyframes st-breath{
  0%,100%{opacity:.35;transform:scale(.78)}
  50%{opacity:.95;transform:scale(1)}
}

/* ---------- HERO 写真背景版（.has-photo モディファイア・2026-05-23 追加） ----------
   背景 image-url + 黒オーバーレイは page-status.php の style 属性で個別指定。
   ここでは「写真の上に乗る場合の配色・サイズ」だけ定義し、配色は白系へ反転。
   HEROほどは主張せず、min-height 480px で控えめに。
*/
.page-hero.st-hero.has-photo{
  background-color: #1a1a17;          /* fallback */
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  min-height:480px;                   /* PC 控えめ */
  display:flex;
  align-items:flex-end;               /* テキストは下寄せ */
  padding: calc(var(--header-h) + 80px) var(--gutter) 80px;
  color:#fff;
  overflow:hidden;
}
.page-hero.st-hero.has-photo .page-hero-inner{ width:100%; }

/* 白系配色オーバーライド */
.page-hero.st-hero.has-photo .crumbs,
.page-hero.st-hero.has-photo .crumbs a{
  color: rgba(255,255,255,.70);
}
.page-hero.st-hero.has-photo .crumbs a:hover{ color:#fff; }
.page-hero.st-hero.has-photo .crumbs .sep{ color: rgba(255,255,255,.40); }

.page-hero.st-hero.has-photo .eyebrow{
  color: rgba(255,255,255,.80);
}
.page-hero.st-hero.has-photo h1{
  color:#fff;
  text-shadow: 0 1px 24px rgba(0,0,0,.25);  /* 控えめな視認性保険 */
}
.page-hero.st-hero.has-photo h1 .accent{
  /* 写真背景上では accent 下線を濃く（.38 → .55） */
  background: linear-gradient(transparent 70%, rgba(99,225,229,.55) 70%);
}
.page-hero.st-hero.has-photo h1 .en{
  color: rgba(255,255,255,.72);
}
.page-hero.st-hero.has-photo .lede{
  color: rgba(255,255,255,.85);
}
.page-hero.st-hero.has-photo .st-hero-marker{
  border-top-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.70);
}
.page-hero.st-hero.has-photo .st-hero-marker .right{
  color: rgba(255,255,255,.85);
}

/* =================================================================
   MAIN — 状況リスト
================================================================= */
.st-main{
  padding:140px var(--gutter) 96px;
  background:var(--bg);
}
.st-wrap{ max-width:880px; margin:0 auto; }

.st-prelude{
  font-family:var(--serif-jp);
  font-weight:400;
  font-size:clamp(20px,2.4vw,28px);
  line-height:2;
  letter-spacing:.08em;
  color:var(--ink);
  text-wrap:balance;
  margin-bottom:96px;
}
.st-prelude .small{
  display:block;
  margin-top:24px;
  font-size:13.5px;
  line-height:2.1;
  letter-spacing:.05em;
  color:var(--ink-3);
  text-wrap:pretty;
}

/* ---- 個々のステータス行 ---- */
.st-list{ display:flex; flex-direction:column; }
.st-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px 56px;
  align-items:baseline;
  padding:56px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.st-row:last-child{border-bottom:1px solid rgba(0,0,0,.08)}

.st-row-meta{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:120px;
  padding-top:8px;
}
.st-row-num{
  font-family:var(--serif-en);font-style:italic;
  font-size:13px;letter-spacing:.32em;
  color:var(--mute);
  text-transform:uppercase;
  line-height:1;
}
.st-row-en{
  font-family:var(--serif-en);font-style:italic;
  font-size:13px;letter-spacing:.22em;
  color:var(--teal-deep);
  line-height:1.4;
}

.st-row-body{ min-width:0; }
.st-row-label{
  font-family:var(--serif-jp);
  font-weight:400;
  font-size:14px;
  letter-spacing:.18em;
  color:var(--ink-3);
  margin-bottom:18px;
}
.st-row-value{
  font-family:var(--serif-jp);
  font-weight:400;
  font-size:clamp(28px,3.6vw,42px);
  letter-spacing:.06em;
  line-height:1.55;
  color:var(--ink);
  text-wrap:balance;
}
.st-row-value .underscore{
  background:linear-gradient(transparent 72%, rgba(99,225,229,.36) 72%);
  padding:0 .08em;
}
.st-row-aside{
  margin-top:16px;
  font-family:var(--serif-jp);
  font-size:13px;
  line-height:2;
  color:var(--ink-3);
  letter-spacing:.05em;
  max-width:46ch;
}

/* ---- 補足メモ ---- */
.st-memo{
  margin-top:64px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 40px;
  padding:36px 40px;
  background:var(--bg-warm);
  border:1px solid var(--line-soft);
}
.st-memo-pre{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;letter-spacing:.28em;
  color:var(--teal-deep);
  text-transform:uppercase;
  padding-top:4px;
}
.st-memo p{
  font-family:var(--serif-jp);
  font-size:14px;
  line-height:2.1;
  color:var(--ink-2);
  letter-spacing:.05em;
  text-wrap:pretty;
}
.st-memo p + p{margin-top:.9em}

/* ---- 最終更新 ---- */
.st-updated{
  margin-top:72px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
}
.st-updated .lbl{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;letter-spacing:.32em;
  color:var(--mute);
  text-transform:uppercase;
}
.st-updated .val{
  font-family:var(--serif-jp);
  font-size:13.5px;
  letter-spacing:.08em;
  color:var(--ink-2);
}
.st-updated .cycle{
  font-family:var(--serif-jp);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mute);
}

/* ---- 行動導線 ---- */
.st-actions{
  margin-top:96px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.st-actions .btn-fill{padding:22px 44px}
.st-actions .btn{padding:22px 36px}

/* ---- 小さなフッターノート ---- */
.st-footnote{
  margin-top:80px;
  padding-top:48px;
  border-top:1px solid rgba(0,0,0,.06);
  font-family:var(--serif-jp);
  font-size:12.5px;
  line-height:2;
  color:var(--mute);
  letter-spacing:.04em;
  text-align:center;
  text-wrap:balance;
}
.st-footnote .seal{
  display:block;
  margin-bottom:14px;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:13px;
  letter-spacing:.22em;
  color:var(--mute);
}

/* ---- レスポンシブ ---- */
@media (max-width: 880px){
  .page-hero.st-hero{padding: calc(var(--header-h) + 48px) 22px 56px}
  .page-hero.st-hero .page-hero-inner{grid-template-columns:1fr;gap:28px}
  .page-hero.st-hero .lede{max-width:none}
  .st-hero-marker{flex-direction:column;align-items:flex-start;gap:10px}

  /* 写真背景版モバイル：高さを 320px に圧縮、padding 調整 */
  .page-hero.st-hero.has-photo{
    min-height:320px;
    padding: calc(var(--header-h) + 40px) 22px 44px;
  }
  .page-hero.st-hero.has-photo h1{
    font-size:clamp(24px,7vw,32px);
  }

  .st-main{padding:72px 22px 64px}
  .st-prelude{font-size:18px;line-height:2;margin-bottom:56px}
  .st-prelude .small{font-size:13px;margin-top:18px}

  .st-row{
    grid-template-columns:1fr;
    gap:18px;
    padding:40px 0;
  }
  .st-row-meta{
    flex-direction:row;
    align-items:baseline;
    gap:18px;
    padding-top:0;
  }
  .st-row-label{font-size:13px;letter-spacing:.14em;margin-bottom:12px}
  .st-row-value{font-size:24px;line-height:1.6}

  .st-memo{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px 22px;
    margin-top:48px;
  }
  .st-memo p{font-size:13px;line-height:2}

  .st-updated{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-top:48px;
  }
  .st-actions{margin-top:64px;flex-direction:column;align-items:stretch}
  .st-actions .btn,
  .st-actions .btn-fill{padding:18px 28px}
  .st-footnote{margin-top:56px;padding-top:36px}
}