/* ==========================================================
   AOKICOSMETIC page-salon.css — salon.html / plan.html 共用
   （子CC-P3管理。base.css / motion.css の部品を前提とする）
   新規キーフレーム無し・トークンはbase.cssのものを使用
   ========================================================== */

/* ---------- 共通: ページヘッド補助 ---------- */
.page-head .kicker { margin-bottom: 2.8rem; }

/* ---------- 共通: セクション見出し ---------- */
.sec-head { margin-bottom: 4rem; }
@media (min-width: 750px) { .sec-head { margin-bottom: 6.4rem; } }
.sec-head .kicker { margin-bottom: 2.4rem; }
.sec-head__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: .08em;
  color: var(--ink-head);
}
@media (min-width: 750px) { .sec-head__en { font-size: 3.6rem; } }
.sec-head__lead { margin-top: 1.6rem; }

/* ---------- 共通: CTA帯 ---------- */
.cta-band { text-align: center; }
.cta-band__title { margin-bottom: 1.2rem; }
.cta-band__note { margin-bottom: 3.6rem; }
.cta-band__btn { display: flex; justify-content: center; }

/* ---------- 共通: 回遊バナー補助 ---------- */
.explore__title { font-size: 2rem; letter-spacing: .08em; }
@media (min-width: 750px) { .explore__title { font-size: 2.8rem; } }
.explore__label-jp {
  display: block;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .06em;
  margin-top: .4rem;
}
/* WebKitガード: grid stretch × aspect-ratio × absolute子 の潰れ対策
   （block軸のstretchを外す。見た目は不変＝高さはaspect-ratio由来） */
.explore__item { align-self: start; }

/* ==========================================================
   salon.html
   ========================================================== */

/* ヒーロー */
.salon-hero .page-head { padding-bottom: 4rem; }
@media (min-width: 750px) { .salon-hero .page-head { padding-bottom: 6rem; } }
.salon-hero__media { margin: 0; overflow: hidden; background: var(--bg-thumb); }
.salon-hero__media img { width: 100%; height: auto; }

/* 導入メリット3バナー */
.salon-merit__grid { display: grid; gap: 4rem; }
@media (min-width: 750px) { .salon-merit__grid { grid-template-columns: repeat(3, 1fr); gap: 4rem 2.4rem; } }
.merit { border-top: 1px solid var(--ink-head); padding-top: 2.4rem; }
.merit__label {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-head);
  margin-bottom: 1.4rem;
}
.merit__label .num { font-weight: 400; color: #999; letter-spacing: .04em; }
.merit__title { font-size: 1.8rem; line-height: 1.6; letter-spacing: .04em; color: var(--ink-warm); margin-bottom: 1.2rem; }
@media (min-width: 750px) { .merit__title { font-size: 2rem; } }
.merit__price { font-size: 1.8rem; margin-top: 1.8rem; }
@media (min-width: 750px) { .merit__price { font-size: 2rem; } }
.merit__cap { margin-top: .6rem; }

/* データ帯（K18文法の数字訴求） */
.salon-data__grid { display: grid; gap: 3.2rem; }
@media (min-width: 750px) { .salon-data__grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.salon-data__grid > div { border-top: 1px solid var(--line); padding-top: 2rem; }
.salon-data__grid dd { margin-top: 1.2rem; }
.salon-data__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink-head);
}
@media (min-width: 750px) { .salon-data__num { font-size: 6.4rem; } }
.salon-data__pre { margin-right: .8rem; font-size: 1.2rem; color: #999; }
.salon-data__unit { margin-left: .8rem; font-size: 1.2rem; color: #999; }
.salon-data__note { margin-top: 2.8rem; }

/* 導入の流れ（4ステップ縦リスト） */
.flow-list > li {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: .8rem 1.6rem;
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.flow-list > li:first-child { border-top: 1px solid var(--line-soft); }
@media (min-width: 750px) {
  .flow-list > li { grid-template-columns: 12rem 28rem 1fr; gap: 2.4rem; padding: 4rem 0; }
}
.flow-step__num {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--hover-fade);
}
@media (min-width: 750px) { .flow-step__num { font-size: 4rem; line-height: 1; } }
.flow-step__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: .4rem;
}
.flow-step__title { font-size: 1.7rem; letter-spacing: .04em; }
@media (min-width: 750px) { .flow-step__title { font-size: 2rem; } }
.flow-step__body { grid-column: 2; }
@media (min-width: 750px) { .flow-step__body { grid-column: 3; grid-row: 1; } }

/* パートナー制度（罫線区切りリスト） */
.program-list > li { padding: 2.8rem 0; border-bottom: 1px solid var(--line-soft); }
.program-list > li:first-child { border-top: 1px solid var(--line-soft); }
@media (min-width: 750px) {
  .program-list > li {
    display: grid;
    grid-template-columns: 22rem 26rem 1fr;
    gap: 2.4rem;
    padding: 4rem 0;
    align-items: baseline;
  }
}
.program-row__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: .6rem;
}
@media (min-width: 750px) { .program-row__en { margin-bottom: 0; } }
.program-row__title { font-size: 1.7rem; letter-spacing: .04em; margin-bottom: .8rem; }
@media (min-width: 750px) { .program-row__title { font-size: 2rem; margin-bottom: 0; } }
.salon-program__note { margin-top: 2.4rem; }

/* 導入サロンの声（引用組み） */
.voice-grid { display: grid; gap: 3.2rem; }
@media (min-width: 750px) { .voice-grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.voice { margin: 0; border-top: 1px solid var(--line); padding-top: 2.4rem; }
.voice__mark {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--hover-fade);
  margin-bottom: 1.2rem;
}
.voice blockquote { margin: 0 0 1.6rem; }
.voice figcaption { font-size: 1rem; letter-spacing: .07rem; color: #999; }
.voice cite { font-style: normal; }

/* ==========================================================
   plan.html
   ========================================================== */

/* 巨大矢印価格 */
.plan-price { text-align: center; }
.plan-price__num { font-size: 3.4rem; gap: 1.2rem; margin: 2rem 0 2.4rem; }
@media (min-width: 750px) { .plan-price__num { font-size: 8rem; gap: 2.4rem; margin: 2.8rem 0 3.2rem; } }
.plan-price__lead { margin-bottom: 1.6rem; }

/* コスト内訳グラフ（HTML/CSS帯グラフ・モノクロ階調＋--accent1箇所） */
.cost-graph { display: grid; gap: 4rem; }
@media (min-width: 750px) { .cost-graph { gap: 5.2rem; } }
.cost-graph__name { font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-head); margin-bottom: 1.2rem; }
@media (min-width: 750px) { .cost-graph__name { font-size: 1.4rem; } }
.cost-graph__bar { display: flex; width: 100%; height: 4rem; }
@media (min-width: 750px) { .cost-graph__bar { height: 5.6rem; } }
.cost-graph__bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  overflow: hidden;
}
@media (min-width: 750px) { .cost-graph__bar .seg { font-size: 1.2rem; } }
.seg--k1 { background: #4C4E50; color: #fff; }
.seg--k2 { background: #8A8D90; color: #fff; }
.seg--k3 { background: #C4C6C9; color: var(--ink-head); }
.seg--k4 { background: #E8E8E8; color: var(--ink-head); }
.seg--ink { background: var(--ink-head); color: #fff; }
.seg--soft { background: #D9D9D9; color: var(--ink-head); }
.seg--acc { background: var(--accent); color: var(--ink-head); }
.cost-graph__legend { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin-top: 1.4rem; }
.cost-graph__legend li { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.1rem; letter-spacing: .04em; color: #666; }
.cost-graph__legend .lg { width: 1.1rem; height: 1.1rem; flex: none; }
.lg--k1 { background: #4C4E50; }
.lg--k2 { background: #8A8D90; }
.lg--k3 { background: #C4C6C9; }
.lg--k4 { background: #E8E8E8; }
.lg--ink { background: var(--ink-head); }
.lg--soft { background: #D9D9D9; }
.lg--acc { background: var(--accent); }
.cost-graph__note { margin-top: 3.2rem; }

/* 導入プラン3段カード（罫線ベース） */
.plan-cards__grid { display: grid; gap: 4rem; }
@media (min-width: 750px) { .plan-cards__grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items: stretch; } }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 3.2rem 2.4rem 2.8rem;
}
.plan-card--push { border-color: var(--ink-head); }
.plan-card__badge {
  position: absolute;
  top: 0;
  left: 2.4rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 2.4rem;
  padding: 0 1.2rem;
  background: #000;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.plan-card__en { font-family: var(--font-en); font-weight: 700; font-size: 1.4rem; letter-spacing: .16em; color: var(--ink-head); }
.plan-card__price {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3.4rem;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--ink-head);
  margin-top: 1.2rem;
}
.plan-card__tax { font-family: var(--font-jp); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; color: #999; margin-left: .8rem; }
.plan-card__cond { font-size: 1.2rem; letter-spacing: .04em; color: #666; margin-top: 1.4rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); }
.plan-card__inc { margin-top: 2rem; margin-bottom: .4rem; }
.plan-card__list { margin-bottom: 2.4rem; }
.plan-card__list li {
  display: flex;
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: .02em;
}
.plan-card__list li::before { content: ""; flex: none; width: 1rem; height: 1px; background: var(--ink-head); margin-top: 1rem; }
.plan-card .link-more { margin-top: auto; }
.plan-cards__note { margin-top: 3.2rem; }

/* 取引条件テーブル */
.plan-terms__note { margin-top: 2rem; }

/* FAQ抜粋 */
.plan-faq__list > div { padding: 2.4rem 0; border-bottom: 1px solid var(--line-soft); }
.plan-faq__list > div:first-child { border-top: 1px solid var(--line-soft); }
.plan-faq__list dt {
  display: flex;
  gap: 1.4rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--ink-head);
  margin-bottom: 1rem;
}
@media (min-width: 750px) { .plan-faq__list dt { font-size: 1.6rem; } }
.plan-faq__list dd { display: flex; gap: 1.4rem; }
.plan-faq__mark { font-family: var(--font-en); font-weight: 700; flex: none; color: #999; }
.plan-faq__more { margin-top: 3.2rem; }