.section-hero { padding-block:36px 60px; }
.hero-grid { grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:30px; }
.hero-content { position:relative; z-index:2; }
.hero-role-title { font-size:clamp(18px,1.7vw,24px); word-break:normal; text-wrap:wrap; }
.hero-role-title .role-unit { white-space:nowrap; }
.hero-lead { font-size:14px; color:var(--ink-mid); }

@media(max-width:900px) and (min-width:701px){.hero-grid{gap:18px}.hero-name{font-size:56px}.hero-lead br{display:none}}
@media(max-width:700px){.hero-grid{grid-template-columns:1fr;gap:5px}.section-hero{padding-top:35px;padding-bottom:38px}.hero-name{font-size:54px}.hero-role-title{font-size:18px}.hero-lead{font-size:13px;margin-bottom:8px}.hero-lead br{display:none}.hero-statement{font-size:18px}}

.hero-card.word-sky { padding:0; width:100%; aspect-ratio:1; position:relative; isolation:isolate; overflow:clip; overflow-clip-margin:16px; }
.word-sky .hero-card-orbit { position:absolute; width:82%; top:9%; left:9%; margin:0; opacity:1; animation:none; border-color:#bcc2c9; }
.word-sky .hero-card-orbit::before { border-color:#e9aebf; }
.word-sky .hero-card-orbit::after { border-color:#86cba0; }
.sky-word { position:absolute; font-family:var(--font-body); font-weight:300; white-space:nowrap; line-height:1.6; letter-spacing:.09em; color:var(--ink-mid); }
.sky-word.work { font-size:17px; }
.sky-word.field { font-size:12px; color:#696f77; }
.sky-rinkaku { top:10%; left:8%; }
.sky-book { top:28%; right:0; }
.sky-zanzo { top:28%; left:18%; }
.sky-world { top:58%; right:15%; }
.sky-lp { top:73%; left:5%; }
.sky-genzaichi { top:87%; right:5%; }
@media (min-width:701px) and (max-width:900px) { .sky-word.work { font-size:14px; } .sky-word.field { font-size:11px; } }
@media (max-width:700px) { .hero-card.word-sky { max-width:390px; margin:24px auto 0; } .sky-word.work { font-size:15px; } .sky-word.field { font-size:11px; } }

.word-sky .hero-card-orbit { pointer-events:none; }
.star-point { position:absolute; z-index:2; width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--ink-mid); cursor:default; -webkit-tap-highlight-color:transparent; }
.star-symbol { display:grid; place-items:center; width:30px; height:30px; margin:auto; border-radius:50%; background:var(--paper); border:1px solid #d5d9dd; font-family:var(--font-body); font-size:19px; font-weight:400; transition:transform .3s ease,border-color .3s ease; }
.star-point:nth-of-type(2n) .star-symbol { color:#328454; }
.star-point:nth-of-type(2n+1) .star-symbol { color:#ce697f; }
.star-label { position:absolute; top:48px; left:50%; transform:translate(-50%,6px); width:max-content; max-width:180px; white-space:nowrap; font:300 14px/1.8 var(--font-body); letter-spacing:.08em; color:var(--ink-mid); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease,transform .28s ease,visibility .28s; }
.star-point:hover .star-label,.star-point:focus-visible .star-label,.star-point[aria-expanded="true"] .star-label { opacity:1; visibility:visible; transform:translate(-50%,0); }
.star-point:hover .star-symbol,.star-point:focus-visible .star-symbol,.star-point[aria-expanded="true"] .star-symbol { transform:scale(1.12); border-color:#b6c3ba; }
.star-point:focus-visible { outline:1px solid #328454; outline-offset:3px; border-radius:50%; }
.point-1 { left:26%; top:8%; }
.point-2 { right:7%; top:27%; }
.point-3 { left:12%; top:37%; }
.point-4 { right:24%; top:51%; }
.point-5 { left:26%; top:70%; }
.point-6 { right:9%; top:76%; }
.point-2 .star-label,.point-6 .star-label { left:auto; right:-5px; transform:translateY(6px); }
.point-2:hover .star-label,.point-2:focus-visible .star-label,.point-2[aria-expanded="true"] .star-label,.point-6:hover .star-label,.point-6:focus-visible .star-label,.point-6[aria-expanded="true"] .star-label { transform:translateY(0); }
@media (max-width:700px) { .star-label { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .star-label,.star-symbol { transition:none; } }

.word-sky .hero-card-orbit i { display:none; }
.sky-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; font-family:var(--font-body); font-weight:500; font-size:19px; letter-spacing:.12em; line-height:1.5; color:var(--ink-mid); }
.star-label { font-weight:500; }
.star-point.point-3 .star-symbol { color:#328454; }
.star-point.point-4 .star-symbol { color:#ce697f; }
@media (max-width:700px) { .sky-center { font-size:17px; } }

.star-label { font-family:var(--font-body); font-weight:300; }
.point-center { left:50%; top:50%; transform:translate(-50%,-50%); }
.star-point.point-center .star-symbol { width:.55rem; height:.55rem; border:0; background:var(--accent-pink); border-radius:50%; box-shadow:0 0 0 .55rem rgba(251,96,127,.12); }
.point-center .star-label { top:47px; }
.star-point.point-1 .star-symbol,.star-point.point-5 .star-symbol { color:#ce697f; }
.star-point.point-2 .star-symbol { color:#328454; }

.star-revolution { position:absolute; inset:0; animation:sky-revolve 140s linear infinite; animation-direction:var(--orbit-direction,normal); }
.star-face { position:relative; display:grid; place-items:center; width:44px; height:44px; animation:sky-upright 140s linear infinite; animation-direction:var(--orbit-direction,normal); }
.word-sky:hover .star-revolution,.word-sky:hover .star-face,.word-sky:focus-within .star-revolution,.word-sky:focus-within .star-face { animation-play-state:paused; }
.point-center { z-index:3; }
@keyframes sky-revolve { to { transform:rotate(360deg); } }
@keyframes sky-upright { to { transform:rotate(-360deg); } }
@media (prefers-reduced-motion:reduce) { .star-revolution,.star-face { animation:none; } }

.hero-lead br.copy-break { display:initial; }
