@charset "utf-8";
/* ==========================================================================
   オプトインページ CSS
   Theme : GRAY #404040 × HEAVY RED FRAME × GOLD  ／ イベントページと同じトーン
   --------------------------------------------------------------------------
   目次
   00. 変数 / リセット
   01. 背景
   02. ページ土台
   03. ロゴ挿入部分
   04. レター挿入部分（見出し・本文・装飾）
   04-b. 幅いっぱいに広げる文字（.op-fit）
   04-c. 枠付きの特大見出し（.op-banner）
   05. レター内 CTA ボタン
   06. メールアドレス登録フォーム
   07. フッター
   08. レスポンシブ
   ========================================================================== */

/* ==========================================================================
   00. 変数 / リセット
   ========================================================================== */
   .firstview img {
  width: 100%;
  max-width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

:root {
  /* ---- グレー（母体） ---- */
  --c-bg:        #404040;
  --c-surface:   #484848;
  --c-surface-2: #424242;
  --c-sunken:    #2f2f2f;   /* 入力欄 */
  --c-line:      #5e5e5e;

  /* ---- レッド（枠・行動） ---- */
  --c-red:       #b3242e;
  --c-red-hi:    #d8434d;
  --c-red-dp:    #6e1219;
  --c-red-lt:    #e8636d;
  --grad-red:    linear-gradient(100deg, #8d1a22, #cf3440 46%, #a01f28);
  --grad-red-v:  linear-gradient(180deg, #d8434d, #b3242e 45%, #7d151c);

  /* ---- ゴールド（強調） ---- */
  --c-gold:      #d8b45c;
  --c-gold-lt:   #f2dfa4;
  --c-gold-dp:   #a87f22;
  --grad-gold:   linear-gradient(115deg,
                   #b48b2a 0%, #f0dc9c 26%, #d8b45c 48%,
                   #fbf0cd 68%, #b48b2a 100%);
  --grad-gold-v: linear-gradient(170deg, #f0dc9c 0%, #d8b45c 45%, #a87f22 100%);

  /* ---- 文字 ---- */
  --c-text:      #ffffff;
  --c-text-sub:  #dedede;
  --c-text-dim:  #b6b6b6;
  --c-text-mute: #949494;

  /* ---- サイズ ---- */
  --w-letter:    900px;    /* レターの横幅 */
  --frame-w:     3px;      /* 外枠の太さ */

  /* ---- 影 ---- */
  --frame-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .55),
      inset 0 2px 0 1px rgba(255, 255, 255, .07),
      inset 0 -2px 0 1px rgba(0, 0, 0, .28),
      0 0 0 1px rgba(0, 0, 0, .45),
      0 10px 22px rgba(0, 0, 0, .38),
      0 26px 52px -24px rgba(0, 0, 0, .95);

  --tshadow:     0 1px 2px rgba(0, 0, 0, .45);
  --tshadow-lg:  0 2px 4px rgba(0, 0, 0, .55);

  /* ---- ざらつき（濃さ → opacity / 粒 → baseFrequency） ---- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");

  /* ---- 書体 ---- */
  --font-jp:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                 "Meiryo", system-ui, sans-serif;
  --font-en:     "Oswald", "Arial Narrow", "Noto Sans JP", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .03em;
  text-shadow: var(--tshadow);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--c-gold); }

/* ==========================================================================
   01. 背景
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 620px at 6% -12%, rgba(179, 36, 46, .30), transparent 68%),
    radial-gradient(880px 560px at 100% 2%,  rgba(216, 180, 92, .16), transparent 70%),
    radial-gradient(1100px 780px at 50% 118%, rgba(0, 0, 0, .45),     transparent 72%);
}

/* ==========================================================================
   02. ページ土台
   ========================================================================== */
.op-page {
  position: relative;
  z-index: 1;
}

.op-main {
  max-width: var(--w-letter);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px) clamp(14px, 4vw, 24px) 60px;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 32px);
}

/* 共通のパネル（レター・フォームの外枠） */
.op-letter,
.op-frame {
  position: relative;
  border-radius: 5px;
  border: var(--frame-w) solid var(--c-red);
  border-top-color: var(--c-red-hi);
  border-bottom-color: var(--c-red-dp);
  box-shadow: var(--frame-shadow);
  background:
    var(--noise),
    linear-gradient(180deg, #4f4f4f, var(--c-surface) 55%, #434343 100%);
  background-size: 160px 160px, auto;
  background-blend-mode: overlay, normal;
  overflow: hidden;
}

/* ==========================================================================
   03. ロゴ挿入部分
   ========================================================================== */
.op-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(150px, 22vw, 240px);
  padding: 34px clamp(16px, 4vw, 40px);
  overflow: hidden;
  background:
    var(--noise),
    radial-gradient(700px 320px at 20% 0%,   rgba(179, 36, 46, .48), transparent 70%),
    radial-gradient(640px 320px at 84% 100%, rgba(216, 180, 92, .22), transparent 70%),
    linear-gradient(165deg, #565656, #363636);
  background-size: 160px 160px, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal;
  border-bottom: var(--frame-w) solid var(--c-red);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .95);
}
/* 走るハイライト */
.op-hero::before {
  content: "";
  position: absolute;
  top: -60%; left: -35%;
  width: 42%; height: 220%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .16), transparent);
  transform: rotate(12deg);
  animation: op-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes op-sheen {
  0%   { transform: translateX(0) rotate(12deg); opacity: 0; }
  18%  { opacity: 1; }
  60%  { transform: translateX(350%) rotate(12deg); opacity: 0; }
  100% { transform: translateX(350%) rotate(12deg); opacity: 0; }
}

.op-hero__img { max-height: 180px; width: auto; position: relative; }

.op-hero__ph {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
}
.op-hero__ph strong {
  font-size: clamp(20px, 4.2vw, 36px);
  font-weight: 900;
  letter-spacing: .1em;
  text-indent: .1em;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .8);
}
.op-hero__ph span {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--grad-gold);
  border: 1px solid rgba(168, 127, 34, .6);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #33270a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   04. レター挿入部分
   --------------------------------------------------------------------------
   .op-letter__body の中に流し込むと、以下がそのまま整形されます。

     <h2>          … 大見出し（左に赤いバー）
     <h3>          … 小見出し（下にゴールドの線）
     <p>           … 本文
     <p class="op-lead">        … リード文（囲み）
     <strong>      … 太字（ゴールド）
     <span class="op-marker">   … マーカー
     <span class="op-red">      … 赤字
     <ul class="op-list">       … 箇条書き
     <div class="op-box">       … 囲みボックス
     <figure class="op-figure"> … 画像＋キャプション
     <hr class="op-rule">       … 区切り線
   ========================================================================== */
.op-letter__body {
  padding: clamp(22px, 4vw, 46px) clamp(18px, 4.4vw, 52px) clamp(26px, 4vw, 48px);
  /* .op-fit がこの要素の内側幅を基準にサイズを決めるための指定 */
  container-type: inline-size;
  container-name: letter;
}
.op-letter__body > *:first-child { margin-top: 0; }
.op-letter__body > *:last-child  { margin-bottom: 0; }

/* ---- 見出し ---- */
.op-letter__body h2 {
  margin: 44px 0 20px;
  padding-left: 16px;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-text);
  text-shadow: var(--tshadow-lg);
  border-left: 5px solid transparent;
  border-image: var(--grad-red-v) 1;
}
.op-letter__body h3 {
  position: relative;
  margin: 34px 0 14px;
  padding-bottom: 9px;
  font-size: clamp(17px, 2.4vw, 19px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--c-gold-lt);
}
.op-letter__body h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 2px;
  background: var(--grad-gold);
}

/* ---- 本文 ---- */
.op-letter__body p {
  margin: 0 0 1.7em;
  font-size: 15.5px;
  line-height: 2.15;
  color: var(--c-text-sub);
}

.op-lead {
  padding: 20px 24px;
  margin-bottom: 34px !important;
  border-radius: 3px;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 2 !important;
  color: var(--c-text) !important;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(0, 0, 0, .5);
  border-left: 5px solid transparent;
  border-image: var(--grad-red-v) 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---- 文中の強調 ---- */
.op-letter__body strong {
  font-weight: 700;
  color: var(--c-gold-lt);
}
.op-marker {
  padding: 0 2px;
  background: linear-gradient(transparent 62%, rgba(216, 180, 92, .38) 62%);
  color: var(--c-text);
  font-weight: 700;
}
.op-red {
  color: var(--c-red-lt);
  font-weight: 700;
}

/* ---- 箇条書き ---- */
.op-list {
  margin: 0 0 1.7em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.op-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--c-text-sub);
}
.op-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .72em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--grad-gold-v);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* ---- 囲みボックス ---- */
.op-box {
  margin: 0 0 1.7em;
  padding: 20px 22px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(216, 180, 92, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.op-box > *:last-child { margin-bottom: 0; }
.op-box__title {
  margin: 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--c-gold-lt) !important;
}

/* ---- 画像 ---- */
.op-figure { margin: 0 0 34px; padding: 0; }
.op-figure img { border-radius: 3px; }
.op-figure__ph {
  display: grid;
  place-items: center;
  min-height: 200px;
  border-radius: 3px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}
.op-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--c-text-mute);
}

/* ---- 区切り線 ---- */
.op-rule {
  height: 1px;
  border: 0;
  margin: 34px 0;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}

.op-letter__body code {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: .9em;
  color: var(--c-gold-lt);
  background: rgba(0, 0, 0, .3);
}


/* ==========================================================================
   04-b. 幅いっぱいに広げる文字（.op-fit）
   --------------------------------------------------------------------------
   .op-letter__body の左右いっぱいまで使って1行で表示します。
   文字サイズは「入れ物の幅 ÷ 文字数」で決まるので、
   PC でもスマホでも常に左右いっぱいに収まります。

   使い方 ── optin-fit.js を読み込んでおけば、文字数の指定は不要です

     <p class="op-fit">ここに文字が入ります</p>

     JS が実際の文字幅を測って、常にぴったり幅いっぱいに合わせます。
     はみ出すことも、余ることもありません。

   JS を使わない場合だけ、文字数を --op-chars に入れてください

     <p class="op-fit" style="--op-chars: 11;">幅いっぱいに広がる文字</p>

     ・全角1文字＝1、半角英数は0.5として数えます
     ・数字が実際より小さいとはみ出すので、迷ったら 1〜2 多めに

   自動調整を止めたい行には data-fit-manual を付けます

   バリエーション（組み合わせて使えます）
     .op-fit--gold     … ゴールド文字
     .op-fit--red      … 赤文字
     .op-fit--outline  … フチ付き（画像の上に置くとき）
     .op-fit--justify  … サイズは変えず、字間を広げて両端に揃える
   --------------------------------------------------------------------------
   ※ 本文の <p> 指定に負けないよう .op-letter__body で範囲を絞っています
   ========================================================================== */
.op-letter__body .op-fit {
  --op-chars: 12;          /* ★ 行の文字数（optin-fit.js を入れれば不要） */
  --op-max: 84px;          /* 大きくなりすぎ防止 */
  --op-scale: 1;           /* 幅に対する比率（1 = 左右いっぱい） */

  display: block;
  margin: 0 0 .7em;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;       /* 字間があると幅が合わなくなるので 0 固定 */
  white-space: nowrap;     /* 1行で表示 */
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--tshadow-lg);

  /* 入れ物の幅 ÷ 文字数 ＝ ちょうど幅いっぱいになるサイズ */
  font-size: min(
    calc(100cqw / var(--op-chars) * .97 * var(--op-scale)),
    var(--op-max)
  );

  /* 万一はみ出しても枠の外へ飛び出さないようにする保険 */
  max-width: 100%;
  overflow-x: clip;
}

/* コンテナクエリ非対応ブラウザ向けの保険 */
@supports not (width: 1cqw) {
  .op-letter__body .op-fit {
    font-size: min(
      calc(min(100vw - 40px, 616px) / var(--op-chars) * .97 * var(--op-scale)),
      var(--op-max)
    );
  }
}

/* ---- 色のバリエーション ---- */
.op-letter__body .op-fit--gold {
  color: var(--c-gold-lt);
  background: var(--grad-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}
.op-letter__body .op-fit--red { color: var(--c-red-lt); }

/* ---- フチ付き（画像の上などに置くとき） ---- */
.op-letter__body .op-fit--outline {
  -webkit-text-stroke: 1px rgba(0, 0, 0, .55);
  paint-order: stroke fill;
}

/* ---- サイズは変えず、字間を広げて両端に揃える（均等割付） ---- */
.op-letter__body .op-fit--justify {
  white-space: normal;
  font-size: clamp(17px, 3.4cqw, 26px);
  text-align: justify;
  text-align-last: justify;
  -moz-text-align-last: justify;
}


/* ==========================================================================
   04-c. 枠付きの特大見出し（.op-banner）
   --------------------------------------------------------------------------
   赤い枠で囲んだ、幅いっぱいのどでかい文字ブロックです。
   1行ごとに文字数（--op-chars）を指定すると、その行が左右いっぱいになります。

   使い方

     <div class="op-banner">
       <span class="op-banner__label">重要</span>          ← 任意（上の見出しバッジ）
       <p class="op-banner__text">
         <span class="op-banner__line" style="--op-chars: 9;">ここにどでかい文字</span>
         <span class="op-banner__line op-banner__line--gold" style="--op-chars: 7;">2行目もOK</span>
       </p>
     </div>

   文字数を数えたくない場合は data-fit-auto ＋ optin-fit.js でも動きます。

     <span class="op-banner__line" data-fit-auto>ここにどでかい文字</span>

   枠のバリエーション
     .op-banner--gold   … ゴールドの枠
     .op-banner--solid  … 赤ベタ塗り（白抜き文字）

   行のバリエーション
     .op-banner__line--gold  … ゴールド文字
     .op-banner__line--red   … 赤文字
     .op-banner__line--sm    … その行だけ小さめ（前置き・補足用）
   ========================================================================== */
.op-letter__body .op-banner {
  /* この枠の内側の幅を基準に文字サイズを決める */
  container-type: inline-size;

  position: relative;
  margin: 0 0 1.7em;
  padding: clamp(22px, 4.5vw, 34px) clamp(14px, 3vw, 26px);
  border-radius: 4px;
  border: 3px solid var(--c-red);
  border-top-color: var(--c-red-hi);
  border-bottom-color: var(--c-red-dp);
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 2px 0 1px rgba(255, 255, 255, .06),
    inset 0 -2px 0 1px rgba(0, 0, 0, .3),
    0 10px 24px -14px rgba(0, 0, 0, .95);
  text-align: center;
  overflow: visible;
}

/* ---- 上に乗るバッジ ---- */
.op-letter__body .op-banner__label {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -55%);
  padding: 3px 18px;
  border-radius: 999px;
  background: var(--grad-gold);
  border: 1px solid rgba(168, 127, 34, .6);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.7;
  white-space: nowrap;
  color: #33270a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .8);
}

/* ---- 中の文字 ---- */
.op-letter__body .op-banner__text {
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1em;
  line-height: 1.2 !important;
}

.op-letter__body .op-banner__line {
  --op-chars: 10;          /* ★ その行の文字数（optin-fit.js を入れれば不要） */
  --op-max: 96px;          /* 大きくなりすぎ防止 */
  --op-scale: 1;           /* 幅に対する比率（1 = 左右いっぱい） */

  display: block;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--c-text);
  text-shadow: var(--tshadow-lg);

  font-size: min(
    calc(100cqw / var(--op-chars) * .97 * var(--op-scale)),
    var(--op-max)
  );

  /* 万一はみ出しても枠の外へ飛び出さないようにする保険 */
  max-width: 100%;
  overflow-x: clip;
}

/* コンテナクエリ非対応ブラウザ向けの保険 */
@supports not (width: 1cqw) {
  .op-letter__body .op-banner__line {
    font-size: min(
      calc(min(100vw - 92px, 564px) / var(--op-chars) * .97 * var(--op-scale)),
      var(--op-max)
    );
  }
}

/* ---- 行のバリエーション ---- */
.op-letter__body .op-banner__line--gold {
  color: var(--grad-red);
  background: var(--grad-red);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7));
}
.op-letter__body .op-banner__line--red { color: var(--c-red-lt); }

/* 前置き・補足用に、その行だけ小さく（幅の 55% 相当） */
.op-letter__body .op-banner__line--sm {
  --op-scale: .55;
  --op-max: 34px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-sub);
}

/* ---- 枠のバリエーション ---- */
.op-letter__body .op-banner--gold {
  border-color: var(--c-gold-dp);
  border-top-color: var(--c-gold-lt);
  border-bottom-color: #6b4f11;
}
.op-letter__body .op-banner--gold .op-banner__label {
  background: var(--grad-red);
  border-color: var(--c-red-dp);
  color: #fff;
  text-shadow: var(--tshadow);
}

.op-letter__body .op-banner--solid {
  background: var(--grad-red);
  border-color: var(--c-red-dp);
  border-top-color: var(--c-red-hi);
}
.op-letter__body .op-banner--solid .op-banner__line { color: #fff; }

/* ==========================================================================
   05. レター内 CTA ボタン
   --------------------------------------------------------------------------
   レターの途中から下のフォームへ飛ばすボタン。何個置いても構いません。
   ========================================================================== */
.op-cta-wrap {
  margin: 0 0 1.7em !important;
  text-align: center;
}
.op-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 58px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2px solid rgba(80, 58, 10, .6);
  background: var(--grad-gold);
  color: #33270a;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
              0 8px 18px -8px rgba(0, 0, 0, .9);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.op-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
              0 14px 24px -10px rgba(0, 0, 0, 1);
}
.op-cta:active { transform: translateY(0) scale(.99); }
.op-cta:focus-visible { outline: 2px solid var(--c-gold-lt); outline-offset: 3px; }
.op-cta__label { position: relative; z-index: 1; }

/* ボタン上を走る光 */
.op-cta::after,
.op-form__submit::after {
  content: "";
  position: absolute;
  top: -60%; left: -40%;
  width: 34%; height: 220%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .7), transparent);
  transform: rotate(14deg);
  animation: op-btn-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes op-btn-sheen {
  0%   { transform: translateX(0) rotate(14deg); opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translateX(420%) rotate(14deg); opacity: 0; }
  100% { transform: translateX(420%) rotate(14deg); opacity: 0; }
}

/* ==========================================================================
   06. メールアドレス登録フォーム
   --------------------------------------------------------------------------
   コメントフォーム（cf-）と同じ見た目・同じ寸法にしています。
   ========================================================================== */
.op-frame {
  padding: clamp(22px, 4vw, 30px) clamp(16px, 4vw, 34px) clamp(24px, 4vw, 30px);
}

.op-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.op-form__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
  border-left: 4px solid transparent;
  border-image: var(--grad-gold-v) 1;
}
.op-form__title {
  margin: 0;
  font-size: clamp(19px, 4vw, 23px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--c-text);
  text-shadow: var(--tshadow-lg);
}
.op-form__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--c-text-dim);
}

.op-form__group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.op-form__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-sub);
}
.op-form__req {
  padding: 1px 8px;
  border-radius: 3px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #fff;
  background: var(--grad-red);
  border: 1px solid var(--c-red-dp);
  text-shadow: none;
}

.op-form__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 3px;
  background: var(--c-sunken);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-text);
  text-shadow: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.op-form__input::placeholder { color: #8b8b8b; }
.op-form__input:focus {
  outline: none;
  border-color: var(--c-red-lt);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45),
              0 0 0 3px rgba(179, 36, 46, .35);
}
.op-form__input:user-invalid { border-color: var(--c-red); }

/* エラーメッセージ */
.op-form__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-red-lt);
}
.op-form__error::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 11px;
  color: #fff;
  background: var(--c-red);
  text-shadow: none;
}

/* 送信ボタン */
.op-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin-top: 2px;
  padding: 30px 24px;
  border-radius: 999px;
  border: 10px solid var(--c-red-dp);
  border-top-color: var(--c-red-hi);
  background: var(--grad-red);
  color: #fff;
  font-family: inherit;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: var(--tshadow);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 8px 18px -8px rgba(0, 0, 0, .9);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.op-form__submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 14px 24px -10px rgba(0, 0, 0, 1);
}
.op-form__submit:active { transform: translateY(0) scale(.99); }
.op-form__submit:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.op-form__submit-label { position: relative; z-index: 1; }

/* 注意書き */
.op-form__note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--c-text-mute);
}

.op-notice {
  position: relative;
  padding: clamp(18px, 3.4vw, 24px) clamp(16px, 3.4vw, 26px);
  padding-left: clamp(16px, 3.4vw, 26px);
  border-radius: 4px;
  border: 1px solid rgba(216, 180, 92, .45);
  border-left: 4px solid transparent;
  border-image: var(--grad-gold-v) 1;
  background: rgba(0, 0, 0, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 6px 18px -14px rgba(0, 0, 0, .9);
}
 
/* ---- 見出し ---- */
.op-notice__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: clamp(18px, 4vw, 20%);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--c-gold-lt);
  text-shadow: var(--tshadow);
}
/* 見出しの先頭に付く「!」アイコン */
.op-notice__title::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-gold);
  border: 1px solid rgba(168, 127, 34, .6);
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: #33270a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.op-notice--plain .op-notice__title::before { display: none; }
 
/* ---- 本文 ---- */
.op-notice__text {
  margin: 0;
  font-size: clamp(13px, 2.4vw, 13.5px);
  line-height: 1.95;
  letter-spacing: .02em;
  color: var(--c-text-sub);
}
.op-notice__text + .op-notice__text { margin-top: .9em; }
.op-notice__text strong { font-weight: 700; color: var(--c-gold-lt); }
 
/* ---- 箇条書き ---- */
.op-notice__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.op-notice__list li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(12.5px, 2.4vw, 13px);
  line-height: 1.9;
  color: var(--c-text-sub);
}
.op-notice__list li::before {
  content: "";
  position: absolute;
  left: 3px; top: .78em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--grad-gold-v);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
 
/* ---- 赤枠バージョン ---- */
.op-notice--alert {
  border-color: rgba(179, 36, 46, .55);
  border-image: var(--grad-red-v) 1;
}
.op-notice--alert .op-notice__title { color: var(--c-red-lt); }
.op-notice--alert .op-notice__title::before {
  background: var(--grad-red);
  border-color: var(--c-red-dp);
  color: #fff;
  text-shadow: var(--tshadow);
}
.op-notice--alert .op-notice__list li::before { background: var(--grad-red-v); }
.op-notice--alert .op-notice__text strong { color: var(--c-red-lt); }
 
/* スマホのときだけ改行する <br> */
.op-br-sp { display: none; }
@media (max-width: 600px) {
  .op-br-sp { display: inline; }
}

.op-marquee {
  --mq-h:        clamp(120px, 20vw, 190px);   /* 画像の高さ */
  --mq-gap:      clamp(10px, 2vw, 16px);      /* 画像の間隔 */
  --mq-distance: 0px;                          /* 1周分の距離（JSが入れます） */
  --mq-duration: 30s;                          /* 1周の時間（JSが入れます） */
  --mq-direction: normal;
 
  position: relative;
  padding: clamp(18px, 3vw, 26px) 0 clamp(20px, 3vw, 28px);
  border-radius: 5px;
  border: var(--frame-w) solid var(--c-red);
  border-top-color: var(--c-red-hi);
  border-bottom-color: var(--c-red-dp);
  box-shadow: var(--frame-shadow);
  background:
    var(--noise),
    linear-gradient(180deg, #4f4f4f, var(--c-surface) 55%, #434343 100%);
  background-size: 160px 160px, auto;
  background-blend-mode: overlay, normal;
  overflow: hidden;
}
 
/* 画面いっぱいに広げる版（枠なし） */
.op-marquee--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
 
/* ---- 見出し ---- */
.op-marquee__head {
  padding: 0 clamp(16px, 4vw, 30px);
  margin-bottom: clamp(14px, 2.4vw, 20px);
  text-align: center;
}
.op-marquee__label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.op-marquee__title {
  margin: 0;
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--c-text);
  text-shadow: var(--tshadow-lg);
}
 
/* ---- 流れる領域 ---- */
.op-marquee__viewport {
  position: relative;
  overflow: hidden;
  /* 左右の端をふわっと消す */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
 
.op-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  margin: 0;
  padding: 0 calc(var(--mq-gap) / 2);
  list-style: none;
  width: max-content;
  will-change: transform;
  animation: op-mq-scroll var(--mq-duration) linear infinite;
  animation-direction: var(--mq-direction);
}
@keyframes op-mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--mq-distance) * -1)); }
}
 
/* 読み込み中のガタつきを抑える */
.op-marquee:not(.is-ready) .op-marquee__track { animation: none; }
 
/* マウスを乗せている間・タップ中は止める */
.op-marquee__viewport:hover  .op-marquee__track,
.op-marquee__viewport:active .op-marquee__track { animation-play-state: paused; }
 
/* ---- 画像1枚 ---- */
.op-marquee__item {
  flex: 0 0 auto;
  height: var(--mq-h);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 6px 16px -8px rgba(0, 0, 0, .95);
  background: rgba(0, 0, 0, .25);
}
.op-marquee__item img {
  height: 100%;
  width: auto;
  max-width: none;      /* 高さ基準で並べるため幅の上限は外す */
  display: block;
  object-fit: cover;
}
 
/* 画像にキャプションを付けたいとき */
.op-marquee__item figcaption {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-mute);
  text-align: center;
}
 
/* 2段組にするとき（1段目と2段目の間隔） */
.op-marquee__viewport + .op-marquee__viewport { margin-top: var(--mq-gap); }
 
/* --- 動きを減らす設定への配慮：自動で流さず、指でスクロールさせる --- */
@media (prefers-reduced-motion: reduce) {
  .op-marquee__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .op-marquee__track { animation: none !important; }
}

/* ==========================================================================
   08. レスポンシブ
   ========================================================================== */
@media (max-width: 820px) {
  :root { --frame-w: 2px; }
  body { font-size: 15px; line-height: 1.95; }
  .op-letter__body p,
  .op-list li { font-size: 15px; line-height: 2.05; }
}

@media (max-width: 480px) {
  .op-cta,
  .op-form__submit { min-height: 54px; font-size: 18px; }
  .op-lead { padding: 16px 18px; }
  .op-box  { padding: 16px 18px; }
}

/* --- 動きを減らす設定への配慮 --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}