:root {
    --white: #FFFFFF;
    --snow: #FAFAFA;
    --dusty-pink: #D4929B;
    --dusty-pink-light: #F5E0E3;
    --dusty-pink-pale: #FDF5F6;
    --deep-navy: #1B2A4A;
    --deep-navy-light: #2D4066;
    --mustard: #E8A838;
    --mustard-hover: #D4962E;
    --text-dark: #2C2C2C;
    --text-mid: #555555;
    --text-light: #888888;
    --border: #E5E5E5;
    --bg-gray: #F5F5F5;
    --case-pop-accent: var(--mustard);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== HEADER (STICKY) ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s;
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.header-brand .logo {
    margin: 0;
    line-height: 0;
}

.header-brand .logo-img {
    height: 50px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    display: block;
}

.logo-tosho {
    flex-shrink: 0;
    line-height: 0;
}

.logo-tosho img {
    height: 50px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    padding-right: 20px;
}

.header-trami-logo {
    flex-shrink: 0;
    line-height: 0;
}

.header-trami-logo-img {
    height: 50px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.header-phone {
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.header-phone-top {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 1.1rem;
    line-height: 1.2;
}

.header-phone-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
}

.header-phone-hours {
    font-size: 0.65rem;
    color: var(--text-light);
}

.header-phone .phone-num {
    font-size: inherit;
    color: var(--deep-navy);
    font-weight: 800;
}

.header-cta-btn {
    display: inline-block;
    background: var(--mustard);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    animation: cta-bounce 2s ease-in-out infinite;
    white-space: nowrap;
}

.header-cta-btn:hover {
    background: var(--mustard-hover);
    transform: scale(1.03);
}

@keyframes cta-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* ===== SP STICKY CTA ===== */
.sp-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--dusty-pink);
    padding: 10px 16px;
    text-align: center;
}

.sp-sticky-cta a {
    display: block;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.4;
}

.sp-sticky-cta .sp-phone-num {
    font-size: 1.4rem;
    font-weight: 900;
    display: block;
    letter-spacing: 0.05em;
}

.sp-sticky-cta .sp-phone-sub {
    font-size: 0.65rem;
    opacity: 0.9;
    display: block;
}

/* ===== FLOATING CTA (hero CTA が画面外のとき) ===== */
.floating-cta-bar {
    --floating-cta-h: 80px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
}

.floating-cta-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floating-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.floating-cta-btn {
    display: inline-block;
    width: 100%;
    max-width: 520px;
    text-align: center;
    background: var(--mustard);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 14px 24px;
    border-radius: 60px;
    text-decoration: none;
    line-height: 1.45;
    box-shadow: 0 4px 16px rgba(232, 168, 56, 0.35);
    transition: background 0.3s, box-shadow 0.3s;
}

.floating-cta-btn:hover {
    background: var(--mustard-hover);
    box-shadow: 0 6px 24px rgba(232, 168, 56, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .floating-cta-bar {
        transition: none;
    }
}

/* ===== HERO / FV（全幅・画像上に左テキストオーバーレイ） ===== */
.hero {
    margin-top: 60px;
    position: relative;
    background: var(--white);
    overflow-x: clip;
    overflow-y: visible;
    padding: 6px 0 0;
    display: flex;
    flex-direction: column;
}

.hero::before {
    display: none;
}

.hero-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
}

.hero-text {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    justify-self: start;
    min-width: 0;
    margin: 50px 0;
    padding-left: clamp(80px, 7.5vw, 110px);
    padding-right: clamp(12px, 3vw, 24px);
    padding-bottom: clamp(48px, 8.8vh, 140px);
    max-width: min(720px, 54vw);
    margin-left: clamp(32px, 30vw, 100px);
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hero-text {
        margin-left: 0;
    }

    .hero-stats {
        gap: 5px;
    }

    .hero-cta {
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    .hero-text {
        padding-bottom: clamp(48px, 7.5vh, 140px);
    }
}

.hero-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hero-badge {
    background: var(--deep-navy);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hero-badge svg {
    width: 14px;
    height: 14px;
    fill: var(--mustard);
}

h1.hero-main-copy {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.5;
    color: var(--text-dark);
    margin-bottom: 25px;
}

h1.hero-main-copy em {
    font-style: normal;
    color: var(--dusty-pink);
    position: relative;
}

.hero-sub-copy {
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 45px;
}

.hero-sub-copy strong {
    color: var(--text-dark);
}

.hero-laurel-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.hero-stats {
    display: flex;
    margin-bottom: 50px;
    justify-content: space-between;
}

.hero-stat {
    position: relative;
    overflow: hidden;
    padding: 10px 0 12px 0;
    text-align: center;
    flex: 0.3;
    min-width: 170px;
    max-width: 190px;
}

.hero-stat-frame {
    position: relative;
    width: 100%;
}

.hero-stat-wreath-svg {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(100, 72, 12, 0.18));
}

.hero-stat-content {
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    max-width: 58%;
    border-radius: 10px;
    pointer-events: none;
}

.hero-stat-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--dusty-pink);
    display: block;
    line-height: 1.2;
}

.hero-stat-label {
    font-size: 0.66rem;
    color: var(--text-light);
    display: block;
    margin-top: 2px;
}

.hero-cta-wrapper {
    display: flex;
    justify-content: center;
}

.hero-cta {
    display: inline-block;
    background: var(--mustard);
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
    padding: 18px 36px;
    border-radius: 60px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(232, 168, 56, 0.35);
    transition: all 0.3s;
    animation: cta-bounce 2s ease-in-out infinite;
    text-align: center;
    line-height: 1.5;
}

.hero-cta:hover {
    background: var(--mustard-hover);
    box-shadow: 0 6px 30px rgba(232, 168, 56, 0.45);
}

.hero-image {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    pointer-events: none;
}

.hero-image-placeholder {
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.hero-image-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 0;
    z-index: 0;
    opacity: 1;
}

.hero-image-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.55) 28%,
            rgba(255, 253, 251, 0.2) 52%,
            transparent 78%);
}

.hero-image-placeholder::after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    pointer-events: none;
    border-radius: 0;
    background: linear-gradient(to top, rgba(27, 42, 74, 0.12), transparent);
}

/* ===== SECTION COMMON ===== */
.section {
    padding: 70px 20px;
}

.section-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 44px;
}

.section-title-en {
    font-size: 0.7rem;
    color: var(--dusty-pink);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.section-title h2 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-dark);
}

.section-title h2 em {
    font-style: normal;
    color: var(--dusty-pink);
}

/* ===== LOGO CAROUSEL ===== */
.logos-section {
    background: var(--snow);
    padding: 20px 0;
    overflow: hidden;
}

.logos-section .section-title {
    padding: 0 20px;
    margin-top: 50px;
}

.logos-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: -30px;
    margin-bottom: 30px;
}

.logo-track-wrapper {
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.logo-track-wrapper::before,
.logo-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.logo-track-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--snow), transparent);
}

.logo-track-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--snow), transparent);
}

.logo-track {
    display: flex;
    gap: 14px;
    animation: scroll-logos 70s linear infinite;
    width: max-content;
}

.logo-track.reverse {
    animation-direction: reverse;
}

.logo-track.slow {
    animation-duration: 80s;
}

.logo-item {
    flex: 0 0 100px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--text-light);
    font-weight: 500;
}

.company-logo-img {
    max-height: 50px;
    padding: 8px 3px;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ===== problems POINTS ===== */
.problems-section {
    margin-top: 0;
    background: #789ec8;
    color: var(--white);
    position: relative;
    /* 上は矩形のまま、下辺だけ中央へ向かう三角の切り欠き（V字） */
    --problems-notch: clamp(96px, 16vw, 140px);
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - var(--problems-notch)),
            50% 100%,
            0 calc(100% - var(--problems-notch)));
    -webkit-clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - var(--problems-notch)),
            50% 100%,
            0 calc(100% - var(--problems-notch)));
    box-sizing: border-box;
    /* 切り欠きの深さ分 + その上にコンテンツ余白（テキストが尖りに被らないように） */
    padding: clamp(48px, 7vw, 80px) clamp(28px, 7vw, 120px) calc(var(--problems-notch) + clamp(32px, 6vw, 64px));
}

.problems-section .section-inner {
    min-height: 600px;
}

.problems-section .section-title h2 {
    color: var(--white);
}

.problems-section .section-title-en {
    color: var(--dusty-pink-light);
}

.problems-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 700px;
    margin: 0 auto;
}

/*
* 【画像配置バージョン】左右2枚＋中央 .problems-list-main
* ・PC：常に横並び（nowrap）／中央は min-width でカード列の幅を確保しつつ狭い画面では縮小・改行可
* ・左画像はやや上、右画像はやや下（translateY）
* ・768px以下：画像は非表示（リストのみ）
*/
.problems-list.problems-list--img-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 22px);
    max-width: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.problems-list.problems-list--img-right .problems-list-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 520px;
    /* 画像2枚分のおおよその幅を除きつつ、可能ならカード列に十分な幅を確保 */
    min-width: min(520px, calc(100% - 300px));
    max-width: 700px;
}

/* 【画像配置バージョン】左右イラスト（小さめ） */
.problems-list.problems-list--img-right .problems-list-image {
    flex: 0 0 auto;
    width: clamp(108px, 15.5vw, 212px);
    /* max-width: 140px; */
    height: auto;
    display: block;
    object-fit: contain;
}

/* 【画像配置バージョン】左：やや上 */
.problems-list.problems-list--img-right .problems-list-image--left {
    align-self: center;
    transform: translateY(-64px);
}

/* 【画像配置バージョン】右：やや下 */
.problems-list.problems-list--img-right .problems-list-image--right {
    align-self: center;
    transform: translateY(36px);
}

/* 【画像配置バージョン】狭いタブレット幅：画像をさらに小さくして横並びを維持 */
@media (max-width: 1100px) and (min-width: 769px) {
    .problems-list.problems-list--img-right .problems-list-main {
        min-width: min(360px, calc(100% - 220px));
        flex-basis: 400px;
    }

    .problems-list.problems-list--img-right .problems-list-image {
        width: clamp(56px, 9vw, 110px);
        max-width: 110px;
    }

    .problems-list.problems-list--img-right .problems-list-image--left {
        transform: translateY(-10px);
    }

    .problems-list.problems-list--img-right .problems-list-image--right {
        transform: translateY(12px);
    }
}

.problems-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.95rem;
    line-height: 1.7;
    transition: all 0.3s;
    font-weight: bold;
}

.problems-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.problems-icon {
    flex: 0 0 28px;
    height: 28px;
    background: rgba(212, 146, 155, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* ===== REASONS ===== */
.reasons-section {
    background: var(--white);
    position: relative;
}

.reasons-section .section-inner {
    position: relative;
    z-index: 1;
}

/* reasons / cases 間の波（インライン SVG） */
.divider.reasons-cases-divider {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    background: var(--white);
}

.divider.reasons-cases-divider svg {
    display: block;
    width: 100%;
    height: clamp(12px, 4vw, 360px);
}

.divider[data-wave-orient="top"] svg {
    transform: scaleY(1);
    transform-origin: center top;
}

.divider.reasons-cases-divider path {
    fill: var(--dusty-pink-pale);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.reason-card {
    background: var(--white);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 2.5vw, 24px);
    padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 28px);
}

@media (min-width: 769px) {

    .reason-card:nth-child(3),
    .reason-card:nth-child(4) {
        flex-direction: row-reverse;
    }
}

.reason-card__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(16px, 2vw, 28px) 0;
    position: relative;
    z-index: 1;
}

.reason-card__index {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(3.25rem, 11vw, 8.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--dusty-pink);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.reason-card h3,
.reason-card p {
    position: relative;
    z-index: 1;
}

.reason-card__visual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: var(--dusty-pink-pale);
    padding: clamp(7px, 2.2vw, 14px);
    border-radius: 14px;
    max-width: 320px;
}

.reason-card__image {
    width: clamp(88px, 13vw, 160px);
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
}

.reason-card:nth-child(odd) .reason-card__image {
    transform: rotate(-5deg);
}

.reason-card:nth-child(even) .reason-card__image {
    transform: rotate(5deg);
}

.reason-num {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--dusty-pink);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: block;
}

.reason-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--text-dark);
}

.reason-card h3 .reason-tag {
    display: inline-block;
    background: var(--dusty-pink);
    color: var(--white);
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 7px;
    vertical-align: middle;
}

.reason-card p {
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.8;
}

.reason-card__note {
    color: var(--text-light);
}

/* タブレット幅（769〜1024px）: 強みカードを SP と同様に縦積み */
@media (min-width: 769px) and (max-width: 1024px) {
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reason-card {
        flex-direction: row;
        align-items: stretch;
        gap: 16px;
        padding: 20px 16px;
    }

    .reason-card:nth-child(3),
    .reason-card:nth-child(4) {
        flex-direction: row-reverse;
    }

    .reason-card__content {
        padding: 12px 0 8px;
    }

    .reason-card__index {
        font-size: clamp(3rem, 18vw, 5.5rem);
    }

    .reason-card__visual {
        align-self: center;
        min-width: 0;
        width: 100%;
        max-width: 280px;
    }

    .reason-card__image {
        max-width: 100%;
        margin-inline: auto;
    }
}

/* ===== CASE STUDIES ===== */
.cases-section {
    background: var(--dusty-pink-pale);
    margin-top: -1px;
}

.cases-track-wrapper {
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    margin-top: 10px;
    isolation: isolate;
}

.cases-track-wrapper::before,
.cases-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 12vw, 100px);
    z-index: 12;
    pointer-events: none;
}

/* #FDF5F6 = --dusty-pink-pale（transparent との境界アーティファクト回避） */
.cases-track-wrapper::before {
    left: 0;
}

.cases-track-wrapper::after {
    right: 0;
}

.cases-swiper-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 clamp(8px, 2vw, 16px);
    position: relative;
    z-index: 2;
}

.cases-swiper-stage {
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    isolation: isolate;
}

.cases-swiper-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ステージ内の両端カードを背景色へフェード（クリックは透過） */
.cases-swiper-stage::before,
.cases-swiper-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(22px, 9%, 42px);
    z-index: 15;
    pointer-events: none;
}

.cases-swiper-stage::before {
    left: 0;
    background: linear-gradient(to right,
            color-mix(in srgb, var(--dusty-pink-pale) 28%, transparent) 0%,
            transparent 78%);
}

.cases-swiper-stage::after {
    right: 0;
    background: linear-gradient(to left,
            color-mix(in srgb, var(--dusty-pink-pale) 28%, transparent) 0%,
            transparent 78%);
}

.casesSwiper {
    width: 100%;
    min-width: 0;
    max-width: none;
    position: relative;
    z-index: 1;
    overflow: visible;
    padding: 24px 12px 36px;
    box-sizing: border-box;
}

.casesSwiper .swiper-slide {
    width: 500px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.cases-swiper-row .cases-nav.swiper-button-prev,
.cases-swiper-row .cases-nav.swiper-button-next {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 44px;
    height: 44px;
    z-index: 22;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--dusty-pink-light);
    background: var(--dusty-pink-pale);
    color: var(--dusty-pink);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cases-swiper-row .cases-nav.swiper-button-prev:hover,
.cases-swiper-row .cases-nav.swiper-button-next:hover {
    background: var(--dusty-pink);
    border-color: var(--dusty-pink);
    color: var(--white);
}

.cases-swiper-row .cases-nav.swiper-button-prev svg,
.cases-swiper-row .cases-nav.swiper-button-next svg {
    width: unset !important;
    max-width: none;
    height: 1.25em;
    flex-shrink: 0;
}

.cases-swiper-row .cases-nav.swiper-button-prev::after,
.cases-swiper-row .cases-nav.swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

.cases-swiper-row .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.case-card {
    width: 100%;
    background: var(--white);
    border-radius: 14px;
    padding: 28px 24px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.case-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dusty-pink);
    background: var(--dusty-pink-pale);
    display: inline-block;
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
    opacity: 0.95;
}

.case-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 -2px 20px;
    padding: 3px 14px 3px 12px;
    background-color: var(--white);
    background-size: 9px 9px;
    background-position: 0 0;
}

.case-result__icon {
    flex-shrink: 0;
    display: flex;
    margin-top: 2px;
    color: var(--case-pop-accent);
}

.case-result__icon svg {
    display: block;
}

.case-result__value {
    flex: 1;
    min-width: 0;
    display: block;
    font-size: clamp(1.15rem, 3.6vw, 1.6rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--deep-navy);
    letter-spacing: -0.02em;
}

.case-stage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    margin-top: 12px;
}

.case-stage__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.case-stage__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-stage__icon svg {
    display: block;
}

.case-stage__icon--before {
    color: var(--text-light);
}

.case-stage__icon--after {
    color: var(--dusty-pink);
}

.case-stage--before {
    background: var(--white);
    border-radius: 8px;
    border: 2px dotted var(--border);
    box-shadow: none;
}

.case-stage--before .case-stage__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.case-stage--before .case-stage__text {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-mid);
    line-height: 1.65;
}

.case-stage--after {
    position: relative;
    background: var(--dusty-pink-pale);
    border-radius: 16px 16px 18px 6px;
    border: 1px solid rgba(212, 146, 155, 0.45);
    box-shadow: 0 6px 18px rgba(212, 146, 155, 0.22);
    padding-bottom: 16px;
    overflow: visible;
}

.case-stage--after .case-stage__label {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--deep-navy);
}

.case-stage--after .case-stage__text {
    margin: 0;
    padding-right: 22px;
    font-size: 0.8rem;
    color: var(--text-dark);
    line-height: 1.7;
}

.case-stage-gap {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.case-stage-gap__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--dusty-pink);
    color: var(--white);
}

.case-stage-gap__badge svg {
    display: block;
}

/* ===== VISUMO ===== */
.visumo-section {
    background: var(--snow);
    padding: 50px 20px;
}

.visumo-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.visumo-placeholder {
    background: var(--white);
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.85rem;
}

.ecbn-selection-widget--initial-hidden {
    display: none;
}

/* ===== FLOW ===== */
.flow-section {
    background: var(--white);
}

.flow-section__sampling-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

.flow-placeholders {
    --flow-placeholder-tip: 28px;
    --flow-cell-width: 280px;
    --flow-cell-min: 220px;
    --flow-cell-pad: 16px;
    --flow-cell-y-gap: 12px;
    --flow-head-gap: 15px;
    --flow-step-label-fs: 0.6rem;
    --flow-step-num-fs: 1.2rem;
    --flow-mini-text-fs: 0.9rem;
    --flow-badge-fs: 0.65rem;
    --flow-badge-py: 6px;
    --flow-badge-px: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: var(--flow-placeholder-tip);
    min-height: 200px;
}

.flow-placeholders__cell {
    width: var(--flow-cell-width);
    min-width: var(--flow-cell-min);
    min-height: 100px;
    box-sizing: border-box;
    padding: var(--flow-cell-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--flow-cell-y-gap);
    position: relative;
    flex-shrink: 0;
}

.flow-placeholders__cell:not(:last-child) {
    margin-left: calc(-1 * var(--flow-placeholder-tip));
}

/* 左のブロックを手前にし、右の三角が次のブロックの上に見えるようにする */
.flow-placeholders__cell:nth-child(1) {
    z-index: 6;
}

.flow-placeholders__cell:nth-child(2) {
    z-index: 5;
}

.flow-placeholders__cell:nth-child(3) {
    z-index: 4;
}

.flow-placeholders__cell:nth-child(4) {
    z-index: 3;
}

.flow-placeholders__cell:nth-child(5) {
    z-index: 2;
}

.flow-placeholders__cell:nth-child(6) {
    z-index: 1;
}

.flow-placeholders__cell {
    clip-path: polygon(0 0,
            calc(100% - var(--flow-placeholder-tip)) 0,
            100% 50%,
            calc(100% - var(--flow-placeholder-tip)) 100%,
            0 100%);
}

/* 最終ブロック: 右辺の先端は維持し、左辺に「く」を左右反転したような先端（先は右向き） */
.flow-placeholders>.flow-placeholders__cell:last-child {
    clip-path: polygon(0 0,
            calc(100% - var(--flow-placeholder-tip)) 0,
            100% 50%,
            calc(100% - var(--flow-placeholder-tip)) 100%,
            0 100%,
            var(--flow-placeholder-tip) 50%);
}

/* 左から右へ dusty-pink が少しずつ濃くなるグラデーション */
.flow-placeholders>.flow-placeholders__cell:nth-child(1) {
    background: linear-gradient(142deg,
            var(--dusty-pink-pale) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 50%, var(--dusty-pink-pale) 50%) 100%);
}

.flow-placeholders>.flow-placeholders__cell:nth-child(2) {
    background: linear-gradient(142deg,
            color-mix(in srgb, var(--dusty-pink-light) 28%, var(--dusty-pink-pale) 72%) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 72%, var(--dusty-pink) 28%) 100%);
}

.flow-placeholders>.flow-placeholders__cell:nth-child(3) {
    background: linear-gradient(142deg,
            color-mix(in srgb, var(--dusty-pink-light) 52%, var(--dusty-pink-pale) 48%) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 58%, var(--dusty-pink) 42%) 100%);
}

.flow-placeholders>.flow-placeholders__cell:nth-child(4) {
    background: linear-gradient(142deg,
            color-mix(in srgb, var(--dusty-pink-light) 58%, var(--dusty-pink) 42%) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 48%, var(--dusty-pink) 52%) 100%);
}

.flow-placeholders>.flow-placeholders__cell:nth-child(5) {
    background: linear-gradient(142deg,
            color-mix(in srgb, var(--dusty-pink-light) 38%, var(--dusty-pink) 62%) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 26%, var(--dusty-pink) 74%) 100%);
}

.flow-placeholders>.flow-placeholders__cell:nth-child(6) {
    background: linear-gradient(142deg,
            color-mix(in srgb, var(--dusty-pink-light) 18%, var(--dusty-pink) 82%) 0%,
            color-mix(in srgb, var(--dusty-pink-light) 8%, var(--dusty-pink) 92%) 100%);
}

.flow-placeholders__badge {
    display: inline-block;
    font-size: var(--flow-badge-fs);
    font-weight: 700;
    padding: var(--flow-badge-py) var(--flow-badge-px);
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.3;
    background: var(--deep-navy);
    color: var(--white);
}

.flow-placeholders__badge--dusty {
    background: var(--dusty-pink);
    color: var(--white);
}

.flow-placeholders__badge--mustard {
    background: var(--mustard);
    color: var(--deep-navy);
}

.flow-placeholders__head {
    display: flex;
    align-items: center;
    gap: var(--flow-head-gap);
}

.flow-placeholders__step {
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 2px solid var(--deep-navy);
    text-align: right;
}

.flow-placeholders__step-label {
    margin: 0;
    font-size: var(--flow-step-label-fs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-mid);
}

.flow-placeholders__step-num {
    margin: 0;
    font-size: var(--flow-step-num-fs);
    font-weight: 800;
    line-height: 1.15;
    color: var(--deep-navy);
}

.flow-placeholders__track {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0;
    position: relative;
    align-self: stretch;
    padding-bottom: 4px;
}

.flow-placeholders__track:has(> .flow-placeholders__mini:only-child)::before {
    display: none;
}

.flow-placeholders__mini {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 5px 0;
    position: relative;
    z-index: 1;
    justify-content: center;
}

.flow-placeholders__mini-text {
    font-size: var(--flow-mini-text-fs);
    font-weight: 700;
    color: var(--deep-navy);
    line-height: 1.45;
    margin: 0;
}

/* PC では改行なし、SP（768px以下）でのみ有効。HTML: 文<br class="br-sp-only">文 */
.br-sp-only {
    display: none;
}

.flow-placeholders__mini-note {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-mid);
    line-height: 1.45;
    margin: 4px 0 0;
}

.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.flow-steps::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--border);
}

.flow-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 16px 0;
    position: relative;
}

.flow-dot {
    flex: 0 0 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--white);
    z-index: 1;
    position: relative;
}

.flow-dot.client {
    background: var(--dusty-pink);
}

.flow-dot.trami {
    background: var(--deep-navy);
}

.flow-step-content {
    flex: 1;
    padding-top: 12px;
}

.flow-step-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.flow-step-content p {
    font-size: 0.8rem;
    color: var(--text-mid);
}

.flow-role-badge {
    display: inline-block;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 6px;
}

.flow-role-badge.client {
    background: var(--dusty-pink-light);
    color: var(--dusty-pink);
}

.flow-role-badge.trami {
    background: rgba(27, 42, 74, 0.1);
    color: var(--deep-navy);
}

.flow-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 20px;
}

/* ===== TESTIMONIALS ===== */
.voice-section {
    background: var(--dusty-pink-pale);
}

.voice-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.voice-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.voice-card {
    flex: 0 0 100%;
    padding: 0 10px;
}

.voice-card-inner {
    background: var(--white);
    border-radius: 16px;
    padding: 36px 32px;
    border: 1px solid var(--border);
}

.voice-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.voice-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--dusty-pink-light);
}

.voice-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voice-info h4 {
    font-size: 0.9rem;
    font-weight: 700;
}

.voice-info p {
    font-size: 0.75rem;
    color: var(--text-light);
}

.voice-card-inner blockquote {
    font-size: 0.88rem;
    line-height: 2;
    color: var(--text-mid);
}

.voice-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.voice-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-mid);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-nav button:hover {
    background: var(--dusty-pink);
    color: var(--white);
    border-color: var(--dusty-pink);
}

.voice-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.voice-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s;
    cursor: pointer;
}

.voice-dots span.active {
    background: var(--dusty-pink);
    width: 24px;
    border-radius: 4px;
}

/* ===== FORM ===== */
.form-section {
    background: var(--white);
    position: relative;
    padding: 10px 20px;
}

#form {
    scroll-margin-top: 80px;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: var(--dusty-pink);
}

.form-inner {
    /* max-width: 700px; */
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}

.form-heading {
    text-align: center;
    color: var(--white);
    margin-bottom: 30px;
    padding-top: 10px;
}

.form-heading h2 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.form-heading p {
    font-size: 0.85rem;
    opacity: 0.9;
    line-height: 1.8;
}

.form-phone-block {
    text-align: center;
    margin-bottom: 24px;
    color: var(--white);
}

.form-phone-block a {
    color: var(--white);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    display: block;
}

.form-phone-block small {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Logo strip before form（ヒーロー .logos-section と同様に3行） */
.form-logo-strip {
    margin-bottom: 24px;
    position: relative;
    padding: 20px 6px;
}

.form-logo-strip .form-logo-track-wrapper {
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.form-logo-strip .form-logo-track-wrapper:last-child {
    margin-bottom: 0;
}

.form-logo-strip .form-logo-track-wrapper::before,
.form-logo-strip .form-logo-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.form-logo-strip .form-logo-track-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--white), transparent);
}

.form-logo-strip .form-logo-track-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--white), transparent);
}

.form-logo-track {
    gap: 16px;
    width: max-content;
    position: relative;
    z-index: 0;
}

/* ヒーロー帯と同じ .logo-item / .company-logo-img を流用（サイズのみコンパクトに） */
.form-logo-track .logo-item {
    flex: 0 0 100px;
    height: 36px;
}

.form-logo-track .company-logo-img {
    max-height: 32px;
    padding: 4px 2px;
}

.form-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 50px auto;
    background: linear-gradient(315deg, #ffffffd4 0%, #fce6e6ba 100%);
}

.form-card-title {
    text-align: center;
    margin: 0 0 28px;
}

.form-card-title__text {
    margin: 0 0 5px;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dusty-pink);
    letter-spacing: 0.06em;
}

.form-card-title__line {
    display: block;
    width: min(90px, 60%);
    height: 8px;
    margin: 0 auto;
    border: 4px solid var(--dusty-pink);
    border-radius: 999px;
    box-sizing: border-box;
    background: var(--dusty-pink);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.form-group label .required {
    background: var(--dusty-pink);
    color: var(--white);
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--dusty-pink);
    background: var(--white);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-mid);
}

.form-checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background-color: var(--white);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-checkbox-item input[type="checkbox"]:checked {
    background-color: var(--dusty-pink);
    border: 1.5px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
}

.form-checkbox-item input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--dusty-pink);
    outline-offset: 2px;
}

.form-submit {
    width: 100%;
    background: var(--mustard);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 800;
    padding: 18px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    animation: cta-bounce 2s ease-in-out infinite;
    font-family: inherit;
}

.form-submit:hover {
    background: var(--mustard-hover);
}

.form-privacy-notice {
    margin: 12px 0;
    padding: 18px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: var(--snow);
}

.form-privacy-notice h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-dark);
}

.form-privacy-notice p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--text-mid);
}

.form-privacy-notice p:last-child {
    margin-bottom: 0;
}

.form-privacy-notice a {
    color: var(--dusty-pink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-privacy-notice a:focus-visible {
    outline: 2px solid var(--dusty-pink);
    outline-offset: 2px;
}

.form-consent {
    margin-top: 16px;
    margin-bottom: 4px;
    text-align: center;
}

.form-consent__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
}

.form-consent__label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background-color: var(--white);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-consent__label input[type="checkbox"]:checked {
    background-color: var(--deep-navy);
    border: 1.5px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
}

.form-consent__label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--deep-navy);
    outline-offset: 2px;
}

.gradation {
    background-image: linear-gradient(165deg, #f4cbd1 0%, #d57c88 100%);
}

.form-submit.gradation {
    background-color: transparent;
    background-image: linear-gradient(165deg, #f4cbd1 0%, #d57c88 100%);
    color: var(--white);
    animation: none;
}

.form-submit.gradation:hover:not(:disabled) {
    filter: brightness(0.96);
    background: transparent;
    background-image: linear-gradient(165deg, #f4cbd1 0%, #d57c88 100%);
}

.form-submit.gradation:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    animation: none;
}

.form-submit.gradation:disabled:hover {
    background-color: transparent;
    background-image: linear-gradient(165deg, #f4cbd1 0%, #d57c88 100%);
    filter: none;
}

/* ----- Contact Form 7（.form-card 内）: contact-table / privacypolicy 等 ----- */
.form-card .wpcf7 {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

/* CF7: フォーム先頭の要約（スクリーンリーダー用）を視覚的に隠す。各フィールド下の .wpcf7-not-valid-tip はそのまま */
.form-card .wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.form-card .wpcf7-form p {
    margin: 0 0 0;
    padding: 0;
}

.form-card .wpcf7 table.contact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

.form-card .wpcf7 .contact-tr th,
.form-card .wpcf7 .contact-tr th label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: left;
    padding: 10px 8px 10px 0;
    vertical-align: top;
    background: none;
    display: table-cell;
    width: 34%;
    box-sizing: border-box;
}

.form-card .wpcf7 .contact-tr th .require {
    display: inline;
    background: var(--dusty-pink);
    color: var(--white);
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    font-weight: 700;
}

.form-card .wpcf7 .contact-td {
    padding: 10px 0 10px 4px;
    vertical-align: top;
}

.form-card .wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.form-card .wpcf7 input[type="text"],
.form-card .wpcf7 input[type="email"],
.form-card .wpcf7 input[type="tel"],
.form-card .wpcf7 input[type="url"],
.form-card .wpcf7 input[type="number"],
.form-card .wpcf7 select,
.form-card .wpcf7 textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.3s;
    outline: none;
    background: var(--white);
}

.form-card .wpcf7 input:focus,
.form-card .wpcf7 textarea:focus,
.form-card .wpcf7 select:focus {
    border-color: var(--dusty-pink);
}

.form-card .wpcf7 textarea {
    min-height: 100px;
    resize: vertical;
}

.form-card .wpcf7 .privacypolicy {
    margin: 12px 0 0;
    padding: 18px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: var(--snow);
}

.form-card .wpcf7 .privacypolicy .title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-dark);
}

.form-card .wpcf7 .privacypolicy .content {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--text-mid);
}

.form-card .wpcf7 .privacypolicy .content a {
    color: var(--dusty-pink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-card .wpcf7 .wpcf7-acceptance,
.form-card .wpcf7 .wpcf7-acceptance * {
    box-sizing: border-box;
}

.form-card .wpcf7 .wpcf7-acceptance {
    margin: 16px 0 8px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* 同意: 元 .form-consent__label と同じ（wpcf7-acceptance / #consent）。課題チェックのピンク指定は当てない */
.form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    display: block;
    margin: 0;
    text-align: center;
}

.form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.5;
}

.form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label {
    flex: 0 1 auto;
}

.form-card .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background-color: var(--white);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-card .wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked {
    background-color: var(--deep-navy);
    border: 1.5px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
}

.form-card .wpcf7 .wpcf7-acceptance input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--deep-navy);
    outline-offset: 2px;
}

.form-card .wpcf7 .wpcf7-submit,
.form-card .wpcf7 input.wpcf7-submit,
.form-card .wpcf7 input[type="submit"] {
    width: 100%;
    background: transparent;
    background-image: linear-gradient(165deg, #f4cbd1 0%, #d57c88 100%) !important;
    color: var(--white) !important;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 18px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    transition: filter 0.3s;
    margin-top: 10px;
    font-family: inherit;
    animation: none;
}

.form-card .wpcf7 .wpcf7-submit:hover:not(:disabled),
.form-card .wpcf7 input.wpcf7-submit:hover:not(:disabled) {
    filter: brightness(0.96);
}

.form-card .wpcf7 .wpcf7-submit:disabled,
.form-card .wpcf7 input.wpcf7-submit:disabled,
.form-card .wpcf7 input[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
}

/* CF7 チェックボックス: 元 .form-checkbox-item / .form-checkboxes に合わせる */
.form-card .wpcf7 .form-checkboxes .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 課題チェック用 list-item だけ汎用指定（同意の wpcf7-acceptance 内は上で別指定） */
.form-card .wpcf7 .wpcf7-checkbox .wpcf7-form-control-wrap .wpcf7-list-item,
.form-card .wpcf7 .wpcf7-checkbox>.wpcf7-list-item,
.form-card .wpcf7 .wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
    display: block;
}

.form-card .wpcf7 .wpcf7-checkbox .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.5;
}

.form-card .wpcf7 .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label {
    flex: 1;
    min-width: 0;
}

.form-card .wpcf7 .wpcf7-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background-color: var(--white);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    accent-color: var(--dusty-pink);
}

.form-card .wpcf7 .wpcf7-checkbox input[type="checkbox"]:checked {
    background-color: var(--dusty-pink);
    border: 1.5px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
}

.form-card .wpcf7 .wpcf7-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--dusty-pink);
    outline-offset: 2px;
}

.form-card .wpcf7 span.wpcf7-not-valid-tip {
    color: #c00;
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    display: block;
    position: static;
}

.form-card .wpcf7 .wpcf7-not-valid,
.form-card .wpcf7 .wpcf7-not-valid:focus {
    border-color: #c00 !important;
}

.form-card .wpcf7 .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    clear: both;
}

.form-card .wpcf7 form.sent .wpcf7-response-output,
.form-card .wpcf7 .wpcf7-mail-sent-ok {
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.form-card .wpcf7 .wpcf7-spinner {
    margin: 0 auto 8px;
}

/* ===== FAQ ===== */
.faq-section {
    background: var(--snow);
}

.faq-list {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.faq-item.active {
    border-color: var(--dusty-pink-light);
}

.faq-question {
    padding: 20px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    transition: background 0.3s;
}

.faq-question:hover {
    background: var(--dusty-pink-pale);
}

.faq-question .q-label {
    color: var(--dusty-pink);
    font-weight: 800;
    margin-right: 10px;
    flex: 0 0 auto;
}

.faq-toggle {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--snow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--text-light);
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
    padding: 0 24px 20px;
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.9;
    display: flex;
    gap: 10px;
}

.faq-answer-inner .a-label {
    color: var(--deep-navy);
    font-weight: 800;
    flex: 0 0 auto;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--deep-navy);
    color: var(--white);
    padding: 50px 20px 30px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-left {}

.footer-trami-logo {
    display: inline-block;
    margin-bottom: 12px;
    line-height: 0;
}

.footer-trami-logo-img {
    width: clamp(120px, 16vw, 150px);
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-company {
    font-size: 0.8rem;
    line-height: 2;
    opacity: 0.8;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-privacy-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
}

.footer-privacy-mark-text {
    opacity: 0.7;
}

.footer-privacy-mark .mark-icon {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 0;
    background: var(--white);
}

.footer-privacy-mark .mark-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    max-width: 1000px;
    margin: 30px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.7rem;
    opacity: 0.5;
}

/* ===== SCROLL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s, transform 0.7s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 769px) {
    .header-phone {
        display: flex;
    }

    .sp-sticky-cta {
        display: none !important;
    }

    body.has-floating-cta {
        padding-bottom: calc(var(--floating-cta-h) + env(safe-area-inset-bottom, 0px));
    }
}

/* フロー6ブロック: 中幅PC（1025〜1550px）で総幅が窓に収まるようセル幅を流体化 */
@media (max-width: 1550px) and (min-width: 1025px) {
    .flow-section .section-inner {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    .flow-placeholders {
        --flow-placeholder-tip: 24px;
        --flow-cell-width: clamp(180px,
                calc((100vw - 72px + 4 * var(--flow-placeholder-tip)) / 6),
                252px);
        --flow-cell-min: 0;
        --flow-cell-pad: 13px;
        --flow-cell-y-gap: 11px;
        --flow-head-gap: 12px;
        --flow-step-label-fs: 0.57rem;
        --flow-step-num-fs: 1.1rem;
        --flow-mini-text-fs: 0.84rem;
        --flow-badge-fs: 0.62rem;
        --flow-badge-py: 5px;
        --flow-badge-px: 12px;
        margin-bottom: 24px;
        min-height: 188px;
    }

    .flow-placeholders__step {
        padding-right: 7px;
    }

    .flow-placeholders__mini {
        gap: 9px;
        padding: 4px 0;
    }
}

@media (max-width: 1024px) {
    .flow-section .section-inner {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    .flow-placeholders {
        --flow-placeholder-tip: 22px;
        /* 769〜1024px: セクション横パディングを踏まえ、6列＋オーバーラップが収まるよう流体幅 */
        --flow-cell-width: clamp(120px,
                calc((100vw - 80px + 4 * var(--flow-placeholder-tip)) / 6),
                210px);
        --flow-cell-min: 0;
        --flow-cell-pad: 12px;
        --flow-cell-y-gap: 10px;
        --flow-head-gap: 3px;
        --flow-step-label-fs: 0.4rem;
        --flow-step-num-fs: 0.8rem;
        --flow-mini-text-fs: 0.55rem;
        --flow-badge-fs: 0.45rem;
        --flow-badge-py: 4px;
        --flow-badge-px: 10px;
        margin-bottom: 22px;
        min-height: 176px;
    }

    .flow-placeholders__step {
        padding-right: 6px;
    }

    .flow-placeholders__mini {
        gap: 8px;
        padding: 4px 0;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    #form {
        scroll-margin-top: 64px;
    }

    .header-cta-btn {
        font-size: 0.75rem;
        padding: 8px 16px;
    }

    .header-inner {
        padding: 6px 14px;
        gap: 10px;
    }

    .header-brand {
        gap: 6px;
    }

    h1.logo .logo-img {
        height: 24px;
        max-width: min(55px, 42vw);
    }

    .header-trami-logo {
        display: none !important;
    }

    .logo-tosho img {
        height: 26px;
        max-width: 100px;
        padding-right: 0;
    }

    .sp-sticky-cta {
        display: block;
    }

    body {
        padding-bottom: 60px;
    }

    /* SPは電話の追従バーのみ。フローティングCTA（フォーム誘導）は非表示 */
    .floating-cta-bar {
        display: none !important;
    }

    body.has-floating-cta {
        padding-bottom: 70px;
    }

    /* 【画像配置バージョン】SP：画像は出さずリストのみ（横並び解除） */
    .problems-list.problems-list--img-right {
        flex-wrap: wrap;
    }

    .problems-list.problems-list--img-right .problems-list-image--left,
    .problems-list.problems-list--img-right .problems-list-image--right {
        display: none;
    }

    .problems-list.problems-list--img-right .problems-list-main {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* problems：下辺V字の深さ（SPはやや浅め）＋セーフエリア */
    .problems-section {
        --problems-notch: clamp(36px, 11vw, 64px);
        padding-bottom: calc(var(--problems-notch) + clamp(48px, 12vw, 88px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .problems-section .section-inner {
        min-height: 650px;
    }

    .hero {
        padding: 0;
        margin-top: 50px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        flex: 0 1 auto;
        min-height: 0;
        max-width: 100%;
        grid-template-columns: unset;
        grid-template-rows: unset;
    }

    .logos-section#logos {
        position: static;
        margin-top: 0;
        z-index: auto;
        width: 100%;
        box-shadow: none;
        background: var(--snow);
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .logos-section#logos .section-title {
        margin-top: 40px;
    }

    .hero-image {
        grid-column: auto;
        grid-row: auto;
        position: static;
        width: 100%;
        max-width: 100%;
        justify-self: auto;
        height: auto;
    }

    .hero-image-placeholder {
        min-height: 0;
        height: auto;
        aspect-ratio: 4/3;
        max-height: 280px;
        margin: 0;
        border-radius: 0;
    }

    .hero-image-placeholder img {
        border-radius: 0;
    }

    .hero-image-placeholder::before {
        border-radius: 0;
    }

    .hero-image-placeholder::after {
        border-radius: 0;
    }

    .hero-text {
        position: relative;
        grid-column: auto;
        grid-row: auto;
        align-self: stretch;
        justify-self: stretch;
        margin: 0;
        max-width: 100%;
        padding: 20px 16px;
        text-align: center;
    }

    .hero-badge {
        font-size: 0.75rem;
    }

    h1.hero-main-copy {
        font-size: 1.2rem;
        text-align: center;
    }

    .hero-sub-copy {
        font-size: 0.85rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .hero-badges {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
        margin-bottom: 20px;
    }

    .hero-stat {
        min-width: 130px;
        padding: 8px 4px 10px;
    }

    .hero-stat-frame {
        max-width: 140px;
    }

    .hero-stat-content {
        top: 35%;
        max-width: 68%;
    }

    .hero-stat-num {
        font-size: 1.15rem;
    }

    .hero-stat-label {
        font-size: 0.5rem;
    }

    .hero-cta {
        display: block;
        text-align: center;
        font-size: 0.9rem;
        padding: 16px 24px;
    }

    .section {
        padding: 50px 16px;
    }

    .section-title h2 {
        font-size: 1.25rem;
    }

    .logo-track {
        animation-duration: 50s;
    }

    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reason-card {
        padding: 20px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .reason-card__content {
        padding: 12px 0 8px;
    }

    .reason-card__index {
        font-size: clamp(3rem, 22vw, 5.5rem);
    }

    .reason-card__visual {
        align-self: center;
        min-width: 0;
        width: 100%;
        max-width: 280px;
    }

    .reason-card__image {
        max-width: 100%;
        margin-inline: auto;
    }

    /* Cases: SP はスライド幅・余白のみ調整（レイアウトはベースと同じ上ステージ・下ナビ） */
    .casesSwiper {
        padding: 16px 8px 22px;
    }

    .casesSwiper .swiper-slide {
        width: min(260px, 88vw);
    }

    .cases-swiper-stage::before,
    .cases-swiper-stage::after {
        width: clamp(8px, 2.5vw, 14px);
    }

    .cases-swiper-stage::before {
        background: linear-gradient(to right,
                color-mix(in srgb, var(--dusty-pink-pale) 12%, transparent) 0%,
                transparent 68%);
    }

    .cases-swiper-stage::after {
        background: linear-gradient(to left,
                color-mix(in srgb, var(--dusty-pink-pale) 12%, transparent) 0%,
                transparent 68%);
    }

    .case-card {
        padding: 20px 16px;
    }

    .case-label {
        font-size: 0.52rem;
        margin-bottom: 8px;
    }

    .case-result {
        gap: 8px;
        margin: 0 0 14px;
        padding: 2px 10px 2px 10px;
    }

    .case-result__value {
        font-size: clamp(1.05rem, 3.2vw, 1.22rem);
    }

    .case-stage {
        padding: 10px 12px;
        margin-top: 10px;
        gap: 6px;
    }

    .case-stage--before .case-stage__label {
        font-size: 0.58rem;
    }

    .case-stage--before .case-stage__text {
        font-size: 0.72rem;
    }

    .case-stage--after .case-stage__label {
        font-size: 0.58rem;
    }

    .case-stage--after .case-stage__text {
        font-size: 0.74rem;
        padding-right: 14px;
    }

    .voice-card-inner {
        padding: 24px 20px;
    }

    .form-section {
        padding: 10px 16px;
    }

    .form-section::before {
        height: 310px;
    }

    .form-card {
        padding: 28px 20px;
        margin: 70px 0 40px 0;
    }

    .form-privacy-notice {
        padding: 14px 12px;
    }

    .form-privacy-notice h3 {
        font-size: 0.88rem;
    }

    .form-privacy-notice p {
        font-size: 0.75rem;
    }

    .form-heading h2 {
        font-size: 1.3rem;
    }

    .form-phone-block a {
        font-size: 1.6rem;
    }

    .form-card .wpcf7 table.contact-table .contact-tr {
        display: block;
        margin-bottom: 14px;
    }

    .form-card .wpcf7 table.contact-table .contact-tr th,
    .form-card .wpcf7 table.contact-table .contact-tr td.contact-td {
        display: block;
        width: 100%;
        padding: 6px 0;
        box-sizing: border-box;
    }

    .flow-steps::before {
        left: 20px;
    }

    .flow-dot {
        flex: 0 0 42px;
        height: 42px;
        font-size: 0.6rem;
    }

    .flow-placeholders {
        --flow-placeholder-tip: 16px;
        --flow-cell-width: clamp(56px,
                calc((100vw - 40px + 4 * var(--flow-placeholder-tip)) / 6),
                140px);
        --flow-cell-min: 73px;
        --flow-cell-pad: 7px;
        --flow-cell-y-gap: 6px;
        --flow-head-gap: 5px;
        --flow-step-label-fs: 0.48rem;
        --flow-step-num-fs: 0.82rem;
        --flow-mini-text-fs: 0.62rem;
        --flow-badge-fs: 0.48rem;
        --flow-badge-py: 3px;
        --flow-badge-px: 6px;
        margin-bottom: 16px;
        min-height: 148px;
        padding-left: 0;
    }

    .logo-track-wrapper::before,
    .logo-track-wrapper::after {
        background: none;
    }

    .flow-placeholders__cell {
        min-width: 73px;
    }

    .flow-placeholders__head {
        flex-direction: column;
        justify-content: center;
    }

    .flow-placeholders__step {
        border-right: none;
        padding-right: 0;
    }

    .flow-placeholders__badge {
        max-width: 100%;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }

    .flow-placeholders__mini-text {
        text-align: center;
        padding: 0 4px;
        font-size: 0.6rem;
    }

    .flow-placeholders__step-num {
        text-align: center;
    }

    .flow-placeholders__cell:nth-child(4) .flow-placeholders__mini {
        padding-top: 22px;
    }

    .br-sp-only {
        display: inline;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-right {
        align-items: flex-start;
    }
}