/* ============================
   COLOR SYSTEM（指定パレット）
   ============================ */
:root {
  --base:#3b5998;      /* サイトベース：知性・信頼・冷静 */
  --bg:#f5f6fa;        /* 背景：明るさ・清潔感 */
  --text:#2c3e50;      /* テキスト：読みやすさ・落ち着き */
  --familia:#8e44ad;   /* Familia：高貴・特別感 */
  --friends:#e67e22;   /* Friends：情熱・行動 */

  --white:#fff;
  --shadow:rgba(0,0,0,.15);
  --line:#e1e3ea;
  --brand-100:#e9ecf5; /* 薄いベース色（ゴーストやヒーローに使用） */
  --brand-200:#d5daeb; /* ヒーロー境界など */
}

/* ====== ベース ====== */
html, body {
  margin: 0; padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

.lp-salon a:hover{
    color: #ffff;
}

/* ====== レイアウト ====== */
.lp-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.lp-section__title {
  font-size: 1.8rem; margin: 0 0 1.2rem;
  border-left: 6px solid var(--base); padding-left: .6rem; color: var(--base);
}

/* ====== ボタン ====== */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:10px; text-decoration:none;
  font-weight:700; letter-spacing:.02em;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lp-btn:active{ transform: translateY(1px); }

.lp-btn--primary{ background:var(--base); color:var(--white); box-shadow:0 6px 14px var(--shadow); }
.lp-btn--primary:hover{ background:#2c4376; }

.lp-btn--outline{ color:var(--base); border:2px solid var(--base); background:transparent; }
.lp-btn--outline:hover{ background:var(--base); color:var(--white); }

.lp-btn--ghost{ background:var(--brand-100); color:var(--base); }
.lp-btn--ghost:hover{ background:var(--brand-200); }

/* Familia専用ボタン */
.lp-btn--familia{ background:var(--familia); color:#fff; box-shadow:0 6px 14px var(--shadow); }
.lp-btn--familia:hover{ background:#732d91; }
.lp-btn--familia-outline{ color:var(--familia); border:2px solid var(--familia); background:transparent; }
.lp-btn--familia-outline:hover{ background:var(--familia); color:#fff; }

/* Friends専用（既存secondaryをオレンジに） */
.lp-btn--secondary{ background:var(--friends); color:#fff; box-shadow:0 6px 14px var(--shadow); }
.lp-btn--secondary:hover{ background:#b75d18; }

/* ====== ヒーロー ====== */
.lp-hero{
  background: linear-gradient(135deg, var(--brand-100) 0%, #fff 60%);
  padding:64px 0 48px; border-bottom:1px solid var(--brand-200); text-align:center;
}
.lp-hero__title{
  font-size:clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height:1.35; margin:0 0 .8rem; color:var(--base);
}
.lp-hero__lead{ font-size:1.05rem; color:var(--text); margin:0 auto 1.2rem; max-width:800px; }
.lp-hero__cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ====== 共感ブロック ====== */
.lp-vision{ padding:40px 0 8px; }
.lp-vision__lead{ margin:0; }

/* ====== プラン ====== */
.lp-tiers{ padding:56px 0; background:#fff; }
.lp-tiergrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; }

.lp-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px; position:relative; display:flex; flex-direction:column;
}
.lp-card__title{ margin:.4rem 0 .6rem; font-size:1.3rem; font-weight:800; }

/* 価格ピル */
.lp-card__prices{ display:flex; flex-wrap:wrap; gap:.6rem .8rem; margin:.2rem 0 .8rem; }
.lp-price{
  display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .6rem;
  border-radius:999px; font-size:.95rem; background:#f0f2f7; color:var(--text);
}
.lp-price--familia{ background:#f0e5f7; color:var(--familia); border:1px solid #e2c9f1; }
.lp-price--friends{ background:#fbe9d9; color:var(--friends); border:1px solid #f6d6bd; }

.lp-list{ padding-left:1.2rem; margin:0 0 1rem; }

/* 参加方法（カード内） */
.lp-subtitle{ margin:.4rem 0 .4rem; font-size:1.05rem; font-weight:800; color:var(--base); }
.lp-joinsteps{ margin:.2rem 0 1rem; padding-left:1.2rem; color:var(--text); }
.lp-joinsteps li{ margin:.3rem 0; line-height:1.7; }
.lp-joinsteps li strong{ color:var(--base); }

.lp-card__cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
.lp-note{ font-size:.9rem; margin:.6rem 0 0; color:#5e356e; }           /* デフォはFamilia基調の落ち着き色 */
.lp-card--friends .lp-note{ color:#7a3e15; }                            /* Friendsはオレンジ寄り */

/* Familia/Friends枠色のアクセント */
.lp-card--familia{ border-color:#f0e5f7; }
.lp-card--friends{ border-color:#fbe9d9; }

/* ====== 全体の流れ ====== */
.lp-steps{ padding:56px 0; background:#fff; }
.lp-steplist{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns: repeat(3, 1fr); gap:18px;
}
.lp-steplist li{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
}
.lp-stepnum{
  width:32px; height:32px; border-radius:50%; background:var(--base); color:#fff;
  display:grid; place-items:center; font-weight:700;
}
.lp-stepbody h4{ margin:0 0 .2rem; color:var(--base); }
.lp-stepbody p{ margin:0; color:var(--text); }
.lp-center{ text-align:center; margin-top:18px; }

/* ====== FAQ ====== */
.lp-faq{ padding:48px 0; }
.lp-faq__item{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; margin-bottom:10px;
}
.lp-faq__item > summary{ cursor:pointer; font-weight:700; color:var(--base); }
.lp-faq__item > p{ margin:8px 0 0; }

/* ====== クロージング ====== */
.lp-closing{ padding:48px 0 64px; background:var(--brand-100); border-top:1px solid var(--brand-200); }
.lp-closing__inner{ text-align:center; }
.lp-closing__title{ margin:0 0 12px; color:var(--base); font-size:1.6rem; }
.lp-closing__cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ====== レスポンシブ ====== */
@media (max-width: 980px){
  .lp-tiergrid{ grid-template-columns:1fr; }
  .lp-steplist{ grid-template-columns:1fr; }
  .lp-card__prices{ gap:.5rem; }
}