/* About ページ。文章が主役。写真や大きな装飾は置かない（配置指示 §3）。 */

.about-body { background: var(--public-surface); }

.about-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.about-center { text-align: center; }
.about-prose { max-width: 720px; }
.about-prose p { margin-bottom: 24px; }
.about-prose p:last-child { margin-bottom: 0; }

.public-about section { padding: 80px 0; }
.public-about .about-hero { padding: 88px 0 72px; }
.about-concerns { background: var(--public-bg); }

.about-label { font-size: 14px; font-weight: 700; color: var(--public-primary); letter-spacing: .06em; margin-bottom: 20px; }
.about-h1 { font-size: 40px; line-height: 1.5; font-weight: 700; letter-spacing: -.005em; }
.about-h1 .line { display: inline-block; }     /* 2行に見せるが、狭い画面では自然に折り返す */
.about-h2 { font-size: 28px; line-height: 1.5; font-weight: 700; margin-bottom: 28px; }
.about-card h3 { font-size: 18px; line-height: 1.6; margin-bottom: 12px; }
.public-about p { font-size: 16px; line-height: 1.9; }

.about-lead { max-width: 720px; margin: 24px auto 0; color: var(--public-text-sub); }

.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.about-card {
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: 16px; padding: 28px;
}
.about-card p { color: var(--public-text-sub); }
.about-card .about-icon { margin-bottom: 16px; }
.about-close { margin-top: 36px; }

.about-icon { display: block; width: 56px; height: 56px; margin-bottom: 20px; }

.about-quote {
  margin: 0 0 24px; padding: 24px 28px;
  background: var(--public-blue-soft); border: 1px solid #CFE2FB; border-radius: 16px;
}
.about-quote p { font-weight: 700; margin-bottom: 8px; }
.about-quote p:last-child { margin-bottom: 0; }

.about-feedback-link { margin-top: 8px; }
.about-pending { color: var(--public-text-sub); font-weight: 700; }
.about-pending small { font-weight: 400; margin-left: 6px; }

.about-start { background: var(--public-surface-soft); }
.about-start-lead { color: var(--public-text-sub); margin: -8px 0 28px; }
.about-assure { font-size: 13px; color: var(--public-text-sub); margin-top: 16px; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; font-size: 13px; }
.footer-nav a { color: var(--public-text-sub); text-decoration: none; }
.footer-nav a:hover { color: var(--public-primary); }
.footer-operator { margin-top: 12px; }

@media (max-width: 899px) {
  .about-cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .about-container { padding: 0 20px; }
  .public-about section { padding: 48px 0; }
  .public-about .about-hero { padding: 56px 0 44px; }
  .about-h1 { font-size: 28px; }
  .about-h2 { font-size: 23px; margin-bottom: 20px; }
  .about-card { padding: 24px; }
  .about-icon { width: 48px; height: 48px; }
  .about-quote { padding: 20px; }
}

/* ───────────── 吹き出し ───────────── */

.bubbles { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; }
.bubbles-tight { margin: 0 0 24px; gap: 12px; max-width: 560px; }
.bubble {
  position: relative; width: fit-content; max-width: 88%;
  padding: 16px 22px; border-radius: 18px; border: 1px solid transparent;
  justify-self: start;
}
.bubble p { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 500; color: var(--public-text); }
.bubble .who { display: block; margin-top: 8px; font-size: 12px; color: var(--public-text-sub); }
/* 吹き出しのしっぽは、片方の角だけを立てて表す（チャット風） */
.bubble-right { justify-self: end; border-bottom-right-radius: 4px; }
.bubble:not(.bubble-right) { border-bottom-left-radius: 4px; }
.bubble-blue { background: var(--public-blue-soft); border-color: #CFE2FB; }
.bubble-green { background: var(--public-green-soft); border-color: #C6ECDA; }
.bubble-teal { background: var(--public-primary-soft); border-color: #BFE9E5; }
.about-close { margin-top: 32px; color: var(--public-text-sub); }

@media (max-width: 767px) {
  .bubble { max-width: 100%; padding: 14px 18px; }
  .bubble p { font-size: 15px; }
}

/* ───────────── 吹き出し＋人物アイコン（チャット風） ───────────── */
.bubbles-chat { max-width: 900px; gap: 20px; }
.bubbles-chat.bubbles-tight { max-width: 760px; gap: 14px; }
.chat-row { display: flex; align-items: flex-end; gap: 14px; justify-self: start; max-width: 86%; }
.chat-row.chat-right { flex-direction: row-reverse; justify-self: end; }
.chat-avatar { width: 56px; height: 56px; flex: none; border-radius: 18px; box-shadow: 0 6px 16px rgba(20, 60, 90, .10); }
.bubbles-chat .bubble { max-width: none; justify-self: auto; }
.bubbles-chat .bubble p { font-size: 17px; }
.bubbles-chat .bubble .who { text-align: left; }
.chat-right .bubble .who { text-align: right; }
.bubble-yellow { background: var(--public-yellow-soft); border-color: #F6E3A6; }
@media (max-width: 767px) {
  .chat-row { max-width: 100%; gap: 10px; }
  .chat-avatar { width: 44px; height: 44px; border-radius: 14px; }
  .bubbles-chat .bubble p { font-size: 15px; }
}

/* ───────────── 書体（このサービスについて） ─────────────
   和文はほかのページと同じゴシック。見出しは太さで、本文は行間で読みやすくする */
/* 吹き出しの長さと大きさは、ページ内のどのグループでも同じにそろえる
   （文字の長さで幅が変わると、声ごとに重さが違って見えるため） */
.bubbles-chat.bubbles-tight { max-width: 900px; margin: 0 auto 24px; gap: 20px; }
/* 本文の細い枠（720px）の中にある吹き出しも、上の声と同じ900px幅まで広げる */
.about-prose .bubbles-chat {
  width: min(900px, calc(100vw - 64px)); max-width: none;
  position: relative; left: 50%; transform: translateX(-50%);
}
.bubbles-chat .chat-row { width: 86%; }
.bubbles-chat .bubble { flex: 1; min-width: 0; }
@media (max-width: 767px) {
  .about-prose .bubbles-chat { width: 100%; left: auto; transform: none; }
  .bubbles-chat .chat-row { width: 100%; }
}
.public-about .about-h1 { line-height: 1.55; }
.public-about .about-h1 .line:first-child { font-size: .72em; font-weight: 700; display: block; color: var(--public-text-sub); margin-bottom: 8px; }
.about-prose p { line-height: 1.95; }
.bubbles-chat .bubble p { font-size: 16px; font-weight: 500; line-height: 1.8; }
@media (max-width: 767px) {
  .bubbles-chat .bubble p { font-size: 15px; }
}

/* ───────────── ふつうの契約との違い（表）と、手を打つ前の見直し（3つの順番） ───────────── */
.about-plans { background: var(--public-bg); }
.about-plans .about-lead, .about-approach .about-lead { margin: -8px auto 32px; }
.about-table-wrap { max-width: 960px; margin: 0 auto; }
.about-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 16px; overflow: hidden; font-size: 15px; line-height: 1.7; }
.about-table th, .about-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--public-line); }
.about-table thead th { background: var(--public-surface-soft); font-size: 13px; color: var(--public-text-sub); font-weight: 700; }
.about-table tbody th { font-weight: 700; width: 28%; }
.about-table tbody td:last-child { width: 30%; }
.about-table tbody tr:last-child > * { border-bottom: 0; }
.about-table .is-ours > * { background: var(--public-primary-soft); }
.about-table .is-ours th { color: var(--public-primary); }
.about-table strong { font-family: var(--font); color: var(--public-primary); }
.about-table-note { margin-top: 10px; font-size: 13px !important; line-height: 1.7 !important; color: var(--public-text-sub); }
.about-plans-body { margin: 36px auto 0; }

.about-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-steps .about-card { position: relative; }
.about-step-no {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%;
  background: var(--public-primary); color: #fff; font-family: var(--font-num); font-size: 19px; font-weight: 700;
}
.about-approach-quote { max-width: 760px; margin: 36px auto 0; text-align: center; background: var(--public-primary-soft); border-color: #BFE9E5; }
.about-approach-quote p { font-size: 18px; }
.about-approach-quote p.sub { font-size: 15px; font-weight: 500; color: var(--public-text); }

@media (max-width: 767px) {
  /* 表はスマホでは1行ずつのカードにする（3列だと狭すぎる） */
  .about-table, .about-table tbody, .about-table tr, .about-table th, .about-table td { display: block; width: auto !important; }
  .about-table { border: 0; background: none; border-radius: 0; overflow: visible; font-size: 14px; }
  .about-table thead { display: none; }
  .about-table tbody { display: grid; gap: 10px; }
  .about-table tbody tr { background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 14px; padding: 14px 16px; }
  .about-table tbody tr > * { padding: 0; border: 0; background: none !important; }
  .about-table tbody th { font-size: 15px; margin-bottom: 4px; }
  .about-table tbody td:last-child { margin-top: 6px; font-weight: 700; }
  .about-table .is-ours { background: var(--public-primary-soft); border-color: #BFE9E5; }
  .about-plans-body { margin-top: 24px; }
  .about-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .about-step-no { width: 34px; height: 34px; font-size: 17px; margin-bottom: 10px; }
  .about-approach-quote { margin-top: 24px; padding: 18px; }
  .about-approach-quote p { font-size: 16px; }
  .about-approach-quote p.sub { font-size: 14px; }
}

/* ───────────── 左の目印（縦の線と点）。js/about-rail.js が作る ─────────────
   本文（最大1120px）の左の余白に置くので、1280px以上の画面だけ。スマホはヘッダーの下に細い進み具合の線 */
.about-rail, .about-progress { display: none; }
@media (min-width: 1280px) {
  .about-rail {
    display: block; position: fixed; left: max(20px, calc((100vw - 1120px) / 2 - 150px)); top: 50%; transform: translateY(-50%); z-index: 30;
    transition: opacity .3s ease;
  }
  .about-rail.is-idle { opacity: .35; }
  .about-rail:hover, .about-rail:focus-within { opacity: 1; }
  .about-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; }
  .rail-track { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--public-line); }
  .rail-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--public-primary); transform-origin: top; transform: scaleY(0); }
  .about-rail a { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--public-text-sub); font-size: 12px; font-weight: 500; line-height: 1; }
  .rail-dot {
    flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--public-surface);
    border: 2px solid var(--public-line); transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .about-rail a.is-past .rail-dot { border-color: var(--public-primary); }
  .about-rail a.is-current .rail-dot { border-color: var(--public-primary); background: var(--public-primary); transform: scale(1.25); box-shadow: 0 0 0 4px var(--public-primary-soft); }
  .rail-label { opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
  .about-rail a.is-current .rail-label { opacity: 1; transform: none; color: var(--public-text); font-weight: 700; }
  .about-rail:hover .rail-label, .about-rail a:focus-visible .rail-label { opacity: 1; transform: none; }
  .about-rail a:hover { color: var(--public-primary); }
}
@media (max-width: 767px) {
  .about-progress {
    display: block; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60;
    background: var(--public-primary); transform-origin: left; transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail-dot, .rail-label, .about-rail { transition: none; }
}
.about-limit { font-size: 14px !important; line-height: 1.8 !important; color: var(--public-text-sub); padding: 12px 16px; border-left: 3px solid var(--public-line); background: var(--public-surface); border-radius: 0 10px 10px 0; }