/* ------------------------------
  Base
------------------------------ */
:root {
  --brand: #2b0000;           /* 豼?＞赤??ｩ??し??ボタン?? */
  --brand-2: #2b0000;         /* ボタンの豼?ｷ｡用 */
  --accent: #2b0000;          /* 赤帯 */
  --beige: #faf7f5;           /* ペ??ジの淡縺??ージュ */
  --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", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "Noto Serif JP", Georgia, serif;
  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: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "Noto Serif JP", Georgia, 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(--beige);   /* 阮?ヴンク */
  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); }
}

/* 白ボックス??p丸・譫?線なし、中央蟇?○レイアウト?? */
.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;
}

/* 線??アロー??E蟇?○・小さ繧?ｼ? */
.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(--beige);        /* 阮?ヴンク */
  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;              /* 竊? 謖?ｮ嚼Fに変更 */
  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では中央蟇?○??ｽ剩茶潟Z繝?ヨ?? ====== */
.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(--beige);     /* 阮?ヴンク */
  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; /* 赤に近い */
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "Noto Serif JP", Georgia, 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?嚶父Sシ繝?け、線??黒（細繧?ｼ? */
.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(--beige);    /* 阮?ヴンク背景 */
  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 用?嚶ｶに繝?くス繝?+ボタン??Xマ??は縦積み?? */
.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;
}

/* line benefit-list */
.benefits-list {
    gap: 30px;
}
@media (min-width: 960px) {
    .benefits-list {
        margin: 0 auto;
        grid-template-columns: repeat(2, 1fr);
        width: 80%;
    }
}