/* =========================================================
   らくらくナイス LP — 広告流入専用（モックアップ）
   ・ヘッダー/フッター無し（簡易フッターのみ）
   ・スマホファースト画像を PC でも使い回す → LP だけ max-width 750px 固定
   ・モバイルファースト記述（base=SP、min-width で PC 上書き）
   ========================================================= */

/* ---------- リセット（最小限） ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  font-family: "YakuHanJP", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #474747;
  background: #fefefe;
}

/* ---------- 本体カラム（SP: 全幅） ---------- */
.lp-main {
  width: 100%;
  background: #fefefe;
}

.lp-container {
  width: 100%;
  margin: 0 auto;
  background: #fefefe;
  overflow: hidden;
}

/* PC: 750px 中央寄せ・外側グレーで枠を見せる */
@media (min-width: 751px) {
  body,
  .lp-main {
    background: #f5f5f5;
  }
  .lp-container {
    max-width: 750px;
  }
}

/* ---------- 画像セクションを隙間なく積む ---------- */
.lp-rakuraku {
  font-size: 0;
  line-height: 0;
}

.lp__img,
.lp-cta__bg {
  display: block;
  width: 100%;
}

/* ---------- CTA を JPG に重ねる ---------- */
.lp-cta {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.lp-cta__btn {
  position: absolute;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp-cta__btn img {
  width: 100%;
}

.lp-cta__btn:hover {
  transform: translate(-50%, -50%) scale(1.03);
  filter: brightness(1.05);
}

.lp-cta__btn:active {
  transform: translate(-50%, -50%) scale(0.99);
}

/* 各 CTA の垂直位置（セクション高さ比＝予約スペース中心） */
.lp-cta--01 .lp-cta__btn { top: 92%; }
.lp-cta--11 .lp-cta__btn { top: 91%; }
.lp-cta--14 .lp-cta__btn { top: 80%; }
.lp-cta--23 .lp-cta__btn { top: 63%; }

/* ---------- 画像内の電話番号にタップ発信リンクを重ねる ---------- */
.lp-tel {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.lp-tel__img {
  display: block;
  width: 100%;
}

.lp-tel__link {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* 各画像内の電話番号位置（画像の高さ・幅に対する比で指定） */
.lp-tel__link--13 { left: 50%; top: 90%;   width: 84%; height: 8%; }
.lp-tel__link--16 { left: 50%; top: 79.5%; width: 84%; height: 7%; }
.lp-tel__link--20 { left: 53%; top: 18.1%; width: 40%; height: 3.4%; }

/* ---------- 途中差し込み CTA（画像に重ねず単独バンド） ---------- */
.lp-cta-band {
  background: #f9fff5;
  padding: 1.75rem 0;
  text-align: center;
}

.lp-cta-band__btn {
  display: inline-block;
  width: 80%;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp-cta-band__btn img {
  width: 100%;
}

.lp-cta-band__btn:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.lp-cta-band__btn:active {
  transform: scale(0.99);
}

/* ---------- よくあるご質問（画像 sp_21/22 を文字コーディング化） ---------- */
/* 親 .lp-rakuraku が font-size:0 のため、ここで文字サイズを戻す */
.lp-faq {
  background: #f9fff5;
  padding: 2.5rem 0 2rem;
  font-size: 1rem;
  line-height: 1.9;
}

.lp-faq__title {
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 600;
  color: #006837;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0 0 1.5rem;
  padding: 0 1.25rem;
}

.lp-faq__item {
  margin-bottom: 1.5rem;
}

/* 質問バンド：全幅の深緑・白字・多行時はハンギングインデント */
.lp-faq__q {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #006837;
  color: #fefefe;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}

.lp-faq__q-num {
  flex-shrink: 0;
}

/* 回答：内側に少しインセットした白カード */
.lp-faq__a {
  margin: 0 1rem;
  padding: 1.25rem;
  background: #fefefe;
  border: 1px solid #e3e8e4;
}

.lp-faq__a p {
  margin: 0;
  color: #474747;
}

.lp-faq__a p + p {
  margin-top: 0.6rem;
}

.lp-faq__tel {
  color: #006837;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- 法定ページ（特商法・プライバシー）読みやすいテキスト ---------- */
.lp-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  font-size: 1rem;
  line-height: 1.9;
  color: #474747;
}

.lp-legal__title {
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: #2a2a2a;
  margin: 0 0 2rem;
}

.lp-legal__lead {
  margin: 0 0 1.5rem;
}

/* 特商法：定義リスト風 */
.lp-legal__dl {
  margin: 0;
}

.lp-legal__row {
  padding: 1rem 0;
  border-bottom: 1px solid #e3e8e4;
}

.lp-legal__row:first-child {
  border-top: 1px solid #e3e8e4;
}

.lp-legal__dt {
  font-weight: 700;
  color: #2a2a2a;
  margin: 0 0 0.35rem;
}

.lp-legal__dd {
  margin: 0;
}

.lp-legal__dd p {
  margin: 0;
}

.lp-legal__dd p + p {
  margin-top: 0.4rem;
}

/* プライバシー：見出し＋段落 */
.lp-legal__h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2a2a2a;
  margin: 2rem 0 0.6rem;
}

.lp-legal__p {
  margin: 0 0 0.8rem;
}

.lp-legal__p:last-child {
  margin-bottom: 0;
}

.lp-legal__date {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #737373;
}

/* 法定ページ：ページに戻るボタン */
.lp-legal__back-wrap {
  margin-top: 3rem;
  text-align: center;
}

.lp-legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9rem 2rem;
  background: #006837;
  color: #fefefe;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.lp-legal__back:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- 簡易フッター ---------- */
.lp-footer {
  background: #2a2a2a;
  color: #ccc;
  padding: 2rem 1.5rem;
  text-align: center;
}

.lp-footer__inner {
  max-width: 750px;
  margin: 0 auto;
}

.lp-footer__copy {
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  color: #999;
}

.lp-footer__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lp-footer__link {
  color: #ccc;
  font-size: 0.8rem;
  text-decoration: underline;
  text-decoration-color: rgba(254, 254, 254, 0.3);
}

.lp-footer__link:hover {
  color: #fefefe;
}

/* =========================================================
   子世代向けギフトLP（lp-rakuraku-nice-gift）固有
   ・CTA 6箇所の重ね位置（--g01〜--g22）＋確認ボックス内ボタン
   ・電話タップ（sp_16）
   ・FAQ は共通 .lp-faq を流用（Q帯 #006837・背景とも同一トーン）
   ========================================================= */

/* 各 CTA の垂直位置・幅（PDF完成イメージとのテンプレートマッチング＋ドリフト補正の実測値） */
.lp-cta--g01 .lp-cta__btn { top: 86.5%; }
.lp-cta--g06 .lp-cta__btn { top: 71.6%; width: 84%; }
.lp-cta--g11 .lp-cta__btn { top: 91.2%; width: 84%; }
.lp-cta--g17 .lp-cta__btn { top: 18%; }
.lp-cta--g20 .lp-cta__btn { top: 86%; }
.lp-cta--g22 .lp-cta__btn { top: 90.9%; width: 84%; }

/* 画像内の電話番号タップ位置（sp_16 上カードの 0120-951-713） */
.lp-tel__link--g16 { left: 50%; top: 40%; width: 84%; height: 6%; }

/* ---------- 購入内容の確認ボックス（旧 sp_25 中段を文字コーディング化） ---------- */
/* 親 .lp-rakuraku が font-size:0 のため、ここで文字サイズを戻す */
.lp-confirm {
  background: #f5fff6;
  padding: 1rem 1.25rem 2.5rem;
  font-size: 1rem;
  line-height: 1.9;
}

.lp-confirm__box {
  max-width: 680px;
  margin: 0 auto;
  background: #fffef8;
  border: 2px solid #dfb75e;
  border-radius: 12px;
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.lp-confirm__text {
  color: #2a2a2a;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.lp-confirm__btn {
  display: inline-block;
  width: 84%;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp-confirm__btn img {
  width: 100%;
}

.lp-confirm__btn:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.lp-confirm__btn:active {
  transform: scale(0.99);
}

/* ---------- 会社概要カード（旧 sp_25 下段を文字コーディング化） ---------- */
.lp-company {
  background: #f5fff6;
  padding: 0 1.25rem 3rem;
  font-size: 1rem;
  line-height: 1.9;
}

.lp-company__card {
  max-width: 680px;
  margin: 0 auto;
  background: #fefefe;
  border: 1px solid #2e7d4f;
  border-radius: 10px;
  padding: 2rem 1.5rem;
}

.lp-company__title {
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #006837;
  text-align: center;
  margin: 0 0 1.25rem;
}

.lp-company__item {
  color: #474747;
  margin: 0;
}

.lp-company__tel {
  color: #474747;
  text-decoration: none;
}