/* TOP_1 — Figma グループ構造準拠（1366px） */
.page-top {
  --figma-w: 1366px;
  --figma-half: 683px;
  /* 1366 基準 → 任意幅（max 1366 以上は 1 で頭打ち） */
  --figma-scale: min(1, calc(100vw / var(--figma-w)));
  --kv-title-w: min(calc(var(--figma-scale) * 509px), calc(100% - 2 * var(--kv-x)));
  --kv-x: 106px;
  --body-x: 160px;
  --footer-x: calc(100vw * (106 / 1366));
  --content-max: 1046px; /* 1366 − 160×2 */
  /* ヘッダーロゴ左余白（1366 幅で 56px）。KV 見出し（106px）を含む全セクションの
     コンテンツ左端より外へ飛び出させる */
  --header-logo-inset: calc(100vw * (56 / 1366));
  --section-jagged-h: var(--jag-h);
  --kv-jagged-h: var(--section-jagged-h);
  --news-jagged-h: var(--section-jagged-h);
  /* セクション背景（ギザギザ色＝直前セクションの --section-bg） */
  --section-bg-kv: var(--white);
  --section-bg-about: var(--cream);
  --section-bg-news: var(--white);
  --section-bg-service: var(--teal-soft);
  --section-bg-contact: var(--white);
  --section-bg-gallery: var(--white);
  --section-bg-footer: var(--teal);
  width: 100%;
  max-width: 100%;
  /* hidden だと body がスクロールコンテナになり、KV・ヘッダーの sticky が効かなくなる（PC 幅でずれる）ので clip */
  overflow-x: clip;
}

.page-top .top-page {
  width: 100%;
  max-width: 100%;
}

/*
 * セクション上ギザギザ
 * fill = 当セクションの background（上方向にはみ出して前セクション上に重なる）
 * 各ブロックで --section-jagged-fill: var(--section-bg-*) を1つ指定する
 */
.page-top .section-jagged-top {
  position: absolute;
  top: 0;
  left: 0;
  /* セクション背景 (::before 0) より上・イラスト (content-layer 2 / figma-char 100) より下 */
  z-index: 1;
  display: block;
  width: max(100%, var(--jag-w));
  height: var(--section-jagged-h);
  fill: var(--section-jagged-fill, var(--white));
  pointer-events: none;
  /* 歯の大きさはブレークポイントごとに固定（site.css の --jag-scale）。狭い画面では中央を残して左右を切る */
  left: 50%;
  transform: translate(-50%, calc(-100% + 2px));
}
.page-top .section-jagged-top use {
  fill: inherit;
}
.page-top .figma-content {
  box-sizing: border-box;
  width: min(100%, var(--figma-w));
  margin-inline: auto;
  padding-inline: var(--kv-x);
}

/* About / News / Service / Contact — 左右 160px・内側幅を揃える */
/* テキスト本体は装飾より前面（装飾は透過 PNG・z-index 0） */
.page-top .figma-content-layer {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.page-top .figma-second__frame-31.figma-content-layer,
.page-top .figma-service__group-75.figma-content-layer {
  z-index: 5;
}
.page-top .figma-contact__wrap.figma-content-layer {
  z-index: auto;
  isolation: auto;
}
.page-top .figma-contact__art {
  z-index: 30;
}
.page-top .figma-kv__frame-79 {
  position: relative;
  z-index: 2;
  padding: 8px 12px 12px 0;
  background: transparent;
}
.page-top .figma-second__frame-11 {
  padding: 4px 0;
  background: transparent;
}
.page-top .figma-news .section-vertical-title-wrap {
  position: relative;
  z-index: 1;
  padding: 4px 8px 4px 0;
  background: transparent;
}
.page-top .figma-news__frame-72 {
  position: relative;
  z-index: 2;
  padding: 4px 0;
  background: transparent;
}
.page-top .figma-service__frame-73 {
  z-index: 3;
  padding: 4px 0;
  overflow: visible;
}
.page-top .figma-contact__panel {
  position: relative;
  z-index: 1;
}
.page-top .figma-contact__board {
  z-index: auto;
}

/* キャラクター — ギザギザ上・背景上。本文テキストより下（z-index 5） */
.page-top .figma-char {
  position: absolute;
  z-index: 40;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.page-top .figma-kv__frame-79,
.page-top .figma-second__frame-30,
.page-top .figma-second__frame-11,
.page-top .figma-second__link,
.page-top .figma-service__frame-73,
.page-top .figma-contact__board,
.page-top .figma-contact__panel-inner {
  position: relative;
  z-index: 5;
}

/* Figma Vector — 薄青 #C6E4E7 トゲ装飾（文字の下・キャラの下） */
.page-top .figma-spark {
  position: absolute;
  z-index: 1;
  max-width: none;
  height: auto;
  pointer-events: none;
  object-fit: contain;
}
/* KV 装飾は .figma-kv__stage 基準の割合配置（下の KV ブロック） */
/* セカンド Group 26（259:272）— hex と同位置・グループ内 xy */
.figma-second__sparks-g26 {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 1335.2px);
  height: 487px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.page-top .figma-spark--about-273 { left: 1069.02px; top: 0.01px; width: 92.94px; }
.page-top .figma-spark--about-274 { left: 1127.02px; top: 95.17px; width: 92.94px; }
.page-top .figma-spark--about-275 { left: 1069.02px; top: 379.19px; width: 92.94px; }
.page-top .figma-spark--about-276 { left: 1127.02px; top: 285.51px; width: 92.94px; }
.page-top .figma-spark--about-277 { left: 1014px; top: 285.51px; width: 92.94px; }
.page-top .figma-spark--about-278 { left: 1242.26px; top: 95.17px; width: 92.94px; }
.page-top .figma-spark--about-279 { left: 266.18px; top: 487px; width: 92.94px; }
.page-top .figma-spark--about-280 { left: 208.18px; top: 391.83px; width: 92.94px; }
.page-top .figma-spark--about-281 { left: 266.18px; top: 107.81px; width: 92.94px; }
.page-top .figma-spark--about-282 { left: 208.18px; top: 201.49px; width: 92.94px; }
.page-top .figma-spark--about-283 { left: 322.2px; top: 201.49px; width: 92.94px; }
.page-top .figma-spark--about-284 { left: 92.94px; top: 391.83px; width: 92.94px; }
.page-top .top-about__vision-img {
  position: relative;
  z-index: 2;
  width: min(646px, 100%);
  container-type: inline-size;
}
.page-top .top-about__vision-sparks {
  position: absolute;
  left: 0;
  top: 0;
  width: 645.55px;
  max-width: none;
  height: 64.49px;
  z-index: 1;
  transform: scale(calc(100cqw / 645.55px));
  transform-origin: top left;
}
.page-top .top-about__vision-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 645.548 / 64.492;
}
.page-top .top-about__vision-art .vision-char {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .figma-second:not(.is-in) .vision-char,
  .figma-second:not(.is-in) .section-vertical-title,
  .figma-second:not(.is-in) .figma-second__frame-11 > p,
  .figma-second:not(.is-in) .figma-spark,
  .figma-second:not(.is-in) .figma-second__link-arrow {
    opacity: 0;
  }
  .figma-second.is-in .section-vertical-title {
    animation: kv-header-pop 0.45s var(--kv-ease) both;
  }
  .figma-second.is-in .figma-second__frame-11 > p:first-child {
    animation: kv-copy-in 0.4s ease 0.12s both;
  }
  .figma-second.is-in .vision-char {
    animation: kv-char-fade 0.28s ease calc(0.2s + var(--i) * 0.06s) both;
  }
  .figma-second.is-in .figma-spark {
    /* 登場後も星ごとに周期・タイミングをずらして、ときどきキラッと動かす */
    animation:
      kv-star-pop 0.4s var(--kv-ease) calc(0.32s + var(--i, 0) * 0.04s) both,
      kv-star-twinkle calc(6s + var(--i, 0) * 0.37s) ease-in-out calc(1.4s + var(--i, 0) * 0.53s) infinite;
  }
  .figma-second.is-in .figma-spark--vision-304 { --i: 0; }
  .figma-second.is-in .figma-spark--vision-303 { --i: 1; }
  .figma-second.is-in .figma-spark--vision-302 { --i: 2; }
  .figma-second.is-in .figma-spark--vision-301 { --i: 3; }
  .figma-second.is-in .figma-spark--vision-300 { --i: 4; }
  .figma-second.is-in .figma-spark--vision-299 { --i: 5; }
  .figma-second.is-in .figma-spark--vision-297 { --i: 6; }
  .figma-second.is-in .figma-spark--vision-296 { --i: 7; }
  .figma-second.is-in .figma-spark--vision-295 { --i: 8; }
  .figma-second.is-in .figma-spark--vision-294 { --i: 9; }
  .figma-second.is-in .figma-spark--vision-293 { --i: 10; }
  .figma-second.is-in .figma-spark--vision-292 { --i: 11; }
  .figma-second.is-in .figma-spark--vision-291 { --i: 12; }
  .figma-second.is-in .figma-second__frame-11 > p:last-child {
    animation: kv-copy-in 0.4s ease 1.15s both;
  }
  /* IROHA・名札・スライム（news セクションの上端に置く）は KV の上に顔を出していて最初から見えるので、
     セクションの出現を待たずにページを開いたら KV と一緒にポンっと出す（IROHA は登場後は静止） */
  .page-top .figma-second__iroha {
    transform-origin: 50% 100%;
    animation: kv-header-pop 0.45s var(--kv-ease) 0.5s both;
  }
  /* IROHA は登場後もときどき「ぽよん」と弾む（まばたき・目線・タップの反応は top.js）。キャラごとに周期をずらす */
  .page-top .figma-news .figma-second__iroha {
    animation:
      kv-header-pop 0.45s var(--kv-ease) 0.5s both,
      iroha-poyon 5.2s ease-in-out 1.6s infinite;
  }
  .page-top .figma-second__iroha-badge {
    animation: kv-header-pop 0.4s var(--kv-ease) 0.68s both;
  }
  .page-top .figma-second__slime04 {
    transform-origin: 50% 80%;
    animation:
      kv-slime-in 0.46s var(--kv-ease) 0.6s both,
      kv-slime-double-hop 3.6s ease-in-out 1.2s infinite;
  }
  .figma-second.is-in .figma-second__link-arrow {
    animation: kv-header-pop 0.42s var(--kv-ease) 0.7s both;
  }
  .figma-news:not(.is-in) .section-vertical-title,
  .figma-news:not(.is-in) .figma-news__item,
  .figma-news:not(.is-in) .figma-news__group-59,
  .figma-news:not(.is-in) .figma-news__slime {
    opacity: 0;
  }
  .figma-news.is-in .section-vertical-title-wrap {
    animation: kv-header-pop 0.45s var(--kv-ease) both;
  }
  .figma-news.is-in .figma-news__item {
    animation: kv-copy-in 0.4s ease both;
  }
  .figma-news.is-in .figma-news__item:nth-child(1) { animation-delay: 0.12s; }
  .figma-news.is-in .figma-news__item:nth-child(2) { animation-delay: 0.2s; }
  .figma-news.is-in .figma-news__item:nth-child(3) { animation-delay: 0.28s; }
  .figma-news.is-in .figma-news__item:nth-child(4) { animation-delay: 0.36s; }
  .figma-news.is-in .figma-news__group-59 {
    animation: kv-copy-in 0.4s ease 0.48s both;
  }
  .figma-news.is-in .figma-news__slime {
    transform-origin: 50% 85%;
    animation:
      kv-slime-in 0.46s var(--kv-ease) 0.4s both,
      kv-slime-horn-swing 3.4s ease-in-out 1s infinite;
  }
  .figma-service:not(.is-in) .top-service__heading,
  .figma-service:not(.is-in) .figma-service__slime,
  .figma-service:not(.is-in) .top-service__lead,
  .figma-service:not(.is-in) .figma-service__group-60,
  .figma-service:not(.is-in) .service-card {
    opacity: 0;
  }
  .figma-service.is-in .top-service__heading {
    animation: kv-header-pop 0.45s var(--kv-ease) both;
  }
  .figma-service.is-in .figma-service__slime {
    transform-origin: 50% 85%;
  }
  /* 紫（01）は横に揺れる動き（sway-hop）をやめ、その場で跳ねる動きに（隣の 02 に近づけるため） */
  .figma-service.is-in .figma-service__slime--01 {
    animation:
      kv-slime-in 0.5s var(--kv-ease) 0.15s both,
      kv-slime-double-hop 3.4s ease-in-out 0.7s infinite;
  }
  .figma-service.is-in .figma-service__slime--02 {
    animation:
      kv-slime-in 0.46s var(--kv-ease) 0.32s both,
      kv-slime-squish 3.1s ease-in-out 0.9s infinite;
  }
  .figma-service.is-in .top-service__lead {
    animation: kv-copy-in 0.4s ease 0.12s both;
  }
  .figma-service.is-in .figma-service__group-60 {
    animation: kv-copy-in 0.4s ease 0.24s both;
  }
  .figma-service.is-in .service-card {
    transform-origin: 50% 55%;
    animation-duration: 0.48s;
    animation-timing-function: cubic-bezier(0.12, 0.8, 0.2, 1);
    animation-fill-mode: both;
  }
  .figma-service.is-in .service-card:nth-child(1) { animation-name: card-deal-1; animation-delay: 0.06s; }
  .figma-service.is-in .service-card:nth-child(2) { animation-name: card-deal-2; animation-delay: 0.14s; }
  .figma-service.is-in .service-card:nth-child(3) { animation-name: card-deal-3; animation-delay: 0.22s; }
  .figma-service.is-in .service-card:nth-child(4) { animation-name: card-deal-4; animation-delay: 0.3s; }
  .figma-service.is-in .service-card:nth-child(5) { animation-name: card-deal-5; animation-delay: 0.38s; }
  .figma-service.is-in .service-card:nth-child(6) { animation-name: card-deal-1; animation-delay: 0.46s; }
  .figma-service:not(.is-in) .top-service__slime { opacity: 0; }
  .figma-service.is-in .top-service__slime {
    transform-origin: 50% 85%;
    animation:
      kv-slime-in 0.5s var(--kv-ease) 0.45s both,
      kv-slime-squish 3.6s ease-in-out 1.1s infinite;
  }
  .figma-contact:not(.is-in) .top-contact__title,
  .figma-contact:not(.is-in) .figma-spark,
  .figma-contact:not(.is-in) .figma-contact__mail,
  .figma-contact:not(.is-in) .figma-contact__iroha,
  .figma-contact:not(.is-in) .top-contact__lead,
  .figma-contact:not(.is-in) .btn-contact {
    opacity: 0;
  }
  .figma-contact.is-in .top-contact__title {
    animation: kv-header-pop 0.45s var(--kv-ease) both;
  }
  .figma-contact.is-in .figma-spark {
    animation:
      kv-star-pop 0.4s var(--kv-ease) calc(0.12s + var(--i, 0) * 0.05s) both,
      kv-star-twinkle calc(5.6s + var(--i, 0) * 0.61s) ease-in-out calc(1s + var(--i, 0) * 0.83s) infinite;
  }
  .figma-contact.is-in .figma-spark--contact-376 { --i: 0; }
  .figma-contact.is-in .figma-spark--contact-377 { --i: 1; }
  .figma-contact.is-in .figma-spark--contact-378 { --i: 2; }
  .figma-contact.is-in .figma-spark--contact-379 { --i: 3; }
  .figma-contact.is-in .figma-spark--contact-380 { --i: 4; }
  .figma-contact.is-in .figma-spark--contact-381 { --i: 5; }
  /* 封筒: 左下から回りながら飛び込み → 以後はときどき「着信」のように跳ねて揺れる。
     配置の transform（translateY(-50%)）を壊さないよう translate / rotate の個別プロパティだけを動かす */
  .figma-contact.is-in .figma-contact__mail {
    animation:
      kv-mail-fly-in 0.7s var(--kv-ease) 0.28s both,
      kv-mail-ping 4.8s ease-in-out 1.6s infinite;
  }
  .figma-contact.is-in .figma-contact__iroha {
    transform-origin: 50% 100%;
    animation: kv-header-pop 0.45s var(--kv-ease) 0.36s both;
  }
  .page-top .figma-contact.is-in .figma-contact__iroha {
    animation:
      kv-header-pop 0.45s var(--kv-ease) 0.36s both,
      iroha-poyon 6.1s ease-in-out 1.9s infinite;
  }
  .page-top .figma-footer__iroha {
    transform-origin: 50% 100%;
    animation: iroha-poyon 5.7s ease-in-out 3.2s infinite;
  }
  /* 下層の見出し帯の IROHA: ぽんっと出てきたあと、ときどきぽよん（出現は site.css） */
  .sub-band.is-in .sub-band__iroha {
    animation:
      kv-header-pop 0.45s cubic-bezier(0.17, 0.88, 0.3, 1.28) 0.36s both,
      iroha-poyon 5.4s ease-in-out 1.8s infinite;
  }
  .global-nav__iroha {
    transform-origin: 50% 100%;
    animation: iroha-poyon 5.9s ease-in-out 2.2s infinite;
  }
  .figma-contact.is-in .top-contact__lead {
    animation: kv-copy-in 0.4s ease 0.48s both;
  }
  .figma-contact.is-in .btn-contact {
    animation: kv-header-pop 0.42s var(--kv-ease) 0.62s both;
  }
}
/* IROHA のまばたき用に重ねた、目を閉じた差分画像（top.js）。まばたきの瞬間だけ見せる */
.iroha-blink-lid:not(.is-closed) {
  visibility: hidden;
}
/* 差分画像は全身なので、そのまま重ねると足元の半透明の影が 2 重になり、まばたきのたびに影が濃く見える。
   目のまわりだけを見せる（3 つのポーズとも目は画像の縦 38〜53%・横 22〜61% に収まる） */
.iroha-blink-lid {
  clip-path: inset(36% 36% 45% 20%);
}
/* クリック／タップでキラキラが飛び散る IROHA（top.js bindIrohaReaction）。.page-top .figma-char は pointer-events: none なので戻す */
.page-top .figma-char.iroha-interactive,
.page-top .site-footer--full img.figma-footer__iroha.iroha-interactive,
.sub-band__iroha.iroha-interactive,
.global-nav__iroha.iroha-interactive {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* IROHA: 足元を支点に、むにっと縮んでから伸び上がり、ぷるんと戻る */
@keyframes iroha-poyon {
  0%, 76%, 100% { transform: none; }
  80% { transform: scale(1.05, 0.93); }
  85% { transform: translateY(-4%) scale(0.96, 1.05); }
  90% { transform: scale(1.03, 0.97); }
  95% { transform: scale(0.99, 1.01); }
}
@keyframes kv-mail-fly-in {
  0% { opacity: 0; translate: -40px 28px; rotate: -24deg; }
  60% { opacity: 1; translate: 4px -8px; rotate: 8deg; }
  80% { translate: -2px 2px; rotate: -3deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes kv-mail-ping {
  0%, 62%, 100% { translate: 0 0; rotate: 0deg; }
  68% { translate: 0 -12px; rotate: -8deg; }
  74% { translate: 0 0; rotate: 6deg; }
  79% { translate: 0 -5px; rotate: -5deg; }
  84% { translate: 0 0; rotate: 3deg; }
  89% { rotate: -1.5deg; }
  94% { rotate: 0deg; }
}
@keyframes kv-char-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Figma 259:290 — Frame11 内 y−175 */
.page-top .figma-spark--vision-304 { left: 0; top: 4.45px; width: 19.65px; }
.page-top .figma-spark--vision-303 { left: 26.05px; top: 6.24px; width: 58.56px; }
.page-top .figma-spark--vision-302 { left: 88.38px; top: 6.62px; width: 61.82px; }
.page-top .figma-spark--vision-301 { left: 157px; top: 5.92px; width: 51.2px; }
.page-top .figma-spark--vision-300 { left: 214.3px; top: 45.41px; width: 17.34px; }
.page-top .figma-spark--vision-299 { left: 245.2px; top: 5.92px; width: 46.14px; }
.page-top .figma-spark--vision-298 { left: 296.7px; top: 28.48px; width: 41.1px; }
.page-top .figma-spark--vision-297 { left: 345.5px; top: 6.5px; width: 40px; }
.page-top .figma-spark--vision-296 { left: 398.9px; top: 0; width: 41px; }
.page-top .figma-spark--vision-295 { left: 444.9px; top: 19px; width: 35px; }
.page-top .figma-spark--vision-294 { left: 487.9px; top: 18px; width: 36px; }
.page-top .figma-spark--vision-293 { left: 537.9px; top: 12.46px; width: 47.9px; }
.page-top .figma-spark--vision-292 { left: 594.2px; top: 45.74px; width: 18.75px; }
.page-top .figma-spark--vision-291 { left: 625.9px; top: 30.43px; width: 19.65px; }
/* CONTACT 259:338 パネル基準 */
.page-top .figma-contact .figma-spark { z-index: 4; }
.page-top .figma-spark--contact-376 { left: 88.19%; top: calc(100vw * 142 / 1366); width: 5.89%; }
.page-top .figma-spark--contact-377 { left: 68.45%; top: calc(100vw * 159 / 1366); width: 3.51%; }
/* IROHA（左端 約 76.6%）に重ならないよう、文章と IROHA の間へ（Figma 位置 75.12% から左へずらした） */
.page-top .figma-spark--contact-378 { left: 69.5%; top: calc(100vw * 291 / 1366); width: 5.43%; }
.page-top .figma-spark--contact-379 { left: 3.15%; top: calc(100vw * 154 / 1366); width: 6.44%; }
.page-top .figma-spark--contact-380 { left: 17.72%; top: calc(100vw * 136 / 1366); width: 4.03%; }
/* パネルは中央寄せ・幅固定なので、広い画面でもメールイラストの右側に逃がす */
.page-top .figma-spark--contact-381 { left: max(calc(15.3% + 158px), calc(50% - 300px)); top: calc(100vw * 266 / 1366); width: 4.24%; }

.page-top .top-body {
  box-sizing: border-box;
  width: min(100%, var(--figma-w));
  margin-inline: auto;
  padding-inline: var(--body-x);
}

.page-top .top-body__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ヘッダー */
.page-top .figma-header.site-header {
  padding-inline: 0;
}
/* ヘッダーは全幅で上に固定（KV の固定・about が重なる演出とヘッダーの白塗りはこれが前提） */
.page-top .figma-header.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
}
.page-top .figma-header {
  min-height: 100px;
  padding-top: 20px;
  /* 背景は ::before の半透明レイヤーで描く（下） */
  background: transparent;
  overflow-x: clip;
}
/* TOP では最初は透明、KV の上でスクロールするにつれて白へ（top.js が --header-fill を 0〜1 で更新）。塗りきったら白ベタ */
.page-top .figma-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--white) calc(var(--header-fill, 1) * 100%), transparent);
  pointer-events: none;
}
.page-top .figma-header > .top-shell.figma-header__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-left: var(--header-logo-inset);
  padding-right: 0;
}
.page-top .figma-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.page-top .figma-header__inner > .brand {
  flex-shrink: 0;
}
.page-top .brand img { width: 90px; height: 80px; object-fit: contain; }
.page-top .figma-header__nav {
  gap: 30px;
  flex-shrink: 0;
}
.page-top .figma-header__nav > a {
  padding: 0;
  height: auto;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}
.page-top .global-nav .contact-link {
  min-width: 228px;
  min-height: 70px;
  margin: 0;
  padding: 10px 16px 10px 30px;
  border-radius: 40px 0 0 40px;
  font-size: 20px;
}
.page-top .global-nav .contact-link:hover {
  background: var(--badge-dfp);
}

/* KV — 1366×580 を幅100%に拡縮。装飾はステージ割合の絶対配置 */
.figma-kv {
  position: relative;
  width: 100%;
  background: var(--section-bg-kv);
  overflow: visible;
}
/* KV はヘッダー下に留まり、about（IROHA 含む）以降がその上に重なってスクロールする。
   top は top.js がヘッダー高さ／KV が画面より高い場合は下端合わせで --kv-stick-top に入れる。
   完全固定ではなく、top.js の --kv-shift（スクロール量の一部）だけゆっくり上へ動かす */
@media (prefers-reduced-motion: no-preference) {
  .page-top .figma-kv {
    position: sticky;
    top: var(--kv-stick-top, 100px);
    z-index: 1;
    transform: translate3d(0, calc(var(--kv-shift, 0) * -1px), 0);
    will-change: transform;
  }
}
.figma-kv__stage {
  position: relative;
  /* 大きい画面では 1600px で拡大を止める（KV だけ巨大化して下のセクションと釣り合わなくなるのを防ぐ）。
     写真スライダーだけは下で画面幅いっぱいに広げる */
  width: min(100%, 1600px);
  margin-inline: auto;
  aspect-ratio: 1366 / 580;
  container-type: size;
  container-name: kv;
}
.figma-kv__art {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.figma-kv__deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* スライムは site.js で inline SVG 化されるので svg にも同じ可変幅を当てる */
.figma-kv__deco img,
.figma-kv__deco svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.figma-kv__deco--rot img {
  width: var(--iw);
  transform: rotate(var(--rot));
}
.figma-kv__deco--171 { left: 89.75%; top: 9.845%; width: 9.41%; --iw: 66.45%; --rot: 48.01deg; }
.figma-kv__deco--172 { left: 82.58%; top: -0.026%; width: 3.73%; }
.figma-kv__deco--173 { left: 76.05%; top: 28.082%; width: 12.1%; --iw: 69.58%; --rot: 57.07deg; }
.figma-kv__deco--176 { left: 1.76%; top: 26.939%; width: 4.944%; }
.figma-kv__deco--177 { left: 84%; top: 8px; width: 14%; z-index: 4; }
.figma-kv__deco--178 { left: 39.5%; top: 52%; width: 8.3%; z-index: 4; }
.figma-kv__deco--179 { left: 18.45%; top: 21.04%; width: 3.27%; --iw: 68.71%; --rot: 62.43deg; }
.figma-kv__deco--174 { left: 16.03%; top: 55.529%; width: 6.02%; --iw: 74.36%; --rot: 65.03deg; }
.figma-kv__deco--175 { left: 4.69%; top: 51.015%; width: 6.37%; --iw: 70.28%; --rot: 65.03deg; }
/* 見出しSVGの下段の空き（ともに。の左）に置き、見出しとセットで拡縮する */
.figma-kv__deco--slime06 { left: -3.9%; top: 60%; width: 26.6%; z-index: 1; }
.figma-kv__deco--slime06 img,
.figma-kv__deco--slime06 svg { transform: scaleX(-1); }
.figma-kv__deco--slime02 { left: 23.2%; top: 77%; width: 24.2%; z-index: 1; }

/* KV 登場 — 言葉が先、右上の星が転がり、残りが弾む */
@media (prefers-reduced-motion: no-preference) {
  .page-top { --kv-ease: cubic-bezier(0.17, 0.88, 0.3, 1.28); }
  .page-top .figma-header .brand,
  .page-top .figma-header .menu-button,
  .page-top .figma-header__nav > a {
    animation: kv-header-pop 0.42s var(--kv-ease) both;
  }
  .page-top .figma-header .brand { animation-delay: 0s; }
  .page-top .figma-header .menu-button { animation-delay: 0.06s; }
  .page-top .figma-header__nav > a:nth-child(1) { animation-delay: 0.08s; }
  .page-top .figma-header__nav > a:nth-child(2) { animation-delay: 0.14s; }
  .page-top .figma-header__nav > a:nth-child(3) { animation-delay: 0.2s; }
  .page-top .figma-header__nav > a:nth-child(4) { animation-delay: 0.26s; }
  .page-top .figma-header__nav > a.contact-link { animation-delay: 0.34s; }
  /* キャッチコピー: 1 文字ずつ上から落ちて、潰れて、弾んで着地（文字は index.html のインライン SVG） */
  .page-top .kv-title-char {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: kv-title-char-drop 0.78s cubic-bezier(0.22, 0.8, 0.3, 1) calc(0.06s + var(--i) * 0.055s) both;
  }
  .page-top .kv-title-char:nth-child(odd) { --tilt: -9deg; }
  .page-top .kv-title-char:nth-child(even) { --tilt: 9deg; }
  .figma-kv__deco--177 { --kv-at: 0.25s; --kv-bob: 5.1s; }
  .figma-kv__deco--179 { --kv-at: 0.45s; --kv-bob: 5.4s; }
  .figma-kv__deco--172 { --kv-at: 0.51s; --kv-bob: 6.2s; }
  .figma-kv__deco--176 { --kv-at: 0.57s; --kv-bob: 4.8s; }
  .figma-kv__deco--174 { --kv-at: 0.63s; --kv-bob: 6.6s; }
  .figma-kv__deco--175 { --kv-at: 0.69s; --kv-bob: 5.8s; }
  .figma-kv__deco--178 { --kv-at: 0.75s; --kv-bob: 7s; }
  .figma-kv__deco--171 { --kv-at: 0.81s; --kv-bob: 6s; }
  .figma-kv__deco--173 { --kv-at: 0.87s; --kv-bob: 7.4s; }
  .figma-kv__deco--177,
  .figma-kv__deco--179,
  .figma-kv__deco--172,
  .figma-kv__deco--176,
  .figma-kv__deco--174,
  .figma-kv__deco--175,
  .figma-kv__deco--178,
  .figma-kv__deco--171,
  .figma-kv__deco--173 {
    animation:
      kv-star-pop 0.42s var(--kv-ease) var(--kv-at) both,
      kv-star-twinkle var(--kv-bob) ease-in-out calc(var(--kv-at) * 4 + 0.42s) infinite;
  }
  .figma-kv__deco--slime06,
  .figma-kv__deco--slime02 {
    transform-origin: 50% 85%;
  }
  .figma-kv__deco--slime06 {
    animation:
      kv-slime-in 0.5s var(--kv-ease) 0.55s both,
      kv-slime-wobble-big 4.2s ease-in-out 1.1s infinite;
  }
  .figma-kv__deco--slime02 {
    animation:
      kv-slime-in 0.46s var(--kv-ease) 0.75s both,
      kv-slime-hop 2.9s ease-in-out 1.35s infinite;
  }
  .top-hero__lead {
    animation: kv-copy-in 0.25s ease 0.8s both;
  }
  .top-hero__en {
    animation: kv-copy-in 0.22s ease 0.92s both;
  }
}
@keyframes kv-header-pop {
  0% { opacity: 0; transform: translateY(-12px) scale(0.78); }
  58% { opacity: 1; transform: translateY(2px) scale(1.08); }
  80% { transform: translateY(0) scale(0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-title-char-drop {
  0% { opacity: 0; transform: translateY(-70%) rotate(var(--tilt, 0deg)) scale(0.9, 1.14); }
  34% { opacity: 1; transform: translateY(0) rotate(0deg) scale(0.92, 1.1); }
  46% { transform: translateY(0) rotate(0deg) scale(1.18, 0.8); }
  62% { transform: translateY(-16%) rotate(calc(var(--tilt, 0deg) * -0.35)) scale(0.95, 1.07); }
  78% { transform: translateY(0) rotate(0deg) scale(1.06, 0.94); }
  90% { transform: translateY(-3%) rotate(0deg) scale(0.99, 1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-title-land {
  0% { opacity: 0; transform: translateY(32px) scale(1.06, 0.86); }
  58% { opacity: 1; transform: translateY(5px) scale(1.08, 0.88); }
  80% { transform: translateY(-4px) scale(0.98, 1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-star-pop {
  0% { opacity: 0; transform: scale(0.15) rotate(-16deg); }
  52% { opacity: 1; transform: scale(1.16) rotate(9deg); }
  76% { transform: scale(0.93) rotate(-5deg); }
  100% { opacity: 1; transform: none; }
}
/* 普段はゆっくり揺れ、周期の終盤だけ拡大＋回転でキラッと弾む */
@keyframes kv-star-twinkle {
  0%, 70%, 100% { transform: none; }
  35% { transform: translateY(-2px) rotate(1.2deg); }
  76% { transform: scale(1.2) rotate(16deg); }
  83% { transform: scale(0.92) rotate(-7deg); }
  89% { transform: scale(1.05) rotate(2deg); }
  95% { transform: none; }
}
@keyframes kv-slime-in {
  0% { opacity: 0; transform: translateY(42px) scale(1.16, 0.76); }
  55% { opacity: 1; transform: translateY(-14px) scale(0.9, 1.14); }
  78% { transform: translateY(4px) scale(1.08, 0.92); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-slime-jelly {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-3px) scale(0.98, 1.03); }
  50% { transform: translateY(0) scale(1.03, 0.97); }
  70% { transform: translateY(-1px) scale(0.99, 1.01); }
}
@keyframes kv-slime-roll {
  0%, 8% { transform: translateX(0) rotate(0deg); }
  42% { transform: translateX(180px) rotate(320deg); }
  58% { transform: translateX(180px) rotate(320deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes kv-slime-hop {
  0%, 10% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(-9px) scale(0.9, 1.12) rotate(4deg); }
  30% { transform: translateY(4px) scale(1.12, 0.86) rotate(-2deg); }
  42% { transform: translateY(-4px) scale(0.96, 1.06) rotate(1deg); }
  54%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
/* スライムは個体ごとに動きを変える（振れ幅は KV 水色スライムの kv-slime-hop 程度） */
/* KV オレンジ: 伸び上がって左右に大きく首をかしげる */
@keyframes kv-slime-wobble-big {
  0%, 10% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  20% { transform: translateY(3px) scale(1.1, 0.88) rotate(0deg); }
  32% { transform: translateY(-12px) scale(0.9, 1.14) rotate(-7deg); }
  44% { transform: translateY(2px) scale(1.08, 0.92) rotate(5deg); }
  56% { transform: translateY(-5px) scale(0.96, 1.05) rotate(-3deg); }
  68%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
/* About: 大小 2 回ぴょんぴょん跳ねる */
@keyframes kv-slime-double-hop {
  0%, 12% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(2px) scale(1.12, 0.86); }
  28% { transform: translateY(-14px) scale(0.9, 1.12); }
  38% { transform: translateY(2px) scale(1.12, 0.88); }
  46% { transform: translateY(-7px) scale(0.95, 1.06); }
  54% { transform: translateY(1px) scale(1.06, 0.94); }
  62%, 100% { transform: translateY(0) scale(1, 1); }
}
/* サービス 01: 左右に揺れながら跳ねる */
@keyframes kv-slime-sway-hop {
  0%, 8% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  20% { transform: translate(-6px, -10px) rotate(-8deg) scale(0.94, 1.08); }
  32% { transform: translate(0, 2px) rotate(0deg) scale(1.1, 0.9); }
  44% { transform: translate(6px, -10px) rotate(8deg) scale(0.94, 1.08); }
  56% { transform: translate(0, 2px) rotate(0deg) scale(1.1, 0.9); }
  66%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
}
/* news 左下（ツノのある青）: ツノを振るように左右に首をかしげてから、ぴょんと跳ねる */
@keyframes kv-slime-horn-swing {
  0%, 6% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  16% { transform: translateY(-2px) scale(0.98, 1.03) rotate(-12deg); }
  28% { transform: translateY(-2px) scale(0.98, 1.03) rotate(10deg); }
  38% { transform: translateY(-1px) scale(1, 1.01) rotate(-6deg); }
  46% { transform: translateY(2px) scale(1.14, 0.84) rotate(0deg); }
  56% { transform: translateY(-16px) scale(0.9, 1.12) rotate(0deg); }
  66% { transform: translateY(2px) scale(1.1, 0.9) rotate(0deg); }
  74% { transform: translateY(-2px) scale(0.98, 1.03) rotate(0deg); }
  80%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
/* サービス 02: ぐにゃっと潰れてからびよーんと伸びる */
@keyframes kv-slime-squish {
  0%, 14% { transform: translateY(0) scale(1, 1); }
  26% { transform: translateY(4px) scale(1.2, 0.78); }
  38% { transform: translateY(-12px) scale(0.84, 1.2); }
  50% { transform: translateY(2px) scale(1.12, 0.9); }
  60% { transform: translateY(-3px) scale(0.97, 1.04); }
  70%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes card-deal-1 {
  0% { opacity: 0; transform: translate(36px, 72px) rotate(-16deg) scale(0.86); }
  72% { opacity: 1; transform: translate(-4px, -6px) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes card-deal-2 {
  0% { opacity: 0; transform: translate(-48px, 64px) rotate(18deg) scale(0.84); }
  72% { opacity: 1; transform: translate(6px, -4px) rotate(-2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes card-deal-3 {
  0% { opacity: 0; transform: translate(88px, -28px) rotate(-12deg) scale(0.88); }
  72% { opacity: 1; transform: translate(-6px, 4px) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes card-deal-4 {
  0% { opacity: 0; transform: translate(8px, -64px) rotate(10deg) scale(0.86); }
  72% { opacity: 1; transform: translate(-2px, 6px) rotate(-1.5deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes card-deal-5 {
  0% { opacity: 0; transform: translate(-80px, -20px) rotate(20deg) scale(0.84); }
  72% { opacity: 1; transform: translate(5px, 3px) rotate(-2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes kv-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.figma-kv__copy {
  position: absolute;
  z-index: 5;
  left: 7.759%;
  top: 0.862%;
  width: 78.16%;
  display: flex;
  align-items: flex-end;
  gap: 2.435%;
  pointer-events: none;
}
.figma-kv__copy a { pointer-events: auto; }
.page-top .figma-kv__group-12 {
  position: relative;
  z-index: 2;
  flex: 0 0 47.64%;
  margin: 0;
}
.page-top .figma-kv__title-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}
.figma-kv__frame-78 { flex: 1 1 auto; min-width: 0; padding-bottom: 0.4cqw; }
.top-hero__lead {
  margin: 0;
  /* 画面幅に合わせて変えつつ、PC で大きすぎにならないよう上限を付ける（下限は 1 行に収まる 13px） */
  font-size: clamp(13px, 1.903cqw, 22px);
  font-weight: 700;
  line-height: 1.5;
  /* 2 行目（世代をこえて、…）が 1 行に入るよう少し詰める（2026-10-15 文言変更で 3 文字増えた） */
  letter-spacing: 0.06em;
}
/* それでも入らない幅では、文節の切れ目で折り返す（「を。」だけが次の行に落ちないように） */
.top-hero__phrase { display: inline-block; }
.top-hero__en {
  margin: 0.586cqw 0 0;
  color: var(--teal);
  font-family: Poppins, sans-serif;
  font-size: clamp(13px, 1.61cqw, 18px);
  font-weight: 700;
}
.figma-kv__photo-slider {
  position: absolute;
  z-index: 1;
  /* KV 本体が 1600px で止まっても、写真の帯は画面の端から端まで流す */
  left: min(0px, calc(800px - 50vw));
  top: 37.931%;
  width: max(100%, 100vw);
  height: 62.069%;
  margin: 0;
  overflow: visible;
}
.figma-kv__photo-slider .kv-slider__viewport {
  height: 100%;
  overflow: hidden;
}
.page-top .kv-slider__jagged {
  position: relative;
  z-index: 3;
  display: block;
  width: max(100%, var(--jag-w));
  height: var(--section-jagged-h);
  margin-left: 50%;
  transform: translateX(-50%);
  fill: var(--section-bg-kv);
  pointer-events: none;
}
.page-top .kv-slider__jagged use {
  fill: inherit;
}
.page-top .kv-slider__jagged--top {
  margin-bottom: calc(-1 * var(--section-jagged-h));
  transform: translate(-50%, -2px);
}
.kv-slider__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  background: var(--section-bg-kv);
  container-type: inline-size;
  container-name: kv-slider;
}
.kv-slider__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: kv-slider-flow 56s linear infinite; /* 4枚。1枚あたりの速さは3枚・42s のときと同じ */
  will-change: transform;
}
.kv-slider__slide {
  flex: 0 0 33.333333cqw;
  width: 33.333333cqw;
  height: 100%;
  margin: 0;
  /* 幅が端数（スマホで 307.5px など）になると、流れている途中で写真の継ぎ目に白い筋が出て途切れて見えるため、
     隣の写真に 1px 重ねる（全部の写真が同じだけ重なるので、-50% のループのつなぎ目はずれない） */
  margin-right: -1px;
}
.kv-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* TOP の KV の写真・フッターの写真・流れる英文は、画面幅によらず同じ速さで流す（px/秒。top.js startLoopMotion が読む）。
   スマホの KV でちょうどよかった速さ（2026-10-29 ユーザー指示「同じスピードに」） */
.figma-kv__photo-slider,
.footer-gallery-slider,
.top-contact__marquee {
  --loop-speed: 29;
}
/* 実際に流すのは top.js（initLoopSlider）。ここの秒数は「元の枚数ぶん流れる時間」として速さの計算に使う */
@keyframes kv-slider-flow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kv-slider__track {
    animation: none;
    transform: none;
  }
}

/* セカンド（About） */
/* ニュースの直後。上のギザギザをニュースの上に出すため、ニュースより前面に */
.figma-second {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 0;
  padding: calc(var(--section-jagged-h) + 56px) 0 calc(72px + var(--section-jagged-h));
  background: var(--section-bg-about);
  --section-jagged-fill: var(--section-bg-about);
  overflow: visible;
  isolation: isolate;
}
.page-top .figma-second > .section-jagged-top {
  z-index: 5;
  transform: translate(-50%, calc(-100% + 2px));
}
/* Figma 324:10 / Frame 31 — キャラはテキスト列の外側に配置 */
.page-top .figma-second__frame-31 {
  position: relative;
  overflow: visible;
}
/* Figma 324:10 — Frame31（content-max）基準・TOP座標を scale 換算 */
.page-top .figma-second__char-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.page-top .sec-art {
  position: absolute;
  inset: 0;
  z-index: auto;
  pointer-events: none;
  overflow: visible;
}
.page-top .sec-art img {
  position: absolute;
  height: auto;
  max-width: none;
}
.page-top .figma-second__slime04 {
  left: 13.32%;
  top: calc(100vw * -49 / 1366);
  width: 8.34%;
  z-index: 6;
}
.page-top .figma-second__iroha {
  left: auto;
  right: 8px;
  top: var(--iroha-top);
  width: var(--iroha-w);
  z-index: 6;
}
.page-top .figma-second__iroha-badge {
  left: auto;
  right: calc(8px + (var(--iroha-w) - var(--iroha-badge-w)) / 2);
  top: calc(var(--iroha-top) + var(--iroha-w) * 1.382 + 12px);
  width: var(--iroha-badge-w);
  z-index: 5;
}
.figma-second::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  z-index: 0;
}
.page-top .figma-second__hex {
  left: 0.07%;
  top: calc(100vw * 51 / 1366);
  width: 97.73%;
  z-index: 0;
}
.figma-second__frame-31 {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: calc(var(--figma-scale) * 27px);
  overflow: visible;
  padding-right: calc(clamp(80px, 17vw + 48px, 240px) + 12px);
}
.figma-second__frame-30 {
  display: flex;
  align-items: flex-start;
  gap: 53px;
  flex: 1;
  min-width: 0;
}
.figma-second__frame-11 p {
  margin: 0 0 20px;
  font-size: clamp(14px, 0.9vw + 12px, 24px);
  font-weight: 500;
  line-height: 1.5;
  max-width: none;
}
.figma-second__frame-11 p:first-child {
  margin-top: 0;
}
.top-about__vision-img { margin: 8px 0 20px; }
.top-about__vision-img img { width: min(646px, 100%); height: auto; }
.page-top .figma-second__link.link-circle-arrow {
  align-self: flex-end;
  flex-shrink: 0;
  display: block;
  width: 118px;
  height: 118px;
  border: 0;
  background: transparent;
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), opacity .7s cubic-bezier(0.37, 0, 0.2, 1);
}
.page-top .figma-second__link.link-circle-arrow:hover {
  opacity: 1;
  scale: 1.06;
}
.page-top .figma-second__link-arrow rect {
  transition: fill .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .figma-second__link.link-circle-arrow:hover .figma-second__link-arrow rect {
  fill: var(--badge-dfp);
}
.page-top .figma-second__link-arrow {
  display: block;
  width: 118px;
  height: 118px;
}

/* ニュース（Figma 324:14 — 薄青背景・上白ギザギザが About 下に重なる） */
/* KV の直後（about より前）。上のギザギザは KV の白に溶けるので、KV の写真帯にかぶせないよう上に重ねない。
   スライム・IROHA・名札（.figma-news__kv-chars）は上端から KV の写真帯の下へ顔を出す */
.figma-news {
  --iroha-w: clamp(80px, 17vw + 48px, 240px);
  --iroha-badge-w: clamp(56px, 11vw + 30px, 160px);
  /* IROHA は足元（画像の下端。縦横比 865/631 ≒ 1.371）が KV 写真帯の下のギザギザに重なる位置に置く
     （2026-10-27 ご指示「ジグザグに重なる様に、下に下げる」。靴がギザギザの線をまたぐよう、ギザギザの下端より少し下まで） */
  --iroha-top: calc(var(--iroha-w) * -1.371 + var(--section-jagged-h) * 0.8);
  position: relative;
  z-index: 2;
  display: flow-root;
  margin-top: 0;
  padding: 24px 0 108px;
  background: var(--section-bg-news);
  --section-jagged-fill: var(--section-bg-news);
  overflow: visible;
}
/* 左下のスライム（PC は縦書き見出し「news」の列の下、狭い画面はセクションの左下） */
.page-top .figma-news__slime {
  left: max(4%, calc(50% - 500px));
  top: auto;
  bottom: 72px;
  width: clamp(64px, 8vw, 108px);
  /* 本文の枠（.figma-news__frame-62・z-index 2）より前面に。下だとパララックスで上がっている間はタップできない */
  z-index: 3;
  /* パララックスで下へ沈む上限（top.js）。すぐ下の about のギザギザ（z-index が上）にもぐらない幅にする */
  --slime-parallax-down: 24px;
}
@media (max-width: 1100px) {
  /* 下のギザギザまで約 11px（bottom 32px − 歯の高さ 21px）なので 6px まで */
  .page-top .figma-news__slime { left: 4%; bottom: 32px; width: clamp(56px, 9vw, 88px); --slime-parallax-down: 6px; }
}
/* スマホは「ニュース一覧を見る」がすぐ右にあるので、パララックスで上がってもかからない大きさ・位置に。
   ボタン（幅 240px・中央寄せ）の左端は 50vw − 120px なので、右端がその 2px 手前に収まる大きさ（最大 60px）にする
   （2026-10-21 に 48px 固定から拡大。ほかのスライムより小さく見えたため） */
@media (max-width: 720px) {
  /* 下のギザギザまで約 16px（歯の高さ 16px）なので 8px まで */
  .page-top .figma-news__slime { left: 6px; width: clamp(40px, calc(50vw - 128px), 60px); --slime-parallax-down: 8px; }
}
/* Figma Frame 82 / 83 — 菱形装飾 (#EFFCFE) */
/* Figma 324:14 — Frame 82 / 83 */
.page-top .figma-news__diamonds {
  z-index: 0;
}
.figma-news__diamonds--left {
  left: 0;
  top: calc(100vw * 40 / 1366);
  width: 15.3%;
}
.figma-news__diamonds--right {
  left: 85.21%;
  top: calc(100vw * 172 / 1366);
  width: 14.79%;
}
.figma-news__frame-62 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 65px;
  /* Figma: Frame 62 は y=62（菱形 y=40 より下）— padding 合体で菱形上端を隠さない */
  margin-top: 62px;
  padding-top: 0;
}
.figma-news__frame-72 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.page-top .figma-news .figma-news__frame-27 {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  /* 行のあいだに隙間を作らない（ホバーの塗りが上の罫線までつながるように） */
  gap: 0;
}
.home-news-list { list-style: none; margin: 0; padding: 0; }
.home-news-list a {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 24px;
  gap: 24px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}
/* 左のサムネイル（記事の写真。写真の無い記事はロゴを薄く敷いた枠） */
.news-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--teal-soft);
}
.news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-thumb img.news-thumb__logo { width: 38%; height: auto; object-fit: contain; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .home-news-list a:hover .news-thumb img { scale: 1.05; }
  /* ロゴは小さいので、写真と同じ 1.05 倍だと動きが見えない。少し大きめに */
  .home-news-list a:hover .news-thumb img.news-thumb__logo { scale: 1.12; }
}
/* 右側: 上に「PICK UP」・カテゴリ・日付、下にタイトル */
.news-row__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.home-news-list time { color: #6b7280; font-size: 15px; font-weight: 700; }
.news-cat {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  background: var(--white);
}
/* タイトルは 2 行まで表示し、それ以上は「…」 */
.home-news-list strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  white-space: normal;
}
/* TOP とニュース一覧ページで共通の行末の丸矢印 */
.page-top .home-news-list .news-row-arrow {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.figma-news__group-59 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--teal);
  font-size: 20px;
  font-weight: 700;
}
/* News・サービスの「〜へ」ボタンは同じ丸矢印（SVG の円のみ・枠線なし） */
.page-top .figma-news .news-more__icon,
.page-top .figma-service .news-more__icon {
  display: block;
  /* ほかのボタンとの釣り合い・押しやすさのため 36px → 44px */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
}

/* サービス（上向きギザギザが News 白背景の下に重なる） */
.figma-service {
  position: relative;
  z-index: 4;
  margin-top: calc(-1 * var(--section-jagged-h));
  padding: calc(var(--section-jagged-h) + 64px) 0 108px;
  background: var(--section-bg-service);
  --section-jagged-fill: var(--section-bg-service);
  overflow: visible;
}
/* Figma 259:1691 Frame73 — slime01/02（259:449,259:543）見出し基準 */
.page-top .figma-service__char-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
/* 259:449 / 259:543。見出し（y=1795）の上で止める。1366 枠に揃える */
.page-top .figma-service__slime--01 {
  left: calc((100% - min(100vw, 1366px)) / 2 + min(100vw, 1366px) * 90 / 1366);
  top: calc(min(100vw, 1366px) * -20 / 1366);
  width: calc(min(100vw, 1366px) * 140 / 1366);
  z-index: 40;
}
.page-top .figma-service__slime--02 {
  /* 01（x 90〜230）のすぐ右隣。伸び縮みしても重ならない程度に近づける（01 は横揺れなし） */
  left: calc((100% - min(100vw, 1366px)) / 2 + min(100vw, 1366px) * 246 / 1366);
  top: calc(min(100vw, 1366px) * 100 / 1366);
  width: calc(min(100vw, 1366px) * 138 / 1366);
  z-index: 41;
}
.figma-service__bg {
  position: absolute;
  inset: 0;
  background: var(--teal-soft);
  z-index: 0;
}
/* Figma 259:9 Group 36 / 259:14–15 Group 37（白 40% の丸模様） */
.figma-service__pattern {
  overflow: visible;
  z-index: auto;
}
.page-top .figma-service__bubbles {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.page-top .figma-service__bubbles--left {
  left: -7.25%;
  top: calc(100vw * 173 / 1366);
  width: 32.87%;
  z-index: 0;
}
.page-top .figma-service__bubbles--right {
  left: 72.18%;
  top: calc(100vw * 300 / 1366);
  width: 34.7%;
  z-index: 0;
  transform: rotate(60deg);
  transform-origin: 30% 70%;
}
.figma-service__group-75 {
  position: relative;
  z-index: 5;
  margin-top: 116px;
  display: grid;
  grid-template-columns: minmax(0, 334px) minmax(0, 335px) minmax(0, 335px);
  /* 2 行を同じ高さに（行ごとの高さの違いでカードの高さがずれないように） */
  grid-template-rows: 1fr 1fr;
  row-gap: 40px;
  column-gap: 28px;
}
/* カード 5 枚以下：見出し・文章・ボタンを 1 列目 1 行目にまとめ、カードはその右から詰めて並ぶ（2,3 の並び）。
   2026-10-13 ユーザー指示：6 枚以上になるまではこの見た目にする */
.figma-service__frame-73 {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: relative;
  overflow: visible;
  width: min(334px, 100%);
  z-index: 2;
  pointer-events: none;
  container-type: inline-size;
}
/* カード 6 枚以上（パソコン幅）：見出し帯が 1 行目を全幅で使い、左に見出し（service）、右に文章とボタンを並べる。
   カードは 2 行目から 3 枚ずつ並ぶ（3,3,3… の規則） */
@media (min-width: 1101px) {
  .figma-service__group-75:has(.service-card:nth-child(6)) .figma-service__frame-73 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 334px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    width: 100%;
  }
  .figma-service__group-75:has(.service-card:nth-child(6)) .top-service__heading { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  /* 見出しは行の上に余白がある分、字の上端が下がって見えるので、文章を少し下げて字の上端をそろえる */
  .figma-service__group-75:has(.service-card:nth-child(6)) .top-service__lead { grid-column: 2; grid-row: 1; margin: 10px 0 0; align-self: start; }
  .figma-service__group-75:has(.service-card:nth-child(6)) .figma-service__group-60 { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
}
.figma-service__frame-73 a {
  pointer-events: auto;
}
.figma-service__frame-84 {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-service__heading {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(40px, 22cqi, 80px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}
.top-service__lead {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.figma-service__group-60 { margin-top: 20px; font-size: 20px; }
/* カード 4 枚のときのスライム：2 行目 3 列目の空き枠（グリッドの枠を基準に absolute で置く）の下寄せ・ほぼ中央。
   5 枚以上で枠が埋まったら出さない */
.page-top .top-service__slime {
  grid-column: 3;
  grid-row: 2;
  left: 28%;
  bottom: 0;
  width: min(150px, 45%);
  z-index: 2;
  /* 元の絵が左に約 15° 傾いて描かれている（影の楕円が右上がり）ので、まっすぐに起こす。
     rotate は transform（出現・弾むアニメーション）とは別に効くので、動きはそのまま */
  rotate: 15deg;
}
.figma-service__group-75:has(.service-card:nth-child(5)) .top-service__slime { display: none; }
.page-top .service-card { overflow: visible; display: flex; flex-direction: column; }
/* カードの高さをそろえる（2026-10-15 ユーザー指示）: 同じ行のカードはグリッドで同じ高さになるので、中の枠をいっぱいに伸ばす */
.page-top .service-card > a,
.page-top .service-card > .service-card__box { flex: 1 1 auto; }
.page-top .service-card a,
.page-top .service-card__box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 335px;
  padding: 32px 22px 36px;
  background: var(--white);
  border-radius: 30px;
  overflow: visible;
}
.page-top .service-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  max-width: calc(100% - 24px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* 見出し（バッジ）はカード幅に合わせて可変。PC デザイン（カード幅 330px）での Figma frame 幅
   （259:30 / 49 / 92 / 66 / 107 = 149.67 / 151.15 / 243.24 / 185.18 / 136.14px）とカードの比率を保つ。
   縦積みで広くなったカードでも見出しが小さく見えないように。大きくなりすぎないよう 1.7 倍で止める */
.page-top .service-card { container-type: inline-size; }
.page-top .service-card a,
.page-top .service-card__box {
  padding-top: max(32px, 9.7cqi);
  /* 見出しは上に半分はみ出す（最大でカード幅の約 9.4% ＝ 5 枚の中でいちばん背の高い見出しの半分）。
     行の間隔 40px の中で、上のカードとの間に 16px 以上あくよう、足りない分だけカードの上に余白を足す */
  margin-top: max(0px, calc(9.4cqi - 24px));
}
/* 2026-10-15: 画像の中の文字（カタカナ「ク」・漢字の高さ）がデジタルファンパーク・ポシェットプラスと同じ大きさに見えるよう、
   eスポーツスクールと宿泊の幅を測り直した（画像ごとに文字の占める割合が違うため） */
.page-top .service-card--esports .service-card__badge { width: clamp(212px, 80.4cqi, 450px); }
.page-top .service-card--hado .service-card__badge { width: clamp(121px, 45.8cqi, 257px); }
.page-top .service-card--dfp .service-card__badge { width: clamp(195px, 73.7cqi, 413px); }
.page-top .service-card--immersia .service-card__badge { width: clamp(148px, 56.1cqi, 315px); }
.page-top .service-card--hotel .service-card__badge { width: clamp(121px, 45.7cqi, 256px); }
.page-top .service-card--pochette .service-card__badge { width: clamp(165px, 61.8cqi, 347px); }
.page-top .service-card__media {
  position: relative;
  flex-shrink: 0;
}
/* 飲食（準備中）のカード: 準備中と分かるよう、カードを白に近い灰色の地にし（2026-10-15 点線の枠は削除）、写真の代わりにナイフとフォーク・「飲食」・
   「COMING SOON」の札を置く。リンクではないのでホバーの動きも無し。バッジは無し（2026-10-15 ユーザー指示） */
.page-top .service-card__box { cursor: default; }
.page-top .service-card--soon .service-card__box { background: #f6f8f8; }
.page-top .service-card__soon-media {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  aspect-ratio: 303 / 215;
  color: #a3adb0;
  background: repeating-linear-gradient(-45deg, #edf0f1 0 10px, #f2f4f5 10px 20px);
  border-radius: 20px;
}
.page-top .service-card__soon-icon { width: clamp(36px, 13cqi, 52px); height: auto; }
.page-top .service-card__soon-name { font-size: clamp(16px, 6cqi, 22px); font-weight: 900; letter-spacing: 0.12em; }
.page-top .service-card__soon-label {
  margin-top: 4px;
  padding: 4px 14px;
  color: var(--white);
  background: #a3adb0;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: clamp(12px, 4.2cqi, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.page-top .service-card--soon .service-card__text { color: #8a9599; }
.page-top .service-card__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: contain;
}
/* 写真パララックス: 枠の形（写真 PNG の透過）をマスクとして固定し、中の写真だけを拡大して上下に動かす。
   --photo-mask と translate は top.js が設定 */
.page-top .service-card__photo-clip {
  display: block;
  -webkit-mask: var(--photo-mask, none) center / 100% 100% no-repeat;
  mask: var(--photo-mask, none) center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  /* スクロールにぴったり追従するとカクついて見えるので、少し遅れてふわっと追いつかせる */
  .page-top .service-card__photo-clip .service-card__photo {
    scale: 1.2;
    transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.page-top .service-card__text {
  margin: 20px 0 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.page-top .service-card__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 写真の角の切り欠きと一緒に伸縮させる（デザイン: 写真 303px に対し 40px） */
  width: calc(100% * 40 / 303);
  height: auto;
  pointer-events: none;
}
@media (hover: hover) {
  .page-top .service-card--esports a:hover { box-shadow: 0 0 0 3px #6d55ac; }
  .page-top .service-card--hado a:hover { box-shadow: 0 0 0 3px #005bc2; }
  .page-top .service-card--dfp a:hover { box-shadow: 0 0 0 3px #ed5d29; }
  .page-top .service-card--immersia a:hover { box-shadow: 0 0 0 3px #e579da; }
  .page-top .service-card--hotel a:hover { box-shadow: 0 0 0 3px #44bb2e; }
  .page-top .service-card--pochette a:hover { box-shadow: 0 0 0 3px #0066b1; }
}

/* CONTACT */
.figma-contact {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--section-jagged-h));
  padding: var(--section-jagged-h) 0 56px;
  background: var(--section-bg-contact);
  --section-jagged-fill: var(--section-bg-contact);
  overflow: visible;
}
/* Figma 259:339 Rectangle 1625（cream パネル）基準 — 259:340/395/579 */
.page-top .figma-contact__panel {
  overflow: visible;
}
/* Figma 259:339 Rectangle 1625 — 1046×255 基準 % + scale */
/* Figma書き出し: パネル左は封筒のみ。スライムはパネルに隠れる */
.page-top .figma-contact__slime--06,
.page-top .figma-contact__slime--03 {
  display: none;
}
.page-top .figma-contact__panel .figma-contact__mail {
  left: 6%;
  top: 50%;
  bottom: auto;
  width: clamp(64px, calc(100vw * 127 / 1366), 127px);
  transform: translateY(-50%);
  z-index: 4;
}
.page-top .figma-contact__iroha {
  left: calc((100% - min(100vw, 1366px)) / 2 + min(100vw, 1366px) * 1046 / 1366);
  top: calc(min(100vw, 1366px) * 180 / 1366);
  width: calc(min(100vw, 1366px) * 232 / 1366);
  z-index: 40;
}
.page-top .figma-contact__board {
  z-index: auto;
}
.page-top .figma-contact__jagged {
  z-index: 3;
  height: var(--section-jagged-h);
  /* ほかのセクションのギザギザと同じく 2px 下の地に重ねる（ぴったりだと画面幅によって細いすき間が見える） */
  transform: translate(-50%, calc(-100% + 2px));
}
.page-top .figma-contact .top-contact__marquee {
  position: relative;
  z-index: 90;
  /* 上のギザギザとの間に余白を取る（旧 -44） */
  margin-top: calc(min(100vw, 1366px) * -16 / 1366);
  margin-bottom: 0;
}
.page-top .figma-contact .top-contact__marquee-track {
  gap: 0;
  margin-left: 0;
  animation: top-contact-marquee 36s linear infinite;
  will-change: transform;
}
.page-top .figma-contact .top-contact__watermark {
  padding-right: 0.75em;
  font-size: calc(min(100vw, 1366px) * 110 / 1366);
  color: #dbf3f5;
}
.page-top .figma-contact .top-contact__watermark--clone { display: block; }
.page-top .figma-contact .top-contact__title {
  margin: calc(min(100vw, 1366px) * 6 / 1366) 0 calc(min(100vw, 1366px) * -47 / 1366);
  font-size: calc(min(100vw, 1366px) * 93.854 / 1366);
  line-height: 1;
}
.page-top .figma-contact__panel-inner {
  pointer-events: auto;
}
.page-top .figma-contact__board {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.page-top .figma-contact__board > .top-contact__title {
  position: relative;
  z-index: 6;
  margin: calc(min(100vw, 1366px) * 6 / 1366) 0 calc(min(100vw, 1366px) * -47 / 1366);
  text-align: center;
}
.page-top .figma-contact__panel .figma-char {
  z-index: 3;
}
.page-top .figma-contact__panel-inner,
.page-top .figma-contact__frame-74 {
  position: relative;
  z-index: 5;
}
@media (min-width: 1047px) {
  .page-top .figma-contact__panel {
    min-height: 255px;
  }
}
.figma-contact__wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.top-contact__marquee {
  width: 100%;
  margin: -6px 0 8px;
  overflow: hidden;
}
.top-contact__marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: top-contact-marquee 36s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .top-contact__marquee-track {
    animation: none;
  }
}
@keyframes top-contact-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.top-contact__watermark {
  flex-shrink: 0;
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(36px, 7.2vw, 110px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--teal-soft);
  white-space: nowrap;
}
.top-contact__watermark span { color: #ffeac9; }
.figma-contact__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  padding: 72px 24px 56px;
  text-align: center;
  background: var(--cream);
  border-radius: 999px;
}
.top-contact__title {
  font-family: Poppins, sans-serif;
  font-size: 94px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}
.top-contact__lead {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.figma-contact__frame-74 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.page-top .btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-width: 228px;
  min-height: 70px;
  padding: 0 30px;
  color: var(--white);
  background: var(--teal);
  border-radius: 40px;
  font-size: 20px;
  font-weight: 700;
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .btn-contact:hover {
  color: var(--white);
  background: var(--badge-dfp);
  opacity: 1;
}
.page-top .btn-contact__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.page-top .btn-contact__icon-wrap .btn-contact__icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 36px;
  height: 36px;
  transition: opacity .2s ease;
}
.page-top .btn-contact__icon--hover {
  opacity: 0;
}
.page-top .btn-contact:hover .btn-contact__icon:not(.btn-contact__icon--hover) {
  opacity: 0;
}
.page-top .btn-contact:hover .btn-contact__icon--hover {
  opacity: 1;
}

/* フッター上ギャラリー（横スクロール + 上白ギザ） */
.figma-footer-slider {
  position: relative;
  z-index: 6;
  margin-top: calc(-1 * var(--section-jagged-h));
  padding: calc(var(--section-jagged-h) + 16px) 0 0;
  background: var(--section-bg-gallery);
  --section-jagged-fill: var(--section-bg-gallery);
  overflow-x: clip;
}
.page-top .footer-gallery-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.page-top .footer-gallery-slider__jagged {
  position: relative;
  z-index: 3;
  display: block;
  width: max(100%, var(--jag-w));
  height: var(--section-jagged-h);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  object-fit: fill;
  pointer-events: none;
}
.page-top .footer-gallery-slider__jagged--top {
  margin-bottom: calc(-1 * var(--section-jagged-h));
  /* SVG 最上段は山頂の半端（y=0.1）で半透明になり、写真の上端が細い線として透ける。
     1px 上へずらして写真の上端を不透明な白で確実に覆う */
  translate: 0 -1px;
}
.page-top .footer-gallery-slider__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  background: var(--section-bg-gallery);
}
.page-top ul.footer-gallery-slider__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: footer-gallery-flow 44s linear infinite; /* 4枚。1枚あたりの速さは5枚・55s のときと同じ */
  will-change: transform;
}
.page-top li.footer-gallery-slider__slide {
  flex: 0 0 300px;
  width: 300px;
  height: 219px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-top .footer-gallery-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 写真パララックス: 各コマの枠は固定し、中の写真だけ拡大して上下に動かす（--gallery-shift は top.js が設定） */
@media (prefers-reduced-motion: no-preference) {
  .page-top li.footer-gallery-slider__slide { overflow: hidden; }
  .page-top .footer-gallery-slider__slide img {
    scale: 1.2;
    translate: 0 calc(var(--gallery-shift, 0) * 1px);
    /* service の写真と同じく、少し遅れてふわっと追いつかせる */
    transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* ロゴの入った画像（みずほポシェット）は拡大・上下移動で文字が切れるため、枠いっぱいに収めたまま動かさない */
  .page-top li.footer-gallery-slider__slide--fit img {
    scale: 1;
    translate: none;
  }
}
@keyframes footer-gallery-flow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-top .footer-gallery-slider__track {
    animation: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  .page-top li.footer-gallery-slider__slide {
    flex: 0 0 min(78vw, 340px);
    width: min(78vw, 340px);
    height: clamp(240px, 56vw, 320px);
  }
}

/* フッター（Figma 259:482 — 106px 左右 / 347+ナビ+182） */
.page-top .figma-footer.site-footer {
  position: relative;
  z-index: 7;
  margin-top: calc(-1 * var(--section-jagged-h));
  padding: calc(var(--section-jagged-h) + 29px) 0 16px;
  color: var(--white);
  background: var(--section-bg-footer);
  --section-jagged-fill: var(--section-bg-footer);
  overflow-x: clip;
}
.page-top .figma-footer .site-footer__inner,
.page-top .figma-footer .site-footer__copy,
.page-top .figma-footer .figma-footer__rule {
  box-sizing: border-box;
  /* ヘッダー同様、最大幅は設けずウィンドウ幅に追従（左右余白も比率で可変） */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--footer-x);
}
.page-top .figma-footer .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(220px, 347px) minmax(0, 1fr) 182px;
  gap: 0 32px;
  align-items: start;
}
.page-top .figma-footer .site-footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 100%;
}
.page-top .figma-footer .site-footer__brand-row {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page-top .figma-footer .site-footer__brand-row img {
  width: 90px;
  height: 80px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.page-top .figma-footer .site-footer__address {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--white);
}
.page-top .figma-footer .site-footer__address strong {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
}
.page-top .figma-footer .site-footer__social {
  margin-top: 0;
  width: 230px;
  max-width: 100%;
}
.page-top .figma-footer .site-footer__social-title {
  margin: 0 0 8px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.page-top .figma-footer .site-footer__social-list {
  gap: 10px;
}
.page-top .figma-footer .site-footer__social-list a {
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: inherit;
}
.page-top .figma-footer .site-footer__social-link {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 0;
  background: #fff;
  border-radius: 50%;
  transform-origin: center;
  transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .figma-footer .site-footer__social-link:hover {
  scale: 1.06;
  background: var(--badge-dfp);
}
@media (prefers-reduced-motion: reduce) {
  .page-top .figma-footer .site-footer__social-link {
    transition: none;
  }
  .page-top .figma-footer .site-footer__social-link:hover {
    transform: none;
  }
}
.page-top .figma-footer .site-footer__social-link img {
  display: block;
  width: 50px;
  height: 50px;
  filter: none;
  transition: filter .4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ホバーで背景がオレンジになったら、中のアイコンの線を白に（緑の SVG を白へ塗り替え） */
.page-top .figma-footer .site-footer__social-link:hover img {
  filter: brightness(0) invert(1);
}
.page-top .figma-footer .site-footer__social-link--linkedin {
  position: relative;
  width: 50px;
  height: 50px;
}
.page-top .figma-footer .site-footer__social-link--linkedin img:first-child {
  display: none;
}
.page-top .figma-footer .site-footer__social-link--linkedin img:last-child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.page-top .figma-footer .figma-footer__group-64 {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px 40px;
  /* PC: サイトマップは右寄せ（お問い合わせボタンの隣）に置く */
  justify-content: flex-end;
  padding-top: 31px;
}
.page-top .figma-footer .site-footer__nav-main.figma-footer__frame-66 {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
.page-top .figma-footer .site-footer__nav-main.figma-footer__frame-66 li + li {
  margin-top: 10px;
}
.page-top .figma-footer .figma-footer__group-63 {
  min-width: 140px;
}
.page-top .figma-footer .site-footer__nav-title {
  display: inline-block;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--white);
  text-decoration: none;
  transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .figma-footer .figma-footer__frame-76 {
  list-style: none;
  /* 見出し「事業紹介」と各事業リンクを離してタップしやすくする */
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.page-top .figma-footer .figma-footer__frame-76 li + li {
  margin-top: 5px;
}
.page-top .figma-footer .site-footer__privacy {
  flex: 1 0 100%;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.page-top .figma-footer .site-footer__nav a,
.page-top .figma-footer .figma-footer__frame-76 a {
  display: inline-block;
  color: var(--white);
  transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* フッターのテキストリンクは色・拡大を変えず、白を薄めるだけ */
.page-top .figma-footer .site-footer__nav a:hover,
.page-top .figma-footer .figma-footer__frame-76 a:hover,
.page-top .figma-footer .site-footer__nav-title:hover,
.page-top .figma-footer .site-footer__privacy:hover {
  opacity: .6;
}
.page-top .figma-footer .site-footer__privacy {
  display: inline-block;
  transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .figma-footer .site-footer__cta {
  display: flex;
  flex-direction: column;
  /* プライバシーポリシーはお問い合わせボタンの中央にそろえる */
  align-items: center;
  align-self: end;
  gap: 11px;
  width: 182px;
  padding-top: 0;
  text-align: center;
}
.page-top .figma-footer .site-footer__contact-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 182px;
  max-width: 100%;
  padding: 10px 20px;
  color: var(--teal);
  background: var(--white);
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .4s cubic-bezier(0.22, 1, 0.36, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-top .figma-footer .site-footer__contact-btn:hover {
  color: var(--white);
  background: var(--badge-dfp);
}
@media (prefers-reduced-motion: no-preference) {
  .page-top .figma-footer .site-footer__contact-btn {
    transform-origin: center;
    transition: scale .38s cubic-bezier(0.34, 1.4, 0.5, 1), color .4s cubic-bezier(0.22, 1, 0.36, 1), background-color .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .page-top .figma-footer .site-footer__contact-btn:hover {
    scale: 1.06;
  }
}
.page-top .figma-footer .site-footer__contact-label {
  flex: 0 1 auto;
}
/* 矢印はボタン右端に寄せる（文字は中央のまま）。[空き | 文字 | 矢印] の 3 列にして、
   PC の幅の狭いボタン（182px〜）でも全幅のボタンでも文字と矢印が重ならないようにする */
.page-top .figma-footer .site-footer__contact-btn {
  display: inline-grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-width: max-content;
  padding-inline: 12px;
}
.page-top .figma-footer .site-footer__contact-label { grid-column: 2; }
.page-top .figma-footer .site-footer__contact-icon-wrap {
  position: relative;
  grid-column: 3;
  width: 36px;
  height: 36px;
}
/* PC（フッターが横並び）ではボタンは幅 182px の小さなボタンなので、元どおり「文字＋矢印」を中央に並べる。
   3 列にすると幅が広がって隣のサイトマップにくっつくため */
@media (min-width: 1101px) {
  .page-top .figma-footer .site-footer__contact-btn {
    display: inline-flex;
    justify-content: center;
    gap: 10px;
    min-width: 182px;
    padding-inline: 20px;
  }
}
.page-top .figma-footer .site-footer__contact-icon-wrap .site-footer__contact-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 36px;
  height: 36px;
  filter: none;
  transition: opacity .2s ease;
}
.page-top .figma-footer .site-footer__contact-icon--hover {
  opacity: 0;
}
.page-top .figma-footer .site-footer__contact-btn:hover .site-footer__contact-icon:not(.site-footer__contact-icon--hover) {
  opacity: 0;
}
.page-top .figma-footer .site-footer__contact-btn:hover .site-footer__contact-icon--hover {
  opacity: 1;
}
.page-top .figma-footer .site-footer__privacy {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
}
.page-top .figma-footer .figma-footer__rule {
  height: 0;
  margin-block: 24px 8px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  width: auto;
  max-width: none;
  margin-inline: var(--footer-x);
  padding-inline: 0;
}
.page-top .figma-footer .site-footer__copy {
  margin: 0 auto;
  padding-bottom: 8px;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 400;
  text-align: right;
}
.page-top .figma-footer .site-footer__copy small {
  display: block;
  margin-top: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: var(--white);
}
.page-top .figma-footer p {
  color: var(--white);
}
.page-top .figma-footer {
  position: relative;
  overflow: visible;
  z-index: 6;
}
.page-top .site-footer--full img.figma-footer__iroha {
  left: 1.2%;
  top: calc(min(100vw, 1366px) * -168 / 1366);
  width: calc(min(100vw, 1366px) * 148 / 1366);
  height: auto;
  z-index: 40;
  filter: none;
  pointer-events: none;
}

.section-vertical-title-wrap {
  flex: 0 0 94px;
  width: 94px;
  align-self: flex-start;
}
.section-vertical-title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(32px, 4.8vw + 28px, 94px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* vertical-rl: width = column (block), height = inline flow — not the reverse */
  width: 94px;
  height: auto;
}

@media (max-width: 1100px) {
  .page-top {
    --kv-x: 24px;
    --body-x: 24px;
    --footer-x: max(24px, 6vw);
    /* ヘッダーはコンテンツ幅（左右24px）より広く取る */
    --header-logo-inset: 16px;
    overflow-x: clip;
  }
  .page-top .figma-footer-slider > .section-jagged-top { display: none; }
  .page-top .figma-footer-slider { margin-top: 0; padding-top: 0; }
  .page-top .figma-header.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
  }
  .page-top .figma-footer .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .page-top .figma-footer .site-footer__brand-block {
    display: contents;
  }
  /* タブレット以下: ロゴ・住所 → SNS → 区切り線 → サイトマップ → 100%幅お問い合わせ → プラポリ中央 */
  .page-top .figma-footer .site-footer__brand-row { order: 1; }
  .page-top .figma-footer .site-footer__social {
    order: 2;
    width: auto;
    margin-top: 0;
  }
  .page-top .figma-footer .site-footer__nav {
    order: 3;
    align-self: stretch;
    justify-content: flex-start;
    margin-left: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    gap: 40px;
    /* サイトマップは等幅2列（事業紹介が塊の中央から始まる）で左に偏らせない */
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .page-top .figma-footer .site-footer__cta {
    order: 4;
    flex: 0 0 auto;
    margin-left: 0;
    align-self: stretch;
    align-items: stretch;
    width: auto;
    margin-top: 0;
    text-align: center;
  }
  .page-top .figma-footer .site-footer__contact-btn { min-width: 0; width: 100%; }
  .page-top .figma-footer .site-footer__contact-btn:hover { scale: 1.02; }
  .page-top .figma-footer .site-footer__privacy { align-self: center; }
  .page-top .figma-footer .site-footer__nav a,
  .page-top .figma-footer .figma-footer__frame-76 a { white-space: nowrap; }
  .page-top .figma-second__sparks-g26 { display: none; }
  .page-top .figma-second__frame-30 { padding-right: 0; padding-bottom: 0; }
  .page-top .figma-second__slime04 { display: none; }
  .page-top .figma-second__hex {
    /* 上へずらすと、KV との境目のギザギザの谷（写真が見えている部分）に六角形がのぞくので、セクションの上端から始める */
    top: 0;
    width: min(1560px, 400vw);
    left: -4%;
  }
  .page-top .figma-news__diamonds--left {
    left: 0;
    right: auto;
    top: 0;
    width: clamp(220px, 42vw, 420px);
  }
  .page-top .figma-news__diamonds--right {
    left: auto;
    right: 0;
    top: auto;
    bottom: 8px;
    width: clamp(180px, 34vw, 360px);
  }
  .page-top .figma-service__bubbles--left {
    left: -10%;
    top: 4%;
    width: clamp(280px, 58vw, 640px);
  }
  .page-top .figma-service__bubbles--right {
    left: auto;
    right: -8%;
    top: auto;
    bottom: 0;
    width: clamp(260px, 52vw, 600px);
  }
  .page-top .figma-service__slime--01 { left: auto; right: 8px; top: 0; width: 96px; }
  /* 01（右 8〜104px）のすぐ左隣。伸び縮みしても重ならない程度に 12px あける（01 は横揺れなし） */
  .page-top .figma-service__slime--02 { left: auto; right: 116px; top: 24px; width: 84px; }
  .page-top .figma-service__group-75 { margin-top: 0; padding-top: 28px; }
  .page-top .figma-contact__iroha {
    left: auto;
    right: 4%;
    top: 28%;
    bottom: auto;
    width: min(168px, 28vw);
  }
  .page-top .figma-contact__panel .figma-contact__mail {
    left: 4%;
    top: 50%;
    bottom: auto;
    /* テキスト塊（約340px・中央寄せ）の左余白いっぱいまで封筒を拡大。16px は文字との最低間隔 */
    width: clamp(96px, calc((100% - 340px) / 2 - 4% - 16px), 170px);
    transform: translateY(-50%);
  }
  .page-top .figma-footer.site-footer { overflow: visible; }
  /* タブレット（721〜1100px）: 721px で約 150px → 1100px で約 120px（PC の 148/1366vw につながる）。
     足元がフッターのギザギザに少しかかる位置に立たせる */
  .page-top .figma-footer__iroha,
  .page-top .site-footer--full img.figma-footer__iroha {
    --footer-iroha-w: calc(150px - (100vw - 720px) * 0.08);
    left: auto;
    right: 8px;
    top: calc(var(--footer-iroha-w) * -1.38 + 14px);
    width: var(--footer-iroha-w);
    display: block;
  }
  .figma-second__frame-31 { flex-direction: column; align-items: stretch; gap: 16px; }
  .figma-second__frame-30 { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .figma-second__frame-11 { width: 100%; }
  .page-top .figma-second__link.link-circle-arrow,
  .page-top .figma-second__link-arrow { width: 72px; height: 72px; }
  .page-top .top-service__heading { font-size: clamp(48px, 8vw, 72px); }
  .page-top .figma-contact__board > .top-contact__title {
    margin-top: 8px;
    margin-bottom: -36px;
    font-size: clamp(40px, 8vw, 72px);
  }
  .page-top .figma-contact__panel { padding: 64px 20px 40px; border-radius: 999px; }
  .figma-news { padding-bottom: 96px; }
  .figma-news__frame-62 { flex-direction: column; gap: 12px; margin-top: 28px; padding-inline: 0; }
  .figma-news__group-59 { margin-left: 0; margin-top: 48px; }
  .figma-service__group-75 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  /* タブレット以下: カードだけを 1 つのグリッドにまとめ、全部の行を同じ高さにする（見出し・文章の行は伸ばさない） */
  .figma-service__frame-84 {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: inherit;
    grid-auto-rows: 1fr;
    gap: inherit;
  }
  .page-top .top-service__slime { display: none; }
  .figma-service__frame-73 { display: contents; }
  .figma-service__frame-73 .top-service__heading,
  .figma-service__frame-73 .top-service__lead { grid-column: 1 / -1; grid-row: auto; }
  .figma-service__frame-73 .top-service__lead { margin-top: -20px; align-self: auto; }
  .figma-service__frame-73 .figma-service__group-60 {
    order: 1;
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: auto;
    justify-self: center;
    margin-top: 8px;
  }
  .service-card--esports,
  .service-card--hado,
  .service-card--dfp,
  .service-card--immersia,
  .service-card--hotel,
  .service-card--pochette {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }
  .section-vertical-title-wrap {
    flex: 0 0 auto;
    width: auto;
  }
  .section-vertical-title {
    writing-mode: horizontal-tb;
    transform: none;
    width: auto;
    height: auto;
  }
}

@media (max-width: 900px) {
  .page-top .figma-header {
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-top .figma-header > .top-shell.figma-header__inner {
    padding-right: var(--header-logo-inset);
    min-height: 100px;
    align-items: center;
  }
  .page-top .global-nav .contact-link {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 56px;
    margin: auto 0 0;
    padding: 10px 16px 10px 24px;
    border-radius: 40px;
    justify-content: space-between;
  }
  .page-top .global-nav .contact-link:hover {
    background: var(--badge-dfp);
  }
  .page-top .figma-header .brand img {
    width: 68px;
    height: auto;
  }
  .page-top .kv-slider__jagged--top {
    z-index: 4;
    transform: translate(-50%, -2px);
    fill: var(--section-bg-kv);
  }
  .page-top .figma-contact .top-contact__marquee {
    margin-top: 4px;
    margin-bottom: 8px;
  }
/* contact の星（タブレット 721〜900px・IROHA あり）: PC と同じく「タイトル左右の上」と「パネル下側」に散らし、
     大きさは画面幅に合わせて可変。IROHA・メール・本文・ボタン（ホバーで出るスライム含む）に重ならない位置 */
  .page-top .figma-spark--contact-379 { left: 4%; top: calc(var(--section-jagged-h) + 72px); width: 7vw; }
  .page-top .figma-spark--contact-380 { left: 20%; top: calc(var(--section-jagged-h) + 88px); width: 4vw; }
  .page-top .figma-spark--contact-381 { left: 28%; top: calc(var(--section-jagged-h) + 342px); width: 3.6vw; }
  .page-top .figma-spark--contact-377 { left: 69.5%; top: calc(var(--section-jagged-h) + 104px); width: 2.6vw; }
  .page-top .figma-spark--contact-378 { left: 80%; top: calc(var(--section-jagged-h) + 342px); width: 4.2vw; }
  .page-top .figma-spark--contact-376 { left: 88%; top: calc(var(--section-jagged-h) + 56px); width: 6vw; }
  .page-top .figma-contact .top-contact__watermark {
    white-space: nowrap;
    font-size: clamp(56px, 15vw, 88px);
  }
  .page-top .service-card a,
  .page-top .service-card__box { min-height: 0; }
  .figma-contact__panel { border-radius: 999px; }
  .top-contact__title { font-size: 56px; }
}

/* 狭い幅: 文字を読めるサイズにし、キャラは写真側へ下ろして被らせない */
@media (max-width: 720px) {
  .page-top { --header-logo-inset: 10px; }
  .page-top .figma-footer.site-footer {
    overflow: visible;
    padding-top: calc(var(--section-jagged-h) + 8px);
  }
  .page-top .figma-footer .site-footer__inner {
    padding-top: 12px;
  }
  .page-top .figma-footer .site-footer__nav { gap: 28px; }
  /* コピーライトの行を TOP ボタン（下 14px＋高さ 66px）が収まる高さにして、ボタンの中心と文字の高さをそろえる。
     一番下までスクロールしたとき、TOP ボタンがお問い合わせボタンやプライバシーポリシーに重ならない */
  .page-top .figma-footer .site-footer__copy {
    /* フッター下の余白 16px＋下 22px＋文字の半分 ≒ ボタンの中心（下 14px＋66px の半分）。上 30px でボタンが罫線から離れる */
    padding-block: 30px 22px;
    text-align: left;
  }
  /* スマホ: 画面幅の 26%（最大 150px でタブレットにつながる）。足元はフッターのギザギザに少しかかる位置 */
  .page-top .figma-footer__iroha,
  .page-top .site-footer--full img.figma-footer__iroha {
    --footer-iroha-w: min(26vw, 150px);
    top: calc(var(--footer-iroha-w) * -1.38 + 10px);
    right: 0;
    bottom: auto;
    width: var(--footer-iroha-w);
    z-index: 40;
  }
  .figma-kv__stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    container-type: inline-size;
    height: auto;
  }
  .figma-kv__copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px 16px;
  }
  .page-top .figma-kv__group-12 {
    flex: none;
    width: 74vw;
    margin-bottom: 14vw;
    overflow: visible;
  }
  .figma-kv__deco--slime06 svg,
  .figma-kv__deco--slime02 svg {
    width: 100%;
    height: auto;
  }
  .figma-kv__deco--178 { left: 42%; top: 40%; width: 11%; z-index: 6; }
  .figma-kv__frame-78 { width: 100%; }
  .figma-kv__art { display: block; z-index: 1; }
  .figma-kv__deco--171 { left: auto; right: 10px; top: 6px; width: 54px; }
  .figma-kv__deco--173 { left: auto; right: 28px; top: 72px; width: 62px; }
  .figma-kv__deco--172 { left: auto; right: 8px; top: 148px; width: 30px; }
  .figma-kv__deco--174 { left: auto; right: 16px; top: 210px; width: 36px; }
  .figma-kv__deco--179 { left: auto; right: 70px; top: 168px; width: 26px; }
  .figma-kv__deco--176 { left: 6px; top: 2px; width: 28px; }
  .figma-kv__deco--175 { left: 4px; top: 168px; width: 32px; }
  .figma-kv__photo-slider {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    margin-top: 0;
  }
  .figma-kv__photo-slider .kv-slider__viewport,
  .page-top .kv-slider__track {
    height: calc(82vw * 724 / 1126);
  }
  .page-top .kv-slider__slide {
    flex: 0 0 82vw;
    width: 82vw;
    height: calc(82vw * 724 / 1126);
  }
  .page-top .kv-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .top-hero__lead { font-size: clamp(13px, 4.05vw, 20px); line-height: 1.6; }
  .top-hero__en { margin-top: 8px; font-size: clamp(12px, 3.3vw, 16px); }
  .figma-service__group-75 { grid-template-columns: 1fr; }
  .figma-news {
    --iroha-w: 28vw;
    --iroha-badge-w: 120px;
  }
  .page-top .figma-second__iroha-badge {
    right: max(8px, calc(8px + (var(--iroha-w) - var(--iroha-badge-w)) / 2));
  }
  .page-top .figma-second__iroha { z-index: 6; }
  .page-top .figma-contact { padding-bottom: 20px; }
  .page-top .figma-contact__board > .top-contact__title {
    margin-top: 0;
    margin-bottom: -28px;
    font-size: 60px;
    line-height: 1;
  }
  .page-top .figma-contact__panel {
    box-sizing: border-box;
    width: 100%;
    border-radius: 70px;
    min-height: 192px;
    padding: 40px 16px 22px;
  }
  .page-top .figma-contact__iroha {
    display: none;
  }
  .page-top .figma-contact__panel .figma-contact__mail {
    left: 8px;
    top: auto;
    bottom: 22px;
    /* 可変: ボタン（182px・中央）の左に収まる幅と、テキスト（約272px・中央）の左に収まる幅の小さい方。
       80px 以下なら高さ的にテキスト行より下（ボタン横）に収まるので 80px までは許容 */
    width: clamp(40px, min(calc((100% - 182px) / 2 - 24px), max(80px, calc((100% - 272px) / 2 - 24px))), 130px);
    transform: none;
  }
  .page-top .figma-contact__frame-74 {
    padding-inline: 0;
    gap: 22px;
    text-align: center;
  }
  .page-top .top-contact__lead {
    margin: 0;
    /* 長い方の行「フォームよりお問い合わせください。」（17 文字）が 1 行に収まる大きさ。最大 16px、狭い画面では縮める
       （文字が入る幅は画面幅 − 80px。320px 幅で約 13.8px） */
    font-size: min(16px, (100vw - 80px) / 17.4);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  .page-top .figma-contact .btn-contact {
    box-sizing: border-box;
    width: 182px;
    min-width: 182px;
    height: auto;
    min-height: 0;
    padding: 10px 20px;
    gap: 10px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    justify-content: center;
  }
  .page-top li.footer-gallery-slider__slide {
    height: 42vw;
  }
}
/* 幅の狭いスマホでは KV の本文が星の位置まで広がるので、本文にかかる星をずらす／隠す（テキスト優先） */
@media (max-width: 420px) {
  .figma-kv__deco--175,
  .figma-kv__deco--179 { display: none; }
  .figma-kv__deco--174 { top: 226px; }
}
@media (max-width: 340px) {
  .figma-kv__deco--172 { display: none; }
}

/* 359px 以下はボタン横に封筒を置く余白が無く文字に被るため非表示（360px 以上は可変サイズで 16px 以上の隙間を確保） */
@media (max-width: 359px) {
  .page-top .figma-contact__panel .figma-contact__mail { display: none; }
}

/* 見出しの 1 文字ずつ登場（top.js splitHeadingChars が .heading-char に分割）。
   見出し全体のポップは止めて、文字単位で下から跳ねて出す */
.heading-char { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .figma-second.is-in .section-vertical-title.heading-split,
  .figma-news.is-in .section-vertical-title-wrap:has(> .heading-split),
  .figma-service.is-in .top-service__heading.heading-split,
  .figma-contact.is-in .top-contact__title.heading-split {
    animation: none;
  }
  .heading-split .heading-char {
    opacity: 0;
    transform-origin: 50% 100%;
  }
  /* 縦書き（180° 回転）は文字の下端が要素座標の左側になる */
  .heading-split[data-axis="v"] .heading-char { transform-origin: 0% 50%; }
  .is-in .heading-split .heading-char {
    animation: heading-char-hop 0.72s cubic-bezier(0.25, 0.8, 0.35, 1) calc(0.05s + var(--ci) * 0.065s) both;
  }
  .is-in .heading-split[data-axis="v"] .heading-char { animation-name: heading-char-hop-v; }
}
@keyframes heading-char-hop {
  0% { opacity: 0; transform: translateY(70%) scale(0.7, 1.3); }
  34% { opacity: 1; transform: translateY(-26%) scale(0.9, 1.12); }
  54% { transform: translateY(4%) scale(1.16, 0.84); }
  72% { transform: translateY(-8%) scale(0.97, 1.04); }
  87% { transform: translateY(0) scale(1.02, 0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes heading-char-hop-v {
  0% { opacity: 0; transform: translateX(-70%) scale(1.3, 0.7); }
  34% { opacity: 1; transform: translateX(26%) scale(1.12, 0.9); }
  54% { transform: translateX(-4%) scale(0.84, 1.16); }
  72% { transform: translateX(8%) scale(1.04, 0.97); }
  87% { transform: translateX(0) scale(0.98, 1.02); }
  100% { opacity: 1; transform: none; }
}

/* お問い合わせボタン: ホバーで右端の裏からスライムがひょこっと顔を出す（components/chrome.js の .btn-contact-peek）。
   スライムはボタンの下の層に隠しておき、translate / rotate の個別プロパティで横に顔を出す */
.btn-contact-peek {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.btn-contact-peek > .btn-contact {
  position: relative;
  z-index: 1;
}
.btn-contact-peek__slime {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 0;
  width: 66px;
  height: auto;
  translate: 0 -46%;
  rotate: 0deg;
  transition:
    translate .26s cubic-bezier(0.5, 0, 0.75, 0),
    rotate .26s ease-in;
}
.btn-contact-peek:hover .btn-contact-peek__slime,
.btn-contact-peek:focus-within .btn-contact-peek__slime {
  /* ボタン（ホバーで 1.06 倍に拡大）に重ならないところまで横に出てくる */
  translate: 92px -62%;
  rotate: 14deg;
  transition:
    translate .56s cubic-bezier(0.34, 1.56, 0.64, 1),
    rotate .7s cubic-bezier(0.34, 1.9, 0.6, 1);
}
/* ボタンの登場アニメーション中はボタンが縮んでいてスライムがはみ出すので、登場し終わるまで隠す */
.figma-contact:not(.is-in) .btn-contact-peek__slime { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .figma-contact.is-in .btn-contact-peek__slime { animation: btn-peek-wait 1.1s step-end both; }
}
@keyframes btn-peek-wait {
  from { visibility: hidden; }
  to { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-contact-peek__slime { display: none; }
}
/* タブレットの狭いほう（IROHA がパネル右に立つ幅）: ボタンから横に出るスライムと重ならないよう、
   IROHA は高さはそのまま（英文・タイトルに掛けない）、少し小さくして右へ寄せる */
@media (min-width: 721px) and (max-width: 860px) {
  .page-top .figma-contact__iroha { right: 1%; width: min(136px, 18vw); }
}
@media (max-width: 720px) {
  .btn-contact-peek__slime { right: 8px; width: 50px; }
  .btn-contact-peek:hover .btn-contact-peek__slime,
  .btn-contact-peek:focus-within .btn-contact-peek__slime { translate: 68px -60%; }
}

/* contact の星（スマホ 720px 以下・IROHA なし）: タイトル「contact」（幅約 240px・中央）の左右に 2 つずつ、
   ボタンの左隣と右下に 1 つずつ。タイトル・本文・メール・ボタン（ホバーで出るスライム含む）に重ならないよう
   タイトル／ボタンの端を基準に置き、大きさは画面幅に合わせて可変（小さくなりすぎないよう下限あり） */
@media (max-width: 720px) {
  .page-top .figma-spark--contact-379 { left: auto; right: calc(50% + 132px); top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) - 16px); width: clamp(34px, 8vw, 52px); }
  .page-top .figma-spark--contact-380 { left: auto; right: calc(50% + 128px); top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) + 30px); width: clamp(20px, 4.6vw, 30px); }
  .page-top .figma-spark--contact-376 { left: calc(50% + 132px); right: auto; top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) - 16px); width: clamp(30px, 7vw, 48px); }
  .page-top .figma-spark--contact-377 { left: calc(50% + 128px); right: auto; top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) + 30px); width: clamp(16px, 3.6vw, 26px); }
  .page-top .figma-spark--contact-381 { left: auto; right: calc(50% + 105px); top: auto; bottom: 60px; width: clamp(18px, 4vw, 28px); }
  .page-top .figma-spark--contact-378 { left: auto; right: 7%; top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) + 226px); width: clamp(18px, 4vw, 28px); }
}
/* 361〜500px はメールのイラストがボタンのすぐ左まで来るので、ボタン左隣の星はメールの下（パネル左下）へ */
@media (min-width: 361px) and (max-width: 500px) {
  .page-top .figma-spark--contact-381 { left: 9%; right: auto; top: calc(var(--section-jagged-h) + clamp(56px, 15vw, 88px) + 226px); bottom: auto; }
}
/* 「ニュース一覧を見る」「事業紹介ページへ」: 上下にも押せる範囲を広げる */
.page-top .figma-news .news-more,
.page-top .figma-service .news-more { padding-block: 6px; }

/* フッターのサイトマップ（スマホ）: 行の間隔を広げて、指で押せる範囲を 40px 前後に */
@media (max-width: 720px) {
  .page-top .figma-footer .site-footer__nav-main.figma-footer__frame-66 a,
  .page-top .figma-footer .figma-footer__frame-76 a {
    display: inline-block;
    padding-block: 8px;
  }
  .page-top .figma-footer .site-footer__nav-main.figma-footer__frame-66 li + li,
  .page-top .figma-footer .figma-footer__frame-76 li + li { margin-top: 0; }
  .page-top .figma-footer .figma-footer__frame-76 { margin-top: 4px; }
  .page-top .figma-footer .figma-footer__frame-76 a { padding-block: 10px; }
  .page-top .figma-footer .site-footer__nav-title { padding-block: 8px; }
}

/* PC（フッター横並び）: フッターの右端を右下の TOP ボタン（右 24px＋幅 80px）より内側に収め、
   お問い合わせ・プライバシーポリシー・コピーライト・罫線がボタンの下に隠れないようにする（右余白を最低 120px） */
@media (min-width: 1101px) {
  .page-top .figma-footer .site-footer__inner,
  .page-top .figma-footer .site-footer__copy { padding-right: max(var(--footer-x), 120px); }
  .page-top .figma-footer .figma-footer__rule { margin-right: max(var(--footer-x), 120px); }
}

/* 下層ページ: 流れる英文は contact パネルの下（components/chrome.js が .figma-contact--sub を付けて移動） */
.page-top .figma-contact--sub .top-contact__marquee {
  margin-top: calc(min(100vw, 1366px) * 40 / 1366 + 16px);
  margin-bottom: 0;
}
.page-top .figma-contact--sub .figma-contact__board > .top-contact__title {
  margin-top: calc(min(100vw, 1366px) * 40 / 1366 + 8px);
}
/* 英文の下はすぐギャラリーなので、セクション下の余白（通常 56px）を詰める。
   ギャラリーはギザギザの分だけ上に重なる（z-index: 6）ので、contact を上に出して英文の下端を覆わせない */
.page-top .figma-contact--sub { z-index: 7; padding-bottom: 12px; }
/* 英文を下へ移してタイトル・パネルが上がった分（--sub-shift は chrome.js が測る）だけ、星も上げてテキストに重ねない */
.figma-contact--sub .figma-spark { margin-top: calc(-1 * var(--sub-shift, 0px)); }
/* 下層の流れる英文は出現アニメーションなしで常に表示 */

/* contact の星の「中央から広がる」動き（top.js mountContactStarSpread）。スクロールにぴったり追従させず、少し遅れてさーっと追いつかせる */
@media (prefers-reduced-motion: no-preference) {
  .figma-contact .figma-spark {
    transition: translate .7s cubic-bezier(0.22, 1, 0.36, 1), scale .7s cubic-bezier(0.22, 1, 0.36, 1), rotate .7s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* contact の重なり順: パネルの背景 < 星 < テキスト・ボタン < IROHA。
   星は中央から広がる途中でテキストの上を通るので、テキストを優先して星を下にくぐらせる。
   装飾レイヤー・board・パネルを重なりの基準（スタッキングコンテキスト）にしないことで、
   星（3）をパネルの背景の上、テキスト（board 内の title 6・panel-inner 5）の下に差し込む */
.page-top .figma-contact__art,
.page-top .figma-contact__board,
.page-top .figma-contact__panel { z-index: auto; }
.page-top .figma-contact .figma-spark { z-index: 3; }
/* contact の星は存在感を出すため、配置はそのままに全体を大きく（広がる動きの最終サイズもこの倍率。動きを減らす設定でも効く） */
.figma-contact .figma-spark { --star-size: 1.4; scale: var(--star-size); }
.page-top .figma-contact .top-contact__title { position: relative; z-index: 6; }

/* タッチ端末で押したとき（site.js が is-tapped を付与）は、PC のホバーと同じ見た目を色の切り替えアニメーションなしで即座に出す */
.is-tapped,
.is-tapped rect,
.is-tapped .btn-contact__icon,
.is-tapped .news-more__icon { transition-duration: 0s !important; }
.page-top .btn-contact.is-tapped,
.page-top-btn.is-tapped,
.page-top .figma-footer .site-footer__social-link.is-tapped,
.page-top .figma-footer .site-footer__contact-btn.is-tapped,
.page-top .global-nav .contact-link.is-tapped,
.menu-button.is-tapped { color: var(--white); background: var(--badge-dfp); }
.page-top .btn-contact.is-tapped .btn-contact__icon:not(.btn-contact__icon--hover) { opacity: 0; }
.page-top .btn-contact.is-tapped .btn-contact__icon--hover { opacity: 1; }
.sub-crumb a.is-tapped,
.news-more.is-tapped,
.biz-place__link.is-tapped,
.global-nav > a:not(.contact-link).is-tapped { color: var(--badge-dfp); }
.news-more.is-tapped .news-more__icon rect,
.home-news-list a.is-tapped .news-row-arrow rect,
.page-top .figma-second__link.link-circle-arrow.is-tapped .figma-second__link-arrow rect { fill: var(--badge-dfp); }
.page-top .service-card--esports a.is-tapped { box-shadow: 0 0 0 3px #6d55ac; }
.page-top .service-card--hado a.is-tapped { box-shadow: 0 0 0 3px #005bc2; }
.page-top .service-card--dfp a.is-tapped { box-shadow: 0 0 0 3px #ed5d29; }
.page-top .service-card--immersia a.is-tapped { box-shadow: 0 0 0 3px #e579da; }
.page-top .service-card--hotel a.is-tapped { box-shadow: 0 0 0 3px #44bb2e; }
.page-top .service-card--pochette a.is-tapped { box-shadow: 0 0 0 3px #0066b1; }

/* TOP のキャラ（.page-top .figma-char は pointer-events: none）でも、スライムはクリック／タップで反応させる（site.js mountSlimeLife） */
.page-top .slime-svg.is-interactive { pointer-events: auto; }

/* スマホのヘッダーは低めに（白い帯の余白を詰めて、画面の上を広く使う）。
   ロゴ・メニューボタンを小さくし、メニューを開いたときのロゴ・×ボタンの位置もヘッダーにそろえる */
@media (max-width: 600px) {
  :root { --header-height: 64px; }
  .page-top .figma-header { min-height: 64px; }
  .page-top .figma-header > .top-shell.figma-header__inner { min-height: 64px; }
  .page-top .figma-header .brand img { width: 54px; }
  .page-top .global-nav { padding-top: 8px; }
  .page-top .global-nav__head { min-height: 48px; }
  .page-top .global-nav__brand img { width: 54px; }
  .page-top .menu-button { width: 48px; height: 48px; }
  .page-top .menu-button span:not(.sr-only) { left: 13px; right: 13px; }
  .page-top .menu-button span:nth-child(1) { translate: 0 -7px; }
  .page-top .menu-button span:nth-child(3) { translate: 0 7px; }
  .page-top .menu-button[aria-expanded="true"] span:nth-child(1),
  .page-top .menu-button[aria-expanded="true"] span:nth-child(3) { translate: 0 0; }
}

/* ニュースの行（スマホ）: サムネイルを小さくし、矢印は隠す（行全体が押せる） */
@media (max-width: 720px) {
  .page-top .home-news-list a,
  .page-top .news-page-list a {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 8px;
  }
  .page-top .home-news-list .news-row-arrow { display: none; }
  .news-row__body { gap: 6px; }
  .news-row__meta { gap: 6px 8px; }
  .home-news-list time { font-size: 13px; }
  .news-cat { padding: 2px 8px; font-size: 11px; }
  .home-news-list strong { font-size: 14px; -webkit-line-clamp: 3; }
}