/* 詳細ページ（料金 / 流れ / 台湾市場 / FAQ）専用の追加スタイル。
   土台はトップページと同じ style.css。ここにはトップに無い部品だけを置く。 */

/* ページ冒頭の見出しブロック（固定ナビの高さ分だけ下げる） */
.page-hero { padding:132px 0 64px; }
.page-hero .section-head { margin-bottom:36px; }
.page-hero .lead { max-width:760px; }
.breadcrumb { font-size:12.5px; font-weight:700; color:rgba(255,255,255,.55); margin-bottom:26px; letter-spacing:.04em; }
.breadcrumb a { color:rgba(255,255,255,.78); }
.breadcrumb a:hover { color:#fff; }

/* 要点表：トップの .table-wrap を使いつつ、2列の表として読みやすくする */
.table-wrap.fact table { min-width:0 !important; }
/* style.css は表の2・3列目をスクロール演出で後から表示する（トップのVercel比較表用）。
   要点表は演出なしで最初から読める状態にする */
.table-wrap.fact th, .table-wrap.fact td { opacity:1 !important; transform:none !important; transition:none !important; }
.table-wrap.fact th { width:26%; white-space:nowrap; vertical-align:top; }
.table-wrap.fact td { font-weight:600; line-height:1.9; }
.table-wrap.fact td:first-child { font-weight:600; }
.table-wrap.fact a { color:var(--red-2); text-decoration:underline; }

/* 制作の流れ：トップのカードと同じ質感の縦並びステップ */
.step-list { list-style:none; display:grid; gap:14px; counter-reset:step; margin:0; padding:0; }
.step-item { position:relative; padding:24px 24px 24px 78px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.18); }
.step-item::before { counter-increment:step; content:counter(step); position:absolute; left:24px; top:22px; width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff; font-size:15px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(232,57,82,.28); }
.step-name { font-size:18px; font-weight:900; color:#fff; letter-spacing:-.01em; margin-bottom:8px; }
.step-body { font-size:15px; line-height:1.95; color:rgba(255,255,255,.78); max-width:760px; }
.step-meta { display:inline-block; margin-top:12px; font-size:12.5px; font-weight:900; color:#fff; background:rgba(232,57,82,.24); border:1px solid rgba(232,57,82,.45); border-radius:999px; padding:5px 14px; }

/* 関連ページへのリンク */
.page-links-wrap { padding:8px 0 72px; }
.page-links-label { font-size:12px; font-weight:900; letter-spacing:.12em; color:rgba(255,255,255,.55); margin-bottom:14px; }
.page-links { display:flex; flex-wrap:wrap; gap:10px; }
.page-links a { font-size:14px; font-weight:900; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:10px 20px; transition:background .2s ease, border-color .2s ease; }
.page-links a:hover { background:rgba(232,57,82,.24); border-color:rgba(232,57,82,.5); }

@media (max-width:768px) {
  .page-hero { padding:104px 0 44px; }
  .table-wrap.fact th { width:34%; white-space:normal; }
  .step-item { padding:20px 18px 20px 64px; }
  .step-item::before { left:16px; top:20px; width:32px; height:32px; font-size:14px; }
  .step-name { font-size:16.5px; }
}

/* ══════════════════════════════════════════════
   プレミアムプラン詳細ページ（2026-09-26）

   既存の配色をそのまま使う。--red（#E83952）を主役に、
   プレミアムだけに使う差し色として --violet（#8B5CFF）を少量入れ、
   他プランとの性質の違いを色でも示す。
   ══════════════════════════════════════════════ */

.pm-accent {
  color: var(--red);
}

/* ── つくる / 伸ばす の対比 ── */
.pm-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
  margin-top: 46px;
}
.pm-contrast-card {
  padding: 26px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pm-contrast-card.is-premium {
  background: linear-gradient(150deg, rgba(139, 92, 255, .18), rgba(232, 57, 82, .14));
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 18px 46px rgba(139, 92, 255, .18);
}
.pm-contrast-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 10px;
}
.pm-contrast-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.pm-contrast-title em {
  font-style: normal;
  color: var(--red);
}
.pm-contrast-card.is-premium .pm-contrast-title em {
  color: #C9AEFF;
}
.pm-contrast-body {
  font-size: 15.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .74);
  text-wrap: pretty;
}
.pm-contrast-arrow {
  align-self: center;
  width: 30px;
  height: 30px;
  border-right: 2px solid rgba(255, 255, 255, .34);
  border-bottom: 2px solid rgba(255, 255, 255, .34);
  transform: rotate(-45deg);
}

/* ── 提供内容カード ── */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.pm-card {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
}
.pm-card-num {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--red);
  margin-bottom: 12px;
}
.pm-card-title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.03em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.pm-card-body {
  font-size: 15.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .74);
  text-wrap: pretty;
}
.pm-card-list {
  list-style: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-card-list li {
  position: relative;
  padding-left: 19px;
  font-size: 14.5px;
  line-height: 1.8;
  font-weight: 700;
  color: rgba(255, 255, 255, .86);
}
.pm-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* ── 毎月の流れ ── */
.pm-cycle {
  list-style: none;
  counter-reset: pm;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.pm-cycle-item {
  position: relative;
  padding: 24px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pm-cycle-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(232, 57, 82, .18);
  border: 1px solid rgba(232, 57, 82, .4);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #FFB7C8;
  margin-bottom: 14px;
}
.pm-cycle-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 9px;
}
.pm-cycle-body {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}

/* ── 向き・不向き ── */
.pm-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.pm-fit-col {
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .04);
}
.pm-fit-col.is-yes {
  border-color: rgba(232, 57, 82, .42);
  background: rgba(232, 57, 82, .08);
}
.pm-fit-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  margin-bottom: 16px;
}
.pm-fit-col.is-yes .pm-fit-label {
  color: #FFB7C8;
}
.pm-fit-col.is-no .pm-fit-label {
  color: rgba(255, 255, 255, .62);
}
.pm-fit-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pm-fit-col li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .86);
  text-wrap: pretty;
}
.pm-fit-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}
.pm-fit-col.is-yes li::before {
  content: "✓";
  color: var(--red);
}
.pm-fit-col.is-no li::before {
  content: "−";
  color: rgba(255, 255, 255, .42);
}
.pm-fit-note {
  margin-top: 26px;
  font-size: 15.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .7);
  text-wrap: pretty;
}
.pm-fit-note strong {
  color: #fff;
}

/* ── 料金 ── */
.pm-price {
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
}
.pm-price-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
}
.pm-price-row:last-child {
  border-bottom: none;
}
.pm-price-k {
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .58);
}
.pm-price-v {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
  text-wrap: pretty;
}
/* 月額の相場観。金額そのものではなく目安として添えるため、値より一段落とす */
.pm-price-sub {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
  text-wrap: pretty;
}
.pm-price-note {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .64);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .pm-contrast {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pm-contrast-arrow {
    justify-self: center;
    transform: rotate(45deg);
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 768px) {
  .pm-contrast-title {
    font-size: 22px;
  }
  .pm-card {
    padding: 24px 20px 22px;
  }
  .pm-card-title {
    font-size: 17.5px;
  }
  .pm-price-sub {
    font-size: 13px;
  }
  .pm-price-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 18px;
  }
}

/* ── 提供内容のグループ見出し（2026-09-28）
   プレミアムは都度見積もりで、全員に同じ5つが付くわけではない。
   分析に必須の3つと、目的に応じて選ぶものを視覚的に分ける。 ── */
.pm-group-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 44px 0 18px;
  font-size: 15.5px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .9);
}
.pm-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(232, 57, 82, .2);
  border: 1px solid rgba(232, 57, 82, .46);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #FFB7C8;
}
.pm-group-badge.is-option {
  background: rgba(139, 92, 255, .18);
  border-color: rgba(139, 92, 255, .44);
  color: #C9AEFF;
}
.pm-group-label + .pm-grid {
  margin-top: 0;
}
.pm-group-note {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .7);
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .pm-group-label {
    font-size: 14.5px;
    gap: 9px;
    margin: 34px 0 14px;
  }
  .pm-group-note {
    font-size: 14px;
  }
}

/* ── 選べるオプション（2026-09-28）
   数が9つあるため、必須の3つと同じ大きさのカードにすると
   そちらが主役に見えてしまう。目的ごとに束ね、1行ずつの一覧で軽く見せる。 ── */
.pm-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.pm-option {
  padding: 24px 22px;
  border-radius: 18px;
  background: rgba(139, 92, 255, .07);
  border: 1px solid rgba(139, 92, 255, .24);
}
.pm-option-cat {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #C9AEFF;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pm-option-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pm-option-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pm-option-list strong {
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
  text-wrap: balance;
}
.pm-option-list span {
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .66);
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .pm-option {
    padding: 20px 18px;
  }
  .pm-option-list strong {
    font-size: 14px;
  }
  .pm-option-list span {
    font-size: 13px;
  }
}

/* ── 提供内容のアイコン（2026-09-28）
   集客支援セクションの sc-icon と同じ描き方（viewBox 40 / 白の半透明ストローク1.5）で
   揃えている。必須カードは番号と同じ行に置き、オプションは項目名の左に小さく添える。 ── */
.pm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pm-card-head .pm-card-num {
  margin-bottom: 0;
}
.pm-card-ic {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.pm-option-list li {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
}
.pm-option-ic {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.pm-option-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
@media (max-width: 768px) {
  .pm-card-ic {
    width: 34px;
    height: 34px;
  }
  .pm-option-ic {
    width: 22px;
    height: 22px;
  }
}