/* ===== RESET / BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #1B2B3A;
  background: #E9E9E9;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

:root {
  --brand: #1779CD;
  --ink: #1B2B3A;
}

/* ===== ローディング画面 ===== */
.p-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity .6s ease, visibility .6s ease;
}
.p-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.p-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
}
.p-loader__mark { position: relative; width: 44px; height: 44px; }
.p-loader__mark__arc {
  transform-origin: 22px 22px;
  animation: loaderSpin 1s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.p-loader__logo {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .06em;
  color: var(--ink);
}
.p-loader__logo span { color: var(--brand); margin-left: 2px; }
.p-loader__bar {
  width: clamp(140px, 20vw, 200px);
  height: 3px;
  background: #E3ECF6;
  border-radius: 2px;
  overflow: hidden;
}
.p-loader__bar__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand);
  border-radius: 2px;
  transition: width .15s linear;
}
.p-loader__percent {
  font-family: "Poppins", sans-serif;
  font-size: clamp(11px, 1.2vw, 13px);
  color: #7A8A99;
  letter-spacing: .05em;
}
.p-loader__percent span { margin-left: 1px; }

/* ===== ヘッダー ===== */
.p-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 50;
  opacity: 0;
  transform: translateY(-12px);
}
.is-revealed .p-header {
  animation: heroFadeIn .7s ease forwards;
  animation-delay: .1s;
}
.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2.5vw, 24px) clamp(16px, 4vw, 48px);
}
.p-header__logo {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: .06em;
  color: var(--ink);
}
.p-header__logo span { color: var(--brand); margin-left: 2px; }
.p-header__burger {
  position: relative;
  width: clamp(44px, 4vw, 50px);
  height: clamp(44px, 4vw, 50px);
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.p-header__burger svg { width: 20px; height: 14px; position: relative; z-index: 2; }
.p-header__burger__pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .35;
  animation: scaleout 1.6s infinite ease-in-out;
  z-index: 1;
}
@keyframes scaleout {
  0% { transform: scale(.7); opacity: .35; }
  100% { transform: scale(1); opacity: 0; }
}

/* ===== ヒーロー ===== */
.p-hero {
  position: relative;
  width: 100%;
  height: clamp(560px, 56.25vw, 810px);
  background: #DDDDDD;
  overflow: hidden;
}
.p-hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* 写真コラージュ（切り抜き人物） */
.p-hero__collage { position: absolute; inset: 0; }
.p-hero__ph {
  position: absolute;
  opacity: 0;
  transform: translateY(24px);
}
.p-hero__ph img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(20, 30, 45, .22));
}
.is-revealed .p-hero__ph { animation: heroFadeIn .8s ease forwards; }

.p-hero__ph--walk   { left: 38%; top: 19%;  width: 17%; z-index: 5; animation-delay: 0s; }
.p-hero__ph--run    { left: 17%; top: 24%;  width: 19%; z-index: 4; animation-delay: .3s; }
.p-hero__ph--jump   { left: 3%;  top: 3%;   width: 16%; z-index: 3; animation-delay: .6s; }
.p-hero__ph--laptop { left: 23%; top: 2%;   width: 11%; z-index: 2; animation-delay: .9s; }
.p-hero__ph--talk   { left: 68%; top: 3%;   width: 18%; z-index: 6; animation-delay: 1.2s; }
.p-hero__ph--cross  { left: 71%; top: 43%;  width: 13%; z-index: 6; animation-delay: 1.5s; }

/* 縦書きキャッチコピー */
.p-hero__copy {
  position: absolute;
  top: 6%;
  right: clamp(20px, 6vw, 74px);
  writing-mode: vertical-rl;
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.35;
  color: var(--brand);
  opacity: 0;
  z-index: 8;
}
.is-revealed .p-hero__copy {
  animation: heroFadeIn 1s ease forwards;
  animation-delay: 1.9s;
}
.p-hero__copy span { display: inline-block; }

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.p-header, .p-hero__copy { transform: none; }

/* ===== ニュース帯 ===== */
.p-hero__news {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(16px, 2vw, 22px) clamp(20px, 4vw, 56px);
  max-width: 92%;
  border-radius: 0 8px 8px 0;
}
.p-hero__news__label {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--brand);
  letter-spacing: .05em;
}
.p-hero__news__date {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 1.2vw, 14px);
  color: #7A8A99;
  white-space: nowrap;
}
.p-hero__news__text {
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--ink);
}

/* ===== レスポンシブ ===== */
@media screen and (max-width: 767px) {
  .p-hero { height: auto; min-height: 100vh; padding-top: 80px; padding-bottom: 90px; }
  .p-hero__inner { position: relative; height: clamp(420px, 130vw, 560px); }
  .p-hero__copy { top: 2%; right: clamp(14px, 5vw, 24px); font-size: clamp(18px, 6vw, 26px); }
  .p-hero__ph--walk   { left: 34%; top: 34%; width: 28%; }
  .p-hero__ph--run    { left: 4%;  top: 42%; width: 32%; }
  .p-hero__ph--jump   { left: 2%;  top: 4%;  width: 26%; }
  .p-hero__ph--laptop { left: 30%; top: 2%;  width: 18%; }
  .p-hero__ph--talk   { left: 58%; top: 4%;  width: 30%; }
  .p-hero__ph--cross  { left: 62%; top: 46%; width: 22%; }
  .p-hero__news {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    margin: 24px 16px 0;
    border-radius: 8px;
  }
}