@charset "UTF-8";
/* ============================================================
   リラックマ ごゆるりパズル 事前登録LP
   style.css

   構成
     0. 変数 / リセット
     1. 共通レイアウト・見出し
     2. 画像プレースホルダ（画像未アップロード時の枠）
     3. 01 メインKV
     4. 02 事前登録ボタン
     5. 03 事前登録報酬
     6. 04 ゲーム紹介
     7. 05 キャラクター紹介
     8. 06 公式SNS
     9. 07 フッター
    10. 08 追尾CTA
    11. カルーセル（SPのみ）

   ブレークポイント … 768px（これ未満がSPレイアウト）
   ============================================================ */


/* ============================================================
   0. 変数 / リセット
   ============================================================ */
:root{
  /* 色：PSDから実測した値 */
  --c-bg:        #fffbc6;   /* ページ背景 */
  --c-brown:     #8c5a3e;   /* 枠線・濃い茶 */
  --c-brown-dk:  #7a4a30;   /* テキスト */
  --c-brown-lt:  #d9aa72;   /* 帯・フッター */
  --c-pill:      #c18e6a;   /* 見出しピル地 */
  --c-cream:     #fff1cb;   /* カード地 */
  --c-white:     #ffffff;
  --c-yellow:    #ffd04c;   /* キャラ名ピル */
  --c-blue:      #9ae6f1;   /* CTAバー水色 */
  --c-pink:      #f3a596;   /* SNSボタン */
  --c-shadow:    rgba(140,90,62,.28);

  /* レイアウト */
  /* ★ページ全体のスケールはこの1行で決まります。
       画面幅がこの値より狭い間は画面幅いっぱい、超えたらこの幅で止まって中央寄せ。
       小さくするほど全体が小さくなります（1920=PSDの原寸 / 1500=推奨 / 1280=かなり小さめ） */
  --wrap:        1500px;
  --gutter:      16px;      /* SPの左右余白 */
  --radius:      18px;
  --radius-lg:   28px;

  /* タイポ */
  --font-base: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont,
               "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-brown-dk);
  font-family:var(--font-base);
  font-weight:700;
  line-height:1.7;
  overflow-x:hidden;
  /* 追尾CTAにコンテンツが隠れないよう下に余白。
     追尾バーの帯を厚くしたら、ここも合わせて増やしてください */
  padding-bottom:128px;
}

img{ max-width:100%; height:auto; vertical-align:bottom; }
ul,li{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

/* 表示切替ユーティリティ */
.sp-only{ display:inline; }
.pc-only{ display:none; }

@media (min-width:768px){
  /* PCの追尾ボタンは 640px 固定（高さ約103px）＋下の余白60px ＝ 約163px を占めるため、
     SPより多めに取る。足りないと最下部でコピーライト表記に重なります */
  body{ padding-bottom:200px; }
  .sp-only{ display:none; }
  .pc-only{ display:block; }
}


/* ============================================================
   1. 共通レイアウト・見出し
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding:40px 0 48px;
}

@media (min-width:768px){
  .section{ padding:3.3% 0 3.8%; }
  /* 1920基準で各要素を%指定するため、コンテナ自体の余白は0にする */
  .wrap{ padding-inline:0; }
}

/* --- 見出し -----------------------------------------------------
   文字もデザインの一部のため画像化しています（altにテキストを保持）。
   heading--award … 事前登録報酬（旗リボン）
   heading--band  … ゲーム紹介／キャラクター紹介（全幅の帯＋クマ耳ピル）
------------------------------------------------------------------ */
.heading{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}
.heading img{ display:block; width:100%; height:auto; }

/* 事前登録報酬：旗リボン */
.heading--award picture{ display:block; width:61.7vw; }

/* ゲーム紹介・キャラクター紹介：帯は画面幅いっぱい、ピルは中央 */
.heading--band{
  background:url(/img/headbar_sp.png) repeat-x center / auto 100%;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
}
.heading--band picture{ display:block; width:70.3vw; }

@media (min-width:768px){
  .heading{ margin-bottom:36px; }
  .heading--award picture{ width:72.4%; }
  .heading--band{ background-image:url(/img/headbar_pc.png); }
  .heading--band picture{ width:39.2%; }
}

/* 注釈 */
.note{
  margin-top:24px;
  font-size:11px;
  font-weight:400;
  line-height:1.9;
  color:var(--c-brown);
  text-align:center;
}
@media (min-width:768px){
  .note{ font-size:12px; margin-top:32px; }
}


/* ============================================================
   2. 画像プレースホルダ
   画像が未アップロード／読み込み失敗のとき、枠とラベルを表示します。
   画像が揃えば自動的に消えるので、この節は残したままで構いません。
   ============================================================ */
.ph{
  position:relative;
  display:block;
  overflow:hidden;
}
.ph > img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ph > img.is-missing{ display:none; }

/* 画像が無いときだけ見える下地（読み込めたら is-loaded が付いて消える） */
.ph::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg,
      rgba(140,90,62,.08) 0 8px, rgba(140,90,62,.16) 8px 16px);
  border:2px dashed var(--c-brown-lt);
  border-radius:inherit;
}
.ph::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--c-brown);
  text-align:center;
  padding:8px;
}
.ph.is-loaded::before,
.ph.is-loaded::after{ content:none; }

/* 各プレースホルダの比率（実画像が入れば画像の比率が優先されます） */
.ph--kv      { aspect-ratio:1920/750; }
.ph--store   { aspect-ratio:340/100;   border-radius:10px; }
.ph--reward  { aspect-ratio:1/1; }
.ph--ss      { aspect-ratio:9/16;      border-radius:14px; }  /* 実機スクショ 1080×1920 に合わせる */
.ph--chara   { aspect-ratio:1/1;       border-radius:50%; }
.ph--snsicon { aspect-ratio:1/1;       border-radius:50%; width:40px; }

@media (max-width:767px){
  .ph--kv{ aspect-ratio:750/860; }
}


/* ============================================================
   3. 01 メインKV
   ============================================================ */
/* KVはSP・PCとも背景色まで含んだ全幅素材。
   角丸・影・左右余白はCSSでは一切付けない（素材側に入っています） */
.kv{
  padding:0;
}
.kv__inner{
  max-width:var(--wrap);
  margin-inline:auto;
}


/* ============================================================
   4. 02 事前登録ボタン（ファーストビュー）
   ============================================================ */
.cta-block{
  padding:20px 0 8px;
}
.cta-block .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* --- CTAバー（共通パーツ） --------------------------------------
   バーの地と「いますぐ事前登録」の文字は1枚の画像。
   ストアバッジだけ、PSDで実測した位置に重ねています。
------------------------------------------------------------------ */
.cta-bar{
  position:relative;
  width:84.4vw;          /* PSD実測：633px(@2x) ÷ 750 */
  aspect-ratio:631/109;  /* 素材の比率。読み込み前のガタつき防止 */
  flex:none;
}
.cta-bar__bg{ display:block; }
.cta-bar__bg img{ display:block; width:100%; height:auto; }

/* バー全体のタップ領域（SPのみ有効） */
.cta-bar__link{
  display:none;
}

.store-btns{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3%;
}
.store-btn{
  display:block;
  height:100%;
  flex:none;                 /* ← 枠が狭いと潰れるので縮小を禁止 */
  transition:transform .15s ease, opacity .15s ease;
}
/* max-width:none は全体の img{max-width:100%} を打ち消すため。
   これが無いと横長のGoogle Playバッジだけ左右に潰れます */
.store-btn img{ display:block; width:auto; height:100%; max-width:none; }
.store-btn:hover{ transform:translateY(-2px); }
.store-btn:active{ transform:translateY(1px); }

/* ストアURLが未設定の間は押せない見た目に（JSで付与）。
   本番URLを入れると自動で解除されます */
.store-btn.is-pending{ opacity:.55; pointer-events:none; }

/* --- SP：バッジ枠は1つぶん（PSD実測 左59.7% 上10.8% 高さ58.6%） --- */
@media (max-width:767px){
  .os-ios     .store-btn--android{ display:none; }
  .os-android .store-btn--ios    { display:none; }

  /* デザインのバッジ枠の「中心」(59.7%〜87.5% の中央＝73.6%)に合わせて、
     幅は各バッジ本来の比率のまま伸ばす。
     App Store（横長比 2.72）はデザインとほぼ同じ位置・サイズ、
     Google Play（横長比 3.35）は同じ高さのまま左右に少し広がります。
     位置を動かしたい時は left の 73.6% を、大きさは height を触ってください */
  .store-btns{
    left:73.6%; right:auto; transform:translateX(-50%);
    top:10.8%; height:58.6%;
  }

  /* バー全体をタップできるようにする。バッジの上にも重なります */
  .cta-bar__link{
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:999px;
    -webkit-tap-highlight-color:rgba(140,90,62,.15);
  }
  .cta-bar__link.is-pending{ pointer-events:none; }
  /* バッジ側のリンクは重複するので無効化（見た目はそのまま） */
  .store-btns{ pointer-events:none; }

  /* OSを判定できなかった場合だけ、2つ並ぶとバー内に収まらないので下に出す */
  .os-unknown .store-btns,
  .os-other   .store-btns{
    position:static;
    transform:none;
    height:44px;
    margin-top:10px;
  }
}

/* --- PC：バッジ枠は2つぶん（PSD実測 左27.9% 右72.2% 上14% 高さ53.3%） --- */
@media (min-width:768px){
  /* PC版バーは 909×147（QR廃止後のデザイン）。
     アートボード1920に対して 909px＝47.3%。
     固定pxにすると狭い画面で相対的に大きくなりすぎるため割合で指定 */
  .cta-bar{
    width:47.3%;
    min-width:min(100%, 460px);
    aspect-ratio:909/147;
    background-image:none;
  }
  /* バッジ位置はデザイン実測（909×147 に対する割合） */
  .store-btns{ left:35.2%; right:9.9%; top:14.3%; height:51.7%; gap:5.2%; }
}


/* ============================================================
   5. 03 事前登録報酬
   ============================================================ */
/* SPは報酬エリア全体にキラキラが散る（PC版はリボン周りだけなので見出し画像に含まれています） */
.section--rewards{ position:relative; }
.section--rewards .wrap{ position:relative; z-index:1; }
.section--rewards::before{
  content:"";
  position:absolute;
  left:50%;
  top:10%;
  width:78.3vw;
  aspect-ratio:585/1005;
  transform:translateX(-50%);
  background:url(/img/kira_sp.png) no-repeat center / 100% 100%;
  pointer-events:none;
  z-index:0;
}
@media (min-width:768px){
  .section--rewards::before{ content:none; }
}

/* 報酬カードは文字込みの1枚画像 */
.rewards{
  display:grid;
  gap:3.1vw;              /* PSD実測：カード間 23px(@2x) */
  justify-items:center;
}
.reward{ width:44.4vw; }  /* PSD実測：333px(@2x) ÷ 750 */
.reward img{ display:block; width:100%; height:auto; }

@media (min-width:768px){
  .rewards{
    grid-template-columns:repeat(3,1fr);
    gap:2.2%;
    width:81.9%;        /* PSD実測 */
    margin-inline:auto;
  }
  .reward{ width:100%; }
}

/* ============================================================
   6. 04 ゲーム紹介
   ============================================================ */
.feature{
  text-align:center;
  /* 見出しとの間隔はキャラクター紹介と同じ（.heading の margin-bottom のみ）。
     ここを増やすとスクショが下がり、装飾アイコンの位置も動きます */
  padding-top:0;
}
.feature__fig{
  margin-inline:auto;
  width:100%;
  max-width:260px;
  border:6px solid var(--c-brown);
  border-radius:20px;
  /* ドロップシャドウはPSDに無いので無し。
     付けると角丸の外側に三日月状の影が出ます */
  overflow:hidden;              /* 角丸からはみ出さないように */
}
/* スクショは枠いっぱいに敷く。
   枠線のぶん内側の比率が画像とわずかにズレるため contain だと上下に隙間が出ます */
.feature__fig > img{ object-fit:cover; }

@media (min-width:768px){
  .feature__fig{ max-width:none; border-width:min(0.42vw, 8px); border-radius:min(1.4vw, 27px); }
}


/* --- 散らしの装飾パズルピース ---------------------------------
   位置・サイズはPSDの実測値。横はアートボード幅、縦はセクション高さに対する割合。
   不要なら HTML から <div class="deco"> ごと削除可
---------------------------------------------------------------- */
.section--game{ position:relative; }
.section--game .wrap{ position:relative; z-index:1; }

.deco{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%, var(--wrap));
  pointer-events:none;
  z-index:0;
}
.deco > i{
  position:absolute;
  display:block;
  background:no-repeat center / contain;
  filter:drop-shadow(0 3px 3px rgba(140,90,62,.22));
}
.deco > i::before{ content:""; display:block; padding-top:100%; }

/* --- SP（PSD実測：アートボード750基準） --- */
.deco .d-red   { left:11.1%; top:11.4%; width:11.2%; background-image:url(/img/deco_piece_red.png); }
.deco .d-yellow{ left:78.4%; top: 8.2%; width:12.7%; background-image:url(/img/deco_piece_yellow.png); }
.deco .d-blue  { left:18.3%; top:92.4%; width:11.9%; background-image:url(/img/deco_piece_blue.png); }
.deco .d-green { left:70.9%; top:92.4%; width:11.7%; background-image:url(/img/deco_piece_green.png); }
.deco .d-rain  { left:81.5%; top:83.9%; width:12.0%; background-image:url(/img/deco_rainbow.png); }
.deco .d-line  { left: 6.5%; top:85.2%; width:10.1%; background-image:url(/img/deco_line.png); }

/* --- PC（PSD実測：アートボード1920基準） --- */
@media (min-width:768px){
  .deco .d-red   { left: 6.9%; top:19.3%; width:6.0%; }
  .deco .d-yellow{ left:87.4%; top:13.9%; width:6.7%; }
  .deco .d-blue  { left:11.5%; top:89.7%; width:6.4%; }
  .deco .d-green { left:82.5%; top:89.5%; width:6.3%; }
  .deco .d-rain  { left:87.8%; top:78.0%; width:6.5%; }
  .deco .d-line  { left: 6.3%; top:79.6%; width:5.4%; }
}

/* ============================================================
   7. 05 キャラクター紹介
   ============================================================ */
.chara{
  padding:14px 12px 18px;
  background:var(--c-cream);
  border:3px solid var(--c-brown-lt);
  border-radius:var(--radius);
  text-align:center;
}
.chara__name{
  display:inline-block;
  padding:3px 18px;
  margin-bottom:10px;
  background:var(--c-yellow);
  border:2px solid var(--c-brown-lt);
  border-radius:999px;
  font-size:14px;
}
.chara__fig{
  width:min(70%, 180px);
  margin:0 auto 10px;
  background:var(--c-white);
  border-radius:50%;
}
.chara__desc{
  font-size:12px;
  font-weight:400;
  line-height:1.8;
  color:var(--c-brown);
}

@media (min-width:768px){
  .chara__name{ font-size:16px; }
  .chara__desc{ font-size:13px; }
}


/* ============================================================
   8. 06 公式SNS
   ============================================================ */
.section--sns{ padding:36px 0 40px; text-align:center; }

.sns__lead{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.sns__lead picture{ display:block; width:56.8vw; }
.sns__lead img{ display:block; width:100%; height:auto; }

.sns__btn{
  display:block;
  width:75.6vw;
  margin-inline:auto;
  transition:transform .15s ease;
}
.sns__btn img{ display:block; width:100%; height:auto; }
.sns__btn:hover{ transform:translateY(-2px); }
.sns__btn:active{ transform:translateY(1px); }

@media (min-width:768px){
  .sns__lead picture{ width:29.4%; }
  .sns__btn{ width:45.3%; }   /* PSD実測 */
}

/* ============================================================
   9. 07 フッター
   ============================================================ */
.footer{
  padding:26px 0 30px;
  background:var(--c-brown-lt);
  color:var(--c-brown-dk);
  text-align:center;
}
.footer__links,
.footer__lang{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
/* 文字数で幅が変わらないよう、ボタンではなく「｜」区切りのテキストリンク。
   項目を増減してもHTMLの <li> を足し引きするだけで、区切り線は自動です */
.footer__links{
  width:auto;
  margin:0 auto 12px;
  gap:0;
  align-items:center;
  /* 狭い画面でも1行に収まるように文字サイズを可変に（最小10px / 最大12px） */
  font-size:clamp(10px, 3.2vw, 12px);
}
.footer__links li{
  display:flex;
  align-items:center;
}
.footer__links li:not(:last-child)::after{
  content:"｜";          /* 区切り文字。変えたいときはここ */
  margin:0 .1em;
  opacity:.5;
}
.footer__links a{
  padding:3px 2px;
  font-size:inherit;
  white-space:nowrap;     /* 項目の途中では折り返さない */
}
.footer__links a:hover{ text-decoration:underline; }
.footer__lang{ margin-bottom:14px; }
.footer__lang a{
  display:block;
  min-width:52px;
  padding:3px 10px;
  background:var(--c-cream);
  border:2px solid var(--c-brown);
  border-radius:999px;
  font-size:12px;
}
.footer__lang a.is-current{
  background:var(--c-brown);
  color:var(--c-cream);
}
.footer__copy{
  font-size:10px;
  font-weight:400;
  line-height:1.9;
  color:var(--c-brown-dk);
}

@media (min-width:768px){
  .footer{ padding:1.7% 0 1.9%; }
  .footer__links{ width:auto; margin-inline:auto; gap:0; font-size:13px; }
  .footer__links li:not(:last-child)::after{ margin:0 .35em; }
  .footer__links a{ padding:3px 6px; }
  .footer__lang a{ font-size:13px; }
  .footer__copy{ font-size:11px; }
}


/* ============================================================
   10. 08 追尾CTA
   ============================================================ */
.sticky-cta{
  /* ★帯の上下の余白はこの2つで調整します（ボタン自体のサイズは変わりません）
       --sticky-pad-top    … ボタンの上の余白＝帯の上の広がり
       --sticky-pad-bottom … ボタンの下の余白。ここを増やすとボタンが画面の下端から離れます。
       スマホのジェスチャーバー／ホームインジケーターの誤タップを避けるため、
       下は上より多めに取っています。env() は対応端末でさらに加算されます */
  --sticky-pad-top:    0px;
  --sticky-pad-bottom: 55px;

  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100;
  padding:
    var(--sticky-pad-top)
    var(--gutter)
    calc(var(--sticky-pad-bottom) + env(safe-area-inset-bottom));

  /* 帯（背景・境界線）は無し。ボタンだけが浮いて見えます。
     帯を戻したい場合は、下の3行のコメントを外してください */
  /* background:rgba(253,247,216,.94); */
  /* border-top:3px solid var(--c-brown); */
  /* box-shadow:0 -3px 12px rgba(141,98,57,.18); */

  /* 帯が透明なので、ボタン以外の場所では背面のコンテンツを操作できるようにする。
     これが無いと、画面下の見えない帯がスクロールやタップを奪います */
  pointer-events:none;
}
.sticky-cta .cta-bar{ pointer-events:auto; }
/* 既定は画面外。JSで .is-shown が付いたらスライドして出てきます */
.sticky-cta{
  transform:translateY(110%);
  opacity:0;
  visibility:hidden;
  transition:transform .28s ease, opacity .28s ease, visibility .28s;
}
.sticky-cta.is-shown{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}

/* 追尾CTAのバーだけは少し大きめ（タップしやすさ優先） */
.sticky-cta .cta-bar{ width:min(92vw, 420px); }

.sticky-cta__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:var(--wrap);
  margin-inline:auto;
}
@media (min-width:768px){
  /* PCはジェスチャーバーが無いので控えめに */
  .sticky-cta{ --sticky-pad-top:0px; --sticky-pad-bottom:60px; }
  .sticky-cta .cta-bar{ width:min(100%, 640px); min-width:0; }
}


/* ============================================================
   11. カルーセル
   SP（767px以下）… 横スクロール＋スナップ＋矢印
   PC（768px以上）… グリッド（矢印・ドットは非表示）
   ============================================================ */

/* --- PC（既定）：グリッド ------------------------------------ */
.carousel{ position:relative; }

.carousel__track{
  display:grid;
  gap:20px;
  margin-inline:auto;
}
/* PSD実測：スクショ1枚22.7%×3（左13.5%〜右86.6%）／キャラ1枚19.9%×4（左6.8%〜右93.2%） */
.section--game  .carousel__track{ grid-template-columns:repeat(3,1fr); width:73.1%; gap:3.42%; }
.section--chara .carousel__track{ grid-template-columns:repeat(4,1fr); width:86.4%; gap:2.60%; }

.carousel__arrow,
.carousel__dots{ display:none; }


/* --- SP：カルーセル ------------------------------------------ */
@media (max-width:767px){

  .carousel{ margin-inline:calc(var(--gutter) * -1); }

  .carousel__track,
  .section--game  .carousel__track,
  .section--chara .carousel__track{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* 左右に次のカードを覗かせる */
    padding-inline:19vw;
  }
  .carousel__track::-webkit-scrollbar{ display:none; }

  .carousel__item{
    flex:0 0 62vw;
    scroll-snap-align:center;
  }

  /* 矢印 */
  .carousel__arrow{
    position:absolute;
    top:50%;
    z-index:5;
    display:block;
    width:41px; height:41px;          /* 素材81x82の@2x */
    transform:translateY(-50%);
    background:no-repeat center / 100% 100%;
    filter:drop-shadow(0 2px 2px rgba(140,90,62,.3));
  }
  .carousel__arrow--prev{ left:4px; background-image:url(/img/arrow_left.png); }
  .carousel__arrow--next{ right:4px; background-image:url(/img/arrow_right.png); }
  .carousel__arrow:disabled{ opacity:.35; pointer-events:none; }

  /* ドット */
  .carousel__dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:16px;
  }
  .carousel__dots[hidden]{ display:none; }
  .carousel__dot{
    width:9px; height:9px;
    padding:0;
    background:var(--c-brown-lt);
    border-radius:50%;
  }
  .carousel__dot.is-active{ background:var(--c-brown); transform:scale(1.25); }

}


/* ============================================================
   印刷・モーション配慮
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}