/* fix14 2026-09-30: orange CTA boxes with wipe (header + sub-btn, envelope on contact links only), corporate h1 2nd line .6em, services pathway outline circles, 10px radius on non-bleed photos */
.header-cta,.sub-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--orange);border-radius:10px;background:linear-gradient(var(--orange),var(--orange)) no-repeat left center/0% 100%,rgba(255,255,255,.75);color:var(--copy-navy);text-decoration:none;transition:background-size .4s cubic-bezier(.6,0,.2,1),color .3s}
.sub-btn{gap:14px;padding:16px 26px;font-weight:500}
.header-cta::before,.sub-btn[href^="storyi-contact"]::before{content:"\f0e0";font:var(--fa-font-solid);font-size:1.15em;color:var(--orange);transition:color .3s}
.sub-btn[href^="storyi-contact"]::before{font-size:1.4rem}
.header-cta:hover,.header-cta:focus-visible,.sub-btn:hover,.sub-btn:focus-visible{background-size:100% 100%,auto;color:var(--copy-navy)}
.header-cta:hover::before,.header-cta:focus-visible::before,.sub-btn[href^="storyi-contact"]:hover::before,.sub-btn[href^="storyi-contact"]:focus-visible::before{color:var(--copy-navy)}
@media (prefers-reduced-motion:reduce){.header-cta,.sub-btn{transition:none}}
#corporate-title br~.ph{font-size:.6em}
.sub-pathway > span{display:flex;align-items:center;justify-content:center;align-self:flex-start;flex:none;width:60px;height:60px;border-radius:50%;border:1px solid var(--turquoise);background:transparent;box-sizing:border-box;color:var(--turquoise);font:300 24px/1 "Albert Sans",sans-serif;letter-spacing:.02em}
@media (max-width:760px){.sub-pathway > span{width:44px;height:44px;font-size:18px}}
.sub-portrait-photo .img-slot,.sub-moment .img-slot,.sub-pathway > .img-slot,.sub-photo,.sub-article-row .thumb,.sub-seminar-card{border-radius:10px;overflow:hidden}
.sub-pathway-list > .sub-pathway{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;align-items:center}
.sub-pathway-list > .sub-pathway > span{grid-column:1;grid-row:1;margin:0}
.sub-pathway-list > .sub-pathway > strong{grid-column:2;grid-row:1;margin:0}
.sub-pathway-list > .sub-pathway > .img-slot{grid-column:1/-1;grid-row:2;align-self:end;margin-top:30px}
@media (max-width:760px){.sub-pathway-list > .sub-pathway{column-gap:14px}}
.sub-story-link.sub-btn{margin-top:1rem;font-weight:500}
.cta-actions .cta-primary.sub-btn{font-weight:500}
.sub-btn[href^="storyi-kyoko-story"]::before{content:"\f518"}
.sub-btn[href^="storyi-corporate"]::before,.sub-btn[href^="storyi-coaching"]::before{content:"\f15c"}
.sub-btn:not([href^="storyi-contact"])::before{font:var(--fa-font-solid);font-size:1.4rem;color:var(--orange);transition:color .3s}
.sub-btn:not([href^="storyi-contact"]):hover::before,.sub-btn:not([href^="storyi-contact"]):focus-visible::before{color:var(--copy-navy)}
.sub-voice-card,.sub-question-box,.sub-form-shell,.sub-category-filter button,.sub-pathway,.pathway-primary,.pathway-secondary,.c16-role{border-radius:10px}
.subpage input:not([type="radio"]):not([type="checkbox"]),.subpage select,.subpage textarea{border-radius:10px}

/* fix19b+fix21 2026-09-30: white bokeh circles drifting left to right on subpage hero gradient (two depth layers, transform-only, reduced-motion stops; fix21 = wide size spread) */
.subpage main > section:first-child{position:relative;isolation:isolate;overflow-x:clip;--bokeh-far-duration:70s;--bokeh-near-duration:40s}
.subpage main > section:first-child::before,.subpage main > section:first-child::after{content:"";position:absolute;inset-block:0;left:-100%;width:200%;z-index:-1;pointer-events:none;background-repeat:repeat-x;background-size:50% 100%;transform:translateX(0);animation-timing-function:linear;animation-iteration-count:infinite}
.subpage main > section:first-child::before{background-image:radial-gradient(circle 4px at 7% 12%,rgba(255,255,255,.36) 0 5%,transparent 100%),radial-gradient(circle 6px at 18% 58%,rgba(255,255,255,.42) 0 0%,transparent 100%),radial-gradient(circle 8px at 34% 30%,rgba(255,255,255,.50) 0 8%,transparent 100%),radial-gradient(circle 10px at 48% 78%,rgba(255,255,255,.58) 0 0%,transparent 100%),radial-gradient(circle 12px at 63% 8%,rgba(255,255,255,.66) 0 10%,transparent 100%),radial-gradient(circle 16px at 77% 44%,rgba(255,255,255,.74) 0 3%,transparent 100%),radial-gradient(circle 18px at 89% 66%,rgba(255,255,255,.80) 0 6%,transparent 100%),radial-gradient(circle 20px at 95% 22%,rgba(255,255,255,.46) 0 0%,transparent 100%),radial-gradient(circle clamp(16px,2vw,28px) at 16% 22%,rgba(255,255,255,.16) 0 4%,transparent 100%),radial-gradient(circle clamp(18px,2.8vw,40px) at 28% 78%,rgba(255,255,255,.22) 0 0%,transparent 100%),radial-gradient(circle clamp(20px,4vw,58px) at 40% 43%,rgba(255,255,255,.28) 0 7%,transparent 100%),radial-gradient(circle clamp(22px,5.6vw,80px) at 60% 8%,rgba(255,255,255,.34) 0 2%,transparent 100%),radial-gradient(circle clamp(24px,7vw,100px) at 74% 92%,rgba(255,255,255,.40) 0 0%,transparent 100%),radial-gradient(circle clamp(26px,8.8vw,128px) at 88% 56%,rgba(255,255,255,.46) 0 9%,transparent 100%),radial-gradient(circle 20px at -5% 22%,rgba(255,255,255,.46) 0 0%,transparent 100%);animation-name:storyi-bokeh-far;animation-duration:var(--bokeh-far-duration)}
.subpage main > section:first-child::after{background-image:radial-gradient(circle clamp(60px,20vw,280px) at 10% 38%,rgba(255,255,255,.36) 0 65%,transparent 100%),radial-gradient(circle clamp(60px,16vw,230px) at 40% 82%,rgba(255,255,255,.30) 0 62%,transparent 100%),radial-gradient(circle clamp(60px,12vw,172px) at 90% 16%,rgba(255,255,255,.44) 0 68%,transparent 100%),radial-gradient(circle clamp(156px,40vw,560px) at 25% 94%,rgba(255,255,255,.10) 0 60%,transparent 100%),radial-gradient(circle clamp(164px,35vw,500px) at 55% 52%,rgba(255,255,255,.17) 0 66%,transparent 100%),radial-gradient(circle clamp(172px,46vw,660px) at 75% 4%,rgba(255,255,255,.24) 0 70%,transparent 100%),radial-gradient(circle clamp(60px,20vw,280px) at 110% 38%,rgba(255,255,255,.36) 0 65%,transparent 100%),radial-gradient(circle clamp(60px,12vw,172px) at -10% 16%,rgba(255,255,255,.44) 0 68%,transparent 100%),radial-gradient(circle clamp(156px,40vw,560px) at 125% 94%,rgba(255,255,255,.10) 0 60%,transparent 100%),radial-gradient(circle clamp(164px,35vw,500px) at -45% 52%,rgba(255,255,255,.17) 0 66%,transparent 100%),radial-gradient(circle clamp(172px,46vw,660px) at -25% 4%,rgba(255,255,255,.24) 0 70%,transparent 100%);animation-name:storyi-bokeh-near;animation-duration:var(--bokeh-near-duration)}
@keyframes storyi-bokeh-far{to{transform:translateX(50%)}}
@keyframes storyi-bokeh-near{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.subpage main > section:first-child::before,.subpage main > section:first-child::after{animation:none}}
#c16-contact-form button.sub-btn{justify-self:center;justify-content:center;min-width:16em}

/* fix30 — Kyoko revision requests, 2026-10-05. Append-only. */
.hero-subcopy {
  background-color: rgba(255, 255, 255, .75);
  font-family: YakuHanJP, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 600;
}
.subpage main .title-sub, .title-sub {
  display: block;
  font-weight: 400;
  margin-top: .5em;
  color: var(--copy-navy);
}
.sub-pathway > .title-sub { font-size: 15.6px; }
.subpage main .sub-service > .title-sub { font-size: clamp(17.55px, 1.95vw, 26px); }
.service-card > .title-sub { font-size: 16.9px; }
#voices figure.sub-voice-card blockquote p,
#voices-coach figure.sub-voice-card blockquote p,
#voices-coaching figure.sub-voice-card blockquote p {
  text-align: justify;
}
article.sub-service[id^="program-"] .sub-service-body p {
  text-align: justify;
}
article.sub-service[id^="coaching-"] .sub-service-body p {
  text-align: justify;
}
.sub-program-page [data-slot="about-02"][data-ratio="3:4"] { aspect-ratio: 3 / 4; }
/* Subtitle placement respects the existing number badge and service grid. */
.services li > .title-sub { font-size: 15.6px; margin-top: .5em; margin-bottom: 1em; }
.sub-pathway-list > .sub-pathway > .title-sub {
  grid-column: 2; grid-row: 2;
  width: auto; height: auto; border: 0; border-radius: 0;
  font: 400 15.6px/1.8 YakuHanJP, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--copy-navy); letter-spacing: normal;
  margin: .5em 0 0; text-align: left;
}
.sub-pathway-list > .sub-pathway:has(> .title-sub) > .img-slot { grid-row: 3; }
@media (min-width: 761px) {
  #service-coach { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  #service-coach > .sub-num { margin-bottom: 48px; }
  #service-coach > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  #service-coach > .title-sub { grid-column: 1; grid-row: 3; }
  #service-coach > .sub-service-body { grid-column: 2; grid-row: 2 / 5; }
  #service-coach > .sub-illust { grid-column: 1; grid-row: 4; }
}
/* Measured heading sizes: pathway 16px; top 24px desktop / 21px mobile. */
.sub-pathway-list > .sub-pathway > .title-sub { font-size: 10.4px; }
@media (max-width: 760px) {
  .services li > .title-sub { font-size: 13.65px; }
}

/* fix30b — 2026-10-05. Append-only. */
/* Use normal Japanese break opportunities while keeping justified alignment. */
#voices figure.sub-voice-card blockquote p,
#voices-coach figure.sub-voice-card blockquote p,
#voices-coaching figure.sub-voice-card blockquote p,
article.sub-service[id^="coaching-"] .sub-service-body p,
article.sub-service[id^="program-"] .sub-service-body p {
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
/* Keep each separator with the preceding character; item interiors may wrap. */
.sub-index > p > .seminar-item-end { white-space: nowrap; }
@media (min-width: 761px) {
  /* Limit the coaching portrait only; preserve its 3:4 frame and image crop. */
  .sub-program-page .sub-portrait-photo:has([data-slot="about-02"]) {
    width: 100%;
    max-width: 450px;
    justify-self: end;
  }
}

/* fix30c — 2026-10-05. Append-only. */
/* Preserve phrase boundaries only in the seminar exploration headings. */
body[data-seminar-page] .sub-index[aria-labelledby="seminar-index-title"] > h3 {
  text-wrap: wrap;
}
body[data-seminar-page] .sub-index[aria-labelledby="seminar-index-title"] > h3 > .seminar-heading-phrase {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: inherit;
}
