@charset "UTF-8";

:root {
  --blue: #0068B6;
  --blue-dark: #00469B;
  --blue-muted: #0862A9;
  --blue-border: #2672B1;
  --red: #E50012;
  --red-dark: #D61518;
  --yellow: #FFF23F;
  --yellow-strong: #FFF000;
  --gold: #D7B782;
  --sky: #74D4FF;
  --ink: #231815;
  --ink-sub: #4a4a4a;
  --content-width: 1080px;
  --gutter: 16px;
}

/* ===================================================================
   1. 共通ユーティリティ
   =================================================================== */

/* SPでのみ改行する <br> */

.br-sp {
  display: none;
}

@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

.fv a:focus-visible, .benefit a:focus-visible {
  outline: 3px solid var(--blue-dark);
  outline-offset: 4px;
}

/* ===================================================================
   2. FV
   =================================================================== */

.fv {
  position: relative;
  padding: 140px 0 72px;
  overflow: hidden;
  background-color: #0d3b5c;
  background-image: url(../img/plus-fv-bg-pc.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

@media (max-width: 767px) {
  .fv {
    padding: 96px 0 40px;
    background-image: url(../img/plus-fv-bg-sp.jpg);
  }
}

.fv__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- タイトル --- */

.fv__title {
  margin: 0;
}

.fv__title img {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin-inline: 0;
}

/* --- 応募期間（白抜き＋紺フチ） --- */

.fv__period {
  display: table;
  margin: 16px 0 0;
  color: #fff;
  text-align: center;
  -webkit-text-stroke: 8px var(--blue-dark);
  paint-order: stroke fill;
}

@media (max-width: 767px) {
  .fv__period {
    margin: 16px auto 0;
  }
}

.fv__period-label {
  display: block;
  font-size: clamp(1.5rem, 0.1364rem + 2.84vw, 2.125rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .fv__period-label {
    font-size: 1.125rem;
  }
}

.fv__period-date {
  display: block;
  font-size: clamp(1.5rem, 0.1364rem + 2.84vw, 2.125rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .fv__period-date {
    font-size: 1.375rem;
  }
}

/* --- 黄色パネル --- */

.fv__panel {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 40px clamp(2rem, -1.2727rem + 6.82vw, 3.5rem) 28px;
  border-radius: 20px;
  background-color: var(--yellow);
  text-align: left;
}

@media (max-width: 767px) {
  .fv__panel {
    margin-top: 16px;
    padding: 24px 16px 16px;
    border-radius: 16px;
  }
}

/* スマホ吹き出し（キャプション込みの画像1枚）
   パネル右上に絶対配置。1024px未満は応募期間の日付と衝突するため非表示。 */

.fv__app {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, -40%);
  width: clamp(12.5rem, -1.1364rem + 28.41vw, 18.75rem);
}

@media (max-width: 767px) {
  .fv__app {
    width: 200px;
    display: none;
  }
}

.fv__app img {
  display: block;
  width: 100%;
  height: auto;
}

.fv__lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 0.4318rem + 1.70vw, 1.625rem);
  font-weight: 600;
}

.fv__lead small {
  font-size: 0.7em;
}

@media (max-width: 767px) {
  .fv__lead {
    font-size: 1rem;
    text-align: center;
  }
}

.fv__headline {
  margin: 4px 0 0;
  color: var(--red);
  line-height: 1.2;
  font-size: clamp(2.75rem, -0.5227rem + 6.82vw, 4.25rem);
  font-weight: 900;
  letter-spacing: 0.03em;
}

@media (max-width: 767px) {
  .fv__headline {
    font-size: clamp(1.75rem, 8.4vw, 2.25rem);
    text-align: center;
  }
}

/* ギフトカード＋訴求文言 */

.fv__offer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, -0.6364rem + 3.41vw, 1.75rem);
  margin-top: 16px;
}

@media (max-width: 767px) {
  .fv__offer {
    gap: 12px;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
  }
}

.fv__gift {
  display: block;
  width: clamp(11rem, 1.1818rem + 20.45vw, 15.5rem);
  height: auto;
}

@media (max-width: 767px) {
  .fv__gift {
    width: 144px;
  }
}

.fv__offer-lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.625rem, -0.0114rem + 3.41vw, 2.375rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .fv__offer-lead {
    font-size: 1.25rem;
  }
}

.fv__offer-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

@media (max-width: 767px) {
  .fv__offer-main {
    gap: 4px;
  }
}

.fv__amount {
  color: var(--red);
  line-height: 1;
  font-size: clamp(4.5rem, 0.1364rem + 9.09vw, 6.5rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .fv__amount {
    font-size: 3.5rem;
  }
}

.fv__amount-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.fv__unit, .fv__winners {
  color: var(--red);
  white-space: nowrap;
  font-size: clamp(1.5rem, 0.1364rem + 2.84vw, 2.125rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .fv__unit, .fv__winners {
    font-size: 1rem;
  }
}

.fv__winners em {
  color: var(--red);
  font-style: normal;
  font-size: 1.3em;
}

/* 注記 */

.fv__notes {
  max-width: 864px;
  margin: 16px 0 0;
  color: var(--ink);
}

.fv__notes p {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 767px) {
  .fv__notes p {
    font-size: 0.625rem;
  }
}

.fv__notes a {
  color: inherit;
}

/* ===================================================================
   3. 特典ブロック
   =================================================================== */

/* --- 見出し＋申し込み案内 --- */

.benefit__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .benefit__head {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    justify-content: normal;
  }
}

.benefit__headtext {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 767px) {
  .benefit__headtext {
    flex: 0 1 auto;
    min-width: auto;
  }
}

/* 2027年3月31日（水）までに */

.benefit__deadline {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.625rem, 0.5341rem + 2.27vw, 2.125rem);
  font-weight: 900;
}

.benefit__deadline b {
  font-size: 1.4em;
  font-weight: 900;
}

@media (max-width: 767px) {
  .benefit__deadline {
    font-size: clamp(1rem, 4.8vw, 1.25rem);
  }
}

.benefit__heading {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(2rem, 0.3636rem + 3.41vw, 2.75rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .benefit__heading {
    font-size: clamp(1rem, 5.6vw, 1.5rem);
  }
}

/* 黄色のマーカー（斜めに傾いた帯） */

.benefit__marker {
  display: table;
  position: relative;
  z-index: 0;
}

.benefit__marker::before {
  content: "";
  position: absolute;
  right: -0.1em;
  bottom: 0.3em;
  left: -0.1em;
  z-index: -1;
  height: 0.3em;
  background-color: var(--yellow-strong);
  transform: skewX(-14deg);
}

/* 人物イラスト＋お申し込みはこちら＋二次元コード（画像1枚） */

.benefit__apply {
  width: 28%;
  max-width: 296px;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .benefit__apply {
    width: 256px;
    max-width: 100%;
    flex: 0 1 auto;
  }
}

.benefit__apply img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 特典カード --- */

.benefit__cards {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 48px;
  align-items: stretch;
  padding-inline: 24px;
}

@media (max-width: 767px) {
  .benefit__cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    align-items: normal;
    padding-inline: 0;
  }
}

.benefit__card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 20px 32px;
  border: 3px solid var(--blue-border);
  border-radius: 20px;
  text-align: center;
  padding-top: 40px;
}

@media (max-width: 767px) {
  .benefit__card {
    padding-top: 48px;
    padding: 24px 16px 20px;
    border-radius: 16px;
  }
}

.benefit__card--1 {
  background-color: #fff;
}

.benefit__card--2 {
  border-color: var(--blue);
  background-color: var(--blue);
}

/* メダル（カード左上に半分はみ出す） */

.benefit__badge {
  position: absolute;
  top: -24px;
  left: 0;
  transform: translateX(-40%);
  width: clamp(4rem, -0.3636rem + 9.09vw, 6rem);
  height: auto;
}

@media (max-width: 767px) {
  .benefit__badge {
    top: -16px;
    left: -8px;
    transform: none;
    width: 64px;
  }
}

/* 特典1 */

.benefit__lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 0.1818rem + 1.70vw, 1.375rem);
  font-weight: 700;
}

.benefit__lead b {
  font-size: 1.2em;
  font-weight: 900;
}

.benefit__lead small {
  font-size: 0.8em;
}

@media (max-width: 767px) {
  .benefit__lead {
    font-size: 0.875rem;
  }
}

.benefit__free {
  margin: 4px 0 0;
  color: var(--red);
  line-height: 1.2;
  font-weight: 900;
}

.benefit__free-line {
  display: block;
  font-size: clamp(1.75rem, -0.4318rem + 4.55vw, 2.75rem);
}

@media (max-width: 767px) {
  .benefit__free-line {
    font-size: 1.5rem;
  }
}

.benefit__free-strong {
  display: block;
  font-size: clamp(2.5rem, -0.7727rem + 6.82vw, 4rem);
}

@media (max-width: 767px) {
  .benefit__free-strong {
    font-size: 2.25rem;
  }
}

.benefit__free-strong sup {
  margin-left: 0.1em;
  color: var(--ink);
  vertical-align: baseline;
  font-size: 0.3em;
  font-weight: 700;
}

/* 特典2 */

.benefit__slash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 0.1818rem + 1.70vw, 1.375rem);
  font-weight: 700;
}

@media (max-width: 767px) {
  .benefit__slash {
    font-size: 0.875rem;
  }
}

.benefit__slash::before, .benefit__slash::after {
  content: "";
  width: 2px;
  height: 1.2em;
  background-color: #fff;
}

.benefit__slash::before {
  transform: rotate(-20deg);
}

.benefit__slash::after {
  transform: rotate(20deg);
}

.benefit__gift {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(1.25rem, -0.1136rem + 2.84vw, 1.875rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .benefit__gift {
    font-size: 1.25rem;
  }
}

/* 黄色文字＋赤フチ */

.benefit__present {
  margin: 4px 0 0;
  color: var(--red);
  line-height: 1.2;
  -webkit-text-stroke: 8px var(--yellow-strong);
  paint-order: stroke fill;
  font-size: clamp(1.375rem, 0.0114rem + 2.84vw, 2rem);
  font-weight: 900;
}

.benefit__amount {
  font-size: 1.6em;
}

@media (max-width: 767px) {
  .benefit__present {
    font-size: 1.5rem;
  }
}

/* ＋マーク */

.benefit__plus {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 56px;
  height: 56px;
}

@media (max-width: 767px) {
  .benefit__plus {
    width: 40px;
    height: 40px;
  }
}

.benefit__plus::before, .benefit__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: var(--gold);
}

.benefit__plus::before {
  width: 100%;
  height: 26%;
}

.benefit__plus::after {
  width: 26%;
  height: 100%;
}

/* --- ※1 注記 --- */

.benefit__note {
  margin: 24px 0 40px;
  color: var(--ink);
  text-align: center;
  margin-top: 32px;
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 767px) {
  .benefit__note {
    font-size: 0.6875rem;
  }
}

@media (max-width: 767px) {
  .benefit__note {
    text-align: left;
    margin-top: 24px;
  }
}

.benefit__note a {
  color: var(--red);
  text-decoration: underline;
  font-weight: 700;
}

/* ===================================================================
   4. 機能紹介ブロック（県外／県内）
   =================================================================== */

.feature__cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .feature__cols {
    flex-direction: column;
    align-items: normal;
  }
}

.feature__col {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .feature__col {
    flex: 0 1 auto;
    min-width: auto;
  }
}

/* 列の区切り（SP=横の点線／PC=縦の点線） */

.feature__col+.feature__col {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-left: 48px;
  padding-left: 48px;
  border-left: 2px dotted #b3b3b3;
}

@media (max-width: 767px) {
  .feature__col+.feature__col {
    margin-left: 0;
    padding-left: 0;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px dotted #b3b3b3;
    border-left: 0;
  }
}

/* 見出し＋イラスト（罫線まで含んだ画像1枚） */

.feature__head {
  display: block;
  width: 100%;
  max-width: 856px;
  height: auto;
  margin-inline: auto;
}

/* ＼ キャッチ ／ */

.feature__catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
  color: var(--ink);
  margin-top: 32px;
  font-size: clamp(1.25rem, 0.4318rem + 1.70vw, 1.625rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .feature__catch {
    font-size: 1.125rem;
  }
}

@media (max-width: 767px) {
  .feature__catch {
    margin-top: 24px;
  }
}

.feature__catch::before, .feature__catch::after {
  content: "";
  width: 2px;
  height: 1.2em;
  background-color: var(--ink);
}

.feature__catch::before {
  transform: rotate(-20deg);
}

.feature__catch::after {
  transform: rotate(20deg);
}

/* 大見出し */

.feature__title {
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
  font-size: clamp(2.25rem, 0.0682rem + 4.55vw, 3.25rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .feature__title {
    font-size: clamp(1.5rem, 7.2vw, 2rem);
  }
}

/* 読者の声（ピル） */

.feature__voices {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .feature__voices {
    margin-top: 24px;
  }
}

.feature__voices li {
  padding: 12px 16px;
  border-radius: 9999px;
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, 0.4545rem + 1.14vw, 1.25rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .feature__voices li {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .feature__voices li {
    padding: 8px 12px;
  }
}

.feature__voices li+li {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .feature__voices li+li {
    margin-top: 12px;
  }
}

.feature__col--out .feature__voices li {
  background-color: var(--blue-muted);
}

.feature__col--in .feature__voices li {
  background-color: var(--red-dark);
}

/* 締めのコピー */

.feature__lead {
  margin: 24px 0 0;
  color: var(--ink);
  text-align: center;
  margin-top: 32px;
  font-size: clamp(1.375rem, 0.2841rem + 2.27vw, 1.875rem);
  font-weight: 900;
}

@media (max-width: 767px) {
  .feature__lead {
    font-size: 1.25rem;
  }
}

@media (max-width: 767px) {
  .feature__lead {
    margin-top: 24px;
  }
}

/* 本文 */

.feature__body {
  margin: 24px 0 0;
  color: var(--ink);
  line-height: 2;
  margin-top: 32px;
  font-size: clamp(0.875rem, 0.6023rem + 0.57vw, 1rem);
  font-weight: 400;
}

@media (max-width: 767px) {
  .feature__body {
    font-size: 0.875rem;
  }
}

@media (max-width: 767px) {
  .feature__body {
    margin-top: 24px;
  }
}

@media (hover: hover) {
  .benefit__note a:hover {
    text-decoration: none;
  }
}
/* ===================================================================
   5. Coming soon ボタン
   受付開始前の代替表示。既存の .btn-nav-cta / .btn-cta-main を
   置き換えて使います（ピンク → 黒）。
   リンクではないので <a> ではなく <span> で組んでいます。
   =================================================================== */

.btn-coming {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  cursor: default;
  user-select: none;
}

/* 特典セクション／メリットセクション（SP）の大きいボタン */

.btn-coming--main {
  padding: 1.25rem 3rem;
  font-size: 1.25rem;
}

@media (max-width: 767px) {
  .btn-coming--main {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }
}

/* メリットセクション（PC）の中くらいのボタン */

.btn-coming--sub {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}
/* ===================================================================
   6. 規約フレームの影
   既存の .shadow-frame-pink（10px 10px #ff4da6）の差し替え。
   同じオフセットで色だけ水色にしています。
   =================================================================== */

.shadow-frame-blue {
  box-shadow: 10px 10px var(--sky);
}