@charset "utf-8";

/* ---- フォント（@charset の直後に配置：CSS仕様で @import は他ルールより前である必要） ---- */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

/* ============================================
   reset.css  ベースリセット
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

/* ============================================
   失敗いっぱいMART / プロミス エール！プロジェクト第2弾
   SP版スタイル（390px設計・px固定）
   - 値はすべて px。390px幅で設計どおりのピクセルになる。
   - 768px以上は 390px列センタリング（PC版は別途実装）。
   - ※以前は rem+vw で画面幅にスケールしていたが px固定に変更。
     390px以外の幅ではスケールしない（必要なら別途スケール方式を用意）。
   ============================================ */

/* ---- 変数 ---- */
:root {
  --c-blue: #00479e;   /* メインテキスト青 */
  --c-yellow: #ffe100; /* KV背景 */
  --c-red: #e83828;    /* 装飾帯 */
  --c-white: #ffffff;
  --font-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-dela: "Dela Gothic One", var(--font-gothic);
}

/* ---- 基本設定 ---- */
html {
  font-size: 2.5641025641vw; /* 10px @390px */
}
body {
  font-family: var(--font-gothic);
  color: var(--c-blue);
  background: var(--c-yellow); /* 全サイズ黄色背景：PC〜SP間でも左右余白が白くならないように */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---- 全画面ノイズオーバーレイ（Figma：ブレンド＝ソフトライト） ----
   ・position:fixed で常に画面全体に被せる
   ・pointer-events:none でクリックは下に透過
   ・CTAより前面（CTAは z-index:6 / 装飾は z-index:1）に出すため十分大きな z-index
   ・ノイズPNGは2x書き出し前提 → 表示サイズ(1x)で repeat させて粒度を保つ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("../image/yell-project-onechance_noise_sp.png");
  background-repeat: repeat;
  background-size: 390px 726px; /* SP: 780x1452 の 1x 表示サイズ */
  mix-blend-mode: soft-light;
}
@media (min-width: 768px) {
  body::after {
    background-image: url("../image/yell-project-onechance_noise_pc.png");
    background-size: 1280px 800px; /* PC: 2560x1600 の 1x 表示サイズ */
  }
}

/* ---- レイアウト ---- */
.ly_wrapper {
  width: 100%;
  max-width: 390px; /* 390px */
  margin-inline: auto;
  overflow: hidden;
  background: var(--c-white);
}

/* ============================================
   un_kv  KV（メインビジュアル）
   ============================================ */
.un_kv {
  position: relative;
  height: 692px; /* 上端〜赤帯直前まで（新デザイン） */
  background: var(--c-yellow);
  overflow: hidden;
}

/* タグライン FAILURE >>> OPPORTUNITY（200x9の細帯／SVGは非アスペクト保持なので高さも指定） */
.un_kv_tagline {
  position: absolute;
  top: 30px;   /* 30px */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;  /* 200px */
  height: 9px; /* 9px */
}

/* キャンペーンロゴ プロミス エール！プロジェクト 第2弾 */
.un_kv_logo {
  position: absolute;
  top: 90px;  /* 90px（新デザイン）*/
  left: 50%;
  transform: translateX(-50%);
  width: 186px;  /* 186px */
  height: 69px;  /* 69px */
  z-index: 2;
}
.un_kv_logo .main {
  position: absolute;
  left: 0;
  top: 0;
  width: 91.12%; /* 本体（バッジ分を除く） */
  height: 100%;
}
.un_kv_logo .badge {
  position: absolute;
  left: 78.59%;
  top: 32.55%;
  width: 21.41%;
  height: 27.06%;
}

/* タイトル＋商品コラージュ（Figma書き出し1枚絵：node 2001:2 ワンチャンMART / 345x321） */
.un_kv_visual {
  position: absolute;
  top: 102px;
  left: 50%;
  transform: translateX(-50%);
  width: 394px;
  max-width: none;
  height: auto;
  z-index: 1;
}

/* リード文 */
.un_kv_lead {
  position: absolute;
  top: 512px; 
  left: 50%;
  transform: translateX(-50%);
  width: 372px; 
  font-weight: 800;
  font-size: 13px; /* 13px */
  line-height: 1.6;
  text-align: center;
  letter-spacing: -0.05em;
}

/* 開催日時ブロック */
.un_kv_info {
  position: absolute;
  top: 577px; /* 577px */
  left: 50%;
  transform: translateX(-50%);
  width: 324px; /* 324px */
  text-align: center;
}
.un_kv_date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-dela);
  white-space: nowrap;
  margin-top: -5px;
}
.un_kv_date .num {
  font-size: 26px; /* 26px */
  line-height: 1;
}
.un_kv_date .dow {
  font-size: 12px; /* 12px */
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 3px;
}
.un_kv_date .arrow {
  width: 16px;  /* 元16x25。-90°回転で約25x16の横向き波線に */
  height: 25px;
  transform: rotate(-90deg);
  flex: none;
  margin: 0 8px;
}
.un_kv_meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-dela);
  font-size: 18px; /* 18px */
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap; /* 1行に収める（折り返し防止） */
}
.un_kv_meta .time,
.un_kv_meta .venue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0; /* 縮んで text が折り返さないように */
}
/* SVGは非アスペクト保持のため幅・高さ両方を実寸比で指定 */
.un_kv_meta img {
  flex: none;
}
.un_kv_meta .sep {
  width: 13px;   /* 区切り「／」13 : 13 */
  height: 13px;
}
.un_kv_meta .ic_pin {
  width: 13.6px;  /* ピン 15.6 : 23 */
  height: 20px;
}

/* ============================================
   un_band  装飾帯 THE VALUABLE FAILURES
   ============================================ */
.un_band {
  position: relative;
  z-index: 2; /* コンセプト装飾より前面に */
  height: 53px; /* 53px */
  background: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center; /* 帯内のトラックを中央寄せ */
  overflow: hidden;
}
.un_band img {
  width: 363px;  /* 1枚分の自然サイズ */
  height: auto;  /* アスペクト比維持 */
  margin-inline: auto;
}
/* 赤帯（ONE CHANCE MARKET・FAILURE IS FULL OF POSSIBILITIES／静止・アニメ無し・1枚中央表示） */
.un_band_track {
  display: flex;
  flex: none;
  align-items: center;
}

/* 黄＋青フチの装飾見出し（共通） */
/* -webkit-text-stroke + paint-order で「先に枠→塗りで上書き」させ、密な漢字でも内側が潰れないクリーンな外枠にする */
.un_outline {
  color: var(--c-yellow);
  -webkit-text-stroke: 3px var(--c-blue);
  paint-order: stroke fill;
}

/* セクション間の下向き波線矢印 */
.un_arrow {
  display: block;
  width: 29px;  /* 29px */
  height: 45px; /* 45px */
  margin: 0 auto;
}

/* ============================================
   un_concept  コンセプト（「失敗」はポテンシャル）
   ============================================ */
.un_concept {
  position: relative;
  z-index: 1;              /* 赤帯(un_band)より背面に */
  background: var(--c-yellow);
  padding: 60px 20px 0;    /* 赤帯下端〜パネル上端=60px（Figma準拠） */
  min-height: 694px;       /* コンセプト→about のギャップをFigmaに合わせ */
  text-align: center;
  overflow: visible;
}
/* 下部の青ラインアートコラージュ（Figma node 2001:3／x40 y1128 w315 h270）*/
.un_concept_collage {
  position: absolute;
  top: 376px;
  left: 19px;
  width: 340px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
/* パネル（透過なしの白背景） */
.un_concept_panel {
  position: relative;
  z-index: 1;
  max-width: 350px; /* 350px */
  margin: 0 auto;
  padding: 20px 0px;
  background: #fff;
  border-radius: 20px; /* 20px */
}
.un_concept_ttl {
  margin-top: 20px;
}
.un_concept_ttl img {
  display: block;
  width: 294px;  /* Figma実寸 */
  height: 76px;  /* Figma実寸 */
  margin: 0 auto;
}
.un_concept_ex {
  margin-top: 20px;
  font-weight: 600;
  font-size: 13px; /* 13px */
  line-height: 2;
  color: var(--c-blue);
}
.un_concept_lead {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 2;
  color: var(--c-blue);
  padding-bottom: 20px
}

/* ============================================
   un_about  ワンチャンMARTって？
   ============================================ */
.un_about {
  position: relative;
  z-index: 2; /* 上げた矢印が un_concept(z-index:1) の背面に隠れないように */
  background: var(--c-yellow);
  padding: 0 20px 40px; /* 上はコンセプトとの間隔をFigmaに合わせ詰める */
  text-align: center;
}
.un_about .un_arrow {
  transform: translateY(-10px); /* 矢印を上へ（数値で調整可）*/
  margin-bottom: 7px;
}
.un_about_ttl {
  font-family: var(--font-dela);
  font-size: 28px; /* 28px */
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.un_about_txt {
  margin-top: 10px;
  font-weight: 600;
  font-size: 13px; /* 13px */
  line-height: 2;
  letter-spacing: -0.1px;
  color: var(--c-blue);
}

/* ============================================
   un_steps  体験ステップ 01〜03
   ============================================ */
.un_steps {
  background: var(--c-yellow);
  padding: 0 20px 7px; /* ステップ→グッズ矢印のギャップをFigmaに合わせ */
}
.un_step {
  padding-top: 37.5px; /* 線(2.5px)→見出しの間隔をFigma=40pxに（2.5+37.5）*/
  padding-bottom: 40px; /* 画像と次の点線の間隔（Figma：約40px） */
  border-top: 2.5px dotted var(--c-blue); /* 区切り線：青の点線（2.5px）*/
  text-align: center;
}
.un_step_head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-dela);
  font-size: 18px; /* 18px */
  line-height: 2; /* Figma leading 2（ボックス高さ36px）*/
  letter-spacing: 0.02em; /* Figma tracking 0.36px = 0.02em */
}
.un_step_head .num {
  color: var(--c-yellow);
  -webkit-text-stroke: 2.5px var(--c-blue);
  paint-order: stroke fill;
}
.un_step_head .ttl {
  color: var(--c-blue);
  letter-spacing: -0.07rem;
}
.un_step_txt {
  margin-top: 10px; /* 見出し→本文=10px（Figma）*/
  font-weight: 600;
  font-size: 13px; /* 13px */
  line-height: 2;
  color: var(--c-blue);
  letter-spacing: -0.01rem;
}
.un_step_img {
  position: relative;
  margin: 30px auto 0;
  width: 350px;  /* 350px */
  border-radius: 7px;
  overflow: hidden;
}
.un_step_img.is_h280 {
  height: 197px;
}
.un_step_img.is_h204 {
  height: 204px;
}
/* Figma指定のトリミング（仮素材を各ステップの該当領域で表示） */
.un_step_img img {
  position: absolute;
  max-width: none;
  display: block;
}
.un_step_img.s1 img {
  width: 100%;
  height: 100%;
}
.un_step_img.s2 img {
  width: 100%;
  height: 100%;
}
.un_step_img.s3 img {
  width: 100%;
  height: 100%;
}
/* 仮素材ラベル（本番では削除） */
.un_memo {
  margin-top: 6px;
  font-size: 10px;
  color: #e83828;
}

/* ============================================
   un_goods  ワンチャンを持ち帰ろう（グッズ2種）
   ============================================ */
.un_goods {
  background: var(--c-yellow);
  padding: 0px 0 60px; /* グッズカード下端→開催概要のギャップをFigmaに合わせ */
  text-align: center;
}
.un_goods_arrow {
  display: block;
  width: 29px;  /* 29px（アセット9：下向き3シェブロン）*/
  height: 45px; /* 45px */
  margin: 0 auto 44px; /* 矢印下端→カード上端=44px（Figma）*/
}
.un_goods_card {
  position: relative;
  overflow: visible;
  background: var(--c-blue);
  border-radius: 40px; /* 40px */
  padding: 55px 20px 60px; /* 上:カード上端→タグライン=55px / 下:本文→カード下端=60px（Figma）*/
}
/* 右上「Opportunity」筆記体（カード上端をまたいで配置：Figma x184 y3208 w192）*/
.un_goods_opportunity {
  position: absolute;
  right: 14px;  /* 右端 x376 → カード右(390)から14px */
  top: -19px;   /* 上端 y3208 → カード上端 y3227 から上に19px */
  width: 192px; /* 192px */
  height: auto;
  z-index: 3;
}
.un_goods_tagline {
  width: 200px;   /* 200px（FAILURE >>> OPPORTUNITY）*/
  height: 9px; /* 9px */
  margin: 0 auto 30px; /* タグライン→見出しのギャップをFigmaに合わせ */
}
.un_goods_ttl {
  text-align: center;
  height: 45px; /* Figmaテキスト箱の高さ（位置基準を維持）*/
  display: flex;
  align-items: center;     /* 文字を箱内で縦中央に（Figma再現）*/
  justify-content: center;
}
.un_goods_ttl img {
  display: block;
  width: 314px;   /* 314px（Figma node 130:725 幅）*/
  height: auto;   /* 自然な高さ（約25px）で歪みなく表示 */
  margin-top: 5px;
}
.un_good {
  margin-top: 35px;
}
.un_goods_ttl + .un_good {
  margin-top: 12px; /* 見出し→item01間隔をFigmaに合わせ */
}
.un_good + .un_good {
  margin-top: 40px; /* 本文→点線=40px（Figma）*/
  border-top: 2.5px dotted var(--c-yellow); /* 区切り線：黄色の点線（文字と同色・青背景／2.5px）*/
  padding-top: 18.5px; /* 線(2.5px)→item02 をFigma=21pxに（2.5+18.5）*/
}
.un_good_item {
  font-family: var(--font-dela);
  color: var(--c-yellow);
  text-align: left;
  font-size: 13px; /* item 13px */
  line-height: 1;
  padding-left: 251px; /* 「item」左端をFigma x271に固定（card内content起点x20 → 251）。item01/02を縦揃え */
}
.un_good_item .num {
  font-size: 24px; /* 01/02 24px */
  margin-left: 2px; /* item右端→数字左端=2px（Figma）*/
}
.un_good_visual {
  position: relative;
  width: 369px; /* 369px */
  height: 190px;  /* 190px */
  margin: 14px auto 0; /* item→スター間隔をFigmaに合わせ */
  margin-left: -10px;
}
.un_good_visual .star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.un_good_visual .photo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.un_good_visual .photo img {
  position: absolute;
  max-width: none;
  display: block;
}
/* 各グッズの画像トリミング（仮素材 img32 を Figma 指定で表示） */
.un_good_visual .g1 { width: 321px; height: 104px; }
.un_good_visual .g1 img { width: 347.51%; height: 600.64%; left: -122.41%; top: -450%; }
/* good2：プロミィのぷくぷくシール合成画像（569×255 をトリミングせず全体表示） */
.un_good_visual .g2 { width: 320px; height: 143px; }
.un_good_visual .g2 img { 
  position: static; 
  width: 89%; 
  height: 100%; 
  object-fit: contain;
  margin-left: 18px;
  margin-top: 1px; }
.un_good_ttl {
  margin-top: 17px; /* 画像→見出し=17px（Figma）*/
  font-weight: 600;
  font-size: 16px; /* 16px（Hiragino W6）*/
  line-height: 1.8; /* Figma 1.8 */
  color: var(--c-yellow);
  text-align: left;
}
.un_good_txt {
  margin-top: 10px; /* 見出し→本文=10px（Figma）*/
  font-weight: 600;
  font-size: 13px; /* 13px */
  line-height: 1.8;
  color: var(--c-yellow);
  text-align: left;
}
.un_good_memo {
  margin-top: 6px;
  font-size: 10px;
  color: #ffd0c8;
  text-align: left;
}

/* ============================================
   un_overview  開催概要
   ============================================ */
.un_overview {
  background: var(--c-yellow);
  padding: 0 20px 82px; /* 上:グッズカード→タイトル=60px(un_goods側padding) / 下:Line44→フッター=100px(+footer18) */
}
/* 開催概要 見出し（黄文字＋青フチ on 黄＝CSS再現が困難なため画像化） */
.un_overview_ttl {
  text-align: center;
  height: 43px; /* Figmaテキスト箱の高さ（位置基準を維持）*/
  display: flex;
  align-items: center;     /* 文字を箱内で縦中央に */
  justify-content: center;
}
.un_overview_ttl img {
  display: block;
  width: 110px;  /* 110px（Figma node 130:456 幅）*/
  height: auto;  /* 自然な高さ（約25px）で歪みなく表示 */
}
.un_overview_table {
  max-width: 350px;
  margin: 0 auto; /* タイトル箱下端から表開始（Figma：row1先頭 y4328）*/
  font-size: 13px; /* 13px */
  color: var(--c-blue);
}
.un_overview_row {
  display: flex;
  align-items: center; /* ラベル(dt)と値(dd)を縦中央揃え（Figma）*/
  gap: 0;
  padding: 20px 0 17.5px; /* 下padding17.5 + border2.5 = 20px（Figma：1行=63px / 2行=86px）*/
  border-bottom: 2.5px dotted var(--c-blue); /* 行下の青い点線（上線なし／2.5px）*/
  line-height: 1.769; /* Figma：1行=23px（13px×1.769）*/
  font-weight: 600;
}
.un_overview_row dt {
  flex: 0 0 99px; /* 値の開始位置をx119相当に */
}
.un_overview_row dd {
  flex: 1;
  text-align: left;
}
/* 最終行（主催：ＳＭＢＣコンシューマーファイナンス株式会社）だけ字間を詰める */
.un_overview_row:last-child dd {
  letter-spacing: -1.1px;
}
.un_overview_map {
  margin-left: 15px; /* 値テキスト末尾(x216)→MAP(x231)=15px（Figma node 130:450）*/
  color: var(--c-blue);
  font-size: 13px; /* 13px（値と同サイズ）*/
  text-decoration: underline; /* 丸囲みではなく下線（Figma）*/
  text-decoration-style: solid;
  text-underline-position: from-font;
}

/* ============================================
   un_footer  フッター
   ============================================ */
.un_footer {
  background: var(--c-yellow);
  padding: 18px 20px 0; /* 画像位置をFigmaに合わせ上へ */
  text-align: center;
}
.un_footer_banner {
  display: block;
  width: 350px; /* 350px */
  margin: 0 auto;
  border-radius: 10px;
}
.un_footer_share {
  margin-top: 80px; /* 画像→SHARE 80px（Figma）*/
}
.un_footer_share .label {
  font-family: var(--font-dela);
  font-size: 14px;
  color: var(--c-blue);
  letter-spacing: 2px;
}
.un_footer_sns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 21px; /* SHARE→SNS */
}
.un_footer_sns img {
  width: 68px;  /* 68px */
  height: 68px;
}
.un_footer_band {
  /* 親の左右padding(20px)を相殺して画面幅いっぱいに */
  margin: 80px -20px 0; /* SNS→赤帯 80px（Figma）*/
  height: 37px; /* フッター直前の帯のみ細い：上の .un_band(53px) を上書き */
}
.un_footer_band img {
  width: 344px; /* フッター用SVGの1枚分自然サイズ（上の .un_band img(363px) を上書き）*/
}
.un_footer_logo {
  width: 130px; /* 130px */
  margin: 40px auto 0; /* 赤帯→ロゴ */
}
.un_footer_info {
  margin-top: 33px; /* ロゴ→情報 */
  padding-bottom: 30px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px; /* 12px */
  line-height: 1.4;
  color: var(--c-blue);
}

/* ============================================
   sp_cta  SP追従CTA
   初期は非表示 → スクロールで画面下にフェードイン → フッターで消える（アニメ付き）
   ============================================ */
.sp_cta {
  position: fixed;
  bottom: 30px;
  left: 50%;
  width: 350px; /* 350px */
  z-index: 50;
  /* 初期状態：非表示（画面下に少し沈めて隠す）*/
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.sp_cta.is_show { /* スクロールで表示（画面下に追従固定したままフェードイン）*/
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.sp_cta a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 63px;        /* 63px */
  background: var(--c-red);
  border-radius: 6px; /* 6px */
  color: #fff;
  font-family: var(--font-gothic);
  font-weight: 800;      /* Hiragino W8 */
  font-size: 18px;     /* 18px */
  letter-spacing: 0.02em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* 浮遊感（filterだと白フチ影が前面化するので box-shadow） */
}
.sp_cta a::after { /* Figmaの白フチ重ね影（+5,+6） */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(5px, 6px);
  border: 2px solid var(--c-red);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  z-index: -1;
}
.sp_cta .ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;  /* 41.7px */
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--c-red);
  font-size: 20px;
  font-weight: 700;
}
.sp_cta .ico img {
  width: 16px;
  height: auto;
}

/* ============================================
   レスポンシブ
   - <768px : SP（vwスケール）
   - 768-1279px : 390px列センタリング（タブレット/小PC）
   - >=1280px : PC版（1280ステージ＋左右装飾画像＋CTA）
   ============================================ */
.pc_only {
  display: none;
}

@media (min-width: 768px) {
  html {
    font-size: 10px;
  }
  /* ≥768px：左右装飾を背景として表示。中心基準(calc(50%±))の固定配置なので、
     幅が狭まると左右が画面端でトリミングされ中央が残る（参考サイトと同挙動／背景は黄色で白くならない）*/
  .pc_only {
    display: block;
  }
  .pc_deco_left {
    position: fixed;
        top: 22px;
        left: calc(50% - 609px);
        width: 394px;
        height: auto;
        z-index: 1;
        pointer-events: none;
  }
  .pc_deco_right {
    position: fixed;
        top: 91px;
        left: calc(50% + 265px);
        width: 312px;
        height: auto;
        z-index: 1;
        pointer-events: none;
  }
  /* 中央コンテンツの全周シャドウ（参考: yell-project-moya と同実装）*/
  .ly_wrapper {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 1280px) {
  body {
    background: var(--c-yellow);
  }
  .ly_stage {
    position: relative;
    width: 1280px; /* 1280px */
    margin-inline: auto;
    background: var(--c-yellow);
    overflow: hidden;
  }
  .ly_wrapper {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    background: transparent;
    transform: translateX(-6px); /* Figma：中央コンテンツ(SP群)の中心がフレーム中心より6px左(x439/中心634) */
  }
}

/* 768px以上：CTAはPC版を同じ位置（中心基準x876）で表示。SP追従CTAは隠す。
   幅が狭まると右が画面端でトリミング（左右装飾と同じ中心基準）*/
@media (min-width: 768px) {
  .sp_cta {
    display: none;
  }

  /* CTA群（右上）：画面固定。中央基準でx876へ。短い画面では上に詰めて収める */
  .pc_cta {
    position: fixed;
    top: min(567px, calc(100vh - 160px)); /* 通常はy567、低い画面では上に詰めて収める */
    left: 50%;
    transform: translateX(236px); /* ステージ中央から +236px = x876 */
    width: 350px;  /* 350px */
    z-index: 6;
  }
  .pc_cta a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    border-radius: 6px;
    font-family: var(--font-gothic);
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
  }
  .pc_cta a::after { /* 影（白枠／赤の重ね） */
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(5px, 6px);
    border-radius: 6px;
    z-index: -1;
  }
  .pc_cta_btn {
    height: 63px;
    background: var(--c-red);
    color: #fff;
    font-size: 20px;
  }
  .pc_cta_btn::after {
    border: 2px solid var(--c-red);
    background: rgba(255, 255, 255, 0.6);
  }
  .pc_cta_sub {
    height: 64px;
    margin-top: 21px; /* y651 - (y567+63) */
    background: #fff;
    border: 2px solid var(--c-red);
    color: var(--c-red);
    font-size: 15px;
  }
  .pc_cta_sub::after {
    background: var(--c-red);
  }
  .pc_cta .ico {
    position: absolute;
    right: 10px; /* Figma：アイコン右端=ボタン右端から約10px（icon x1173+43.05=1216 / btn右1226）*/
    top: 50%;
    transform: translateY(-50%);
    width: 43px; /* Figma 43.05px */
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
  }
  .pc_cta_btn .ico {
    background: #fff;
    color: var(--c-red);
  }
  .pc_cta_sub .ico {
    background: #fff; /* 塗りなし（白）*/
    color: var(--c-red); /* 矢印は赤 */
    border: 2px solid var(--c-red); /* 赤い円の枠線（Figma）*/
  }
  .pc_cta .ico img {
    width: 16px;
    height: auto;
  }
}