* {
  box-sizing: border-box;
  font-feature-settings: "palt";
}

:root {
  --blue: #123fd8;
  --deep-blue: #04115f;
  --cyan: #12bff7;
  --gold: #8bdfff;
  --pink: #6ea8ff;
  --green: #6de4ff;
  --paper: #f6fbff;
  --ink: #07122e;
  --navy: #020b36;
  --ice: #eefaff;
  --line: #9de7ff;
  --platinum: #fbfdff;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  row-gap: 0;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 620px at 50% -220px, rgba(18, 191, 247, 0.18), transparent 64%),
    linear-gradient(180deg, #f9fdff 0%, #eaf7ff 100%);
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.design-frame {
  position: relative;
  overflow: hidden;
  background: var(--platinum);
  max-width: 100vw;
}

.design-canvas {
  display: block;
  transform-origin: left top;
}

.hero-frame {
  width: 860px;
  height: 1530px;
}

.hero {
  position: relative;
  width: 860px;
  height: 1530px;
  overflow: hidden;
  background:
    linear-gradient(112deg, transparent 0 11%, rgba(255, 255, 255, 0.76) 11.2% 11.8%, transparent 12.2% 100%),
    linear-gradient(112deg, transparent 0 34%, rgba(157, 231, 255, 0.16) 34.2% 34.8%, transparent 35.2% 100%),
    linear-gradient(112deg, transparent 0 76%, rgba(4, 17, 95, 0.07) 76.1% 76.7%, transparent 77.1% 100%),
    radial-gradient(ellipse 560px 420px at 16% 14%, rgba(255, 255, 255, 0.96), transparent 68%),
    radial-gradient(ellipse 680px 380px at 86% 14%, rgba(18, 191, 247, 0.22), transparent 66%),
    radial-gradient(ellipse 760px 520px at 8% 75%, rgba(18, 63, 216, 0.12), transparent 72%),
    linear-gradient(180deg, #fbfdff 0%, #edf9ff 52%, #f8fcff 100%);
  color: var(--ink);
  isolation: isolate;
  transform-origin: left top;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: 0;
  background:
    radial-gradient(circle at 84% 12%, rgba(18, 63, 216, 0.11) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 88% 20%, rgba(18, 191, 247, 0.12) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 74% 34%, rgba(6, 47, 151, 0.08) 0 1.3px, transparent 2px),
    radial-gradient(circle at 18% 57%, rgba(18, 191, 247, 0.075) 0 1.3px, transparent 2px),
    radial-gradient(circle at 42% 78%, rgba(255, 255, 255, 0.58) 0 1.4px, transparent 2.2px),
    repeating-linear-gradient(106deg, transparent 0 84px, rgba(18, 63, 216, 0.042) 85px 86px, rgba(18, 191, 247, 0.052) 87px 88px, transparent 89px 164px),
    linear-gradient(106deg, transparent 0 22%, rgba(255, 255, 255, 0.68) 22.1% 22.6%, transparent 23% 100%),
    linear-gradient(106deg, transparent 0 47%, rgba(18, 191, 247, 0.08) 47.2% 47.8%, transparent 48.1% 100%),
    linear-gradient(106deg, transparent 0 64%, rgba(4, 17, 95, 0.055) 64.2% 64.8%, transparent 65.1% 100%),
    linear-gradient(106deg, transparent 0 84%, rgba(18, 63, 216, 0.06) 84.2% 84.8%, transparent 85.2% 100%);
  background-size:
    44px 44px,
    58px 58px,
    72px 72px,
    66px 66px,
    82px 82px,
    auto,
    auto,
    auto,
    auto,
    auto;
  mask-image:
    linear-gradient(180deg, #000 0 74%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0 74%, transparent 100%);
  opacity: 0.96;
  animation: heroTextureIn 1.4s ease-out 0.15s both;
}

.hero::after {
  z-index: 1;
  background:
    radial-gradient(ellipse 980px 260px at 51% 111%, transparent 53.7%, rgba(4, 17, 95, 0.12) 54.1% 54.7%, transparent 55.2%),
    radial-gradient(ellipse 860px 225px at 51% 109%, transparent 54.4%, rgba(18, 191, 247, 0.14) 54.9% 55.5%, transparent 56.1%),
    radial-gradient(ellipse 720px 185px at 51% 106%, transparent 55.1%, rgba(255, 255, 255, 0.68) 55.6% 56.2%, transparent 56.8%),
    radial-gradient(ellipse 575px 148px at 52% 104%, transparent 55.8%, rgba(18, 63, 216, 0.08) 56.3% 57%, transparent 57.7%),
    linear-gradient(96deg, transparent 0 7%, rgba(18, 191, 247, 0.08) 7.2% 7.5%, transparent 7.8% 100%),
    linear-gradient(96deg, transparent 0 15%, rgba(255, 255, 255, 0.58) 15.3% 15.7%, transparent 16% 100%),
    linear-gradient(96deg, transparent 0 88%, rgba(4, 17, 95, 0.055) 88.2% 88.6%, transparent 89% 100%),
    linear-gradient(96deg, transparent 0 94%, rgba(18, 191, 247, 0.06) 94.2% 94.6%, transparent 95% 100%);
  opacity: 0.98;
  animation: heroTextureIn 1.5s ease-out 0.3s both;
}

.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-aurora {
  z-index: 0;
  background:
    radial-gradient(ellipse 560px 340px at 13% 17%, rgba(18, 191, 247, 0.26), transparent 66%),
    radial-gradient(ellipse 540px 380px at 91% 21%, rgba(18, 63, 216, 0.12), transparent 67%),
    radial-gradient(ellipse 560px 380px at 12% 79%, rgba(255, 255, 255, 0.72), transparent 66%),
    radial-gradient(ellipse 530px 420px at 91% 79%, rgba(109, 228, 255, 0.18), transparent 68%);
  filter: blur(1px);
  opacity: 0.78;
  animation: heroAmbientGlow 9s ease-in-out infinite alternate;
}

.bg-ribbons {
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.bg-ribbons span {
  position: absolute;
  display: block;
  width: 72px;
  height: 1760px;
  top: -145px;
  border-radius: 999px;
  transform: rotate(9deg);
  filter: blur(0.2px);
  opacity: 0;
  animation:
    heroRibbonIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    heroRibbonFloat 7.5s ease-in-out infinite alternate;
}

.bg-ribbons span:nth-child(1) {
  left: -42px;
  width: 48px;
  background: linear-gradient(180deg, rgba(18, 191, 247, 0), rgba(18, 191, 247, 0.24) 22%, rgba(255, 255, 255, 0.12) 70%, rgba(18, 191, 247, 0));
  animation-delay: 0.06s, 1.4s;
}

.bg-ribbons span:nth-child(2) {
  left: 126px;
  width: 38px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.46) 24%, rgba(157, 231, 255, 0.12) 76%, rgba(255, 255, 255, 0));
  animation-delay: 0.14s, 1.55s;
}

.bg-ribbons span:nth-child(3) {
  left: 350px;
  width: 62px;
  background: linear-gradient(180deg, rgba(18, 63, 216, 0), rgba(18, 63, 216, 0.16) 18%, rgba(18, 191, 247, 0.06) 74%, rgba(18, 63, 216, 0));
  animation-delay: 0.22s, 1.7s;
}

.bg-ribbons span:nth-child(4) {
  left: 548px;
  width: 44px;
  background: linear-gradient(180deg, rgba(4, 17, 95, 0), rgba(4, 17, 95, 0.11) 20%, rgba(18, 191, 247, 0.08) 78%, rgba(4, 17, 95, 0));
  animation-delay: 0.3s, 1.85s;
}

.bg-ribbons span:nth-child(5) {
  left: 730px;
  width: 58px;
  background: linear-gradient(180deg, rgba(109, 228, 255, 0), rgba(109, 228, 255, 0.18) 20%, rgba(255, 255, 255, 0.09) 78%, rgba(109, 228, 255, 0));
  animation-delay: 0.38s, 2s;
}

.bg-ribbons span:nth-child(6) {
  left: 846px;
  width: 40px;
  background: linear-gradient(180deg, rgba(18, 191, 247, 0), rgba(18, 191, 247, 0.18) 19%, rgba(4, 17, 95, 0.05) 80%, rgba(18, 191, 247, 0));
  animation-delay: 0.46s, 2.15s;
}

.bg-panels {
  z-index: 1;
}

.bg-panels::before,
.bg-panels::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(28, 62, 224, 0.13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14)),
    linear-gradient(135deg, rgba(18, 191, 247, 0.13), rgba(18, 63, 216, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 26px 58px rgba(28, 62, 224, 0.07);
  transform: rotate(-6.8deg) skewX(-7deg);
  animation: heroGlassIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bg-panels::before {
  width: 470px;
  height: 220px;
  top: 150px;
  right: -170px;
  --panel-opacity: 0.46;
  opacity: var(--panel-opacity);
  animation-delay: 0.2s;
}

.bg-panels::after {
  width: 610px;
  height: 260px;
  left: -230px;
  top: 680px;
  --panel-opacity: 0.42;
  opacity: var(--panel-opacity);
  animation-delay: 0.36s;
}

.bg-track {
  z-index: 1;
  background:
    radial-gradient(ellipse 1080px 310px at 50% 112%, transparent 50.8%, rgba(18, 191, 247, 0.18) 51.1% 51.4%, transparent 51.9%),
    radial-gradient(ellipse 960px 274px at 51% 111%, transparent 52%, rgba(255, 255, 255, 0.62) 52.3% 52.7%, transparent 53.2%),
    radial-gradient(ellipse 820px 235px at 51% 109%, transparent 53.4%, rgba(18, 63, 216, 0.12) 53.7% 54.1%, transparent 54.6%),
    radial-gradient(ellipse 675px 198px at 51% 107%, transparent 54.6%, rgba(109, 228, 255, 0.12) 55% 55.5%, transparent 56%),
    radial-gradient(ellipse 540px 160px at 52% 105%, transparent 56%, rgba(4, 17, 95, 0.12) 56.4% 57%, transparent 57.5%);
  opacity: 0.92;
  animation: heroTrackDraw 1.8s ease-out 0.55s both;
}

.bg-mesh {
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(28, 62, 224, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 62, 224, 0.035) 1px, transparent 1px),
    linear-gradient(112deg, transparent 0 26%, rgba(255, 255, 255, 0.65) 26.2% 26.8%, transparent 27% 100%),
    linear-gradient(112deg, transparent 0 69%, rgba(255, 255, 255, 0.55) 69.2% 69.9%, transparent 70.2% 100%);
  background-size: 42px 42px, 42px 42px, auto, auto;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0 28%, rgba(0, 0, 0, 0.34) 53%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0 28%, rgba(0, 0, 0, 0.34) 53%, transparent 90%);
  opacity: 0.38;
}

.bg-flashes {
  z-index: 1;
}

.bg-flashes::before {
  content: "";
  position: absolute;
  width: 940px;
  height: 120px;
  top: 606px;
  left: -42px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86) 16%, rgba(255, 255, 255, 0.18) 38%, transparent 62%),
    linear-gradient(90deg, transparent, rgba(18, 191, 247, 0.12) 22%, rgba(255, 255, 255, 0.24) 43%, rgba(18, 63, 216, 0.08) 62%, transparent 82%);
  transform: rotate(-6.8deg) skewX(-8deg);
  opacity: 0.92;
  animation: heroLightSweep 4.8s ease-in-out 1.2s infinite;
}

.bg-flashes::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -260px;
  top: 350px;
  border-radius: 50%;
  border: 1px solid rgba(28, 62, 224, 0.09);
  box-shadow:
    0 0 0 28px rgba(18, 191, 247, 0.04),
    0 0 0 58px rgba(255, 255, 255, 0.08),
    0 0 0 92px rgba(18, 63, 216, 0.025);
  opacity: 0.92;
}

.bg-luxury {
  z-index: 1;
  overflow: hidden;
}

.bg-luxury::before {
  content: "";
  position: absolute;
  width: 1080px;
  height: 430px;
  left: -105px;
  top: 310px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.09) 36%, rgba(255, 255, 255, 0.5) 54%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(115deg, rgba(18, 191, 247, 0.1), rgba(255, 255, 255, 0.18) 42%, rgba(18, 63, 216, 0.07) 72%, rgba(109, 228, 255, 0.08));
  border-top: 1px solid rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(28, 62, 224, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 40px 90px rgba(7, 26, 152, 0.08);
  transform: rotate(-6.8deg) skewX(-8deg);
  opacity: 0.78;
}

.bg-luxury::after {
  content: "";
  position: absolute;
  width: 1120px;
  height: 76px;
  left: -130px;
  top: 410px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.94) 16%, rgba(157, 231, 255, 0.28) 27%, rgba(18, 191, 247, 0.18) 42%, rgba(255, 255, 255, 0.8) 58%, transparent 78%);
  transform: rotate(-6.8deg) skewX(-8deg);
  filter: blur(0.3px);
  opacity: 0.74;
}

.bg-orbit {
  z-index: 1;
  background:
    conic-gradient(from 224deg at 79% 34%, transparent 0deg, rgba(255, 255, 255, 0.4) 21deg, transparent 42deg, rgba(18, 191, 247, 0.13) 72deg, transparent 96deg, rgba(4, 17, 95, 0.08) 132deg, transparent 174deg, rgba(109, 228, 255, 0.1) 208deg, transparent 248deg, rgba(18, 63, 216, 0.08) 292deg, transparent 338deg),
    radial-gradient(circle at 79% 34%, transparent 0 180px, rgba(255, 255, 255, 0.55) 181px 184px, transparent 185px 245px, rgba(18, 63, 216, 0.07) 246px 248px, transparent 249px);
  mask-image: radial-gradient(circle at 79% 34%, #000 0 330px, transparent 480px);
  -webkit-mask-image: radial-gradient(circle at 79% 34%, #000 0 330px, transparent 480px);
  opacity: 0.72;
  animation: heroOrbitBreathe 8s ease-in-out infinite alternate;
}

.logo {
  position: absolute;
  top: 42px;
  left: 42px;
  z-index: 6;
  opacity: 0;
  animation: heroLogoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.logo-main {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
}

.logo-sub {
  margin-top: 6px;
  padding-left: 57px;
  color: #222;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 6px;
}

.blue-copy {
  position: absolute;
  z-index: 5;
  margin: 0;
  color: var(--blue);
  font-weight: 900;
  letter-spacing: 0;
  transform-origin: left top;
  filter:
    drop-shadow(0 5px 0 rgba(255, 255, 255, 0.92))
    drop-shadow(0 20px 34px rgba(4, 17, 95, 0.24));
}

h1 {
  margin: 0;
}

.hero-service-context {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.line-box {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px 12px;
  line-height: 0.98;
  white-space: nowrap;
  background:
    linear-gradient(180deg, #03115b 0%, #123fd8 44%, #12bff7 76%, #061a8f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.3px rgba(255, 255, 255, 0.9);
}

.eyebrow .line-box,
.brand-line .line-box {
  background: none;
  color: #082aa8;
  -webkit-text-fill-color: #082aa8;
  -webkit-text-stroke: 0;
}

.main-line-1 .line-box,
.main-line-2 .line-box {
  position: relative;
  color: var(--blue);
  -webkit-text-fill-color: var(--blue);
  -webkit-text-stroke: 0;
  background: none;
  text-shadow:
    -3px -3px 0 rgba(255, 255, 255, 0.98),
    5px 5px 0 rgba(157, 231, 255, 0.46),
    10px 10px 0 rgba(4, 17, 95, 0.16),
    0 26px 38px rgba(4, 17, 95, 0.26);
}

.main-line-1 .line-box {
  color: #0d34c4;
  -webkit-text-fill-color: #0d34c4;
}

.main-line-2 .line-box {
  color: #069cef;
  -webkit-text-fill-color: #069cef;
  text-shadow:
    -3px -3px 0 rgba(255, 255, 255, 0.98),
    5px 5px 0 rgba(170, 236, 255, 0.48),
    11px 11px 0 rgba(4, 17, 95, 0.18),
    0 28px 40px rgba(4, 17, 95, 0.26);
}

.eyebrow {
  top: 250px;
  left: 40px;
  font-size: 42px;
  line-height: 1;
  --hero-final-transform: rotate(-6.2deg) skewX(-5deg) scaleX(0.93);
  transform: var(--hero-final-transform);
  filter: none;
  animation: heroCopyReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;
}

.brand-line {
  top: 305px;
  left: 70px;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0;
  --hero-final-transform: rotate(-6.2deg) skewX(-5deg) scaleX(0.93);
  transform: var(--hero-final-transform);
  filter: none;
  animation: heroCopyReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.74s both;
}

.main-line-1 {
  top: 382px;
  left: 8px;
  font-size: 130px;
  line-height: 1;
  letter-spacing: -2px;
  --hero-final-transform: rotate(-6.8deg) skewX(-8deg) scaleX(0.74);
  transform: var(--hero-final-transform);
  animation: heroTitleReveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}

.main-line-2 {
  top: 532px;
  left: 10px;
  font-size: 168px;
  line-height: 1;
  letter-spacing: -2px;
  --hero-final-transform: rotate(-6.8deg) skewX(-8deg) scaleX(0.83);
  transform: var(--hero-final-transform);
  animation: heroTitleReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both;
}

.woman {
  position: absolute;
  left: 96px;
  bottom: 0;
  z-index: 3;
  width: 760px;
  height: 900px;
  object-fit: cover;
  object-position: center bottom;
  /* No persistent filter: a filter forces this <img> into its own raster
     layer that the 1.18x design-canvas scale-up then upscales blockily
     ("mosaic"). Keeping filter:none lets it rasterize with the canvas at
     full device resolution, so the photo stays crisp at any scale/DPR. */
  filter: none;
  pointer-events: none;
  opacity: 0;
  animation: heroWomanIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1.28s both;
}

.left-column {
  position: absolute;
  left: 28px;
  top: 850px;
  z-index: 4;
  width: 236px;
  --hero-final-transform: rotate(-3.2deg);
  transform: var(--hero-final-transform);
  transform-origin: left top;
  animation: heroSideIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.55s both;
}

.left-title {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 8px;
  color: var(--blue);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.18;
  background: rgba(251, 253, 255, 0.9);
  box-shadow: 0 12px 30px rgba(4, 17, 95, 0.08);
}

.blue-band {
  display: block;
  width: 100%;
  margin: 0 0 9px;
  padding: 8px 12px 10px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 58%, #12bff7 100%);
  box-shadow:
    0 16px 32px rgba(4, 17, 95, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.48);
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.08;
}

.blue-band small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.15;
}

.blue-band .small-18 {
  font-size: 18px;
}

.left-note {
  margin: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 58%, #12bff7 100%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.48;
}

.right-column {
  position: absolute;
  right: 42px;
  top: 748px;
  z-index: 4;
  width: 228px;
  --hero-final-transform: rotate(-3.2deg);
  transform: var(--hero-final-transform);
  transform-origin: left top;
  animation: heroSideIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.72s both;
}

.right-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 7px 11px 9px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 58%, #12bff7 100%);
  box-shadow:
    0 16px 32px rgba(4, 17, 95, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}

.right-copy {
  margin: 0 0 13px;
  padding: 4px 7px 7px;
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.34;
  background: rgba(251, 253, 255, 0.9);
  box-shadow: 0 12px 30px rgba(4, 17, 95, 0.08);
}

.bar {
  display: flex;
  gap: 5px;
  height: 30px;
  margin: 0 0 19px;
  padding-left: 5px;
}

.bar span {
  display: block;
  width: 8px;
  height: 30px;
  background: linear-gradient(180deg, #03115b, #12bff7);
  box-shadow: 0 0 10px rgba(0, 184, 255, 0.26);
}

.meo {
  margin: 0;
  padding: 0 4px;
  color: transparent;
  background: linear-gradient(180deg, #03115b 0%, #123fd8 48%, #12bff7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 10px 18px rgba(7, 26, 152, 0.18));
  font-size: 70px;
  font-weight: 900;
  line-height: 0.88;
}

.support {
  margin: 4px 0 18px;
  padding: 0 5px 3px;
  color: var(--blue);
  font-size: 39px;
  font-weight: 900;
  line-height: 1.04;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.9)) padding-box,
    linear-gradient(105deg, rgba(255, 255, 255, 0.8), rgba(18, 191, 247, 0.62), rgba(18, 63, 216, 0.45)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px rgba(4, 17, 95, 0.1);
}

.check-list {
  margin: 0 0 15px;
  padding: 0 4px;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 9px;
  color: var(--blue);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.12;
}

.check-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  border-radius: 999px;
  background: linear-gradient(135deg, #03115b, #123fd8 62%, #12bff7);
  box-shadow: 0 4px 10px rgba(4, 17, 95, 0.22);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.right-note {
  margin: 0;
  padding: 10px 10px 12px;
  border-top: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  color: var(--blue);
  font-size: 23px;
  font-weight: 900;
  line-height: 1.38;
  background: rgba(251, 253, 255, 0.94);
  box-shadow: 0 16px 34px rgba(4, 17, 95, 0.08);
}

.left-column > *,
.right-column > * {
  opacity: 0;
  animation: heroModuleReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.left-column > *:nth-child(1) { animation-delay: 1.72s; }
.left-column > *:nth-child(2) { animation-delay: 1.82s; }
.left-column > *:nth-child(3) { animation-delay: 1.92s; }
.left-column > *:nth-child(4) { animation-delay: 2.02s; }
.left-column > *:nth-child(5) { animation-delay: 2.12s; }
.left-column > *:nth-child(6) { animation-delay: 2.24s; }

.right-column > *:nth-child(1) { animation-delay: 1.9s; }
.right-column > *:nth-child(2) { animation-delay: 2.02s; }
.right-column > *:nth-child(3) { animation-delay: 2.12s; }
.right-column > *:nth-child(4) { animation-delay: 2.22s; }
.right-column > *:nth-child(5) { animation-delay: 2.34s; }
.right-column > *:nth-child(6) { animation-delay: 2.5s; }
.right-column > *:nth-child(7) { animation-delay: 2.66s; }

.bar span {
  transform-origin: bottom center;
  animation: heroMeterPulse 1.7s ease-in-out infinite alternate;
}

.bar span:nth-child(1) { animation-delay: 2.16s; }
.bar span:nth-child(2) { animation-delay: 2.2s; }
.bar span:nth-child(3) { animation-delay: 2.24s; }
.bar span:nth-child(4) { animation-delay: 2.28s; }
.bar span:nth-child(5) { animation-delay: 2.32s; }
.bar span:nth-child(6) { animation-delay: 2.36s; }
.bar span:nth-child(7) { animation-delay: 2.4s; }
.bar span:nth-child(8) { animation-delay: 2.44s; }
.bar span:nth-child(9) { animation-delay: 2.48s; }
.bar span:nth-child(10) { animation-delay: 2.52s; }
.bar span:nth-child(11) { animation-delay: 2.56s; }
.bar span:nth-child(12) { animation-delay: 2.6s; }

.check-list li {
  opacity: 0;
  animation: heroCheckIn 0.42s ease-out both;
}

.check-list li:nth-child(1) { animation-delay: 2.58s; }
.check-list li:nth-child(2) { animation-delay: 2.68s; }
.check-list li:nth-child(3) { animation-delay: 2.78s; }
.check-list li:nth-child(4) { animation-delay: 2.88s; }
.check-list li:nth-child(5) { animation-delay: 2.98s; }

@keyframes heroTextureIn {
  from { opacity: 0; filter: blur(10px); }
}

@keyframes heroAmbientGlow {
  from { opacity: 0.66; filter: blur(2px) saturate(0.92); }
  to { opacity: 0.88; filter: blur(1px) saturate(1.08); }
}

@keyframes heroRibbonIn {
  from { opacity: 0; transform: rotate(9deg) translateY(-52px); }
  to { opacity: 1; transform: rotate(9deg) translateY(0); }
}

@keyframes heroRibbonFloat {
  from { transform: rotate(9deg) translateY(0); }
  to { transform: rotate(9deg) translateY(18px); }
}

@keyframes heroGlassIn {
  from {
    opacity: 0;
    transform: rotate(-6.8deg) skewX(-7deg) translateY(28px);
    filter: blur(8px);
  }
  to {
    opacity: var(--panel-opacity);
    transform: rotate(-6.8deg) skewX(-7deg) translateY(0);
    filter: blur(0);
  }
}

@keyframes heroTrackDraw {
  from {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
  }
  to {
    opacity: 0.92;
    clip-path: inset(0);
  }
}

@keyframes heroLightSweep {
  0%, 100% { opacity: 0.44; transform: rotate(-6.8deg) skewX(-8deg) translateX(-28px); }
  45%, 60% { opacity: 0.92; transform: rotate(-6.8deg) skewX(-8deg) translateX(42px); }
}

@keyframes heroOrbitBreathe {
  from { opacity: 0.46; filter: blur(1px); }
  to { opacity: 0.78; filter: blur(0); }
}

@keyframes heroLogoIn {
  from {
    opacity: 0;
    transform: translateY(-18px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}

@keyframes heroCopyReveal {
  from {
    opacity: 0;
    transform: translate3d(-18px, 18px, 0) var(--hero-final-transform);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: var(--hero-final-transform);
    clip-path: inset(0);
  }
}

@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translate3d(-32px, 26px, 0) var(--hero-final-transform);
    clip-path: inset(0 100% 0 0);
    filter: blur(10px);
  }
  70% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: var(--hero-final-transform);
    clip-path: inset(0);
    filter: none;
  }
}

@keyframes heroWomanIn {
  from {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(1.025);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes heroSideIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) var(--hero-final-transform);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: var(--hero-final-transform);
    filter: blur(0);
  }
}

@keyframes heroModuleReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}

@keyframes heroMeterPulse {
  from { transform: scaleY(0.76); opacity: 0.72; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes heroCheckIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .bg-aurora,
  .bg-ribbons span,
  .bg-panels::before,
  .bg-panels::after,
  .bg-track,
  .bg-flashes::before,
  .bg-orbit,
  .logo,
  .eyebrow,
  .brand-line,
  .main-line-1,
  .main-line-2,
  .woman,
  .left-column,
  .right-column,
  .left-column > *,
  .right-column > *,
  .bar span,
  .check-list li {
    animation: none !important;
  }

  .logo,
  .bg-ribbons span,
  .woman,
  .left-column > *,
  .right-column > *,
  .check-list li {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none;
  }

  .eyebrow,
  .brand-line,
  .main-line-1,
  .main-line-2,
  .left-column,
  .right-column {
    transform: var(--hero-final-transform) !important;
  }

  .woman {
    transform: none !important;
    filter: none;
  }
}

/* Primary content must be present on first paint; ambient background motion remains. */
.logo,
.eyebrow,
.brand-line,
.main-line-1,
.main-line-2,
.woman,
.left-column,
.right-column,
.left-column > *,
.right-column > *,
.bar span,
.check-list li { animation: none !important; }
.logo,
.woman,
.left-column > *,
.right-column > *,
.check-list li { opacity: 1 !important; clip-path: none !important; filter: none !important; }
.eyebrow,
.brand-line,
.main-line-1,
.main-line-2,
.left-column,
.right-column { transform: var(--hero-final-transform) !important; }
.woman { transform: none !important; }

/* Avoid an empty first viewport while delayed hero animations run on phones. */
@media (max-width: 720px) {
  .lp-section * { animation-duration: 0.001ms !important; animation-delay: 0s !important; }
  .hero::before,
  .hero::after,
  .bg-aurora,
  .bg-ribbons span,
  .bg-panels::before,
  .bg-panels::after,
  .bg-track,
  .bg-flashes::before,
  .bg-orbit,
  .logo,
  .eyebrow,
  .brand-line,
  .main-line-1,
  .main-line-2,
  .woman,
  .left-column,
  .right-column,
  .left-column > *,
  .right-column > *,
  .bar span,
  .check-list li { animation: none !important; }
  .logo,
  .bg-ribbons span,
  .woman,
  .left-column > *,
  .right-column > *,
  .check-list li { opacity: 1 !important; clip-path: none !important; filter: none !important; }
  .eyebrow,
  .brand-line,
  .main-line-1,
  .main-line-2,
  .left-column,
  .right-column { transform: var(--hero-final-transform) !important; }
  .woman { transform: none !important; }
}

/* ===================== LP sections 2-6 ===================== */

html {
  scroll-behavior: auto;
}

body {
  align-content: start;
}

.lp-frame {
  width: 860px;
}

.lp-canvas {
  position: relative;
  width: 860px;
  transform-origin: left top;
  background:
    linear-gradient(180deg, #f9fdff 0%, #edf8ff 50%, #f8fcff 100%);
}

.lp-section {
  position: relative;
  width: 860px;
  padding: 96px 48px 110px;
  overflow: hidden;
  color: var(--ink);
  isolation: isolate;
  background-color: #f7fbff;
  background-image:
    radial-gradient(135% 95% at 102% -12%, rgba(18, 191, 247, 0.18), transparent 50%),
    radial-gradient(125% 85% at -12% 112%, rgba(4, 17, 95, 0.1), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #edf8ff 100%);
}

.lp-section.alt {
  background-color: #eef8ff;
  background-image:
    radial-gradient(135% 95% at -12% -12%, rgba(4, 17, 95, 0.14), transparent 50%),
    radial-gradient(125% 85% at 112% 112%, rgba(18, 191, 247, 0.16), transparent 52%),
    linear-gradient(180deg, #f8fcff 0%, #eaf7ff 100%);
}

#stats {
  background-color: #f8fcff;
  background-image:
    linear-gradient(118deg, transparent 0 62%, rgba(255, 255, 255, 0.68) 62.2% 62.8%, transparent 63.2% 100%),
    radial-gradient(760px 420px at 100% 0%, rgba(18, 191, 247, 0.17), transparent 64%),
    radial-gradient(620px 420px at -8% 100%, rgba(4, 17, 95, 0.1), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #ecf9ff 100%);
}

#message {
  background-color: #eef9ff;
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, 0.44) 0 16%, transparent 16.4% 100%),
    radial-gradient(720px 440px at 0% 6%, rgba(4, 17, 95, 0.13), transparent 64%),
    radial-gradient(560px 360px at 95% 86%, rgba(18, 191, 247, 0.17), transparent 68%),
    linear-gradient(180deg, #f8fcff 0%, #e8f7ff 100%);
}

#meo {
  background-color: #fbfdff;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 95, 0.07) 0 18%, transparent 18.4% 100%),
    radial-gradient(700px 460px at 95% 8%, rgba(18, 191, 247, 0.2), transparent 62%),
    radial-gradient(620px 380px at 0% 98%, rgba(18, 63, 216, 0.09), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #eefaff 100%);
}

#works {
  background-color: #f2faff;
  background-image:
    radial-gradient(860px 360px at 50% 4%, rgba(18, 191, 247, 0.16), transparent 68%),
    radial-gradient(640px 420px at 100% 100%, rgba(4, 17, 95, 0.11), transparent 70%),
    linear-gradient(124deg, transparent 0 46%, rgba(255, 255, 255, 0.66) 46.2% 47%, transparent 47.3% 100%),
    linear-gradient(180deg, #fafdff 0%, #e9f7ff 100%);
}

#partner {
  background-color: #edf8ff;
  background-image:
    radial-gradient(760px 420px at 3% 0%, rgba(18, 63, 216, 0.12), transparent 66%),
    radial-gradient(680px 460px at 96% 94%, rgba(18, 191, 247, 0.19), transparent 68%),
    linear-gradient(112deg, transparent 0 58%, rgba(255, 255, 255, 0.62) 58.2% 58.9%, transparent 59.4% 100%),
    linear-gradient(180deg, #f6fcff 0%, #e6f6ff 100%);
}

#faq {
  background-color: #f9fdff;
  background-image:
    radial-gradient(780px 440px at 100% 2%, rgba(18, 191, 247, 0.16), transparent 64%),
    radial-gradient(720px 420px at -8% 88%, rgba(4, 17, 95, 0.11), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #edf9ff 100%);
}

/* full-cover atmosphere: K monogram watermark + refracted lines + quiet halftone dots */
.lp-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke='rgb(4,17,95)' stroke-width='6' stroke-opacity='0.055' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 10 V140'/%3E%3Cpath d='M24 80 L94 10'/%3E%3Cpath d='M42 66 L98 140'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(116deg, transparent 0 38px, rgba(18, 63, 216, 0.038) 38px 39px),
    repeating-linear-gradient(116deg, transparent 0 126px, rgba(255, 255, 255, 0.55) 126px 129px),
    radial-gradient(circle at 1px 1px, rgba(18, 63, 216, 0.075) 1px, transparent 1.8px);
  background-position: right -130px top 50px, 0 0, 0 0, 0 0;
  background-size: 560px 700px, auto, auto, 30px 30px;
  background-repeat: no-repeat, repeat, repeat, repeat;
}

/* bold diagonal tonal wedge bleeding from bottom-right (poster drama) */
.lp-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -130px;
  bottom: -120px;
  width: 420px;
  height: 320px;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(4, 17, 95, 0.18) 0%, rgba(18, 191, 247, 0.1) 68%, transparent 100%);
  box-shadow: -40px -26px 90px rgba(18, 191, 247, 0.08);
  transform: rotate(-9deg) skewX(-9deg);
}

.sec-inner {
  position: relative;
  z-index: 2;
}

/* --- section decorations --- */
.deco-dots,
.deco-lines,
.deco-corner {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.deco-dots {
  width: 280px;
  height: 200px;
  background: radial-gradient(circle, rgba(18, 63, 216, 0.18) 0 2.1px, transparent 3.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0 30%, transparent 72%);
  mask-image: radial-gradient(circle at 70% 30%, #000 0 30%, transparent 72%);
}

.deco-lines {
  width: 420px;
  height: 400px;
  background: repeating-linear-gradient(112deg, transparent 0 18px, rgba(18, 191, 247, 0.1) 18px 20px);
  -webkit-mask-image: linear-gradient(112deg, #000, transparent 78%);
  mask-image: linear-gradient(112deg, #000, transparent 78%);
}

#notice > .deco-dots { top: 92px; right: 250px; }
#notice > .deco-lines { left: -150px; bottom: -120px; transform: rotate(6deg); }
#stats > .deco-dots { top: 74px; right: 250px; }
#stats > .deco-lines { left: -150px; bottom: -140px; transform: rotate(6deg); }
#meo > .deco-dots { top: 360px; right: 40px; }
#works > .deco-lines { top: -130px; right: -160px; transform: rotate(4deg); }
#works > .deco-dots { left: 36px; bottom: 60px; }
#partner > .deco-dots { top: 80px; right: 250px; }
#message > .deco-dots { top: 98px; right: 250px; }
#message > .deco-lines { left: -150px; bottom: -150px; transform: rotate(6deg); }
#schedule > .deco-dots { top: 94px; right: 250px; }
#faq > .deco-dots { top: 90px; right: 250px; }
#faq > .deco-lines { left: -170px; top: 420px; transform: rotate(8deg); }

.deco-corner {
  right: -95px;
  bottom: -90px;
  width: 310px;
  height: 235px;
  background: linear-gradient(135deg, #03115b 0%, #123fd8 62%, #12bff7 100%);
  border-top: 9px solid var(--line);
  box-shadow: -28px -26px 60px rgba(4, 17, 95, 0.16);
  transform: rotate(-9deg) skewX(-9deg);
}

/* --- editorial section index (outlined numerals) --- */
.sec-index {
  position: absolute;
  top: 54px;
  right: 44px;
  z-index: 1;
  font-style: normal;
  font-size: 168px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -8px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(4, 17, 95, 0.12);
  text-stroke: 2px rgba(4, 17, 95, 0.12);
  pointer-events: none;
}

.lp-section.alt .sec-index {
  -webkit-text-stroke-color: rgba(4, 17, 95, 0.14);
  text-stroke-color: rgba(4, 17, 95, 0.14);
}

/* --- section headings --- */
.sec-label {
  position: relative;
  display: inline-block;
  margin: 0 0 34px;
  padding: 12px 24px 14px;
  background: linear-gradient(105deg, #03115b 0%, #0d31bf 68%, #12bff7 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  transform: rotate(-3.2deg);
  box-shadow:
    0 18px 38px rgba(4, 17, 95, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.sec-label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 6px;
  background: var(--line);
}

.sec-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 16px);
  width: 150px;
  height: 5px;
  background: linear-gradient(90deg, var(--line), rgba(255, 255, 255, 0.8));
  transform: translateY(-50%);
}

/* --- premium double-rule frames --- */
.offer-card::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2px solid rgba(18, 191, 247, 0.32);
  pointer-events: none;
}

.contact-band::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.rep-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 191, 247, 0.28);
  pointer-events: none;
}

.sec-head {
  margin: 0 0 52px;
  transform: rotate(-4.6deg) skewX(-6deg);
  transform-origin: left top;
}

.sec-head .hl {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: #0d34c4;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -2px;
  white-space: nowrap;
}

.sec-head .hl + .hl {
  margin-top: 12px;
}

.sec-head .hl.tint {
  color: #079eea;
}

.h-stats { font-size: 90px; }
.h-stats em {
  font-style: normal;
  font-size: 162px;
  letter-spacing: -6px;
}

.h-meo-en { font-size: 210px; letter-spacing: -8px; }
.h-meo-jp { font-size: 168px; margin-left: 26px; }

.h-works-1 { font-size: 84px; }
.h-works-2 { font-size: 104px; margin-left: 26px; }
.h-works-3 { font-size: 118px; margin-left: 52px; }

.h-p1 { font-size: 132px; }
.h-p2 { font-size: 96px; margin-left: 30px; }
.h-p3 { font-size: 74px; margin-left: 58px; }

.h-faq-en { font-size: 190px; letter-spacing: -5px; }
.h-faq-jp { font-size: 76px; margin-left: 20px; }

/* --- common text / cta --- */
.sec-lead {
  margin: 0 0 28px;
  font-size: 21px;
  font-weight: 700;
  line-height: 2;
}

.sec-lead strong {
  color: var(--blue);
}

.sec-lead.center {
  text-align: center;
}

.cta-row {
  margin: 38px 0;
  text-align: center;
}

.cta-btn {
  display: inline-block;
  min-width: 400px;
  padding: 24px 56px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 62%, #12bff7 100%);
  border: 3px solid rgba(4, 17, 95, 0.9);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 20px 42px rgba(4, 17, 95, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.cta-btn::after {
  content: " →";
}

.cta-btn.invert {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}

/* --- section 2: stats --- */
.stat-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 200px 1fr;
  gap: 20px;
  align-items: center;
  padding: 28px 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.94));
  border: 3px solid rgba(18, 63, 216, 0.82);
  border-radius: 0;
  box-shadow:
    0 20px 48px rgba(4, 17, 95, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #03115b, #123fd8 58%, #12bff7);
  transform: scaleX(0);
  transform-origin: left center;
}

.stat-card > * {
  position: relative;
  z-index: 1;
}

.stat-no {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, #03115b, #123fd8 68%, #12bff7);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}

.stat-value {
  color: var(--blue);
  font-size: 66px;
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.92;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stat-value small {
  font-size: 36px;
  letter-spacing: -1px;
}

.stat-value--word {
  font-size: 46px;
  letter-spacing: 0.04em;
}

.stat-value.multi {
  display: grid;
  gap: 6px;
  font-size: 29px;
  letter-spacing: -1px;
}

.stat-value.multi small {
  font-size: 19px;
}

.stat-text {
  margin: 0;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.5;
}

.stat-more {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px 10px;
  background: linear-gradient(180deg, #ffffff, #eefaff);
  border: 2px solid rgba(18, 63, 216, 0.78);
  color: var(--blue);
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.stat-more::after {
  content: " ＋";
}

.stat-card.open .stat-more::after,
.offer-card.open .offer-more::after {
  content: " －";
}

.stat-detail {
  display: none;
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 2px solid rgba(28, 62, 224, 0.35);
  color: #222;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.85;
}

.stat-detail p {
  margin: 0;
}

.stat-card.open .stat-detail {
  display: block;
}

/* --- AI時代Q&A（□フレーム＋＋ボタン開閉） --- */
.ai-qa {
  margin-top: 44px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.95));
  border: 4px solid rgba(18, 191, 247, 0.72);
  border-radius: 0;
  box-shadow: 0 24px 56px rgba(4, 17, 95, 0.1);
}

.ai-qa-q {
  display: flex;
  gap: 22px;
  align-items: center;
  width: 100%;
  padding: 32px 34px;
  background: none;
  border: 0;
  color: var(--deep-blue);
  font-family: inherit;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.ai-qa-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-left: auto;
  background: linear-gradient(135deg, #123fd8, #12bff7);
  color: #fff;
  font-size: 38px;
  line-height: 1;
}

.ai-qa-toggle::before {
  content: "＋";
}

.ai-qa.open .ai-qa-toggle::before {
  content: "－";
}

.ai-qa-a {
  display: none;
  padding: 0 34px 34px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}

.ai-qa.open .ai-qa-a {
  display: block;
}

.ai-qa-answer {
  margin: 0 0 24px;
  padding: 18px 24px;
  background: linear-gradient(105deg, #03115b, #123fd8 70%, #12bff7);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
}

.ai-qa-a p {
  margin: 0;
}

.ai-qa-a p + p {
  margin-top: 16px;
}

.ai-qa-a strong {
  color: var(--blue);
}

.stats-source {
  margin: 20px 0 0;
  color: #666;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

#stats.stats-motion-ready .sec-label,
#stats.stats-motion-ready .sec-head,
#stats.stats-motion-ready .stat-card,
#stats.stats-motion-ready .ai-qa,
#stats.stats-motion-ready .stats-commit,
#stats.stats-motion-ready .visit-flow-code,
#stats.stats-motion-ready .stats-source {
  opacity: 0;
}

#stats.stats-motion-ready .sec-label {
  transform: translateY(26px) rotate(-3.2deg);
}

#stats.stats-motion-ready .sec-head {
  transform: translateY(32px) rotate(-4.6deg) skewX(-6deg);
  clip-path: inset(0 100% 0 0);
}

#stats.stats-motion-ready .stat-card {
  transform: translateY(34px);
  filter: blur(7px);
}

#stats.stats-motion-ready .ai-qa,
#stats.stats-motion-ready .stats-commit,
#stats.stats-motion-ready .visit-flow-code,
#stats.stats-motion-ready .stats-source {
  transform: translateY(30px);
}

#stats.is-stats-visible .sec-index {
  animation: statsIndexReveal 1.1s ease-out 0.1s both;
}

#stats.is-stats-visible .deco-dots {
  animation: statsDecorDrift 5.8s ease-in-out infinite alternate;
}

#stats.is-stats-visible .deco-lines {
  animation: statsLineDrift 6.6s ease-in-out infinite alternate;
}

#stats.is-stats-visible .sec-label {
  animation: statsLabelReveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

#stats.is-stats-visible .sec-head {
  animation: statsHeadingReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

#stats.is-stats-visible .stat-card {
  animation: statsCardReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#stats.is-stats-visible .stat-card:nth-child(1) { animation-delay: 0.42s; }
#stats.is-stats-visible .stat-card:nth-child(2) { animation-delay: 0.54s; }
#stats.is-stats-visible .stat-card:nth-child(3) { animation-delay: 0.66s; }
#stats.is-stats-visible .stat-card:nth-child(4) { animation-delay: 0.78s; }
#stats.is-stats-visible .stat-card:nth-child(5) { animation-delay: 0.9s; }

#stats.is-stats-visible .stat-card::before {
  animation: statsProgressLine 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#stats.is-stats-visible .stat-card:nth-child(1)::before { animation-delay: 0.62s; }
#stats.is-stats-visible .stat-card:nth-child(2)::before { animation-delay: 0.74s; }
#stats.is-stats-visible .stat-card:nth-child(3)::before { animation-delay: 0.86s; }
#stats.is-stats-visible .stat-card:nth-child(4)::before { animation-delay: 0.98s; }
#stats.is-stats-visible .stat-card:nth-child(5)::before { animation-delay: 1.1s; }

#stats.is-stats-visible .stat-no {
  animation: statsNoPulse 0.72s ease-out both;
}

#stats.is-stats-visible .stat-card:nth-child(1) .stat-no { animation-delay: 0.72s; }
#stats.is-stats-visible .stat-card:nth-child(2) .stat-no { animation-delay: 0.84s; }
#stats.is-stats-visible .stat-card:nth-child(3) .stat-no { animation-delay: 0.96s; }
#stats.is-stats-visible .stat-card:nth-child(4) .stat-no { animation-delay: 1.08s; }
#stats.is-stats-visible .stat-card:nth-child(5) .stat-no { animation-delay: 1.2s; }

#stats.is-stats-visible .ai-qa {
  animation: statsBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both;
}

#stats.is-stats-visible .stats-commit {
  animation: statsBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 1.28s both;
}

#stats.is-stats-visible .visit-flow-code {
  animation: statsBlockReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) 1.44s both;
}

#stats.is-stats-visible .stats-source {
  animation: statsBlockReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.58s both;
}

#stats.stats-motion-ready.is-stats-visible .sec-label,
#stats.stats-motion-ready.is-stats-visible .sec-head,
#stats.stats-motion-ready.is-stats-visible .stat-card,
#stats.stats-motion-ready.is-stats-visible .ai-qa,
#stats.stats-motion-ready.is-stats-visible .stats-commit,
#stats.stats-motion-ready.is-stats-visible .visit-flow-code,
#stats.stats-motion-ready.is-stats-visible .stats-source {
  opacity: 1;
  filter: none;
}

#stats.stats-motion-ready.is-stats-visible .sec-label {
  transform: rotate(-3.2deg);
  clip-path: inset(0);
}

#stats.stats-motion-ready.is-stats-visible .sec-head {
  transform: rotate(-4.6deg) skewX(-6deg);
  clip-path: inset(0);
}

#stats.stats-motion-ready.is-stats-visible .stat-card,
#stats.stats-motion-ready.is-stats-visible .ai-qa,
#stats.stats-motion-ready.is-stats-visible .stats-commit,
#stats.stats-motion-ready.is-stats-visible .visit-flow-code,
#stats.stats-motion-ready.is-stats-visible .stats-source {
  transform: translateY(0);
}

@keyframes statsIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes statsDecorDrift {
  from { transform: translateY(0) scale(1); opacity: 0.78; }
  to { transform: translateY(18px) scale(1.04); opacity: 1; }
}

@keyframes statsLineDrift {
  from { transform: rotate(6deg) translateX(0); opacity: 0.7; }
  to { transform: rotate(6deg) translateX(18px); opacity: 0.95; }
}

@keyframes statsLabelReveal {
  from {
    opacity: 0;
    transform: translateY(26px) rotate(-3.2deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: rotate(-3.2deg);
    clip-path: inset(0);
  }
}

@keyframes statsHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(32px) rotate(-4.6deg) skewX(-6deg);
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: rotate(-4.6deg) skewX(-6deg);
    clip-path: inset(0);
    filter: blur(0);
  }
}

@keyframes statsCardReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes statsProgressLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes statsNoPulse {
  0% { transform: scale(0.86); box-shadow: 0 0 0 rgba(18, 191, 247, 0); }
  58% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(18, 191, 247, 0.12); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(18, 191, 247, 0); }
}

@keyframes statsBlockReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #stats.stats-motion-ready .sec-label,
  #stats.stats-motion-ready .sec-head,
  #stats.stats-motion-ready .stat-card,
  #stats.stats-motion-ready .ai-qa,
  #stats.stats-motion-ready .stats-commit,
  #stats.stats-motion-ready .visit-flow-code,
  #stats.stats-motion-ready .stats-source {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #stats.stats-motion-ready .sec-label {
    transform: rotate(-3.2deg) !important;
  }

  #stats.stats-motion-ready .sec-head {
    transform: rotate(-4.6deg) skewX(-6deg) !important;
  }

  #stats .stat-card::before {
    transform: scaleX(1);
  }
}

.stats-commit {
  margin: 42px 0 34px;
  padding: 30px 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 255, 0.96));
  border: 3px solid rgba(18, 63, 216, 0.74);
  border-radius: 0;
  box-shadow: 0 22px 52px rgba(4, 17, 95, 0.09);
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.75;
}

.stats-commit strong {
  color: var(--blue);
}

.visit-flow-code {
  position: relative;
  margin: 0 0 30px;
  padding: 34px 30px 32px;
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(4, 17, 95, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 17, 95, 0.025) 1px, transparent 1px),
    #f8f6f0;
  background-size: 24px 24px;
  border: 2px solid rgba(4, 17, 95, 0.18);
  border-radius: 0;
  box-shadow: 0 24px 58px rgba(4, 17, 95, 0.1);
  color: var(--ink);
}

.flow-head {
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(4, 17, 95, 0.13);
}

.flow-kicker {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 3px;
}

.flow-head h3 {
  margin: 0 0 8px;
  color: var(--deep-blue);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

.flow-head p {
  margin: 0;
  color: #5d6472;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 32px 0 22px;
}

.flow-step {
  position: relative;
  min-height: 250px;
  padding: 18px 14px 16px;
  background: rgba(255, 253, 248, 0.96);
  border: 2px solid rgba(4, 17, 95, 0.16);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  box-shadow: 6px 8px 0 rgba(4, 17, 95, 0.06);
  cursor: pointer;
  transition: transform 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease, background 0.36s ease;
}

.flow-step::after {
  content: "";
  position: absolute;
  top: 104px;
  right: -18px;
  z-index: 3;
  width: 18px;
  height: 4px;
  background: var(--blue);
  opacity: 0.54;
  transform-origin: left center;
}

.flow-step::before {
  content: "";
  position: absolute;
  top: 96px;
  right: -25px;
  z-index: 3;
  border-left: 10px solid var(--blue);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  opacity: 0.54;
}

.flow-step:last-child::before,
.flow-step:last-child::after {
  display: none;
}

.flow-step.is-active {
  background: #fff;
  border-color: rgba(4, 17, 95, 0.78);
  box-shadow:
    0 18px 36px rgba(4, 17, 95, 0.13),
    6px 8px 0 rgba(18, 63, 216, 0.1);
  transform: translateY(-8px);
}

.flow-step.is-active::before,
.flow-step.is-active::after {
  opacity: 1;
  animation: flowArrowPulse 1.1s ease-in-out infinite;
}

.flow-no {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  background: #edf2f7;
  color: #7b8798;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.flow-step.is-active .flow-no {
  background: var(--deep-blue);
  color: #fff;
}

.flow-title {
  display: block;
  margin: 0 0 14px;
  color: var(--deep-blue);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.28;
}

.flow-text {
  margin: 0;
  color: #4f5868;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.78;
}

.flow-loop {
  position: relative;
  height: 124px;
  margin: 10px 0 24px;
}

.flow-loop::before {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  top: 0;
  bottom: 44px;
  border-right: 4px solid var(--deep-blue);
  border-bottom: 4px solid var(--deep-blue);
  border-left: 4px solid var(--deep-blue);
  opacity: 0.9;
}

.flow-loop::after {
  content: "";
  position: absolute;
  left: 31px;
  top: -1px;
  border-bottom: 18px solid var(--deep-blue);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.flow-loop-note {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 560px;
  max-width: calc(100% - 120px);
  padding: 18px 24px 20px;
  background: var(--deep-blue);
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 16px 34px rgba(4, 17, 95, 0.16);
}

.flow-loop-note b,
.flow-loop-note span {
  display: block;
}

.flow-loop-note b {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.35;
}

.flow-loop-note span {
  margin-top: 4px;
  color: #c7d8ff;
  font-size: 15px;
  font-weight: 700;
}

.flow-explainer {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 142px;
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid rgba(4, 17, 95, 0.16);
  border-radius: 0;
}

.flow-explain-label {
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
}

.flow-explain-title {
  margin: 4px 0 0;
  color: var(--deep-blue);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
}

.flow-explain-text {
  margin: 0;
  color: #27324a;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.7;
}

@keyframes flowArrowPulse {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-step,
  .flow-step::before,
  .flow-step::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- 代表メッセージ section --- */
.h-msg-1 { font-size: 56px; }
.h-msg-2 { font-size: 58px; margin-left: 22px; }
.h-msg-3 { font-size: 64px; margin-left: 44px; }

.rep-card {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 440px;
  margin-top: 6px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 255, 0.96));
  border: 4px solid rgba(18, 63, 216, 0.84);
  border-radius: 0;
  box-shadow: 0 26px 62px rgba(4, 17, 95, 0.14);
}

#message .rep-card::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -190px;
  z-index: 0;
  width: 260px;
  height: 720px;
  background: linear-gradient(90deg, transparent, rgba(18, 191, 247, 0.16), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-170px) rotate(16deg);
}

#message .rep-card::after {
  z-index: 4;
}

#message .rep-card > * {
  position: relative;
  z-index: 1;
}

.rep-photo {
  position: relative;
  background: #eefaff;
  border-right: 4px solid rgba(18, 63, 216, 0.84);
  overflow: hidden;
}

.rep-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 17, 95, 0.2), transparent 34%, rgba(18, 191, 247, 0.11) 72%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.rep-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.rep-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 38px;
}

.rep-info::before {
  content: "";
  position: absolute;
  top: 32px;
  right: 34px;
  width: 82px;
  height: 82px;
  border-top: 3px solid rgba(18, 191, 247, 0.42);
  border-right: 3px solid rgba(18, 63, 216, 0.32);
  opacity: 0.7;
  pointer-events: none;
}

.rep-name {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.rep-name span {
  padding: 5px 14px 7px;
  background: linear-gradient(105deg, #03115b, #123fd8);
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
}

.rep-name b {
  font-size: 40px;
}

.rep-catch {
  margin: 0 0 30px;
  color: var(--blue);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.5;
}

.rep-career {
  margin: 0 0 26px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.78);
  border-left: 6px solid var(--blue);
  color: #25304a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
}

.rep-career b {
  color: var(--deep-blue);
  font-size: 18px;
}

.rep-link {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  overflow: hidden;
  padding: 18px 46px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 68%, #12bff7 100%);
  border: 3px solid rgba(4, 17, 95, 0.9);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    0 18px 38px rgba(4, 17, 95, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.rep-link::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -38%;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

.rep-link::after {
  position: relative;
  z-index: 1;
  content: " →";
}

#message.message-motion-ready .sec-label,
#message.message-motion-ready .sec-head .hl,
#message.message-motion-ready .rep-card,
#message.message-motion-ready .rep-photo img,
#message.message-motion-ready .rep-name,
#message.message-motion-ready .rep-catch,
#message.message-motion-ready .rep-career,
#message.message-motion-ready .rep-link {
  opacity: 0;
}

#message.message-motion-ready .sec-label {
  transform: translateY(24px) rotate(-3.2deg);
}

#message.message-motion-ready .sec-head .hl {
  clip-path: inset(0 100% 0 0);
  filter: blur(7px);
  transform: translateX(-34px);
}

#message.message-motion-ready .rep-card {
  transform: translateY(40px);
  filter: blur(7px);
}

#message.message-motion-ready .rep-photo img {
  transform: translateX(-18px) scale(1.06);
  filter: saturate(0.82) contrast(1.02);
}

#message.message-motion-ready .rep-name,
#message.message-motion-ready .rep-catch,
#message.message-motion-ready .rep-career,
#message.message-motion-ready .rep-link {
  transform: translateX(28px);
  filter: blur(5px);
}

#message.is-message-visible .sec-index {
  animation: messageIndexReveal 1s ease-out 0.08s both;
}

#message.is-message-visible .deco-dots {
  animation: messageDecorFloat 6.4s ease-in-out infinite alternate;
}

#message.is-message-visible .deco-lines {
  animation: messageLineFloat 7s ease-in-out infinite alternate;
}

#message.is-message-visible .sec-label {
  animation: messageLabelReveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

#message.is-message-visible .sec-head .hl {
  animation: messageHeadlineReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#message.is-message-visible .sec-head .hl:nth-child(1) { animation-delay: 0.22s; }
#message.is-message-visible .sec-head .hl:nth-child(2) { animation-delay: 0.36s; }
#message.is-message-visible .sec-head .hl:nth-child(3) { animation-delay: 0.5s; }

#message.is-message-visible .rep-card {
  animation: messageCardReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}

#message.is-message-visible .rep-card::before {
  animation: messageCardSweep 1.35s ease-out 0.95s both;
}

#message.is-message-visible .rep-photo img {
  animation: messagePhotoReveal 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.86s both;
}

#message.is-message-visible .rep-photo::after {
  animation: messagePhotoSweep 1.15s ease-out 1.02s both;
}

#message.is-message-visible .rep-name {
  animation: messageInfoReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.98s both;
}

#message.is-message-visible .rep-catch {
  animation: messageInfoReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

#message.is-message-visible .rep-career {
  animation: messageInfoReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.22s both;
}

#message.is-message-visible .rep-link {
  animation: messageInfoReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.34s both;
}

#message.is-message-visible .rep-link::before {
  animation: messageLinkSweep 0.92s ease-out 1.78s both;
}

#message.message-motion-ready.is-message-visible .sec-label,
#message.message-motion-ready.is-message-visible .sec-head .hl,
#message.message-motion-ready.is-message-visible .rep-card,
#message.message-motion-ready.is-message-visible .rep-photo img,
#message.message-motion-ready.is-message-visible .rep-name,
#message.message-motion-ready.is-message-visible .rep-catch,
#message.message-motion-ready.is-message-visible .rep-career,
#message.message-motion-ready.is-message-visible .rep-link {
  opacity: 1;
  filter: none;
}

#message.message-motion-ready.is-message-visible .sec-label {
  transform: rotate(-3.2deg);
}

#message.message-motion-ready.is-message-visible .sec-head .hl,
#message.message-motion-ready.is-message-visible .rep-card,
#message.message-motion-ready.is-message-visible .rep-name,
#message.message-motion-ready.is-message-visible .rep-catch,
#message.message-motion-ready.is-message-visible .rep-career,
#message.message-motion-ready.is-message-visible .rep-link {
  transform: translateX(0) translateY(0);
  clip-path: inset(0);
}

#message.message-motion-ready.is-message-visible .rep-photo img {
  transform: translateX(0) scale(1);
}

@keyframes messageIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes messageDecorFloat {
  from { transform: translateY(0) scale(1); opacity: 0.72; }
  to { transform: translateY(18px) scale(1.04); opacity: 1; }
}

@keyframes messageLineFloat {
  from { transform: rotate(6deg) translateX(0); opacity: 0.64; }
  to { transform: rotate(6deg) translateX(18px); opacity: 0.94; }
}

@keyframes messageLabelReveal {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-3.2deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: rotate(-3.2deg);
    clip-path: inset(0);
  }
}

@keyframes messageHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(7px);
    transform: translateX(-34px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes messageCardReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes messagePhotoReveal {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(1.06);
    filter: saturate(0.82) contrast(1.02);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: saturate(1) contrast(1);
  }
}

@keyframes messagePhotoSweep {
  0% { opacity: 0; transform: translateX(-120%); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes messageCardSweep {
  0% { opacity: 0; transform: translateX(-170px) rotate(16deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(720px) rotate(16deg); }
}

@keyframes messageInfoReveal {
  from {
    opacity: 0;
    transform: translateX(28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes messageLinkSweep {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(520%) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  #message.message-motion-ready .sec-label,
  #message.message-motion-ready .sec-head .hl,
  #message.message-motion-ready .rep-card,
  #message.message-motion-ready .rep-photo img,
  #message.message-motion-ready .rep-name,
  #message.message-motion-ready .rep-catch,
  #message.message-motion-ready .rep-career,
  #message.message-motion-ready .rep-link {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #message.message-motion-ready .sec-label {
    transform: rotate(-3.2deg) !important;
  }

  #message .rep-card::before,
  #message .rep-photo::after,
  #message .rep-link::before,
  #message .deco-dots,
  #message .deco-lines {
    animation: none !important;
  }
}

/* --- section 3: MEO service --- */
.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
  align-items: center;
  margin-top: 48px;
  padding: 38px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 255, 0.96));
  border: 3px solid rgba(18, 63, 216, 0.84);
  border-radius: 0;
  box-shadow: 0 26px 62px rgba(4, 17, 95, 0.11);
}

#meo .service-card::before {
  content: "";
  position: absolute;
  top: -140px;
  left: -190px;
  z-index: 0;
  width: 240px;
  height: 760px;
  background: linear-gradient(90deg, transparent, rgba(18, 191, 247, 0.18), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-180px) rotate(15deg);
}

#meo .service-card > * {
  position: relative;
  z-index: 1;
}

.mini-label {
  display: inline-block;
  padding: 8px 16px 10px;
  background: linear-gradient(105deg, #03115b, #123fd8 70%, #12bff7);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.service-sub {
  margin: 14px 0 16px;
  color: var(--blue);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.3;
}

.service-text .body {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.95;
}

.text-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 12px 30px 14px;
  background: linear-gradient(105deg, #03115b, #123fd8 72%, #12bff7);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  text-decoration: none;
}

.text-link::before {
  content: "";
  position: absolute;
  top: -42%;
  bottom: -42%;
  left: -36%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

.text-link::after {
  position: relative;
  z-index: 1;
  content: " →";
}

.gbp-card {
  position: relative;
  width: 300px;
  background: #fff;
  border: 3px solid rgba(18, 63, 216, 0.84);
  border-radius: 0;
  box-shadow: 0 20px 46px rgba(4, 17, 95, 0.12);
  overflow: hidden;
}

.gbp-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 5px 10px 6px;
  background: linear-gradient(105deg, #03115b, #123fd8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.gbp-photo {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 112px;
}

.gbp-photo span:first-child {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #03115b, #123fd8);
}

.gbp-photo span:nth-child(2) {
  background: linear-gradient(135deg, #12bff7, #8bdfff);
}

.gbp-photo span:nth-child(3) {
  background: linear-gradient(135deg, #effbff, #8bdfff);
}

.gbp-body {
  padding: 16px 18px 20px;
}

.gbp-name {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 900;
}

.gbp-stars {
  margin: 0 0 4px;
  color: #f5a623;
  font-size: 14px;
  font-weight: 900;
}

.gbp-stars b {
  color: var(--ink);
}

.gbp-stars .rev {
  color: #666;
  font-weight: 700;
}

.gbp-cat {
  margin: 0 0 12px;
  color: #555;
  font-size: 13px;
  font-weight: 700;
}

.gbp-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.gbp-actions span {
  flex: 1;
  padding: 7px 0 8px;
  border: 2px solid rgba(18, 63, 216, 0.72);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.gbp-info {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gbp-info li {
  padding: 7px 0;
  border-top: 1px solid #eceef8;
  color: #333;
  font-size: 13px;
  font-weight: 700;
}

.gbp-info b {
  color: #1a9a4a;
}

#meo .cta-btn {
  position: relative;
  overflow: hidden;
}

#meo .cta-btn::before {
  content: "";
  position: absolute;
  top: -44%;
  bottom: -44%;
  left: -34%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

#meo .cta-btn::after {
  position: relative;
  z-index: 1;
}

#meo .gbp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(18, 191, 247, 0.14), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

#meo .gbp-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  border: 2px solid rgba(18, 191, 247, 0.24);
  pointer-events: none;
}

#meo .gbp-photo span {
  position: relative;
  overflow: hidden;
}

#meo .gbp-photo span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  opacity: 0;
  transform: translateX(-110%);
}

#meo.meo-motion-ready .sec-label,
#meo.meo-motion-ready .sec-head .hl,
#meo.meo-motion-ready .sec-lead,
#meo.meo-motion-ready .cta-row,
#meo.meo-motion-ready .service-card,
#meo.meo-motion-ready .mini-label,
#meo.meo-motion-ready .service-sub,
#meo.meo-motion-ready .service-text .body,
#meo.meo-motion-ready .text-link,
#meo.meo-motion-ready .gbp-card,
#meo.meo-motion-ready .gbp-chip,
#meo.meo-motion-ready .gbp-photo span,
#meo.meo-motion-ready .gbp-name,
#meo.meo-motion-ready .gbp-stars,
#meo.meo-motion-ready .gbp-cat,
#meo.meo-motion-ready .gbp-actions span,
#meo.meo-motion-ready .gbp-info li {
  opacity: 0;
}

#meo.meo-motion-ready .sec-label {
  transform: translateY(24px) rotate(-3.2deg);
}

#meo.meo-motion-ready .sec-head .hl {
  clip-path: inset(0 100% 0 0);
  filter: blur(8px);
  transform: translateX(-32px);
}

#meo.meo-motion-ready .sec-lead,
#meo.meo-motion-ready .cta-row,
#meo.meo-motion-ready .service-card {
  transform: translateY(34px);
  filter: blur(6px);
}

#meo.meo-motion-ready .mini-label,
#meo.meo-motion-ready .service-sub,
#meo.meo-motion-ready .service-text .body,
#meo.meo-motion-ready .text-link {
  transform: translateX(-28px);
  filter: blur(5px);
}

#meo.meo-motion-ready .gbp-card {
  transform: translateX(34px);
  filter: blur(7px);
}

#meo.meo-motion-ready .gbp-chip,
#meo.meo-motion-ready .gbp-photo span,
#meo.meo-motion-ready .gbp-name,
#meo.meo-motion-ready .gbp-stars,
#meo.meo-motion-ready .gbp-cat,
#meo.meo-motion-ready .gbp-actions span,
#meo.meo-motion-ready .gbp-info li {
  transform: translateY(16px);
  filter: blur(4px);
}

#meo.is-meo-visible .sec-index {
  animation: meoIndexReveal 1s ease-out 0.08s both;
}

#meo.is-meo-visible .deco-dots {
  animation: meoDecorFloat 6.2s ease-in-out infinite alternate;
}

#meo.is-meo-visible .deco-corner {
  animation: meoCornerFloat 6.8s ease-in-out infinite alternate;
}

#meo.is-meo-visible .sec-label {
  animation: meoLabelReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

#meo.is-meo-visible .sec-head .hl {
  animation: meoHeadlineReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#meo.is-meo-visible .sec-head .hl:nth-child(1) { animation-delay: 0.22s; }
#meo.is-meo-visible .sec-head .hl:nth-child(2) { animation-delay: 0.38s; }

#meo.is-meo-visible .sec-lead {
  animation: meoBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}

#meo.is-meo-visible .cta-row {
  animation: meoBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}

#meo.is-meo-visible .cta-btn::before {
  animation: meoButtonSweep 0.94s ease-out 1.08s both;
}

#meo.is-meo-visible .service-card {
  animation: meoBlockReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.86s both;
}

#meo.is-meo-visible .service-card::before {
  animation: meoCardSweep 1.28s ease-out 1.1s both;
}

#meo.is-meo-visible .mini-label {
  animation: meoTextReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.04s both;
}

#meo.is-meo-visible .service-sub {
  animation: meoTextReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.16s both;
}

#meo.is-meo-visible .service-text .body {
  animation: meoTextReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.28s both;
}

#meo.is-meo-visible .text-link {
  animation: meoTextReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

#meo.is-meo-visible .text-link::before {
  animation: meoButtonSweep 0.86s ease-out 1.78s both;
}

#meo.is-meo-visible .gbp-card {
  animation: meoMapReveal 0.84s cubic-bezier(0.22, 1, 0.36, 1) 1.06s both;
}

#meo.is-meo-visible .gbp-card::before {
  animation: meoMapScan 1.18s ease-out 1.46s both;
}

#meo.is-meo-visible .gbp-chip,
#meo.is-meo-visible .gbp-photo span,
#meo.is-meo-visible .gbp-name,
#meo.is-meo-visible .gbp-stars,
#meo.is-meo-visible .gbp-cat,
#meo.is-meo-visible .gbp-actions span,
#meo.is-meo-visible .gbp-info li {
  animation: meoMapItemReveal 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#meo.is-meo-visible .gbp-chip { animation-delay: 1.22s; }
#meo.is-meo-visible .gbp-photo span:nth-child(1) { animation-delay: 1.28s; }
#meo.is-meo-visible .gbp-photo span:nth-child(2) { animation-delay: 1.36s; }
#meo.is-meo-visible .gbp-photo span:nth-child(3) { animation-delay: 1.44s; }
#meo.is-meo-visible .gbp-name { animation-delay: 1.54s; }
#meo.is-meo-visible .gbp-stars { animation-delay: 1.62s; }
#meo.is-meo-visible .gbp-cat { animation-delay: 1.7s; }
#meo.is-meo-visible .gbp-actions span:nth-child(1) { animation-delay: 1.78s; }
#meo.is-meo-visible .gbp-actions span:nth-child(2) { animation-delay: 1.86s; }
#meo.is-meo-visible .gbp-actions span:nth-child(3) { animation-delay: 1.94s; }
#meo.is-meo-visible .gbp-actions span:nth-child(4) { animation-delay: 2.02s; }
#meo.is-meo-visible .gbp-info li:nth-child(1) { animation-delay: 2.1s; }
#meo.is-meo-visible .gbp-info li:nth-child(2) { animation-delay: 2.18s; }
#meo.is-meo-visible .gbp-info li:nth-child(3) { animation-delay: 2.26s; }

#meo.is-meo-visible .gbp-photo span::after {
  animation: meoPhotoSweep 0.86s ease-out 1.72s both;
}

#meo.is-meo-visible .gbp-actions span {
  animation-name: meoMapItemReveal, meoActionPulse;
  animation-duration: 0.54s, 2.8s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
}

#meo.meo-motion-ready.is-meo-visible .sec-label,
#meo.meo-motion-ready.is-meo-visible .sec-head .hl,
#meo.meo-motion-ready.is-meo-visible .sec-lead,
#meo.meo-motion-ready.is-meo-visible .cta-row,
#meo.meo-motion-ready.is-meo-visible .service-card,
#meo.meo-motion-ready.is-meo-visible .mini-label,
#meo.meo-motion-ready.is-meo-visible .service-sub,
#meo.meo-motion-ready.is-meo-visible .service-text .body,
#meo.meo-motion-ready.is-meo-visible .text-link,
#meo.meo-motion-ready.is-meo-visible .gbp-card,
#meo.meo-motion-ready.is-meo-visible .gbp-chip,
#meo.meo-motion-ready.is-meo-visible .gbp-photo span,
#meo.meo-motion-ready.is-meo-visible .gbp-name,
#meo.meo-motion-ready.is-meo-visible .gbp-stars,
#meo.meo-motion-ready.is-meo-visible .gbp-cat,
#meo.meo-motion-ready.is-meo-visible .gbp-actions span,
#meo.meo-motion-ready.is-meo-visible .gbp-info li {
  opacity: 1;
  filter: none;
}

#meo.meo-motion-ready.is-meo-visible .sec-label {
  transform: rotate(-3.2deg);
}

#meo.meo-motion-ready.is-meo-visible .sec-head .hl,
#meo.meo-motion-ready.is-meo-visible .sec-lead,
#meo.meo-motion-ready.is-meo-visible .cta-row,
#meo.meo-motion-ready.is-meo-visible .service-card,
#meo.meo-motion-ready.is-meo-visible .mini-label,
#meo.meo-motion-ready.is-meo-visible .service-sub,
#meo.meo-motion-ready.is-meo-visible .service-text .body,
#meo.meo-motion-ready.is-meo-visible .text-link,
#meo.meo-motion-ready.is-meo-visible .gbp-card,
#meo.meo-motion-ready.is-meo-visible .gbp-chip,
#meo.meo-motion-ready.is-meo-visible .gbp-photo span,
#meo.meo-motion-ready.is-meo-visible .gbp-name,
#meo.meo-motion-ready.is-meo-visible .gbp-stars,
#meo.meo-motion-ready.is-meo-visible .gbp-cat,
#meo.meo-motion-ready.is-meo-visible .gbp-actions span,
#meo.meo-motion-ready.is-meo-visible .gbp-info li {
  transform: translateX(0) translateY(0);
  clip-path: inset(0);
}

@keyframes meoIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes meoDecorFloat {
  from { transform: translateY(0) scale(1); opacity: 0.68; }
  to { transform: translateY(-18px) scale(1.04); opacity: 1; }
}

@keyframes meoCornerFloat {
  from { transform: rotate(-9deg) skewX(-9deg) translateY(0); opacity: 0.9; }
  to { transform: rotate(-9deg) skewX(-9deg) translateY(-16px); opacity: 1; }
}

@keyframes meoLabelReveal {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-3.2deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: rotate(-3.2deg);
    clip-path: inset(0);
  }
}

@keyframes meoHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes meoBlockReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes meoTextReveal {
  from {
    opacity: 0;
    transform: translateX(-28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes meoMapReveal {
  from {
    opacity: 0;
    transform: translateX(34px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes meoMapItemReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes meoCardSweep {
  0% { opacity: 0; transform: translateX(-180px) rotate(15deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(760px) rotate(15deg); }
}

@keyframes meoButtonSweep {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(560%) skewX(-18deg); }
}

@keyframes meoMapScan {
  0% { opacity: 0; transform: translateY(-100%); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}

@keyframes meoPhotoSweep {
  0% { opacity: 0; transform: translateX(-110%); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes meoActionPulse {
  0%, 100% {
    border-color: rgba(18, 63, 216, 0.72);
    box-shadow: 0 0 0 rgba(18, 191, 247, 0);
  }
  48% {
    border-color: rgba(18, 191, 247, 0.9);
    box-shadow: 0 0 0 5px rgba(18, 191, 247, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #meo.meo-motion-ready .sec-label,
  #meo.meo-motion-ready .sec-head .hl,
  #meo.meo-motion-ready .sec-lead,
  #meo.meo-motion-ready .cta-row,
  #meo.meo-motion-ready .service-card,
  #meo.meo-motion-ready .mini-label,
  #meo.meo-motion-ready .service-sub,
  #meo.meo-motion-ready .service-text .body,
  #meo.meo-motion-ready .text-link,
  #meo.meo-motion-ready .gbp-card,
  #meo.meo-motion-ready .gbp-chip,
  #meo.meo-motion-ready .gbp-photo span,
  #meo.meo-motion-ready .gbp-name,
  #meo.meo-motion-ready .gbp-stars,
  #meo.meo-motion-ready .gbp-cat,
  #meo.meo-motion-ready .gbp-actions span,
  #meo.meo-motion-ready .gbp-info li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #meo.meo-motion-ready .sec-label {
    transform: rotate(-3.2deg) !important;
  }

  #meo .service-card::before,
  #meo .gbp-card::before,
  #meo .gbp-photo span::after,
  #meo .cta-btn::before,
  #meo .text-link::before,
  #meo .deco-dots,
  #meo .deco-corner {
    animation: none !important;
  }
}

/* --- section 4: works showcase --- */
.lp-showcase {
  position: relative;
  height: 560px;
  margin: 18px 0 0;
  perspective: 1200px;
}

#works .lp-showcase::before {
  content: "";
  position: absolute;
  left: 72px;
  right: 72px;
  top: 44px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(18, 191, 247, 0.64), rgba(18, 63, 216, 0.42), transparent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  pointer-events: none;
}

.lp-shot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  margin: 0;
  background: #fff;
  border: 3px solid rgba(18, 63, 216, 0.82);
  border-radius: 0;
  box-shadow: 0 28px 60px rgba(4, 17, 95, 0.16);
  transform-origin: top center;
  transition: transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
}

.lp-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.lp-shot::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 3;
  border: 2px solid rgba(18, 191, 247, 0.26);
  pointer-events: none;
}

.lp-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-shot.pos-front {
  transform: translateX(-50%);
  z-index: 3;
}

.lp-shot.pos-left {
  transform: translateX(-50%) translateX(-240px) translateY(30px) rotateY(24deg) scale(0.76);
  z-index: 1;
  opacity: 0.9;
}

.lp-shot.pos-right {
  transform: translateX(-50%) translateX(240px) translateY(30px) rotateY(-24deg) scale(0.76);
  z-index: 1;
  opacity: 0.9;
}

.show-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 28px 0 38px;
}

.show-arrow {
  position: relative;
  width: 72px;
  height: 56px;
  overflow: hidden;
  background: linear-gradient(135deg, #03115b, #123fd8 70%, #12bff7);
  border: 3px solid rgba(4, 17, 95, 0.9);
  color: #fff;
  font-family: inherit;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
}

.show-arrow::before {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -42%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

.show-hint {
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 42px;
  padding: 0;
  list-style: none;
}

.tag-row li {
  padding: 10px 24px 12px;
  background: linear-gradient(180deg, #ffffff, #eefaff);
  border: 3px solid rgba(18, 63, 216, 0.78);
  border-radius: 0;
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
}

.acc-btn {
  display: block;
  width: 100%;
  padding: 26px 30px;
  background: linear-gradient(105deg, #03115b 0%, #123fd8 68%, #12bff7 100%);
  border: 3px solid rgba(4, 17, 95, 0.9);
  color: #fff;
  font-family: inherit;
  font-size: 34px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 22px 48px rgba(4, 17, 95, 0.16);
}

.acc-btn::after {
  content: "＋";
  margin-left: 14px;
}

.acc-btn.open::after {
  content: "－";
}

.acc-panel {
  display: none;
  margin-top: 20px;
  padding: 30px 34px;
  background: rgba(251, 253, 255, 0.96);
  border: 3px solid rgba(18, 63, 216, 0.78);
  border-radius: 0;
  box-shadow: 0 20px 48px rgba(4, 17, 95, 0.09);
  font-size: 19px;
  font-weight: 700;
  line-height: 2;
}

.acc-panel.open {
  display: block;
}

.acc-panel p {
  margin: 0 0 18px;
}

.acc-panel p:last-child {
  margin-bottom: 0;
}

.acc-panel strong {
  color: var(--blue);
}

#works.works-motion-ready .sec-label,
#works.works-motion-ready .sec-head .hl,
#works.works-motion-ready > .sec-inner > .sec-lead,
#works.works-motion-ready .lp-showcase,
#works.works-motion-ready .lp-shot,
#works.works-motion-ready .show-nav,
#works.works-motion-ready .sec-lead.center,
#works.works-motion-ready .tag-row li,
#works.works-motion-ready .acc-btn {
  opacity: 0;
}

#works.works-motion-ready .sec-label {
  transform: translateY(24px) rotate(-3.2deg);
}

#works.works-motion-ready .sec-head .hl {
  clip-path: inset(0 100% 0 0);
  filter: blur(8px);
  transform: translateX(-32px);
}

#works.works-motion-ready > .sec-inner > .sec-lead,
#works.works-motion-ready .lp-showcase,
#works.works-motion-ready .show-nav,
#works.works-motion-ready .sec-lead.center,
#works.works-motion-ready .acc-btn {
  transform: translateY(34px);
  filter: blur(6px);
}

#works.works-motion-ready .lp-shot {
  translate: 0 36px;
  filter: blur(7px);
}

#works.works-motion-ready .tag-row li {
  transform: translateY(20px);
  filter: blur(4px);
}

#works.is-works-visible .sec-index {
  animation: worksIndexReveal 1s ease-out 0.08s both;
}

#works.is-works-visible .deco-lines {
  animation: worksLineFloat 6.8s ease-in-out infinite alternate;
}

#works.is-works-visible .deco-dots {
  animation: worksDecorFloat 6.2s ease-in-out infinite alternate;
}

#works.is-works-visible .sec-label {
  animation: worksLabelReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

#works.is-works-visible .sec-head .hl {
  animation: worksHeadlineReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#works.is-works-visible .sec-head .hl:nth-child(1) { animation-delay: 0.22s; }
#works.is-works-visible .sec-head .hl:nth-child(2) { animation-delay: 0.36s; }
#works.is-works-visible .sec-head .hl:nth-child(3) { animation-delay: 0.5s; }

#works.is-works-visible > .sec-inner > .sec-lead {
  animation: worksBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}

#works.is-works-visible .lp-showcase {
  animation: worksBlockReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.84s both;
}

#works.is-works-visible .lp-showcase::before {
  animation: worksShowcaseRule 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.04s both;
}

#works.is-works-visible .lp-shot {
  animation: worksShotReveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#works.is-works-visible .lp-shot:nth-child(1) { animation-delay: 1.02s; }
#works.is-works-visible .lp-shot:nth-child(2) { animation-delay: 1.16s; }
#works.is-works-visible .lp-shot:nth-child(3) { animation-delay: 1.3s; }

#works.is-works-visible .lp-shot::before {
  animation: worksShotSweep 1s ease-out 1.58s both;
}

#works.is-works-visible .show-nav {
  animation: worksBlockReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.42s both;
}

#works.is-works-visible .show-arrow::before {
  animation: worksButtonSweep 0.92s ease-out 1.8s both;
}

#works.is-works-visible .sec-lead.center {
  animation: worksBlockReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.58s both;
}

#works.is-works-visible .tag-row li {
  animation: worksTagReveal 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#works.is-works-visible .tag-row li:nth-child(1) { animation-delay: 1.76s; }
#works.is-works-visible .tag-row li:nth-child(2) { animation-delay: 1.86s; }
#works.is-works-visible .tag-row li:nth-child(3) { animation-delay: 1.96s; }
#works.is-works-visible .tag-row li:nth-child(4) { animation-delay: 2.06s; }

#works.is-works-visible .acc-btn {
  animation: worksBlockReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.18s both;
}

#works.works-motion-ready.is-works-visible .sec-label,
#works.works-motion-ready.is-works-visible .sec-head .hl,
#works.works-motion-ready.is-works-visible > .sec-inner > .sec-lead,
#works.works-motion-ready.is-works-visible .lp-showcase,
#works.works-motion-ready.is-works-visible .lp-shot,
#works.works-motion-ready.is-works-visible .show-nav,
#works.works-motion-ready.is-works-visible .sec-lead.center,
#works.works-motion-ready.is-works-visible .tag-row li,
#works.works-motion-ready.is-works-visible .acc-btn {
  opacity: 1;
  filter: none;
}

#works.works-motion-ready.is-works-visible .sec-label {
  transform: rotate(-3.2deg);
}

#works.works-motion-ready.is-works-visible .sec-head .hl,
#works.works-motion-ready.is-works-visible > .sec-inner > .sec-lead,
#works.works-motion-ready.is-works-visible .lp-showcase,
#works.works-motion-ready.is-works-visible .show-nav,
#works.works-motion-ready.is-works-visible .sec-lead.center,
#works.works-motion-ready.is-works-visible .tag-row li,
#works.works-motion-ready.is-works-visible .acc-btn {
  transform: translateX(0) translateY(0);
  clip-path: inset(0);
}

#works.works-motion-ready.is-works-visible .lp-shot {
  translate: 0 0;
}

@keyframes worksIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes worksLineFloat {
  from { transform: rotate(4deg) translateX(0); opacity: 0.66; }
  to { transform: rotate(4deg) translateX(-18px); opacity: 0.95; }
}

@keyframes worksDecorFloat {
  from { transform: translateY(0) scale(1); opacity: 0.68; }
  to { transform: translateY(-18px) scale(1.04); opacity: 1; }
}

@keyframes worksLabelReveal {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-3.2deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: rotate(-3.2deg);
    clip-path: inset(0);
  }
}

@keyframes worksHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes worksBlockReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes worksShotReveal {
  from {
    opacity: 0;
    translate: 0 36px;
    filter: blur(7px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

@keyframes worksShowcaseRule {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes worksShotSweep {
  0% { opacity: 0; transform: translateX(-120%); }
  26% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes worksButtonSweep {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(450%) skewX(-18deg); }
}

@keyframes worksTagReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #works.works-motion-ready .sec-label,
  #works.works-motion-ready .sec-head .hl,
  #works.works-motion-ready > .sec-inner > .sec-lead,
  #works.works-motion-ready .lp-showcase,
  #works.works-motion-ready .lp-shot,
  #works.works-motion-ready .show-nav,
  #works.works-motion-ready .sec-lead.center,
  #works.works-motion-ready .tag-row li,
  #works.works-motion-ready .acc-btn {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #works.works-motion-ready .sec-label {
    transform: rotate(-3.2deg) !important;
  }

  #works .lp-showcase::before,
  #works .lp-shot::before,
  #works .show-arrow::before,
  #works .deco-lines,
  #works .deco-dots {
    animation: none !important;
  }
}

/* --- section 5: early partner --- */
.offer-card {
  position: relative;
  margin-top: 56px;
  padding: 56px 40px 42px;
  background:
    radial-gradient(760px 240px at 50% 0%, rgba(18, 191, 247, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.96));
  border: 4px solid rgba(18, 63, 216, 0.86);
  border-radius: 0;
  text-align: center;
  box-shadow: 0 30px 70px rgba(4, 17, 95, 0.15);
}

#partner .offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(18, 191, 247, 0.18) 43%, transparent 54%),
    radial-gradient(320px 140px at 50% 10%, rgba(18, 191, 247, 0.12), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-55%);
}

#partner .offer-card::after {
  z-index: 4;
}

#partner .offer-card > * {
  position: relative;
  z-index: 1;
}

#partner .offer-ribbon {
  position: absolute;
}

.offer-ribbon {
  position: absolute;
  top: -26px;
  left: 50%;
  z-index: 5;
  padding: 10px 34px 12px;
  background: linear-gradient(105deg, #ffffff, #8bdfff 58%, #12bff7);
  color: #03115b;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 16px 34px rgba(4, 17, 95, 0.14);
}

.offer-sub {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 48px;
  font-weight: 900;
}

.offer-pre {
  margin: 0 0 -6px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
}

.offer-off {
  margin: 0 0 14px;
  color: var(--blue);
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 0.9;
}

.offer-off .off-num {
  font-size: 160px;
  font-variant-numeric: tabular-nums;
}

.offer-off .off-unit {
  font-size: 80px;
}

.offer-note {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.8;
}

.offer-detail {
  display: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid rgba(28, 62, 224, 0.35);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
}

.offer-detail p {
  margin: 0;
}

.offer-card.open .offer-detail {
  display: block;
}

.feature-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.feature-trio li {
  position: relative;
  overflow: hidden;
  padding: 30px 14px 26px;
  background: linear-gradient(180deg, #ffffff, #eefaff);
  border: 3px solid rgba(18, 63, 216, 0.78);
  border-radius: 0;
  text-align: center;
  box-shadow: 0 18px 42px rgba(4, 17, 95, 0.08);
}

.feature-trio li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(18, 191, 247, 0.13), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
}

.f-icon {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #03115b, #123fd8 70%, #12bff7);
  color: #fff;
}

.f-icon svg {
  width: 36px;
  height: 36px;
}

.feature-trio p {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
}

#partner .cta-btn {
  position: relative;
  overflow: hidden;
}

#partner .cta-btn::before {
  content: "";
  position: absolute;
  top: -44%;
  bottom: -44%;
  left: -34%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

#partner .cta-btn::after {
  position: relative;
  z-index: 1;
}

#partner.partner-motion-ready .sec-label,
#partner.partner-motion-ready .sec-head .hl,
#partner.partner-motion-ready .sec-lead,
#partner.partner-motion-ready .cta-row,
#partner.partner-motion-ready .offer-card,
#partner.partner-motion-ready .offer-ribbon,
#partner.partner-motion-ready .offer-sub,
#partner.partner-motion-ready .offer-pre,
#partner.partner-motion-ready .offer-off,
#partner.partner-motion-ready .offer-note,
#partner.partner-motion-ready .offer-more,
#partner.partner-motion-ready .feature-trio li {
  opacity: 0;
}

#partner.partner-motion-ready .sec-label {
  transform: translateY(24px) rotate(-3.2deg);
}

#partner.partner-motion-ready .sec-head .hl {
  clip-path: inset(0 100% 0 0);
  filter: blur(8px);
  transform: translateX(-32px);
}

#partner.partner-motion-ready .sec-lead,
#partner.partner-motion-ready .cta-row,
#partner.partner-motion-ready .offer-card {
  transform: translateY(34px);
  filter: blur(6px);
}

#partner.partner-motion-ready .offer-ribbon {
  transform: translateX(-50%) translateY(-14px) rotate(-2deg);
  filter: blur(5px);
}

#partner.partner-motion-ready .offer-sub,
#partner.partner-motion-ready .offer-pre,
#partner.partner-motion-ready .offer-off,
#partner.partner-motion-ready .offer-note,
#partner.partner-motion-ready .offer-more {
  transform: translateY(20px);
  filter: blur(5px);
}

#partner.partner-motion-ready .feature-trio li {
  transform: translateY(28px);
  filter: blur(5px);
}

#partner.is-partner-visible .sec-index {
  animation: partnerIndexReveal 1s ease-out 0.08s both;
}

#partner.is-partner-visible .deco-dots {
  animation: partnerDecorFloat 6.2s ease-in-out infinite alternate;
}

#partner.is-partner-visible .deco-corner {
  animation: partnerCornerFloat 6.8s ease-in-out infinite alternate;
}

#partner.is-partner-visible .sec-label {
  animation: partnerLabelReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

#partner.is-partner-visible .sec-head .hl {
  animation: partnerHeadlineReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#partner.is-partner-visible .sec-head .hl:nth-child(1) { animation-delay: 0.22s; }
#partner.is-partner-visible .sec-head .hl:nth-child(2) { animation-delay: 0.36s; }
#partner.is-partner-visible .sec-head .hl:nth-child(3) { animation-delay: 0.5s; }

#partner.is-partner-visible .sec-lead {
  animation: partnerBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#partner.is-partner-visible .sec-lead:nth-of-type(1) { animation-delay: 0.66s; }
#partner.is-partner-visible .sec-lead:nth-of-type(2) { animation-delay: 0.82s; }

#partner.is-partner-visible .cta-row {
  animation: partnerBlockReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.98s both;
}

#partner.is-partner-visible .cta-btn::before {
  animation: partnerButtonSweep 0.92s ease-out 1.34s both;
}

#partner.is-partner-visible .offer-card {
  animation: partnerBlockReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) 1.16s both;
}

#partner.is-partner-visible .offer-card::before {
  animation: partnerOfferSweep 1.28s ease-out 1.38s both;
}

#partner.is-partner-visible .offer-ribbon {
  animation: partnerRibbonReveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) 1.32s both;
}

#partner.is-partner-visible .offer-sub {
  animation: partnerOfferItemReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.46s both;
}

#partner.is-partner-visible .offer-pre {
  animation: partnerOfferItemReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.56s both;
}

#partner.is-partner-visible .offer-off {
  animation: partnerOfferNumberReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1.66s both;
}

#partner.is-partner-visible .offer-note {
  animation: partnerOfferItemReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.82s both;
}

#partner.is-partner-visible .offer-more {
  animation: partnerOfferItemReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.94s both;
}

#partner.is-partner-visible .feature-trio li {
  animation: partnerFeatureReveal 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#partner.is-partner-visible .feature-trio li:nth-child(1) { animation-delay: 2.1s; }
#partner.is-partner-visible .feature-trio li:nth-child(2) { animation-delay: 2.22s; }
#partner.is-partner-visible .feature-trio li:nth-child(3) { animation-delay: 2.34s; }

#partner.is-partner-visible .feature-trio li::before {
  animation: partnerFeatureSweep 0.86s ease-out 2.52s both;
}

#partner.is-partner-visible .f-icon {
  animation: partnerIconPulse 1.6s ease-in-out 2.62s infinite;
}

#partner.partner-motion-ready.is-partner-visible .sec-label,
#partner.partner-motion-ready.is-partner-visible .sec-head .hl,
#partner.partner-motion-ready.is-partner-visible .sec-lead,
#partner.partner-motion-ready.is-partner-visible .cta-row,
#partner.partner-motion-ready.is-partner-visible .offer-card,
#partner.partner-motion-ready.is-partner-visible .offer-ribbon,
#partner.partner-motion-ready.is-partner-visible .offer-sub,
#partner.partner-motion-ready.is-partner-visible .offer-pre,
#partner.partner-motion-ready.is-partner-visible .offer-off,
#partner.partner-motion-ready.is-partner-visible .offer-note,
#partner.partner-motion-ready.is-partner-visible .offer-more,
#partner.partner-motion-ready.is-partner-visible .feature-trio li {
  opacity: 1;
  filter: none;
}

#partner.partner-motion-ready.is-partner-visible .sec-label {
  transform: rotate(-3.2deg);
}

#partner.partner-motion-ready.is-partner-visible .sec-head .hl,
#partner.partner-motion-ready.is-partner-visible .sec-lead,
#partner.partner-motion-ready.is-partner-visible .cta-row,
#partner.partner-motion-ready.is-partner-visible .offer-card,
#partner.partner-motion-ready.is-partner-visible .offer-sub,
#partner.partner-motion-ready.is-partner-visible .offer-pre,
#partner.partner-motion-ready.is-partner-visible .offer-off,
#partner.partner-motion-ready.is-partner-visible .offer-note,
#partner.partner-motion-ready.is-partner-visible .offer-more,
#partner.partner-motion-ready.is-partner-visible .feature-trio li {
  transform: translateX(0) translateY(0);
  clip-path: inset(0);
}

#partner.partner-motion-ready.is-partner-visible .offer-ribbon {
  transform: translateX(-50%) rotate(-2deg);
}

@keyframes partnerIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes partnerDecorFloat {
  from { transform: translateY(0) scale(1); opacity: 0.68; }
  to { transform: translateY(18px) scale(1.04); opacity: 1; }
}

@keyframes partnerCornerFloat {
  from { transform: rotate(-9deg) skewX(-9deg) translateY(0); opacity: 0.9; }
  to { transform: rotate(-9deg) skewX(-9deg) translateY(-16px); opacity: 1; }
}

@keyframes partnerLabelReveal {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-3.2deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: rotate(-3.2deg);
    clip-path: inset(0);
  }
}

@keyframes partnerHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes partnerBlockReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes partnerRibbonReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) rotate(-2deg);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(-2deg);
    filter: blur(0);
  }
}

@keyframes partnerOfferItemReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes partnerOfferNumberReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
    filter: blur(5px);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes partnerOfferSweep {
  0% { opacity: 0; transform: translateX(-55%); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(55%); }
}

@keyframes partnerButtonSweep {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(560%) skewX(-18deg); }
}

@keyframes partnerFeatureReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes partnerFeatureSweep {
  0% { opacity: 0; transform: translateX(-110%); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes partnerIconPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(18, 191, 247, 0); transform: translateY(0); }
  50% { box-shadow: 0 0 0 10px rgba(18, 191, 247, 0.12); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  #partner.partner-motion-ready .sec-label,
  #partner.partner-motion-ready .sec-head .hl,
  #partner.partner-motion-ready .sec-lead,
  #partner.partner-motion-ready .cta-row,
  #partner.partner-motion-ready .offer-card,
  #partner.partner-motion-ready .offer-ribbon,
  #partner.partner-motion-ready .offer-sub,
  #partner.partner-motion-ready .offer-pre,
  #partner.partner-motion-ready .offer-off,
  #partner.partner-motion-ready .offer-note,
  #partner.partner-motion-ready .offer-more,
  #partner.partner-motion-ready .feature-trio li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #partner.partner-motion-ready .sec-label {
    transform: rotate(-3.2deg) !important;
  }

  #partner.partner-motion-ready .offer-ribbon {
    transform: translateX(-50%) rotate(-2deg) !important;
  }

  #partner .offer-card::before,
  #partner .feature-trio li::before,
  #partner .cta-btn::before,
  #partner .deco-dots,
  #partner .deco-corner,
  #partner .f-icon {
    animation: none !important;
  }
}

/* --- section 6: FAQ --- */
.faq-list {
  display: grid;
  gap: 18px;
}

.faq-item {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f2fbff);
  border: 3px solid rgba(18, 63, 216, 0.78);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(4, 17, 95, 0.08);
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(18, 191, 247, 0.12), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
}

.faq-q {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 24px 26px;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.faq-q .q-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #03115b, #123fd8);
  color: #fff;
  font-size: 24px;
}

.faq-q .q-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--blue);
  font-size: 34px;
  line-height: 1;
}

.faq-q .q-toggle::before {
  content: "＋";
}

.faq-item.open .faq-q .q-toggle::before {
  content: "－";
}

.faq-a {
  display: none;
  margin: 0;
  padding: 0 30px 28px 90px;
  color: #222;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
}

.faq-item.open .faq-a {
  display: block;
}

.contact-band {
  position: relative;
  margin-top: 64px;
  padding: 60px 44px;
  background:
    radial-gradient(700px 320px at 80% 0%, rgba(18, 191, 247, 0.34), transparent 62%),
    linear-gradient(135deg, #020b36 0%, #061a8f 52%, #123fd8 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 72px rgba(4, 17, 95, 0.24);
}

.contact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 62%, rgba(255, 255, 255, 0.14) 62.2% 62.7%, transparent 63.2% 100%),
    repeating-linear-gradient(112deg, transparent 0 44px, rgba(255, 255, 255, 0.06) 44px 48px);
  pointer-events: none;
}

.band-lead {
  position: relative;
  margin: 0 0 12px;
  color: #9fdcff;
  font-size: 32px;
  font-weight: 900;
}

.band-title {
  position: relative;
  margin: 0 0 34px;
  font-size: 54px;
  font-weight: 900;
  line-height: 1.4;
}

.contact-band .cta-btn {
  position: relative;
  overflow: hidden;
}

#faq .contact-band .cta-btn::before {
  content: "";
  position: absolute;
  top: -44%;
  bottom: -44%;
  left: -34%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  transform: skewX(-18deg);
}

#faq .contact-band .cta-btn::after {
  position: relative;
  z-index: 1;
}

.more-pages {
  margin-top: 58px;
  text-align: center;
}

.more-title {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 36px;
  font-weight: 900;
}

.more-sub {
  margin: 0 0 24px;
  font-size: 19px;
  font-weight: 700;
}

.more-links {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.more-links a {
  padding: 14px 34px 16px;
  background: linear-gradient(180deg, #ffffff, #eefaff);
  border: 3px solid rgba(18, 63, 216, 0.78);
  border-radius: 0;
  color: var(--blue);
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
}

.site-foot {
  margin: 72px 0 0;
  padding-top: 22px;
  border-top: 2px solid rgba(28, 62, 224, 0.25);
  color: #555;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}

#faq.faq-motion-ready .sec-head .hl,
#faq.faq-motion-ready > .sec-inner > .sec-lead,
#faq.faq-motion-ready .faq-item,
#faq.faq-motion-ready .contact-band,
#faq.faq-motion-ready .band-lead,
#faq.faq-motion-ready .band-title,
#faq.faq-motion-ready .contact-band .cta-btn,
#faq.faq-motion-ready .more-pages,
#faq.faq-motion-ready .site-foot {
  opacity: 0;
}

#faq.faq-motion-ready .sec-head .hl {
  clip-path: inset(0 100% 0 0);
  filter: blur(8px);
  transform: translateX(-32px);
}

#faq.faq-motion-ready > .sec-inner > .sec-lead,
#faq.faq-motion-ready .faq-item,
#faq.faq-motion-ready .contact-band,
#faq.faq-motion-ready .more-pages,
#faq.faq-motion-ready .site-foot {
  transform: translateY(34px);
  filter: blur(6px);
}

#faq.faq-motion-ready .band-lead,
#faq.faq-motion-ready .band-title,
#faq.faq-motion-ready .contact-band .cta-btn {
  transform: translateY(22px);
  filter: blur(5px);
}

#faq.is-faq-visible .sec-index {
  animation: faqIndexReveal 1s ease-out 0.08s both;
}

#faq.is-faq-visible .deco-dots {
  animation: faqDecorFloat 6.2s ease-in-out infinite alternate;
}

#faq.is-faq-visible .deco-lines {
  animation: faqLineFloat 6.8s ease-in-out infinite alternate;
}

#faq.is-faq-visible .sec-head .hl {
  animation: faqHeadlineReveal 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#faq.is-faq-visible .sec-head .hl:nth-child(1) { animation-delay: 0.14s; }
#faq.is-faq-visible .sec-head .hl:nth-child(2) { animation-delay: 0.3s; }

#faq.is-faq-visible > .sec-inner > .sec-lead {
  animation: faqBlockReveal 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}

#faq.is-faq-visible .faq-item {
  animation: faqItemReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#faq.is-faq-visible .faq-item:nth-child(1) { animation-delay: 0.68s; }
#faq.is-faq-visible .faq-item:nth-child(2) { animation-delay: 0.8s; }
#faq.is-faq-visible .faq-item:nth-child(3) { animation-delay: 0.92s; }
#faq.is-faq-visible .faq-item:nth-child(4) { animation-delay: 1.04s; }
#faq.is-faq-visible .faq-item:nth-child(5) { animation-delay: 1.16s; }
#faq.is-faq-visible .faq-item:nth-child(6) { animation-delay: 1.28s; }

#faq.is-faq-visible .faq-item::before {
  animation: faqItemSweep 0.86s ease-out 1.52s both;
}

#faq.is-faq-visible .q-mark {
  animation: faqMarkPulse 0.72s ease-out both;
}

#faq.is-faq-visible .faq-item:nth-child(1) .q-mark { animation-delay: 0.88s; }
#faq.is-faq-visible .faq-item:nth-child(2) .q-mark { animation-delay: 1s; }
#faq.is-faq-visible .faq-item:nth-child(3) .q-mark { animation-delay: 1.12s; }
#faq.is-faq-visible .faq-item:nth-child(4) .q-mark { animation-delay: 1.24s; }
#faq.is-faq-visible .faq-item:nth-child(5) .q-mark { animation-delay: 1.36s; }
#faq.is-faq-visible .faq-item:nth-child(6) .q-mark { animation-delay: 1.48s; }

#faq.is-faq-visible .contact-band {
  animation: faqBlockReveal 0.82s cubic-bezier(0.22, 1, 0.36, 1) 1.62s both;
}

#faq.is-faq-visible .contact-band::before {
  animation: faqBandLight 1.4s ease-out 1.84s both;
}

#faq.is-faq-visible .band-lead {
  animation: faqBandItemReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.86s both;
}

#faq.is-faq-visible .band-title {
  animation: faqBandItemReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.98s both;
}

#faq.is-faq-visible .contact-band .cta-btn {
  animation: faqBandItemReveal 0.66s cubic-bezier(0.22, 1, 0.36, 1) 2.12s both;
}

#faq.is-faq-visible .contact-band .cta-btn::before {
  animation: faqButtonSweep 0.92s ease-out 2.42s both;
}

#faq.is-faq-visible .more-pages {
  animation: faqBlockReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 2.28s both;
}

#faq.is-faq-visible .site-foot {
  animation: faqBlockReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) 2.42s both;
}

#faq.faq-motion-ready.is-faq-visible .sec-head .hl,
#faq.faq-motion-ready.is-faq-visible > .sec-inner > .sec-lead,
#faq.faq-motion-ready.is-faq-visible .faq-item,
#faq.faq-motion-ready.is-faq-visible .contact-band,
#faq.faq-motion-ready.is-faq-visible .band-lead,
#faq.faq-motion-ready.is-faq-visible .band-title,
#faq.faq-motion-ready.is-faq-visible .contact-band .cta-btn,
#faq.faq-motion-ready.is-faq-visible .more-pages,
#faq.faq-motion-ready.is-faq-visible .site-foot {
  opacity: 1;
  filter: none;
}

#faq.faq-motion-ready.is-faq-visible .sec-head .hl,
#faq.faq-motion-ready.is-faq-visible > .sec-inner > .sec-lead,
#faq.faq-motion-ready.is-faq-visible .faq-item,
#faq.faq-motion-ready.is-faq-visible .contact-band,
#faq.faq-motion-ready.is-faq-visible .band-lead,
#faq.faq-motion-ready.is-faq-visible .band-title,
#faq.faq-motion-ready.is-faq-visible .contact-band .cta-btn,
#faq.faq-motion-ready.is-faq-visible .more-pages,
#faq.faq-motion-ready.is-faq-visible .site-foot {
  transform: translateX(0) translateY(0);
  clip-path: inset(0);
}

@keyframes faqIndexReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes faqDecorFloat {
  from { transform: translateY(0) scale(1); opacity: 0.68; }
  to { transform: translateY(18px) scale(1.04); opacity: 1; }
}

@keyframes faqLineFloat {
  from { transform: rotate(8deg) translateX(0); opacity: 0.66; }
  to { transform: rotate(8deg) translateX(18px); opacity: 0.95; }
}

@keyframes faqHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes faqBlockReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes faqItemReveal {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes faqItemSweep {
  0% { opacity: 0; transform: translateX(-110%); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes faqMarkPulse {
  0% { transform: scale(0.86); box-shadow: 0 0 0 rgba(18, 191, 247, 0); }
  58% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(18, 191, 247, 0.12); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(18, 191, 247, 0); }
}

@keyframes faqBandLight {
  0% { opacity: 0; transform: translateX(-18%); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes faqBandItemReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes faqButtonSweep {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(560%) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  #faq.faq-motion-ready .sec-head .hl,
  #faq.faq-motion-ready > .sec-inner > .sec-lead,
  #faq.faq-motion-ready .faq-item,
  #faq.faq-motion-ready .contact-band,
  #faq.faq-motion-ready .band-lead,
  #faq.faq-motion-ready .band-title,
  #faq.faq-motion-ready .contact-band .cta-btn,
  #faq.faq-motion-ready .more-pages,
  #faq.faq-motion-ready .site-foot {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  #faq .faq-item::before,
  #faq .contact-band::before,
  #faq .contact-band .cta-btn::before,
  #faq .deco-dots,
  #faq .deco-lines,
  #faq .q-mark {
    animation: none !important;
  }
}

/* ===================== Global site bar + drawer ===================== */
.kp-skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 18px;
  background: #03115b;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transition: top 0.18s ease;
}
.kp-skip:focus { top: 12px; }

.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px 0 18px;
  background: #ffffff;
  border-bottom: 2px solid rgba(18, 63, 216, 0.18);
  box-shadow: 0 6px 20px rgba(4, 17, 95, 0.06);
}
.site-bar__brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.site-bar__brand img {
  height: 46px;
  width: auto;
  display: block;
}
.site-bar__burger {
  display: inline-grid;
  gap: 5px;
  place-content: center;
  width: 46px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-bar__burger span {
  display: block;
  width: 28px;
  height: 3px;
  background: #0d34c4;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-bar.is-open .site-bar__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-bar.is-open .site-bar__burger span:nth-child(2) { opacity: 0; }
.site-bar.is-open .site-bar__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.site-drawer.is-open { visibility: visible; opacity: 1; }
.site-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 95, 0.42);
}
.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  display: flex;
  flex-direction: column;
  padding: 78px 24px 32px;
  background: #03115b;
  box-shadow: -20px 0 60px rgba(4, 17, 95, 0.3);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }
.site-drawer__panel a {
  display: block;
  padding: 13px 6px;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-drawer__panel a small {
  display: block;
  margin-bottom: 2px;
  color: #9de7ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.site-drawer__lead {
  margin: 14px 0 8px;
  padding: 12px 0;
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-drawer-links {
  margin: 8px 0 0;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-drawer-links summary {
  display: block;
  padding: 14px 6px;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.site-drawer-links summary::-webkit-details-marker { display: none; }
.site-drawer-links__group { padding: 8px 0 12px; }
.site-drawer-links__group p {
  margin: 8px 6px 4px;
  color: #9de7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.site-drawer-links__group a {
  padding: 8px 6px 8px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  border-bottom: 0;
}
.site-drawer__cta {
  margin-top: 22px;
  padding: 16px 18px !important;
  background: #fff;
  color: #0d34c4 !important;
  text-align: center;
  border: 0 !important;
}
.site-drawer__cta small { color: #069cef !important; }
.site-drawer__line {
  margin-top: 10px;
  padding: 14px 18px !important;
  background: #06c755;
  color: #fff !important;
  text-align: center;
  border: 0 !important;
}
.site-drawer__line small { color: #eafff1 !important; }

/* keep anchored sections clear of the fixed bar */
.lp-section,
.hero-frame { scroll-margin-top: 74px; }

/* footer link extras (inside the 860 canvas) */
.more-links { flex-wrap: wrap; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  margin: 42px 0 0;
}
.foot-legal a {
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.foot-legal a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .site-bar__burger span,
  .site-drawer,
  .site-drawer__panel { transition: none !important; }
}

/* ===================== Floating contact dock ===================== */
.kp-dock {
  position: fixed;
  right: 14px;
  bottom: 104px;
  z-index: 850;
  display: grid;
  gap: 9px;
}
.kp-dock a,
.kp-dock .kp-dock-toggle {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  border: 2px solid rgba(4, 17, 95, 0.85);
  box-shadow: 0 8px 20px rgba(4, 17, 95, 0.22);
  text-decoration: none;
}
.kp-dock a svg,
.kp-dock .kp-dock-toggle svg { width: 26px; height: 26px; display: block; }
.kp-dock .kp-dock-mail { background: #123fd8; }
.kp-dock .kp-dock-ig {
  background:
    radial-gradient(circle at 32% 102%, #feda75 0 18%, transparent 19%),
    radial-gradient(circle at 18% 92%, #fa7e1e 0 30%, transparent 31%),
    linear-gradient(145deg, #833ab4 0%, #c13584 42%, #e1306c 70%, #fd1d1d 100%);
}
.kp-dock .kp-dock-line { background: #06c755; }
.kp-dock .kp-dock-top { background: #04115f; font-size: 22px; font-weight: 900; }

/* collapsible options (LINE / Instagram / mail) revealed by the ⋯ toggle */
.kp-dock-options {
  display: grid;
  gap: 9px;
  transform-origin: bottom center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s;
}
.kp-dock.is-open .kp-dock-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.kp-dock-options a {
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
}
.kp-dock.is-open .kp-dock-options a { opacity: 1; transform: translateY(0) scale(1); }
.kp-dock.is-open .kp-dock-options a:nth-child(1) { transition-delay: .14s; }
.kp-dock.is-open .kp-dock-options a:nth-child(2) { transition-delay: .08s; }
.kp-dock.is-open .kp-dock-options a:nth-child(3) { transition-delay: .02s; }
.kp-dock .kp-dock-toggle {
  cursor: pointer;
  background: linear-gradient(135deg, #03115b 0%, #123fd8 64%, #12bff7 100%);
  font: inherit;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.kp-dock.is-open .kp-dock-toggle { transform: rotate(90deg); }
.kp-dock .kp-dock-toggle svg.kp-dock-toggle__close { display: none; }
.kp-dock.is-open .kp-dock-toggle svg.kp-dock-toggle__dots { display: none; }
.kp-dock.is-open .kp-dock-toggle svg.kp-dock-toggle__close { display: block; transform: rotate(-90deg); }

/* ===================== Slim bottom contact CTA ===================== */
.kp-bottomcta {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 840;
  display: block;
  width: min(680px, calc(100% - 32px));
  padding: 0;
  background: transparent;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.kp-bottomcta.is-ready { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.kp-bottomcta.is-hidden { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
.kp-bottomcta.is-context-hidden { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; transition: none; }
.kp-bottomcta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 52px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(3, 40, 125, 0.25);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.kp-bottomcta .kp-cta-contact {
  background: linear-gradient(100deg, #0c58ca 0%, #0a6fc2 55%, #087da8 100%);
  color: #fff;
}
.kp-bottomcta a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #063a8a, 0 8px 22px rgba(3, 40, 125, 0.25);
}

/* ===================== Footer internal links (SEO) ===================== */
.foot-sitelinks {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 2px solid rgba(28, 62, 224, 0.25);
}
.foot-sitelinks h3 {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}
.foot-sitelinks ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-sitelinks a {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(251, 253, 255, 0.92);
  border: 2px solid rgba(18, 63, 216, 0.6);
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.foot-sitelinks a:hover { background: #eefaff; }

@media (max-width: 560px) {
  .kp-dock a,
  .kp-dock .kp-dock-toggle { width: 44px; height: 44px; }
  .kp-dock { right: 10px; bottom: calc(66px + env(safe-area-inset-bottom)); gap: 7px; }
  .kp-dock-options { gap: 7px; }
  .kp-dock a svg { width: 23px; height: 23px; }
  .kp-bottomcta { width: calc(100% - 20px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .kp-bottomcta a { min-height: 42px; padding: 7px 24px; font-size: 14px; }
}

/* --- ビーユー蕨店 運用事例 --- */
.beu-case {
  overflow: hidden;
  background: #fff;
  color: #071546;
  border-top: 1px solid rgba(18, 63, 216, 0.14);
  border-bottom: 1px solid rgba(18, 63, 216, 0.14);
}
.beu-case__hero {
  height: 570px;
  margin: 0;
  background: #e9edf2;
}
.beu-case__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.beu-case__body {
  padding: 62px 62px 58px;
  text-align: center;
}
.beu-case__eyebrow {
  display: block;
  margin: 0 0 38px;
  color: #073c91;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.beu-case__logo {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 0 auto 18px;
}
.beu-case__title {
  margin: 0;
  color: #111;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.beu-case__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 0;
  color: #222;
  font-size: 22px;
  font-weight: 800;
}
.beu-case__copy {
  margin: 30px 0 0;
  color: #222;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.8;
}
.beu-case__evidence {
  width: min(100%, 660px);
  margin: 22px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(18, 63, 216, 0.22);
  background: #f7fbff;
  color: #33415f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
}
.beu-case__evidence span { display: block; }
.beu-case__official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 18px auto 0;
  padding: 10px 20px;
  border: 2px solid #073c91;
  border-radius: 999px;
  color: #073c91;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.beu-case__official::after { content: " ↗"; }
.beu-case__official:hover { background: #edf7ff; }
.beu-case__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 36px 0 0;
}
.beu-case__gallery figure {
  height: 270px;
  margin: 0;
  overflow: hidden;
  background: #e9edf2;
}
.beu-case__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.beu-case__support {
  padding: 40px 46px 44px;
  background: #f1f8ff;
}
.beu-case__support-title {
  margin: 0 0 28px;
  color: #063885;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.beu-case__support-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.beu-case__support-list li {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-left: 1px solid rgba(18, 63, 216, 0.25);
  color: #101526;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}
.beu-case__support-list li:first-child { border-left: 0; }
.beu-case__cta {
  padding: 36px 54px 40px;
  background: #052b70;
  text-align: center;
}
.beu-case__cta p {
  margin: 0 0 22px;
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.7;
}
.beu-case__cta a {
  display: inline-flex;
  width: min(100%, 440px);
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1766dc;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

/* --- お知らせ / 現状分析ミーティング --- */
.h-notice { font-size: 104px; }
.notice-list { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--deep-blue); }
.notice-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 26px 18px;
  border-bottom: 2px solid rgba(18, 63, 216, 0.24);
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
}
.notice-list time { color: var(--blue); }
.notice-list a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.notice-all { margin: 22px 0 0; text-align: right; }
.notice-all a { color: var(--blue); font-size: 19px; font-weight: 900; }
.h-schedule-1 { font-size: 92px; }
.h-schedule-2 { margin-left: 38px; color: #079eea; font-size: 106px; }
.schedule-panel { margin-top: 34px; padding: 34px; background: rgba(255, 255, 255, 0.96); border: 4px solid var(--blue); box-shadow: 0 24px 52px rgba(4, 17, 95, 0.14); }
.schedule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.schedule-field { display: block; margin: 0 0 28px; }
.schedule-field > label { display: block; margin-bottom: 12px; color: var(--deep-blue); font-size: 21px; font-weight: 900; }
.required-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px 4px;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  vertical-align: 0.15em;
}
.schedule-input { width: 100%; min-height: 58px; padding: 10px 14px; border: 2px solid var(--blue); background: #fff; color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; }
.schedule-input[aria-invalid="true"] { border-color: #b42318; background: #fff6f5; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14); }
.schedule-hint { display: block; margin-top: 8px; color: #4c5d79; font-size: 14px; font-weight: 700; line-height: 1.55; }
.schedule-input:focus-visible, .schedule-submit:focus-visible { outline: 4px solid #12bff7; outline-offset: 3px; }
.schedule-submit { width: 100%; min-height: 68px; border: 3px solid var(--deep-blue); background: linear-gradient(105deg, #03115b, #123fd8 68%, #12bff7); color: #fff; font: inherit; font-size: 25px; font-weight: 900; cursor: pointer; }
.schedule-note { margin: -8px 0 24px; color: #3d4f70; font-size: 17px; font-weight: 700; line-height: 1.7; }
.schedule-status { min-height: 1.6em; margin: 18px 0 0; color: var(--blue); font-size: 18px; font-weight: 800; line-height: 1.7; }
.schedule-status.is-error { color: #b42318; }

@media (max-width: 560px) {
  .h-notice { font-size: 76px; }
  .notice-list li { grid-template-columns: 1fr; gap: 6px; padding: 20px 4px; font-size: 19px; }
  .h-schedule-1 { font-size: 66px; }
  .h-schedule-2 { margin-left: 20px; font-size: 76px; }
  .beu-case__hero { height: 500px; }
  .beu-case__body { padding: 48px 32px 42px; }
  .beu-case__eyebrow { font-size: 21px; }
  .beu-case__title { font-size: 25px; }
  .beu-case__copy { font-size: 18px; }
  .beu-case__gallery figure { height: 230px; }
  .beu-case__support { padding: 34px 26px 38px; }
  .beu-case__support-list { grid-template-columns: repeat(2, 1fr); }
  .beu-case__support-list li { border-left: 1px solid rgba(18, 63, 216, 0.25); border-top: 1px solid rgba(18, 63, 216, 0.25); font-size: 15px; }
  .beu-case__support-list li:nth-child(odd) { border-left: 0; }
  .beu-case__support-list li:nth-child(-n + 2) { border-top: 0; }
  .beu-case__support-list li:last-child { grid-column: 1 / -1; border-left: 0; }
  .beu-case__cta { padding: 32px 28px 36px; }
  .beu-case__cta p { font-size: 23px; }
  .schedule-panel { padding: 22px 18px; }
  .schedule-fields { grid-template-columns: 1fr; gap: 0; }
  .schedule-submit { min-height: 60px; font-size: 20px; }
}

/* The supplied design keeps the 860px poster composition on phones.
   This superseded one-column experiment stays disabled; index.js scales
   the artboard so the headline and side modules keep their positions. */
@media (max-width: 0px) {
  body {
    display: block;
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .design-frame,
  .hero-frame,
  .lp-frame {
    width: 100% !important;
    max-width: none;
    height: auto !important;
    overflow: visible;
  }

  .design-canvas,
  .hero,
  .lp-canvas,
  .lp-section {
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    height: auto !important;
    padding: 108px 20px 52px;
    overflow: hidden;
  }

  .hero > .eyebrow,
  .hero > .brand-line,
  .hero h1,
  .hero > .woman,
  .hero > .left-column,
  .hero > .right-column {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none !important;
  }

  .hero > .eyebrow { grid-row: 1; font-size: clamp(18px, 5.3vw, 22px); }
  .hero > .brand-line { grid-row: 2; margin-top: -14px; font-size: clamp(24px, 7vw, 30px); }
  .hero h1 { grid-row: 3; position: relative; z-index: 5; }
  .hero-service-context {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
  }
  .hero > .woman {
    grid-row: 4;
    z-index: 3;
    width: calc(100% + 40px);
    height: clamp(430px, 126vw, 570px);
    margin: -28px -20px -18px;
    object-fit: cover;
    object-position: 52% 18%;
  }
  .hero > .left-column { grid-row: 5; z-index: 4; }
  .hero > .right-column { grid-row: 6; z-index: 4; }

  .blue-copy { position: relative; }
  .line-box {
    width: auto;
    padding: 6px 0 9px;
    white-space: normal;
  }
  .main-line-1,
  .main-line-2 {
    position: relative;
    inset: auto;
    display: block;
    font-size: clamp(34px, 10.8vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.045em;
  }
  .main-line-2 { margin-top: 2px; font-size: clamp(39px, 12.4vw, 52px); }
  .main-line-1 .line-box,
  .main-line-2 .line-box {
    text-shadow:
      -2px -2px 0 rgba(255, 255, 255, 0.98),
      3px 3px 0 rgba(157, 231, 255, 0.42),
      0 14px 24px rgba(4, 17, 95, 0.18);
  }

  .left-column,
  .right-column {
    padding: 24px;
    border: 1px solid rgba(18, 63, 216, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 42px rgba(4, 17, 95, 0.12);
  }
  .left-title { font-size: 23px; }
  .blue-band { font-size: 23px; }
  .blue-band small,
  .blue-band .small-18 { font-size: 15px; }
  .left-note { font-size: 16px; line-height: 1.65; }
  .right-label { font-size: 19px; }
  .right-copy { font-size: 22px; }
  .meo { font-size: 66px; }
  .support { font-size: 34px; }
  .check-list li { font-size: 21px; }
  .right-note { font-size: 20px; }

  .lp-section {
    padding: 72px 20px 84px;
    overflow: hidden;
  }
  .deco-dots,
  .deco-lines,
  .deco-corner { display: none; }
  .sec-index {
    top: 36px;
    right: 18px;
    font-size: 88px;
    letter-spacing: -4px;
  }
  .sec-label {
    max-width: calc(100% - 72px);
    margin-bottom: 28px;
    padding: 10px 15px 11px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .sec-label::after { width: 48px; left: calc(100% + 10px); }
  .sec-head {
    margin-bottom: 38px;
    transform: rotate(-2.2deg);
  }
  .sec-head .hl {
    width: auto;
    max-width: 100%;
    margin-left: 0 !important;
    white-space: normal;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
    font-weight: 700;
  }
  .h-notice { font-size: clamp(42px, 13vw, 56px); }
  .h-stats { font-size: clamp(34px, 10vw, 42px); }
  .h-meo-en { font-size: clamp(74px, 23vw, 96px); }
  .h-meo-jp { font-size: clamp(54px, 17vw, 72px); }
  .h-works-1 { font-size: clamp(34px, 10.5vw, 44px); }
  .h-works-2 { font-size: clamp(40px, 12.4vw, 52px); }
  .h-works-3 { font-size: clamp(44px, 13.5vw, 58px); }
  .h-p1 { font-size: clamp(52px, 16vw, 68px); }
  .h-p2 { font-size: clamp(38px, 11.5vw, 50px); }
  .h-p3 { font-size: clamp(31px, 9.5vw, 41px); }
  .h-msg-1 { font-size: clamp(40px, 12vw, 52px); }
  .h-msg-2 { font-size: clamp(34px, 10.5vw, 44px); }
  .h-msg-3 { font-size: clamp(24px, 7.3vw, 31px); }
  .h-schedule-1 { font-size: clamp(42px, 13vw, 55px); }
  .h-schedule-2 { font-size: clamp(32px, 9.8vw, 42px); }
  .h-faq-en { font-size: clamp(74px, 23vw, 96px); }
  .h-faq-jp { font-size: clamp(32px, 9.8vw, 42px); }

  .sec-lead {
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1.85;
  }
  .sec-lead br { display: none; }
  .cta-row { margin: 30px 0; }
  .cta-btn {
    width: 100%;
    min-width: 0;
    padding: 18px 16px;
    font-size: 18px;
  }

  .stat-list { gap: 20px; }
  .stat-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 24px 18px;
  }
  .stat-card .stat-value {
    grid-column: 1 / -1;
    font-size: clamp(64px, 20vw, 84px);
    font-weight: 700;
  }
  .stat-card .stat-value--word { font-size: clamp(42px, 13vw, 54px); }
  .stat-card > div:not(.stat-detail) { grid-column: 1 / -1; }
  .stat-text { font-size: 18px; font-weight: 700; }
  .stat-text br { display: none; }
  .stat-detail { grid-column: 1 / -1; }

  .ai-qa-q { padding: 20px 56px 20px 18px; font-size: 18px; text-align: left; }
  .ai-qa-a { padding: 0 18px 22px; font-size: 16px; }
  .ai-qa-a br { display: none; }
  .stats-commit { font-size: 18px; }
  .stats-commit br { display: none; }
  .stats-source { font-size: 14px; }

  .beu-case__hero { height: min(76vw, 360px); }
  .beu-case__body { padding: 44px 20px 40px; }
  .beu-case__eyebrow { margin-bottom: 26px; font-size: 18px; }
  .beu-case__logo { width: min(100%, 310px); }
  .beu-case__title { font-size: 24px; }
  .beu-case__location { font-size: 19px; }
  .beu-case__copy { font-size: 17px; }
  .beu-case__evidence { padding: 16px; font-size: 14px; }
  .beu-case__official { width: 100%; padding-inline: 14px; font-size: 15px; }
  .beu-case__gallery { grid-template-columns: 1fr; }
  .beu-case__gallery figure { height: min(74vw, 330px); }
  .beu-case__support-title { font-size: 22px; line-height: 1.55; }
  .beu-case__cta p { font-size: 21px; }
  .beu-case__cta a { padding: 0 18px; font-size: 17px; }

  .service-card,
  .rep-card { grid-template-columns: minmax(0, 1fr); }
  .gbp-card,
  .service-text,
  .rep-info { min-width: 0; }
  .service-card { padding: 22px 18px; }
  .service-sub { font-size: 23px; }
  .service-text .body { font-size: 16px; }
  .service-text .body br { display: none; }

  .lp-showcase {
    width: 100%;
    max-width: 100%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .lp-shot { flex: 0 0 86%; scroll-snap-align: center; }
  .tag-row { flex-wrap: wrap; }
  .tag-row li { flex: 1 1 calc(50% - 8px); }
  .acc-btn { padding: 18px 54px 18px 16px; font-size: 18px; text-align: left; }
  .acc-panel { padding: 0 18px 22px; font-size: 16px; }

  .offer-card { padding: 44px 18px 36px; }
  .offer-ribbon { font-size: 16px; }
  .offer-sub { font-size: 24px; }
  .offer-off { white-space: nowrap; }
  .offer-off .off-num { font-size: clamp(104px, 34vw, 142px); }
  .offer-off .off-unit { font-size: 34px; letter-spacing: -0.06em; }
  .feature-trio { grid-template-columns: 1fr; }
  .feature-trio li { min-height: 0; }

  .rep-photo { min-height: 360px; }
  .rep-info { padding: 30px 22px 34px; }
  .rep-name b { font-size: 29px; }
  .rep-catch { font-size: 22px; }

  .schedule-panel { margin-top: 26px; padding: 24px 18px; }
  .schedule-field > label { font-size: 18px; }
  .schedule-input { font-size: 18px; }
  .schedule-note { font-size: 15px; }

  .faq-q { padding: 20px 54px 20px 16px; font-size: 18px; }
  .faq-a { padding: 0 18px 22px; font-size: 16px; }
  .foot-sitelinks { padding-inline: 20px; }
}

/* Keep the Be U case study concise inside the restored mobile artboard. */
@media (max-width: 720px) {
  .beu-case__hero { height: 390px; }
  .beu-case__body { padding: 34px 42px 32px; }
  .beu-case__eyebrow { margin-bottom: 20px; font-size: 19px; }
  .beu-case__logo { width: 260px; margin-bottom: 12px; }
  .beu-case__title { font-size: 23px; }
  .beu-case__location { margin-top: 10px; font-size: 18px; }
  .beu-case__copy { margin-top: 18px; font-size: 17px; }
  .beu-case__evidence { margin-top: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
  .beu-case__official { min-height: 42px; margin-top: 14px; padding: 7px 16px; font-size: 14px; }
  .beu-case__gallery { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .beu-case__gallery figure { height: 180px; }
  .beu-case__support { padding: 24px 34px 26px; }
  .beu-case__support-title { margin-bottom: 18px; font-size: 21px; }
  .beu-case__support-list { grid-template-columns: repeat(5, 1fr); }
  .beu-case__support-list li,
  .beu-case__support-list li:nth-child(odd),
  .beu-case__support-list li:nth-child(-n + 2),
  .beu-case__support-list li:last-child {
    grid-column: auto;
    min-height: 58px;
    border-top: 0;
    border-left: 1px solid rgba(18, 63, 216, 0.25);
    font-size: 13px;
  }
  .beu-case__support-list li:first-child { border-left: 0; }
  .beu-case__cta { padding: 24px 42px 26px; }
  .beu-case__cta p { margin-bottom: 16px; font-size: 20px; line-height: 1.55; }
  .beu-case__cta a { min-height: 50px; padding: 0 18px; font-size: 16px; }
}

/* 2026-08 public-site recovery: compact, responsive first view */
.hero-frame {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  overflow: visible;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  grid-template-areas:
    "eyebrow photo"
    "brand photo"
    "title photo"
    "proof photo"
    "actions photo";
  gap: 12px clamp(34px, 5vw, 72px);
  align-content: center;
  width: 100% !important;
  min-height: 760px;
  height: auto !important;
  padding: 116px clamp(28px, 7vw, 112px) 70px;
  overflow: hidden;
  transform: none !important;
  background:
    radial-gradient(circle at 13% 8%, rgba(133, 216, 255, 0.7), transparent 34%),
    linear-gradient(135deg, #f8fdff 0%, #e8f7ff 54%, #d9f2ff 100%);
}

.hero::before,
.hero::after,
.hero .bg-layer {
  display: none;
}

.hero > .eyebrow,
.hero > .brand-line,
.hero h1,
.hero > .woman,
.hero > .left-column,
.hero > .right-column,
.hero > .hero-proof,
.hero > .hero-actions {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: none !important;
}

.hero > .eyebrow {
  grid-area: eyebrow;
  color: #0648c9;
  font-size: clamp(16px, 1.8vw, 23px);
  font-weight: 900;
  letter-spacing: 0.05em;
}

.hero > .brand-line {
  grid-area: brand;
  color: #052a88;
  font-size: clamp(20px, 2.2vw, 29px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hero .line-box {
  display: block;
  width: auto;
  padding: 0;
  white-space: normal;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.hero h1 {
  grid-area: title;
  z-index: 2;
}

.hero-service-context {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  margin: 8px 0 14px;
  padding: 0;
  color: #07388f;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 800;
  line-height: 1.65;
}

.hero .main-line-1,
.hero .main-line-2 {
  position: relative;
  inset: auto;
  display: block;
  color: #0648c9;
  font-size: clamp(46px, 4.7vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.hero .main-line-2 {
  margin-top: 2px;
  color: #079eea;
  font-size: clamp(52px, 5.5vw, 74px);
}

.hero > .woman {
  grid-area: photo;
  align-self: stretch;
  width: 100%;
  min-height: 540px;
  height: 100%;
  border: 8px solid rgba(255, 255, 255, 0.9);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 24px 58px rgba(5, 42, 136, 0.2);
}

.hero-proof {
  grid-area: proof;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 16px;
  align-items: baseline;
  margin-top: 12px !important;
  padding: 18px 20px;
  border-left: 6px solid #0648c9;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px rgba(5, 42, 136, 0.12);
}

.hero-proof span {
  grid-column: 1 / -1;
  color: #07388f;
  font-size: 14px;
  font-weight: 900;
}

.hero-proof strong {
  color: #0648c9;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero-proof small {
  color: #052a88;
  font-size: 16px;
  font-weight: 900;
}

.hero-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px !important;
}

.hero-action {
  display: inline-flex;
  min-height: 54px;
  padding: 12px 22px;
  align-items: center;
  justify-content: center;
  border: 2px solid #0648c9;
  color: #0648c9;
  background: #fff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.hero-action--primary {
  color: #fff;
  background: #0648c9;
}

.hero-action:focus-visible {
  outline: 4px solid #12bff7;
  outline-offset: 4px;
}

.hero > .left-column,
.hero > .right-column {
  display: none;
}

/* Keep the approved content while shortening the distance to conversion. */
.lp-section {
  padding-top: 72px;
  padding-bottom: 80px;
}

.sec-head {
  margin-bottom: 38px;
}

#stats .stat-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#stats .stat-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px 16px;
  padding: 24px 22px;
}

#stats .stat-value {
  grid-column: 2;
  font-size: 72px;
}

#stats .stat-card > div:not(.stat-detail),
#stats .stat-detail {
  grid-column: 1 / -1;
}

#stats .stat-card:last-child {
  grid-column: 1 / -1;
}

#partner .offer-card {
  margin-top: 38px;
  padding: 44px 34px 34px;
}

#partner .offer-sub {
  font-size: 40px;
}

#partner .offer-off {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

#partner .offer-off .off-num {
  font-size: 116px;
  line-height: 1;
}

#partner .offer-off .off-unit {
  font-size: 48px;
  line-height: 1;
}

#partner .feature-trio {
  margin-top: 30px;
}

#partner .feature-trio li {
  padding-block: 22px;
}

#faq .faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

#faq .faq-q {
  padding: 20px 18px;
  font-size: 18px;
}

#faq .faq-a {
  padding: 0 20px 22px;
  font-size: 16px;
}

/* Be U result is deliberately high on the page and tied to the named store. */
.beu-case {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
}

.beu-case__hero {
  height: auto;
  min-height: 100%;
}

.beu-case__body {
  padding: 42px 40px 38px;
}

.beu-case__eyebrow {
  margin-bottom: 22px;
  font-size: 19px;
}

.beu-case__logo {
  width: min(100%, 290px);
  margin-bottom: 10px;
}

.beu-case__result {
  margin: 24px 0 0;
  padding: 20px 22px;
  border: 3px solid #0648c9;
  background: #f4fbff;
  text-align: left;
}

.beu-case__result-label {
  margin: 0;
  color: #07388f;
  font-size: 15px;
  font-weight: 900;
}

.beu-case__result-value {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 6px 0 12px;
  color: #0648c9;
}

.beu-case__result-value strong {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.beu-case__result-value span {
  font-size: 18px;
  font-weight: 900;
}

.beu-case__result-copy {
  margin: 0;
  color: #152547;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
}

.beu-case__gallery {
  display: none;
}

.beu-case__gallery figure {
  height: 150px;
}

.beu-case__support,
.beu-case__cta {
  grid-column: 1 / -1;
}

.h-notice { font-size: 76px; }
.h-stats { font-size: 70px; }
.h-meo-en { font-size: 150px; letter-spacing: -5px; }
.h-meo-jp { margin-left: 20px; font-size: 110px; }
.h-works-1 { font-size: 70px; }
.h-works-2 { margin-left: 20px; font-size: 80px; }
.h-works-3 { margin-left: 38px; font-size: 90px; }
.h-p1 { font-size: 90px; }
.h-p2 { margin-left: 22px; font-size: 70px; }
.h-p3 { margin-left: 40px; font-size: 56px; }
.h-schedule-1 { font-size: 70px; }
.h-schedule-2 { margin-left: 28px; font-size: 78px; }
.h-faq-en { font-size: 130px; letter-spacing: -3px; }
.h-faq-jp { margin-left: 16px; font-size: 58px; }

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "brand"
      "title"
      "proof"
      "actions"
      "photo";
    min-height: auto;
    padding: 96px 20px 44px;
  }

  .hero .main-line-1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .hero .main-line-2 {
    font-size: clamp(46px, 14vw, 66px);
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .hero-proof strong {
    font-size: 52px;
  }

  .hero-actions {
    display: grid;
  }

  .hero-action {
    width: 100%;
  }

  .hero > .woman {
    min-height: 0;
    height: 260px;
    margin-top: 16px;
    border-width: 5px;
  }

  #stats .stat-list,
  #faq .faq-list {
    grid-template-columns: 1fr;
  }

  #stats .stat-card:last-child {
    grid-column: auto;
  }

  .beu-case {
    grid-template-columns: 1fr;
  }

  .beu-case__hero {
    min-height: 360px;
  }

  .beu-case__body {
    padding: 34px 32px 32px;
  }
}

/* 2026-08-04 follow-up: Be U hierarchy, larger conversion text, simplified services */
.hero {
  grid-template-columns: minmax(0, 980px);
  grid-template-areas:
    "eyebrow"
    "brand"
    "title"
    "proof"
    "actions";
  justify-content: center;
  min-height: 680px;
  padding-top: 110px;
  padding-bottom: 62px;
}

.hero h1,
.hero > .eyebrow,
.hero > .brand-line,
.hero > .hero-proof,
.hero > .hero-actions {
  max-width: 900px;
}

.hero-proof {
  position: relative;
  grid-template-columns: auto 1fr;
  gap: 5px 20px;
  overflow: hidden;
  padding: 24px 30px 26px;
  border: 0;
  border-left: 9px solid #27baff;
  background: #052a88;
  box-shadow: none;
}

.hero-proof::after {
  content: "";
  position: absolute;
  right: -62px;
  top: -82px;
  width: 190px;
  height: 190px;
  border: 22px solid rgba(39, 186, 255, 0.22);
  transform: rotate(20deg);
}

.hero-proof span {
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.hero-proof strong {
  color: #fff;
  font-size: clamp(64px, 7vw, 94px);
}

.hero-proof small {
  color: #8ee7ff;
  font-size: 21px;
}

.beu-case {
  grid-template-columns: 360px minmax(0, 1fr);
}

.beu-case__logo {
  width: min(100%, 430px);
  margin-bottom: 16px;
}

.beu-case__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 0;
  border: 4px solid #052a88;
  background: #052a88;
}

.beu-case__result-label {
  grid-column: 1;
  margin: 0;
  padding: 24px 28px 0;
  color: #8ee7ff;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beu-case__result-value {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 8px 28px 30px;
  color: #fff;
}

.beu-case__result-value strong {
  color: #fff;
  font-size: 88px;
  letter-spacing: -0.06em;
}

.beu-case__result-value span {
  color: #8ee7ff;
  font-size: 21px;
  letter-spacing: 0.03em;
}

.beu-case__result-copy {
  grid-column: 1;
  grid-row: auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 34px 36px;
  border-top: 4px solid #052a88;
  background: #fff;
  color: #102453;
  font-size: 18px;
  line-height: 1.95;
}

.beu-case__official {
  width: min(100%, 610px);
  min-height: 74px;
  margin-top: 28px;
  padding: 16px 30px;
  border: 3px solid #073c91;
  border-radius: 0;
  background: #fff;
  font-size: 21px;
}

.beu-case__support {
  padding: 54px 52px 58px;
}

.beu-case__support-title {
  margin-bottom: 34px;
  font-size: 38px;
  line-height: 1.45;
}

.beu-case__support-list li {
  min-height: 98px;
  padding: 14px 12px;
  font-size: 22px;
}

.beu-case__cta {
  padding: 52px 54px 56px;
}

.beu-case__cta p {
  margin-bottom: 30px;
  font-size: 38px;
  line-height: 1.55;
}

.beu-case__cta a {
  width: min(100%, 600px);
  min-height: 78px;
  border: 3px solid #fff;
  border-radius: 0;
  box-shadow: none;
  font-size: 25px;
}

#meo .sec-lead {
  max-width: 730px;
  font-size: 23px;
  line-height: 2;
}

#meo .cta-btn {
  min-height: 70px;
  padding: 18px 34px;
  font-size: 22px;
}

.h-works-1 {
  font-size: 112px;
}

.h-works-2 {
  margin-left: 36px;
  font-size: 104px;
}

.works-service-actions {
  margin: 34px 0 40px;
  text-align: center;
}

.works-service-link {
  display: inline-flex;
  width: min(100%, 520px);
  min-height: 74px;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 3px solid var(--deep-blue);
  background: var(--blue);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  text-decoration: none;
}

.works-service-link::after {
  content: " →";
  margin-left: 12px;
}

.works-service-link:focus-visible,
.beu-case__official:focus-visible,
.beu-case__cta a:focus-visible {
  outline: 4px solid #12bff7;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .hero {
    grid-template-areas:
      "eyebrow"
      "brand"
      "title"
      "proof"
      "actions";
    padding-bottom: 40px;
  }

  .hero-proof {
    grid-template-columns: 1fr;
    padding: 22px 24px 24px;
  }

  .hero-proof strong {
    font-size: 64px;
  }

  .hero-proof small {
    font-size: 19px;
  }

  .beu-case {
    grid-template-columns: 1fr;
  }

  .beu-case__logo {
    width: min(100%, 430px);
  }

  .beu-case__result {
    grid-template-columns: 1fr;
  }

  .beu-case__result-label,
  .beu-case__result-value,
  .beu-case__result-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .beu-case__result-label {
    padding: 24px 30px 0;
    font-size: 22px;
  }

  .beu-case__result-value {
    padding: 8px 30px 30px;
  }

  .beu-case__result-value strong {
    font-size: 96px;
  }

  .beu-case__result-value span {
    font-size: 28px;
  }

  .beu-case__result-copy {
    padding: 32px 30px;
    font-size: 25px;
    line-height: 1.85;
  }

  .beu-case__official {
    width: 100%;
    min-height: 88px;
    padding: 16px 24px;
    font-size: 28px;
  }

  .beu-case__support {
    padding: 42px 38px 46px;
  }

  .beu-case__support-title {
    margin-bottom: 30px;
    font-size: 38px;
  }

  .beu-case__support-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .beu-case__support-list li,
  .beu-case__support-list li:nth-child(odd),
  .beu-case__support-list li:nth-child(-n + 2),
  .beu-case__support-list li:last-child {
    grid-column: auto;
    min-height: 96px;
    border-top: 1px solid rgba(18, 63, 216, 0.25);
    font-size: 28px;
  }

  .beu-case__support-list li:nth-child(odd) {
    border-left: 0;
  }

  .beu-case__support-list li:nth-child(-n + 2) {
    border-top: 0;
  }

  .beu-case__support-list li:last-child {
    grid-column: 1 / -1;
  }

  .beu-case__cta {
    padding: 44px 38px 48px;
  }

  .beu-case__cta p {
    margin-bottom: 26px;
    font-size: 38px;
  }

  .beu-case__cta a {
    min-height: 88px;
    font-size: 30px;
  }

  #meo .sec-lead {
    font-size: 27px;
  }

  #meo .cta-btn,
  .works-service-link {
    min-height: 82px;
    font-size: 28px;
  }
}

/* 2026-08-04 follow-up: keep exactly one Be U photo and remove representative portraits. */
.beu-case {
  grid-template-columns: minmax(0, 1fr);
}

.beu-case__body {
  padding-inline: clamp(32px, 6vw, 72px);
}

.beu-case__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 760px);
  margin: 36px auto 0;
}

.beu-case__gallery figure {
  height: clamp(320px, 46vw, 520px);
}

#message .rep-card {
  grid-template-columns: minmax(0, 1fr);
  min-height: 360px;
}

#message .rep-info {
  padding: clamp(42px, 7vw, 74px);
  text-align: center;
}

#message .rep-name {
  justify-content: center;
}

/* 2026-08-04: expanded MEO guide copy, standalone services section, and cropped representative photo. */
.meo-explanation {
  display: grid;
  gap: 18px;
  width: min(100%, 720px);
  margin: 28px auto 0;
}

.meo-explanation p {
  margin: 0;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.82);
  border-left: 6px solid var(--blue);
  color: #25304a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.95;
  box-shadow: 0 12px 32px rgba(4, 17, 95, 0.08);
}

.h-services-1 { font-size: 58px; }
.h-services-2 { margin-left: 36px; font-size: 70px; }

.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 760px);
  margin: 38px auto 0;
}

.service-overview-card {
  position: relative;
  min-height: 230px;
  padding: 30px 142px 28px 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 3px solid rgba(18, 63, 216, 0.82);
  box-shadow: 0 16px 38px rgba(4, 17, 95, 0.1);
}

.service-overview-card::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(18, 191, 247, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.service-overview-card > span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.service-overview-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: var(--deep-blue);
  font-size: 25px;
  line-height: 1.35;
}

.service-overview-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #33415f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.service-overview-link {
  position: absolute;
  top: 50%;
  right: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
  border-bottom: 2px solid currentColor;
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color 0.2s ease, gap 0.2s ease;
}

.service-overview-link:hover,
.service-overview-link:focus-visible {
  gap: 13px;
  color: var(--deep-blue);
}

.service-overview-action { margin-top: 34px; }

#message .rep-card {
  grid-template-columns: minmax(310px, 0.82fr) minmax(0, 1.18fr);
  min-height: 0;
}

#message .rep-photo--cropped {
  align-self: start;
  aspect-ratio: 944 / 1178;
  min-height: 0;
}

#message .rep-photo--cropped img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#message .rep-info {
  padding: clamp(34px, 5vw, 58px);
  text-align: left;
}

#message .rep-name {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .meo-explanation { gap: 14px; }

  .meo-explanation p {
    padding: 17px 18px;
    font-size: 16px;
    line-height: 1.9;
  }

  .h-services-1 { font-size: clamp(35px, 10vw, 46px); }
  .h-services-2 { margin-left: 18px; font-size: clamp(46px, 14vw, 60px); }

  .service-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .service-overview-card { min-height: 0; padding: 24px 142px 24px 22px; }
  .service-overview-link { right: 22px; }

  #message .rep-card { grid-template-columns: minmax(0, 1fr); }

  #message .rep-photo--cropped {
    width: 100%;
    border-right: 0;
    border-bottom: 4px solid rgba(18, 63, 216, 0.84);
  }

  #message .rep-info {
    padding: 30px 22px 34px;
    text-align: left;
  }

  #message .rep-name {
    justify-content: flex-start;
  }
}

/* 2026-08-05: clean editorial hero inspired by the supplied visual reference. */
.hero-frame {
  background: #fff;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas:
    "eyebrow visual"
    "brand visual"
    "title visual"
    "proof proof"
    "actions actions";
  grid-template-rows: auto auto minmax(330px, 1fr) auto auto;
  gap: 12px clamp(34px, 5vw, 76px);
  align-content: center;
  width: 100% !important;
  min-height: 900px;
  height: auto !important;
  padding: 108px clamp(28px, 6.5vw, 110px) 68px;
  overflow: hidden;
  transform: none !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(79, 163, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0 47%, #f1f7ff 47.2% 100%);
  color: #111;
}

.hero::before {
  z-index: 0;
  display: block;
  background: linear-gradient(145deg, rgba(230, 241, 255, 0.88), rgba(255, 255, 255, 0.18));
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  animation: none;
}

.hero::after,
.hero .bg-layer {
  display: none;
}

.hero > .eyebrow,
.hero > .brand-line,
.hero h1,
.hero > .hero-proof,
.hero > .hero-actions {
  position: relative;
  z-index: 3;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  opacity: 1;
  filter: none;
  transform: none !important;
  animation: none !important;
}

.hero > .eyebrow {
  grid-area: eyebrow;
  align-self: end;
  justify-self: start;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.hero > .eyebrow .line-box {
  display: block;
  padding: 9px 15px 10px;
  background: #0f4cff;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.hero > .brand-line {
  grid-area: brand;
  color: #0f4cff;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.hero > .brand-line .line-box {
  display: block;
  width: auto;
  padding: 0;
  white-space: normal;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.hero h1 {
  grid-area: title;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-width: 650px;
  padding-top: 18px;
}

.hero .main-line-1,
.hero .main-line-2 {
  position: relative;
  inset: auto;
  order: 1;
  display: block;
  color: #111;
  font-size: clamp(54px, 5.6vw, 84px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.065em;
  filter: none;
  opacity: 1;
  transform: none !important;
  animation: none !important;
}

.hero .main-line-2 {
  order: 2;
  margin-top: 8px;
  color: #111;
  font-size: clamp(60px, 6.2vw, 92px);
}

.hero .main-line-1 .line-box,
.hero .main-line-2 .line-box {
  display: block;
  width: auto;
  padding: 0;
  white-space: normal;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.hero-service-context {
  position: relative;
  inset: auto;
  order: 3;
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 610px;
  margin: 30px 0 0;
  padding: 24px 0 0;
  border-top: 2px solid #0f4cff;
  color: #444;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.01em;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.hero,
.hero *,
.hero::before,
.hero::after {
  animation: none !important;
}

.hero-visual {
  position: relative;
  z-index: 1;
  grid-area: visual;
  align-self: stretch;
  min-height: 560px;
  margin: -28px calc(0px - clamp(28px, 6.5vw, 110px)) -4px 0;
  overflow: hidden;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.95) 13%, rgba(255, 255, 255, 0.48) 29%, transparent 52%);
  pointer-events: none;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.78) brightness(1.12) contrast(0.92);
}

.hero-proof {
  grid-area: proof;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px 26px;
  align-items: center;
  margin-top: 30px !important;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid rgba(15, 76, 255, 0.24);
  border-bottom: 1px solid rgba(15, 76, 255, 0.24);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.hero-proof::after {
  display: none;
}

.hero-proof span {
  grid-column: auto;
  color: #111;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hero-proof strong {
  color: #0f4cff;
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.055em;
}

.hero-proof small {
  color: #444;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
}

.hero-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px !important;
}

.hero-action {
  position: relative;
  display: inline-flex;
  min-height: 66px;
  padding: 14px 56px 14px 24px;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f4cff;
  border-radius: 18px;
  color: #0f4cff;
  background: #fff;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 900;
  text-decoration: none;
  box-shadow: none;
}

.hero-action::after {
  content: "›";
  position: absolute;
  right: 24px;
  color: currentColor;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.hero-action--primary {
  border-color: #0f4cff;
  color: #fff;
  background: #0f4cff;
}

.hero-action:focus-visible {
  outline: 3px solid #4fa3ff;
  outline-offset: 4px;
}

.hero > .left-column,
.hero > .right-column,
.hero > .woman {
  display: none;
}

@media (max-width: 760px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "brand"
      "title"
      "proof"
      "actions";
    grid-template-rows: auto auto auto auto auto;
    gap: 10px;
    min-height: 820px;
    padding: 72px 20px 40px;
    background:
      radial-gradient(circle at 88% 18%, rgba(79, 163, 255, 0.17), transparent 36%),
      linear-gradient(145deg, #fff 0 53%, #eff6ff 53.2% 100%);
  }

  .hero::before {
    clip-path: polygon(58% 0, 100% 0, 100% 68%, 16% 68%);
    opacity: 0.82;
  }

  .hero > .eyebrow {
    max-width: calc(100% - 16px);
    font-size: clamp(12px, 3.45vw, 14px);
  }

  .hero > .eyebrow .line-box {
    padding: 8px 11px 9px;
  }

  .hero > .brand-line {
    margin-top: 4px;
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .hero h1 {
    width: min(100%, 342px);
    padding-top: 22px;
  }

  .hero .main-line-1,
  .hero .main-line-2 {
    font-size: clamp(43px, 12.6vw, 58px);
    line-height: 0.99;
    letter-spacing: -0.075em;
  }

  .hero .main-line-2 {
    margin-top: 6px;
    font-size: clamp(49px, 14.2vw, 66px);
  }

  .hero-service-context {
    max-width: 330px;
    margin-top: 24px;
    padding-top: 18px;
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.85;
  }

  .hero-visual {
    position: absolute;
    z-index: 1;
    top: 94px;
    right: -118px;
    width: min(94vw, 430px);
    height: 480px;
    min-height: 0;
    margin: 0;
    opacity: 0.86;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero-visual::after {
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.97) 25%, rgba(255, 255, 255, 0.68) 41%, transparent 64%);
  }

  .hero-visual img {
    object-position: 58% center;
  }

  .hero-proof {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    margin-top: 60px !important;
    padding: 18px 0;
  }

  .hero-proof span {
    grid-column: 1 / -1;
    font-size: 13px;
  }

  .hero-proof strong {
    font-size: clamp(46px, 14vw, 62px);
  }

  .hero-proof small {
    max-width: 118px;
    font-size: 12px;
    line-height: 1.45;
  }

  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px !important;
  }

  .hero-action {
    min-height: 60px;
    border-radius: 15px;
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  .hero {
    min-height: 820px;
    padding-inline: 18px;
  }

  .hero-visual {
    right: -132px;
  }

  .hero-proof {
    margin-top: 60px !important;
  }
}

/* 2026-08-05: normalized mobile fidelity pass for the supplied @2x reference. */
@media (max-width: 760px) {
  .hero {
    grid-template-rows: auto auto auto auto auto;
    min-height: 820px;
    padding: 142px 20px 34px;
  }

  .hero::before {
    clip-path: polygon(56% 0, 100% 0, 100% 68%, 14% 68%);
  }

  .hero-visual {
    top: 70px;
    right: -112px;
    width: min(108vw, 440px);
    height: 510px;
    opacity: 0.92;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero-visual::after {
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.98) 24%, rgba(255, 255, 255, 0.7) 44%, transparent 68%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.78) 18%, transparent 42%);
  }

  .hero-visual img {
    filter: saturate(0.62) brightness(1.28) contrast(0.85);
  }

  .hero > .eyebrow {
    font-size: 13px;
  }

  .hero > .eyebrow .line-box {
    padding: 8px 11px 9px;
  }

  .hero > .brand-line {
    margin-top: 2px;
    font-size: 17px;
  }

  .hero h1 {
    width: 100%;
    max-width: none;
    padding-top: 10px;
  }

  .hero .main-line-1,
  .hero .main-line-2 {
    width: 100%;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.07em;
  }

  .hero .main-line-1 {
    font-size: clamp(32px, 8.9vw, 39px);
  }

  .hero .main-line-2 {
    margin-top: 8px;
    color: #0f4cff;
    font-size: clamp(47px, 12.8vw, 56px);
  }

  .hero-service-context {
    width: min(82vw, 330px);
    margin-top: 20px;
    padding-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .hero > .hero-proof {
    margin-top: 132px !important;
    padding: 16px 0;
  }

  .hero-proof strong {
    font-size: clamp(44px, 12vw, 54px);
  }

  .hero > .hero-actions {
    margin-top: 10px !important;
  }

  .hero-action {
    min-height: 58px;
    border-radius: 15px;
    font-size: 15px;
  }
}

/* Final Hero cascade for the 2026-08-05 requested correction. */
.hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  grid-template-areas:
    "eyebrow visual"
    "title visual"
    "services services"
    "actions actions";
  grid-template-rows: auto minmax(420px, 1fr) auto auto;
  min-height: 940px;
  padding-top: 112px;
}

.hero > .eyebrow { grid-area: eyebrow; }

.hero h1 {
  grid-area: title;
  padding-top: 22px;
}

.hero .main-line-1,
.hero .main-line-2 {
  font-size: clamp(64px, 6.3vw, 96px);
}

.hero .main-line-1 { color: #111; }

.hero .main-line-2 {
  margin-top: 8px;
  color: #0f4cff;
  white-space: nowrap;
}

.hero-service-context {
  max-width: 560px;
  margin-top: 32px;
  padding-top: 22px;
  font-size: clamp(15px, 1.3vw, 18px);
}

.hero-visual {
  grid-area: visual;
  min-height: 590px;
  margin: -32px calc(0px - clamp(28px, 6.5vw, 110px)) -8px -48px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-visual::after {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 12%, rgba(255, 255, 255, 0.34) 28%, transparent 50%);
}

.hero-visual img {
  object-position: center center;
  filter: none;
}

.hero > .hero-services {
  grid-area: services;
  margin-top: 34px;
}

.hero > .hero-actions {
  grid-area: actions;
  margin-top: 20px !important;
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "services"
      "actions";
    grid-template-rows: auto auto auto auto;
    gap: 0;
    min-height: 850px;
    padding: 142px 18px 34px;
    background: #fff;
  }

  .hero::before {
    clip-path: polygon(58% 0, 100% 0, 100% 65%, 14% 65%);
    background: linear-gradient(145deg, rgba(230, 241, 255, 0.64), rgba(255, 255, 255, 0.08));
  }

  .hero > .eyebrow {
    max-width: none;
    font-size: clamp(13px, 3.65vw, 15px);
  }

  .hero h1 {
    width: 100%;
    max-width: none;
    padding-top: 24px;
  }

  .hero .main-line-1,
  .hero .main-line-2 {
    width: 100%;
    white-space: nowrap;
    font-size: clamp(47px, 13vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.07em;
  }

  .hero .main-line-2 {
    margin-top: 9px;
    font-size: clamp(48px, 13.2vw, 59px);
  }

  .hero-service-context {
    width: min(82vw, 330px);
    margin-top: 26px;
    padding-top: 18px;
    font-size: clamp(13px, 3.55vw, 15px);
    line-height: 1.85;
  }

  .hero-visual {
    position: absolute;
    top: 72px;
    right: -104px;
    width: min(112vw, 448px);
    height: 520px;
    min-height: 0;
    margin: 0;
    opacity: 1;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero-visual::after {
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.97) 23%, rgba(255, 255, 255, 0.56) 43%, transparent 69%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.68) 16%, transparent 38%);
  }

  .hero-visual img {
    object-position: center center;
    filter: none;
  }

  .hero > .hero-services {
    margin-top: 122px;
  }

  .hero > .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 22px !important;
  }
}

@media (max-width: 390px) {
  .hero-visual { right: -112px; }
}

@media (min-width: 761px) {
  .hero .main-line-1,
  .hero .main-line-2 {
    font-size: clamp(58px, 5.3vw, 78px);
  }

  .hero-visual {
    height: 590px;
    min-height: 0;
  }
}

.hero > .hero-services {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding: 0;
  border-top: 1px solid rgba(15, 76, 255, 0.16);
  border-bottom: 1px solid rgba(15, 76, 255, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

.hero-service-item {
  display: flex;
  min-width: 0;
  padding: 24px 18px 22px;
  align-items: center;
  flex-direction: column;
  color: #111;
  text-align: center;
}

.hero-service-item + .hero-service-item {
  border-left: 1px solid rgba(17, 17, 17, 0.12);
}

.hero-service-item svg {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: #0f4cff;
  stroke-width: 2.2;
}

.hero-service-item strong {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 900;
  line-height: 1.35;
}

.hero-service-item span {
  margin-top: 7px;
  color: #444;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  line-height: 1.65;
}

.hero-action::after {
  content: "›";
}

@media (max-width: 760px) {
  .hero-service-item {
    padding: 17px 5px 16px;
  }

  .hero-service-item svg {
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
  }

  .hero-service-item strong {
    font-size: clamp(11px, 3.35vw, 14px);
    white-space: nowrap;
  }

  .hero-service-item span {
    margin-top: 6px;
    font-size: clamp(8px, 2.45vw, 10px);
    line-height: 1.6;
  }
}

/* =====================================================================
   HERO v20260816a — centered first-view rebuilt from the supplied mockup.
   Scoped entirely to .kwh so no other section is affected.
   Reference canvas: 1024px wide (content column 930px, side gutter 47px).
   ===================================================================== */
.kwh {
  --kwh-blue: #0050df;
  --kwh-blue-solid: #0255e6;
  --kwh-navy: #061448;
  --kwh-ink: #0b1436;
  --kwh-tint: #edf5fd;
  --kwh-bar: #dfecfe;
  --kwh-wash: #f1f6ff;

  position: relative;
  isolation: isolate;
  display: block;
  width: 100% !important;
  min-height: 0;
  height: auto !important;
  padding: 0;
  overflow: hidden;
  transform: none !important;
  background: #fff;
  color: var(--kwh-navy);
  text-align: center;
}

.kwh,
.kwh *,
.kwh::before,
.kwh::after {
  animation: none !important;
}

/* ---------- background decoration ---------- */
.kwh__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.kwh__wash {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.kwh__flora {
  position: absolute;
  bottom: 30.4%;
  width: 18.6%;
  height: auto;
}

.kwh__flora--l { left: 1%; }
.kwh__flora--r { right: 1%; }

/* ---------- content column ---------- */
.kwh__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1024px);
  margin-inline: auto;
  padding: clamp(96px, 14.4vw, 147px) clamp(18px, 4.6vw, 47px) clamp(40px, 4.6vw, 48px);
}

/* ---------- headline ---------- */
.kwh__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kwh-navy);
  font-weight: 900;
}

.kwh__title-a,
.kwh__title-b {
  display: block;
  font-size: clamp(28px, 5.86vw, 60px);
  line-height: 1.22;
  letter-spacing: 0.04em;
}

.kwh__title-c {
  display: block;
  padding-bottom: 0.35em;
  font-size: clamp(31px, 6.45vw, 66px);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.kwh__mark {
  position: relative;
  color: var(--kwh-blue);
  font-size: 1.6em;
  line-height: 0.86;
  letter-spacing: 0.025em;
}

.kwh__mark::after {
  content: "";
  position: absolute;
  top: 1.17em;
  right: -0.21em;
  left: -0.115em;
  height: 0.152em;
  border-radius: 999px;
  background: var(--kwh-bar);
}

/* ---------- lead copy ---------- */
.kwh__lead {
  margin: clamp(4px, 0.6vw, 6px) 0 0;
  color: var(--kwh-ink);
  font-size: clamp(15px, 2.64vw, 27px);
  font-weight: 700;
  line-height: 1.537;
  letter-spacing: 0.025em;
}

/* ---------- location / target chip ---------- */
.kwh__chip {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.9vw, 20px);
  margin: clamp(8px, 1.4vw, 14px) 0 0;
  padding: clamp(7px, 1vw, 10px) clamp(14px, 3.1vw, 32px);
  border-radius: clamp(9px, 1.8vw, 18px);
  background: var(--kwh-tint);
  color: #0d2098;
  font-size: clamp(12px, 2.15vw, 22px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: left;
}

.kwh__chip-icon {
  flex: 0 0 auto;
  width: clamp(20px, 3.42vw, 35px);
  height: auto;
}

/* ---------- centre visual ---------- */
.kwh__visual {
  width: 80.3%;
  margin: -6.1% 0 0;
  padding: 0;
}

.kwh__visual img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

/* ---------- service cards ---------- */
.kwh__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: -19.25% 0 0;
  padding: clamp(9px, 1.46vw, 15px) 0;
  border-radius: clamp(14px, 2.6vw, 27px);
  background: #fff;
  box-shadow:
    0 18px 44px rgba(9, 38, 116, 0.10),
    0 2px 8px rgba(9, 38, 116, 0.05);
  list-style: none;
}

.kwh__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 clamp(4px, 1vw, 10px);
}

.kwh__card + .kwh__card {
  border-left: 1px solid #dce3ee;
}

.kwh__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 6.05vw, 62px);
}

.kwh__card-icon svg {
  width: auto;
  height: 100%;
}

.kwh__card strong {
  margin-top: clamp(5px, 0.98vw, 10px);
  color: #08123a;
  font-size: clamp(13px, 2.44vw, 25px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.kwh__card-note {
  margin-top: clamp(5px, 0.98vw, 10px);
  color: #151f42;
  font-size: clamp(9px, 2.05vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ---------- calls to action ---------- */
.kwh__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 16px);
  width: 100%;
  margin-top: 2.7%;
}

.kwh__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(56px, 8.8vw, 90px);
  padding: 0 18%;
  border: clamp(2px, 0.29vw, 3px) solid var(--kwh-blue-solid);
  border-radius: 999px;
  background: #fff;
  color: #0b173c;
  font-size: clamp(15px, 2.93vw, 30px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.kwh__cta--primary {
  background: var(--kwh-blue-solid);
  color: #fff;
}

.kwh__cta-icon,
.kwh__cta-arrow {
  position: absolute;
  top: 50%;
  height: auto;
  color: var(--kwh-blue-solid);
  transform: translateY(-50%);
}

.kwh__cta-icon {
  left: 14%;
  width: clamp(30px, 6.6vw, 68px);
}

.kwh__cta-arrow {
  right: 7%;
  width: clamp(30px, 6.9vw, 71px);
}

.kwh__cta--primary .kwh__cta-icon,
.kwh__cta--primary .kwh__cta-arrow {
  color: #fff;
}

.kwh__cta:focus-visible {
  outline: 3px solid #4fa3ff;
  outline-offset: 4px;
}

/* ---------- narrow screens ---------- */
@media (max-width: 560px) {
  .kwh__chip { align-items: flex-start; }
  .kwh__cta { padding: 0 20%; letter-spacing: 0.04em; }
  .kwh__cta-icon { left: 7%; }
  .kwh__cta-arrow { right: 5%; }
  .kwh__card { padding-inline: 2px; }
}

@media (max-width: 420px) {
  .kwh__inner { padding-inline: 14px; }
  .kwh__card { padding-inline: 1px; }
  .kwh__card-note { letter-spacing: 0; }
}

@media (max-width: 340px) {
  .kwh__card-note { font-size: 8px; }
}

/* =====================================================================
   2026-08-17 LP rebuild
   NOTE: .lp-canvas is a fixed 860px design canvas that index.js scales to
   the viewport, so every value below is authored in canvas px (content
   column = 764px), never in vw.
   1) section headings: no rotation, one line, centred
   2) Be U 実績セクション
   3) MEO 本文の白枠
   4) SERVICES セクション（支給モックの再現）
   ===================================================================== */

/* ---------- 1. section headings ---------- */
.lp-canvas .sec-label {
  display: block;
  width: max-content;
  margin: 0 auto 26px;
  padding: 12px 22px 13px;
  font-size: 20px;
  letter-spacing: 0.2em;
  transform: none;
}

.lp-canvas .sec-label::before,
.lp-canvas .sec-label::after {
  display: none;
}

/* section reveal keyframes end on a rotated transform - neutralise them */
.lp-canvas .sec-label,
.lp-canvas .sec-head,
.lp-canvas .sec-head .hl {
  transform: none !important;
}

.lp-canvas .sec-head {
  margin: 0 0 34px;
  transform: none;
  text-align: center;
}

.lp-canvas .sec-head .hl {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  color: #0d34c4;
  font-size: 58px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lp-canvas .sec-head .hl + .hl { margin-top: 4px; }

#services .sec-label { margin-bottom: 16px; }

/* ---------- 2. Be U 実績 ---------- */
.bcase {
  display: block;
  overflow: hidden;
  background: #fff;
  color: #071546;
  border-top: 1px solid rgba(18, 63, 216, 0.14);
  border-bottom: 1px solid rgba(18, 63, 216, 0.14);
  text-align: center;
}

.bcase__head { padding: 54px 48px 44px; }

.bcase__eyebrow {
  position: relative;
  margin: 0 0 34px;
  padding-bottom: 20px;
  color: #0b3a95;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.bcase__eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 3px;
  background: #0b3a95;
  transform: translateX(-50%);
}

.bcase__logo {
  display: block;
  width: min(100%, 290px);
  height: auto;
  margin: 0 auto 12px;
  mix-blend-mode: multiply;
}

.bcase__title {
  margin: 0;
  color: #101010;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.bcase__location {
  margin: 14px 0 0;
  color: #0b3a95;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.bcase__band {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 92px 48px 100px;
  background: linear-gradient(103deg, #0b3fc4 0%, #0d47dd 52%, #1358f0 100%);
  clip-path: polygon(0 6%, 100% 0, 100% 96%, 0 100%);
  text-align: left;
}

.bcase__band-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(76%, 660px);
  height: 100%;
  pointer-events: none;
}

.bcase__band-text {
  position: relative;
  z-index: 2;
}

.bcase__band-title {
  margin: 0;
  color: #fff;
  font-size: 62px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.bcase__band-sub {
  margin: 14px 0 0;
  color: #fff;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.bcase__body { padding: 48px 48px 50px; }

.bcase__copy {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  color: #16224a;
  font-size: 22px;
  font-weight: 700;
  line-height: 2;
  text-align: left;
}

.bcase__copy strong {
  color: #0d47dd;
  font-weight: 900;
}

.bcase__chart {
  width: min(100%, 700px);
  margin: 34px auto 0;
  padding: 0;
}

.bcase__chart img {
  display: block;
  width: 100%;
  height: auto;
}

.bcase__official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 650px);
  min-height: 72px;
  margin: 32px auto 0;
  padding: 12px 24px;
  border: 3px solid #0b3a95;
  border-radius: 0;
  background: #fff;
  color: #0b3a95;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
}

.bcase__official::after { content: "\3000\2192"; }
.bcase__official:hover { background: #edf5ff; }

.bcase__gallery { margin: 36px 0 0; }

.bcase__gallery figure {
  height: 260px;
  margin: 0;
  overflow: hidden;
  background: #e9edf2;
}

.bcase__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcase__cta {
  padding: 50px 48px 54px;
  background: #052b70;
  text-align: center;
}

.bcase__cta p {
  margin: 0 0 28px;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.6;
}

.bcase__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 600px);
  min-height: 74px;
  padding: 0 18px;
  border: 3px solid #fff;
  background: #1766dc;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
}

/* ---------- 3. plain white note (MEO 本文) ---------- */
.plain-note {
  margin: 0 0 32px;
  padding: 38px 40px;
  border: 1px solid rgba(16, 34, 84, 0.12);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(10, 36, 110, 0.06);
}

.plain-note p {
  margin: 0;
  color: #16224a;
  font-size: 22px;
  font-weight: 700;
  line-height: 2.05;
  text-align: left;
}

.plain-note p + p { margin-top: 1.4em; }

.plain-note strong {
  color: #0d34c4;
  font-weight: 900;
}

/* ---------- 4. SERVICES ---------- */
#services.lp-section {
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fe 22%, #eef6fd 100%);
}

.svc-kicker {
  margin: 0 0 14px;
  color: #0025b2;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
}

.svc-lead {
  margin: 0 0 42px;
  color: #14203f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
}

.svc-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 26px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 45, 120, 0.07);
  text-align: center;
}

.svc-card h3 {
  margin: 0;
  color: #024ed4;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.svc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  margin: 24px 0 26px;
}

.svc-card__icon svg {
  width: auto;
  height: 100%;
}

.svc-card p {
  flex: 1 1 auto;
  margin: 0;
  color: #17223f;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
}

.svc-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  margin-top: 26px;
  border-radius: 12px;
  background: #eff6fe;
  color: #0b3ac6;
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
}

.svc-card__link:hover { background: #e3eefd; }

.svc-subhead {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 50px 0 34px;
  color: #101c3b;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.svc-subhead::before,
.svc-subhead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #b9c8de;
}

.svc-sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-sub li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.svc-sub__icon {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #e4f3fd;
}

.svc-sub__icon svg {
  width: 54%;
  height: 54%;
}

.svc-sub strong {
  color: #0b3ac6;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.svc-sub__note {
  margin-top: 12px;
  color: #17223f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.svc-band {
  margin: 48px 0 0;
  padding: 40px 34px 44px;
  border-radius: 12px;
  background: linear-gradient(100deg, #0260e9 0%, #1f86f2 54%, #6fcbfc 100%);
  color: #fff;
  text-align: center;
}

.svc-band__lead {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.svc-band__title {
  margin: 10px 0 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 39px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.svc-band__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.svc-band__points li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.svc-band__points li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.42);
}

.svc-band__points svg {
  flex: 0 0 auto;
  width: 25px;
  height: auto;
  color: #fff;
}

.svc-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(100%, 560px);
  min-height: 72px;
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  color: #0036d4;
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
}

.svc-band__btn svg {
  flex: 0 0 auto;
  width: 31px;
  height: auto;
}

.svc-band__btn em {
  font-style: normal;
  font-weight: 700;
}

/* =====================================================================
   2026-08-17b  FAQ / 現状分析ミーティング — 支給スクリーンショットの再現
   Canvas px (860 design width, content column 764px).
   Measured from the two supplied 817px-wide captures (x1.05 -> canvas).
   Scoped to #faq / #schedule so no other section is affected.
   ===================================================================== */

/* ---------------- shared: section eyebrow ornament ---------------- */
.sch-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 20px;
  color: #0847bc;
}

.sch-ornament::before,
.sch-ornament::after {
  content: "";
  width: 74px;
  height: 2px;
  background: #b8cfea;
}

.sch-ornament svg {
  width: 44px;
  height: auto;
}

/* ---------------- FAQ ---------------- */
#faq .sec-label {
  padding: 11px 24px 12px;
  border-radius: 4px;
  background: #072489;
  color: #fff;
  font-size: 21px;
  letter-spacing: 0.22em;
  box-shadow: none;
}

#faq .sec-head { margin-bottom: 18px; }

#faq .sec-head .hl { color: #04155e; }

#faq .sec-lead {
  margin: 0 0 30px;
  color: #121212;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.78;
  text-align: center;
}

#faq .faq-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
}

#faq .faq-item {
  border: 1px solid #dfe1e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

#faq .faq-item::before { display: none; }

#faq .faq-item.open {
  border: 2px solid #0b34bd;
}

#faq .faq-q {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) 34px;
  gap: 22px;
  align-items: center;
  width: 100%;
  padding: 20px 28px;
  border: 0;
  background: none;
  color: #081231;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.42;
  text-align: left;
  cursor: pointer;
}

#faq .faq-item.open .faq-q {
  padding-bottom: 12px;
  color: #0b33b8;
}

#faq .faq-q .q-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: #0632b8;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

#faq .faq-q .q-toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  color: #7a99e0;
  font-size: 0;
}

#faq .faq-q .q-toggle::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 17px;
  height: 17px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}

#faq .faq-item.open .faq-q .q-toggle {
  color: #0b34bd;
}

#faq .faq-item.open .faq-q .q-toggle::before {
  content: "";
  transform: rotate(225deg);
}

#faq .faq-a {
  margin: 0;
  padding: 0 30px 26px 99px;
  color: #121212;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.75;
}

/* conversion nudge under the list */
.faq-cta {
  margin: 28px 0 0;
  padding: 24px 30px 28px;
  border: 1px solid #d3e3f2;
  border-radius: 10px;
  background: #f6faff;
  text-align: center;
}

.faq-cta__lead {
  margin: 0 0 18px;
  color: #0b33b8;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.faq-cta__lead span {
  position: relative;
  display: inline-block;
  padding: 0 64px;
}

.faq-cta__lead span::before,
.faq-cta__lead span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.4px), #7a99e0 calc(50% - 1.4px), #7a99e0 calc(50% + 1.4px), transparent calc(50% + 1.4px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.4px), #7a99e0 calc(50% - 1.4px), #7a99e0 calc(50% + 1.4px), transparent calc(50% + 1.4px));
  background-size: 11px 100%;
  background-position: 0 0, 15px 0;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.faq-cta__lead span::before {
  left: 6px;
  transform: translateY(-50%) scaleX(-1);
}

.faq-cta__lead span::after { right: 6px; }

.faq-cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(100%, 540px);
  min-height: 71px;
  margin: 0 auto;
  padding: 0 64px;
  border-radius: 8px;
  background: #023acd;
  color: #fff;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.faq-cta__btn span { flex: 0 1 auto; }

.faq-cta__btn svg {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 30px;
  height: auto;
  transform: translateY(-50%);
}

.faq-cta__btn:hover { background: #0132b4; }

.faq-cta__btn:focus-visible {
  outline: 4px solid #12bff7;
  outline-offset: 3px;
}

/* ---------------- 現状分析ミーティング ---------------- */
#schedule .sec-label {
  padding: 9px 26px 10px;
  border-radius: 999px;
  background: #ecf2fb;
  color: #10306f;
  font-size: 21px;
  letter-spacing: 0.24em;
  box-shadow: none;
}

#schedule .sec-head { margin-bottom: 16px; }

#schedule .sec-head .hl { color: #0847bc; }

#schedule .sec-lead {
  margin: 0 0 26px;
  color: #121212;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.sch-trust {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.sch-trust li {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 89px;
  padding: 0 24px;
  border: 1px solid #e7edf6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(11, 45, 120, 0.05);
  color: #0b2c7a;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sch-trust svg {
  flex: none;
  width: 40px;
  height: auto;
  color: #0a3ba3;
}

#schedule .schedule-panel {
  margin: 0;
  padding: 42px 44px 44px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(11, 45, 120, 0.09);
}

#schedule .schedule-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#schedule .schedule-field {
  margin: 0 0 30px;
}

#schedule .schedule-field > label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  color: #101d3f;
  font-size: 33px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

#schedule .required-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  min-height: 27px;
  padding: 2px 10px 3px;
  border: 0;
  border-radius: 5px;
  background: #ec726e;
  color: #fff;
  font-size: 19px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.sch-inputwrap {
  position: relative;
  display: block;
}

.sch-inputicon {
  position: absolute;
  top: 50%;
  left: 29px;
  z-index: 2;
  width: 47px;
  height: auto;
  color: #0847bc;
  transform: translateY(-50%);
  pointer-events: none;
}

.sch-placeholder {
  position: absolute;
  top: 50%;
  left: 105px;
  z-index: 2;
  color: #b9babf;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: translateY(-50%);
  pointer-events: none;
}

/* the native date/time text is hidden while empty so only our hint shows */
#schedule .schedule-input {
  position: relative;
  width: 100%;
  min-height: 95px;
  padding: 10px 24px 10px 105px;
  border: 1px solid #d3d6de;
  border-radius: 10px;
  background: #fff;
  color: #101d3f;
  font: inherit;
  font-size: 27px;
  font-weight: 800;
}

#schedule .schedule-input:invalid { color: transparent; }
#schedule .schedule-input:valid { color: #101d3f; }
#schedule .schedule-input:valid + .sch-placeholder,
#schedule .schedule-input:focus + .sch-placeholder { display: none; }
#schedule .schedule-input:focus { color: #101d3f; }

#schedule .schedule-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

#schedule .schedule-input[aria-invalid="true"] {
  border-color: #d43b2c;
  background: #fff7f6;
  box-shadow: 0 0 0 3px rgba(212, 59, 44, 0.14);
}

#schedule .schedule-hint {
  display: block;
  margin-top: 12px;
  color: #6a6c78;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
}

.sch-note {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 0 0 34px;
  padding: 26px 28px 28px;
  border-radius: 8px;
  background: #f2f7fe;
}

.sch-note > svg {
  width: 34px;
  height: auto;
  margin-top: 4px;
  color: #0642b9;
}

#schedule .schedule-note {
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.72;
  text-align: left;
}

#schedule .schedule-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 124px;
  padding: 0 78px;
  border: 0;
  border-radius: 8px;
  background: #0745bd;
  color: #fff;
  font: inherit;
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
}

#schedule .schedule-submit:hover { background: #063aa4; }

.sch-submit__line {
  flex: none;
  width: 63px;
  height: auto;
}

#schedule .schedule-submit > span { flex: 0 1 auto; }

.sch-submit__arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  width: 30px;
  height: auto;
  color: #fff;
  transform: translateY(-50%);
}

#schedule .schedule-status {
  min-height: 1.6em;
  margin: 20px 0 0;
  color: #0745bd;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

#schedule .schedule-status.is-error { color: #c0271b; }

/* narrow screens: the 3 trust chips stay on one row, text shrinks instead */
@media (max-width: 520px) {
  .sch-trust li { padding: 0 12px; font-size: 23px; gap: 10px; }
  .sch-trust svg { width: 34px; }
  .faq-cta__lead span { padding: 0 34px; }
}

/* =====================================================================
   2026-08-17c  MEO / ホームページ作成 — 見出し直下のイラストとフラットCTA
   ===================================================================== */

.sec-figure {
  width: min(100%, 720px);
  margin: 0 auto 30px;
  padding: 0;
}

.sec-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* JPEG（白背景）のイラストを淡い背景になじませる */
.sec-figure--blend img {
  mix-blend-mode: multiply;
}

/* MEO の CTA をフラットに（グラデーション・影・スイープ演出を解除） */
#meo .cta-row {
  display: flex;
  justify-content: center;
}

#meo .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 0 46px;
  border: 0;
  border-radius: 8px;
  background: #0745bd;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

#meo .cta-btn::before,
#meo .cta-btn::after {
  content: none;
  display: none;
}

#meo .cta-btn:hover {
  background: #063aa4;
  box-shadow: none;
  transform: none;
}

#meo .cta-btn:focus-visible {
  outline: 4px solid #12bff7;
  outline-offset: 3px;
}

/* =====================================================================
   2026-08-17d  MEO / ホームページ作成 — 支給スクリーンショットに合わせて
   読みやすさ優先の構成へ統一。
   ・大きな飾り数字・ドット・斜めの青ウェッジを撤去し、淡いグラデ背景に
   ・見出し直下にサブコピー行を追加
   ・本文の白カードを外し、行間と左右余白を広げた1カラムに
   ・チップとボタンを支給画像のグラデーションに統一
   ===================================================================== */

#meo.lp-section,
#works.lp-section {
  overflow: hidden;
  background: linear-gradient(180deg, #e3effc 0%, #f3f9fe 34%, #fbfdff 100%);
}

/* 画面を騒がしくしていた装飾を停止 */
#meo > .sec-index,
#works > .sec-index,
#meo > .deco-dots,
#works > .deco-dots,
#meo > .deco-lines,
#works > .deco-lines,
#meo > .deco-corner,
#works > .deco-corner {
  display: none !important;
}

/* 上下のやわらかい曲線 */
#meo.lp-section::before,
#works.lp-section::before,
#meo.lp-section::after,
#works.lp-section::after {
  content: "";
  position: absolute;
  left: -6%;
  z-index: 0;
  width: 112%;
  height: 150px;
  background: #ffffff;
  opacity: 0.55;
  pointer-events: none;
}

#meo.lp-section::before,
#works.lp-section::before {
  top: -78px;
  border-radius: 0 0 58% 42% / 0 0 100% 100%;
}

#meo.lp-section::after,
#works.lp-section::after {
  bottom: -78px;
  border-radius: 44% 56% 0 0 / 100% 100% 0 0;
}

/* z-index を付けると新しい重ね合わせコンテキストができ、図版の
   mix-blend-mode が背景と合成できなくなるため auto のままにする */
#meo .sec-inner,
#works .sec-inner {
  position: relative;
  z-index: auto;
  isolation: auto;
}

/* --- チップ --- */
#meo .sec-label,
#works .sec-label {
  padding: 12px 30px 13px;
  border-radius: 999px;
  background: linear-gradient(100deg, #0742c2 0%, #12a0ee 100%);
  color: #fff;
  font-size: 21px;
  letter-spacing: 0.24em;
  box-shadow: none;
}

/* --- 見出し + サブコピー --- */
#meo .sec-head,
#works .sec-head {
  margin-bottom: 14px;
}

#meo .sec-head .hl,
#works .sec-head .hl {
  color: #0745c0;
}

.sec-sub {
  margin: 0 0 34px;
  color: #16213d;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

/* --- 図版（本文よりわずかに広い） --- */
#meo .sec-figure,
#works .sec-figure {
  width: min(100%, 752px);
  margin: 0 auto 34px;
}

/* --- 本文：白カードを外した1カラム --- */
.sec-body {
  width: min(100%, 670px);
  margin: 0 auto 38px;
}

.sec-body p {
  margin: 0;
  color: #121826;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: 0.01em;
  text-align: left;
}

.sec-body p + p {
  margin-top: 1.35em;
}

.sec-body strong {
  color: #0d3fb8;
  font-weight: 900;
}

/* --- CTA ボタン --- */
#meo .cta-row,
#works .cta-row {
  display: flex;
  justify-content: center;
  margin: 0;
}

#meo .cta-btn,
#works .cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 670px);
  min-height: 74px;
  padding: 0 62px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(100deg, #093db3 0%, #2786e2 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

#meo .cta-btn::before,
#works .cta-btn::before,
#meo .cta-btn::after,
#works .cta-btn::after {
  content: none;
  display: none;
}

#meo .cta-btn > span,
#works .cta-btn > span {
  flex: 0 1 auto;
}

#meo .cta-btn > svg,
#works .cta-btn > svg {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 26px;
  height: auto;
  transform: translateY(-50%);
}

#meo .cta-btn:hover,
#works .cta-btn:hover {
  background: linear-gradient(100deg, #0736a0 0%, #1f79d2 100%);
  box-shadow: none;
  transform: none;
}

#meo .cta-btn:focus-visible,
#works .cta-btn:focus-visible {
  outline: 4px solid #12bff7;
  outline-offset: 3px;
}

/* 制作実績スライドとボタンの間 */
#works .show-nav {
  margin-bottom: 34px;
}

/* =====================================================================
   右下フローティングボタン：生成済みアイコンに差し替え（全ページ共通）
   ===================================================================== */
.kp-dock-toggle {
  border: 0 !important;
  background: transparent url("assets/dock-menu-20260817.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

.kp-dock-toggle .kp-dock-toggle__dots {
  display: none !important;
}

.kp-dock.is-open .kp-dock-toggle {
  background-image: none !important;
  background-color: #0b3ac6 !important;
  border-radius: 22% !important;
}

.kp-dock-top {
  border: 0 !important;
  background: transparent url("assets/dock-top-20260817.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}

.kp-dock-top::before,
.kp-dock-top::after {
  content: none !important;
}

/* =====================================================================
   2026-09-01  対応業種（#industry）／対応エリア（#area）
   サービス紹介の直後に配置。既存の lp-section / sec-label / sec-head の
   作法と、SERVICES セクションのカード寸法（白カード＋淡青の円アイコン、
   角丸 12〜17px、影 rgba(11,45,120,.07)）に合わせている。
   ===================================================================== */

/* --- 見出しサイズ（.sec-head .hl の既存 h-* と同じ役割） --- */
.h-ind { font-size: 132px; }
.h-area { font-size: 118px; }

/* ---------- 5. INDUSTRY ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 30px 18px 28px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 45, 120, 0.07);
  text-align: center;
}

.ind-card__icon {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #e4f3fd;
}

.ind-card__icon svg {
  width: 56%;
  height: 56%;
}

.ind-card strong {
  color: #0b3ac6;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.ind-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 26px;
  padding: 22px 24px;
}

.ind-card--wide .ind-card__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 0;
}

.ind-note {
  margin: 30px 0 0;
  color: #4a5b7a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

/* ---------- 6. AREA ---------- */
.area-map {
  width: min(100%, 700px);
  margin: 0 auto 26px;
  padding: 0;
}

.area-map img {
  display: block;
  width: 100%;
  height: auto;
  /* 画像の白背景を淡いグラデ背景になじませ、さらに四角い縁が
     セクションの斜めストライプを隠さないよう外周をフェードさせる。 */
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0) 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0) 66%);
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-cell {
  min-width: 0;
}

.area-cell > span,
.area-cell > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11, 45, 120, 0.07);
  color: #0b3ac6;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
}

.area-cell > a {
  background: #eff6fe;
}

.area-cell > a:hover {
  background: #e3eefd;
}

.area-cell > a em {
  font-style: normal;
  font-size: 22px;
}

.area-cell--other > span {
  background: #eef8ff;
  color: #17223f;
  font-size: 21px;
}