/* ==========================================================================
   JRA-VAN オリジナルグッズ LP
   CSS file: jv-oshigoods-lp.css
   NOTE: Shift_JISで保存（サーバ配信時はContent-Typeのcharsetも合わせてください）
   ========================================================================== */

.oglp{
  padding: 10px 0 34px;
}

.oglp-wrap{
  max-width: 720px;
  margin: 0 auto;
}

/* 余白を詰めて、スマホで商品を大きく */
.oglp-section{
  margin-top: 0; /* 「商品一覧」見出し側で余白を持たせる */
}

/* =========================
   ページ大見出し（赤枠）
========================= */
.oglp-pageHeader{
  padding-top: 8px;
  padding-bottom: 10px;
}
.oglp-pageTitle{
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: 1.25;
}
.oglp-pageTitle__store{
  margin-left: 6px;
}

/* =========================
   セクション見出し（緑枠）
========================= */
.oglp-sectionHead{
  margin-top: 22px;   /* ヒーローと見出しの間を“もっと余白” */
  margin-bottom: 10px;/* 見出しとカードの間 */
}
.oglp-sectionTitle{
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .02em;
}


/* Hero Carousel (画像のみ) */
.oglp-hero{ margin-top: 6px; }
.oglp-heroCarousel{
  position: relative;
}
.oglp-heroCarousel__viewport{
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe6f2;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  aspect-ratio: 1376 / 768;
}
.oglp-heroCarousel__track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .28s ease;
  will-change: transform;
}
.oglp-heroCarousel__slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.oglp-heroImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oglp-heroCarousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(219,230,242,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  display: grid;
  place-items: center;
}
.oglp-heroCarousel__btn:active{
  transform: translateY(-50%) scale(.98);
}
.oglp-heroCarousel__btn--prev{ left: 10px; }
.oglp-heroCarousel__btn--next{ right: 10px; }

.oglp-heroCarousel__dots{
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.oglp-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(84,101,122,.35);
  background: rgba(255,255,255,.72);
  cursor: pointer;
}
.oglp-dot.is-on{
  width: 20px;
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.25);
}

/* Card */
.oglp-card{
  background: #ffffff;
  border: 1px solid #dbe6f2;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  margin: 0 0 14px;
}
.oglp-card__media{
  padding: 12px;
}
.oglp-card__body{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(219,230,242,.85);
}

.oglp-h2{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .01em;
}
.oglp-h2--tight{ margin-bottom: 6px; }

.oglp-muted{
  margin: 0 0 10px;
  color: #54657a;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}

/* 送料無料タグ（左寄せ） */
.oglp-titleRow{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.oglp-tagFree{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  color: #0d5130;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

/* Product carousel (1列) */
.oglp-vcar__viewport{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #dbe6f2;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  aspect-ratio: 4 / 3; 
}
.oglp-vcar__track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .28s ease;
  will-change: transform;
}
.oglp-vcar__slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.oglp-prodImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   追加：キーホルダー画像の表裏フリップ
   - マグカップには適用しない（data-flip="keyholder" のみ）
========================================= */
.oglp-flip{
  width: 100%;
  height: 100%;
  perspective: 900px;
}

.oglp-flipInner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2,.8,.2,1);
}

/* 表裏の面 */
.oglp-flipFace{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 裏面は最初から180度回しておく */
.oglp-flipFace--back{
  transform: rotateY(180deg);
}

/* JSで付与：反転状態 */
.oglp-flip.is-flipped .oglp-flipInner{
  transform: rotateY(180deg);
}

/* PC：ホバーでも反転（hoverできる端末だけ） */
@media (hover:hover){
  .oglp-flip[data-flip="keyholder"]:hover .oglp-flipInner{
    transform: rotateY(180deg);
  }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  .oglp-flipInner{ transition: none; }
}

.oglp-vcar__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(219,230,242,.95);
  background: rgba(255,255,255,.90);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  display: grid;
  place-items: center;
}
.oglp-vcar__btn:active{
  transform: translateY(-50%) scale(.98);
}
.oglp-vcar__btn--prev{ left: 10px; }
.oglp-vcar__btn--next{ right: 10px; }

/* 馬名セレクタ（共通） */
.oglp-vcar__names{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* 2列（2行想定）：例）マグカップ */
.oglp-vcar__names--2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3列（3行想定）：例）キーホルダー（旧 #keyholder をリネーム） */
.oglp-vcar__names--3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1行目3頭 */
  gap: 10px;
}

/* 2行目の2頭を「左・中央」に配置（旧 #keyholder をリネーム） */
.oglp-vcar__names--3 .oglp-namePill:nth-child(4){
  grid-column: 1; /* 2行目 左 */
}
.oglp-vcar__names--3 .oglp-namePill:nth-child(5){
  grid-column: 2; /* 2行目 中央 */
}

/* ボタンの見た目（共通） */
.oglp-namePill{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #dbe6f2;
  background: #f6fbff;
  color: #1f2a37;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* 旧：.oglp-card#keyholder のフォント調整を --3 に移植 */
@media (max-width: 420px){
  .oglp-vcar__names--3 .oglp-namePill{
    font-size: clamp(10px, 3.2vw, 10px);
  }
}


.oglp-namePill:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
.oglp-namePill.is-picked{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}

/* Price row */
.oglp-priceRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.oglp-price{
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .01em;
}
.oglp-tax{
  font-size: 12px;
  font-weight: bold;
  color: #54657a;
}
.oglp-picked{
  font-size: 12px;
  font-weight: bold;
  color: #54657a;
}

/* Buttons */
.oglp-btnRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.oglp-btn{
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.oglp-btn--primary{
  color: #fff;
  border-color: rgba(22,163,74,.35);
  background: linear-gradient(180deg, #2ecc71, #16a34a);
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}
.oglp-btn--primary:active{
  transform: translateY(1px);
}
/* =========================
   QR遷移（キラー機能）ボタン：Teal（青緑）
   - 緑系トーンで統一感
   - 彩度を抑えてチカチカ軽減
   - 白文字の可読性を確保
========================= */
.oglp-btn--pink{
  position: relative;
  color: #fff;
  border: 1px solid rgba(13, 148, 136, .55);
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 60%, #0b5f59 100%);
  box-shadow: 0 10px 22px rgba(15, 118, 110, .20);
  letter-spacing: .02em;
  padding-left: 56px; /* QRバッジ分 */
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

/* =========================
   推し活：QR遷移（キラー機能）ボタン
   - 推し活文脈（ピンク×パープルの透明感）
   - チカチカしない彩度/コントラスト設計
   - 文字の視認性UP（白文字＋薄い影）
========================= */
.oglp-btn--pink{
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);

  /* 推し活キャンディ：主役は2色に絞って“うるささ”を抑える */
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 160% at 90% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ff4fb7 0%, #a855f7 65%, #7c3aed 100%);

  box-shadow:
    0 10px 22px rgba(168, 85, 247, .18),
    0 6px 14px rgba(255, 79, 183, .12);

  font-weight: 800;
  letter-spacing: .02em;

  /* QRバッジ分の余白（左に“機能感”を固定表示） */
  padding-left: 60px;

  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

/* 左側の“QR”ピル（推し活っぽい透明バッジ） */
.oglp-btn--pink::before{
  content: "QR";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* “キラッ”を1本だけ（やりすぎない） */
.oglp-btn--pink::after{
  content: "";
  position: absolute;
  inset: -40% -20%;
  transform: rotate(12deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: .35;
  pointer-events: none;
}

.oglp-btn--pink:hover{
  filter: brightness(1.04) saturate(1.02);
  box-shadow:
    0 12px 26px rgba(168, 85, 247, .20),
    0 8px 18px rgba(255, 79, 183, .14);
}

.oglp-btn--pink:active{
  transform: translateY(1px);
  filter: brightness(1.02);
}

.oglp-btn--pink:focus{
  outline: none;
  box-shadow:
    0 12px 26px rgba(168, 85, 247, .20),
    0 0 0 3px rgba(22, 163, 74, .18); /* サイト全体のフォーカスと統一 */
}

/* 強制的に“光りすぎ”を抑えたい場合の保険（任意） */
@media (prefers-reduced-motion: reduce){
  .oglp-btn--pink{ transition: none; }
}

/* sold out 表示（ボタン位置に赤文字） */
.oglp-soldout{
  display: none;              /* 初期は非表示（JSで必要時のみ表示） */
  min-height: 46px;           /* ボタンと高さを合わせてレイアウト崩れ防止 */
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: bold;
  font-size: 14px;
  color: #dc2626;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Modal */
body.oglp-isModal{
  overflow: hidden;
}
.oglp-modalOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.45);
  z-index: 120;
}
.oglp-modalOverlay.is-open{
  display: flex;
}
.oglp-modalPanel{
  width: min(560px, 100%);
  border-radius: 22px;
  background: #fff;
  border: 1px solid #dbe6f2;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.oglp-modalHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
}
.oglp-modalTitle{
  font-weight: bold;
  font-size: 15px;
  line-height: 1.35;
}
.oglp-modalClose{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #dbe6f2;
  background: #f6fbff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.oglp-modalBody{
  padding: 0 14px 14px;
}
.oglp-modalImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(219,230,242,.85);
}

/* PC: カードを少し横並び（見切れ防止の範囲で） */
@media (min-width: 768px){
  .oglp-section{ margin-top: 0; } /* 見出し側で管理 */
  .oglp-sectionHead{ margin-top: 28px; margin-bottom: 12px; }
  .oglp-btnRow{ grid-template-columns: 1fr 1fr; }
  .oglp-card__media{ padding: 14px; }
  .oglp-card__body{ padding: 14px 16px 16px; }
}

/* =========================================================
   追加：ページ大見出し（赤枠）
   ========================================================= */
.oglp-pageHeader{
  margin: 10px 0 12px; /* 上の白余白を埋めつつ、Heroとの間隔も確保 */
}

.oglp-pageTitle{
  margin: 0;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oglp-pageTitle::before{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 4px;          /* ★ここがポイント：角丸四角 */
  background: #16a34a;
  flex: 0 0 18px;
  align-self: center;
  transform: translateY(2px);  /* ずれ調整はそのまま使える */
}

.oglp-pageTitle__sub{
  font-weight: bold;
}

/* =========================================================
   追加：商品一覧（緑枠） + 余白を増やす
   ========================================================= */
.oglp-productsHeader{
  margin-top: 18px;   /* Heroの下を「もっと余白」 */
  margin-bottom: 10px;
}

.oglp-productsTitle{
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .01em;
}

@media (min-width: 768px){
  .oglp-pageTitle{ font-size: 20px; }
  .oglp-productsHeader{ margin-top: 22px; margin-bottom: 12px; }
}

/* Hero画像をタップ可能に（リンクを全面に） */
.oglp-heroLink{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

/* 固定ヘッダー等でスクロール後に見出しが隠れるのを軽減（保険） */
#keyholder, #mug{
  scroll-margin-top: 12px;
}

/* =========================
   追加：ストア遷移前の会員状態ポップアップ
========================= */
.oglp-gatePanel{
  width: min(620px, 100%);
}

.oglp-gateHeader{
  padding-bottom: 12px;
}

.oglp-gateHeadTexts{
  display: grid;
  gap: 4px;
}

.oglp-gateKicker{
  font-size: 12px;
  font-weight: bold;
  color: #54657a;
}

.oglp-gateDesc{
  font-size: 12px;
  font-weight: bold;
  color: #54657a;
  line-height: 1.45;
}

.oglp-gatePicked{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid #dbe6f2;
  background: #f6fbff;
}

.oglp-gatePickedTag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(84,101,122,.25);
  background: rgba(255,255,255,.85);
  color: #54657a;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.oglp-gatePickedPill{
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(219,230,242,.95);
  background: rgba(255,255,255,.9);
  color: #1f2a37;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   ストア遷移前の会員状態ポップアップ（2カード）
========================= */

.oglp-gateOptions{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* 2択カードの基本 */
.oglp-gateOption{
  cursor: pointer;
}

/* ラジオは視覚的に隠す（アクセシビリティは維持） */
.oglp-gateRadio{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* カード本体 */
.oglp-gateOption--card{
  position: relative;
  display: block;
  padding: 0;
}

.oglp-gateCard{
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 14px 14px;
  border-radius: 16px;
  border: 1px solid #dbe6f2;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

/* 選択状態：緑の面＋枠 */
.oglp-gateOption.is-on .oglp-gateCard{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.06);
}

/* 右上：丸（常に表示） */
.oglp-gateOption--card .oglp-gateCard::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(84,101,122,.28);
  background: rgba(255,255,255,.95);
}

/* 右上：チェック（選択時だけ表示 / Shift_JIS安全：FontAwesomeコード） */
.oglp-gateOption--card .oglp-gateCard::before{
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  display: none;
  place-items: center;
  border-radius: 999px;
}

.oglp-gateOption.is-on .oglp-gateCard::after{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.12);
}

.oglp-gateOption.is-on .oglp-gateCard::before{
  display: grid;
  content: "\f00c";          /* fa-check */
  font-family: FontAwesome;  /* 読み込み済みの前提（4.7.0） */
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  color: #0d5130;
}

/* タイトル/サブ */
.oglp-gateCardTitle{
  font-weight: bold;
  font-size: 13px;
  color: #1f2a37;
  letter-spacing: .01em;
}

.oglp-gateCardSub{
  font-weight: bold;
  font-size: 12px;
  color: #54657a;
  line-height: 1.45;
}

/* 上カードのバッジ（視線誘導：控えめ） */
.oglp-gateBadge{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  color: #0d5130;
  font-size: 11px;
  font-weight: bold;
}

/* =========================
   「つぎへ / キャンセル」ボタン（古臭さ解消）
========================= */
.oglp-gateActions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.oglp-gateBtn{
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.oglp-gateBtn--go{
  color: #fff;
  border-color: rgba(22,163,74,.35);
  background: linear-gradient(180deg, #2ecc71, #16a34a);
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}
.oglp-gateBtn--go:active{
  transform: translateY(1px);
}

.oglp-gateBtn--cancel{
  color: #1f2a37;
  border-color: #dbe6f2;
  background: #f6fbff;
}
.oglp-gateBtn--cancel:active{
  transform: translateY(1px);
}

.oglp-gateBtn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

/* =========================
   未登録/未DL 案内ブロック
========================= */
.oglp-gateNotice{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(22,163,74,.18);
  background: rgba(22,163,74,.05);
  color: #1f2a37;
}

.oglp-gateNoticeLead{
  font-weight: bold;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.oglp-gateNoticeSteps{
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.oglp-gateStep{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(219,230,242,.95);
  background: rgba(255,255,255,.9);
  font-weight: bold;
  font-size: 12px;
  color: #54657a;
}

.oglp-gateNoticeFoot{
  margin-top: 10px;
  font-weight: bold;
  font-size: 12px;
  color: #54657a;
  line-height: 1.5;
}

.oglp-gateFreeNotice__lead{
  font-weight: bold;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.oglp-gateFreeNotice__list{
  margin: 0 0 10px;
  padding-left: 1.2em;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.7;
}

.oglp-gateFreeNotice__foot{
  font-weight: bold;
  font-size: 12px;
  color: #54657a;
  line-height: 1.6;
}

/* =========================================
   追加：無料会員案内の下の遷移ボタン（横並び）
========================================= */
.oglp-gateLinks{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* =========================================================
   追加：992px以上は「ボタン」ではなく「QRコード」を表示
   ========================================================= */
.oglp-hideAt992{ display: block; }
.oglp-showAt992{ display: none; }

/* QRカード（初期は隠す：992px以上で表示） */
.oglp-gateQr{
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(219,230,242,.95);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  text-align: center;
}

.oglp-gateQr__title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
  color: #1f2a37;
  margin-bottom: 10px;
}

.oglp-gateQr__imgLink{
  display: inline-block;
  text-decoration: none;
}

.oglp-gateQr__img{
  width: min(260px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(219,230,242,.95);
  background: #f6fbff;
}

.oglp-gateQr__note{
  margin-top: 10px;
  font-weight: bold;
  font-size: 12px;
  color: #54657a;
  line-height: 1.5;
}

.oglp-gateQr__textLink{
  display: inline-block;
  margin-top: 8px;
  font-weight: 900;
  font-size: 12px;
  color: #16a34a;
  text-decoration: underline;
}

.oglp-gateQr__textLink:focus,
.oglp-gateQr__imgLink:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
  border-radius: 12px;
}

/* ★要件：992px以上で切り替え */
@media (min-width: 992px){
  .oglp-hideAt992{ display: none; }
  .oglp-showAt992{ display: block; }

  /* PCはQRを中央に寄せたいのでflexからblock寄りに */
  .oglp-gateLinks{
    display: block;
  }
}


.oglp-gateLinkBtn{
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
}


.oglp-gateLinkBtn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.oglp-gateLinkBtn:active{
  transform: translateY(1px);
}

/* スマホアプリ：ブランドグリーン寄せ */
.oglp-gateLinkBtn--app{
  color: #fff;
  border-color: rgba(22,163,74,.35);
  background: linear-gradient(180deg, #2ecc71, #16a34a);
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}

/* PCサービス：別系統（ブルー）で視認性を分ける */
.oglp-gateLinkBtn--pc{
  color: #fff;
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}

/* 画面が極端に狭いときだけ2段（押しやすさ優先） */
@media (max-width: 360px){
  .oglp-gateLinks{
    flex-direction: column;
  }
}

/* =========================================================
   運用拡張：特殊ボタンのデザインバリエーション（未使用でもOK）
   - 既存 .oglp-btn--pink は現行デザインのまま
   ========================================================= */
.oglp-btn--teal{
  position: relative;
  color: #fff;
  border: 1px solid rgba(13, 148, 136, .55);
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 60%, #0b5f59 100%);
  box-shadow: 0 10px 22px rgba(15, 118, 110, .20);
  letter-spacing: .02em;
}

.oglp-btn--teal:active{
  transform: translateY(1px);
}

.oglp-btn--teal:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.oglp-btn--outline{
  color: #0d5130;
  border: 1px solid rgba(22,163,74,.35);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.oglp-btn--outline:active{
  transform: translateY(1px);
}

.oglp-btn--outline:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.oglp-btn--green{
  color: #fff;
  border-color: rgba(22,163,74,.35);
  background: linear-gradient(180deg, #2ecc71, #16a34a);
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}

.oglp-btn--green:active{
  transform: translateY(1px);
}

.oglp-btn--green:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

/* =========================================================
   運用拡張：反転ON/OFF（data-flip-enabled）
   - 運用前提：data-flip-enabled は article.oglp-card のみで管理
   - 裏画像がある場合だけ hover を効かせる（JSが .oglp-hasBack を付与）
   ========================================================= */

/* 反転できない（商品がOFF）＝カーソル抑制 */
article.oglp-card[data-flip-enabled="0"] .oglp-flip{
  cursor: default;
}

/* 反転できる（商品がON）＆裏あり＝カーソルOK（任意） */
article.oglp-card[data-flip-enabled="1"] .oglp-flip.oglp-hasBack{
  cursor: pointer;
}

/* PC：ホバーでも反転（hoverできる端末だけ）
   - 商品がON
   - かつ裏がある（.oglp-hasBack）
*/
@media (hover:hover){
  article.oglp-card[data-flip-enabled="1"] .oglp-flip.oglp-hasBack:hover .oglp-flipInner{
    transform: rotateY(180deg);
  }

  /* 商品がOFF のときは hover でも回さない（保険） */
  article.oglp-card[data-flip-enabled="0"] .oglp-flip:hover .oglp-flipInner{
    transform: none;
  }
}


/* =========================================
   QRモーダル：読み取り→遷移フロー（矢印デカすぎ対策）
   ========================================= */

/* モーダル内の文章＋フローの余白 */
.oglp-modalBody .oglp-modalLead{
  margin: 0 0 12px;
  line-height: 1.7;
}

/* 3カラム（左：QR / 中：矢印 / 右：スマホ）で安定させる */
.oglp-qrFlow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

/* 画像が“実寸で暴れる”のを止める（超重要） */
.oglp-qrFlow__img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 矢印の箱を固定サイズにして、内部SVG/IMGを必ず収める */
.oglp-qrFlow__arrow{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #94a3b8;
  flex: 0 0 auto;
}
.oglp-qrFlow__arrow svg,
.oglp-qrFlow__arrow img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  object-fit: contain;
}

/* キャプション */
.oglp-qrFlow__cap{
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

/* SPは縦積み＋矢印は下向き（回転） */
@media (max-width: 599.98px){
  .oglp-qrFlow{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .oglp-qrFlow__arrow{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

/* PCはスマホ画像がデカくなりすぎないように上限をつける（任意） */
@media (min-width: 960px){
  .oglp-qrFlow__phone{
    max-width: 360px;
    margin-left: auto;
  }
  .oglp-qrFlow__keyholder{
    max-width: 520px;
    margin-right: auto;
  }
}

/* =========================================================
   QRモーダル：スマホで「はみ出し」を防ぐ
   ========================================================= */

/* モーダル自体を画面内に収める（共通） */
#qrModal .oglp-modalPanel{
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
}

/* ヘッダー分を除いた領域をスクロール可能にする */
#qrModal .oglp-modalBody{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
}

/* モーダル内の画像は基本はみ出さない */
#qrModal .oglp-modalBody img{
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* --- スマホだけ：縦長の「スマホ画像」を小さく＆収める --- */
@media (max-width: 767.98px){
  #qrModal .oglp-modalPanel{
    width: min(92vw, 520px);
  }

  /* =========================================================
     QRモーダル：表示崩れ防止（Panel内スクロール）
  ========================================================= */
  #qrModal .oglp-modalPanel{
    max-height: min(92vh, 860px);
    display: flex;
    flex-direction: column;
  }

  #qrModal .oglp-modalBody{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 14px; /* 既存(0 14px 14px)より詰める */
  }

  /* =========================================================
     QRモーダル：説明文
  ========================================================= */
  #qrModal .oglp-modalLead{
    margin: 0 0 10px;
    line-height: 1.7;
    font-weight: 700;
    color: #1f2a37;
  }

  /* =========================================================
     QRモーダル：読み取り→遷移フロー（oglp-qrFlow を正とする）
     - PC: 3カラム（QR / 矢印 / スマホ）
     - SP: 縦積み、余白を詰める、スマホを4/5に
  ========================================================= */
  #qrModal .oglp-qrFlow{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    justify-items: center;
  }

  #qrModal .oglp-qrFlow figure{
    margin: 0; /* figureのデフォ余白を殺す */
  }

  #qrModal .oglp-qrFlow__img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* 矢印：箱を固定して暴れない */
  #qrModal .oglp-qrFlow__arrow{
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #94a3b8;
  }
  #qrModal .oglp-qrFlow__arrow svg,
  #qrModal .oglp-qrFlow__arrow img{
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
  }

  /* キャプション：余白を詰める */
  #qrModal .oglp-qrFlow__cap{
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #54657a;
    text-align: center;
  }

  /* PCでの上限（任意：見た目の安定） */
  @media (min-width: 960px){
    #qrModal .oglp-qrFlow__keyholder{ max-width: 520px; }
    #qrModal .oglp-qrFlow__phone{ max-width: 360px; }
  }

  /* SP：縦積み + 余白詰め + スマホ4/5 */
  @media (max-width: 599.98px){
    #qrModal .oglp-qrFlow{
      grid-template-columns: 1fr;
      gap: 6px;        /* ← 余白詰め */
    }

    #qrModal .oglp-qrFlow__arrow{
      width: 34px;
      height: 34px;
      transform: rotate(90deg);
      opacity: .55;
    }

    /* キーホルダー：少しだけ小さめ */
    #qrModal .oglp-qrFlow__keyholder{
      width: min(92%, 420px);
    }

    /* スマホ：幅を絞る（これだけでも4/5相当） */
    #qrModal .oglp-qrFlow__phone{
      width: min(72%, 340px);
    }
  }
}

/* =========================================================
   QRモーダル専用：推し感のある見出し（PC/SP共通）
   ※他モーダルには一切効かない：#qrModal に固定
   ========================================================= */
#qrModal .oglp-modalHeader{
  position: relative;
  padding: 14px 14px 10px;
}

#qrModal .oglp-modalTitle{
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: .02em;
  padding-left: 30px;
}

#qrModal .oglp-modalTitle::before{
  content: "★";
  position: absolute;
  left: 0;
  top: .05em;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(140% 140% at 25% 20%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ff4fb7 0%, #a855f7 70%, #7c3aed 100%);
  box-shadow:
    0 6px 14px rgba(168, 85, 247, .18),
    0 4px 10px rgba(255, 79, 183, .12);
  font-size: 12px;
  font-weight: 900;
}

#qrModal .oglp-modalTitle::after{
  content: "";
  position: absolute;
  left: 30px;
  right: 6px;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,79,183,0),
    rgba(255,79,183,.55),
    rgba(168,85,247,.55),
    rgba(124,58,237,0)
  );
  opacity: .9;
}

/* =========================================================
   QRモーダル限定：キーホルダーQRの“チカチカ（発光＋点滅）”
   - #qrModal の中だけ
   - prefers-reduced-motion も考慮
   ========================================================= */

/* 置き場所：キーホルダー画像のfigureを基準にする */
#qrModal .oglp-qrFlow__keyholder{
  position: relative;
}

/* QRグロー本体（HTMLの span.oglp-qrFlow__qrGlow を使用） */
#qrModal .oglp-qrFlow__qrGlow{
  position: absolute;

  /* ▼QRの位置：まずはこの数値を調整する（これが“効く場所”） */
  left: 10.2%;
  top: 41%;

  /* ▼QRのサイズ：これも調整ポイント */
  width: 26%;
  aspect-ratio: 1 / 1;

  pointer-events: none;

  /* 角の“コーナー”っぽい見た目（参考CSSの conic-gradient 方式） */
  --r: 10px;
  --c: rgba(255, 79, 183, 1); /* ピンク寄り */
  background:
    conic-gradient(from 90deg at var(--r) var(--r), var(--c) 90deg, transparent 0) top left,
    conic-gradient(from 0deg at calc(100% - var(--r)) var(--r), var(--c) 90deg, transparent 0) top right,
    conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), var(--c) 90deg, transparent 0) bottom left,
    conic-gradient(from -90deg at calc(100% - var(--r)) calc(100% - var(--r)), var(--c) 90deg, transparent 0) bottom right;
  background-size: 22% 22%;
  background-repeat: no-repeat;

  border-radius: 12px;

  /* 白縁＋外側リング＋グロー */
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.98),
    0 0 0 3px rgba(168, 85, 247, .92),
    0 0 18px 8px rgba(255, 79, 183, .35);

  /* “脈動”＋“点滅” */
  animation:
    oglpQrPulse .9s ease-in-out infinite,
    oglpQrFlash 1.1s steps(2, end) infinite;

  transform-origin: center;
}

/* 発光の強弱（脈動） */
@keyframes oglpQrPulse{
  0%{
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,.95),
      0 0 0 3px rgba(168, 85, 247, .80),
      0 0 8px 4px rgba(255, 79, 183, .22);
    transform: scale(1);
    opacity: .92;
  }
  50%{
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,1),
      0 0 0 3px rgba(168, 85, 247, 1),
      0 0 22px 12px rgba(255, 79, 183, .48);
    transform: scale(1.015);
    opacity: 1;
  }
  100%{
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,.95),
      0 0 0 3px rgba(168, 85, 247, .80),
      0 0 8px 4px rgba(255, 79, 183, .22);
    transform: scale(1);
    opacity: .92;
  }
}

/* チカチカ（明るさを段階的に切り替え） */
@keyframes oglpQrFlash{
  0%, 49%{ filter: brightness(1) saturate(1); }
  50%, 100%{ filter: brightness(1.18) saturate(1.25); }
}

/* 動きを減らす設定の人には点滅を止める */
@media (prefers-reduced-motion: reduce){
  #qrModal .oglp-qrFlow__qrGlow{
    animation: oglpQrPulse 1.8s ease-in-out infinite;
  }
}

@media (min-width: 768px){
  #qrModal .oglp-qrFlow__qrGlow{
    top: 38%; /* ←ここを 41% から ±1% いじる */
  }
}

/* 追加：992px切替は必ず勝たせる */
.oglp-hideAt992{ display: block !important; }
.oglp-showAt992{ display: none !important; }

@media (min-width: 992px){
  .oglp-hideAt992{ display: none !important; }
  .oglp-showAt992{ display: block !important; }
}

@media (max-width: 767.98px){
  /* 裏面ありの時だけ出す（JSが .oglp-hasBack を付与） */
  article.oglp-card[data-product-id="keyholder"] .oglp-flip.oglp-hasBack{
    position: relative; /* ヒントの配置基準 */
  }

  article.oglp-card[data-product-id="keyholder"] .oglp-flip.oglp-hasBack::after{
    content: "タップして裏面をチェック";
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;

    padding: 3px 7px;
    border-radius: 999px;

    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;

    box-shadow: 0 6px 16px rgba(0,0,0,.18);

    pointer-events: none;      /* 重要：タップを邪魔しない */
    user-select: none;
    -webkit-user-select: none;

    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    opacity: 1;
    transition: opacity .15s ease;
  }

  /* 裏面表示中は消す（見栄えと可読性優先） */
  article.oglp-card[data-product-id="keyholder"] .oglp-flip.oglp-hasBack.is-flipped::after{
    opacity: 0;
  }
}