/* hikari（グローランス光）PC版 */
:root {
  --hikari-card-pad: 32px;
}

.hikari-hero,
.hikari-strip,
.hikari-problems,
.hikari-about,
.hikari-compare,
.hikari-security,
.hikari-benefits {
  margin-inline: auto;
  position: relative;
}

.hikari-inner {
  width: var(--site-width);
  margin-inline: auto;
  padding-inline: 22px;
}

/* 共通部品 */

.hikari-hero h1 {
  font-family: 'Orbitron', sans-serif;
}

/* hero */

.hikari-hero {
  height: 322px;
}

.hikari-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: -150px;
  width: 100%;
  height: 522px;
  background: #000;
}

.hikari-hero__bg {
  position: absolute;
  left: 0;
  top: -150px;
  width: 100%;
  height: 522px;
  object-fit: cover;
  opacity: 0.6;
}

.hikari-hero__content {
  width: 930px;
  margin: 0 auto;
  padding-top: 30px;
  position: relative;
}
.hikari-hero__title { font-size: 70px; line-height: 1.1em; color: #FFFFFF; }
.hikari-hero__product { font-size: 14px; line-height: 1.4em; color: #FFFFFF; margin-top: 0;  }
.hikari-hero__tagline { font-size: 32px; line-height: 1.4em; color: var(--color-cyan); margin-top: var(--svc-space-2); }

/* hero直下の走路帯 + 待機キャラクター */
.hikari-strip {
  height: 170px;
}
.hikari-strip__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hikari-strip__character {
  position: absolute;
  left: 50%;
  margin-left: 160px;
  bottom: 10px;
  width: 212px;
  height: 496px;
  --motion-scale: 2;
  --motion-translate-x: 2;
  --motion-translate-y: 0;
  animation: motion-fadeIn 960ms 1ms cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards 1 paused,
    motion-dropIn 1200ms 1ms cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards 1 paused,
    motion-poke-06 2000ms 1200ms linear both infinite paused;
}

/* こんなお悩みはありませんか？ */
.hikari-problems {
  display: flow-root;
  background-color: rgb(80, 180, 64);
  color: #FFFFFF;
  padding-bottom: 60px;
}

.hikari-flag__label {
  position: absolute;
  left: 97px;
  top: 44px;
  width: 326px;
  font-size: 32px;
  line-height: 1.4em;
  color: #FFFFFF;
  text-align: center;
}

.hikari-problems__heading {
  font-size: 45px;
  line-height: 1.4em;
  text-align: center;
}

.hikari-bubbles {
  position: relative;
  height: 560px;
  margin: var(--svc-space-4) auto 0;
}

.hikari-bubble--1 { left: 36px; top: 80px; width: 283px; height: 200px; animation-delay: 0.7s, 0.7s; }
.hikari-bubble--1 .hikari-bubble__text { left: 17px; top: 55px; width: 249px; }
.hikari-bubble--2 { left: 327px; top: 0; width: 323px; height: 234px; animation-delay: 0.001s, 0.001s; }
.hikari-bubble--2 .hikari-bubble__text { left: 37px; top: 85px; width: 249px; }
.hikari-bubble--3 { left: 0px; top: 280px; width: 275px; height: 200px; animation-delay: 0.4s, 0.4s; }
.hikari-bubble--3 .hikari-bubble__text { left: 13px; top: 71px; width: 249px; }
.hikari-bubble--4 { left: 660px; top: 90px; width: 295px; height: 208px; animation-delay: 0.3s, 0.3s; }
.hikari-bubble--4 .hikari-bubble__text { left: 9px; top: 48px; width: 275px; }
.hikari-bubble--5 { left: 660px; top: 310px; width: 314px; height: 182px; animation-delay: 0.8s, 0.8s; }
.hikari-bubble--5 .hikari-bubble__text { left: 54px; top: 59px; width: 275px; }
.hikari-bubbles__couple {
  position: absolute;
  left: 285px;
  bottom: 0;
  width: 371px;
  height: 282px;
  object-fit: contain;
}
.hikari-problems__lead {
  text-align: center;
  font-size: 19px;
  line-height: 1.8em;
  max-width: 917px;
  margin: var(--svc-space-1) auto 0;
}

/* グローランス光とは？ */
.hikari-about {
  background-color: rgb(72, 165, 222);
  color: #FFFFFF;
  padding: var(--svc-space-4) 0 var(--svc-space-5);
}
.hikari-about__badge {
  width: 980px;
  height: 60px;
  margin: 0 auto;
}
.hikari-about__badge h2 { font-size: 35px; line-height: 1.4em; color: var(--color-accent-blue); }
.hikari-about__row {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  max-width: 980px;
  margin: var(--svc-space-4) auto 0;
}
.hikari-about__image { width: 459px; height: 344px; object-fit: contain; flex: none; }
.hikari-about__text { font-size: 18px; line-height: 1.7em; text-align: justify; }
.hikari-about__text ul { font-size: 20px; }
.hikari-about__text > * + * { margin-top: var(--svc-space-2); }

.hikari-about__card {
  --motion-translate-x: 0px;
  --motion-translate-y: 60px;
  animation: motion-floatIn 1200ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards 1 paused;
}
.hikari-about__card h2 { font-size: 36px; line-height: 1.1em; text-align: center; }
.hikari-about__card p { font-size: 18px; line-height: 1.7em; margin: var(--svc-space-1) 0 0; }
.hikari-about__card .svc-pill p { margin: 0; font-size: 22px; color: var(--color-accent-blue); }

/* 法人向けに最適化された回線設計 */
.hikari-compare {
  background-color: rgb(255, 248, 0);
  color: #000;
  padding: var(--svc-space-4) 0 var(--svc-space-5);
}
.hikari-compare__badge { width: 980px; height: 60px; margin: 0 auto; }
.hikari-compare__badge h2 { font-size: 35px; line-height: 1.4em; color: #FFFFFF; }
.hikari-compare__lead { text-align: center; font-size: 20px; line-height: 1.7em; margin-top: var(--svc-space-3); }
.hikari-compare__grid {
  display: flex;
  gap: 26px;
  max-width: 980px;
  margin: var(--svc-space-3) auto 0;
}
.hikari-compare__grid .svc-card { margin-top: 0; max-width: none; }
.hikari-compare__grid .svc-card-black { padding: var(--hikari-card-pad) 70px; }
.hikari-compare__grid h2 { font-size: 30px; line-height: 1.1em; text-align: center; }
.hikari-compare .svc-card-black-fill { color: #000; padding: var(--hikari-card-pad) 120px; }
.hikari-compare .svc-card-black-fill p { color: #000; }
.hikari-compare__grid p { font-size: 16px; line-height: 1.7em; margin: 0; }
.hikari-compare__grid .svc-list li { font-weight: 600; }

/* セキュリティとの一体設計 */
.hikari-security {
  background-color: rgb(232, 230, 230);
  color: #000;
  padding: var(--svc-space-5) 0 var(--svc-space-5);
}
.hikari-security__badge { width: 980px; height: 68px; margin: 0 auto; }
.hikari-security__badge h2 { font-size: 35px; line-height: 1.4em; color: #FFFFFF; }
.hikari-security__text {
  max-width: 980px;
  margin: var(--svc-space-4) auto 0;
  font-size: 18px;
  line-height: 1.7em;
  font-weight: 400;
  text-align: justify;
}
.hikari-security .svc-card { color: #000; margin-top: var(--svc-space-4);  width: 880px; }
.hikari-security .svc-card h2 { font-size: 36px; line-height: 1.1em; text-align: center; }
.hikari-security__switch-lead { text-align: center; font-size: 18px; line-height: 1.7em; margin: var(--svc-space-3) 0 0; }
.hikari-security .svc-card p:not(.hikari-security__switch-lead) { font-size: 18px; line-height: 1.7em; margin: var(--svc-space-2) 0 0; }
.hikari-security__clients-heading {
  font-size: 40px;
  line-height: 1.1em;
  text-align: center;
  margin-top: var(--svc-space-5);
}
.hikari-security__clients-lead {
  width: 800px;
  margin: var(--svc-space-2) auto 0;
  font-size: 20px;
  line-height: 1.7em;
}
.hikari-security__clients {
  display: flex;
  flex-direction: column;
  gap: var(--svc-space-1);
  width: 690px;
  margin: var(--svc-space-3) auto 0;
}
.hikari-security__clients .svc-pill { height: 60px; }
body:not(.device-mobile-optimized) .hikari-security__clients .svc-pill p { font-size: 28px; line-height: 1.6em; color: #FFFFFF; }
.hikari-security__detail {
  max-width: 850px;
  margin: var(--svc-space-4) auto 0;
  font-size: 18px;
  line-height: 1.7em;
}
.hikari-security__detail p { margin: var(--svc-space-1) 0 0; }
.hikari-security__detail p:first-child { margin-top: 0; }
.hikari-security__detail .svc-list { font-size: 20px; text-align: justify; margin: var(--svc-space-2) 0; }

/* 導入メリット / グローランスの強み / 街並み */
.hikari-benefits {
  background-color: rgb(72, 165, 222);
  color: #FFFFFF;
  padding-top: var(--svc-space-4);
}
.hikari-benefits__cards {
  display: flex;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.hikari-benefits .svc-card {
  flex: 1 1 0;
  --motion-translate-x: 0px;
  --motion-translate-y: 60px;
  animation: motion-floatIn 1200ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards 1 paused;
}
.hikari-benefits h2 { font-size: 36px; line-height: 1.1em; text-align: center; }
.hikari-benefits .svc-card .svc-pill { margin-top: var(--svc-space-1); padding: 10px 36px; }
.hikari-benefits .svc-card .svc-pill:first-of-type { margin-top: var(--svc-space-3); }
.hikari-benefits .svc-card .svc-pill p { font-size: 22px; font-weight: 800; color: var(--color-accent-blue); }
.hikari-benefits__note { font-size: 16px; line-height: 1.7em; margin: var(--svc-space-2) 0 0; }
.hikari-benefits__lead {
  text-align: center;
  font-size: 19px;
  line-height: 1.8em;
  max-width: 917px;
  margin: var(--svc-space-4) auto 0;
}

#hikari-superman-flyby { left: 1009px; }