/*
 * LP2 visual refinement
 * Existing copy and section order are intentionally preserved.
 */

:root {
    --tm-navy: #082b55;
    --tm-blue: #0868e8;
    --tm-blue-dark: #0755bf;
    --tm-cyan: #17bde8;
    --tm-sky: #eaf5ff;
    --tm-pale: #f7fbff;
    --tm-line: #d9e9f8;
    --tm-ink: #102a43;
    --tm-muted: #52677d;
    --tm-yellow: #ffd43b;
    --tm-shadow: 0 18px 55px rgba(8, 43, 85, .10);
    --tm-shadow-small: 0 8px 28px rgba(8, 43, 85, .08);
    --tm-radius: 24px;
}

html {
    scroll-padding-top: 92px;
}

body {
    color: var(--tm-ink);
    background: #fff;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

body::after {
    content: '';
    display: block;
    height: 0;
}

.container {
    width: min(100% - 48px, 1180px) !important;
    max-width: 1180px !important;
    padding: 0 !important;
}

/* Header */
.header {
    height: 82px;
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(8, 104, 232, .10) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(150%);
}

.header.scrolled {
    box-shadow: 0 8px 30px rgba(8, 43, 85, .08) !important;
}

.header-content {
    min-height: 82px !important;
    padding: 0 !important;
}

.logo {
    gap: 10px;
}

.header .logo-shark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.75rem;
    background: var(--tm-sky);
    border: 1px solid #cfe6fb;
    border-radius: 50%;
}

.header .logo-text {
    font-size: 1.34rem !important;
    letter-spacing: -.035em;
    -webkit-text-fill-color: var(--tm-navy) !important;
    color: var(--tm-navy) !important;
    background: none !important;
}

.nav {
    gap: 2px !important;
}

.nav-link {
    padding: 10px 11px !important;
    font-size: .88rem !important;
    color: var(--tm-ink) !important;
}

.nav-link.cta-button {
    min-height: 46px;
    margin-left: 10px !important;
    padding: 11px 20px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tm-blue), var(--tm-cyan)) !important;
    border-radius: 999px !important;
    box-shadow: 0 9px 22px rgba(8, 104, 232, .24) !important;
}

/* Hero: white editorial layout inspired by the reference LP */
.hero {
    min-height: 810px !important;
    padding: 142px 0 72px !important;
    background: linear-gradient(115deg, #fff 0 56%, #f1f8ff 56% 100%) !important;
    color: var(--tm-ink);
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 94px;
    background: linear-gradient(176deg, transparent 48%, #eaf5ff 49%);
    z-index: 1;
    pointer-events: none;
}

.hero-bg,
.ocean-wave,
.wave-divider,
.scroll-indicator {
    display: none !important;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero-content {
    display: block !important;
    min-height: 570px !important;
    padding: 0 !important;
}

.hero-main {
    width: min(67%, 720px);
    max-width: 720px !important;
    text-align: left !important;
}

.hero-title {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 36px !important;
    padding: 29px 38px 33px;
    color: var(--tm-navy);
    background: #fff;
    border: 1px solid rgba(8, 104, 232, .10);
    border-radius: 34px;
    box-shadow: var(--tm-shadow);
    isolation: isolate;
}

.hero-title::after {
    content: '';
    position: absolute;
    left: 76px;
    bottom: -17px;
    width: 34px;
    height: 34px;
    background: #fff;
    border-right: 1px solid rgba(8, 104, 232, .08);
    border-bottom: 1px solid rgba(8, 104, 232, .08);
    transform: rotate(45deg);
    z-index: -1;
}

.title-main {
    display: inline !important;
    color: var(--tm-navy) !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-size: clamp(3rem, 4.35vw, 4.2rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.065em !important;
    text-shadow: none !important;
    animation: none !important;
}

.title-main:first-child::after {
    content: ' ';
}

.title-main:last-of-type {
    color: var(--tm-blue) !important;
}

.title-underline {
    display: none !important;
}

.hero-description {
    max-width: 660px;
    margin: 0 0 32px !important;
    color: var(--tm-muted) !important;
    font-size: 1.06rem !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    letter-spacing: .015em !important;
    text-shadow: none !important;
}

.hero-description strong {
    display: block;
    width: fit-content;
    margin: 0 0 9px !important;
    color: var(--tm-navy) !important;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
    line-height: 1.4;
    text-shadow: none !important;
    background: linear-gradient(transparent 70%, rgba(255, 212, 59, .78) 70%);
}

.hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 190px));
    justify-content: start !important;
    gap: 14px !important;
    margin: 0 0 28px !important;
}

.stat-item {
    min-height: 104px;
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    padding: 17px 22px;
    text-align: left !important;
    background: linear-gradient(145deg, var(--tm-blue-dark), var(--tm-blue));
    border-radius: 16px;
    box-shadow: 0 12px 25px rgba(8, 104, 232, .18);
}

.stat-number {
    margin: 0 0 5px !important;
    color: #fff !important;
    font-size: 2.65rem !important;
    letter-spacing: -.04em !important;
    text-shadow: none !important;
}

.stat-label {
    color: rgba(255, 255, 255, .92) !important;
    font-size: .78rem !important;
    letter-spacing: .08em !important;
}

.hero-buttons {
    max-width: 690px;
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 10px !important;
    justify-content: start !important;
    margin: 0 !important;
}

.hero .button,
.other-services-cta .button,
.risk-more-cta .button {
    min-height: 58px;
    padding: 15px 20px !important;
    border-radius: 999px !important;
    font-size: .94rem !important;
    white-space: nowrap;
}

.hero .button-shark,
.other-services-cta .button-shark,
.risk-more-cta .button-shark {
    display: none;
}

.hero .button-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--tm-blue), var(--tm-cyan)) !important;
    box-shadow: 0 12px 26px rgba(8, 104, 232, .24) !important;
}

.hero .button-secondary {
    color: var(--tm-blue) !important;
    background: #fff !important;
    border: 1.5px solid #b8d9f7 !important;
    box-shadow: none !important;
}

.hero .button:hover,
.other-services-cta .button:hover,
.risk-more-cta .button:hover {
    transform: translateY(-3px) !important;
}

.hero-sharks {
    display: block !important;
    inset: 108px 0 auto auto !important;
    width: 43% !important;
    height: 620px !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2 !important;
    pointer-events: none;
}

.hero-sharks::before {
    content: '成果を追い続ける';
    position: absolute;
    top: 86px;
    right: 34px;
    padding: 11px 19px;
    color: var(--tm-blue-dark);
    background: #fff;
    border: 1px solid #cfe7fb;
    border-radius: 999px;
    box-shadow: var(--tm-shadow-small);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.floating-shark {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
}

.floating-shark.shark-1 {
    top: 184px !important;
    left: 50% !important;
    right: auto !important;
    width: 270px;
    height: 270px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--tm-navy), var(--tm-blue));
    border: 12px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    box-shadow: 0 25px 60px rgba(8, 43, 85, .25);
    font-size: 9rem !important;
    transform: translateX(-50%) !important;
}

.floating-shark.shark-2,
.floating-shark.shark-3 {
    display: none !important;
}

/* Persistent conversion path */
.lp-fixed-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    width: 280px;
    overflow: hidden;
    color: #fff;
    background: var(--tm-navy);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(8, 43, 85, .25);
}

.lp-fixed-cta__eyebrow {
    display: block;
    padding: 10px 16px 8px;
    text-align: center;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.lp-fixed-cta__actions {
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 1px;
    background: rgba(255, 255, 255, .16);
}

.lp-fixed-cta a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 11px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.lp-fixed-cta__primary {
    color: #fff;
    background: var(--tm-blue);
}

.lp-fixed-cta__secondary {
    color: var(--tm-navy);
    background: #fff;
}

/* Shared section rhythm */
body section:not(.hero):not(.blog-post-section):not(.apls-expansion) {
    padding: clamp(52px, 6vw, 80px) 0 !important;
}

body section > .container {
    position: relative;
    z-index: 2;
}

/* 水玉・サメ装飾の類いはB2Bトーンに合わないため全て非表示 */
.section-bg-shark,
.section-decorative-sharks,
.deco-shark,
.strength-shark-bg,
.card-corner-shark,
.badge-shark,
.contact-intro-shark,
.contact-method-shark,
.button-shark {
    display: none !important;
}

.section-title {
    display: block !important;
    max-width: 900px;
    margin: 0 auto 16px !important;
    color: var(--tm-navy) !important;
    text-align: center !important;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: -.025em !important;
}

.section-title::after {
    content: '';
    display: block;
    width: 66px;
    height: 5px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--tm-blue), var(--tm-cyan));
    border-radius: 999px;
}

.section-title.white {
    color: #fff !important;
}

.section-title.white::after {
    background: var(--tm-yellow);
}

.section-icon {
    display: none !important;
}

.section-description {
    max-width: 760px !important;
    margin: 0 auto 36px !important;
    color: var(--tm-muted) !important;
    text-align: center !important;
    font-size: 1.04rem !important;
    line-height: 1.9 !important;
}

#service,
#strengths,
#methods,
#risk-absorption,
.target-customers,
#flow,
#company {
    background: var(--tm-pale) !important;
}

#core-value,
#results,
#human-value,
#revenue-lever,
#why-not-working,
.other-services,
#pricing {
    background: #fff !important;
}

/* Service steps */
.service-flow {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px !important;
    margin: 36px 0 0 !important;
}

.service-flow-item {
    min-width: 0;
    display: block !important;
    padding: 28px 20px 24px !important;
    background: #fff !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--tm-shadow-small) !important;
}

.service-flow-item.highlight {
    color: inherit !important;
    background: linear-gradient(180deg, #eef7ff, #fff) !important;
    border: 2px solid var(--tm-blue) !important;
}

.service-flow-number {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    display: grid !important;
    place-items: center;
    margin: 0 0 22px !important;
    color: #fff !important;
    background: var(--tm-blue) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    box-shadow: 0 7px 18px rgba(8, 104, 232, .20);
}

.service-flow-item:hover .service-flow-number {
    opacity: 1 !important;
}

.service-flow-title {
    min-height: 3.1em;
    margin-bottom: 11px !important;
    color: var(--tm-navy) !important;
    font-size: 1.05rem !important;
}

.service-flow-description {
    color: var(--tm-muted) !important;
    font-size: .9rem !important;
    line-height: 1.78 !important;
}

/* Value, strength and results cards */
.cv {
    max-width: 1040px !important;
}

.cv-problem,
.cv-invest,
.strength-item,
.result-card,
.method-card,
.ai-human-card,
.risk-step,
.risk-compare-card,
.other-service-card,
.flow-step,
.company-concept,
.contact-form-wrapper {
    border-color: var(--tm-line) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-small) !important;
}

.cv-problem,
.cv-invest {
    padding: 28px !important;
}

.cv-invest {
    background: #f5faff !important;
    border-left: 5px solid var(--tm-blue) !important;
}

.cv-chips span {
    color: var(--tm-blue-dark) !important;
    background: var(--tm-sky) !important;
    border-color: #c9e5fb !important;
}

.strengths-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
    max-width: 1040px !important;
    margin-top: 36px !important;
}

.strength-item {
    min-width: 0;
    display: grid !important;
    grid-template-columns: 66px 1fr;
    gap: 22px !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid var(--tm-line) !important;
}

.strength-item:hover {
    transform: translateY(-5px) !important;
}

.strength-number {
    width: 62px;
    height: 62px;
    display: grid !important;
    place-items: center;
    color: var(--tm-blue) !important;
    background: var(--tm-sky) !important;
    border-radius: 18px;
    font-size: 1.65rem !important;
    -webkit-text-fill-color: var(--tm-blue) !important;
}

.strength-shark {
    display: none;
}

.strength-title {
    margin-bottom: 10px !important;
    color: var(--tm-navy) !important;
}

.results-grid {
    gap: 18px !important;
    margin-top: 36px !important;
}

.result-card {
    padding: 34px 30px 30px !important;
    border: 1px solid var(--tm-line) !important;
}

.result-card:hover,
.method-card:hover,
.ai-human-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--tm-shadow) !important;
}

.result-card::before {
    height: 5px !important;
    background: linear-gradient(90deg, var(--tm-blue), var(--tm-cyan)) !important;
}

.result-percentage {
    font-size: 4.5rem !important;
}

.result-badge,
.method-card-badge {
    background: var(--tm-navy) !important;
    box-shadow: none !important;
}

.results-cta-button,
.method-card-link,
.ai-human-link,
.risk-more-link {
    min-height: 52px;
    padding: 14px 25px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tm-blue), var(--tm-cyan)) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(8, 104, 232, .20) !important;
}

/* Content-rich cards */
.methods-grid,
.ai-human-grid {
    gap: 18px !important;
}

.method-card,
.ai-human-card {
    border: 1px solid var(--tm-line) !important;
}

.method-card {
    padding: 30px !important;
}

.ai-human-card--cta {
    color: #fff;
    background: linear-gradient(145deg, var(--tm-navy), var(--tm-blue)) !important;
}

.risk-lead-card,
.risk-value-box,
.risk-more-cta,
.flow-footer-note,
.customer-note-box {
    border-color: var(--tm-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--tm-shadow-small) !important;
}

.risk-more-cta {
    padding: 30px !important;
    background: var(--tm-sky) !important;
}

.risk-more-cta .button,
.other-services-cta .button {
    color: #fff !important;
    background: linear-gradient(135deg, var(--tm-blue), var(--tm-cyan)) !important;
    box-shadow: 0 12px 26px rgba(8, 104, 232, .22) !important;
}

/* Fit and related services */
.customer-types-wrapper {
    gap: 20px !important;
}

.customer-type-card {
    overflow: hidden;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-small) !important;
}

.customer-type-badge.success {
    background: var(--tm-blue) !important;
}

.other-services-grid {
    gap: 18px !important;
}

.other-service-card {
    padding: 32px !important;
    background: #fff !important;
    border: 1px solid var(--tm-line) !important;
}

.other-services-cta {
    margin-top: 34px !important;
    padding: 42px !important;
    color: #fff;
    background:
        radial-gradient(circle at 92% 18%, rgba(23, 189, 232, .32), transparent 24%),
        linear-gradient(145deg, var(--tm-navy), var(--tm-blue)) !important;
    border-radius: 28px !important;
    box-shadow: var(--tm-shadow) !important;
}

.other-services-cta h3,
.other-services-cta p {
    color: #fff !important;
}

/* Flow */
.flow-steps {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px !important;
    max-width: none !important;
    margin-top: 36px !important;
}

.flow-step {
    display: block !important;
    padding: 28px 20px !important;
    background: #fff !important;
    border: 1px solid var(--tm-line) !important;
}

.flow-step.highlight {
    background: linear-gradient(180deg, #eaf5ff, #fff) !important;
    border: 2px solid var(--tm-blue) !important;
}

.flow-step-number {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: grid !important;
    place-items: center;
    margin: 0 0 20px !important;
    color: #fff !important;
    background: var(--tm-blue) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    box-shadow: 0 7px 18px rgba(8, 104, 232, .20);
}

.flow-step:hover .flow-step-number {
    opacity: 1 !important;
}

.flow-step-title {
    margin-bottom: 9px !important;
    color: var(--tm-navy) !important;
}

.flow-step-note {
    margin-top: 9px !important;
    font-size: .75rem !important;
}

.flow-footer-note {
    max-width: 920px !important;
    margin-top: 24px !important;
    padding: 18px 22px !important;
    background: #fff !important;
}

/* Company */
.company-content {
    max-width: 980px !important;
    gap: 26px !important;
}

.company-concept,
.company-table {
    background: #fff !important;
}

.company-concept {
    border: 1px solid var(--tm-line) !important;
}

.company-table {
    overflow: hidden;
    border: 1px solid var(--tm-line);
    border-radius: 20px;
    box-shadow: var(--tm-shadow-small);
}

.company-table th {
    color: var(--tm-navy) !important;
    background: var(--tm-sky) !important;
}

/* Contact */
.contact {
    padding-bottom: 84px !important;
    background:
        radial-gradient(circle at 15% 20%, rgba(23, 189, 232, .22), transparent 25%),
        linear-gradient(145deg, #061f3e, #0758c5 60%, #0797d3) !important;
}

.contact-intro {
    margin-bottom: 14px !important;
}

.contact-intro p {
    color: var(--tm-yellow) !important;
    font-size: 1.35rem !important;
}

.contact-description {
    max-width: 680px;
    margin-right: auto !important;
    margin-left: auto !important;
    color: rgba(255, 255, 255, .88) !important;
}

.contact-methods {
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.contact-method {
    border: 1px solid rgba(255, 255, 255, .65) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.contact-form-wrapper {
    max-width: 820px !important;
    margin-top: 42px !important;
    padding: 42px !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
}

/* Long-form content retained, visually aligned to the blue brand */
.apls-expansion {
    max-width: 1080px !important;
    margin: clamp(62px, 8vw, 100px) auto !important;
    padding: clamp(26px, 5vw, 54px) !important;
    color: var(--tm-ink) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: 28px !important;
    box-shadow: var(--tm-shadow-small) !important;
}

.apls-expansion h2 {
    padding: 15px 20px !important;
    color: var(--tm-navy) !important;
    background: var(--tm-sky) !important;
    border-left-color: var(--tm-blue) !important;
    border-radius: 0 12px 12px 0 !important;
}

.apls-expansion h3,
.apls-expansion strong,
.apls-expansion .card b,
.apls-expansion .term b,
.apls-expansion a {
    color: var(--tm-blue-dark) !important;
}

.apls-expansion .lead {
    background: var(--tm-pale) !important;
    border-left-color: var(--tm-blue) !important;
}

.apls-expansion th {
    background: var(--tm-navy) !important;
}

.apls-expansion tr:nth-child(even) td {
    background: var(--tm-pale) !important;
}

.apls-expansion .case,
.apls-expansion .faq {
    border-left-color: var(--tm-blue) !important;
}

.apls-expansion .cta {
    background: linear-gradient(145deg, var(--tm-navy), var(--tm-blue)) !important;
    border-radius: 20px !important;
}

.apls-expansion .cta a {
    color: var(--tm-blue-dark) !important;
}

.apls-expansion li::before {
    background: var(--tm-blue) !important;
}

/* Footer */
.footer {
    padding-bottom: 100px !important;
    background: #061a32 !important;
}

.footer .logo-text {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}

@media (max-width: 1080px) {
    .nav-link {
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: .82rem !important;
    }

    .hero-sharks {
        width: 38% !important;
    }

    .floating-shark.shark-1 {
        width: 230px;
        height: 230px;
        font-size: 7.2rem !important;
    }

    .service-flow,
    .flow-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .header .nav {
        position: fixed !important;
        inset: 82px 0 auto !important;
        display: none !important;
        max-height: calc(100vh - 82px);
        padding: 18px 22px 26px !important;
        overflow-y: auto;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid var(--tm-line);
        box-shadow: var(--tm-shadow);
    }

    .header .nav.active {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px !important;
    }

    .nav-link {
        padding: 13px 14px !important;
        text-align: center;
        background: var(--tm-pale);
        border-radius: 10px;
    }

    .nav-link.cta-button {
        grid-column: 1 / -1;
        margin: 8px 0 0 !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    .hero-main {
        width: 64%;
    }

    .hero-title {
        padding-right: 28px;
        padding-left: 28px;
    }

    .title-main {
        font-size: clamp(2.75rem, 5.5vw, 3.5rem) !important;
    }

    .hero-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .hero-buttons .button:first-child {
        grid-column: 1 / -1;
    }

    .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body {
        padding-bottom: 72px;
    }

    body,
    .hero,
    .hero .container,
    .hero-content,
    .hero-main,
    .hero-title,
    .hero-description,
    .hero-stats,
    .hero-buttons {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .container {
        width: min(100% - 32px, 1180px) !important;
    }

    .header,
    .header-content {
        height: 70px !important;
        min-height: 70px !important;
    }

    .header .logo-shark {
        width: 36px;
        height: 36px;
        font-size: 1.45rem;
    }

    .header .logo-text {
        font-size: 1.05rem !important;
    }

    .header .nav {
        inset: 70px 0 auto !important;
        max-height: calc(100vh - 70px);
    }

    .hero {
        min-height: auto !important;
        padding: 108px 0 96px !important;
        background:
            radial-gradient(circle at 90% 18%, rgba(23, 189, 232, .14), transparent 28%),
            linear-gradient(180deg, #fff 0 72%, #f0f8ff 100%) !important;
    }

    .hero::before {
        height: 60px;
    }

    .hero-content {
        min-height: 0 !important;
    }

    .hero-main {
        width: 100%;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .hero-title {
        width: 100%;
        margin-bottom: 32px !important;
        padding: 25px 20px 29px;
        text-align: center;
        border-radius: 24px;
    }

    .hero-title::after {
        left: calc(50% - 14px);
        bottom: -14px;
        width: 28px;
        height: 28px;
    }

    .title-main {
        display: block !important;
        font-size: clamp(2.25rem, 11vw, 2.7rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -.07em !important;
    }

    .title-main:first-child::after {
        content: none;
    }

    .hero-description {
        margin-bottom: 24px !important;
        font-size: .96rem !important;
        line-height: 1.82 !important;
    }

    .hero-description strong {
        font-size: 1.28rem !important;
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .stat-item {
        min-height: 92px;
        padding: 14px 17px;
        border-radius: 14px;
    }

    .stat-number {
        font-size: 2.25rem !important;
    }

    .hero-buttons {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hero-buttons .button:first-child {
        grid-column: auto;
    }

    .hero .button {
        width: 100% !important;
        min-height: 56px;
    }

    .hero-sharks {
        display: none !important;
    }

    .lp-fixed-cta {
        inset: auto 0 0;
        width: 100%;
        display: grid;
        grid-template-columns: 104px 1fr;
        align-items: stretch;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .22);
        border-radius: 0;
        box-shadow: 0 -10px 30px rgba(8, 43, 85, .18);
    }

    .lp-fixed-cta__eyebrow {
        display: grid;
        place-items: center;
        padding: 8px;
        font-size: .66rem;
        line-height: 1.4;
    }

    .lp-fixed-cta__actions {
        grid-template-columns: 1.45fr .9fr;
    }

    .lp-fixed-cta a {
        min-height: 68px;
        padding: 9px 8px;
        font-size: .78rem;
    }

    body section:not(.hero):not(.blog-post-section):not(.apls-expansion) {
        padding: 52px 0 !important;
    }

    .section-title {
        font-size: clamp(1.65rem, 7.4vw, 2.2rem) !important;
    }

    .section-icon {
        width: 40px;
        height: 40px;
        font-size: 1.35rem !important;
    }

    .section-description {
        margin-bottom: 34px !important;
        font-size: .96rem !important;
        line-height: 1.82 !important;
    }

    .service-flow,
    .flow-steps,
    .strengths-content,
    .results-grid,
    .methods-grid,
    .ai-human-grid,
    .cv-problems,
    .cv-invest-grid,
    .risk-compare,
    .risk-steps,
    .customer-types-wrapper,
    .other-services-grid {
        grid-template-columns: 1fr !important;
    }

    .service-flow,
    .flow-steps,
    .strengths-content,
    .results-grid {
        margin-top: 36px !important;
    }

    .service-flow-item,
    .flow-step {
        display: grid !important;
        grid-template-columns: 52px 1fr;
        align-items: start;
        gap: 16px;
        padding: 22px 20px !important;
    }

    .service-flow-number,
    .flow-step-number {
        margin: 0 !important;
    }

    .service-flow-title {
        min-height: 0;
        margin-bottom: 7px !important;
    }

    .strength-item {
        grid-template-columns: 52px 1fr;
        gap: 16px !important;
        padding: 24px 20px !important;
    }

    .strength-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem !important;
        border-radius: 14px;
    }

    .result-card,
    .method-card,
    .ai-human-card,
    .other-service-card {
        padding: 26px 22px !important;
    }

    .result-percentage {
        font-size: 3.7rem !important;
    }

    .other-services-cta {
        padding: 30px 20px !important;
    }

    .other-services-cta .button,
    .risk-more-cta .button {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .risk-value-box,
    .risk-more-cta,
    .contact-form-wrapper {
        padding: 26px 20px !important;
    }

    .company-table {
        overflow-x: auto;
    }

    .company-table table {
        min-width: 560px;
    }

    .contact-form-wrapper {
        margin-top: 30px !important;
    }

    .apls-expansion {
        width: calc(100% - 32px);
        margin: 56px 16px !important;
        padding: 26px 18px !important;
        border-radius: 20px !important;
    }

    .apls-expansion h2 {
        padding: 12px 14px !important;
    }

    .footer {
        padding-bottom: 92px !important;
    }
}

@media (max-width: 380px) {
    .header .logo-text {
        font-size: .97rem !important;
    }

    .title-main {
        font-size: 2.3rem !important;
    }

    .lp-fixed-cta {
        grid-template-columns: 86px 1fr;
    }

    .lp-fixed-cta a {
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-main,
    .logo-shark,
    .deco-shark,
    .strength-shark {
        animation: none !important;
    }
}

/* ==========================================================
 * LP3 compaction & alignment pass
 * - 各セクションの縦幅を圧縮（1画面に主要コンテンツが収まる密度へ）
 * - テキスト揃えの統一（見出し/説明=中央、カード本文=左）
 * ========================================================== */

/* インラインstyleで定義されたグリッド余白の圧縮 */
.methods-grid,
.recommended-grid {
    margin-top: 32px !important;
}

.methods-cta,
.results-cta,
.recommended-footer {
    margin-top: 32px !important;
}

.methods-cta p,
.recommended-footer p {
    margin-bottom: 14px !important;
}

/* 本質的な価値セクションの余白圧縮 */
.cv {
    margin-top: 28px !important;
}

.cv-lead {
    margin-bottom: 30px !important;
}

.cv-problems,
.cv-invest-grid {
    margin-bottom: 34px !important;
}

.cv-subhead {
    margin-bottom: 22px !important;
}

/* 離脱リスクセクションの余白圧縮 */
.risk-lead-card {
    margin-bottom: 24px !important;
}

.risk-compare {
    margin-bottom: 28px !important;
}

.risk-steps {
    margin: 12px auto 28px !important;
}

.risk-subtitle {
    max-width: 520px;
    margin: 0 auto 20px !important;
    padding-bottom: 12px !important;
    color: var(--tm-navy) !important;
    border-bottom: 2px solid var(--tm-line) !important;
}

/* 向いているお客様：二重パディングと過剰な余白を解消 */
.customer-types-wrapper {
    margin-top: 36px !important;
}

.customer-type-card {
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--tm-line) !important;
}

.customer-type-card.challenging {
    border: 1px solid #f3d8c4 !important;
}

.customer-type-badge {
    padding: 16px 26px !important;
    font-size: 1.02rem !important;
}

.customer-type-content {
    padding: 24px 26px 26px !important;
}

.customer-type-title {
    margin-bottom: 16px !important;
    font-size: 1.15rem !important;
    color: var(--tm-navy) !important;
}

.customer-items {
    gap: 12px !important;
}

.customer-item {
    margin-bottom: 0 !important;
    padding: 16px 18px !important;
    border-radius: 12px !important;
    text-align: left !important;
}

.customer-item h4 {
    color: var(--tm-navy) !important;
}

.customer-note-box {
    margin-top: 16px !important;
    padding: 18px 20px !important;
}

/* その他サービス・料金まわりの余白圧縮 */
.other-services-cta {
    margin-top: 28px !important;
}

.risk-more-cta p {
    margin-bottom: 14px !important;
}

.flow-footer-note {
    margin-top: 20px !important;
}

/* ブログ一覧ボタンが白背景で見えなくなる問題の修正 */
.recommended-footer .button,
.recommended-footer .button-secondary {
    color: var(--tm-blue) !important;
    background: #fff !important;
    border: 1.5px solid #b8d9f7 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 14px 28px !important;
    font-size: .95rem !important;
    opacity: 1 !important;
}

/* テキスト揃えの統一：カード本文は常に左揃え */
.service-flow-item,
.flow-step,
.strength-item,
.method-card,
.ai-human-card,
.other-service-card,
.result-card,
.cv-problem,
.cv-invest,
.risk-compare-card,
.risk-lead-card,
.risk-value-box {
    text-align: left !important;
}

/* ステップ数字カード・チップ類は中央のまま統一 */
.risk-step {
    text-align: center !important;
}

@media (max-width: 768px) {
    .section-title,
    .section-description {
        text-align: center !important;
    }

    .customer-type-content {
        padding: 20px 18px 22px !important;
    }

    .contact-form-wrapper h3 {
        font-size: 1.15rem !important;
    }
}