:root{
  --ink:#222;
  --ink-2:#333;
  --text:#404040;
  --gray:#888;
  --gray-2:#aaa;
  --line:#e3e3e3;
  --line-2:#d0d0d0;
  --bg:#ffffff;
  --bg-soft:#f6f5f1;
  --bg-cream:#f3efe5;
  --green:#3a6f41;
  --green-dark:#1f3f25;
  --green-soft:#eaf0e6;
  --link:#1a5fa8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
  color:var(--ink-2);
  background:var(--bg);
  line-height:2;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  overflow-x:hidden;
}
/* Japanese typography — proper line break at phrase boundaries */
h1,h2,h3,h4,h5,
.hero-title,
.h2-chapter .ttl,
.h3-section,
.h4-sub,
.dev-message-body .text h4.headline,
.dev-message-body .text h5.sub,
.merit-card h4,
.merit-section-wrap .heading h3,
.article-title,
.section-ttl,
.lead-paragraph{
  word-break:auto-phrase;     /* Chromium 119+ : breaks at Japanese phrase boundaries */
  line-break:strict;          /* enforce stricter break rules */
  text-wrap:balance;          /* even, balanced line lengths */
  overflow-wrap:break-word;
}
p{
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:pretty;           /* avoid orphans on last line */
}
/* prevent breaking inside small inline phrases like 三菱地所レジデンス */
.nobr{
  display:inline-block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
}
/* SP-only forced line break */
.sp-br{display:none}
@media(max-width:760px){
  .sp-br{display:inline}
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.serif{font-family:"Noto Serif JP",serif}

/* ============ HERO (Editorial spread, rich + modern) ============ */
.hero-cinema{
  position:relative;
  width:100%;
  min-height:92vh;
  max-height:940px;
  overflow:hidden;
  background:
    url('main.jpg') center center / cover no-repeat,
    #f3efe5;
  color:var(--ink);
  isolation:isolate;
}
/* warm corner glow on cream side */
.hero-cinema::after{
  content:"";position:absolute;
  inset:0;
  background:
    radial-gradient(40% 50% at 0% 50%, rgba(31,63,37,.04) 0%, transparent 70%);
  pointer-events:none;z-index:1;
}
@media(max-width:1024px){
  .hero-cinema{
    min-height:100vh;
    max-height:none;
    background-image:url('main_sp.png');
    background-position:center bottom;
    background-size:cover;
  }
}
@media(max-width:760px){
  .hero-cinema{
    min-height:100vh;
    max-height:none;
    background-image:url('main_sp.png');
    background-position:center bottom;
    background-size:cover;
  }
}

/* main image moved to .hero-cinema background — hide the inline image holder */
.hero-chair{display:none}
.hero-chair_unused{
  position:absolute;
  top:0;right:0;bottom:0;
  width:54%;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  animation:fadein 1.8s ease both;
}
.hero-chair img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
  filter:contrast(1.03) saturate(1.04);
  animation:kenburns 22s cubic-bezier(.2,.6,.3,1) both;
}
/* (image overlay removed — image shown as-is) */
@keyframes kenburns{
  0%   {transform:scale(1.07) translateY(0)}
  100% {transform:scale(1.0)  translateY(0)}
}
@media(max-width:1024px){
  .hero-chair{width:50%}
}
@media(max-width:760px){
  .hero-chair{position:relative;width:100%;height:56vh;min-height:340px}
  .hero-chair img{object-position:center bottom}
}

/* Editorial frame on top of full-bleed image */
.hero-frame{
  position:relative;z-index:5;
  min-height:92vh;
  max-width:1200px;margin:0 auto;
  padding:48px clamp(28px,5vw,64px) 56px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:24px;
}
@media(max-width:1024px){
  .hero-frame{min-height:100vh;padding:32px clamp(24px,4vw,48px) 40px;gap:16px;grid-template-rows:auto auto 1fr}
  .hero-content{align-self:start}
}
@media(max-width:760px){
  .hero-frame{padding:32px 14px 40px;min-height:100vh;grid-template-rows:auto auto 1fr}
  .hero-content{align-self:start}
}

/* Brand mark — top-left */
.hero-mark{
  display:flex;align-items:center;gap:14px;
  color:var(--ink);
  animation:fadein 1.2s ease .05s both;
}
.hero-mark .brand-logo{height:32px;width:auto;display:block;flex:0 0 auto}
.hero-mark .mark-text{display:none}

/* Main title block — anchored in the left text zone */
.hero-content{
  align-self:center;
  justify-self:start;
  max-width:min(68%, 880px);
  padding:0;
  position:relative;z-index:4;
  animation:fadeup 1.3s cubic-bezier(.2,.7,.2,1) .35s both;
}
@media(max-width:760px){
  .hero-content{max-width:100%;padding:12px 0 0}
}
@keyframes fadeup{
  0% {opacity:0;transform:translateY(28px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadein{
  0% {opacity:0} 100%{opacity:1}
}

.hero-title{
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  color:var(--ink);
  line-height:1.6;
  letter-spacing:.03em;
  font-size:clamp(24px, 2.6vw, 38px);
  margin-bottom:32px;
}
.hero-title em{
  font-style:normal;
  font-weight:700;
  color:var(--green-dark);
  background:linear-gradient(180deg, transparent 62%, rgba(58,111,65,.22) 62%, rgba(58,111,65,.22) 92%, transparent 92%);
  padding:0 .08em;
}
.hero-catch-img{
  display:block;
  width:100%;
  height:auto;
  max-width:880px;
  margin-top:8px;
}
@media(max-width:760px){
  .hero-catch-img{max-width:100%}
}
.hero-title .t-en{
  display:flex;align-items:center;gap:14px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;font-weight:400;
  font-size:.42em;
  color:var(--green);
  letter-spacing:.08em;
  margin-bottom:24px;
}
.hero-title .t-en::before{
  content:"";display:block;
  width:42px;height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--green) 30%, var(--green) 100%);
  flex:0 0 auto;
}
.hero-title .t-en::after{
  content:"";display:block;
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  opacity:.55;
  flex:0 0 auto;
}
.hero-lede{
  font-size:18px;line-height:2.1;letter-spacing:.04em;
  color:var(--ink);
  max-width:680px;
  font-weight:700;
}
@media(max-width:760px){
  .hero-lede{font-size:15px;line-height:2.0}
}

/* Scroll cue — bottom-left */
.hero-scroll{
  justify-self:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  font-family:"Inter",sans-serif;
  font-size:10px;letter-spacing:.45em;font-weight:500;
  color:var(--ink);
  text-transform:uppercase;
  animation:fadein 1.2s ease 1s both;
}
.hero-scroll > span:not(.scroll-line){
  display:flex;align-items:center;gap:10px;
  opacity:.72;
}
.hero-scroll > span:not(.scroll-line)::before{
  content:"";display:block;
  width:18px;height:1px;background:var(--ink);
  opacity:.5;
}
.hero-scroll .scroll-line{
  width:1px;height:64px;
  background:linear-gradient(180deg, rgba(34,34,34,.28) 0%, rgba(34,34,34,.04) 100%);
  position:relative;overflow:hidden;
  margin-left:28px;
}
.hero-scroll .scroll-line::after{
  content:"";position:absolute;left:-2.5px;right:auto;top:-30%;
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(58,111,65,.12);
  animation:scrolldot 2.6s cubic-bezier(.55,.05,.35,.95) infinite;
}
@keyframes scrolldot{
  0%   {top:-20%; opacity:0}
  15%  {opacity:1}
  85%  {opacity:1}
  100% {top:110%; opacity:0}
}

/* ============ ARTICLE BODY ============ */
.article-body{
  max-width:1200px;margin:0 auto;padding:0 40px 100px;
  font-size:17px;line-height:2.15;color:var(--ink-2);
}
@media(max-width:760px){
  .article-body{padding:0 14px 80px;font-size:16px}
}
/* paragraphs in article body — full container width */
.article-body > p,
.article-body .lead-paragraph,
.article-body > .note,
.dev-message-body .text > p{
  margin-left:auto;margin-right:auto;
}
.article-body > p{margin-bottom:32px}
/* unify all narrative + data blocks to the same editorial column width */
.article-body > .h3-section,
.article-body > .h4-sub,
.article-body > .plan-meta-box,
.article-body > .plan-layout,
.article-body > .dev-message,
.article-body > .data-figure,
.article-body > .check-point{
  max-width:820px;
  margin-left:auto;margin-right:auto;
}
.article-body strong{font-weight:600;color:var(--ink)}

/* Lead paragraph — feature opener (editorial) */
.lead-paragraph{
  position:relative;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(17px,1.6vw,21px);
  line-height:2.1;letter-spacing:.04em;
  color:var(--ink-2);font-weight:400;
  margin:48px auto 96px;padding:0;max-width:1040px;
  text-align:center;
}
.lead-paragraph .nobr-line{display:inline-block;white-space:nowrap}
.lead-paragraph::before{
  content:"Lead —";display:block;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;font-size:15px;font-weight:500;
  color:var(--green);letter-spacing:.08em;
  margin-bottom:18px;
  text-align:center;
}

/* ===== Chapter nav cards (PDF reference) ===== */
.chapter-nav{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1100px;margin:96px auto;padding:0 16px;
}
@media(max-width:760px){
  .chapter-nav{grid-template-columns:1fr;gap:16px;margin:72px auto}
}
.chapter-nav-card{
  display:flex;flex-direction:column;align-items:center;
  padding:26px 24px 22px;
  background:#fff;
  border:1px solid var(--line);
  text-decoration:none;color:inherit;
  text-align:center;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.chapter-nav-card:hover{
  border-color:var(--green);
  transform:translateY(-2px);
  box-shadow:0 8px 24px -16px rgba(31,63,37,.25);
}
.chapter-nav-card .cn-label{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  color:var(--ink);font-size:22px;letter-spacing:.04em;
  margin-bottom:14px;
  width:100%;
}
.chapter-nav-card .cn-label::before,
.chapter-nav-card .cn-label::after{
  content:"";flex:1;height:2px;background:var(--green);opacity:.55;
}
.chapter-nav-card .cn-label em{font-style:italic;color:var(--ink);}
.chapter-nav-card .cn-ttl{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;
  color:var(--ink);font-size:15px;line-height:1.7;letter-spacing:.04em;
  margin-bottom:18px;
}
.chapter-nav-card .cn-btn{
  display:inline-block;
  background:var(--green);color:#fff;
  font-family:"Inter",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.18em;
  padding:8px 28px;border-radius:999px;
  margin-top:auto;
  transition:background .25s ease;
}
.chapter-nav-card:hover .cn-btn{background:var(--green-dark)}

/* H2 (chapter title) — full-bleed editorial opener band */
.h2-chapter{
  position:relative;
  margin:140px -40px 72px;
  padding:96px 40px 88px;
  scroll-margin-top:24px;
  background:var(--bg-cream);
  text-align:center;
  overflow:hidden;
}
@media(max-width:760px){
  .h2-chapter{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    margin-top:96px;
    margin-bottom:48px;
    padding:56px 18px 48px;
    position:relative;
  }
}
.h2-chapter::before{
  content:attr(data-ghost);
  position:absolute;left:50%;top:38%;
  transform:translate(-50%,-50%);
  font-family:"Cormorant Garamond",serif;
  font-style:italic;font-weight:500;
  font-size:clamp(140px,18vw,240px);
  line-height:1;
  color:rgba(58,111,65,.14);
  letter-spacing:.02em;
  white-space:nowrap;pointer-events:none;
  z-index:0;
}
.h2-chapter .chap-num{
  position:relative;z-index:1;
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:16px;color:var(--green);
  letter-spacing:.32em;font-weight:500;
  margin-bottom:24px;
}
.h2-chapter .chap-num::before{
  content:"";display:inline-block;
  width:40px;height:1px;background:var(--green);
  vertical-align:middle;margin-right:16px;
}
.h2-chapter .chap-num::after{
  content:"";display:inline-block;
  width:40px;height:1px;background:var(--green);
  vertical-align:middle;margin-left:16px;
}
.h2-chapter .ttl{
  position:relative;z-index:1;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(28px,4vw,44px);font-weight:700;
  color:var(--ink);line-height:1.6;
  display:block;letter-spacing:.04em;
}

/* H3 (section title - mecsumai distinctive style) */
.h3-section{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(26px, 2.6vw + 4px, 34px);font-weight:700;
  color:var(--ink);line-height:1.55;
  padding-bottom:18px;
  border-bottom:1px solid var(--ink-2);
  margin:80px 0 36px;letter-spacing:.04em;
}

/* CASE label (inline prefix at the head of h3-section title) */
.h3-section{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 20px;
}
.h3-section .case-label{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;
  border:1.5px solid var(--green-dark);
  background:#fff;
  color:var(--green-dark);
  position:relative;
  flex-shrink:0;
}
.h3-section .case-label::before{
  content:"";position:absolute;inset:2px;border:1px solid var(--green-dark);pointer-events:none;
}
.h3-section .case-label .case-en,
.h3-section .case-label .case-num{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:600;
  font-size:20px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:none;
}
.h3-section .case-title{
  display:inline-block;
  line-height:1.4;
}

/* Property name inside plan-meta-box */
.plan-meta-box .plan-property{
  flex-basis:100%;
  font-family:"Noto Serif JP",serif;
  font-size:15.5px;font-weight:600;color:var(--ink);
  letter-spacing:.06em;line-height:1.5;
  padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--line-2);
}
.plan-meta-box .plan-property .pp-label{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:10.5px;font-weight:500;
  letter-spacing:.22em;color:var(--gray);
  text-transform:uppercase;
  margin-right:10px;vertical-align:.1em;
}

/* Inline reference mark (※) — keeps line box stable */
.ref-mark{
  display:inline-block;position:relative;top:-.4em;
  font-size:.7em;line-height:1;vertical-align:baseline;
  color:var(--green-dark);margin:0 .15em;font-weight:500;
}

/* Kameido gallery wrapper (reuses .merit-thumbs grid, sits under .merit-photos) */
.kameido-gallery{margin:14px 0 36px;padding:0}
.kameido-gallery .merit-thumbs{margin-top:0}
/* Overlay caption inside each image — same style as .merit-photos */
.kameido-gallery .merit-thumbs .photo{position:relative}
.kameido-gallery .merit-thumbs .photo img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;
}
.kameido-gallery .merit-thumbs .photo .cap{
  position:absolute;bottom:0;left:0;
  background:rgba(0,0,0,.55);color:#fff;
  padding:3px 9px;font-size:10px;letter-spacing:.02em;line-height:1.5;
  margin:0;
}

/* H4 (sub-section) */
.h4-sub{
  font-size:clamp(20px, 1.4vw + 8px, 24px);font-weight:600;color:var(--ink);
  line-height:1.7;margin:44px 0 20px;
  padding-left:18px;border-left:3px solid var(--green);
  letter-spacing:.04em;
}

/* Floor plan figure */
.figure-block{
  margin:36px 0;
}
.figure-block img{
  width:100%;background:#fafafa;border:1px solid var(--line);
}
.figure-block .fig-caption{
  font-size:13px;color:var(--gray);margin-top:12px;line-height:1.8;letter-spacing:.02em;
}
.figure-block .fig-caption strong{color:var(--ink-2);font-weight:500}

/* Plan meta box */
.plan-meta-box{
  background:var(--bg-soft);
  padding:24px 28px;
  margin:32px 0;
  border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;
}
.plan-meta-box .plan-type{
  font-family:"Noto Serif JP",serif;
  font-size:28px;font-weight:700;color:var(--green-dark);
}
.plan-meta-box .plan-type small{font-size:13px;color:var(--gray);font-weight:500;margin-left:8px;display:block;letter-spacing:.05em;font-family:"Inter",sans-serif}
.plan-meta-box .plan-tag{
  background:var(--green);color:#fff;font-size:12px;
  padding:4px 12px;font-weight:500;letter-spacing:.08em;
}
.plan-meta-box .meta-item{font-size:14.5px;color:var(--text);letter-spacing:.03em}
.plan-meta-box .meta-item strong{color:var(--ink);font-weight:600;margin-left:6px;font-size:15.5px}

/* Check Point — minimal editorial sidebar */
.check-point{
  background:#fff;
  border:1px solid var(--green);
  padding:20px 24px;
  margin:28px 0;
  counter-increment:check-counter;
}
.check-point p{font-size:17px;line-height:2.15;color:var(--text);margin:0;font-weight:400;letter-spacing:.03em}
.check-point p::before{
  content:"Point " counter(check-counter, decimal-leading-zero) " — ";
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  color:var(--green);font-size:16px;font-weight:600;
  letter-spacing:.06em;margin-right:8px;
}
.plan-layout{counter-reset:check-counter}

/* Layout for plan + text side by side */
.plan-layout{
  display:grid;grid-template-columns:1fr 1.4fr;gap:50px;
  margin:36px 0;align-items:start;
}
@media(max-width:760px){.plan-layout{grid-template-columns:1fr;gap:30px}}
.plan-layout .plan-img-col img{
  width:100%;background:#fff;border:1px solid var(--line);
}
.plan-layout .plan-img-col .legend{
  font-size:12px;color:var(--gray);margin-top:12px;line-height:1.8;letter-spacing:.02em;
}
.plan-detail{
  display:grid;
  grid-template-columns:minmax(240px, 34%) minmax(0, 1fr);
  gap:clamp(30px, 5vw, 62px);
  max-width:980px;
  margin:36px auto 14px;
  align-items:stretch;
}
.plan-detail-plan{
  display:flex;justify-content:center;align-items:flex-start;
}
.plan-drawing{
  position:relative;
  width:min(100%, 330px);
}
.plan-drawing img{
  display:block;width:min(100%, 330px);height:auto;
  background:#fff;border:none;
}
.plan-drawing .plan-direction{
  position:absolute;
  left:calc(100% - 4px);
  top:91%;
  width:clamp(38px, 4.8vw, 54px);
  max-width:none;
  height:auto;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  pointer-events:none;
}
.plan-room-note{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:clamp(7px, .9vw, 12px);
  font-weight:700;
  line-height:1.25;
  text-align:center;
  letter-spacing:.02em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.88),
    1px 0 2px rgba(0,0,0,.7),
    -1px 0 2px rgba(0,0,0,.7);
  white-space:nowrap;
  pointer-events:none;
}
.plan-room-note-dk{top:63.5%}
.plan-room-note-bedroom{top:79%}
.plan-detail-content{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  gap:46px;padding-top:242px;
}
.plan-detail-work .plan-detail-content{
  justify-content:flex-start;gap:36px;padding-top:282px;
}
.plan-intro{
  position:absolute;top:40px;left:0;right:0;
  font-size:16.5px;line-height:2.05;color:var(--text);
  margin:0;letter-spacing:.03em;
}
.pdf-check-point{
  --arrow-width:110px;
  position:relative;background:#fff;
  border:3px solid #b7d98b;
  padding:18px 26px 20px;
  color:var(--green-dark);
  font-size:19px;font-weight:700;line-height:1.65;
  letter-spacing:.03em;
}
.pdf-check-point::before{
  content:"";position:absolute;left:calc(-1 * var(--arrow-width, 96px));top:var(--arrow-y, 50%);
  width:var(--arrow-width, 96px);height:42px;transform:translateY(-50%);
  background:#b7d98b;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
}
.pdf-check-point .eyebrow{
  position:absolute;left:-2px;top:-36px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;font-size:28px;font-weight:700;
  line-height:1;color:#b7d98b;letter-spacing:.02em;
  white-space:nowrap;
}
.pdf-check-point p{
  margin:0;
}
.pdf-check-point.check-dk{
  --arrow-width:170px;
}
.plan-detail-active .check-bedroom{
  margin-top:18px;
}
.plan-detail-work .check-dk{
  margin-top:clamp(210px, 22vw, 330px);
}
.plan-detail-work .check-bedroom{
  margin-top:90px;
}
.plan-figure-meta{
  max-width:980px;margin:0 auto 42px;
}
.plan-figure-meta .legend{
  font-size:12px;color:var(--gray);margin-top:12px;line-height:1.8;letter-spacing:.02em;
}
@media(max-width:760px){
  /* SP: stack check-points above the floorplan image, no arrows */
  .plan-detail{
    display:flex;flex-direction:column;
    gap:18px;margin:24px auto 14px;
  }
  .plan-detail-plan{order:2;justify-content:center}
  .plan-detail-content,
  .plan-detail-work .plan-detail-content{
    order:1;
    position:static;display:flex;flex-direction:column;
    gap:34px;padding-top:0;
  }
  .plan-drawing{width:min(100%, 320px)}
  .plan-drawing img{width:100%}
  .plan-drawing .plan-direction{
    left:calc(100% - 18px);
    top:93%;
    width:30px;
  }
  .plan-intro{
    position:static;
    font-size:13px;line-height:1.85;letter-spacing:.02em;
    margin:0 0 4px;
  }
  .pdf-check-point{
    --arrow-width:0;
    border-width:2px;padding:14px 16px 15px;
    font-size:13.5px;line-height:1.7;letter-spacing:.02em;
  }
  .pdf-check-point::before{display:none}
  .pdf-check-point.check-dk,
  .pdf-check-point.check-bedroom{
    --arrow-width:0;
  }
  .pdf-check-point .eyebrow{
    position:static;
    display:inline-block;
    top:auto;left:auto;
    font-size:20px;line-height:1;
    margin-bottom:8px;
  }
  .plan-detail-active .check-bedroom,
  .plan-detail-work .check-dk,
  .plan-detail-work .check-bedroom{
    margin-top:0;
  }
}
/* Floor plan overlay: arrows / compass / 畳数 labels */
.plan-img-frame{
  position:relative;display:block;
  background:#fff;border:1px solid var(--line);
  line-height:0;
}
.plan-img-frame img{border:none !important;display:block;width:100%}
.plan-img-frame .room-tag{
  position:absolute;z-index:3;
  font-family:"Noto Serif JP",serif;
  background:rgba(255,255,255,.92);
  color:var(--green-dark);
  font-size:clamp(11px,1.05vw,13px);
  font-weight:600;
  padding:4px 9px;
  border:1px solid var(--green);
  letter-spacing:.04em;line-height:1.4;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.plan-img-frame .room-tag small{
  display:block;font-size:.78em;color:var(--text);
  font-weight:500;margin-top:1px;letter-spacing:.02em;
}
.plan-img-frame .room-tag::after{
  content:"";position:absolute;
  width:0;height:0;
  border:5px solid transparent;
}
/* arrow variants — direction the tag points toward */
.plan-img-frame .room-tag.arr-l::after{
  left:-10px;top:50%;transform:translateY(-50%);
  border-right-color:var(--green);
}
.plan-img-frame .room-tag.arr-r::after{
  right:-10px;top:50%;transform:translateY(-50%);
  border-left-color:var(--green);
}
.plan-img-frame .room-tag.arr-t::after{
  top:-10px;left:50%;transform:translateX(-50%);
  border-bottom-color:var(--green);
}
.plan-img-frame .room-tag.arr-b::after{
  bottom:-10px;left:50%;transform:translateX(-50%);
  border-top-color:var(--green);
}
/* Compass (N↑) */
.plan-img-frame .plan-compass{
  position:absolute;z-index:3;
  top:10px;right:10px;
  width:34px;height:34px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--green);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Inter",sans-serif;font-weight:700;
  font-size:11px;color:var(--green-dark);
  letter-spacing:.04em;line-height:1;
}
.plan-img-frame .plan-compass::before{
  content:"";position:absolute;
  top:3px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border:5px solid transparent;
  border-bottom-color:var(--green);
}
.plan-img-frame .plan-compass span{margin-top:9px}
@media(max-width:760px){
  .plan-img-frame .room-tag{font-size:10px;padding:3px 7px}
  .plan-img-frame .plan-compass{width:28px;height:28px;font-size:10px}
}

/* Floor plan legend strip */
.plan-legend-strip{
  display:flex;gap:20px;flex-wrap:nowrap;
  font-size:11px;color:var(--gray);
  margin-top:14px;padding-top:0;border-top:none;
  align-items:center;
}
.plan-legend-strip span{
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;flex:0 0 auto;
}
.plan-layout .plan-img-col img.legend-icon,
.plan-legend-strip img.legend-icon{
  width:18px !important;height:auto;display:inline-block;flex:0 0 auto;
  object-fit:contain;
  border:none !important;background:transparent !important;
}

/* Note text */
.note{
  font-size:13px;color:var(--gray);line-height:1.95;
  margin-top:16px;letter-spacing:.02em;
}
/* Note placed inside a .dev-message (e.g. Yabe message footnote) */
.dev-message > .dev-message-note{margin-top:28px}
/* Note prefix removed per client revision #9 */

/* Full-bleed photo interstitial between chapters */
.interstitial{
  position:relative;
  margin:96px -40px 0;
  height:clamp(280px, 36vw, 480px);
  overflow:hidden;
  background:#0d120e;
}
@media(max-width:760px){
  .interstitial{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    margin-top:72px;
    position:relative;
  }
}
.interstitial img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) saturate(.92);
}
.interstitial::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}
.interstitial .inter-vtext{
  position:absolute;
  right:clamp(20px, 4vw, 60px);
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:"Noto Serif JP",serif;
  font-size:14px;letter-spacing:.5em;font-weight:500;
  color:#fff;z-index:2;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* Chapter section photo band */
.chapter-photo{
  margin:32px -40px 24px;
  position:relative;
  height:clamp(220px, 28vw, 360px);
  overflow:hidden;
}
@media(max-width:760px){
  .chapter-photo{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    margin-top:24px;
    margin-bottom:20px;
    position:relative;
  }
}
.chapter-photo img{
  width:100%;height:100%;object-fit:cover;
}
.chapter-photo .cap{
  position:absolute;left:24px;bottom:14px;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;color:#fff;letter-spacing:.08em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* Merit block */
.merit-section-wrap{
  background:var(--bg-cream);
  margin:96px -40px 0;
  padding:72px 40px;
}
@media(max-width:760px){
  .merit-section-wrap{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    margin-top:72px;
    padding:56px 14px;
    position:relative;
  }
}
.merit-section-wrap .inner{max-width:880px;margin:0 auto}
.merit-section-wrap .heading{
  text-align:center;margin-bottom:48px;
}
.merit-section-wrap .heading .eyebrow{
  font-family:"Noto Serif JP",serif;font-style:italic;
  color:var(--green);font-size:14px;display:inline-block;
  margin-bottom:14px;letter-spacing:.05em;
}
.merit-section-wrap .heading .eyebrow::before,
.merit-section-wrap .heading .eyebrow::after{
  content:"";display:inline-block;width:24px;height:1px;
  background:var(--green);vertical-align:middle;
}
.merit-section-wrap .heading .eyebrow::before{margin-right:12px}
.merit-section-wrap .heading .eyebrow::after{margin-left:12px}
.merit-section-wrap .heading h3{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(26px,3.2vw,36px);font-weight:700;
  color:var(--ink);line-height:1.6;letter-spacing:.04em;
}

.merit-photos{
  display:grid;grid-template-columns:1.4fr 1fr;gap:8px;
  margin-bottom:36px;
}
.merit-photos .photo{position:relative}
.merit-photos .photo img{width:100%;height:100%;object-fit:cover;display:block}
.merit-photos .photo .cap{
  position:absolute;bottom:0;left:0;
  background:rgba(0,0,0,.55);color:#fff;
  padding:3px 9px;font-size:10px;letter-spacing:.02em;
}

.merit-card{
  background:#fff;
  padding:36px 32px;margin-bottom:18px;
  border:1px solid var(--line);
}
.merit-card .num{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:14px;
}
.merit-card .num .label{
  font-family:"Noto Serif JP",serif;font-style:italic;
  color:var(--green);font-size:18px;font-weight:600;letter-spacing:.04em;
}
.merit-card .num .digit{
  font-family:"Inter",sans-serif;font-weight:600;
  color:var(--green);font-size:32px;line-height:1;
}
.merit-card h4{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(22px, 1.8vw + 8px, 26px);font-weight:700;color:var(--ink);
  line-height:1.65;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
  letter-spacing:.04em;
}
.merit-card p{font-size:17px;line-height:2.15;color:var(--text);letter-spacing:.03em}

.merit-thumbs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:20px;
}
.merit-thumbs .photo{position:relative}
.merit-thumbs .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.merit-thumbs .cap{
  font-size:10.5px;color:var(--gray);margin-top:6px;line-height:1.5;letter-spacing:.02em;
}
/* Overlay caption inside .photo — unified with .merit-photos */
.merit-thumbs .photo .cap{
  position:absolute;bottom:0;left:0;
  background:rgba(0,0,0,.55);color:#fff;
  padding:3px 9px;font-size:10px;letter-spacing:.02em;line-height:1.5;
  margin:0;
}

/* Developer message — cinematic editorial portrait */
.dev-message{
  background:transparent;
  margin:56px 0;padding:0;
  border:none;
}
.dev-message-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:0 0 18px;margin-bottom:32px;
  border-bottom:1px solid var(--ink-2);
}
.dev-message-head .tag{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--green);font-size:17px;font-weight:500;
  padding:0;letter-spacing:.06em;
}
.dev-message-head .tag::before{
  content:"— ";color:var(--green);
}
.dev-message-head .position{
  font-size:12.5px;color:var(--gray);line-height:1.7;
  letter-spacing:.06em;
}
.dev-message-head .name-inline{
  font-family:"Noto Serif JP",serif;
  font-size:19px;font-weight:600;color:var(--ink);
  margin-left:auto;letter-spacing:.05em;
}
.dev-message-head .name-inline small{
  font-family:"Inter",sans-serif;
  font-size:11.5px;color:var(--gray);font-weight:400;
  margin-left:10px;letter-spacing:.16em;
}

.dev-message-body{
  display:grid;grid-template-columns:320px 1fr;gap:48px;
  padding:0;align-items:start;
}
@media(max-width:760px){.dev-message-body{grid-template-columns:1fr;gap:24px}}
.dev-message-body .portrait{position:relative}
.dev-message-body .portrait img{
  width:100%;display:block;
  aspect-ratio:3/4;object-fit:cover;
  filter:contrast(1.02) saturate(.96);
}
.dev-message-body .portrait .name-cap{
  font-family:"Inter",sans-serif;
  font-size:11.5px;color:var(--gray);
  margin-top:14px;text-align:left;
  letter-spacing:.2em;text-transform:uppercase;
  padding-top:12px;border-top:1px solid var(--line);
}
.dev-message-body .text h4.headline{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(20px,2.2vw,26px);font-weight:700;color:var(--ink);
  line-height:1.7;margin-bottom:28px;
  padding-bottom:0;border-bottom:none;
  letter-spacing:.04em;
}
.dev-message-body .text h4.headline::before{
  content:"";display:block;
  width:48px;height:1px;background:var(--green);
  margin-bottom:28px;
}
.dev-message-body .text h4.headline::after{
  content:"";display:block;
  width:48px;height:1px;background:var(--green);
  margin-top:28px;
}
.dev-message-body .text h5.sub{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
  font-style:normal;
  font-size:clamp(18px,1.9vw,22px);font-weight:700;color:var(--green-dark);
  margin:28px 0 16px;padding-left:0;border-left:none;
  letter-spacing:.04em;line-height:1.65;
}
.dev-message-body .text h5.sub::before{
  content:none;
}
.dev-message-body .text p{
  font-size:17px;line-height:2.15;color:var(--text);
  margin-bottom:20px;letter-spacing:.03em;
}

/* Data section */
.data-block{margin:48px 0}
.data-figure{
  background:transparent;border:none;
  padding:32px 0 20px;margin:36px 0;
  border-top:1px solid var(--line);
}
.data-figure .fig-title{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:0;border-bottom:none;
  margin-bottom:28px;
}
.data-figure .fig-title .fig-num{
  background:transparent;color:var(--green);
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:14px;letter-spacing:.12em;padding:0;font-weight:500;
}
.data-figure .fig-title .fig-num::after{
  content:"";display:inline-block;
  width:36px;height:1px;background:var(--green);
  vertical-align:middle;margin-left:14px;
}
.data-figure .fig-title .ttl{
  font-family:"Noto Serif JP",serif;
  font-size:16px;font-weight:600;color:var(--ink);
  letter-spacing:.04em;
}
.data-figure .source{
  font-size:12px;color:var(--gray);
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  line-height:1.85;letter-spacing:.02em;
  text-align:left;
}
/* "Source —" プレフィックス削除：#9と統一 */

/* Category legend strip (図1 世帯類型 5カテゴリ) */
.cat-legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:0 0 22px;padding:10px 14px;
  background:var(--bg-soft);
  font-size:12px;color:var(--text);letter-spacing:.04em;
  font-family:"Noto Sans JP",sans-serif;font-weight:500;
}
.cat-legend span{display:inline-flex;align-items:center;gap:7px;line-height:1.5}
.cat-legend .sw{
  display:inline-block;width:16px;height:12px;flex:0 0 auto;
}
.cat-legend .sw-focus{
  outline:2px solid #c9a64a;outline-offset:1px;
}
.bar-note{
  font-size:11.5px;color:var(--gray);
  margin-top:14px;line-height:1.8;letter-spacing:.02em;
}

/* 100% stacked bar chart (図1 世帯類型別割合) */
.bar-chart{display:flex;flex-direction:column;gap:18px}
.bar-row{
  display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:center;
}
.bar-row .year{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink-2);font-size:15px;letter-spacing:.04em;font-weight:600;
}
.bar-track{
  height:38px;display:flex;
  background:transparent;position:relative;overflow:visible;
}
.bar-seg{
  height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;color:#fff;font-weight:700;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:width 1.4s cubic-bezier(.16,1,.3,1);
}
.bar-seg.cat-fufu      {background:#c5d6c0;color:#3a5240}
.bar-seg.cat-fufu-kodomo{background:#88a98a;color:#fff}
.bar-seg.cat-hitori    {background:#5e8a63;color:#fff}
.bar-seg.cat-single    {
  background:linear-gradient(180deg,#3f7a48 0%,#244e2b 100%);
  color:#fff;font-size:15px;font-weight:800;
  position:relative;z-index:2;
  outline:2.5px solid #c9a64a;
  outline-offset:0;
}
.bar-seg.cat-other     {background:#e8e3d0;color:#7a7561}
.bar-seg:not(:has(span)){font-size:0}
.bar-axis{
  display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:start;
  margin-top:4px;
  font-family:"Inter",sans-serif;font-size:11px;color:var(--ink-2);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.bar-axis-scale{
  display:flex;justify-content:space-between;
  position:relative;
  padding-top:8px;
  border-top:1px solid #d8d4c4;
}
.bar-axis-scale span{
  display:block;position:relative;opacity:.8;
  transform:translateX(-50%);
}
.bar-axis-scale span:first-child{transform:translateX(0)}
.bar-axis-scale span:last-child{transform:translateX(0)}
.bar-axis-scale span::before{
  content:"";position:absolute;
  left:50%;top:-8px;
  width:1px;height:5px;background:#c9c4b6;
}
.bar-axis-scale span:first-child::before{left:0}
.bar-axis-scale span:last-child::before{left:auto;right:0}
@media(max-width:760px){
  .bar-chart{gap:14px}
  .bar-row{grid-template-columns:60px 1fr;gap:12px}
  .bar-row .year{font-size:13px}
  .bar-track{height:30px;overflow:visible}
  .bar-seg{font-size:12px}
  .bar-axis{grid-template-columns:60px 1fr;gap:12px}
  /* SP: cat-single の数字を独立した chip にして、棒幅に依らず確実に視認できるようにする */
  .bar-seg.cat-single{position:relative;overflow:visible}
  .bar-seg.cat-single > span{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    background:#1f3f25;color:#fff;
    padding:2px 7px;border-radius:2px;
    font-size:11px;font-weight:700;letter-spacing:0;
    white-space:nowrap;
    z-index:3;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
}

/* Line chart wrap */
.line-chart-box{
  background:linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  padding:24px;position:relative;
  height:360px;
}
.line-chart-box svg{width:100%;height:100%}
.line-chart-box .peak{
  position:absolute;top:20px;right:22px;
  background:#fff;border:1px solid var(--green);
  padding:8px 14px;
}
.line-chart-box .peak .v{
  font-family:"Inter",sans-serif;font-style:normal;font-weight:600;
  color:var(--green-dark);font-size:22px;line-height:1;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.line-chart-box .peak .lbl{
  font-size:11px;color:var(--gray);letter-spacing:.18em;margin-top:5px;font-family:"Inter",sans-serif;
}

/* Ranking */
.rank-list{list-style:none;padding:0;margin:0}
.rank-list li{
  display:grid;grid-template-columns:88px 1fr auto;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line);
  align-items:center;font-size:15px;
}
.rank-list li:last-child{border-bottom:none}
.rank-list .rank{
  display:flex;align-items:baseline;gap:5px;
  color:var(--green-dark);font-weight:600;
}
.rank-list .rank .badge{
  background:#bcbcbc;color:#fff;
  font-family:"Noto Serif JP",serif;font-style:normal;
  font-size:13px;font-weight:700;
  padding:4px 11px;letter-spacing:.04em;line-height:1;
  display:inline-block;
}
/* 第1〜3位の強調（#14） */
.rank-list li.top1{
  position:relative;
  background:linear-gradient(90deg,rgba(58,111,65,.08) 0%,rgba(58,111,65,0) 65%);
  padding-left:18px;
  margin-left:-18px;
}
.rank-list li.top1::before{
  content:"";position:absolute;
  left:0;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg,#e4c563 0%,var(--green-dark) 100%);
}
.rank-list li.top1 .badge{
  background:linear-gradient(135deg,#3a6f41 0%,#4f8557 100%);
  color:#fff;font-size:14px;padding:5px 14px 5px 24px;
  box-shadow:none;
  position:relative;
}
.rank-list li.top1 .badge::before{
  content:"";position:absolute;
  left:8px;top:50%;width:9px;height:9px;
  transform:translateY(-50%) rotate(45deg);
  background:#e4c563;
}
.rank-list li.top2 .badge{background:var(--green);box-shadow:0 0 0 2px rgba(58,111,65,.12);font-size:13.5px;padding:5px 12px}
.rank-list li.top3 .badge{background:#7ba07f;box-shadow:0 0 0 2px rgba(123,160,127,.14)}
.rank-list li.top1 .pct{
  font-size:30px;color:var(--green-dark);font-weight:700;
}
.rank-list li.top2 .pct{
  font-size:26px;color:var(--green-dark);
}
.rank-list li.top1 .lbl{
  color:var(--ink);font-weight:700;font-size:16px;
}
.rank-list li.top2 .lbl{
  color:var(--ink);font-weight:600;
}
.rank-list .rank-num{font-size:15px;font-family:"Noto Serif JP",serif;color:var(--green-dark)}
.rank-list .lbl{color:var(--ink-2);line-height:1.6;letter-spacing:.03em}
.rank-list .pct{
  font-family:"Inter",sans-serif;font-style:normal;
  font-weight:600;color:var(--green-dark);font-size:22px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.rank-list .pct small{font-size:12px;color:var(--gray);font-weight:400;margin-left:3px}

/* Pie chart — refined donut */
.pie-row{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:36px 0;
  align-items:stretch;
}
@media(max-width:680px){.pie-row{grid-template-columns:1fr;gap:32px}}
.pie-row--images{align-items:start}
.pie-image-figure{
  margin:0;
  padding:28px 0 20px;
  border-top:1px solid var(--line);
}
.pie-image-figure .fig-title{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:0;border-bottom:none;
  margin-bottom:24px;
}
.pie-image-figure .fig-title .fig-num{
  background:transparent;color:var(--green);
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;letter-spacing:.12em;padding:0;font-weight:500;
}
.pie-image-figure .fig-title .fig-num::after{
  content:"";display:inline-block;
  width:28px;height:1px;background:var(--green);
  vertical-align:middle;margin-left:12px;
}
.pie-image-figure .fig-title .ttl{
  font-family:"Noto Serif JP",serif;
  font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:.04em;
}
.pie-image-figure img{
  display:block;width:100%;height:auto;
  border-radius:0;
  box-shadow:none;
}
.pie-image-figure .source{
  font-size:12px;color:var(--gray);
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  line-height:1.85;letter-spacing:.02em;
  text-align:left;
}
.pie-image-figure .chart-note{
  margin:10px 0 0;font-size:11.5px;color:var(--gray);
  letter-spacing:.02em;line-height:1.6;text-align:left;
}
.pie-figure{
  background:transparent;border:none;
  padding:28px 0 20px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;
}
.pie-figure .pie-display{flex:1;align-content:center}
.pie-figure .pie-source{margin-top:auto}
.pie-figure .fig-title{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:0;border-bottom:none;
  margin-bottom:24px;
}
.pie-figure .fig-title .fig-num{
  background:transparent;color:var(--green);
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;letter-spacing:.12em;padding:0;font-weight:500;
}
.pie-figure .fig-title .fig-num::after{
  content:"";display:inline-block;
  width:28px;height:1px;background:var(--green);
  vertical-align:middle;margin-left:12px;
}
.pie-figure .fig-title .ttl{
  font-family:"Noto Serif JP",serif;
  font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:.04em;
}
.pie-display{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:flex-start}
.pie{
  width:240px;height:240px;border-radius:50%;
  position:relative;flex-shrink:0;
  margin-top:44px;
}
@media(max-width:680px){.pie{width:200px;height:200px}}
.pie-center{
  position:absolute;inset:32%;background:#fff;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Noto Serif JP",serif;font-style:normal;
  font-size:12px;color:var(--gray);text-align:center;line-height:1.5;
  letter-spacing:.04em;z-index:2;
}
.pie-center small{font-size:10px;color:var(--gray-2);letter-spacing:.1em}
/* セグメント直書きラベル（#15 視認性向上） */
.pie-label{
  position:absolute;
  letter-spacing:.04em;line-height:1.25;
  text-align:center;
  pointer-events:none;z-index:3;
  white-space:nowrap;
  transform:translate(-50%,-50%);
  font-family:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
.pie-label strong{
  display:block;
  font-weight:500;font-size:12px;letter-spacing:.04em;
  margin-bottom:3px;
}
.pie-label em{
  display:block;font-style:normal;
  font-family:"Inter",sans-serif;
  font-weight:600;font-size:18px;line-height:1;
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
}
.pie-label.size-lg strong{font-size:13px}
.pie-label.size-lg em{font-size:20px}
.pie-label.size-sm strong{font-size:11px;margin-bottom:2px}
.pie-label.size-sm em{font-size:15px}
.pie-label.size-xs strong{font-size:10px;margin-bottom:2px}
.pie-label.size-xs em{font-size:12px}
.pie-label.is-in,
.pie-label.is-in-dark{
  color:#fff;
  text-shadow:none;
}
.pie-label.is-in strong,
.pie-label.is-in-dark strong{color:#e8efe6}
.pie-label.is-in em,
.pie-label.is-in-dark em{color:#fff}
.pie-label.is-out{
  color:var(--ink);
}
.pie-label.is-out strong{color:var(--ink-2)}
.pie-label.is-out em{color:var(--green-dark)}
.pie-label.is-out::after{
  content:"";position:absolute;
  left:50%;top:calc(100% + 4px);
  width:1px;height:var(--leader-h,24px);
  background:var(--green);
  transform-origin:top center;
  transform:translateX(-.5px) rotate(var(--leader-r,0deg));
}
.pie-label strong{display:block;font-weight:700;font-size:.95em}
.pie-label em{
  display:block;font-style:normal;font-weight:700;
  font-family:"Inter",sans-serif;font-size:1em;
  font-variant-numeric:tabular-nums;
}
@media(max-width:680px){
  .pie-label{font-size:11px}
  .pie-label[style*="font-size:18px"]{font-size:14px !important}
  .pie-label[style*="font-size:14px"]{font-size:11px !important}
}
.pie-center strong{
  font-family:"Noto Serif JP",serif;font-style:normal;
  font-size:15px;color:var(--ink);font-weight:700;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.pie-legend{
  font-size:13.5px;display:flex;flex-direction:column;gap:11px;min-width:150px;flex:1;
}
.pie-legend span{display:flex;align-items:center;gap:12px}
.pie-legend i{width:16px;height:2px;display:inline-block;flex-shrink:0}
.pie-legend .lbl{
  color:var(--text);flex:1;letter-spacing:.04em;
  font-family:"Noto Serif JP",serif;
}
.pie-legend .v{
  font-family:"Inter",sans-serif;font-style:normal;
  font-weight:600;color:var(--green-dark);font-size:17px;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.pie-source{
  font-size:12px;color:var(--gray);
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  line-height:1.85;letter-spacing:.02em;
  text-align:left;
}

/* Inline highlight stat */
.stat-highlight{
  background:var(--bg-soft);
  padding:24px 28px;
  margin:32px 0;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  border-left:4px solid var(--green);
}
.stat-highlight .num{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;
  color:var(--green-dark);font-size:54px;line-height:1;letter-spacing:.02em;
}
.stat-highlight .num small{font-size:22px;color:var(--green);font-style:italic}
.stat-highlight .txt{font-size:15px;color:var(--text);line-height:1.95;flex:1;min-width:240px;letter-spacing:.03em}
.stat-highlight .txt strong{color:var(--ink);font-weight:600}

/* Related articles */
.related-section{
  background:var(--bg-soft);
  padding:96px 24px 104px;margin-top:96px;
}
.related-section .inner{max-width:1080px;margin:0 auto}
.related-section h3.section-ttl{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(26px,2.4vw,32px);font-weight:700;color:var(--ink);
  text-align:center;margin:0 0 56px;line-height:1.5;letter-spacing:.04em;
}
.related-section .section-en{
  display:block;text-align:center;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;color:var(--green);letter-spacing:.28em;
  margin-bottom:14px;font-weight:500;
}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.related-section .section-subhead{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:-32px 0 48px;text-align:center;
}
.related-section .section-subhead .sub-en{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:14px;letter-spacing:.32em;color:var(--green);
  display:flex;align-items:center;gap:14px;
}
.related-section .section-subhead .sub-en::before,
.related-section .section-subhead .sub-en::after{
  content:"";display:block;width:32px;height:1px;background:var(--green);opacity:.55;
}
.related-section .section-subhead .sub-ja{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:18px;color:var(--ink);letter-spacing:.06em;
}
.related-grid.related-grid--two{
  grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:900px;margin:0 auto;
}
.related-grid--two .related-card .thumb{aspect-ratio:600/588;background:var(--bg-soft)}
.related-grid--two .related-card .thumb img{object-fit:contain}
.related-grid--two .related-card .info{padding:22px 24px 26px}
.related-grid--two .related-card .info h4{font-size:17px;margin-bottom:18px}
.related-grid--two .related-card .info .meta{font-size:12px;letter-spacing:.06em}
.related-grid--two .related-card .prop-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Noto Sans JP",sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.08em;color:var(--green-dark);
  padding:10px 22px;
  border:1px solid var(--green);
  background:#fff;
  transition:background .25s ease, color .25s ease, gap .25s ease;
}
.related-grid--two .related-card .prop-cta i{
  font-style:normal;font-size:14px;transition:transform .25s ease;
}
.related-grid--two .related-card:hover .prop-cta{
  background:var(--green);color:#fff;gap:14px;
}
.related-grid--two .related-card:hover .prop-cta i{transform:translateX(3px)}
@media(max-width:760px){
  .related-grid{grid-template-columns:1fr}
  .related-grid.related-grid--two{grid-template-columns:1fr;gap:24px}
}
.related-card{
  background:#fff;text-decoration:none;color:var(--ink-2);
  display:block;transition:transform .3s, box-shadow .3s;
  border:1px solid var(--line);
}
.related-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -16px rgba(0,0,0,.15);text-decoration:none}
.related-card .thumb{
  aspect-ratio:16/10;overflow:hidden;position:relative;
}
.related-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.related-card:hover .thumb img{transform:scale(1.05)}
.related-card .cat{
  position:absolute;top:12px;left:12px;
  background:var(--green);color:#fff;font-size:10px;
  padding:3px 10px;letter-spacing:.08em;
}
.related-card .info{padding:20px 22px}
.related-card .info .meta{
  font-size:10.5px;color:var(--gray);letter-spacing:.08em;
  margin-bottom:10px;font-family:"Inter",sans-serif;
}
.related-card .info h4{
  font-family:"Noto Serif JP",serif;
  font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.65;
}

/* Property recommend */
.property-section{
  padding:96px 24px 104px;
}
.property-section .inner{max-width:1080px;margin:0 auto}
.property-section h3.section-ttl{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(26px,2.4vw,32px);font-weight:700;color:var(--ink);
  text-align:center;margin:0 0 56px;line-height:1.5;letter-spacing:.04em;
}
.property-section .section-en{
  display:block;text-align:center;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;color:var(--green);letter-spacing:.28em;
  margin-bottom:14px;font-weight:500;
}
.property-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:760px){.property-grid{grid-template-columns:1fr}}
.prop-card{
  border:1px solid var(--line);background:#fff;
  text-decoration:none;color:var(--ink-2);
  transition:all .3s;
}
.prop-card:hover{border-color:var(--green);text-decoration:none}
.prop-card .thumb{
  aspect-ratio:4/3;background:#f0ede4;overflow:hidden;
}
.prop-card .thumb img{width:100%;height:100%;object-fit:cover}
.prop-card .info{padding:18px 20px}
.prop-card .info .area{
  font-size:11px;color:var(--green);font-weight:500;
  letter-spacing:.05em;margin-bottom:6px;
}
.prop-card .info h4{
  font-family:"Noto Serif JP",serif;
  font-size:14px;font-weight:600;color:var(--ink);
  line-height:1.6;margin-bottom:8px;
}
.prop-card .info p{font-size:11.5px;color:var(--gray);line-height:1.7}

/* Center CTA */
.cta-section{
  text-align:center;padding:60px 24px;
  background:#fff;
}
.btn-rounded{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--green);color:#fff;
  padding:16px 44px;
  text-decoration:none;font-size:14px;font-weight:500;
  border-radius:999px;letter-spacing:.08em;
  transition:all .3s;
}
.btn-rounded:hover{background:var(--green-dark);text-decoration:none;color:#fff;transform:translateY(-2px)}
.btn-rounded::after{content:"";display:inline-block;width:16px;height:1px;background:currentColor;position:relative}
.btn-outline{
  display:inline-flex;align-items:center;gap:14px;
  background:#fff;color:var(--ink-2);
  padding:14px 36px;
  text-decoration:none;font-size:13px;font-weight:500;
  border:1px solid var(--ink-2);border-radius:999px;
  letter-spacing:.08em;transition:all .3s;
}
.btn-outline:hover{background:var(--ink);color:#fff;text-decoration:none;border-color:var(--ink)}

/* ============ MINIMAL FOOTER ============ */
.footer-min{
  background:#fff;
  border-top:1px solid var(--line);
  padding:48px 24px 56px;
}
.footer-min-inner{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:center;align-items:center;gap:18px;
  flex-wrap:wrap;
}
.footer-min .brand-mark{
  display:flex;align-items:center;justify-content:center;
}
.footer-min .brand-mark img{height:36px;width:auto;display:block}
.footer-min .footer-name{display:none}
.footer-copyright{
  margin-top:22px;text-align:center;
  font-family:"Inter",sans-serif;font-size:11px;
  color:var(--gray);letter-spacing:.06em;
}

/* ============ ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(20px);transition:all .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE — Comprehensive tablet/mobile audit pass
   - Tablet (≤1024px): keep PC structure, adjust layouts that
     don't translate (chapter-nav 3→2, plan-layout stack, etc.)
   - Mobile (≤640px): override prior 760px rules with refined
     spacing, nobr release, hero adjustments, data compaction
   ============================================================ */

/* Global guard against horizontal overflow */
html, body { overflow-x: clip; }

/* ===== TABLET (≤1024px) ===== */
@media (max-width:1024px){
  /* chapter nav: PC 3col → tablet 2col with 3rd centered */
  .chapter-nav{
    grid-template-columns:repeat(2,1fr);
    gap:16px;max-width:760px;
  }
  .chapter-nav .chapter-nav-card:nth-child(3){
    grid-column:1 / -1;
    max-width:calc(50% - 8px);
    justify-self:center;
  }
  /* plan layout: stack on narrower screens */
  .plan-layout{grid-template-columns:1fr;gap:36px}
  /* dev-message: stack portrait + body */
  .dev-message-body{grid-template-columns:1fr;gap:32px}
  .dev-message-portrait img{max-width:280px;margin:0 auto}
  /* plan legend: allow wrap on tablet */
  .plan-legend-strip{flex-wrap:wrap;gap:10px 18px}
  /* article body padding */
  .article-body{padding:0 32px 80px}
  /* hero content slightly narrower */
  .hero-content{max-width:min(78%, 700px)}
}

/* ===== MOBILE (≤640px) ===== */
@media (max-width:640px){
  /* ----- Hero ----- */
  .hero-cinema{
    /* chair at ~75% of source image — push image right so plant (at ~95%) goes off-screen */
    background-position:68% bottom;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:72vh;
  }
  .hero-frame{padding:28px 16px 32px;gap:18px}
  .hero-content{max-width:100%;padding:0}
  /* catch image: centered with small side gutters */
  .hero-catch-img{
    max-width:92%;width:92%;
    margin-left:auto;margin-right:auto;
    display:block;
  }
  .hero-title{margin-bottom:24px;font-size:clamp(20px,2.6vw,28px)}
  .hero-lede{
    font-size:14px;line-height:1.95;letter-spacing:.02em;
    max-width:100%;
  }
  /* hide forced breaks — let auto-phrase do the work */
  .hero-lede br{display:none}
  .hero-scroll{gap:10px;font-size:9px;letter-spacing:.32em}
  .hero-scroll .scroll-line{height:44px}

  /* ----- Chapter nav: full collapse ----- */
  .chapter-nav{
    grid-template-columns:1fr;gap:14px;max-width:none;
    padding:0 12px;margin:64px auto;
  }
  .chapter-nav .chapter-nav-card:nth-child(3){
    grid-column:auto;max-width:none;
    justify-self:stretch;
  }
  .chapter-nav-card{padding:22px 20px 18px}
  .chapter-nav-card .cn-label{font-size:18px;margin-bottom:10px}
  .chapter-nav-card .cn-ttl{font-size:14px;margin-bottom:14px}

  /* ----- NOBR release: free all bunsetsu wraps on mobile ----- */
  .lead-paragraph .nobr-line,
  .h2-chapter .ttl .nobr,
  .merit-section-wrap h3 .nobr,
  .merit-section-wrap .heading h3 .nobr,
  .merit-card h4 .nobr,
  .dev-message-body h4.headline .nobr,
  .dev-message-body h5.sub .nobr,
  .h4-sub .nobr,
  .h3-section .case-title .nobr{
    white-space:normal;display:inline;
  }

  /* ----- H2 chapter: tighter band ----- */
  .h2-chapter{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    margin-top:64px;
    margin-bottom:40px;
    padding:48px 16px 40px;
    position:relative;
  }
  .h2-chapter::before{
    font-size:clamp(96px,22vw,140px);
    top:42%;
  }
  .h2-chapter .ttl{
    font-size:clamp(22px,6.4vw,30px);
    letter-spacing:.02em;line-height:1.5;
  }
  .h2-chapter .chap-num{font-size:11px;letter-spacing:.22em}

  /* ----- Section title scale ----- */
  .h3-section{font-size:clamp(22px,5vw,28px);margin:56px 0 20px}
  /* stronger separator before subsequent CASE sections */
  .plan-figure-meta + .h3-section{
    margin-top:64px;padding-top:28px;
    border-top:1px solid var(--line);
  }
  .h4-sub{font-size:18px;margin:24px 0 16px}
  .merit-card h4{font-size:19px}
  .merit-section-wrap .heading h3{font-size:clamp(22px,5.4vw,26px)}

  /* ----- Lead paragraph (SP文字サイズ #4 再調整) ----- */
  .lead-paragraph{
    font-size:14px;
    line-height:1.95;letter-spacing:.02em;
    margin:32px auto 56px;
    max-width:none;
    padding:0 4px;
  }
  .lead-paragraph::before{font-size:12px;margin-bottom:10px}

  /* ----- Data: bar chart ----- */
  .bar-row{grid-template-columns:60px 1fr;gap:12px}
  .bar-row .year{font-size:13px}
  .bar-track{height:30px}
  .bar-seg{font-size:12px}

  /* ----- Line chart ----- */
  .line-chart-box{
    height:clamp(260px,68vw,340px);padding:18px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .line-chart-box svg{min-width:640px;display:block}
  .line-chart-box .peak{top:12px;right:12px;padding:6px 10px;z-index:2}
  .line-chart-box .peak .v{font-size:18px}
  .line-chart-box .peak .lbl{font-size:10px;letter-spacing:.14em}

  /* ----- Rank list (SP: badge+pct on top row, label on second row) ----- */
  .rank-list li{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "rank pct"
      "lbl  lbl";
    gap:6px 12px;
    padding:14px 0;font-size:14px;
    align-items:center;
  }
  .rank-list .rank{grid-area:rank}
  .rank-list .pct{grid-area:pct;justify-self:end;font-size:18px}
  .rank-list .lbl{grid-area:lbl;line-height:1.55}
  .rank-list .rank .badge{font-size:11px;padding:2px 8px}
  .rank-list li.top1{padding-left:14px;margin-left:-14px}
  .rank-list li.top1 .lbl{font-size:15px}
  .rank-list li.top1 .pct{font-size:24px}
  .rank-list li.top2 .pct{font-size:20px}

  /* ----- Pie chart ----- */
  .pie{width:170px;height:170px}
  .pie-center strong{font-size:14px}
  .pie-center{font-size:12px}
  .pie-display{flex-direction:column;gap:18px;align-items:center}
  .pie-legend{align-items:flex-start;text-align:left;width:100%}
  .pie-figure + .pie-figure{margin-top:24px}

  /* ----- Data figure ----- */
  .data-figure .fig-title{
    flex-direction:column;align-items:flex-start;gap:6px;
  }

  /* ----- Plan layout ----- */
  .plan-meta-box{gap:12px 18px;padding:18px 20px;margin:24px 0 14px}
  .plan-legend-strip{flex-wrap:wrap;gap:8px 14px}
  .h4-sub{margin-top:22px}

  /* CASE 01/02 sections: keep at article-body width (no negative margin needed now) */
  .article-body > .h3-section,
  .article-body > .plan-meta-box,
  .article-body > .plan-layout,
  .article-body > .plan-figure-meta{
    max-width:none;
  }
  .article-body > .plan-meta-box{
    padding-left:16px; padding-right:16px;
  }

  /* ----- CASE label (SP: badge on its own row above title) ----- */
  .h3-section{
    flex-direction:column;align-items:flex-start;
    gap:10px;padding-bottom:16px;
    border-bottom:1px solid var(--ink-2);
  }
  .h3-section .case-label{
    padding:5px 11px;gap:6px;
  }
  .h3-section .case-label .case-en,
  .h3-section .case-label .case-num{font-size:15px;letter-spacing:.06em}
  .h3-section .case-title{
    display:inline-block;line-height:1.45;
    font-size:19px;          /* fit on 1 line on SP */
    letter-spacing:.01em;
    white-space:nowrap;
  }
  /* override the nobr release so case-title stays on 1 line */
  .h3-section .case-title .nobr{
    white-space:nowrap;display:inline;
  }
  .plan-meta-box .plan-property{
    font-size:14px;padding-bottom:10px;margin-bottom:2px;
  }
  .plan-meta-box .plan-property .pp-label{
    font-size:9.5px;letter-spacing:.18em;margin-right:6px;
  }

  /* ----- Kameido gallery (SP) ----- */
  .kameido-gallery{margin:10px 0 24px;padding:0}
  .kameido-gallery .merit-thumbs .photo .cap{
    bottom:0;left:0;font-size:9.5px;padding:2px 7px;margin:0;
  }

  /* ----- Merit photos / thumbs ----- */
  .merit-photos{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  .merit-thumbs{grid-template-columns:1fr;gap:14px}
  /* text caption (below image, not overlay) */
  .merit-thumbs > .cap{font-size:11px;line-height:1.55;margin-top:6px}
  .merit-card{padding:28px 20px}

  /* ----- Dev message head: name to its own row ----- */
  .dev-message-head .name-inline{
    margin-left:0;margin-top:10px;width:100%;
    padding-top:10px;border-top:1px dotted var(--line);
  }

  /* ----- Property card (related-grid--two) ----- */
  .related-grid--two .related-card .thumb{aspect-ratio:600/588}
  .related-grid--two .related-card .info{padding:18px 20px 22px}
  .related-grid--two .related-card .info h4{font-size:16px;margin-bottom:14px}
  /* on touch devices, hover never fires — keep button visible/green */
  .related-grid--two .related-card .prop-cta{
    background:var(--green);color:#fff;
  }
  .related-grid--two .related-card .prop-cta i{transform:translateX(2px)}

  /* ----- Section subhead ----- */
  .related-section{padding:64px 18px 72px;margin-top:64px}
  .related-section h3.section-ttl{margin-bottom:24px;font-size:clamp(22px,5.4vw,26px)}
  .related-section .section-en{font-size:12px;margin-bottom:10px}
  .related-section .section-subhead{margin:-20px 0 32px}
  .related-section .section-subhead .sub-ja{font-size:16px}

  /* ----- Footer ----- */
  .footer-min{padding:32px 20px 40px}
}

/* ============================================================
   SP responsive polish — overflow / typography unification
   ============================================================ */
@media(max-width:760px){
  /* Container-level: only inner-content max-width clamp (no overflow clip — html/body already clips) */
  .merit-card,
  .data-figure,
  .related-section,
  .footer-min{
    max-width:100%;
  }

  /* ----- Body / lede line-height softening for SP readability ----- */
  body{ line-height:1.9; }
  .article-body{ font-size:15px; line-height:1.85; }
  .hero-lede{
    font-size:14px; line-height:1.9;
    font-weight:500; letter-spacing:.03em;
  }
  .merit-card p,
  .check-point p,
  .dev-message-body .text p{
    font-size:15px; line-height:1.85;
  }

  /* ----- nobr SP release (broader): let long phrases wrap inside boxes ----- */
  .plan-meta-box .nobr,
  .check-point .nobr,
  .dev-message-body .nobr,
  .related-card .nobr{
    white-space:normal; display:inline;
  }

  /* ----- Line chart: contain its own horizontal scroll within figure ----- */
  .line-chart-box{ max-width:100%; }
  .line-chart-box svg{ min-width:560px; }   /* slightly smaller min to reduce intra-box scroll */

  /* ----- Image caption overlays: unify bottom-left across all photos ----- */
  .merit-photos .photo{ position:relative; }
  .merit-photos .photo .cap{
    position:absolute; bottom:0; left:0; right:auto; top:auto;
    margin:0;
    font-size:10.5px; padding:3px 8px;
    line-height:1.55; word-break:break-word;
    max-width:calc(100% - 12px);
  }
  .merit-thumbs .photo .cap{
    position:absolute; bottom:0; left:0; right:auto; top:auto;
    margin:0;
    font-size:10.5px; padding:3px 8px; line-height:1.55;
    word-break:break-word;
    max-width:calc(100% - 12px);
  }
  .chapter-photo{ position:relative; }
  .chapter-photo .cap{
    left:0; right:auto; bottom:0; top:auto;
    background:rgba(0,0,0,.55); color:#fff;
    font-family:"Noto Sans JP",sans-serif; font-style:normal;
    font-size:10.5px; letter-spacing:.02em;
    padding:3px 8px; line-height:1.55;
    text-shadow:none;
    max-width:calc(100% - 12px);
    word-break:break-word;
  }
  .merit-photos .photo img,
  .merit-thumbs .photo img{
    max-width:100%; height:auto; display:block;
  }

  /* ----- Bar chart cat-single chip: shrink for narrow bars ----- */
  .bar-seg.cat-single > span{
    font-size:10px; padding:1px 5px; letter-spacing:0;
    white-space:nowrap;
  }

  /* ----- Plan direction marker: hide on SP (avoids overflow past drawing) ----- */
  .plan-drawing .plan-direction{ display:none; }

  /* ----- Dev message head: vertical stack for readability ----- */
  .dev-message-head{
    flex-direction:column; align-items:flex-start; gap:8px;
  }
  .dev-message-head .tag{ font-size:15px; letter-spacing:.05em; }
  .dev-message-head .position{ font-size:12.5px; line-height:1.7; }

  /* ----- Safety: any nobr that still overflows breaks naturally ----- */
  .nobr{ overflow-wrap:anywhere; }
}

/* ============================================================
   SP right-gap fix — disable text-wrap balance/pretty, tighten
   inner padding so text reaches edges
   ============================================================ */
@media(max-width:760px){
  /* Text-wrap: balance/pretty causes short lines on narrow viewport.
     Force normal wrap so lines use full width. */
  body p,
  .article-body p,
  .article-body > p,
  .lead-paragraph,
  .merit-card p,
  .check-point p,
  .dev-message-body .text p,
  .dev-message-body .text > p{
    text-wrap:wrap;
    letter-spacing:.02em;
  }
  h2, h3, h4, h5,
  .hero-title,
  .h2-chapter .ttl,
  .h3-section,
  .h3-section .case-title,
  .h4-sub,
  .merit-card h4,
  .merit-section-wrap .heading h3,
  .dev-message-body .text h4.headline,
  .dev-message-body .text h5.sub{
    text-wrap:wrap;          /* override default balance */
    letter-spacing:.02em;    /* tighter on SP */
  }

  /* Check Point inner padding: was 20px 24px PC default — too wide on SP */
  .check-point{
    padding:18px 14px;
    margin:24px 0;
  }

  /* Merit-card inner padding: tighten further to push text to edges */
  .merit-card{
    padding:24px 14px;
  }
  .merit-card h4{
    margin-bottom:18px;
    padding-bottom:14px;
    letter-spacing:.02em;
  }

  /* Dev message body text: ensure paragraphs use full width */
  .dev-message-body .text{
    padding:0;
  }

  /* Plan-meta-box left padding: tighten */
  .plan-meta-box{
    padding-left:14px; padding-right:14px;
  }
}

/* ============================================================
   Ultra-narrow (≤375px iPhone SE) further compaction
   ============================================================ */
@media(max-width:380px){
  .inner{ padding-left:14px; padding-right:14px; }
  .h2-chapter .ttl{ font-size:20px; }
  .merit-card{ padding:24px 16px; }
  .merit-card h4{ font-size:17px; }
  .h4-sub{ font-size:16px; }
  .lead-paragraph{ font-size:13.5px; }
  .pie{ width:160px; height:160px; }
  .related-section{ padding:48px 14px 56px; }
}