/* Home page, 2026-10-05: the routes to the detail pages must be unmistakable,
   and Japanese copy must not break inside a word. Loaded last. */

/* ---- "詳しく見る": a filled label instead of a dark outline ---- */
.more,
#research .research-copy .more,
#bansou .bansou-copy .more {
  height:auto !important;
  min-height:56px !important;
  margin-top:20px !important;
  padding:14px 28px !important;
  border:0 !important;
  background:linear-gradient(115deg,#8ff5e6,#3fd2c0) !important;
  box-shadow:0 18px 38px -14px rgba(70,230,211,.6) !important;
  color:#03110f !important;
  font-size:1rem !important;
  font-weight:800 !important;
  letter-spacing:.04em;
}
.more::after {
  content:"" !important;
  flex:0 0 auto;
  width:32px;
  height:2px;
  margin-left:18px;
  background:#03110f;
  transition:width .25s ease;
}
.more:hover,
.more:focus-visible {
  background:linear-gradient(115deg,#c4fff6,#6eeadb) !important;
  box-shadow:0 22px 44px -14px rgba(70,230,211,.75) !important;
  transform:translateY(-2px);
}
.more:hover::after,
.more:focus-visible::after { width:46px; }
/* The scroll reveal leaves clip-path:inset(0) behind, which cut off this outline and the glow. A negative inset keeps the reveal wipe animatable. */
body.motion-ready .more.is-visible { clip-path:inset(-12px -36px -60px); }
.more:focus-visible { outline:3px solid #fff !important; outline-offset:4px; }

/* The research images are themselves the way into the research page. */
a.research-collage { color:inherit; text-decoration:none; }
.collage-cta {
  position:absolute;
  z-index:3;
  right:0;
  bottom:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:11px 18px 11px 20px;
  background:#5fe9db;
  color:#03110f;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.06em;
  clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px);
  transition:background .25s ease,padding .25s ease;
}
.collage-cta::after { content:""; width:22px; height:2px; background:currentColor; }
a.research-collage { position:relative; }
a.research-collage:hover .collage-cta,
a.research-collage:focus-visible .collage-cta { background:#c4fff6; padding-right:26px; }
a.research-collage:focus-visible { outline:3px solid #5fe9db; outline-offset:6px; }
a.research-collage figure { transition:filter .3s ease; }
body.motion-ready a.research-collage:hover figure { filter:brightness(1.12); }
body.motion-ready .collage-cta.is-visible { clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px); }

/* ---- Japanese line breaking ---- */
html[lang="ja"] :is(.sectitle,.lead,.research-long,.bansou-summary,.research-findings h3,.research-findings p,
  .bansou-points b,.profile-proof h3,.profile-proof p,.life-body h3,.life-body p,.profile-biography p,
  .trustlead,.nmdesc,.unified-media-copy h3,.unified-media-copy p,.aicone-detail,.research-meta dd,.more) {
  line-break:strict;
  word-break:auto-phrase;
}
.nb { display:inline-block; }
/* The research summary used to be cut off mid-sentence with an ellipsis. */
#research .research-copy .research-long {
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
}
/* A drop cap would split 「両手」「複数」 across two sizes. */
html[lang="ja"] .lead.drop::first-letter {
  float:none;
  margin:0;
  color:inherit;
  font:inherit;
}

/* Font play stays in the large phrases; section labels must read at a glance. */
.section-heading .eyebrow.font-script,
.section-heading .eyebrow.font-display {
  font-family:"Cormorant Garamond","Times New Roman",serif !important;
  font-style:italic;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em !important;
}

/* hqdefault.jpg carries YouTube's own letterbox; cropping to 16:9 removes only those bars. */
#bansou .bansou-media img { aspect-ratio:16/9; object-fit:cover !important; object-position:center !important; }

/* The two appearance thumbnails open the videos. */
a.bansou-video { display:block; min-width:0; color:inherit; text-decoration:none; }
a.bansou-video figcaption { display:flex; justify-content:space-between; gap:12px; }
a.bansou-video figcaption span { color:#5fe9db; font-weight:700; }
a.bansou-video:hover figure,a.bansou-video:focus-visible figure { border-color:#5fe9db; }
a.bansou-video:focus-visible { outline:3px solid #5fe9db; outline-offset:4px; }
/* .bansou-media>* is a scroll-reveal target; inset(0) would cut the focus ring. */
body.motion-ready a.bansou-video.is-visible { clip-path:inset(-10px); }

/* Outline letters must not overlap. */
#research .research-question { letter-spacing:-.025em !important; word-spacing:.1em; }

@media (max-width:760px) {
  .more,
  #research .research-copy .more,
  #bansou .bansou-copy .more { width:100%; justify-content:space-between; padding-inline:20px !important; font-size:.95rem !important; }
  .collage-cta { font-size:.8rem; padding:10px 14px 10px 16px; }
  /* The single phone image sits directly above its label, without an empty box around it. */
  #research .research-collage { min-height:0 !important; height:auto !important; gap:0; }
  #research .collage-cta { position:static; justify-content:space-between; clip-path:none; padding:13px 16px; }
  #bansou .bansou-media { margin-top:36px; }
  #research .research-question { font-size:clamp(1.75rem,8.8vw,2.6rem) !important; }
}

@media (prefers-reduced-motion:reduce) {
  .more,.more::after,.collage-cta,a.research-collage figure { transition:none !important; }
}