@charset "UTF-8";
/* =========================================================
   湯らっくす福岡 ティザーサイト ―「心地よさの実験場」
   デザイン(260324)準拠 / 赤背景 + 黒い電光掲示板
========================================================= */

/* ---- 支給フォント ---- */
@font-face{
  font-family:"KozGo";
  src:url("fonts/KozGoPr6N-Regular.otf") format("opentype");
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:"InstrumentSansLocal";
  src:url("fonts/InstrumentSans.ttf") format("truetype");
  font-weight:400 700;font-display:swap;
}
/* ▼見出し・キャッチ用「筆書体」。支給フォントを fonts/brush.(woff2|otf|ttf) に置くと自動適用。
   未配置の間は小塚ゴシック→明朝にフォールバック */
@font-face{
  font-family:"YulaxBrush";
  src:url("fonts/brush.woff2") format("woff2"),
      url("fonts/brush.otf")   format("opentype"),
      url("fonts/brush.ttf")   format("truetype");
  font-weight:400 900;font-display:swap;
}

:root{
  --red:#d20b1d;
  --red-deep:#c00a1a;
  --black:#16100f;
  --cream:#ffffff;   /* デザイン準拠：本文・見出しは純白 */
  --gold:#ffffff;
  --maxw:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --jp:"KozGo","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"InstrumentSansLocal","Instrument Sans",sans-serif;
  /* 見出し・キャッチ＝筆書体（支給フォント）。未配置時は小塚ゴシック→明朝 */
  --display:"YulaxBrush","KozGo","Yu Mincho","Hiragino Mincho ProN",serif;
  --hand:var(--display);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}  /* 拡大MV等の横はみ出しを文書レベルで抑え、position:fixed(雫ボタン right:14px)が画面右端基準になるように */
body{
  font-family:var(--jp);
  background:var(--red);
  color:var(--cream);
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{color:inherit;text-decoration:none}
.sec-en{font-family:var(--en);letter-spacing:.3em;font-weight:600;font-size:.85rem;opacity:.85;margin-bottom:1rem}

/* ---- 固定ロゴマーク（左下・ゆっくり回転） ---- */
.fixed-mark{position:fixed;left:30px;bottom:30px;z-index:58;width:84px;height:84px;animation:spin 18s linear infinite}
.fixed-mark img{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- 固定ナビ ---- */
.gnav{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 34px;gap:20px;transition:padding .3s var(--ease)}
.gnav__logo{width:168px;flex:none;transition:width .3s var(--ease)}
.gnav__logo img{width:100%;height:auto}
.gnav__nav{margin-top:6px}
.gnav__list{display:flex;gap:34px}
.gnav__link{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0px;padding:6px 2px}
.gnav__jp{font-weight:700;font-size:20px;letter-spacing:.04em;transition:font-size .3s var(--ease)}
.gnav__en{font-family:var(--en);font-size:.6rem;letter-spacing:.18em;font-weight:700;opacity:1;text-align:left;transition:font-size .3s var(--ease)}

/* ナビ項目を画像化（湯らっくすのこと/お品書き/共犯者を募る。JP+EN一体） */
.gnav__img{display:block;height:38px;width:auto;transition:height .3s var(--ease)}

/* ---- スクロール後：PC版ヘッダーのロゴ・文字を縮小 ---- */
.gnav.is-scrolled{padding:14px 34px}
.gnav.is-scrolled .gnav__logo{width:120px}
.gnav.is-scrolled .gnav__jp{font-size:16px}
.gnav.is-scrolled .gnav__en{font-size:.52rem}
.gnav.is-scrolled .gnav__img{height:30px}
.gnav__link::after{content:"";position:absolute;top:7px;left:-26px;width:17px;height:36px;background:url("images/suiteki_w.png") no-repeat center/contain;opacity:0;transform:translateX(6px) scale(.6);transition:.3s var(--ease)}
.gnav__link:hover::after{opacity:1;transform:none}
.gnav__link:hover .gnav__jp{color:var(--gold)}

.hamburger{display:none;width:46px;height:46px;border:none;background:var(--cream);border-radius:50%;position:relative;cursor:pointer;z-index:70}
.hamburger span{position:absolute;left:13px;right:13px;height:2px;background:var(--red);border-radius:2px;transition:.3s var(--ease)}
.hamburger span:nth-child(1){top:16px}.hamburger span:nth-child(2){top:22px}.hamburger span:nth-child(3){top:28px}
.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- トップへ戻る ---- */
.totop{position:fixed;right:24px;bottom:26px;z-index:60;width:54px;height:54px;border-radius:50%;border:2px dashed var(--cream);display:flex;align-items:center;justify-content:center;background:rgba(20,16,15,.3);backdrop-filter:blur(3px);font-size:.85rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:.4s var(--ease)}
.totop.is-show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--cream);color:var(--red);border-style:solid}

/* ---- ボタン（黒地・赤文字） ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--black);color:var(--red);font-weight:700;font-size:1rem;padding:1em 2.6em;border-radius:999px;border:2px solid var(--black);transition:.35s var(--ease)}
.btn:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-2px)}
.btn--lg{font-size:1.1rem;padding:1.15em 6em}

/* ---- KV ---- */
/* MVをやや縮小して中央配置・上揃え（左右に赤背景の余白） */
.kv{position:relative;padding:0}
.kv__visual{position:relative;width:82%;max-width:1100px;margin:0 auto}
.kv__img{display:block;width:100%;height:auto;animation:kvIn 1.3s var(--ease) both}

/* 動かすパーツ（mv.png上の元位置に重ねる）：ふわふわ浮遊 */
.kv__part{position:absolute;height:auto;pointer-events:none;will-change:transform;
  animation:partFloat 4s ease-in-out infinite;animation-delay:var(--d,0s)}
.kv__part--still{animation:none}
@keyframes partFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes kvIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
.kv__word{position:absolute;font-family:var(--en);font-weight:700;font-size:clamp(.78rem,1.5vw,1.1rem);white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.25)}
/* 浮遊ワードを画像化（ドット風フォント）。サイズは元テキスト相当に */
.kv__word img{display:block;height:auto;width:clamp(86px,9vw,128px);filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.kv__word--4 img{width:clamp(120px,12.5vw,178px)}  /* TEPPAN YAY! は横長 */
.kv__word--1{top:24%;right:8%}
.kv__word--2{top:51%;right:7%}
.kv__word--3{top:34%;left:3%}
.kv__word--4{bottom:12%;left:8%}
/* BAE風モーション：2グループで拡大・縮小を交互に（片方が大きい時、もう片方は小さい） */
[data-float]{animation:baePulse 2.2s ease-in-out infinite;transform-origin:center}
.kv__word--1,.kv__word--3{animation-delay:0s}        /* グループA */
.kv__word--2,.kv__word--4{animation-delay:-1.1s}     /* グループB（半周期ずらし） */
@keyframes baePulse{0%,100%{transform:scale(.8) rotate(-3deg)}50%{transform:scale(1.28) rotate(3deg)}}
/* スクロール：白丸＋赤い下矢印（右側・縦中央） */
.kv__scroll{position:absolute;right:32px;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .3s var(--ease)}
.kv__scroll:hover{transform:translateY(-50%) scale(1.06)}
/* 鋭角な下矢印（border で作成） */
.kv__scroll-arrow{display:block;width:11px;height:11px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);margin-top:-4px;animation:scrollArrow 1.6s ease-in-out infinite}
@keyframes scrollArrow{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

/* =========================================================
   見出し・キャッチを画像化（デザインの筆書体に合わせる）
   ※高さは各見出しの font-size(em) 基準にしてレスポンシブを継承
========================================================= */
.about__title img,.experiment__title img,.feat__title img,.crowd__title img{
  display:block;width:auto;max-width:100%;height:auto}
.experiment__title img,.feat__title img,.crowd__title img{margin-left:auto;margin-right:auto}
.about__title img{height:1.3em}
.experiment__title img{height:.82em}
.feat__title img{height:.82em}
.crowd__title img{height:1em}
/* キャッチ（傾き・下線は画像に焼き込み済み→CSS回転は付けない）。
   幅はコンテナ(p.feat__catch)側で制御し、img は width:100%。
   ※.feat__img img{width:auto}(後方)に勝つよう .feat__img を含めて詳細度を上げる */
.feat__img .feat__catch img{display:block;width:100%;max-width:100%;height:auto;max-height:none}

/* ---- ABOUT ---- */
.about{max-width:var(--maxw);margin:0px auto;padding:clamp(1.5rem, 3vw, 7rem) 24px}
.about__title{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4.6vw,2.8rem);text-align:left;margin-bottom:2.4rem;letter-spacing:.04em}
.about__cols{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.about__body{max-width:560px}
.about__body p{font-size:clamp(.98rem,2.1vw,1.12rem);margin-bottom:1.4rem}
.about__last{font-weight:700;color:var(--gold);font-size:1.15rem}
.about__seal{flex:none;width:clamp(120px,15vw,180px);align-self:flex-end}
.about__seal img{width:100%;opacity:.92}

/* ---- 電光掲示板（黒地・赤文字） ---- */
.ticker{background:var(--black);color:var(--red);overflow:hidden;padding:13px 0;border-block:1px solid rgba(255,255,255,.12)}
.ticker__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.ticker__set{font-family:var(--jp);font-weight:700;font-size:1.02rem;white-space:nowrap;color:var(--red)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ---- EXPERIMENT（赤背景） ---- */
.experiment{position:relative;overflow:visible;padding:clamp(4rem,9vw,7rem) 16px}
.experiment__inner{max-width:var(--maxw);margin:0 auto;text-align:center;position:relative;z-index:2}
.experiment__title{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.4vw,2.5rem);margin-bottom:3rem;letter-spacing:.04em}
.menu{max-width:760px;margin:0 auto 3.4rem}
.menu__item{padding:1.1rem .4rem}
.menu__tag{display:inline-flex;align-items:center;gap:.45em;font-size:.95rem;letter-spacing:.06em;color:var(--black);margin-bottom:.3rem}
.menu__tag .drop{width:12px;height:16px;display:inline-block;background:url("images/suiteki_b.png") no-repeat center/contain}
.menu__name{display:block;font-family:var(--jp);font-weight:700;font-size:clamp(1.15rem,3vw,1.55rem)}

/* 雲（湯気 透過PNG） */
.cloud{position:absolute;pointer-events:none;z-index:3;width:clamp(220px,26vw,420px);height:auto;opacity:.98}
.cloud--tl{top:2%;left:-40px}
.cloud--tr{top:-20px;right:-40px}   /* 上の文字スライダーに少し掛ける */
.cloud--bl{bottom:-1%;left:-30px}
.cloud--br{bottom:-10px;right:-40px}

/* CTA：ボタンに侍を重ねる */
.cf-cta__lead{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3vw,1.7rem);margin-bottom:1.6rem;letter-spacing:.04em}
/* ボタン(黒背景)＋侍を合わせた幅でセンタリング。PCは侍の右はみ出し44pxの半分=22px左へ。
   ※data-reveal(transform:none)と競合しないよう transform でなく left で寄せる */
.cf-cta__row{position:relative;display:inline-flex;align-items:center;justify-content:center;left:-22px}
.cf-cta__row--center{justify-content:center}
.cf-cta__runner{position: absolute;
    right: -44px;
    bottom: -67px;
    width: 88px;
    height: auto;
    z-index: 3;
    pointer-events: none;}

/* ---- 特長3ブロック（タイトル上部中央・下に画像/本文を左右／全体を中央寄せ） ---- */
.features{padding:clamp(3rem,6vw,5rem) 24px}
.feat{max-width:800px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 0}
.feat+.feat{border-top:1px solid rgba(255,255,255,.4)}   /* ブロック間を線で分割 */
.feat__title{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.4;margin:0 auto 2.4rem;letter-spacing:.04em;text-align:center}
.feat__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;justify-items:center}
.feat__img{position:relative;display:flex;flex-direction:column;align-items:center}
.feat__img img{width:auto;max-width:100%;max-height:320px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.28))}
.feat__body{max-width:420px}
/* 小見出しキャッチ：画像の上に配置／斜め＋アンダーライン */
.feat__catch{
  align-self:flex-start;width:clamp(180px,24vw,215px);
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--black);line-height:1.7;
}
/* 静寂ブロック（画像が右）：キャッチは右側に寄せる（傾きは画像側） */
.feat--rev .feat__catch{align-self:flex-end;text-align:left}
.feat__areas{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.1rem}
.area{    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: var(--red);
    background: var(--cream);
    padding: 0.35em 1em;
    border-radius: 0px;
    letter-spacing: 0.4em;
    text-indent: 0.4em;}
.area__desc{font-size:15px;color:var(--cream);margin-left:.6em;letter-spacing:0.4em}
/* エリアタグを画像化（赤字・白地ボックスは画像に含む） */
.area-img{display:block;height:32px;width:auto}
/* タグ＆詳細：2カラムの下に独立ブロックとして配置 */
.feat__areas-block{margin-top:clamp(1.5rem,4vw,2.6rem)}
.feat__areas-block .feat__areas{margin-bottom:.8rem}
.feat__text{font-size: 21.56px;}

/* ---- CROWDFUNDING ---- */
.crowd{position:relative;overflow:hidden;text-align:center;padding:clamp(4rem,9vw,7rem) 16px}
.crowd__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.crowd__title{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.4;margin-bottom:2.2rem;letter-spacing:.04em}

/* ---- フッター ---- */
.footer{padding:clamp(2.5rem,5vw,4rem) 24px 2rem;text-align:center}
.footer__label{font-family:var(--en);font-size:.74rem;letter-spacing:.2em;opacity:.85;margin-bottom:.8rem}
.footer__share{margin-bottom:2.4rem}
.sns{display:flex;justify-content:center;gap:1rem}
.sns a,.sns__btn{display:inline-flex;transition:.3s var(--ease)}
.sns a img,.sns__btn img{height:46px;width:auto;display:block}
.sns a:hover{transform:translateY(-3px)}
.sns__btn{cursor:default}
.footer__addr{margin-bottom:2.6rem}
.footer__addrtxt{font-size:.95rem;line-height:1.8}
.footer__insta{margin-bottom:3rem;display:flex;justify-content:center;gap:clamp(2rem,6vw,3.5rem)}
.footer__insta a{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;transition:.3s var(--ease)}
.footer__insta a:hover{transform:translateY(-3px)}
.footer__insta-icon{width:34px;height:auto;display:block}
/* Xアイコン(social_x=楕円枠付き90x58)は余白が大きく小さく見えるため、Instagramと高さを揃える */
.footer__insta-icon--x{width:auto;height:34px}
.footer__account{font-family:var(--en);letter-spacing:.05em;opacity:.9}
.footer__brand{display:flex;justify-content:center;align-items:center;margin-top:1.5rem}
.footer__rogo{width:auto;height:120px}

/* ---- アニメーション ---- */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.split .char{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.split.is-in .char{opacity:1;transform:none}

/* =========================================================
   SP専用要素（デフォルトは非表示。SPメディアクエリで表示）
========================================================= */
.sphead,.sp-fixed-logo,.sp-menu-btn,.sp-menu,.kv__openbadge,.kv__swipe{display:none}

/* SPメニューの雫アイコン（共通） */
.spmenu__list .drop{width:22px;height:30px;flex:none;background:url("images/suiteki_w.png") no-repeat center/contain;display:inline-block}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width:860px){
  /* PCナビ・PC固定ロゴは非表示 */
  .gnav{display:none}
  .fixed-mark{display:none}

  /* ===== SP：FV内ヘッダー ===== */
  .sphead{display:block;position:absolute;top:0;left:0;right:0;z-index:20;padding:clamp(24px,3.4vw,34px) clamp(20px,3vw,30px) 0}
  .sphead__logo{display:block;width:min(36vw,280px)}   /* phone≈132px / tablet≈220px（比例で拡大） */
  .sphead__logo img{width:85%;height:auto}
  .sphead__nav{position:absolute;top:clamp(26px,3vw,32px);right:clamp(6px,6.4vw,24px);display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .spmenu__list{display:flex;flex-direction:column;gap:clamp(1.1rem,3.2vw,1.7rem)}
  /* メニュー項目＝画像（雫＋画像の横並び） */
  .spmenu__list li a{display:flex;align-items:center;gap:clamp(.4rem,1.6vw,.9rem);color:var(--cream)}
  .spmenu__list .drop{flex:none;width:clamp(12px,3.1vw,22px);height:clamp(16px,4.3vw,30px)}
  .spmenu__img{display:block;width:auto}
  .sphead .spmenu__img{height:clamp(37px,9vw,64px)}   /* FV内ヘッダーのメニュー画像。phone≈26 / tablet≈46（画面比例） */
  .spmenu__jp{font-family:var(--jp);font-weight:700;font-size:clamp(.92rem,3.8vw,1.18rem);letter-spacing:.04em;line-height:1.2}
  .spmenu__en{font-family:var(--en);font-weight:700;font-size:.56rem;letter-spacing:.14em;opacity:.95;line-height:1.2}
  /* FV内ヘッダーのメニューのみ字間を広げる（展開メニューには影響させない） */
  .sphead .spmenu__jp{letter-spacing:.13em}
  .sphead .spmenu__en{letter-spacing:.22em}
  .sphead__scroll{margin-top:1.9rem;font-family:var(--en);font-weight:700;font-size:.68rem;letter-spacing:.18em;color:var(--cream)}

  /* ===== SP：MV（ヘッダーの下から開始／横スワイプ可能） ===== */
  /* .kv を横スクロールコンテナ化：横スワイプでMV全体を閲覧。縦はページスクロールのまま */
  .kv{padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .kv::-webkit-scrollbar{display:none}
  /* MVを拡大（横250%）。初期の横表示位置は JS が scrollLeft で設定（左右にスワイプで全体閲覧） */
  .kv__visual{width:250%;max-width:none;margin:40vw 0 0 0}
  .kv__img{width:100%}
  /* 浮遊ワードはSPでも表示（PC同様に配置・baePulseで動く）。
     MVは横250%＋初期スクロール70vwのため、初期表示エリア(視覚の約28〜68%)内に収める。
     白雲・AUGUSTバッジを避けつつ、上部の赤地に4語を配置 */
  .kv__word{display:block}
  .kv__word img{width:120px}                   /* SPはやや小さめに（重なり軽減） */
  .kv__word--4 img{width:104px}               /* TEPPAN YAY! は横長 */
  .kv__word--1{top: 24%;
        left: 79%;right:auto}   /* SAU NICE！（右上） */
  .kv__word--2{top:top: 51%;
        left: 84%;right:auto}   /* 7 HEAVEN（右） */
  .kv__word--3{top: 34%;
        left: 6%;right:auto}   /* I MA EASY~（左） */
  .kv__word--4{top: 87%;
        left: 13%;right:auto;bottom:auto}  /* TEPPAN YAY！（左下／バッジ上） */

  /* スワイプ誘導アイコン（読み込み時に数秒だけ表示） */
  .kv__swipe{display:block;position:fixed;left:50%;top:54%;transform:translate(-50%,-50%);
    z-index:70;width:clamp(120px,42vw,190px);pointer-events:none;
    opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
  .kv__swipe.is-show{opacity:1;visibility:visible}
  .kv__swipe img{width:100%;height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
  /* OPENバッジ（MV左下）。ホーム位置は従来どおりMV基準の絶対配置（-165pxで上げる）。
     スクロール時は JS(main.js badgeGlide) が自然位置を実測し、差分transformで左下コーナーへ
     “滑って”移動させる（着地点はトップへ戻るボタンと同じ高さ）。 */
  .kv__openbadge{display:block;position:absolute;left:30%;bottom:48%;width:clamp(110px,30vw,150px);z-index:60;will-change:transform}
  /* 携帯のブラウザ下部ツールバーで隠れないよう上げる（黒・白とも同値で重なり維持） */
  .kv__openbadge-b{display:block;width:100%;height:auto;position:relative;top:-165px}
  .kv__openbadge-w{position:absolute;left:0;top:-165px;width:100%;height:auto;opacity:0;animation:badgeBlink 1.4s steps(1) infinite}
  @keyframes badgeBlink{0%,50%{opacity:0}50.01%,100%{opacity:1}}
  /* 着地後は完全固定（スクロールに干渉させない）。可視位置は移動中の着地点と一致 */
  .kv__openbadge.is-docked{position:fixed;left:24px;bottom:26px;transform:none}
  .kv__openbadge.is-docked .kv__openbadge-b{top:0}
  .kv__openbadge.is-docked .kv__openbadge-w{top:0}
  /* SCROLL（白丸矢印）はSPでは非表示（SCROLL DOWNテキストを使用） */
  .kv__scroll{display:none}

  /* ===== SP：スクロール後に固定するゆロゴ＋雫ボタン ===== */
  .sp-fixed-logo{display:block;position:fixed;top:14px;left:14px;z-index:56;width:54px;height:54px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.35s var(--ease);animation:spin 18s linear infinite reverse}  /* reverse=左回り(反時計回り) */
  .sp-fixed-logo img{width:100%;height:100%;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 2px 5px rgba(0,0,0,.4))}
  .sp-fixed-logo.is-show{opacity:1;visibility:visible;transform:none}
  .sp-menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:14px;right:14px;z-index:56;width:54px;height:54px;border:none;background:transparent;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.35s var(--ease)}
  .sp-menu-btn img{width:26px;height:auto;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 2px 5px rgba(0,0,0,.4))}
  .sp-menu-btn.is-show{opacity:1;visibility:visible;transform:none}

  /* ===== SP：展開メニュー ===== */
  /* height:100dvh で下部ツールバー裏に延びないように（電光掲示板・Instagramが可視域内に収まる） */
  .sp-menu{display:block;position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:80;background:var(--red);
    padding:24px 28px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease)}
  .sp-menu.is-open{opacity:1;visibility:visible}
  .sp-menu__logo{position:absolute;top:22px;left:24px;width:56px;animation:spin 18s linear infinite}
  .sp-menu__logo img{width:100%}
  .sp-menu__close{position:absolute;top:26px;right:26px;width:34px;height:46px;border:none;background:transparent;cursor:pointer}
  .sp-menu__close img{width:26px;height:auto}
  .sp-menu .spmenu__list--open{margin-top:32vw;gap:clamp(1.6rem,6vw,3rem)}
  .sp-menu .spmenu__list--open .drop{width:clamp(24px,5.5vw,44px);height:clamp(33px,7.6vw,60px)}
  .sp-menu .spmenu__img{height:clamp(40px,10vw,80px)}   /* 展開メニューのメニュー画像（大きめ・画面比例） */
  .sp-menu .spmenu__jp{font-size:clamp(1.4rem,6vw,1.9rem)}
  .sp-menu .spmenu__en{font-size:.7rem}
  .sp-menu__insta{position:absolute;left:28px;bottom:90px;width:38px}  /* 電光掲示板(下端)の上に余裕を持たせる */
  .sp-menu__insta img{width:100%}
  /* 展開メニュー最下部の電光掲示板（フル幅・本体パディングを無視して端まで）
     ※.ticker{position:relative}(後方定義)に勝つよう詳細度を上げる */
  .sp-menu .sp-menu__ticker{position:absolute;left:0;right:0;bottom:0;z-index:2}

  /* ===== 既存セクションのSP最適化 ===== */
  .about__cols{flex-direction:column;align-items:center;text-align:left}
  .about__seal{display:none}   /* SPのみ朱印(rogo03)を非表示 */
  /* タイトルを本文（中央寄せの細いブロック≒378px）と左端を揃える */
  .about__title{max-width:378px;margin-left:auto;margin-right:auto}

  .feat__cols,.feat--rev .feat__cols{grid-template-columns:1fr;justify-items:center;text-align:left;gap:1.2rem}
  .feat--rev .feat__img{order:-1}
  /* 画像枠を画像幅にフィット＆中央。キャッチ(絶対配置)を画像の角に重ねられるようにする */
  .feat__img{width:fit-content;max-width:100%;margin:0 auto;position:relative}
  .feat__img img{max-width:240px}
  /* 特長3(裸より自由な)の館内着は縦長なので高さを他画像(約160-180px)に合わせる */
  .feat__img img[alt="オリジナル館内着"]{max-height:170px}
  /* キャッチ（黒文字画像）＝画像の上部・横にステッカー配置。
     位置・サイズは下部「★キャッチ位置 微調整エリア」の変数で調整します
     （--cat-x=横位置 / --cat-y=縦位置(top) / --cat-w=幅） */
  .feat__catch{position:absolute;bottom:auto;margin:0;z-index:3;text-align:left;
    top:var(--cat-y,-9%);left:0;right:auto;
    width:var(--cat-w,clamp(150px,40vw,180px));transform:translateX(var(--cat-x,-45%))}
  .feat--rev .feat__catch{left:auto;right:0}   /* 特長2は画像の右端が基準（--cat-x はプラス値で右へ） */
  .feat__body{text-align:left}                          /* 本文は左寄せ */
  .feat__areas{justify-content:flex-start}             /* エリアタグは左寄せ */
  .feat__areas-block{text-align:left;max-width:420px;margin-left:auto;margin-right:auto}  /* 本文(420px)と左端を揃える */

  /* ===== SP：本文・見出しのサイズ最適化（PC固定pxが大きすぎる箇所を縮小） ===== */
  .feat__text{font-size:clamp(.82rem,3.5vw,.95rem);line-height:1.8}  /* 約13.6px・行間詰め（添付2/4準拠で1行あたりの文字数↑） */
  .feat__title{font-size:clamp(1.35rem,5vw,1.75rem)}        /* 25.6px → 約23px */
  .feat__catch{font-size:clamp(.98rem,3.4vw,1.2rem)}
  .crowd__title{font-size:clamp(1.3rem,5vw,1.6rem);margin-bottom:1.4rem}  /* CTA見出し約20.8px。タイトル〜ボタン間を狭める(2.2rem→1.4rem) */
  /* CROWDFUNDINGセクション：侍は余白計算に入れず（下へはみ出してOK）、ボタン基準で上下の余白を揃える */
  .crowd{padding-top:2.75rem;padding-bottom:2.75rem}
  .menu__name{font-size:clamp(1.05rem,4vw,1.4rem)}
  /* エリアタグ：タグ＋説明を1行に収める（添付4準拠：字間・余白を詰める） */
  .area,.area__desc{font-size:12px;letter-spacing:.06em}
  .area{padding:.32em .75em;text-indent:.06em}
  .area__desc{margin-left:.5em}
  .area-img{height:24px}   /* SPはエリアタグ画像を小さく */
  /* CTAボタン：SPでは文字を1行に収める（フォント・余白を縮小して内容幅に） */
  .btn--lg{font-size:.95rem;padding:0.95em 3.5em}
  .cf-cta__row .btn{white-space:nowrap}
  /* ボタン＋侍を合わせた幅でセンタリング（侍の右はみ出し26pxの半分=13px左へ寄せる） */
  .cf-cta__row{left:-13px}

  /* 右下固定の「上部へ戻る」ボタンはSPでは非表示 */
  .totop{display:none}

  /* ===== 実験メニュー：湯気(雲)はSPで大きめの隅アクセント。タイトルは左右の雲の「間」に配置 ===== */
  .experiment{padding-top:3.4rem;padding-bottom:6.5rem}   /* タイトル上の隙間を確保 */
  .experiment__title{font-size:clamp(1.2rem,4.6vw,1.55rem);margin-bottom:1.5rem}
  .cloud{width:clamp(140px,42vw,182px);opacity:.96}
  .cloud--tl{top:6px;left:-46px}
  .cloud--tr{top:-14px;right:-54px;z-index:6}  /* yuge3は上の電光掲示板(z-index:5)より前面に掛ける */
  /* 下部の雲(CTA周り)：少し大きめ。位置は下の隅でボタン文字を覆わない。
     z-index:1（experiment__inner=2 より下）で samurai を雲より前面に。電光掲示板(z-index:5)の裏は維持 */
  .cloud--bl,.cloud--br{width:clamp(140px,39vw,170px);z-index:1}
  .cloud--bl{bottom: -3%;
        left: -60px;}
  .cloud--br{bottom: -1%;
        right: -46px;}

  /* 電光掲示板を雲(z-index:3)より前面へ。雲が掲示板に掛かる部分は裏に回る（SPのみ） */
  .ticker{position:relative;z-index:5}

  /* 侍(samurai)はSPでは小さめに（前回添付3に近い大きさ） */
  .cf-cta__runner{width:62px;right:-26px;bottom:-46px}

  /* 左下固定のJULYバッジがコピーライトに重ならないよう、フッター下部に余白を確保（SPのみ） */
  .footer{padding-bottom:7rem}

  /* Facebookシェアはスマホでアプリ仕様上シェア画面が開けないため、SPでは非表示（PCのみ表示） */
  .sns__item--fb{display:none}
}
/* =========================================================
   ★ キャッチ（黒文字画像）位置 微調整エリア（スマホ／タブレット／PCは特長3のみ）
   各特長の数字を変えるだけで位置・サイズを調整できます。
     --cat-x : 横位置（特長1・3はマイナス=左へ／特長2はプラス=右へ。数字を大きくするほど画像の外へ。% か px）
     --cat-y : 縦位置 top（マイナス=上へ／プラス=下へ。% か px）
     --cat-w : 幅（任意。例 160px／clamp(150px,40vw,180px)。指定しなければ既定値）
   ※特長1=胃袋から / 特長2=静寂を(右) / 特長3=裸より自由な
========================================================= */
/* --- スマホ（〜599px）--- */
@media (max-width:599px){
  .feat:nth-of-type(1) .feat__catch{ --cat-x:-46%; --cat-y:-14%; }   /* 胃袋から、ひらく。（左） */
  .feat:nth-of-type(2) .feat__catch{ --cat-x: 45%; --cat-y:-9%; }   /* 静寂を、贅沢に。（右） */
  .feat:nth-of-type(3) .feat__catch{ --cat-x:-78%; --cat-y:-9%; }   /* 裸より自由な、戦闘服。（左） */
}
/* --- タブレット（600〜860px）--- */
@media (min-width:600px) and (max-width:860px){
  .feat:nth-of-type(1) .feat__catch{ --cat-x:-67%; --cat-y:-9%; }   /* 胃袋から、ひらく。（左） */
  .feat:nth-of-type(2) .feat__catch{ --cat-x: 82%; --cat-y:-6%; }   /* 静寂を、贅沢に。（右） */
  .feat:nth-of-type(3) .feat__catch{ --cat-x:-97%; --cat-y:2%; }   /* 裸より自由な、戦闘服。（左） */
}
/* --- PC（861px〜）：特長3「裸より自由な」だけキャッチを画像の左右に配置＆自由移動 ---
   ※特長1・2のPCは従来どおり（画像の上にキャッチ）。feat3のみ下の数字で調整できます */
@media (min-width:861px){
  .feat:nth-of-type(3) .feat__catch{
    /* ★ここの数字で位置を調整（--cat-x:横/マイナス=左へ, --cat-y:縦top, --cat-w:幅） */
    --cat-x:-76%; --cat-y:-4%;
    /* ↓仕組み（通常は触らない） */
    position:absolute; bottom:auto; margin:0; z-index:3; align-self:auto; text-align:left;
    top:var(--cat-y); left:0; right:auto;
    width:var(--cat-w,clamp(180px,24vw,215px));
    transform:translateX(var(--cat-x));
  }
}
/* タブレット（600〜860px）：実験メニューのタイトルと4つの雲を大きく表示 */
@media (min-width:600px) and (max-width:860px){
  .experiment__title{font-size:clamp(2rem,4.6vw,2.6rem)}   /* タイトル拡大（画像はem基準で連動） */
  .cloud{width:clamp(230px,35vw,300px)}                    /* 上の雲(tl/tr)を拡大 */
  .cloud--bl,.cloud--br{width:clamp(210px,35vw,275px)}     /* 下の雲(bl/br)を拡大 */
}
@media (max-width:480px){
  .kv__word{font-size:.7rem}
  .totop{width:46px;height:46px;right:14px;bottom:14px}
  /* 着地後の固定位置もtotopに合わせる（同じ高さ＝bottom:14px） */
  .kv__openbadge.is-docked{left:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],.split .char{opacity:1!important;transform:none!important}
  .ticker__track{animation:marquee 34s linear infinite!important}
  .fixed-mark{animation:spin 18s linear infinite!important}
}