.about-main .breadcrumb { font-size: var(--font-size-sm); color: var(--color-text-sub); }
.about-main .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.about-main .breadcrumb li { display: flex; align-items: center; gap: var(--space-3); }
.about-main .breadcrumb a { display: flex; align-items: center; min-height: var(--control-height); }

.ab-hero-shell { background: var(--color-surface-warm); overflow: hidden; }
.ab-hero { padding-block: var(--space-5); }
.ab-hero-copy { width: 100%; }
.ab-eyebrow { color: var(--color-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: .08em; }
.ab-hero h1 { margin-top: var(--space-1); font-size: var(--hero-font-sp); letter-spacing: -.04em; }
.ab-hero h2 { margin-top: var(--space-4); font-size: var(--font-size-lg); }
.ab-hero-copy > p:last-child { margin-top: var(--space-4); color: var(--color-text-sub); }

.ab-content { padding-block: var(--space-6) var(--space-8); }
.ab-section + .ab-section { margin-top: var(--space-section-small); }
.ab-section-title { position: relative; margin-bottom: var(--space-5); padding-left: var(--space-4); font-size: var(--font-size-xl); }
.ab-section-title::before { content: ''; position: absolute; inset-block: .15em; left: 0; width: 5px; border-radius: var(--radius-pill); background: var(--color-accent); }

.ab-thought-grid { display: grid; gap: var(--space-4); }
.ab-thought-copy h3 { font-size: var(--font-size-xl); }
.ab-thought-copy p { margin-top: var(--space-4); color: var(--color-text-sub); }
.ab-quote-card { position: relative; display: grid; place-items: center; min-height: 250px; margin: 0; padding: var(--space-6); overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(145deg, #fff 0%, #f4eee6 100%); border: var(--border-default); text-align: center; }
.ab-quote-card::before { content: '“'; position: absolute; top: -26px; left: 16px; color: var(--color-accent-soft); font: 700 150px/1 Georgia,serif; }
.ab-quote-card blockquote { position: relative; z-index: 1; margin: 0; font-size: var(--font-size-md); line-height: 2; font-weight: var(--font-weight-medium); }
.ab-quote-card img { position: absolute; right: var(--space-3); bottom: var(--space-2); width: 82px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.ab-audience { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.ab-audience h3 { color: var(--color-accent); font-size: var(--font-size-md); }
.ab-audience ul { margin-top: var(--space-3); }
.ab-audience li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: var(--space-2); align-items: baseline; padding-block: var(--space-1); font-size: var(--font-size-sm); }
.ab-audience li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-label); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }

.ab-value-grid { display: grid; gap: var(--space-4); }
.ab-value-card { padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-bg), var(--color-surface-warm)); text-align: center; }
.ab-value-card img { width: 56px; height: 56px; margin-inline: auto; object-fit: contain; }
.ab-value-card h3 { margin-top: var(--space-3); font-size: var(--font-size-md); }
.ab-value-card p { margin-top: var(--space-3); color: var(--color-text-sub); font-size: var(--font-size-sm); text-align: left; }

.ab-reason { display: grid; gap: var(--space-5); }
.ab-reason-image { width: 100%; aspect-ratio: 1.45; object-fit: cover; object-position: center 48%; border-radius: var(--radius-image); }
.ab-reason-copy h3 { font-size: var(--font-size-lg); }
.ab-reason-copy > p { margin-top: var(--space-3); color: var(--color-text-sub); }
.ab-method-link { display: grid; grid-template-columns: 40px minmax(0,1fr) 28px; gap: var(--space-3); align-items: center; min-height: 84px; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-link); }
.ab-method-link:hover { background: var(--color-accent-soft); }
.ab-method-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-accent); font-weight: var(--font-weight-bold); }
.ab-method-link strong, .ab-method-link small { display: block; }
.ab-method-link small { margin-top: var(--space-1); color: var(--color-text-sub); }
.ab-arrow { justify-self: end; font-size: var(--font-size-xl); color: var(--color-accent); }

.ab-profile-grid { display: grid; gap: var(--space-4); }
.ab-profile-card { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-surface); }
.ab-avatar { display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--radius-pill); background: var(--color-bg); overflow: hidden; }
.ab-avatar svg { width: 78px; height: 78px; fill: #e8edf1; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-profile-label, .ab-profile-kicker { color: var(--color-link); font-weight: var(--font-weight-bold); }
.ab-profile-card h3 { font-size: var(--font-size-lg); }
.ab-profile-card div > p:last-child { margin-top: var(--space-2); color: var(--color-text-sub); font-size: var(--font-size-sm); }
.ab-mochi { width: 92px; height: 92px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-bg); }

.ab-notice { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.ab-notice h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-md); }
.ab-notice h2 span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
.ab-notice ul { margin-top: var(--space-3); padding-left: 1.25em; list-style: disc; }
.ab-notice li { color: var(--color-text-sub); font-size: var(--font-size-sm); }
.ab-notice li + li { margin-top: var(--space-1); }
.ab-notice a { color: var(--color-link); text-decoration: underline; text-underline-offset: var(--space-1); }

@media (min-width: 768px) {
  .ab-hero { padding-block: var(--space-6); }
  .ab-hero h1 { font-size: var(--hero-font-tablet); }
  .ab-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ab-reason { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; }
  .ab-profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 1024px) {
  .ab-content { padding-block: var(--space-7) var(--space-10); }
  .ab-hero h1 { font-size: var(--hero-font-desktop-small); }
  .ab-hero h2 { font-size: var(--font-size-xl); }
  .ab-section + .ab-section { margin-top: var(--space-section); }
  .ab-thought-grid { grid-template-columns: 1.05fr .82fr 1.08fr; align-items: stretch; gap: var(--space-5); }
  .ab-value-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .ab-value-card { padding: var(--space-5) var(--space-4); }
  .ab-reason-copy { padding-left: var(--space-4); }
  .ab-profile-card { padding: var(--space-5); }
}

@media (min-width: 1280px) {
  .ab-hero h1 { font-size: var(--hero-font-pc); }
}

@media (max-width: 419px) {
  .ab-profile-card { grid-template-columns: 72px minmax(0,1fr); gap: var(--space-3); padding: var(--space-3); }
  .ab-avatar, .ab-mochi { width: 72px; height: 72px; }
  .ab-avatar svg { width: 62px; height: 62px; }
  .ab-method-link { grid-template-columns: 32px minmax(0,1fr) 20px; padding-inline: var(--space-3); }
  .ab-method-icon { width: 32px; height: 32px; }
}