/* ===== トップのヒーロー(大きな写真の背景 + タイピング風の見出し) ===== */
.hero-b{--hb-top:#15528f;position:relative;overflow:hidden;color:#fff;background:#0b2f4d;isolation:isolate;
  min-height:clamp(620px,calc(100svh - 136px),880px);display:flex;flex-direction:column;justify-content:center}
.hb-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px),0) scale(1.04);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hc-slide{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;will-change:opacity,transform}
.hc-slide.is-on{opacity:1;animation:hc-zoom 9s ease-out forwards}
@keyframes hc-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.hc-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,#0b2f4de6 0%,#0b2f4dc2 34%,#0b2f4d66 62%,#0b2f4d33 100%),
  linear-gradient(0deg,#0b2f4dee 0%,#0b2f4d00 38%),
  linear-gradient(180deg,#15528f88 0%,#15528f00 22%)}

.hb-inner{position:relative;width:min(1240px,100%);margin:0 auto;padding:56px 6% 170px}
.hb-inner>*{max-width:min(760px,100%)}
.hb-eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.28em;font-weight:700;color:#bfe9f4;display:flex;align-items:center;gap:10px;font-variant-ligatures:none}
.hb-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#7fd8ef;box-shadow:0 0 0 0 #7fd8ef88;animation:hb-pulse 2.4s infinite}
@keyframes hb-pulse{0%{box-shadow:0 0 0 0 #7fd8ef88}70%{box-shadow:0 0 0 12px #7fd8ef00}100%{box-shadow:0 0 0 0 #7fd8ef00}}
.hb-identity{margin:0 0 22px;font-size:13px;letter-spacing:.2em;font-weight:600;color:#ffffffcc}
.hb-catch{margin:0;font-size:clamp(42px,7vw,108px);line-height:1.22;font-weight:800;letter-spacing:-.045em;text-shadow:0 4px 40px #0b2f4d99}
.hb-line{display:block}
.hb-char{display:inline-block}
.hb-hl{background:linear-gradient(100deg,#8fe3f7,#3bb3d4 55%,#9be7d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-desc{margin:34px 0 0;font-size:clamp(14px,1.25vw,17px);line-height:2.1;color:#e8f4fa;max-width:32em;letter-spacing:.06em;text-shadow:0 2px 20px #0b2f4d99}
.hb-actions{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:34px}
.hb-btn{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border-radius:40px;background:#fff;color:#15528f;font-weight:800;font-size:15px;letter-spacing:.04em;
  box-shadow:0 10px 30px #00000033;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.hb-btn span{display:inline-block;transition:transform .35s}
.hb-btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px #00000044}
.hb-btn:hover span{transform:translateX(5px)}
.hb-link{font-size:14px;font-weight:700;letter-spacing:.08em;color:#fff;border-bottom:1px solid #ffffff88;padding-bottom:4px}
.hb-area{margin:22px 0 0;font-size:12px;letter-spacing:.14em;color:#bfe9f4}

/* 事業のタグ */
.hb-chips{position:absolute;left:0;right:0;bottom:34px;z-index:3;display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;list-style:none;margin:0 auto;padding:0 6%;max-width:1240px}
.hb-chips li{margin:0}
.hb-chips a{display:inline-block;padding:11px 18px;border-radius:30px;font-size:13px;font-weight:700;letter-spacing:.05em;color:#fff;
  background:#ffffff1c;border:1px solid #ffffff44;backdrop-filter:blur(8px);animation:hb-bob 5.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s);
  transition:background .3s,color .3s}
.hb-chips a:hover{background:#fff;color:#15528f;animation-play-state:paused}
@keyframes hb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hb-scroll{position:absolute;right:4%;bottom:104px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;color:#ffffffaa;display:flex;align-items:center;gap:12px}
.hb-scroll:after{content:"";width:1px;height:56px;background:linear-gradient(#fff,transparent);animation:hb-drop 2s ease-in-out infinite;transform-origin:top}
@keyframes hb-drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 背景写真の切り替えバー */
.hc-pwrap{position:absolute;left:0;right:0;bottom:100px;z-index:3;width:min(1240px,100%);margin:0 auto;padding:0 6%}
.hc-progress{display:flex;gap:14px;max-width:560px}
.hc-p{flex:1;background:none;border:0;padding:10px 0;cursor:pointer}
.hc-p i{display:block;height:4px;border-radius:3px;background:#ffffff44;position:relative;overflow:hidden}
.hc-p i:after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#fff}
.hc-p.is-on i:after{animation:hc-bar 6.5s linear forwards}
.hc-paused .hc-p.is-on i:after{animation-play-state:paused}
.hc-static .hc-p.is-on i:after{animation:none;transform:scaleX(1)}
@keyframes hc-bar{to{transform:scaleX(1)}}

/* タイピング風の見出し(JSが動くときだけ、最初に隠す) */
.hb-js:not(.hb-fallback) .hb-char{opacity:0}
.hb-js:not(.hb-fallback) .hb-char.is-on{opacity:1}
.hb-js:not(.hb-fallback) .hb-identity,
.hb-js:not(.hb-fallback) .hb-desc,
.hb-js:not(.hb-fallback) .hb-actions,
.hb-js:not(.hb-fallback) .hb-area,
.hb-js:not(.hb-fallback) .hb-chips li{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.hb-js:not(.hb-fallback) .hb-identity{transform:none}
.hb-js.hb-start .hb-identity{opacity:1}
.hb-js.hb-revealed .hb-desc{opacity:1;transform:none;transition-delay:.1s}
.hb-js.hb-revealed .hb-actions{opacity:1;transform:none;transition-delay:.3s}
.hb-js.hb-revealed .hb-area{opacity:1;transform:none;transition-delay:.5s}
.hb-js.hb-revealed .hb-chips li{opacity:1;transform:none;transition-delay:calc(.6s + var(--i)*.09s)}
.hb-char.scramble{color:#7fd8ef;text-shadow:0 0 18px #7fd8ef88;-webkit-text-fill-color:#7fd8ef;background:none}
.hb-caret{display:inline-block;width:.07em;min-width:5px;height:.92em;margin:0 .04em 0 .02em;vertical-align:-.09em;background:#7fd8ef;box-shadow:0 0 16px #7fd8efaa;animation:hb-blink 1s steps(1) infinite}
.hb-caret.hb-caret-out{animation:hb-blink 1s steps(1) 3,hb-fade .6s ease 3s forwards}
@keyframes hb-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hb-fade{to{opacity:0;visibility:hidden}}

@media(max-width:1000px){.hero-b{min-height:clamp(600px,calc(100svh - 90px),820px)}.hb-scroll{display:none}.hc-pwrap{bottom:118px}}
@media(max-width:700px){
  .hero-b{min-height:clamp(640px,calc(100svh - 86px),860px)}
  .hb-inner{padding:40px 6% 200px}
  .hb-catch{font-size:clamp(38px,11.4vw,60px)}
  .hb-chips{bottom:22px;justify-content:flex-start;gap:8px}
  .hb-chips a{padding:9px 14px;font-size:12px}
  .hc-shade{background:linear-gradient(180deg,#0b2f4dcc 0%,#0b2f4d99 45%,#0b2f4de6 100%)}
  .hc-pwrap{bottom:130px}
  .hc-progress{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .hc-slide.is-on{animation:none}.hb-bg{transition:none}
  .hb-chips a,.hb-eyebrow .dot,.hb-scroll:after{animation:none}
  .hb-js .hb-char,.hb-js .hb-identity,.hb-js .hb-desc,.hb-js .hb-actions,.hb-js .hb-area,.hb-js .hb-chips li{opacity:1!important;transform:none!important}
}