/* Restored from beautrix.net's published VOICE section and interview templates.
   The original single-weight Japanese display face stays visually regular even
   where Studio requests bold. Keep its fallback regular; body emphasis is 900. */
.voice-home, .voice-interview { --voice-heading-font: '中ゴシックBBB', var(--sans); color: #333; }
.home .voice-home {
    position: relative;
    width: calc(100% - 96px);
    max-width: none;
    margin: 48px auto 0;
    padding: 48px 0 16px;
    background: linear-gradient(to right, #fffcf8 50%, #fffafa 50%);
}
.voice-home > .voice-heading { width: 1024px; max-width: 100%; margin: 0 auto 48px; padding: 0 24px; color: #000; }
.voice-heading .eyebrow { margin: 0 0 24px; font: 400 16px/1.4 var(--english); letter-spacing: .15em; }
.voice-heading .eyebrow::after { width: 100px; height: 1px; margin: 24px auto 0; background: #000; }
.voice-heading h2 { margin: 0 0 24px; font: 400 40px/1.4 var(--voice-heading-font); letter-spacing: .05em; }
.voice-heading .voice-intro { margin: 0; color: #333; font: 400 16px/1.4 var(--sans); }
.voice-list { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 1280px; max-width: 100%; margin: auto; padding: 10px 48px; }
.voice-card { flex: none; width: 320px; max-width: calc(100% - 24px); margin: 12px; background: #fff; }
.voice-card > a { display: flex; flex-direction: column; width: 100%; transition: opacity .4s; }
.voice-card > a:hover { opacity: .7; }
.voice-card-photo img { display: block; width: 100%; height: auto; }
.voice-card-copy { padding: 24px; }
.voice-card h3 { margin: 0 0 12px; font: 400 24px/1.4 var(--voice-heading-font); }
.voice-card-customer { margin: 0 0 8px; color: #666; font: 400 16px/1.2 var(--voice-heading-font); }
.voice-card-more { display: flex; justify-content: flex-end; align-items: center; color: #b4b4b4; font: 400 12px/1.2 var(--sans); }
.voice-card-more svg { flex: none; }

/* Both /posts/ and /before_after/ use the same original interview layout. */
.single-bt_voice main { padding-top: 0; }
.voice-interview { display: flex; flex-direction: column; align-items: center; width: 100%; }
.voice-cover { width: 100%; margin: 0 0 24px; }
.voice-cover img { width: 100%; height: auto; max-height: none; }
.voice-title { display: flex; align-items: center; width: 740px; max-width: calc(100% - 40px); min-height: 144px; margin: 20px; color: #333; font: 400 48px/1.5 var(--voice-heading-font); text-align: left; }
.voice-customer { width: 740px; max-width: 100%; margin: 0 0 24px; font: 400 20px/1.4 var(--sans); text-align: right; }
.voice-body { width: 740px; max-width: calc(100% - 40px); margin: 24px 20px 0; font: 400 16px/1.4 var(--sans); overflow-wrap: break-word; }
.voice-body p { margin: 10px 0; font: 400 16px/1.8 var(--sans); }
/* The importer normalized the source's question H1s to H2s. Keep that semantic
   outline while restoring their original 24px treatment and generous spacing. */
.voice-body h1, .voice-body h2 { margin: 48px 0 24px; padding: 0; border: 0; font: 400 24px/1.4 var(--voice-heading-font); }
.voice-body hr + h2:last-of-type { margin: 12px 0; font-size: 20px; }
.voice-body h3, .voice-body h4 { margin: 10px 0; font-family: var(--voice-heading-font); }
.voice-body strong { font-weight: 900; }
.voice-body hr { height: 0; margin: 48px 0 24px; border: 0; border-top: 1px solid #ccc; }
.voice-body img { width: auto; max-width: 100%; height: auto; }
.voice-body figure { margin: 10px 0; }
.voice-body a { text-decoration: underline; }
.voice-body blockquote { margin: 10px 0; padding: 10px 15px; border-left: 3px solid #00000026; font-style: italic; }
.voice-details { display: flex; align-items: flex-start; justify-content: space-between; width: 740px; max-width: 100%; margin: 24px 0 0; padding: 24px; background: #f6f6f6; }
.voice-detail { width: 48%; }
.voice-detail-summary { min-height: 120px; margin: 0 0 12px; }
.voice-detail h2 { margin: 0 0 12px; font: 400 18px/1.4 var(--voice-heading-font); }
.voice-detail p { margin: 0; font: 400 16px/1.8 var(--sans); }
.voice-trainer { display: flex; align-items: center; gap: 12px; }
.voice-trainer img { flex: none; width: 120px; max-width: 100%; height: auto; }
.voice-detail-link { display: block; width: 100%; padding: 6px 12px; border: 1px solid #000; color: #000; font: 400 14px/1.6 var(--sans); letter-spacing: .05em; text-align: center; transition: color .4s, background .4s; }
.voice-detail-link:hover { color: #fff; background: #455a64; }
.voice-breadcrumb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 24px 48px; color: #333; font: 400 12px/1.4 var(--english); letter-spacing: .15em; }
.voice-breadcrumb a { text-decoration: underline; }
.voice-breadcrumb a:hover { text-decoration: none; }

@media (max-width: 768px) {
    .voice-heading h2 { font-size: 28px; }
    .voice-card { width: 360px; }
    .voice-card-photo img { height: 240px; object-fit: cover; }
    .voice-card h3 { font-size: 20px; }
    .voice-title { font-size: 36px; }
    .voice-customer { max-width: calc(100% - 40px); }
}
@media (max-width: 480px) {
    .home .voice-home { width: 100%; margin: 0; padding: 24px 0; }
    .voice-home > .voice-heading { margin-bottom: 24px; }
    .voice-heading .eyebrow { font-size: 12px; margin-bottom: 12px; }
    .voice-heading .eyebrow::after { margin-top: 12px; }
    .voice-heading .voice-intro { font-size: 14px; }
    .voice-list { padding: 0 12px; }
    .voice-card { width: 100%; }
    .voice-card-photo img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
    .single-bt_voice main { padding-top: 64px; }
    .voice-title { width: 100%; max-width: 100%; min-height: 0; margin: 0; padding: 24px; font-size: 28px; }
    .voice-customer { width: 100%; max-width: 100%; margin: 0; padding: 0 24px; font: 400 16px/1.4 var(--voice-heading-font); }
    .voice-body { width: 100%; }
    .voice-body p { margin: 0; font-size: 14px; }
    .voice-body hr { margin: 24px 0; }
    .voice-trainer img { flex-shrink: 1; min-width: 0; }
    .voice-trainer p { flex: none; }
    .voice-breadcrumb { gap: 6px; padding: 24px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .voice-card > a, .voice-detail-link { transition: none; }
}