@charset "UTF-8";
/* ==========================================================================
   ユニプレkids  共通スタイル
   ・パソコン／タブレット（751px以上）：横幅980px未満は横スクロール（元サイトと同じ）
   ・スマホ（750px以下）：スマホ専用レイアウト
   ========================================================================== */

/* 英数字・記号（半角）専用：BIZ UDPゴシックを90%の大きさで使う（元フォントの英数字の幅に近づけるため） */
@font-face {
  font-family: "UDP Latin";
  src: url("https://fonts.gstatic.com/s/bizudpgothic/v16/hES36X5pHAIBjmS84VL0Bue87nIGQEsPQAg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E; size-adjust: 90%;
}
@font-face {
  font-family: "UDP Latin";
  src: url("https://fonts.gstatic.com/s/bizudpgothic/v16/hESq6X5pHAIBjmS84VL0Bue85skjVWYtTSJBWQs.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E; size-adjust: 90%;
}

:root {
  /* 本文フォント：元サイトの「UD角ゴ ラージ」は日本語が全角の等幅、英数字はプロポーショナルで細め。
     日本語は等幅の BIZ UDゴシック、英数字・記号（半角）だけ BIZ UDPゴシック（90%）で表示して、
     文字幅と改行位置を元サイトに合わせています */
  --font: "M PLUS 1p", "UD角ゴ_ラージ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --c-text: #323232;
  --c-text2: #3b3b3b;
  --c-dark: #282626;
  --c-title: #fe6060;
  --c-nav: #fc6040;
  --c-cta: #fd6049;
  --c-faq: #ff8878;
  --c-pill-border: #ffb0a1;
  --c-ft-orange: #fea857;
  --c-ft-red: #fe6060;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 980px;
  font-family: var(--font);
  color: var(--c-text);
  background: transparent;
  overflow-x: auto;
}
img, svg, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   背景動画
   -------------------------------------------------------------------------- */
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #fff; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.site-header { position: relative; background: rgba(255, 255, 255, .9); }

.hd-top { position: relative; height: 209px; background: #fff; overflow: hidden; }
.hd-top__bg { position: absolute; inset: 0; opacity: .1; }

.hd-chara { position: absolute; }
.hd-chara img { width: 100%; height: 100%; object-fit: cover; }
.hd-chara--1 { left: calc(13.82% - 118px); top: 107px; width: 89px;  height: 107px; }
.hd-chara--2 { left: calc(13.82% - 8px);   top: 64px;  width: 126px; height: 151px; }
.hd-chara--3 { right: calc(13.82% - 3px);  top: 63px;  width: 126px; height: 153px; }
.hd-chara--4 { right: calc(13.82% - 119px); top: 89px; width: 106px; height: 128px; }
.tilt-clip { width: 100%; height: 100%; }

.hd-catch {
  position: absolute; left: 0; right: 0; top: 51px;
  font-size: 14px; line-height: 19.6px; letter-spacing: .05em;
  text-align: center; color: var(--c-text); font-weight: 400;
}
.hd-logo { position: absolute; top: 81px; left: calc(50% - 195px); width: 390px; height: 78px; }
.hd-logo img { width: 100%; height: 100%; }

.hd-nav { height: 83px; background: var(--c-nav); }
.hd-nav ul { display: flex; justify-content: center; gap: 20px; padding-top: 20px; }

/* 丸いボタン（ヘッダー・フッター共通） */
.btn-pill {
  display: flex; align-items: center; justify-content: center;
  height: 42px;
  border: 3px solid var(--c-pill-border);
  border-radius: 50px;
  background-color: #fff;
  color: var(--c-text2);
  font-size: 12px; line-height: 1.4;
  white-space: nowrap;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.btn-pill:hover { background-color: rgba(50, 50, 50, 0); color: #fff; }
.btn-pill--ft { width: 201px; height: 42px; font-size: 14px; }
.btn-pill--ft:hover { border-color: #fff; }

/* --------------------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------------------- */
.hero { position: relative; background: #fff; padding: 22px 34px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; opacity: .22; }
.hero__img { position: relative; width: 100%; height: auto; aspect-ratio: 1372 / 772; object-fit: cover; }

/* --------------------------------------------------------------------------
   スライドショー
   -------------------------------------------------------------------------- */
.slider { position: relative; height: 815px; overflow: hidden; }
.slider__track { position: absolute; inset: 0; }
.slider__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.445, .05, .55, .95);
}
.slider__img.is-active { opacity: 1; z-index: 1; }
.slider__img.is-leaving { opacity: 0; z-index: 2; }
.slider__count {
  position: absolute; top: 9px; right: 10px; z-index: 3;
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: var(--c-text2);
}
.slider__frame { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slider__title {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 87px; line-height: 1.4; font-weight: 700; color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------------------
   お電話・施設バナー
   -------------------------------------------------------------------------- */
.cta { background: var(--c-cta); padding: 59px 0 56px; color: #fff; text-align: center; overflow: hidden; }
.cta__lead, .cta__hours { font-size: 16px; line-height: 22.4px; letter-spacing: .05em; }
.cta__tel { display: flex; justify-content: center; align-items: center; gap: 30px; height: 84px; margin-top: 14.6px; }
.cta__tel-icon svg { width: 79px; height: 59px; }
.cta__tel-num { font-size: 60px; line-height: 84px; font-weight: 700; color: #fff; }
.cta__hours { margin-top: 21px; }

.facility-banners { margin: 17.6px 49px 0; }
/* 動くのは中のリンク（li 自体は動かさない：画面に入ったかの判定を本来の位置で行うため） */
.facility-banners__item > a {
  display: block;
  transform: translateY(100px);
  transition: transform .8s cubic-bezier(.13, .78, .53, .92);
}
.facility-banners__item.is-in > a { transform: translateY(0); }
.facility-banners__item img { width: 100%; height: auto; aspect-ratio: 1342 / 322; object-fit: cover; }

/* --------------------------------------------------------------------------
   見出しまわり共通
   -------------------------------------------------------------------------- */
.sec-title { font-size: 40px; line-height: 56px; font-weight: 700; color: var(--c-title); text-align: center; }
.sec-sub { font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center; }
.sec-text { font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center; }
.sec-text p + p { margin-top: 22.4px; }
.sec-icon svg, .sec-icon img { width: 100%; height: 100%; }
.rubber { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   ここから始まる未来へのAction
   -------------------------------------------------------------------------- */
.action { position: relative; height: 897px; background: #fff; overflow: hidden; }
.action__inner { position: absolute; top: 0; left: 50%; width: 1440px; height: 100%; margin-left: -720px; }
.action__inner > * { position: absolute; }
.action__icon { left: 695px; top: 66px; width: 49px; height: 88px; }
.action__title { left: 0; right: 0; top: 186px; letter-spacing: .05em; }
.action__text { left: 355px; width: 728px; top: 280px; color: var(--c-text); }
.act-ico--art    { left: 77px;   top: 676px; width: 153px; height: 153px; }
.act-ico--hado   { left: 254px;  top: 432px; width: 127px; height: 127px; }
.act-ico--typing { left: 454px;  top: 604px; width: 153px; height: 153px; }
.act-girl        { left: 469px;  top: 560px; width: 841px; height: 337px; object-fit: cover; }
.act-ico--esports{ left: 730px;  top: 473px; width: 133px; height: 133px; }
.act-ico--pc     { left: 1196px; top: 400px; width: 167px; height: 167px; }
.act-ico { transform: rotate(var(--rz, 0deg)); }

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */
.insta { position: relative; height: 842px; background: #fff; }
.insta__icon { position: absolute; top: 80px; left: calc(50% - 34px); width: 68px; height: 68px; }
.insta__icon img { width: 100%; height: 100%; }
.insta__title { position: absolute; top: 157px; left: 0; right: 0; }
.insta__sub { position: absolute; top: 225px; left: 0; right: 0; }
.insta__text { position: absolute; top: 295px; left: 0; right: 0; }
.insta__feed { position: absolute; top: 440px; left: 30px; right: 30px; height: 400px; }

/* --------------------------------------------------------------------------
   Main Menu
   -------------------------------------------------------------------------- */
.menu-sec { position: relative; background: rgba(255, 255, 255, .9); padding: 50px 0 83px; }
.menu-sec__icon { width: 74px; height: 56px; margin: 0 auto; }
.menu-sec__title { margin-top: 21px; }
.menu-sec__sub { margin-top: 12px; }
.menu-sec__text { width: 865px; margin: 52.6px auto 0; }

.mcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, 327px);
  justify-content: center;
  gap: 30px;
  margin: 79.6px 21px 0;
}
.mcard {
  position: relative; width: 327px; height: 461px;
  border-radius: 15px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 9px rgba(0, 0, 0, .51);
  transition: all .4s ease-in-out, visibility 0s;
}
.mcard:hover { z-index: 1; }
.mcard__link { position: absolute; inset: 0; display: block; }
.mcard__img { position: absolute; top: 14px; left: -6px; width: 333px; height: 449px; object-fit: cover; }
.mcard__veil {
  position: absolute; top: 14px; left: -6px; width: 333px; height: 456px;
  background: rgba(255, 255, 255, .8);
  transition: background-color .4s ease-in-out;
}
.mcard__badge {
  position: absolute; left: 72px; top: 147px; width: 183px; height: 183px;
  transition: transform .2s ease-out;
}
.mcard__more {
  position: absolute; left: 28px; top: 421px; width: 151px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #fff; color: #fff; background-color: rgba(50, 50, 50, 0);
  font-size: 14px; line-height: 1.4;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease-in-out, visibility .4s, background-color .4s ease, color .4s ease;
}
.mcard:hover .mcard__veil { background-color: rgba(255, 255, 255, 0); }
.mcard:hover .mcard__badge { transform: translate(70px, 131px); }
.mcard:hover .mcard__more { opacity: 1; visibility: visible; }
.mcard__more:hover { background-color: #fff; color: var(--c-dark); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { position: relative; background: var(--c-faq); padding: 76px 0 168px; color: #fff; }
.faq::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 100 1920 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M1914.392 288.326c-110.231-4.798-134.428-121.68-301.124-121.68s-190.894 116.883-301.124 121.68h-15.779c-132.623-3.764-163.287-72.283-366.071-72.283s-233.445 68.519-366.071 72.283h-8.154C384.543 282.678 408.027 100 281.156 100c-123.98 0-102.173 182.678-274.845 188.326H0V300h1920v-11.674h-5.608z'/%3E%3C/svg%3E") 50% 100% / 25% 100% repeat-x;
  pointer-events: none;
}
.faq__icon { width: 59px; height: 64px; margin: 0 auto; }
.faq__title { color: #fff; margin-top: 14px; }
.faq__sub { margin-top: 11px; font-size: 14px; line-height: 19.6px; text-align: center; }

.faq__box { position: relative; z-index: 1; width: 980px; margin: 56.4px auto 0; background: #fff; padding: 20px 32px 32px; color: var(--c-text2); }
.faq__item { border-bottom: 1px solid #999997; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 38.5px 0; text-align: left;
}
.faq__q h3 { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--c-text2); }
.faq__icon-pm { position: relative; flex: none; width: 24px; height: 24px; color: var(--c-text2); }
.faq__icon-pm::before, .faq__icon-pm::after {
  content: ""; position: absolute; background: currentColor;
  left: 5px; top: 12px; width: 15px; height: 1px;
}
.faq__icon-pm::after { left: 12px; top: 5px; width: 1px; height: 15px; transition: opacity .2s; }
.faq__item.is-open .faq__icon-pm::after { opacity: 0; }
.faq__a {
  height: 0; overflow: hidden;
  transition: height .4s ease;
}
.faq__item.is-open .faq__a { height: auto; }
/* 回答は引き上げず（1行目が切れるため）、開いたときに質問の下余白を詰めて同じ位置にする */
.faq__a-in { padding: 0 0 48px; font-size: 15px; line-height: 27px; }
.faq__q { transition: padding .4s ease; }
.faq__item.is-open .faq__q { padding-bottom: 27.5px; }
.faq__a-in p.tight { line-height: 27px; }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-footer { position: relative; background: rgba(255, 255, 255, .9); padding-top: 80px; height: 587px; color: var(--c-dark); }
.ft-boxes { display: flex; width: max(980px, calc(100% - 160px)); height: 404px; margin: 0 auto; }
.ft-info { position: relative; flex: 1; background: var(--c-ft-orange); }
.ft-info > * { position: absolute; left: calc(43% - 150px); }
.ft-info__logo { top: 85px; width: 316px; height: 61px; }
.ft-info__logo img { width: 100%; height: 100%; }
.ft-info__company { top: 178px; font-size: 16px; line-height: 24px; }
.ft-info__name { font-weight: 400; }
.ft-info__company a { text-decoration: underline; }
.ft-info__line { top: 252px; left: calc(43% - 160px); width: 64.5%; height: 0; border-top: 1px solid #424242; }
.ft-info__mail { top: 263px; font-size: 20px; line-height: 28px; letter-spacing: .02em; }
.ft-info__sns { top: 310px; left: calc(43% - 160px); display: flex; align-items: center; gap: 11px; }
.ft-info__sns img { width: 37px; height: 37px; }
.ft-info__ig-icon img { width: 34px; height: 34px; }

.ft-nav {
  flex: 1; background: var(--c-ft-red);
  display: grid; grid-template-rows: repeat(5, 42px); grid-auto-flow: column;
  grid-auto-columns: 201px; column-gap: 21px; row-gap: 14px;
  justify-content: center; align-content: start; padding-top: 75px;
}
.ft-copy { display: flex; justify-content: center; gap: 28px; margin-top: 36px; font-size: 12px; line-height: 18px; }
.ft-copy span { letter-spacing: .02em; }
.ft-copy h1 { font-size: 12px; line-height: 18px; font-weight: 400; }

/* スマホのみの部品はパソコンでは隠す */
.sp-br { display: none; }
.sp-toggle, .sp-menu, .to-top { display: none; }

/* ==========================================================================
   アニメーション（元サイトの動きをそのまま再現）
   .anim が画面に入ると .is-in が付いて再生されます
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .anim { animation-play-state: paused !important; }
  .anim.is-in { animation-play-state: running !important; }

  /* ふわっと浮き上がる（Float In） */
  .a-float { animation: var(--dur, 1200ms) cubic-bezier(.445, .05, .55, .95) var(--d, 1ms) 1 normal backwards m-floatIn; }

  /* ふわっと表示＋拡大（Expand In） */
  .a-expand { animation: 1200ms linear var(--d, 1ms) 1 normal backwards m-fadeIn, 1200ms cubic-bezier(.645, .045, .355, 1) var(--d, 1ms) 1 normal backwards m-expandIn; }

  /* 上を軸に起き上がる（Fold In） */
  .a-fold { animation: 1200ms cubic-bezier(.25, .46, .45, .94) var(--d, 1ms) 1 normal backwards m-fadeIn, 1200ms cubic-bezier(.175, .885, .32, 1.275) var(--d, 1ms) 1 normal backwards m-foldIn; }

  /* 見出しアイコン：起き上がり＋ぷるぷる */
  .a-fold-rubber { animation: 1200ms cubic-bezier(.25, .46, .45, .94) 1ms 1 normal backwards m-fadeIn, 1200ms cubic-bezier(.175, .885, .32, 1.275) 1ms 1 normal backwards m-foldIn; }
  .a-fold-rubber .rubber,
  .a-fade-rubber .rubber { animation: 3000ms linear 1ms infinite m-rubber; animation-play-state: paused; }
  .a-fold-rubber.is-in .rubber,
  .a-fade-rubber.is-in .rubber { animation-play-state: running; }
  .a-fade-rubber { animation: 1200ms cubic-bezier(.445, .05, .55, .95) 1ms 1 normal backwards m-fadeIn; }

  /* ヘッダーのキャラクター：傾きながら登場＋ゆらゆら */
  .a-tilt { animation: 240ms cubic-bezier(.215, .61, .355, 1) var(--d) 1 normal backwards m-fadeIn, 1200ms cubic-bezier(.215, .61, .355, 1) var(--d) 1 normal backwards m-tiltInRotate; }
  .a-tilt .tilt-clip { animation: 960ms cubic-bezier(.215, .61, .355, 1) var(--d) 1 normal backwards m-tiltInClip; animation-play-state: paused; }
  .a-tilt.is-in .tilt-clip { animation-play-state: running; }
  .a-tilt .jello { animation: 2000ms linear 1ms infinite m-jello; animation-play-state: paused; }
  .a-tilt.is-in .jello { animation-play-state: running; }

  /* 回転しながら飛んでくる（Spin In） */
  .a-circle { animation: 1200ms cubic-bezier(.075, .82, .165, 1) var(--d, 1ms) 1 normal backwards m-circleXIn, 1200ms linear var(--d, 1ms) 1 normal backwards m-circleYIn; }

  /* 線が左から伸びる（Reveal） */
  .a-reveal { animation: 1200ms cubic-bezier(.645, .045, .355, 1) 1ms 1 normal backwards m-revealIn; }
}

@keyframes m-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes m-floatIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 60px)); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes m-expandIn {
  0.0001% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes m-foldIn {
  0.0001% { transform: translate(0%, -50%) perspective(800px) rotateX(-90deg) translate(0%, 50%); }
  100% { transform: translate(0%, -50%) perspective(800px) rotateX(0deg) translate(0%, 50%); }
}
@keyframes m-rubber {
  14.85% { transform: scale(1.08, .88); }
  18.48% { transform: scale(.875, 1.055); }
  21.78% { transform: scale(1.07, .91); }
  25.74% { transform: scale(.955, 1.045); }
  29.37% { transform: scale(1.055, .9495); }
  33% { transform: scale(1, 1); }
}
@keyframes m-jello {
  12% { transform: skewY(7deg); }
  19% { transform: skewY(-2deg); }
  29% { transform: skewY(4deg); }
  40% { transform: skewY(-2deg); }
  50% { transform: skewY(0deg); }
}
@keyframes m-tiltInRotate {
  0% { animation-timing-function: step-end; transform: perspective(800px); }
  0.0001% { transform: perspective(800px) translateZ(calc(var(--h, 120px) / -2)) rotateX(-90deg) translateZ(calc(var(--h, 120px) / 2)); }
  100% { transform: perspective(800px) translateZ(calc(var(--h, 120px) / -2)) rotateX(0deg) translateZ(calc(var(--h, 120px) / 2)); }
}
@keyframes m-tiltInClip {
  0.0001% { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transform: rotateZ(30deg); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: rotateZ(0deg); }
}
@keyframes m-circleXIn {
  0.0001% { translate: var(--mtx, 100vw); }
  100% { translate: 0px; }
}
@keyframes m-circleYIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 0; transform: translateY(-300px) rotate(calc(var(--rz, 0deg) + var(--mrz, 45deg))); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rz, 0deg)); }
}
@keyframes m-revealIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 1; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
.hd-chara--1 { --h: 107px; } .hd-chara--2 { --h: 151px; } .hd-chara--3 { --h: 153px; } .hd-chara--4 { --h: 128px; }
.a-reveal { padding: 3px 0; }

/* ==========================================================================
   スマホ（750px以下）
   ========================================================================== */
@media (max-width: 750px) {
  body { min-width: 0; overflow-x: hidden; }

  /* ヘッダー */
  .site-header { background: rgba(255, 255, 255, .9); }
  .hd-top { height: 105px; background: transparent; }
  .hd-top__bg, .hd-chara, .hd-nav { display: none; }
  .hd-logo { left: 20px; top: 24px; width: 213px; height: 42px; }
  .hd-catch { left: 20px; right: auto; top: 76px; font-size: 10px; line-height: 10px; letter-spacing: .05em; text-align: left; }

  /* ハンバーガー */
  .sp-toggle {
    display: block; position: fixed; z-index: 50; top: 24px; right: 20px;
    width: 50px; height: 50px; border-radius: 10px; background: #fff;
  }
  .sp-toggle span { position: absolute; left: 14px; width: 22px; height: 3px; background: #ff4f4f; }
  .sp-toggle span:nth-child(1) { top: 16px; }
  .sp-toggle span:nth-child(2) { top: 24px; }
  .sp-toggle span:nth-child(3) { top: 32px; }

  /* overflow:hidden … 閉じたメニューが画面の右外にあるせいでページ幅が広がらないように */
  html { overflow-x: hidden; }
  .sp-menu { display: block; position: fixed; inset: 0; z-index: 100; visibility: hidden; overflow: hidden; }
  .sp-menu.is-open { visibility: visible; }
  .sp-menu__overlay { position: absolute; inset: 0; background: rgba(59, 59, 59, .6); opacity: 0; transition: opacity .6s ease; }
  .sp-menu.is-open .sp-menu__overlay { opacity: 1; }
  .sp-menu__panel {
    position: absolute; top: 0; right: 0; bottom: 0; left: 35px;
    background: var(--c-ft-red); overflow-y: auto;
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(.19, 1, .22, 1);
  }
  .sp-menu.is-open .sp-menu__panel { transform: translateX(0); }
  .sp-menu__close { position: absolute; top: 34px; right: 24px; width: 32px; height: 32px; }
  .sp-menu__close::before, .sp-menu__close::after {
    content: ""; position: absolute; left: 4px; top: 15px; width: 24px; height: 3px; background: #fff;
  }
  .sp-menu__close::before { transform: rotate(45deg); }
  .sp-menu__close::after { transform: rotate(-45deg); }
  .sp-menu__list { padding: 56px 0 40px 31px; width: 191px; }
  .sp-menu__list > li > a, .sp-menu__row > a { display: flex; align-items: center; height: 56px; font-size: 14px; color: #fff; }
  .sp-menu__list a.is-current { color: #faffbf; }
  .sp-menu__row { display: flex; align-items: center; justify-content: space-between; }
  .sp-menu__sub-btn { position: relative; width: 40px; height: 56px; }
  .sp-menu__sub-btn::before {
    content: ""; position: absolute; left: 15px; top: 22px; width: 8px; height: 8px;
    border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg);
    transition: transform .3s;
  }
  .has-sub.is-open .sp-menu__sub-btn::before { transform: rotate(-135deg); top: 26px; }
  .sp-menu__sub { display: none; padding-left: 14px; }
  .has-sub.is-open .sp-menu__sub { display: block; }
  .sp-menu__sub a { display: flex; align-items: center; height: 44px; font-size: 13px; color: #fff; }
  .sp-menu__sns { position: absolute; top: 102px; right: 26px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .sp-menu__sns img { width: 28px; height: 28px; }

  /* トップへ戻る */
  .to-top {
    display: block; position: fixed; z-index: 40; right: 5px; bottom: 10px;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 2px solid var(--c-title);
  }
  .to-top::before {
    content: ""; position: absolute; left: 14px; top: 17px; width: 12px; height: 12px;
    border-left: 2px solid var(--c-title); border-top: 2px solid var(--c-title); transform: rotate(45deg);
  }

  /* メインビジュアル */
  .hero { padding: 15px 10px; }

  /* スライドショー */
  .slider { height: 68.44vw; }
  .slider__title { font-size: 27px; }

  /* CTA */
  /* 下端は白い弧（元サイトのスマホ版は施設バナーの下に弧の区切りがある） */
  .cta { position: relative; padding: 27px 0 68px; }
  .cta::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 91 1920 209' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M1920 291C1656.8 169.2 1323.3 91 960 91S262.5 169.2 0 291v9h1920v-9z'/%3E%3C/svg%3E") 50% 100% / 100% 100% no-repeat;
  }
  .cta__lead { width: 186px; margin: 0 auto; font-size: 12px; line-height: 15px; letter-spacing: .05em; }
  .cta__tel { gap: 11px; height: 30px; margin-top: 12px; }
  .cta__tel-icon svg { width: 40px; height: 30px; }
  .cta__tel-num { font-size: 26px; line-height: 30px; }
  .cta__hours { margin-top: 15px; font-size: 12px; line-height: 15px; }
  .facility-banners { margin: 23px 0 0; padding-bottom: 3px; }

  /* 見出し共通 */
  .sec-title { font-size: 22px; line-height: 27px; }
  .sec-sub { font-size: 10px; line-height: 10px; }
  .sec-text { font-size: 12px; line-height: 15.5px; text-align: left; }
  .sec-text p + p { margin-top: 15.5px; }
  /* 行の間隔は元サイトの実測値 */
  .insta__text, .menu-sec__text { line-height: 19.2px; }
  .menu-sec__text p + p { margin-top: 19.2px; }

  /* Action */
  .action { height: 469px; overflow: visible; overflow-x: clip; }
  .action__inner { left: 0; width: 100%; margin-left: 0; }
  .action__icon { left: calc(50% - 15px); top: -16px; width: 29px; height: 44px; z-index: 2; }
  .action__title { top: 48px; left: 32px; right: 32px; letter-spacing: .05em; }
  .action__text { left: 20px; right: 20px; width: auto; top: 131px; font-size: 11px; line-height: 18.6px; color: var(--c-text); }
  .action__text p + p { margin-top: 18.6px; }
  .act-ico--art    { left: 19px;  top: 386px; width: 55px; height: 55px; }
  .act-ico--typing { left: 78px;  top: 337px; width: 59px; height: 59px; }
  .act-ico--hado   { left: 136px; top: 284px; width: 67px; height: 67px; }
  .act-girl        { left: 56px;  top: 335px; width: 289px; height: 116px; }
  .act-ico--pc     { left: 22px;  top: 280px; width: 64px; height: 64px; }
  .act-ico--esports{ left: 246px; top: 269px; width: 58px; height: 58px; }

  /* Instagram */
  .insta { height: 715px; }
  .insta__icon { top: 46px; left: calc(50% - 20px); width: 40px; height: 40px; }
  .insta__title { top: 91px; }
  .insta__sub { top: 127px; }
  .insta__text { top: 164px; left: 18px; right: 18px; }
  .insta__text p + p { margin-top: 19.2px; }
  .insta__feed { top: 306px; left: 0; right: 0; height: 400px; }

  /* Main Menu */
  .menu-sec { padding: 5px 0 50px; }
  .menu-sec__icon { position: relative; width: 41px; height: 31px; }
  .menu-sec__title { margin-top: 12px; }
  .menu-sec__sub { margin-top: 4px; }
  .menu-sec__text { width: auto; margin: 24px 18px 0; }
  .mcards { grid-template-columns: repeat(2, 147px); gap: 15px 7px; margin: 30px 0 0; }
  .mcard { width: 147px; height: 188px; }
  .mcard__img, .mcard__veil { top: 9px; left: 0; width: 147px; height: 179px; }
  .mcard__badge { left: 62px; top: 102px; width: 79px; height: 79px; }
  .mcard__more { display: none; }
  .mcard:hover .mcard__badge { transform: none; }
  .mcard:hover .mcard__veil { background-color: rgba(255, 255, 255, .8); }

  /* FAQ */
  .faq { padding: 30px 0 34px; }
  .faq::after { height: 30px; }
  .faq__icon { width: 60px; height: 39px; }
  .faq__title { margin-top: 14px; }
  .faq__sub { margin-top: 10px; font-size: 10px; line-height: 10px; }
  .faq__box { width: auto; margin: 23px 15px 0; padding: 2px 13px 0; }
  /* 質問文の幅と「＋」の位置は元サイトの実測値（改行位置を合わせるため） */
  .faq__q { padding: 21px 0; gap: 0; align-items: flex-start; }
  .faq__q h3 { flex: 0 0 244.5px; font-size: 13px; line-height: 16px; }
  .faq__icon-pm { width: 20px; height: 20px; }
  .faq__icon-pm::before { left: 3px; top: 10px; width: 14px; }
  .faq__icon-pm::after { left: 10px; top: 3px; height: 14px; }
  .faq__a-in { font-size: 10px; line-height: 15px; padding-bottom: 36px; margin-top: -4px; }
  .faq__a-in p.tight { line-height: 11px; }

  /* フッター */
  .site-footer { height: auto; padding: 0 0 14px; }
  .ft-boxes { display: block; width: 100%; height: auto; }
  .ft-info { height: 220px; text-align: center; }
  .ft-info > * { left: 0; right: 0; }
  .ft-info__logo { top: 40px; left: calc(50% - 107px); right: auto; width: 214px; height: 42px; }
  .ft-info__company { top: 102px; font-size: 11px; line-height: 17px; }
  .ft-info__line, .ft-info__sns { display: none; }
  .ft-info__mail { top: 168px; font-size: 15px; line-height: 21px; }
  .ft-nav {
    height: 270px;
    grid-template-columns: repeat(2, 137px); grid-template-rows: none; grid-auto-flow: row;
    grid-auto-columns: auto; grid-auto-rows: 35px;
    column-gap: 9px; row-gap: 10px;
  }
  .ft-nav .btn-pill { order: var(--o); }
  .btn-pill--ft { width: 137px; height: 35px; font-size: 11.9px; }
  .ft-copy { flex-direction: column; align-items: center; gap: 7px; margin-top: 16px; font-size: 9px; line-height: 9px; }
  .ft-copy h1 { font-size: 9px; line-height: 9px; }
}

/* ==========================================================================
   スマホの見やすさ調整（元サイトから意図的に変えている部分）
   ※ スマホは 320px 幅で組んだ画面を端末幅に拡大表示（各ページ head のスクリプト）
   ========================================================================== */
@media (max-width: 750px) {
  .sp-br { display: inline; }

  /* メニュー：赤い枠を細く、文字を大きく */
  .sp-menu__panel { left: 90px; }
  .sp-menu__list { padding: 56px 0 40px 26px; width: 150px; }
  .sp-menu__list > li > a, .sp-menu__row > a { font-size: 16px; }
  .sp-menu__sub { width: 190px; padding-left: 12px; }
  .sp-menu__sub a { font-size: 14px; }
  .sp-menu__sns { right: 20px; }

  /* 電話番号を大きく */
  .cta__tel { gap: 10px; height: 36px; }
  .cta__tel-icon svg { width: 44px; height: 33px; }
  .cta__tel-num { font-size: 31px; line-height: 36px; }

  /* 見出しを大きく・説明文は中央寄せ（改行は <br class="sp-br"> で指定） */
  .sec-title { font-size: 26px; line-height: 32px; }
  .sec-sub { font-size: 11px; line-height: 12px; }
  .sec-text, .insta__text, .menu-sec__text { font-size: 12px; line-height: 20px; text-align: center; }
  .sec-text p + p, .insta__text p + p, .menu-sec__text p + p { margin-top: 20px; }

  /* Action：見出しと説明文の間を詰め、アイコンは元サイトの配置（説明文が長くなった分だけ下へ） */
  .action { height: 535px; }
  .action__title { top: 44px; left: 16px; right: 16px; font-size: 22px; line-height: 28px; }
  .action__text { top: 112px; left: 16px; right: 16px; font-size: 12px; line-height: 20px; }
  .action__text p + p { margin-top: 20px; }
  .act-ico--art     { left: 19px;    top: 443px;   width: 55px; height: 55px; }
  .act-ico--hado    { left: 141.8px; top: 346.8px; width: 55.3px; height: 55.3px; --rz: 13.86deg !important; }
  .act-ico--typing  { left: 82.9px;  top: 398.9px; width: 49.2px; height: 49.2px; --rz: -12.95deg !important; }
  .act-girl         { left: 56px;    top: 392px;   width: 289px; height: 116px; }
  .act-ico--esports { left: 245.5px; top: 325.5px; width: 58px; height: 58px; }
  .act-ico--pc      { left: 24.4px;  top: 338.4px; width: 60.3px; height: 60.3px; }

  /* Instagram */
  .insta { height: 750px; }
  .insta__title { top: 91px; }
  .insta__sub { top: 131px; }
  .insta__text { top: 160px; left: 16px; right: 16px; }
  .insta__feed { top: 340px; }

  /* Main Menu：説明文の幅を絞り、カードを大きく */
  .menu-sec__text { margin: 24px 16px 0; }
  .mcards { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; margin: 30px 8px 0; }
  .mcard { width: auto; height: auto; aspect-ratio: 147 / 188; }
  .mcard__img, .mcard__veil { top: 4.8%; left: 0; width: 100%; height: 95.2%; }
  .mcard__badge { left: 34%; top: 48%; width: 64%; height: auto; aspect-ratio: 1 / 1; }

  /* FAQ：回答の1行目が切れないように・回答文を少し大きく */
  .faq__item.is-open .faq__q { padding-bottom: 17px; }
  .faq__a-in { margin-top: 0; font-size: 11px; line-height: 17px; }
  .faq__a-in p.tight { line-height: 13px; }

  /* FAQ：スマホは下の波線なし（元サイトと同じ） */
  .faq { padding-bottom: 30px; }
  .faq::after { display: none; }

  /* フッター：ボタンは赤い枠の上から 27px（パソコン用の上余白を打ち消す） */
  .ft-nav { padding-top: 27px; align-content: start; }

  /* フッター：文字を少し大きく */
  .ft-info__company { top: 100px; font-size: 12px; line-height: 18px; }
  .ft-info__mail { font-size: 16px; line-height: 22px; }
  .btn-pill--ft { font-size: 12px; }
  .ft-copy, .ft-copy h1 { font-size: 10px; line-height: 11px; }
}

/* --------------------------------------------------------------------------
   区切りの細い線（背景が透けて見える隙間）を消す
   ・スマホは画面を拡大表示するため、境目が端数の位置になり 1px 未満の隙間が出やすい
   -------------------------------------------------------------------------- */
.faq::after { bottom: -1px; }
@media (max-width: 750px) {
  main > * + *, main + .site-footer { margin-top: -1px; }
  .cta::after { bottom: -1px; }
}

/* 電話番号はどこでも太字 */
.tel-num, a[href^="tel:"] { font-weight: 700; }
/* トップの「週休3日制」画像は採用情報へのリンク */
.hero__link { position: relative; display: block; }

/* 文章の中の電話番号リンク（赤・押すと電話） */
.tel-link { color: var(--c-title); text-decoration: underline; text-underline-offset: 2px; }

/* Instagram の投稿一覧：LightWidget が自動で高さを変えるので、枠の高さを固定せず中身に合わせる
   （固定の高さのままだと、下の「Main Menu」と重なってしまうため） */
.insta { height: auto; padding: 440px 30px 40px; }
.insta__feed { position: relative; top: auto; left: auto; right: auto; width: min(1240px, 95%); height: auto; min-height: 200px; margin: 0 auto; }
@media (max-width: 750px) {
  .insta { height: auto; padding: 304px 0 30px; }
  .insta__feed { width: auto; margin: 0 18px; }
  /* アイコン上の余白を詰める（見出し・説明文も同じだけ上へ） */
  .insta__icon { top: 10px; }
  .insta__title { top: 55px; }
  .insta__sub { top: 95px; }
  .insta__text { top: 124px; }
}