:root{--paper:#f4f1e8;--ink:#173b31;--dark:#102f27;--deep:#091d18;--accent:#9a432f;--green:#87a95d;--line:#d9d7cc}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:#263c34;background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.9}.site-inner,.shell{width:min(1200px,calc(100% - 48px));margin:auto}.site-header{height:84px;background:#fff;border-bottom:1px solid #e5e5df}.site-header .site-inner{height:100%;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-size:24px;color:#161616}.mark{background:#9bc23c;color:white;border-radius:8px;padding:2px 9px;font-weight:900}.tagline{margin-left:auto;color:#6a746f;font-size:13px}.hero{height:430px;margin-top:28px;border-radius:22px;overflow:hidden;position:relative;background:#102c24}.hero-img{position:absolute;inset:0;background:url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg') center/cover no-repeat;filter:saturate(.82) contrast(1.03)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,25,20,.96) 0%,rgba(7,25,20,.86) 39%,rgba(7,25,20,.20) 70%,rgba(7,25,20,.05) 100%)}.hero-copy{position:absolute;left:54px;top:50px;max-width:690px;color:#fff}.hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:48px;line-height:1.34;margin:0 0 18px;letter-spacing:.01em}.hero p{font-size:17px;margin:0}.credit{position:absolute;right:16px;bottom:10px;color:rgba(255,255,255,.86);font-size:9px}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:900;color:#789e4f;margin-bottom:10px}.light{color:#bdd788}.intro,.companions,.modern{padding:68px 0}.intro h2,.companions h2,.modern h2,.dark h2,.oni h2,.verdict h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:38px;line-height:1.48;color:var(--ink);margin:0 0 28px}.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px}.copy p{font-size:15.5px;margin:0 0 17px}.pull{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:25px!important;font-weight:700;color:var(--accent);padding:15px 0;border-top:1px solid #d9c8bd;border-bottom:1px solid #d9c8bd}.lead{font-size:17px!important;font-weight:800;color:#345b4d}.question{align-self:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:27px 28px;box-shadow:0 12px 35px rgba(20,50,40,.05)}.question span{font-size:9px;letter-spacing:.17em;font-weight:900;color:#927a4a}.question b{display:block;margin:8px 0 14px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:39px;line-height:1.33;color:var(--ink)}.question small{font-size:12px;line-height:1.7;color:#68766f}.dark,.oni,.verdict{background:var(--dark);color:#e8efeb}.two{display:grid;grid-template-columns:1fr .88fr;gap:48px;align-items:stretch;padding:66px 0}.dark h2,.oni h2,.verdict h2{color:#fff}.dark .copy p,.oni .copy p,.verdict p{color:#e4ebe7}.dark-lead{color:#c4dc91!important;font-weight:800}.visual{margin:0;border-radius:15px;overflow:hidden;background:#d9d1bc;display:flex;flex-direction:column;min-height:390px}.visual>div{flex:1;min-height:340px;background-repeat:no-repeat}.visual figcaption{padding:9px 12px;background:#fff;color:#69766f;font-size:9px;line-height:1.5}.gate-img{background-image:url('/features/is-momotaro-really-a-hero/assets/section01-kobunsha-1885.jpg');background-size:cover;background-position:center 44%}.companions .two{padding:0}.reverse{grid-template-columns:.82fr 1fr}.dango-img{background-image:url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg');background-size:165%;background-position:center 82%}.exchange{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;margin:24px 0}.exchange div{background:#eef2e9;border-radius:10px;padding:15px 16px}.exchange span{display:block;color:#7d9857;font-size:10px;font-weight:900;letter-spacing:.12em}.exchange b{display:block;color:#29493e;font-size:17px}.exchange i{text-align:center;font-style:normal;color:#7c9660;font-size:22px}.oni{background:var(--deep)}.procession-img{background-image:url('/features/is-momotaro-really-a-hero/assets/section03-toyoharu-demons.jpg');background-size:128%;background-position:20% center}.modern-grid{display:grid;grid-template-columns:1fr 360px;gap:58px}.years{border-left:1px solid #b8beb5;padding-left:28px;align-self:start}.years div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid #d6d6ce}.years strong{font-family:Georgia,serif;font-size:29px;color:#8c4736}.years span{font-size:13px;line-height:1.55;color:#42584f}.verdict-inner{padding:70px 0;max-width:960px}.verdict blockquote{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:25px;line-height:1.65;border-left:4px solid #bad37e;padding:22px 28px;margin:30px 0;background:rgba(255,255,255,.045);color:#fff}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:54px 0 68px}.notes>div{background:#fff;border:1px solid #e0e0d9;border-radius:14px;padding:27px 30px}.notes h3{margin:0 0 10px;color:var(--ink);font-size:18px}.notes p,.notes li{font-size:12.5px;line-height:1.75}footer{background:#0b1914;color:#d9e4de}footer .site-inner{min-height:100px;display:flex;align-items:center;gap:26px;font-size:12px}.copyr{margin-left:auto}
@media(max-width:800px){.site-inner,.shell{width:min(100% - 26px,1200px)}.tagline{display:none}.hero{height:500px;margin-top:14px;border-radius:16px}.hero-img{background-position:63% center}.hero-overlay{background:linear-gradient(90deg,rgba(7,25,20,.93),rgba(7,25,20,.72) 68%,rgba(7,25,20,.22))}.hero-copy{left:24px;top:34px;right:18px}.hero h1{font-size:34px}.intro-grid,.two,.reverse,.modern-grid,.notes{grid-template-columns:1fr}.intro,.companions,.modern,.two,.verdict-inner{padding-top:48px;padding-bottom:48px}.intro h2,.companions h2,.modern h2,.dark h2,.oni h2,.verdict h2{font-size:29px}.question{display:none}.visual{min-height:320px}.visual>div{min-height:300px}.years{border-left:none;padding-left:0;border-top:1px solid #b8beb5}.exchange{grid-template-columns:1fr}.exchange i{transform:rotate(90deg)}footer .site-inner{flex-wrap:wrap;padding:24px 0}.copyr{margin-left:0;width:100%}}


/* ---- V3 visual corrections after Mori visual UAT ---- */

/* HERO: use a portrait illustration where Momotaro + dog/monkey/pheasant
   are immediately visible. The upper title text printed in the historical
   cover is cropped outside the visible area. */
.hero{
  background:#102f27;
}
.hero-img{
  left:46%;
  width:54%;
  right:0;
  background-image:url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg');
  background-size:cover;
  background-position:center;
  filter:saturate(.86) contrast(1.04);
}
.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(7,25,20,1) 0%,
      rgba(7,25,20,.98) 39%,
      rgba(7,25,20,.82) 48%,
      rgba(7,25,20,.22) 68%,
      rgba(7,25,20,.04) 100%);
}
.hero-copy{
  max-width:760px;
}
.hero h1{
  font-size:44px;
  line-height:1.36;
}
.hero h1 span{
  display:block;
  white-space:nowrap;
}
.credit{
  max-width:48%;
  text-align:right;
}

/* Intro question: no floating white card. */
.question{display:none!important}
.question-statement{
  align-self:center;
  border-left:4px solid #89a95c;
  padding:10px 0 12px 26px;
  margin:8px 0 0;
  background:transparent;
}
.question-statement span{
  display:block;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:900;
  color:#8f7442;
  margin-bottom:10px;
}
.question-statement b{
  display:block;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink);
  font-size:38px;
  line-height:1.35;
  margin-bottom:14px;
}
.question-statement small{
  display:block;
  color:#64736c;
  font-size:12px;
  line-height:1.75;
  max-width:230px;
}

/* Companions image: show the actual handoff of kibi-dango clearly,
   instead of an over-zoomed ambiguous crop. */
.dango-img{
  background-image:url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg');
  background-size:165%;
  background-position:center 82%;
}

/* Exchange graphic: icons make the relationship instantly readable. */
.exchange{
  grid-template-columns:1fr 54px 1fr;
  padding:18px;
  gap:12px;
}
.exchange-side{
  text-align:center;
  background:#eef2e9!important;
  padding:16px 14px 15px!important;
}
.icon-row{
  display:flex;
  justify-content:center;
  gap:8px;
  min-height:48px;
  margin-bottom:7px;
}
.icon-row.single{gap:0}
.animal-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid #d9dfd2;
  font-size:23px;
  line-height:1;
}

/* Oni-side image: battle/conquest scene now matches the prose. */
.procession-img{
  background-image:url('/features/is-momotaro-really-a-hero/assets/section03-toyoharu-demons.jpg');
  background-size:128%;
  background-position:20% center;
}

/* Verdict: cleaner, less performative. */
.verdict blockquote{
  font-size:23px;
}

@media(max-width:800px){
  .hero-img{
    left:32%;
    width:68%;
    background-position:center 76%;
  }
  .hero-overlay{
    background:linear-gradient(90deg,rgba(7,25,20,.98) 0%,rgba(7,25,20,.92) 46%,rgba(7,25,20,.45) 76%,rgba(7,25,20,.12));
  }
  .hero h1{font-size:32px}
  .hero h1 span{
    white-space:normal;
  }
  .credit{max-width:75%}
  .question-statement{
    margin-top:8px;
    padding-left:20px;
  }
  .question-statement b{font-size:31px}
  .question-statement small{max-width:none}
  .dango-img{
    background-size:125% auto;
    background-position:center 79%;
  }
  .exchange{
    grid-template-columns:1fr;
  }
  .exchange i{transform:rotate(90deg)}
}

/* V4 exchange icon correction */
.icon-row{display:flex;justify-content:center;align-items:center;gap:14px;min-height:72px;margin-bottom:10px}
.icon-row.single{gap:0}
.icon-badge{width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid #d8ded2;display:inline-flex;align-items:center;justify-content:center}
.exchange-icon{width:42px;height:42px;fill:none;stroke:#355b48;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.exchange-icon .eye{fill:#355b48;stroke:none}
.animal-icon{display:none!important}
.exchange-side span:not(.icon-badge){font-size:13px;letter-spacing:.02em}
.exchange-side b{font-size:22px}

/* V5: real generated illustration replaces symbolic icons */
.exchange-photo{
  display:block!important;
  padding:18px!important;
}
.exchange-photo-wrap{
  overflow:hidden;
  border-radius:14px;
  background:#eef2e9;
}
.exchange-photo-wrap img{
  display:block;
  width:100%;
  height:auto;
}
.exchange-labels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  margin-top:12px;
}
.exchange-labels>div{
  text-align:center;
  background:#eef2e9;
  border-radius:12px;
  padding:12px 10px 14px;
}
.exchange-labels span{
  display:block;
  color:#7d9b57;
  font-size:13px;
  font-weight:800;
  margin-bottom:3px;
}
.exchange-labels b{
  display:block;
  color:#234b3c;
  font-size:22px;
}
@media(max-width:800px){
  .exchange-labels{
    gap:12px;
  }
  .exchange-labels b{font-size:18px}
}


/* V6 MOBILE OVERFLOW HARDENING
   Momotaro V5 does not contain the alien-feature keep-all rule.
   This adds explicit shrinkability so Production integration cannot
   reproduce the same horizontal-scroll regression. */

.intro-grid > *,
.two > *,
.modern-grid > *,
.notes > *,
.exchange-photo > *,
.exchange-labels > *{
  min-width:0;
}

img, svg, video, canvas{
  max-width:100%;
}

@media(max-width:800px){
  .hero h1,
  .intro h2,
  .companions h2,
  .modern h2,
  .dark h2,
  .oni h2,
  .verdict h2{
    word-break:normal;
    overflow-wrap:anywhere;
    text-wrap:wrap;
  }

  .hero h1 span{
    white-space:normal !important;
  }

  .site-inner,
  .shell,
  .copy,
  .visual,
  .exchange-photo,
  .exchange-photo-wrap,
  .exchange-labels{
    min-width:0;
    max-width:100%;
  }
}



/* ARE Special 02 integration guard: this stylesheet is feature-local. */
body.are-special02 { min-width: 0; overflow-x: hidden; }
body.are-special02 .site-header { height: auto; }
body.are-special02 .site-header .shell { width: min(1200px, calc(100% - 48px)); }
body.are-special02 .site-footer { background: #0b1914; color: #d9e4de; }
body.are-special02 .site-footer .shell { width: min(1200px, calc(100% - 48px)); }
body.are-special02 .hero-copy, body.are-special02 .copy, body.are-special02 .visual,
body.are-special02 .intro-grid, body.are-special02 .two, body.are-special02 .modern-grid,
body.are-special02 .notes, body.are-special02 .exchange-photo, body.are-special02 .exchange-labels { min-width: 0; }
body.are-special02 .hero-copy { display: block; width: min(600px, calc(100% - 72px)); right: 18px; writing-mode: horizontal-tb; white-space: normal; overflow-wrap: anywhere; }
body.are-special02 .hero-copy .eyebrow { display: block; width: auto; height: auto; }
body.are-special02 .eyebrow { writing-mode: horizontal-tb; white-space: normal; word-break: normal; }
body.are-special02 .hero h1, body.are-special02 h2, body.are-special02 h3,
body.are-special02 p, body.are-special02 li { writing-mode: horizontal-tb; }

.are-special02-catalog-shelf { padding: 8px 0 68px; }
.are-special02-catalog-shelf .section-heading { margin-bottom: 20px; }
.are-special02-catalog-viewport { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; }
.are-special02-catalog-track { min-width: 0; overflow: hidden; }
.are-special02-catalog-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px)/6); gap: 8px; min-width: 0; }
.are-special02-catalog-button { width: 44px; height: 44px; border: 1px solid #315044; border-radius: 50%; background: #fff; color: #315044; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.are-special02-catalog-button:disabled { opacity: .4; cursor: default; }
@media(max-width:800px) {
  body.are-special02 .site-header .shell, body.are-special02 .site-footer .shell { width: min(100% - 26px, 1200px); }
  body.are-special02 .hero-copy { width: calc(100% - 42px); right: 18px; }
}
@media(max-width:560px) {
  .are-special02-catalog-viewport { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 8px; }
  .are-special02-catalog-grid { grid-auto-columns: calc((100% - 8px)/2); }
  .are-special02-catalog-button { width: 40px; height: 40px; }
}


/* Image-mapping correction: restore the original ZIP visual slots. */
body.are-special02 .hero-img { left: 0; right: 0; width: auto; background-image: url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg'); background-size: cover; background-position: center 74%; }
body.are-special02 .gate-img { background-image: url('/features/is-momotaro-really-a-hero/assets/section01-kobunsha-1885.jpg'); background-size: cover; background-position: center 44%; }
body.are-special02 .dango-img { background-image: url('/features/is-momotaro-really-a-hero/assets/section02-hasegawa-1886.jpg'); background-size: 165%; background-position: center 82%; }
body.are-special02 .procession-img { background-image: url('/features/is-momotaro-really-a-hero/assets/section03-toyoharu-demons.jpg'); background-size: 170% auto; background-position: 82% 86%; }
@media(max-width:800px) {
  body.are-special02 .hero-img { left: 0; right: 0; width: auto; background-position: center 74%; }
  body.are-special02 .dango-img { background-size: 165%; background-position: center 82%; }
}