/* =====================================================
   BLACK PEPPERS LP  –  LP Stylesheet
   Version : 1.0.4
   Updated : 2026-04-07
   Changes :
     1.0.0 – 新規作成（全コンテンツ縦長 LP 統合テーマ）
     1.0.1 – SP 右端切れ・ヘッダー右寄り・バーガー非表示 修正
     1.0.2 – SP コンテンツ右寄り修正（.lp-page overflow-x:hidden 追加）
     1.0.3 – バーガーボタン・動画セルにホバーバウンドアニメーション追加
     1.0.4 – バウンドアニメーション5件の調整・バグ修正
     1.0.5 – 実績YTアイコン消失修正・ヘッダー非表示時の当たり判定修正
     1.0.6 – SP お問い合わせフォームのエラーメッセージ表示修正
   ===================================================== */

/* =====================================================
   BASE RESET
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  LP は常時スクロール有効。
  --cw: PC = 1168:755 比率、SP = 100vw に統一
*/
html {
  --cw: min(100vw, calc(100vh * 1168 / 755));
  height: auto;
  overflow: auto;
  overflow-x: hidden;
  background: #3d3324;
}

body {
  height: auto;
  overflow: visible;
  overflow-x: hidden;
  background: #3d3324;
}

img {
  display: block;
  max-width: 100%;
}

a { display: block; }

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* =====================================================
   GLOBAL BACKGROUND
   position:fixed でスクロール中もビューポートをカバー
   ===================================================== */
.lp-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}
.lp-bg--sp { display: none; }

/* =====================================================
   LP PAGE WRAPPER & SECTIONS
   ===================================================== */
.lp-page {
  position: relative;
  z-index: 2;
}

.lp-section {
  position: relative;
}

/* HERO: フルビューポート高さ */
.lp-hero {
  height: 100vh;
  overflow: hidden;
}

/* WHAT'S NEW: PC でフルビューポート高さ */
.lp-whats {
  height: 100vh;
  overflow: hidden;
}

/* CONCEPT / ACHIEVEMENTS / VIDEO: コンテンツ高さに追従 */
.lp-concept,
.lp-achievements,
.lp-video {
  overflow: visible;
}

/* CREATOR: PC でスクロール余白 */
.lp-creator {
  overflow: visible;
}

/* CONTACT: PC でスクロール余白 */
.lp-contact {
  overflow: visible;
}

/* =====================================================
   HEADER  ─ 常時 position:fixed
   ===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cw);
  z-index: 50;
  pointer-events: none;
}

.site-header__bg,
.site-header__logo,
.site-header__logo-kana {
  transition: opacity 0.35s ease-out;
}

/* bg_header: left:0 top:0  w:618.5 h:160 */
.site-header__bg {
  position: absolute;
  left: 0; top: 0;
  width: 52.95%;
  aspect-ratio: 618.5 / 160;
  object-fit: fill;
}

/* logo: left:45 top:18  w:401.5 h:134.5 */
.site-header__logo {
  position: absolute;
  left: 3.85%;
  top: calc(var(--cw) * 18 / 1168);
  width: 34.38%;
  aspect-ratio: 401.5 / 134.5;
  pointer-events: all;
}
.site-header__logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* logo_kana: left:367 top:79  w:212.5 h:50.5 */
.site-header__logo-kana {
  position: absolute;
  left: 31.42%;
  top: calc(var(--cw) * 79 / 1168);
  width: 18.19%;
  aspect-ratio: 212.5 / 50.5;
  object-fit: contain;
  object-position: left top;
}

/* menu: left:1052 top:14  w:97.5 h:93 */
.site-header__menu-btn {
  position: absolute;
  left: 90.07%;
  top: calc(var(--cw) * 14 / 1168);
  width: 8.35%;
  aspect-ratio: 97.5 / 93;
  pointer-events: all;
}
.site-header__menu-btn img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* =====================================================
   NAVIGATION MENU  ─ 常時 position:fixed
   ===================================================== */
.nav-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--cw);
  height: min(100vh, calc(100vw * 755 / 1168));
  z-index: 32;
  display: none;
  pointer-events: none;
}
.nav-menu.is-open {
  display: block;
  pointer-events: all;
  animation: anim-fadein 0.3s ease-out both;
}
.nav-menu.is-closing {
  display: block;
  pointer-events: none;
  animation: anim-fadeout 0.3s ease-out forwards;
}

/* bg_menu: left:792 top:33 w:345.5 h:643 */
.nav-menu__bg {
  position: absolute;
  left: 67.81%;
  top: 4.37%;
  width: 29.58%;
  height: 85.16%;
  object-fit: fill;
}

.nav-item {
  position: absolute;
  display: block;
  overflow: visible;
}
.nav-item__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.nav-item__active {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 2;
  max-width: none;
  width: calc(var(--cw) * 295 / 1168);
  height: calc(var(--cw) * 295 / 1168 * 131 / 590);
}
.nav-item:hover .nav-item__active {
  display: block;
}

/* HOME: left:824 top:52 w:134.5 h:45.5 */
.nav-item--home {
  left: 70.55%; top: 6.89%;
  width: 11.52%; height: 6.02%;
}
.nav-item--home .nav-item__active {
  left: -5.95%; top: -23.08%;
}

/* WHAT'S NEW!: left:822 top:113 w:265 h:44.5 */
.nav-item--whats {
  left: 70.38%; top: 14.97%;
  width: 22.69%; height: 5.89%;
}
.nav-item--whats .nav-item__active {
  left: -3.02%; top: -21.35%;
}

/* CONCEPT: left:821 top:181 w:192 h:39.5 */
.nav-item--concept {
  left: 70.29%; top: 23.97%;
  width: 16.44%; height: 5.23%;
}
.nav-item--concept .nav-item__active {
  left: -4.17%; top: -31.65%;
}

/* ACHIEVEMENTS: left:815 top:243 w:276.5 h:46.5 */
.nav-item--achievements {
  left: 69.78%; top: 32.19%;
  width: 23.67%; height: 6.16%;
}
.nav-item--achievements .nav-item__active {
  left: -2.17%; top: -22.58%;
}

/* VIDEO: left:813 top:313 w:154 h:50.5 */
.nav-item--video {
  left: 69.61%; top: 41.46%;
  width: 13.18%; height: 6.69%;
}
.nav-item--video .nav-item__active {
  left: -5.84%; top: -20.79%;
}

/* CREATOR: left:813 top:370 w:196 h:41.5 */
.nav-item--creator {
  left: 69.61%; top: 49.01%;
  width: 16.78%; height: 5.50%;
}
.nav-item--creator .nav-item__active {
  left: -5.1%; top: -18.07%;
}

/* CONTACT US: left:813 top:434 w:238 h:51.5 */
.nav-item--contact {
  left: 69.61%; top: 57.48%;
  width: 20.38%; height: 6.82%;
}
.nav-item--contact .nav-item__active {
  left: -3.36%; top: -8.74%;
}

/* English: left:832 top:530 w:206 h:59 */
.nav-item--english {
  left: 71.23%; top: 70.20%;
  width: 17.64%; height: 7.81%;
}
.nav-item--english .nav-item__active {
  left: -4.37%; top: -13.56%;
}

/* 日本語: left:833 top:600 w:179.5 h:44.5 */
.nav-item--japanese {
  left: 71.32%; top: 79.47%;
  width: 15.37%; height: 5.89%;
}
.nav-item--japanese .nav-item__active {
  left: -5.01%; top: -21.35%;
}

/* =====================================================
   FOOTER  ─ 常時 position:fixed
   ===================================================== */
.site-footer {
  position: fixed;
  bottom: -10px;
  left: calc((100vw - var(--cw)) / 2 + var(--cw) * 0.6502);
  width: calc(var(--cw) * 409 / 1168);
  height: calc(var(--cw) * 158.5 / 1168);
  z-index: 30;
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
}

/* YouTube: left:4.65% top:15.77% */
.site-footer__youtube {
  position: absolute;
  left: 4.65%;
  top: 15.77%;
  width: 45.84%;
  aspect-ratio: 375 / 158;
}

/* TikTok: left:53.06% top:17.03% */
.site-footer__tiktok {
  position: absolute;
  left: 53.06%;
  top: 17.03%;
  width: 45.84%;
  aspect-ratio: 375 / 157;
}

.site-footer__youtube img,
.site-footer__tiktok img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* management: left:13.45% top:73.19% */
.site-footer__management {
  position: absolute;
  left: 13.45%;
  right: 13.08%;
  top: 73.19%;
  width: 73.47%;
  object-fit: contain;
}

.site-footer__management-text {
  display: none;
}

/* =====================================================
   HERO CONTENT  ─ 1168:755 比率で中央配置
   ===================================================== */
.hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--cw);
  height: min(100vh, calc(100vw * 755 / 1168));
  z-index: 2;
}

/* ill_fuji: left:435 top:267 w:685 h:396 */
.hero__ill-fuji {
  position: absolute;
  left: 37.24%; top: 35.36%;
  width: 58.65%; height: 52.45%;
  object-fit: contain;
  z-index: 3;
}

/* ill_onami: left:89 top:25 w:649 h:650.5 */
.hero__ill-onami-wrap {
  position: absolute;
  left: 7.62%; top: 3.31%;
  width: 55.57%; height: 86.16%;
  z-index: 4;
}
.hero__ill-onami {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* ill_nami: left:84 top:498 w:989.5 h:239 */
.hero__ill-nami-wrap {
  position: absolute;
  left: 7.19%; top: 65.96%;
  width: 84.72%; height: 31.66%;
  z-index: 5;
}
.hero__ill-nami {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* ill_m: left:419 top:260 w:281 h:312 */
.hero__ill-m {
  position: absolute;
  left: 35.87%; top: 34.44%;
  width: 24.06%; height: 41.32%;
  object-fit: contain;
  z-index: 6;
}

/* ill_w: left:125 top:280 w:296 h:305 */
.hero__ill-w {
  position: absolute;
  left: 10.70%; top: 37.09%;
  width: 25.34%; height: 40.40%;
  object-fit: contain;
  z-index: 7;
}

/* frame: left:66 top:19 w:1058.5 h:718.5 */
.hero__frame {
  position: absolute;
  left: 5.65%; top: 2.52%;
  width: 90.62%; height: 95.17%;
  object-fit: contain;
  z-index: 8;
}

/* board_art: left:961 top:20 w:145.5 h:221.5 */
.hero__board-art {
  position: absolute;
  left: 82.28%; top: 2.65%;
  width: 12.46%; height: 29.34%;
  object-fit: contain;
  z-index: 9;
}

/* board_top: left:38 top:562 w:483.5 h:172.5 */
.hero__board-top {
  position: absolute;
  left: 3.25%; top: 74.44%;
  width: 41.40%; height: 22.85%;
  object-fit: contain;
  z-index: 10;
}

/* =====================================================
   KEYFRAMES
   ===================================================== */
@keyframes anim-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes anim-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes anim-from-top-right {
  from { opacity: 0; transform: translate(12px, -12px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes anim-from-top {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-from-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes anim-from-bottom-left {
  from { opacity: 0; transform: translate(-20px, 20px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes anim-from-bottom-right {
  from { opacity: 0; transform: translate(20px, 20px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes anim-from-bottom {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-from-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes anim-spring-from-bottom-left {
  0%   { opacity: 0; transform: translate(-80px,  80px); }
  5%   { opacity: 1; }
  20%  { transform: translate( 16px, -16px); }
  36%  { transform: translate( -8px,   8px); }
  51%  { transform: translate(  4px,  -4px); }
  64%  { transform: translate( -2px,   2px); }
  76%  { transform: translate(  1px,  -1px); }
  100% { transform: translate(  0px,   0px); }
}
@keyframes anim-spring-from-bottom-spring {
  0%   { opacity: 0; transform: translateY(80px); }
  5%   { opacity: 1; }
  20%  { transform: translateY(-16px); }
  36%  { transform: translateY(  8px); }
  51%  { transform: translateY( -4px); }
  64%  { transform: translateY(  2px); }
  76%  { transform: translateY( -1px); }
  100% { transform: translateY(  0px); }
}
@keyframes anim-spring-board {
  0%   { opacity: 0; transform: scale(0); }
  5%   { opacity: 1; }
  20%  { transform: scale(1.18); }
  36%  { transform: scale(0.90); }
  51%  { transform: scale(1.08); }
  64%  { transform: scale(0.96); }
  76%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1.00); }
}

/* ── HERO ページロードアニメーション ── */
.hero__frame {
  animation: anim-fadein 0.6s ease-out both 0.2s;
}
.site-header__menu-btn {
  animation: anim-from-top-right 0.5s ease-out both 0.3s;
}
.hero__ill-fuji {
  animation: anim-from-right 0.6s ease-out both 0.7s;
}
.hero__ill-onami-wrap {
  animation: anim-from-bottom-left 0.6s ease-out both 0.8s;
}
.hero__ill-nami-wrap {
  animation: anim-from-bottom 0.6s ease-out both 0.9s;
}
.hero__ill-m {
  animation: anim-spring-from-bottom-left 0.9s linear both 1.3s;
}
.hero__ill-w {
  animation: anim-spring-from-bottom-spring 0.9s linear both 1.45s;
}
.site-header__bg {
  animation: anim-fadein 0.4s ease-out both 1.9s;
}
.site-header__logo {
  animation: anim-from-left 0.5s ease-out both 2.35s;
}
.site-header__logo-kana {
  animation: anim-from-bottom 0.5s ease-out both 2.35s;
}
.site-footer__bg {
  animation: anim-fadein 0.4s ease-out both 1.9s;
}
.site-footer__youtube {
  animation: anim-from-bottom-left 0.5s ease-out both 2.35s;
}
.site-footer__tiktok {
  animation: anim-from-bottom-right 0.5s ease-out both 2.35s;
}
.site-footer__management {
  animation: anim-fadein 0.5s ease-out both 2.35s;
}
.hero__board-top {
  animation: anim-from-top 0.5s ease-out both 2.0s;
}
.hero__board-art {
  animation: anim-from-top-right 0.5s ease-out both 2.0s;
}

/* =====================================================
   HOVER EFFECTS
   ===================================================== */
@keyframes hover-bounce {
  0%   { transform: scale(1.00); }
  22%  { transform: scale(1.10); }
  42%  { transform: scale(1.04); }
  62%  { transform: scale(1.08); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1.07); }
}
@keyframes hover-bounce-logo {
  0%   { transform: scale(1.00); }
  22%  { transform: scale(1.12); }
  42%  { transform: scale(1.02); }
  62%  { transform: scale(1.08); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1.05); }
}

.site-header__menu-btn,
.site-header__logo,
.site-footer__youtube,
.site-footer__tiktok {
  transition: transform 0.2s ease-out, filter 0.2s ease-out;
}

.site-header__menu-btn:hover {
  transform: scale(1.15);
  filter: brightness(1.25);
}

.site-header__menu-btn.anim-done,
.site-header__logo.anim-done,
.site-footer__youtube.anim-done,
.site-footer__tiktok.anim-done {
  animation: none;
}

/* .anim-done (0,2,0) より高い詳細度 (0,3,0) でアニメーションを上書き */
.site-header__logo.anim-done.hover-anim-play {
  animation: hover-bounce-logo 0.45s ease-out forwards;
  filter: brightness(1.15);
}
.site-header__logo.anim-done.hover-anim-done {
  transform: scale(1.05);
  filter: brightness(1.15);
}

.site-footer__youtube.anim-done.hover-anim-play,
.site-footer__tiktok.anim-done.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
  filter: brightness(1.2);
}
.site-footer__youtube.anim-done.hover-anim-done,
.site-footer__tiktok.anim-done.hover-anim-done {
  transform: scale(1.07);
  filter: brightness(1.2);
}

.site-header__menu-btn.anim-done.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
}
.site-header__menu-btn.anim-done.hover-anim-done {
  transform: scale(1.07);
}

/* achievements__ico-yt: yt-bounce-in 完了後にバウンド有効化
   is-revealed.anim-done (0,3,0) で yt-bounce-in (0,2,0) を上書き
   animation:none で fill-mode も消えるため opacity:1 を明示 */
.achievements__ico-yt.is-revealed.anim-done {
  animation: none;
  opacity: 1;
}
/* is-revealed.anim-done.hover-anim-play (0,4,0) で animation:none を上書き */
.achievements__ico-yt.is-revealed.anim-done.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
}
.achievements__ico-yt.is-revealed.anim-done.hover-anim-done {
  transform: scale(1.07);
}

/* contact submit button: hover bounce */
.contact__submit.anim-done.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
}
.contact__submit.anim-done.hover-anim-done {
  transform: scale(1.07);
}

/* =====================================================
   IDLE BOUNCE  ─ 定期的なアピールアニメーション
   ===================================================== */
@keyframes idle-bounce {
  0%   { transform: scale(1.00); }
  8%   { transform: scale(1.10); }
  16%  { transform: scale(1.04); }
  24%  { transform: scale(1.08); }
  32%  { transform: scale(1.00); }
  100% { transform: scale(1.00); }
}

/* video cell / contact submit: idle bounce */
.idle-bounce-active {
  animation: idle-bounce 4s ease-in-out infinite;
}

/* achievement YT icon: animation:none を上書き (specificity 0,4,0) */
.achievements__ico-yt.is-revealed.anim-done.idle-bounce-active {
  animation: idle-bounce 4s ease-in-out infinite;
  opacity: 1;
}

/* hover中はidle bounceを停止し hover-bounce を優先 */
.achievements__ico-yt.is-revealed.anim-done.idle-bounce-active.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
}

/* =====================================================
   PC FOOTER AUTOHIDE
   ===================================================== */
@media (min-width: 768px) {
  .site-footer {
    transition: transform 0.4s ease-out;
  }
  .site-footer.footer-autohide {
    transform: translateY(120%);
  }
}

/* =====================================================
   SCROLL REVEAL  ─ IntersectionObserver と連携
   ===================================================== */
.will-reveal {
  opacity: 0;
  transform: translate(120px, -60px) rotate(7deg);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.will-reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* label 系は大きめに移動 */
.concept__label.will-reveal,
.achievements__label.will-reveal,
.achievements__label-result.will-reveal {
  transform: translate(160px, -80px) rotate(7deg);
}
.concept__label.will-reveal.is-revealed,
.achievements__label.will-reveal.is-revealed,
.achievements__label-result.will-reveal.is-revealed {
  transform: translate(0, 0) rotate(0deg);
}

/* whats__board: バウンドスケールアニメーション */
.whats__board.will-reveal {
  opacity: 0;
  transform: scale(0);
  transition: none;
}
.whats__board.is-revealed {
  animation: anim-spring-board 0.9s linear both;
}

/* whats__slider */
.whats__slider.will-reveal {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.whats__slider.is-revealed {
  opacity: 1;
}

/* video__label-wrap / video__cell */
.video__label-wrap.will-reveal,
.video__cell.will-reveal {
  opacity: 0;
  transform: translate(120px, -60px) rotate(7deg);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.video__label-wrap.will-reveal.is-revealed,
.video__cell.will-reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* creator / contact: フェードイン */
.creator__img.will-reveal,
.creator__img--sp.will-reveal,
.creator__img--en.will-reveal,
.creator__img--en-sp.will-reveal {
  opacity: 0;
  transform: translate(120px, -60px) rotate(7deg);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.creator__img.will-reveal.is-revealed,
.creator__img--sp.will-reveal.is-revealed,
.creator__img--en.will-reveal.is-revealed,
.creator__img--en-sp.will-reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.contact__bg.will-reveal,
.contact__bg--sp.will-reveal,
.contact__form.will-reveal {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.contact__bg.will-reveal.is-revealed,
.contact__bg--sp.will-reveal.is-revealed,
.contact__form.will-reveal.is-revealed {
  opacity: 1;
}

/* =====================================================
   WHAT'S NEW セクション (PC: 1168×755 canvas)
   ===================================================== */

/* スライダー: left:127 top:86 w:960 h:651.5 */
.whats__slider {
  position: absolute;
  left: 10.87%;
  top: 11.39%;
  width: 82.19%;
  height: 86.29%;
  overflow: hidden;
  z-index: 1;
}

.whats__slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.whats__slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.whats__post-news {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* board_whats: left:22 top:149 w:486.5 h:322 */
.whats__board {
  position: absolute;
  left: 1.88%;
  top: 19.74%;
  width: 41.65%;
  height: 42.65%;
  object-fit: contain;
  z-index: 3;
}

.whats__post-news-sp { display: none; }

/* ナビゲーションボタン (PC) */
.whats__nav {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--cw) * 44 / 1168);
  height: calc(var(--cw) * 44 / 1168);
  background: rgba(113, 14, 14, 0.65);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: calc(var(--cw) * 28 / 1168);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}
.whats__nav:hover { background: rgba(113, 14, 14, 0.9); }
.whats__nav--prev { left:  3%; }
.whats__nav--next { right: 3%; }

/* インジケータードット (PC) */
.whats__dots {
  position: absolute;
  z-index: 10;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--cw) * 8 / 1168);
}
.whats__dot {
  width: calc(var(--cw) * 10 / 1168);
  height: calc(var(--cw) * 10 / 1168);
  border-radius: 50%;
  background: rgba(113, 14, 14, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.whats__dot.is-active,
.whats__dot:hover { background: rgba(113, 14, 14, 0.9); }

/* =====================================================
   CONCEPT セクション (PC: 1168×3053 canvas)
   ===================================================== */
.concept__content {
  position: relative;
  width: var(--cw);
  margin: 0 auto;
  height: calc(var(--cw) * 3053 / 1168);
  z-index: 2;
  overflow: clip;
}

/* label_whats: left:249 top:105 w:678.5 h:248.5 */
.concept__label {
  position: absolute;
  left:  calc(var(--cw) * 249 / 1168);
  top:   calc(var(--cw) * 105 / 1168);
  width: calc(var(--cw) * 678.5 / 1168);
}

/* 01: left:123 top:353 w:943.5 h:640 */
.concept__img-01 {
  position: absolute;
  left:  calc(var(--cw) * 123 / 1168);
  top:   calc(var(--cw) * 353 / 1168);
  width: calc(var(--cw) * 943.5 / 1168);
}

/* 02: left:128.7 top:986.13 w:939 h:672.5 */
.concept__img-02-wrap {
  position: absolute;
  left:  calc(var(--cw) * 128.7 / 1168);
  top:   calc(var(--cw) * 986.13 / 1168);
  width: calc(var(--cw) * 939 / 1168);
}
.concept__img-02 { width: 100%; }

/* 03: left:123 top:1666 w:990 h:706.5 */
.concept__img-03-wrap {
  position: absolute;
  left:  calc(var(--cw) * 123 / 1168);
  top:   calc(var(--cw) * 1666 / 1168);
  width: calc(var(--cw) * 990 / 1168);
}
.concept__img-03 { width: 100%; }

/* 04: left:127 top:2373 w:924 h:680 */
.concept__img-04-wrap {
  position: absolute;
  left:  calc(var(--cw) * 127 / 1168);
  top:   calc(var(--cw) * 2373 / 1168);
  width: calc(var(--cw) * 924 / 1168);
}
.concept__img-04 { width: 100%; }

/* =====================================================
   ACHIEVEMENTS セクション
   ===================================================== */
.achievements__content {
  position: relative;
  width: var(--cw);
  margin: 0 auto;
  height: auto;
  padding-top:    calc(var(--cw) * 434 / 1168);
  padding-bottom: calc(var(--cw) * 200 / 1168);
  z-index: 2;
  overflow: clip;
}

/* label_achievements: left:65 top:69 w:823.5 */
.achievements__label {
  position: absolute;
  left:  calc(var(--cw) * 65 / 1168);
  top:   calc(var(--cw) * 69 / 1168);
  width: calc(var(--cw) * 823.5 / 1168);
}

/* label_result: left:712 top:228 w:379.5 */
.achievements__label-result {
  position: absolute;
  left:  calc(var(--cw) * 712 / 1168);
  top:   calc(var(--cw) * 228 / 1168);
  width: calc(var(--cw) * 379.5 / 1168);
}

.achievements__item {
  position: relative;
  display: block;
}
.achievements__item + .achievements__item {
  margin-top: calc(var(--cw) * 100 / 1168);
}
.achievements__item[data-item="1"] {
  margin-left: calc(var(--cw) * 101 / 1168);
  width: calc(var(--cw) * 966.5 / 1168);
}
.achievements__item[data-item="2"] {
  margin-left: calc(var(--cw) * 86 / 1168);
  width: calc(var(--cw) * 981 / 1168);
}
.achievements__item[data-item="3"] {
  margin-left: calc(var(--cw) * 98 / 1168);
  width: calc(var(--cw) * 969 / 1168);
}
.achievements__item[data-item="4"] {
  margin-left: calc(var(--cw) * 89 / 1168);
  width: calc(var(--cw) * 981 / 1168);
}
.achievements__item[data-item="5"] {
  margin-left: calc(var(--cw) * 152 / 1168);
  width: calc(var(--cw) * 861.5 / 1168);
}
.achievements__item[data-item="6"] {
  margin-left: calc(var(--cw) * 101 / 1168);
  width: calc(var(--cw) * 966.5 / 1168);
}

.achievements__img {
  display: block;
  width: 100%;
}

/* YouTube アイコン（バウンドフェードイン）*/
@keyframes yt-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  55%  { opacity: 1; transform: scale(1.2); }
  75%  { transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

.achievements__ico-yt {
  position: absolute;
  width: 22%;
  display: block;
  opacity: 0;
  transition: transform 0.2s ease-out, filter 0.2s ease-out;
}
.achievements__ico-yt.is-revealed {
  animation: yt-bounce-in 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
.achievements__ico-yt.is-revealed:hover {
  transform: scale(1.15);
  filter: brightness(1.25);
}
.achievements__ico-yt img {
  width: 100%;
  display: block;
}

/* =====================================================
   VIDEO セクション
   ===================================================== */
.video__content {
  position: relative;
  width: var(--cw);
  margin: 0 auto;
  height: calc(var(--cw) * var(--pc-h, 921) / 1168);
  z-index: 2;
  overflow: clip;
}

/* ラベル: left:622 top:25 w:491 */
.video__label-wrap {
  position: absolute;
  left:    calc(var(--cw) * 622 / 1168);
  top:     calc(var(--cw) * 25 / 1168);
  width:   calc(var(--cw) * 491 / 1168);
  z-index: 2;
}
.video__label { width: 100%; }

.video__cell {
  position: absolute;
  left:   calc(var(--cw) * var(--pc-l) / 1168);
  top:    calc(var(--cw) * var(--pc-t) / 1168);
  width:  calc(var(--cw) * 364.5 / 1168);
  height: calc(var(--cw) * 183.5 / 1168);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, filter 0.2s ease-out;
}
/* video cell: hover-bounce（is-revealed 後に有効） */
.video__cell.is-revealed.hover-anim-play,
.video__cell.will-reveal.is-revealed.hover-anim-play {
  animation: hover-bounce 0.4s ease-out forwards;
  filter: brightness(1.15);
}
.video__cell.is-revealed.hover-anim-done,
.video__cell.will-reveal.is-revealed.hover-anim-done {
  transform: scale(1.07);
  filter: brightness(1.15);
}
.video__frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.video__thumb {
  position: absolute;
  z-index: 1;
  left:  calc(var(--cw) * var(--pc-th-l) / 1168);
  top:   calc(var(--cw) * var(--pc-th-t) / 1168);
  width: calc(var(--cw) * var(--pc-th-w) / 1168);
}

/* =====================================================
   CREATOR セクション
   ===================================================== */
@keyframes creator-reveal {
  from { opacity: 0; transform: translate(120px, -60px) rotate(7deg); }
  to   { opacity: 1; transform: none; }
}

/* PC のみ: スクロール余白 */
@media (min-width: 1025px) {
  .lp-creator {
    min-height: calc(100vh + 150px);
  }
  .lp-contact {
    min-height: calc(100vh + 200px);
  }
}

/* PC JP: left:105 top:118 w:963.5 */
.creator__img {
  position: absolute;
  z-index: 2;
  left:  calc((100vw - var(--cw)) / 2 + var(--cw) * 105   / 1168);
  top:   calc(var(--cw) * 118   / 1168);
  width: calc(var(--cw) * 963.5 / 1168);
}

/* PC EN */
.creator__img--en {
  display: none;
  position: absolute;
  z-index: 2;
  left:  calc((100vw - var(--cw)) / 2 + var(--cw) * 105   / 1168);
  top:   calc(var(--cw) * 118   / 1168);
  width: calc(var(--cw) * 963.5 / 1168);
}

.creator__img--sp,
.creator__img--en-sp { display: none; }

/* 言語切り替え（PC） */
.lang-en .creator__img    { display: none; }
.lang-en .creator__img--en { display: block; }

/* =====================================================
   CONTACT セクション
   ===================================================== */

/* PC: bg_contact — left:105 top:52 w:958 */
.contact__bg {
  position: absolute;
  z-index: 2;
  left:  calc((100vw - var(--cw)) / 2 + var(--cw) * 105 / 1168);
  top:   calc(var(--cw) * 52  / 1168);
  width: calc(var(--cw) * 958 / 1168);
}

.contact__bg--sp { display: none; }

.contact__form {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  pointer-events: none;
}

.contact__field {
  position: absolute;
  pointer-events: all;
  overflow: visible;
}

.contact__field input,
.contact__field textarea {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(var(--cw) * 24 / 1168);
  color: #555;
  padding: 0 calc(var(--cw) * 15 / 1168);
  resize: none;
  box-sizing: border-box;
}

.contact__field textarea {
  padding-top: calc(var(--cw) * 12 / 1168);
  overflow-y: auto;
}

/* PC: お名前 — left:458 top:281 w:531 h:47 */
.contact__field--name {
  left:   calc((100vw - var(--cw)) / 2 + var(--cw) * 458 / 1168);
  top:    calc(var(--cw) * 281 / 1168);
  width:  calc(var(--cw) * 531 / 1168);
  height: calc(var(--cw) * 47  / 1168);
}

/* PC: メールアドレス — left:458 top:407 w:531 h:47 */
.contact__field--email {
  left:   calc((100vw - var(--cw)) / 2 + var(--cw) * 458 / 1168);
  top:    calc(var(--cw) * 407 / 1168);
  width:  calc(var(--cw) * 531 / 1168);
  height: calc(var(--cw) * 47  / 1168);
}

/* PC: メッセージ — left:458 top:532 w:531 h:101 */
.contact__field--message {
  left:   calc((100vw - var(--cw)) / 2 + var(--cw) * 458 / 1168);
  top:    calc(var(--cw) * 532 / 1168);
  width:  calc(var(--cw) * 531 / 1168);
  height: calc(var(--cw) * 101 / 1168);
}

/* PC: 送信ボタン — left:953 top:595 w:130 h:136 */
.contact__submit {
  position: absolute;
  pointer-events: all;
  z-index: 3;
  left:   calc((100vw - var(--cw)) / 2 + var(--cw) * 953 / 1168);
  top:    calc(var(--cw) * 595 / 1168);
  width:  calc(var(--cw) * 130 / 1168);
  height: calc(var(--cw) * 136 / 1168);
  background: transparent url('../images/btn_send.webp') center / contain no-repeat;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  transition: opacity 0.2s;
}
.contact__submit:hover { opacity: 0.8; }

/* CF7 ラッパーリセット */
.contact__form .wpcf7 {
  position: static;
  margin: 0;
  padding: 0;
}
.contact__form .wpcf7-form {
  position: static;
  margin: 0;
  padding: 0;
  pointer-events: all;
}
.contact__form .wpcf7-form > p { margin: 0; padding: 0; }
.contact__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  height: 100%;
}
.wpcf7-not-valid-tip {
  position: absolute;
  bottom: calc(var(--cw) * -42 / 1168);
  left: 0;
  font-size: calc(var(--cw) * 14 / 1168);
  color: #cc0000;
  background: rgba(255, 255, 255, 0.65);
  padding: calc(var(--cw) * 2 / 1168) calc(var(--cw) * 8 / 1168);
  border-radius: 3px;
  white-space: nowrap;
}

.contact__form .wpcf7-response-output {
  position: absolute;
  left:      calc((100vw - var(--cw)) / 2 + var(--cw) * 448 / 1168);
  top:       calc(var(--cw) * 208 / 1168);
  width:     calc(var(--cw) * 531 / 1168);
  text-align: center;
  font-size:  calc(var(--cw) * 13 / 1168);
  padding:    calc(var(--cw) * 6  / 1168) calc(var(--cw) * 10 / 1168);
  border-radius: 4px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #888;
  color: #333;
  pointer-events: none;
}
.contact__form .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #2a7a2a;
  border-color: #2a7a2a;
}
.contact__form .wpcf7-response-output.wpcf7-validation-errors,
.contact__form .wpcf7-response-output.wpcf7-mail-sent-ng {
  color: #cc0000;
  border-color: #cc0000;
}

/* =====================================================
   WordPress 管理バー補正
   ===================================================== */
.admin-bar .site-header { top: 46px; }
@media screen and (min-width: 783px) {
  .admin-bar .site-header { top: 32px; }
}

/* =====================================================
   SP  (max-width: 1024px)
   ===================================================== */
@media (max-width: 1024px) {

  html {
    --cw: 100vw;
  }

  /* SP: ページ全体の横はみ出しを抑制（margin:0 auto による右ずれ防止） */
  .lp-page {
    overflow-x: hidden;
  }

  /* SP 背景: PC 非表示 → SP 表示 */
  .lp-bg--pc { display: none; }
  .lp-bg--sp {
    display: block;
  }

  /* HERO SP */
  .lp-hero {
    height: 100lvh;
  }

  .hero__content,
  .nav-menu {
    height: min(100vh, calc(100vw * 670 / 375));
  }

  /* nav-menu SP: top:0 基準に固定 */
  .nav-menu {
    top: 0;
    transform: translateX(-50%);
  }

  /* ill_fuji SP */
  .hero__ill-fuji {
    left: 0; top: 44.33%;
    width: 100%; height: 42.84%;
    object-fit: cover;
    object-position: center top;
    overflow: hidden;
  }

  /* ill_onami SP */
  .hero__ill-onami-wrap {
    left: -57.08%; top: 5.14%;
    width: 139.17%; height: 78.01%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__ill-onami {
    transform: rotate(-11.15deg);
    flex: none;
    width: 85.12%; height: 85.24%;
    object-fit: contain;
  }

  /* ill_nami SP */
  .hero__ill-nami-wrap {
    left: -75.08%; top: 65.57%;
    width: 206.42%; height: 35.42%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__ill-nami {
    transform: rotate(-4.04deg);
    flex: none;
    width: 98.56%; height: 77.53%;
    object-fit: contain;
  }

  /* ill_m SP */
  .hero__ill-m {
    left: 1.33%; top: 40%;
    width: 65.81%; height: 40.90%;
  }

  /* ill_w: SP 非表示 */
  .hero__ill-w { display: none; }

  /* frame: SP 非表示 */
  .hero__frame { display: none; }

  /* board_art SP */
  .hero__board-art {
    left: 71.47%; top: 19.40%;
    width: 24.8%; height: 21.19%;
  }

  /* board_top SP */
  .hero__board-top {
    left: 34.93%; top: 72.54%;
    width: 63.53%; height: 12.69%;
  }

  /* ── Header SP ── */
  .site-header__bg {
    width: 99.99%;
    aspect-ratio: 374.966 / 97;
  }
  .site-header__logo {
    left: 7.27%;
    top: calc(var(--cw) * 11.31 / 375);
    width: 64.91%;
    aspect-ratio: 243.409 / 81.541;
  }
  .site-header__logo-kana {
    left: 59.33%;
    top: calc(var(--cw) * 48.29 / 375);
    width: 34.35%;
    aspect-ratio: 128.828 / 30.616;
  }
  .site-header__menu-btn {
    left: 76.53%;
    top: calc(var(--cw) * 79 / 375);
    width: 21.81%;
    aspect-ratio: 81.774 / 78;
  }

  /* ── Nav-menu SP ── */
  .nav-menu__bg {
    left:  21.40%;
    top:   14.18%;
    width: 76.23%;
    height: 79.40%;
  }
  .nav-item__active {
    width:  calc(var(--cw) * 244 / 375);
    height: calc(var(--cw) * 244 / 375 * 131 / 590);
  }
  .nav-item--home {
    left: 28.46%; top: 16.52%;
    width: 29.68%; height: 5.62%;
  }
  .nav-item--home .nav-item__active { left: -13.58%; top: -21.99%; }
  .nav-item--whats {
    left: 28.02%; top: 24.06%;
    width: 58.47%; height: 5.49%;
  }
  .nav-item--whats .nav-item__active { left: -6.14%; top: -23.62%; }
  .nav-item--concept {
    left: 27.79%; top: 32.46%;
    width: 42.36%; height: 4.88%;
  }
  .nav-item--concept .nav-item__active { left: -7.93%; top: -32.93%; }
  .nav-item--achievements {
    left: 26.47%; top: 40.11%;
    width: 60.99%; height: 5.74%;
  }
  .nav-item--achievements .nav-item__active { left: -3.34%; top: -20.44%; }
  .nav-item--video {
    left: 26.03%; top: 48.76%;
    width: 33.98%; height: 6.24%;
  }
  .nav-item--video .nav-item__active { left: -4.70%; top: -14.86%; }
  .nav-item--creator {
    left: 26.03%; top: 55.79%;
    width: 43.24%; height: 5.12%;
  }
  .nav-item--creator .nav-item__active { left: -3.70%; top: -28.93%; }
  .nav-item--contact {
    left: 26.03%; top: 63.70%;
    width: 52.51%; height: 6.36%;
  }
  .nav-item--contact .nav-item__active { left: -3.04%; top: -13.60%; }
  .nav-item--english {
    left: 30.22%; top: 75.55%;
    width: 45.45%; height: 7.29%;
  }
  .nav-item--english .nav-item__active { left: -12.74%; top: -5.52%; }
  .nav-item--japanese {
    left: 30.44%; top: 84.20%;
    width: 39.60%; height: 5.50%;
  }
  .nav-item--japanese .nav-item__active { left: -15.17%; top: -23.62%; }

  /* ── Footer SP ── */
  .site-footer {
    left: calc((100vw - var(--cw)) / 2 + var(--cw) * (-18 / 375));
    width: calc(var(--cw) * 441.513 / 375);
    height: calc(var(--cw) * 177.632 / 375);
    bottom: calc(var(--cw) * (-45.632 / 375) - env(safe-area-inset-bottom, 0px) - 5px);
  }
  .site-footer__youtube {
    left: 11.89%;
    top: 17.77%;
    width: 36.47%;
  }
  .site-footer__tiktok {
    left: 49.27%;
    top: 17.77%;
    width: 36.69%;
  }
  .site-footer__management { display: none; }
  .site-footer__management-text {
    display: block;
    position: absolute;
    left: 22.31%;
    right: 0;
    top: 58.3%;
    font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
    font-size: calc(var(--cw) * 12 / 375);
    font-weight: 500;
    color: #710e0e;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1;
    animation: anim-fadein 0.5s ease-out both 2.1s;
  }

  /* ── WHAT'S NEW SP: フロー配置 ── */
  .lp-whats {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .lp-whats .hero__content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding-top: calc(var(--cw) * 100 / 375);
    padding-bottom: 80px;
  }
  .lp-whats .whats__slider {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .lp-whats .whats__slider-track { height: auto; }
  .lp-whats .whats__slide        { height: auto; }
  .lp-whats .whats__post-news { display: none; }
  .lp-whats .whats__board     { display: none; }
  .lp-whats .whats__post-news-sp {
    display: block;
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .lp-whats .whats__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .lp-whats .whats__dots {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    justify-content: center;
    margin-top: 10px;
  }

  .whats__nav {
    width:  calc(var(--cw) * 36 / 375);
    height: calc(var(--cw) * 36 / 375);
    font-size: calc(var(--cw) * 22 / 375);
  }
  .whats__nav--prev { left:  1%; }
  .whats__nav--next { right: 1%; }
  .whats__dots {
    bottom: 1%;
    gap: calc(var(--cw) * 6 / 375);
  }
  .whats__dot {
    width:  calc(var(--cw) * 8 / 375);
    height: calc(var(--cw) * 8 / 375);
  }

  /* ── CONCEPT SP ── */
  .concept__content {
    height: calc(var(--cw) * 1323 / 375);
  }
  .concept__label {
    left:  calc(var(--cw) * 2 / 375);
    top:   calc(var(--cw) * 81 / 375);
    width: calc(var(--cw) * 358 / 375);
  }
  .concept__img-01 {
    left:  calc(var(--cw) * 18 / 375);
    top:   calc(var(--cw) * 212.5 / 375);
    width: calc(var(--cw) * 338 / 375);
  }
  .concept__img-02-wrap {
    left:  calc(var(--cw) * 19.5 / 375);
    top:   calc(var(--cw) * 444 / 375);
    width: calc(var(--cw) * 336 / 375);
  }
  .concept__img-03-wrap {
    left:   calc(var(--cw) * -3 / 375);
    top:    calc(var(--cw) * 665 / 375);
    width:  calc(var(--cw) * 385.143 / 375);
    height: calc(var(--cw) * 297.417 / 375);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .concept__img-03 {
    width: calc(var(--cw) * 355 / 375);
    max-width: none;
    flex: none;
    transform: rotate(5deg);
  }
  .concept__img-04-wrap {
    left:   calc(var(--cw) * 1 / 375);
    top:    calc(var(--cw) * 934 / 375);
    width:  calc(var(--cw) * 365.245 / 375);
    height: calc(var(--cw) * 288.629 / 375);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .concept__img-04 {
    width: calc(var(--cw) * 336.199 / 375);
    max-width: none;
    flex: none;
    transform: rotate(0deg);
  }

  /* ── ACHIEVEMENTS SP ── */
  .achievements__content {
    padding-bottom: calc(var(--cw) * 120 / 375);
  }

  /* ── VIDEO SP ── */
  .video__content {
    height: calc(var(--cw) * var(--sp-h) / 375);
  }
  .video__label-wrap {
    left:   calc(var(--cw) * 35 / 375);
    top:    calc(var(--cw) * 83 / 375);
    width:  calc(var(--cw) * 255 / 375);
    height: calc(var(--cw) * 101 / 375);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video__label {
    width:     calc(var(--cw) * 249 / 375);
    flex:      none;
    transform: rotate(5.65deg);
  }
  .video__cell {
    left:   calc(var(--cw) * 18 / 375);
    top:    calc(var(--cw) * var(--sp-t) / 375);
    width:  calc(var(--cw) * 348 / 375);
    height: calc(var(--cw) * 175 / 375);
  }
  .video__thumb {
    left:  calc(var(--cw) * var(--sp-th-l) / 375);
    top:   calc(var(--cw) * var(--sp-th-t) / 375);
    width: calc(var(--cw) * var(--sp-th-w) / 375);
  }

  /* ── CREATOR / CONTACT SP: absolute 配置のため明示的に高さが必要 ── */
  .lp-creator { min-height: 100vh; }
  /* エラーメッセージがボタン下に出るため余白を確保 */
  .lp-contact { min-height: calc(100vh + 80px); }

  /* ── CREATOR SP ── */
  .creator__img    { display: none; }
  .creator__img--sp {
    display: block;
    position: absolute;
    z-index: 2;
    left:  calc((100vw - var(--cw)) / 2 + var(--cw) * 10  / 375);
    top:   calc(var(--cw) * 146 / 375);
    width: calc(var(--cw) * 358 / 375);
  }
  .creator__img--en-sp {
    position: absolute;
    z-index: 2;
    left:  calc((100vw - var(--cw)) / 2 + var(--cw) * 10  / 375);
    top:   calc(var(--cw) * 146 / 375);
    width: calc(var(--cw) * 358 / 375);
  }
  .lang-en .creator__img--sp    { display: none; }
  .lang-en .creator__img--en    { display: none; }
  .lang-en .creator__img--en-sp { display: block; }

  /* ── CONTACT SP ── */
  .contact__bg { display: none; }
  .contact__bg--sp {
    display: block;
    position: absolute;
    z-index: 2;
    left:  calc(var(--cw) * 16  / 375);
    top:   calc(var(--cw) * 106 / 375);
    width: calc(var(--cw) * 346 / 375);
  }
  .contact__field input,
  .contact__field textarea {
    font-size: calc(var(--cw) * 15 / 375);
    padding: 0 calc(var(--cw) * 12 / 375);
  }
  .contact__field textarea {
    padding-top: calc(var(--cw) * 10 / 375);
  }
  .contact__field--name {
    left:   calc(var(--cw) * 83  / 375);
    top:    calc(var(--cw) * 233 / 375);
    width:  calc(var(--cw) * 229 / 375);
    height: calc(var(--cw) * 30  / 375);
  }
  .contact__field--email {
    left:   calc(var(--cw) * 79  / 375);
    top:    calc(var(--cw) * 314 / 375);
    width:  calc(var(--cw) * 233 / 375);
    height: calc(var(--cw) * 33  / 375);
  }
  .contact__field--message {
    left:   calc(var(--cw) * 83  / 375);
    top:    calc(var(--cw) * 392 / 375);
    width:  calc(var(--cw) * 229 / 375);
    height: calc(var(--cw) * 71  / 375);
  }
  .contact__submit {
    left:   calc(var(--cw) * 271 / 375);
    top:    calc(var(--cw) * 481 / 375);
    width:  calc(var(--cw) * 82  / 375);
    height: calc(var(--cw) * 86  / 375);
    background: transparent url('../images/btn_send.webp') center / contain no-repeat;
  }
  .wpcf7-not-valid-tip {
    bottom: calc(var(--cw) * -24 / 375);
    font-size: calc(var(--cw) * 11 / 375);
    padding: calc(var(--cw) * 2 / 375) calc(var(--cw) * 6 / 375);
  }
  .contact__form .wpcf7-response-output {
    /* Send ボタン底辺(481+86=567) より下に配置 */
    left:      calc(var(--cw) * 57  / 375);
    top:       calc(var(--cw) * 578 / 375);
    width:     calc(var(--cw) * 262 / 375);
    font-size: calc(var(--cw) * 11  / 375);
    padding:   calc(var(--cw) * 5   / 375) calc(var(--cw) * 8 / 375);
    white-space: normal;
  }

  /* ── 管理バー補正 SP ── */
  .admin-bar .nav-menu { top: 46px; }
}

/* =====================================================
   iPad 専用調整 (768px〜1024px)
   LP テーマではヘッダー要素のオフセット補正は不要。
   元テーマの補正値（±90px, -100px）は削除済み。
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* LP ではヘッダー/フッター/メニューの --cw はSP共通値をそのまま使用 */
}
