/* ------------------------------
  Base
------------------------------ */
:root {
  --brand: #ad0026;           /* 濃い赤（見出し・ボタン） */
  --brand-2: #ad0026;         /* ボタンの濃淡用 */
  --accent: #faf4ef;          /* 赤帯 */
  --beige: #faf4ef;           /* ページの淡いベージュ */
  --ink: #2b2b2b;
  --muted: #6f6f6f;
  --radius: 16px;
  --max: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif, Arial;
  line-height: 1.8;
  background: #fff;
}

.wrap {
  width: min(90vw, var(--max));
  max-width: var(--max);
  margin: 0 auto;
/*  padding: 0 16px;*/
}

@media (min-width: 768px) {
  .wrap {
    width: 90%;
  }
}

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

a {
/*  color: var(--brand);*/
  text-decoration: none;
}


/* ------------------------------
  Hero
------------------------------ */
.hero { padding: 18px 0 8px; }

.hero-logo {
  width: min(240px, 48%);
  margin: 0 auto 40px;
}

.lead {
  margin: 6px 0 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: clamp(24px, 3vw, 28px);
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
}
.lead-strong {
  display: inline-block;
  font-size: 1.5em; 
  font-weight: 700;
  margin-top: 4px;
  line-height: 1;
  letter-spacing: .1em;
}

/* ------------------------------
  赤帯の特典
------------------------------ */
/* ===== 特典ブロック ===== */
.benefits {
  padding: 18px 0 16px;
  border: none;                /* ← 外枠の線を削除 */
  margin: 0 auto;       /* ← 中央寄せ */
}
.benefits > .wrap {
  background: var(--accent);   /* 薄ピンク */
  padding: 18px 16px;          /* 内側余白はこちらで */
  border: none;                 /* 枠線不要なら念のため */
}
.benefits-title {
  margin: 20px 0 14px;
  text-align: center;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: .2em;
  font-size: clamp(22px, 2.4vw, 24px);
	
}

/* 1列→2列→3列のレスポンシブ */
.benefits-list {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .benefits-list { grid-template-columns: repeat(3, 1fr); }
}

/* 白ボックス（角丸・枠線なし、中央寄せレイアウト） */
.benefit {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 28px 24px;
  display: grid;                     
  grid-template-rows: auto 1fr;      /* 1行目=アイコン／2行目=残りの高さ */
  align-items: stretch;              /* 残り領域をしっかり確保 */
  justify-items: center;             /* 水平センター */
  text-align: center;
  min-height: 240px;                 
}

/* アイコンサイズ */
.benefit-ico {
  grid-row: 1;
  width: 80px;
  height: 80px;
  margin: 0 0 10px;
  display: grid;
  place-items: center;
}
.benefit-ico2 {
  grid-row: 1;
  width: 105px;
  height: 80px;
  margin: 0 0 10px;
  display: grid;
  place-items: center;
}
.benefit-ico img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* テキストを細字・同幅センターに */
.benefit-t {
  grid-row: 2;
  align-self: center;                /* ← 縦中央に固定 */
  margin: 0;
  color: var(--ink);
  font-weight: 500;                  
  line-height: 1.55;
  font-size: clamp(15px, 2.1vw, 18px);
  max-width: 22ch;                   /* 幅をそろえて折り返し統一 */
  text-wrap: balance;
}

/* 注意書きはピンク領域の外に出すので、個別スタイルだけ */
.benefits-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* ------------------------------
  ローカルナビ（赤タブ型・矢印右寄せ）
------------------------------ */
.local-nav {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 20px auto 40px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.tab {
  position: relative;
  display: flex;
  justify-content: center;      /* テキストは中央 */
  align-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 14px 40px;           /* 右側に余白を確保 */
  border-radius: 0;
  transition: background 0.2s ease;
}

/* 線のアロー（右寄せ・小さめ） */
.tab::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* ← 下向き */
  opacity: 0.9;
}

/* ホバー時・アクティブ時 */
.tab:hover,
.tab[aria-current="true"] {
  background: var(--brand-2);
}

/* スマホ時は縦積み */
@media (max-width: 767px) {
  .tabs {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* ------------------------------
  セクション（共通）
------------------------------ */
.center {
  text-align: center;
  margin: 0 0 16px;
  width: 100%;          
  display: block;       /* 念のため明示 */
}

/* ===== Step 見出しラインを薄ピンク上端ピタッに ===== */
.section-step .step-wrap{
  position: relative;
  background: var(--accent);        /* 薄ピンク */
  padding: 34px 30px 38px;          /* 上はバッジ分の余白を確保 */
}

/* ラインを step-wrap 自体に引く（上端ピタッ） */
.section-step .step-wrap::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: var(--brand);         /* 赤いライン */
}

/* 丸バッジはラインのセンターに重ねる（白字×赤丸） */
.section-step .step-badge{
  position:absolute;
  left:50%; top:0;
  transform: translate(-50%, -50%); /* ちょうど線の中心にまたがる */
  width: 48px; height: 48px;
  border-radius:50%;
  background: var(--brand);
  color:#fff;
  border:none;
  display:grid; place-items:center;
  font-weight: 400;
  font-size: 1.3em;
}

/* 見出しの下線は消す */
.section-step .step-title.heading-line::after{ display:none; }
.section-step .step-title.heading-line{ padding-left:0; }
.section-step .step-title{
  margin:20px auto;
  font-size:clamp(18px,2.6vw,22px)!important;
  font-weight:500;
  text-align:center;
}

/* ===== LINEボタン：#06c755 ＋ アイコン左 ===== */
.line-btn{
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding:12px 62px;
  background:#06c755;              /* ← 指定色に変更 */
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
  margin-bottom:40px;
}
.line-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9),
              0 0 0 5px rgba(6,199,85,.6);
}
.line-btn:hover{ filter:brightness(.96); }
.line-ico{ width:32px; height:32px; display:block; }

@media (max-width: 769px){
.line-btn{
	padding:12px 42px;}

}
/* ===== 白カード：枠線OFF、QRまわりの背景/枠線OFF ===== */
.qr-card{
  background:#fff;
  border:none;
  padding:34px 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

/* ====== モバイル基準（SPでは中央寄せ＆余白リセット） ====== */
.qr-img{
  justify-self: center;    /* ← 画像を中央寄せ */
}
.qr-img img{
  max-width: clamp(160px, 40vw, 260px);
  width: 100%;
  height: auto;
}

.qr-card-text h3{
  margin: 0 0 16px 0;
  font-weight: 600;
}
.qr-card-text p{
  margin: 0 0 20px 0;
}
.qr-notes{
  margin: 8px 0 0 0;
  padding: 0;                  /* ← 左の余白を削除 */
  list-style: none;            /* デフォルトの黒丸を消す */
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* 「※」を左端に揃える＆1文字分ズレをなくす */
.qr-notes li{
  position: relative;
  padding-left: 1em;           /* ← テキストと※の間のスペース */
  text-indent: -1em;           /* ← 左端を揃える */
}

.qr-notes li::before{
  content: "※";
  margin-right: .25em;         /* ※の直後の隙間 */
}
.qr-img img{ margin-right: 0; }

/* ====== PC（タブレット以上）だけ左に余白を戻す ====== */
@media (min-width: 768px){
  .qr-card{
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
    gap: 28px;
	    padding:44px 44px;

  }
  .qr-card-text h3{ margin: 0 0 20px 30px; }
  .qr-card-text p{  margin: 0 20px 0 30px; }
  .qr-notes{        margin: 20px 0 0 30px; }

  .qr-img{ justify-self: end; }
  .qr-img img{ margin-right: 40px; }
}

/* =============================
   FAQ
============================= */
.faq {
  display: grid;
  gap: 32px;
  margin-top: 20px;
  margin-bottom: 100px;
}

/* 各Q&Aボックス */
.qa {
  position: relative;
  background: var(--accent);     /* 薄ピンク */
  border-radius: 0;
  padding: 38px 44px;
  border: none;
}

/* 上部の赤いライン */
.qa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
}

/* summary部分（質問） */
.qa > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(15px, 2.5vw, 17px);
  padding-right: 28px; /* アイコン分の余白 */
  position: relative;
}

/* プラス・マイナスアイコン */
.qa > summary .icon {
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
}

.qa > summary .icon::before,
.qa > summary .icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--brand);
  transform: translate(-50%, -50%);
  transition: 0.2s ease;
}

.qa > summary .icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたときは「−」表示 */
.qa[open] > summary .icon::after {
  opacity: 0;
}

/* 回答ボックス（白） */
.qa-a {
  background: #fff;
  padding: 20px 44px;
/*  border-radius: 6px;*/
  line-height: 1.8;
  color: var(--ink);
  font-size: 15px;
  margin-top: 16px;
}

/* 強調 */
.qa-a strong {
  font-weight: 600;
  color: var(--ink);
}
.qa-a small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;

}


/* スマホ調整 */
@media (max-width: 768px) {
  .qa {
    padding: 24px 26px;
  }
  .qa-a {
    padding: 36px 38px;
  }
}

/* ------------------------------
  Buttons
------------------------------ */
.btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px auto 0;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--brand);
  transition: .15s ease;
}

.btn.primary {
  background: var(--brand);
  color: #fff;
}

.btn.primary:hover { background: var(--brand-2); }

.btn.outline {
  background: #fff;
  color: var(--brand);
}

.btn.outline:hover { background: #fdf3f3; }

@media (min-width: 768px) {
  .btn-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}

/* 見出し・共通（左インデント＋全幅ライン） */
.heading-line {
  position: relative;
  margin: 0 0 18px;
  padding: 0 0 10px 0px;   /* ← 余白・下にラインのための余白 */
  line-height: 1.4;
  width: 100%;               /* ← 親の.wrapが90%なのでそれに従う */
  max-width: none;           /* ← 念のため上限解除 */
  box-sizing: border-box;    /* ← はみ出し防止 */
}

.heading-line::after {
  content: "";
  position: absolute;
  left: 0;                
  right: 0;
  bottom: 0;
  height: 1px;               /* H2の線の太さ（H1では上書き） */
  background: currentColor;  /* テキスト色と同じ線 */
}


/* H1：赤×明朝体、線は赤・やや太め */
.heading-line--h1{
  color: #8c1111; /* Papilioの赤に近い */
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  margin:40px auto 20px;
  width: 90%;
}
.heading-line--h1::after{
  height: 1px;           /* H1の線 */
  background: #8c1111;   /* 赤いライン */
}

/* H2：黒ゴシック、線は黒（細め） */
.heading-line--h2{
  color: #2b2b2b;
  font-weight: 500;
  font-size: clamp(24px, 2vw, 28px);
  margin: 80px 0 40px;
}
.heading-line--h2::after{
  height: 1px;           /* H2は細線 */
  background: #2b2b2b;   /* 黒いライン */
}




/* ======================================================
   ID連携方法：各STEPを独立した薄ピンクボックス
====================================================== */

.id-step {
  position: relative;
  background: var(--accent);    /* 薄ピンク背景 */
  padding: 38px 20px 28px;
  margin-bottom: 40px;          /* 各STEPの間隔 */
}

/* 上部の赤ライン */
.id-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand);
}

/* 中央の丸バッジ（番号） */
.id-step::after {
  content: attr(data-step);
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 400;
  font-size: 1.3em;
  display: grid;
  place-items: center;
}

/* 内部レイアウト（左テキスト／右画像） */
.id-step-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

/* テキスト部分 */
.id-step-text {
  text-align: center;
}
.id-step-text h3 {
/*  font-size: clamp(16px, 2vw, 20px);*/
  font-weight: 500;
  margin: 0 0 10px;
}
@media (min-width: 768px) {
.id-step-text h3 {  margin: 0 0 10px 30px;	}
}


.id-step-text p {
  margin: 0;
}

/* 画像部分 */
.id-step-img {
  justify-self: center;
}
.id-step-img img {
  max-width: clamp(200px, 45vw, 420px);
  width: 100%;
  height: auto;
  display: block;
}

/* PCレイアウトで横並び */
@media (min-width: 768px) {
  .id-step-inner {
    grid-template-columns: 1.3fr .7fr;
    gap: 40px;
  }
  .id-step-text {
    text-align: left;
  }
  .id-step-img {
    justify-self: end;
  }
}

/* STEP6 用：左にテキスト+ボタン（スマホは縦積み） */
.id-step-left{
  display: grid;
  gap: 16px;
  justify-items: center;          /* SP：中央寄せ */
}

/* 赤ボタン2つ（矩形・右に小矢印） */
.id-step-cta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  justify-items: center;          /* SP：中央 */
}
@media (min-width: 768px) {
.id-step-cta{
  margin-left: 30px;
}

}
.btn-red {
  position: relative;                /* ← 追加：矢印の基準位置にする */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  min-width: 260px;
  overflow: hidden;                  /* ← 念のため（矢印はみ出し防止） */
}

/* 右端固定アロー */
.btn-red::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  right: 20px;                       /* ← 右端から20pxの位置に固定 */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.9;
}

/* PC：左カラムは左寄せ、ボタンは左揃えで縦並び */
@media (min-width: 768px){
  .id-step-inner{
    grid-template-columns: 1.3fr .7fr;   /* 左テキスト+ボタン / 右画像（既存と同じ） */
  }
  .id-step-left{ justify-items: start; }
  .id-step-text{ text-align: left; }     /* 既存に揃える保険 */
  .id-step-cta{ justify-items: start; }
  .btn-red{ min-width: 300px; }          /* PCで少しワイドに */
}



/* スマホ時のみ表示 */
@media (min-width: 769px) {
  .spOnly {
    display: none;
  }
}

/* PC時のみを表示 */
@media (min-width: 768px) {
  .pcOnly {
    display: none;
  }
}
/*リンクの下線を表示しない*/
a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}