/* v4: 読む文字を大きく保ち、人物を場面の主役として見せる。 */
body{--reader-paper:#f1f4ed}body[data-chapter="1"]{--reader-paper:#faf0dc}body[data-chapter="2"]{--reader-paper:#eef5f5}body[data-chapter="3"]{--reader-paper:#fff0e5}body[data-chapter="4"]{--reader-paper:#eaf3e5}body[data-chapter="5"]{--reader-paper:#efedf5}body[data-chapter="6"]{--reader-paper:#fff0da}body[data-chapter="7"]{--reader-paper:#fff1da}
.scene .scene-inner>p:not(.eyebrow){font-size:20px!important;line-height:1.95!important;letter-spacing:.025em;font-weight:500;margin-bottom:25px;color:var(--ink)}
.scene .eyebrow{font-size:14px!important;font-weight:600;letter-spacing:.08em;margin-bottom:24px!important}
.scene .eyebrow span:not(.tiny-sun){font-size:12px}
.scene h1{font-size:clamp(76px,7vw,116px);line-height:1.3;margin-bottom:28px}
.scene h2{font-size:clamp(50px,4.7vw,76px);line-height:1.45;font-weight:500;margin-bottom:26px}
#focus h2,#expression h2{font-size:clamp(64px,5.7vw,94px);line-height:1.23}
#connection h2,#insight h2{font-size:clamp(48px,4.6vw,72px)}
.scene:not(.hero):not(.finale) .scene-inner{max-width:min(660px,51vw);margin-top:0!important}
.scene-right .scene-inner{width:45vw;min-width:0;max-width:650px!important}
.scene .chapter-detail{font-size:16px;font-weight:600;line-height:1.5;gap:24px;padding:14px 0;min-height:52px;border-bottom-color:#6c765d80}
.scene .chapter-detail>span{font-size:27px}
.journey-start{font-size:17px;font-weight:600;gap:20px}
.journey-start small{font-size:13px;font-weight:500;line-height:1.7;margin-top:6px}
.journey-start .round-arrow{width:60px;height:60px}
.light-interaction{font-size:16px;font-weight:600;gap:14px}
.light-interaction small{font-size:13px;font-weight:500;line-height:1.5;margin-top:6px}
.light-interaction>span:last-child{padding:12px 16px;background:#fff9eaf2;border:1px solid #ece1c4;color:#35432d;backdrop-filter:none;box-shadow:0 4px 18px #3346220a}
.light-symbol{width:68px;height:68px;background:#fff9eacd}
.finale .scene-inner{max-width:1000px}
.finale h2{font-size:clamp(48px,4.6vw,72px);line-height:1.4}
.finale .eyebrow{font-size:13px!important}
.finale .solid-button{font-size:16px;min-height:62px;padding:18px 28px}
.finale .final-service{font-size:15px;padding:16px 0}
.finale .replay{font-size:14px;margin-top:20px;min-height:36px}
.loop-cue{font-size:13px;bottom:12vh;letter-spacing:.05em}
.scroll-cue{font-size:11px}
@media(min-width:601px){body[data-chapter="3"] .atmosphere{background:linear-gradient(270deg,#fff0e5f7,#fff0e5f2 40%,#fff0e599 57%,transparent 75%),linear-gradient(0deg,#fff4e5ac,transparent 18%)}body[data-chapter="5"] .atmosphere{background:linear-gradient(270deg,#f1eef9f7,#f1eef9f2 40%,#f1eef999 57%,transparent 75%),linear-gradient(0deg,#eff1f2ac,transparent 18%)}}

.consultant-portrait{right:5.5vw;top:14vh;bottom:auto;width:min(42vw,590px);filter:none;box-shadow:0 24px 75px #27362724}
.consultant-portrait::before,.portrait-image::before{display:none}
.portrait-image{height:min(54vh,570px);aspect-ratio:auto;overflow:hidden;background:#fff}
.portrait-image img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;filter:none}
.consultant-portrait figcaption{margin:0;padding:20px 25px;text-align:left;background:#fffaf0;color:#293c33;text-shadow:none;border-left:4px solid #9a7b40}
.portrait-kicker{font-size:13px;letter-spacing:.06em;color:#536047;margin-bottom:9px}
.portrait-name{font-size:34px;letter-spacing:.12em;font-weight:500}
.portrait-name small{font-size:15px;margin-left:18px}
.portrait-message{font-size:15px;line-height:1.6;margin-top:10px;letter-spacing:.04em}
#growth .scene-inner{width:46vw;max-width:650px!important}
#growth h2{font-size:clamp(48px,4.5vw,70px)}
#growth .light-interaction{top:auto;bottom:15vh;left:var(--gutter);right:auto}
#growth.active .consultant-portrait{animation:consultant-arrive 1s .1s both}
@keyframes consultant-arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:601px) and (max-height:760px){
  .scene{padding-top:100px;padding-bottom:110px}
  .scene h1{font-size:76px;margin-bottom:18px}
  .scene h2,#connection h2,#insight h2{font-size:52px;margin-bottom:20px}
  #focus h2,#expression h2{font-size:62px}
  .scene .eyebrow{margin-bottom:18px!important}
  .scene .scene-inner>p:not(.eyebrow){margin-bottom:20px}
  .consultant-portrait{top:14vh;width:min(39vw,520px)}
  .portrait-image{height:48vh}
  .consultant-portrait figcaption{padding:14px 20px}
  .portrait-name{font-size:30px}.portrait-kicker{margin-bottom:6px}.portrait-message{margin-top:7px}
  #growth h2{font-size:50px}#growth .scene-inner{margin-top:-5vh!important}
  #growth .light-interaction{bottom:13vh}
  .finale{padding-top:13vh}.finale h2{font-size:48px}.finale .replay{margin-top:12px}
}
@media(min-width:601px) and (max-width:1000px){
  .scene .scene-inner>p:not(.eyebrow){font-size:18px!important}
  .scene h2,#growth h2,#connection h2,#insight h2{font-size:42px}
  #focus h2,#expression h2{font-size:54px}
  .scene .chapter-detail{font-size:15px}
  .consultant-portrait{width:40vw;right:4vw}
  .portrait-name{font-size:28px}.portrait-name small{font-size:14px;margin-left:12px}
  .portrait-kicker,.portrait-message{font-size:13px}
}
@media(max-width:900px){.journey-footer .chapter-status{grid-column:1;grid-row:1}.journey-footer .experience-controls{grid-column:2;grid-row:1}.journey-footer .chapter-nav{grid-column:1 / -1;grid-row:2}}
@media(max-width:600px){
  .header{background:linear-gradient(var(--reader-paper) 70%,transparent);padding-bottom:28px}
  .journey-footer{background:var(--reader-paper);border-top:1px solid #8b927533;padding-inline:12px;box-shadow:0 -8px 30px #f7f4e73d}
  .scene{padding:0 24px}
  .scene .scene-inner,.scene:not(.hero):not(.finale) .scene-inner{margin-top:16vh!important;width:100%;max-width:100%!important}
  .scene .scene-inner>p:not(.eyebrow){font-size:16px!important;line-height:1.9!important;letter-spacing:.01em;margin-bottom:18px;font-weight:500}
  .scene .scene-inner>p:not(.eyebrow) br{display:initial}
  .scene .eyebrow{font-size:12px!important;line-height:1.5;margin-bottom:18px!important;gap:10px}
  .scene .eyebrow span:not(.tiny-sun){font-size:11px}
  .scene h1{font-size:64px;line-height:1.32;margin-bottom:22px}
  .scene h2,#connection h2,#insight h2,#growth h2{font-size:36px;line-height:1.45;margin-bottom:18px}
  #focus h2,#expression h2{font-size:48px;line-height:1.25}
  #focus p:not(.eyebrow),#expression p:not(.eyebrow){margin-top:18px}
  .scene .chapter-detail{font-size:15px;min-height:46px;gap:22px;padding:11px 0}
  .journey-start{font-size:16px;gap:15px}.journey-start small{font-size:12px;display:block}
  .journey-start .round-arrow{width:54px;height:54px;flex:none}
  .light-interaction{font-size:15px;bottom:22vh;right:24px;gap:10px}
  .light-interaction small{font-size:12px;line-height:1.5}
  .light-interaction>span:last-child{padding:10px 12px;max-width:215px}
  .light-symbol{width:58px;height:58px;font-size:30px;flex:none}
  .finale .scene-inner{margin-top:15vh!important}
  .finale h2{font-size:34px;line-height:1.45}
  .finale .eyebrow{font-size:12px!important}
  .finale .solid-button{font-size:16px;min-height:58px;padding:15px 19px;gap:18px}
  .finale .final-service{font-size:14px;line-height:1.5;margin:6px auto 10px;min-height:44px;padding:12px 0}
  .finale .replay{font-size:13px;min-height:40px;margin-top:0;padding:10px 0}
  .loop-cue{font-size:11px;bottom:18vh;letter-spacing:0}
  .finale .end-credit{display:none}
  /* 小さな画面では第六章の中を読める長さにし、顔を縮小しない。 */
  #growth{display:block;overflow-y:auto;overscroll-behavior:auto;padding:0 24px 140px}
  #growth .scene-inner{margin-top:15vh!important;width:100%;max-width:100%!important}
  #growth .consultant-portrait{position:relative;width:100%;max-width:none;right:auto;left:auto;top:auto;bottom:auto;margin:26px 0 22px}
  #growth .portrait-image{height:auto;aspect-ratio:1.12}
  #growth .portrait-image img{object-position:50% 0%}
  #growth .consultant-portrait figcaption{padding:17px 20px}
  #growth .portrait-kicker{display:block;font-size:12px;margin-bottom:8px}
  #growth .portrait-name{font-size:30px}
  #growth .portrait-name small{display:inline-block;font-size:14px;margin-left:13px}
  #growth .portrait-message{display:block;font-size:14px;margin-top:8px}
  #growth .light-interaction{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin:8px 0 0;font-size:15px;max-width:100%;text-align:left}
  #growth .light-symbol{width:54px;height:54px;font-size:29px}
  #growth .light-interaction>span:last-child{max-width:none;padding:10px 12px;font-size:15px}
  #growth .light-interaction small{font-size:12px}
}
@media(max-width:600px) and (max-height:700px){
  .scene:not(#growth){overflow-y:auto;overscroll-behavior:auto;padding-bottom:145px;display:block}
  .scene .scene-inner,.scene:not(.hero):not(.finale) .scene-inner{margin-top:15vh!important}
  .scene h1{font-size:55px}.scene h2,#connection h2,#insight h2,#growth h2{font-size:32px}
  #focus h2,#expression h2{font-size:42px}
  .scene .eyebrow{margin-bottom:14px!important}
  .light-interaction{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:70px 0 0}
  .finale .loop-cue{position:relative;left:auto;right:auto;bottom:auto;transform:none;justify-content:center;margin:36px 0 0;white-space:normal;line-height:1.6}
  .finale h2{font-size:32px}.finale .scene-inner{margin-top:15vh!important}
}
@media(max-height:500px) and (orientation:landscape){
  .scene{padding:74px 34px 100px}
  .scene .scene-inner,.scene:not(.hero):not(.finale) .scene-inner{margin-top:0!important;max-height:calc(100dvh - 172px);overflow-y:auto;overscroll-behavior:auto;padding-right:18px}
  .scene .scene-inner>p:not(.eyebrow){font-size:16px!important;line-height:1.8!important;margin-bottom:16px}
  .scene .eyebrow{font-size:12px!important;margin-bottom:12px!important}
  .scene h1{font-size:46px}.scene h2,#growth h2,#connection h2,#insight h2{font-size:34px}
  #focus h2,#expression h2{font-size:42px}
  .scene .chapter-detail{font-size:14px;padding:10px 0}
  .light-interaction{font-size:14px;top:auto!important;bottom:23vh;left:auto;right:5vw}.light-interaction small{font-size:12px}
  .light-symbol{width:48px;height:48px}
  .consultant-portrait{top:18vh;right:6vw;bottom:auto;width:38vw;display:grid;grid-template-columns:48% 52%;box-shadow:0 12px 30px #26362722}
  .portrait-image{height:43vh;min-height:160px}
  .consultant-portrait figcaption{padding:16px 12px;border-left:0;display:flex;flex-direction:column;justify-content:center}
  .portrait-kicker{font-size:12px;line-height:1.5;margin-bottom:8px}
  .portrait-name{font-size:24px}.portrait-name small{display:block;margin:8px 0 0;font-size:13px}
  .portrait-message{font-size:13px;line-height:1.6;margin-top:12px}
  #growth .scene-inner{max-width:49%!important}
  #growth .light-interaction{bottom:16vh;left:auto;right:7vw;font-size:14px}
  #growth .light-interaction>span:last-child{font-size:14px;padding:9px}.light-interaction small,#growth .light-interaction small{font-size:12px}
  .finale{padding-top:75px}.finale h2{font-size:36px}.finale .solid-button{font-size:15px;min-height:50px;padding:13px 20px}
  .finale .final-service{font-size:14px}.finale .replay{font-size:13px}
  .loop-cue{right:4vw;left:auto;bottom:17vh;font-size:11px;max-width:32vw;white-space:normal;line-height:1.6}
}
.reduced #growth.active .consultant-portrait{opacity:1;animation:none;transform:none}
@media(prefers-reduced-motion:reduce){#growth.active .consultant-portrait{opacity:1;animation:none;transform:none}}