@charset "UTF-8";

/*
 * のりかえキャンペーンLP（/lp/norikae2025）
 *
 * デザインは375px幅のSP1本のみ。PCでも同じ絵を見せるため、コンテナを
 * max-width で止めて中央に置き、中身は cqw（コンテナ幅に対する割合）で組む。
 * px を直接使うとコンテナ幅が変わったときに文字だけ取り残されて崩れる。
 * 換算は「Figmaの px ÷ 3.75」。375px = 100cqw。
 *
 * 重なりのあるセクション（FV・のりかえは簡単・キャンペーン対象者）だけ絶対配置、
 * 縦に積むだけのセクション（料金・流れ）は通常フローで組んでいる。
 */

/*
 * テーマのレイアウト余白を外す。
 *
 * .l-container は上下150px（SP 40px）、.l-contents は左右20px と最大幅、
 * .l-main は要素間70px を持っていて、そのままだとLPの周りに余白が出る。
 * body のクラスで詳細度を1段上げて打ち消しているので !important は要らない。
 */
.page-norikae .l-container {
  padding-block: 0;
}

.page-norikae .l-contents {
  inline-size: 100%;
  gap: 0;
}

.page-norikae .l-main {
  row-gap: 0;
}

/*
 * width を明示しているのは、親の .l-main が grid で、margin:0 auto だけだと
 * 幅が内容依存になるため。中の画像が width:100% なので幅が決まらず 0 に潰れる。
 */
.p-norikae {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  max-width: 480px;
  overflow: hidden;
  background: #86ddff;
  color: #00308c;
  /* Figma 指定の Noto Sans JP（page-norikae.php で読み込む）。テーマ既定の Arial 先頭のスタックだと英数字だけ Arial になる */
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.6;
}

.p-norikae img {
  display: block;
  height: auto;
  max-width: none;
}

/*
 * :where() で詳細度を 0 にしている。.p-norikae p のままだと、下で各 p に付けている
 * margin-top（対象者カードの本文・帯、04 の本文、08 の締めの一文）が全部負けて 0 になる。
 * 実際にそうなっていて「詰まって見える」の一因だった（2026-09-24）。
 */
.p-norikae :where(p) {
  margin: 0;
}

/* ---------------------------------------------------------------- CTAボタン */

.p-norikae-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.8635cqw;
  width: 52.9742cqw;
  height: 11.4539cqw;
  border-radius: 999px;
  background: #ff7a00;
  color: #fff;
  font-size: 3.2725cqw;
  font-weight: 700;
  letter-spacing: 0.1636cqw;
  text-decoration: none;
  white-space: nowrap;
}

.p-norikae-cta:hover,
.p-norikae-cta:focus {
  color: #fff;
  opacity: 0.85;
}

.p-norikae-cta__icon {
  font-size: 4.0907cqw;
  line-height: 1;
}

/* --------------------------------------------------------------------- FV */

.p-norikae-fv {
  position: relative;
}

.p-norikae-fv__image {
  width: 100%;
}

.p-norikae-fv__cta {
  position: absolute;
  top: 101.0667cqw;
  left: 50%;
  transform: translateX(-50%);
}

/* ------------------------------------------------- のりかえは簡単 */

.p-norikae-easy {
  position: relative;
  height: 85.8667cqw;
  overflow: hidden;
}

.p-norikae-easy__mock {
  position: absolute;
  top: 15.7173cqw;
  left: 38.6933cqw;
  width: 48.8cqw;
}

/* 見出しと白カードは写真より前に出す（写真が後ろの要素として重なるため） */
.p-norikae-easy__title,
.p-norikae-easy__note {
  z-index: 1;
}

.p-norikae-easy__title {
  position: absolute;
  top: 6.8253cqw;
  left: 0;
  width: 100%;
  margin: 0;
  color: #00308c;
  font-size: 5.2685cqw;
  font-weight: 900;
  letter-spacing: 0.2108cqw;
  line-height: 1.32;
  text-align: center;
}

.p-norikae-easy__note {
  position: absolute;
  top: 62.4187cqw;
  left: 4.2667cqw;
  box-sizing: border-box;
  width: 91.4667cqw;
  height: 19.2813cqw;
  padding: 4.5733cqw 3.6347cqw;
  border-radius: 2.6667cqw;
  background: #fff;
}

.p-norikae-easy__note p {
  color: #ed3820;
  font-size: 3.2cqw;
  font-weight: 500;
  line-height: 1.6;
}

/* 白カードへ繋がる吹き出しの角 */
.p-norikae-easy__note::before {
  content: "";
  position: absolute;
  top: -4.7067cqw;
  left: 18.9333cqw;
  border-right: 5.32cqw solid transparent;
  border-bottom: 4.7067cqw solid #fff;
  border-left: 5.32cqw solid transparent;
}

/* --------------------------------------------- キャンペーン対象者 */

/*
 * 高さは Figma の 657px に、カード上の +15px、カード内の余白ぶん +15px、イラスト下の +24px を足した 711px。
 * Figma ではカードが上端から 9px、イラストが下端に接していて詰まって見えるため、
 * セクション境界の余白を最低 24px（6.4cqw）に揃えている（2026-09-24 マーケ側の指摘）。
 */
.p-norikae-target {
  position: relative;
  height: 189.6cqw;
}

.p-norikae-target__card {
  position: absolute;
  top: 6.4cqw;
  left: 4.2667cqw;
  box-sizing: border-box;
  width: 91.4667cqw;
  min-height: 39.7333cqw;
  padding: 3.1867cqw 3.2889cqw;
  border-radius: 2.6667cqw;
  background: #fff;
}

.p-norikae-target__title {
  margin: 0;
  color: #00308c;
  font-size: 5.2685cqw;
  font-weight: 900;
  line-height: 1.32;
  text-align: center;
}

.p-norikae-target__body {
  margin-top: 2.2cqw;
  color: #0d0d0d;
  font-size: 3.4667cqw;
  font-weight: 500;
  line-height: 1.85;
}

/* 帯の高さは Figma の 30px（文字 16px ＋ 上下 7px） */
.p-norikae-target__limit {
  margin-top: 1.8cqw;
  color: #0d0d0d;
  padding: 1.8667cqw 0;
  border-radius: 1.0667cqw;
  background: #e5f5ff;
  font-size: 2.9333cqw;
  font-weight: 700;
  text-align: center;
}

/*
 * Figma: Noto Sans JP Bold 14px、白、字間 0.56px、紺の縁取り約2px（別レイヤー）、白のにじみ影。
 * 縁取りは -webkit-text-stroke を paint-order: stroke fill で文字の外側にだけ出す（片側 = 幅の半分）。
 */
.p-norikae-target__lead {
  position: absolute;
  top: 64.1707cqw;
  left: 0;
  width: 100%;
  color: #fff;
  font-size: 3.7333cqw;
  font-weight: 700;
  letter-spacing: 0.1493cqw;
  line-height: 1.32;
  text-align: center;
  -webkit-text-stroke: 1.0667cqw #00308c;
  paint-order: stroke fill;
  text-shadow: 0 0 1.2896cqw rgba(255, 255, 255, 0.45);
}

/* カードから「のりかえで」へ下ろす矢印 */
.p-norikae-target__lead::before {
  content: "";
  position: absolute;
  top: -8.9067cqw;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7.7471cqw solid #00308c;
  border-right: 10.8209cqw solid transparent;
  border-left: 10.8209cqw solid transparent;
}

.p-norikae-target__badge {
  position: absolute;
  top: 70.1675cqw;
  left: 50%;
  width: 83.7333cqw;
  transform: translateX(-50%);
}

.p-norikae-target__annotation {
  position: absolute;
  top: 94.1947cqw;
  left: 42.8053cqw;
  width: 46.1333cqw;
  font-size: 2.1333cqw;
  font-weight: 500;
  line-height: 1.35;
}

.p-norikae-target__notes {
  position: absolute;
  top: 102.2533cqw;
  left: 7.4667cqw;
  box-sizing: border-box;
  width: 85.0667cqw;
  height: 25.8667cqw;
  padding-top: 4.2667cqw;
  border-radius: 2.1333cqw;
  background: #073382;
  text-align: center;
}

.p-norikae-target__notes img {
  display: inline-block;
  width: 69.7519cqw;
}

.p-norikae-target__illust {
  position: absolute;
  bottom: 6.4cqw;
  left: 0;
  width: 100%;
}

/* ----------------------------------------------------------------- 料金 */

.p-norikae-price {
  padding: 6.4cqw 0 5.3333cqw;
  background: #00aef2;
  text-align: center;
}

.p-norikae-price__title {
  margin: 0;
  color: #00308c;
  font-size: 4.2667cqw;
  font-weight: 900;
  line-height: 1.4;
}

.p-norikae-price__card {
  width: 92cqw;
  margin: 2.6667cqw auto 0;
}

/* --------------------------------------------- のりかえ申請からの流れ */

.p-norikae-flow {
  padding: 10.1307cqw 0 0;
  background: #f5f5f5;
  text-align: center;
}

.p-norikae-flow__title {
  margin: 0;
  color: #00308c;
  font-size: 5.8667cqw;
  font-weight: 900;
  line-height: 1.4;
}

.p-norikae-step {
  position: relative;
  padding: 4.8cqw 4.2667cqw 0;
}

/* ステップ間の下向き矢印 */
.p-norikae-step + .p-norikae-step {
  padding-top: 9.6cqw;
}

.p-norikae-step + .p-norikae-step::before {
  content: "";
  position: absolute;
  top: 2.4cqw;
  left: 50%;
  transform: translateX(-50%);
  border-top: 3.6712cqw solid #00308c;
  border-right: 5.1278cqw solid transparent;
  border-left: 5.1278cqw solid transparent;
}

.p-norikae-step__num {
  color: #00308c;
  font-size: 8cqw;
  font-weight: 700;
  letter-spacing: 0.4cqw;
  line-height: 1.4;
}

.p-norikae-step__head {
  margin: 1.0667cqw 0 0;
  color: #00308c;
  font-size: 4.2667cqw;
  font-weight: 900;
  line-height: 1.6;
}

.p-norikae-step__cta {
  margin-top: 3.4667cqw;
}

/* スマホ画像と説明文の横並び（02・03・07） */
.p-norikae-step__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.5333cqw;
  margin-top: 2.1333cqw;
}

.p-norikae-step__body p {
  flex: 0 0 37.3333cqw;
  color: #0d0d0d;
  font-size: 3.2cqw;
  font-weight: 500;
  line-height: 1.75;
  text-align: left;
}

.p-norikae-step--02 .p-norikae-step__body img {
  width: 44.1333cqw;
}

.p-norikae-step--03 .p-norikae-step__body img {
  width: 44.1333cqw;
}

/*
 * 03 の「チャットをはじめる」を囲む赤枠。Figma（Rectangle 743: 130×25px、画像の左上から 17.7px / 149.9px）
 * は画像と別レイヤーで、書き出した画像に入っていないため CSS で重ねる。色は 02 の画像に焼かれた赤枠と同じ。
 */
.p-norikae-step__frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.p-norikae-step__frame--03::after {
  content: "";
  position: absolute;
  top: 81%;
  left: 10.7%;
  box-sizing: border-box;
  width: 78.7%;
  height: 13.5%;
  border: 0.5333cqw solid #df3823;
  border-radius: 1.0667cqw;
}

.p-norikae-step--07 .p-norikae-step__body img {
  width: 28.0242cqw;
}

.p-norikae-step__text {
  margin-top: 2.9333cqw;
  color: #0d0d0d;
  font-size: 3.2cqw;
  font-weight: 500;
  line-height: 1.75;
  text-align: left;
}

.p-norikae-step__shot {
  margin: 2.1333cqw auto 0;
}

.p-norikae-step--05 .p-norikae-step__shot {
  width: 77.0667cqw;
  margin-left: 5.0667cqw;
}

.p-norikae-step--06 .p-norikae-step__shot {
  width: 84.6667cqw;
}

.p-norikae-step--08 .p-norikae-step__shot {
  width: 44.5333cqw;
}

.p-norikae-step__captions {
  display: grid;
  gap: 2.1333cqw;
  margin-top: 2.6667cqw;
  color: #0d0d0d;
  font-size: 2.9333cqw;
  font-weight: 700;
  line-height: 1.5;
}

.p-norikae-step__captions--2 {
  grid-template-columns: repeat(2, 1fr);
  padding: 0 2.6667cqw;
}

.p-norikae-step__captions--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 08 の締めの一文。画像との間は他の境界と同じ 24px、Figma どおり太字にしない */
.p-norikae-step__closing {
  margin-top: 6.4cqw;
  color: #0d0d0d;
  font-size: 3.4667cqw;
  font-weight: 500;
  line-height: 1.5;
}

/* 画像やキャプションで終わるステップは、次の矢印との間に余白を置く */
.p-norikae-step--01 {
  padding-bottom: 2.9333cqw;
}

.p-norikae-step--05,
.p-norikae-step--06,
.p-norikae-step--07 {
  padding-bottom: 6.6667cqw;
}

.p-norikae-step--08 {
  padding-bottom: 9.3333cqw;
}

/* 04の説明文で、受け取れるものを目立たせる色分け */
.p-norikae-step__em {
  color: #ff7a00;
}