/* 新規登録特典ページ（スマホベースLP）  接頭辞 p-regist- */
:root {
  --regist-black: #000;
  --regist-white: #fff;
  --regist-base: #ECEBED;
  --regist-red: #E61714;
  --regist-red-dark: #C51A28;
  --regist-yellow: #FAC600;
  --regist-blue: #00A2E5;
  --regist-pink: #E34285;
  --regist-line: #C9C8CC;
  --regist-sub-text: #4A4A4F;
  --regist-col: 430px;
}

/* ページ全体（CMSでは body にクラスを付けられないため、body 直下の div.p-regist に付ける。body の余白は Bootstrap の reboot で 0） */
.p-regist {
  min-height: 100vh;
  background: var(--regist-red);
  color: var(--regist-black);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
}
/* スマホ固定ボタンぶんの余白（11/1以降のみ付与） */
.p-regist--hasFixed { padding-bottom: 88px; }

/* キーボードフォーカス */
.p-regist a:focus-visible {
  outline: 3px solid #1F5FD6;
  outline-offset: 3px;
}
.p-regist-hero a:focus-visible,
.p-regist-flowbox a:focus-visible,
.p-regist-plain a:focus-visible {
  outline-color: #fff;
}

/* 本体カラム（スマホ幅） */
.p-regist-col {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--regist-col);
  margin: 0 auto;
  background: var(--regist-white);
  overflow: hidden;
}
.p-regist-wrap { padding: 0 20px; }

/* ヘッダー */
.p-regist-header {
  background: var(--regist-white);
  padding: 14px 16px;
  text-align: center;
}
.p-regist-header__logo { width: 200px; max-width: 70%; height: auto; }

/* ボタン（黄地に赤文字＋濃い影） */
.p-regist-btn {
  display: inline-block;
  background: var(--regist-yellow);
  color: var(--regist-red-dark);
  font-weight: 900;
  font-size: 1.25rem;
  text-align: center;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--regist-red-dark);
}
.p-regist-btn:hover { color: var(--regist-red-dark); filter: brightness(1.05); }
.p-regist-btn--block { display: block; width: 100%; }
/* 白板の上（PC右パネル）では赤ボタン */
.p-regist-btn--red {
  display: block;
  background: var(--regist-red);
  color: var(--regist-white);
  font-size: 1.0625rem;
  box-shadow: 0 4px 0 var(--regist-red-dark);
}
.p-regist-btn--red:hover { color: var(--regist-white); }

/* ヒーロー（画像差し替え用の仮枠＋その下のCTA） */
.p-regist-hero {
  position: relative;
  background: var(--regist-red);
  color: var(--regist-white);
  text-align: center;
  padding: 0 0 64px;
  overflow: hidden;
}
/* 仮枠：画像ができたら img.p-regist-hero__img に置き換える */
.p-regist-hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 860 / 900;
  background: #F1F0EE;
  border: 3px dashed #8A8A90;
  color: #4A4A4F;
  font-weight: 900;
  line-height: 1.6;
}
.p-regist-hero__placeholder-text { margin: 0; font-size: 1.125rem; }
.p-regist-hero__placeholder-text span { font-size: 0.8125rem; font-weight: 700; }
.p-regist-hero__img { display: block; width: 100%; height: auto; }
.p-regist-hero__cta { padding-top: 20px; }
/* ヒーロー：コード案内へのアンカーボタン（登録ボタンより小さく、白枠で控えめに） */
.p-regist-hero__code { margin: 12px 0 0; text-align: center; }
.p-regist-hero__codelink {
  display: inline-block;
  padding: 8px 24px;
  border: 2px solid var(--regist-white);
  border-radius: 999px;
  color: var(--regist-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.p-regist-hero__codelink::after { content: "↓"; margin-left: 6px; }
.p-regist-hero__codelink:hover { color: var(--regist-red); background: var(--regist-white); }
/* アンカーで飛んだときに見出しが画面の端に貼りつかないように */
.p-regist-codebox { scroll-margin-top: 16px; }
.p-regist-hero__pill {
  display: inline-block;
  margin: 0 0 14px;
  background: var(--regist-white);
  color: var(--regist-red-dark);
  font-size: 0.9375rem;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 999px;
}
.p-regist-hero__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 32px;
  display: block;
}

/* リボン見出し */
.p-regist-ribbon {
  position: relative;
  display: block;
  margin: 0 -20px 24px;
  background: var(--regist-red);
  color: var(--regist-white);
  font-size: 1.125rem;
  font-weight: 900;
  text-align: center;
  padding: 8px 32px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
/* 吹き出し見出し */
.p-regist-bubble {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  background: var(--regist-white);
  color: var(--regist-red-dark);
  font-size: 1.125rem;
  font-weight: 900;
  padding: 8px 24px;
  border-radius: 999px;
}
.p-regist-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -9px;
  border: 9px solid transparent;
  border-top-color: var(--regist-white);
  border-bottom: 0;
}
.p-regist-bubble--red { background: var(--regist-red); color: var(--regist-white); }
.p-regist-bubble--red::after { border-top-color: var(--regist-red); }

/* 波形の区切り（from=上の地色、to=下の地色） */
.p-regist-wave {
  display: block;
  width: 100%;
  height: 32px;
  background: var(--wave-from);
  fill: var(--wave-to);
}
.p-regist-wave--w2r { --wave-from: #fff; --wave-to: var(--regist-red); }
.p-regist-wave--r2g { --wave-from: var(--regist-red); --wave-to: var(--regist-base); }
.p-regist-wave--g2r { --wave-from: var(--regist-base); --wave-to: var(--regist-red); }

/* メリット */
.p-regist-merit { background: var(--regist-white); padding: 28px 0 24px; }
.p-regist-feature {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
.p-regist-feature__num { margin: 0 0 8px; text-align: center; line-height: 0; }
.p-regist-feature__num img { height: 56px; width: auto; }
.p-regist-feature__ttl { margin: 0 0 14px; text-align: center; font-size: 1.125rem; font-weight: 900; line-height: 1.5; }
/* イラストは白いカードの中に置く */
.p-regist-feature__card {
  margin: 0 0 14px;
  padding: 12px;
  background: var(--regist-white);
  border: 1px solid var(--regist-line);
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  line-height: 0;
}
.p-regist-feature__img { display: block; width: 100%; height: auto; }
.p-regist-feature__txt { margin: 0; font-size: 0.875rem; line-height: 1.8; text-align: center; }
/* 本体はスマホ幅の1カラムなので、既存文言の改行は入れずに流す */
.p-regist-feature__txt br { display: none; }

/* セクション共通（赤・グレー） */
.p-regist-flowbox { background: var(--regist-red); padding: 24px 0 8px; }
.p-regist-morebox { background: var(--regist-base); padding: 24px 0 16px; }

/* 受け取りまでの流れ（白カードに STEP） */
.p-regist-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.p-regist-flow__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--regist-white);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.p-regist-flow__step {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--regist-red);
  line-height: 1;
}
.p-regist-flow__label { font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.1em; }
.p-regist-flow__no {
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 3.25rem;
  padding-right: 0.06em;
}
.p-regist-flow__name { font-size: 1.125rem; font-weight: 900; margin: 0; line-height: 1.5; }
.p-regist-flow__text { font-size: 0.875rem; color: var(--regist-sub-text); margin: 0; }
.p-regist-guide { margin: 24px 0 0; text-align: center; font-size: 0.9375rem; }
/* 赤地の上の白いボタン（文字は濃い赤） */
.p-regist-guide__link {
  display: block;
  max-width: 320px;
  margin: 0 auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--regist-white);
  color: var(--regist-red-dark);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.p-regist-guide__link:hover { color: var(--regist-red-dark); background: #F7F7F8; }
.p-regist-guide__sub { display: block; font-size: 0.75rem; font-weight: 700; line-height: 1.4; }

/* こちらもどうぞ（白カードに色帯と円形アイコン） */
.p-regist-morelist { display: grid; gap: 18px; }
.p-regist-more {
  display: block;
  background: var(--regist-white);
  border-radius: 12px;
  color: var(--regist-black);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.p-regist-more:hover { color: var(--regist-black); }
.p-regist-more__band { display: block; padding: 10px 16px; text-align: center; }
.p-regist-more--jushou .p-regist-more__band { background: var(--regist-blue); }
.p-regist-more--fc .p-regist-more__band { background: var(--regist-pink); }
.p-regist-more__tag {
  display: inline-block;
  background: var(--regist-white);
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 0 14px;
}
.p-regist-more__body { display: block; padding: 16px 20px 20px; }
.p-regist-more__title { font-size: 1.125rem; font-weight: 900; text-align: center; margin: 0 0 8px; line-height: 1.5; }
.p-regist-more__text { font-size: 0.875rem; margin: 0 0 12px; }
/* カード全体がリンク。下の「〜について」はボタンの見た目にする（白地＋カードの色帯と同じ色の枠線・黒文字） */
.p-regist-more__link {
  display: block;
  max-width: 320px;
  margin: 4px auto 0;
  padding: 12px 20px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  background: #FFFFFF;
  border: 3px solid transparent;
}
.p-regist-more--jushou .p-regist-more__link { border-color: var(--regist-blue); }
.p-regist-more--fc .p-regist-more__link { border-color: var(--regist-pink); }
.p-regist-more:hover .p-regist-more__link { background: #F7F7F8; }

/* 対象者・注意事項（赤地に白カード） */
.p-regist-plain { background: var(--regist-red); padding: 8px 0 40px; }
.p-regist-card {
  background: var(--regist-white);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.p-regist-card + .p-regist-card { margin-top: 20px; }
.p-regist-card__title {
  margin: 0 0 16px;
  color: var(--regist-red-dark);
  font-size: 1.125rem;
  font-weight: 900;
  text-align: center;
}

/* 対象者・付与日（定義リスト） */
.p-regist-spec { margin: 0; border-top: 1px solid var(--regist-line); }
.p-regist-spec__row {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--regist-line);
}
.p-regist-spec__term { font-size: 0.875rem; font-weight: 700; color: var(--regist-red-dark); }
.p-regist-spec__desc { margin: 0; }
.p-regist-spec__main { display: block; font-size: 1rem; font-weight: 900; }
.p-regist-spec__note { display: block; font-size: 0.8125rem; color: var(--regist-sub-text); margin-top: 4px; }

/* 注意事項 */
.p-regist-notes { font-size: 0.8125rem; }
.p-regist-notes__list { padding-left: 1.2em; margin: 0 0 12px; }
.p-regist-notes__lead { margin: 16px 0 8px; font-weight: 700; }
.p-regist-contact { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--regist-line); font-size: 0.8125rem; }

/* フッター */
.p-regist-footer {
  background: #000;
  color: #D5D7D9;
  text-align: center;
  padding: 40px 16px;
  font-size: 0.75rem;
}
.p-regist-footer__logo { width: 180px; max-width: 60%; height: auto; margin-bottom: 20px; }
.p-regist-footer__text { margin: 0 0 8px; }
/* QRコードの商標表記 */
.p-regist-footer__note { margin: 0 0 8px; font-size: 0.75rem; opacity: 0.8; }

/* スマホ固定ボタン（991px以下。ヒーローの登録ボタンが画面から外れたら表示） */
.p-regist-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 16px 16px;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, visibility 0.25s;
}
/* JSが動いたときだけ最初は隠す（JSが動かない環境では常に表示のまま） */
.p-regist-fixed.is-ready { transform: translateY(100%); visibility: hidden; }
.p-regist-fixed.is-ready.is-show { transform: none; visibility: visible; }
.p-regist-fixed .p-regist-btn { max-width: var(--regist-col); margin: 0 auto; padding: 13px 24px; }

/* タブレット縦（iPad縦など768〜991px）も本体カラムを広げる */
@media (min-width: 768px) {
  :root { --regist-col: 560px; }
}

/* PCは本体カラムを広げる（スマホは430pxのまま） */
@media (min-width: 992px) {
  :root { --regist-col: 560px; }
}
@media (min-width: 1200px) {
  :root { --regist-col: 640px; }
}

/* 左右パネル（PCのみ） */
.p-regist-side { display: none; }

/* PC：赤の斜めストライプ背景＋中央に本体カラム＋左右の固定パネル */
@media (min-width: 992px) {
  .p-regist {
    background: repeating-linear-gradient(135deg, #E61714 0, #E61714 14px, #DC1613 14px, #DC1613 28px);
  }
  .p-regist--hasFixed { padding-bottom: 0; }
  .p-regist-fixed { display: none; }
  .p-regist-side {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: calc((100% - var(--regist-col)) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }
  .p-regist-side--left { left: 0; }
  .p-regist-side--right { right: 0; }
}
/* 狭いPCでは左パネルを省く */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .p-regist-side--left { display: none; }
}
@media (min-width: 1200px) {
  .p-regist-side { padding: 0 32px; }
}

/* 白いカード（左右パネル共通） */
.p-regist-board {
  width: 100%;
  max-width: 300px;
  background: var(--regist-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.p-regist-board__logo { width: 180px; max-width: 100%; height: auto; margin-bottom: 18px; }
.p-regist-board__title { margin: 0 0 12px; font-size: 1.5rem; font-weight: 900; line-height: 1.5; color: var(--regist-red-dark); }
.p-regist-board__sub { margin: 0; font-size: 0.875rem; font-weight: 700; }

/* QRコード */
.p-regist-qr { margin-bottom: 16px; }
.p-regist-qr__label { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 900; }
.p-regist-qr__code { width: 160px; margin: 0 auto; line-height: 0; }
.p-regist-qr__code svg { width: 100%; height: auto; display: block; }
@media (min-width: 1200px) {
  .p-regist-qr__code { width: 200px; }
}

/* 流れ STEP 01：スマホ登録の写真（円） */
.p-regist-flow__body { flex: 1 1 auto; min-width: 0; }
.p-regist-flow__photo {
  flex: none;
  width: 84px;
  height: 84px;
  border: 3px solid var(--regist-red);
  border-radius: 50%;
  background: #F1F0EE;
  overflow: hidden;
}
.p-regist-flow__person {
  display: block;
  width: 175px;
  max-width: none;
  height: auto;
  margin: -37px 0 0 -49px;
}

/* 狭いPC（992〜1199px）では右パネルが細くなるため、ボタンの文字を1行に収める */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .p-regist-side .p-regist-btn { font-size: 0.875rem; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

/* タッチ端末（iPad横など）では右パネルのQRコードを出さない（自分の端末でそのまま登録できるため） */
@media (min-width: 992px) and (hover: none) and (pointer: coarse) {
  .p-regist-qr { display: none; }
}

/* キャンペーンコード入力の案内（グレー地。直後の morebox と地色が同じなので下余白を詰めて一続きに見せる） */
.p-regist-codebox { background: var(--regist-base); padding: 24px 0 0; }
.p-regist-codebox__lead { margin: 0 0 18px; font-size: 0.875rem; line-height: 1.8; text-align: center; }
/* 入力のしかた：白カードに STEP（受け取りまでの流れより小さめ） */
.p-regist-codeflow { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.p-regist-codeflow__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--regist-white);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.p-regist-codeflow__step {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--regist-red);
  line-height: 1;
}
.p-regist-codeflow__label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; }
.p-regist-codeflow__no {
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 2.5rem;
  padding-right: 0.06em;
}
.p-regist-codeflow__name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.5; }
/* 強調の一文（赤帯＋白文字） */
.p-regist-codebox__point {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--regist-red);
  color: var(--regist-white);
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
/* 注意点（白カードの箇条書き） */
.p-regist-codebox__notes {
  margin: 0;
  padding: 16px 20px 16px 2.2em;
  background: var(--regist-white);
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.8;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* コード入力フォームへのボタン（白地＋赤枠。黄色の新規登録ボタンと見分けるため） */
.p-regist-codebtn {
  display: block;
  margin: 0 0 16px;
  padding: 14px 20px;
  background: var(--regist-white);
  color: var(--regist-red);
  border: 3px solid var(--regist-red);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}
.p-regist-codebtn:hover { color: var(--regist-red); background: #F7F7F8; }