/* デザインシステム: Zen Maru Gothic & パステルオーガニックカラー */
:root {
    --bg-cream: #FCFAF2; /* やさしいクリーム色の背景 */
    --bg-card: #FFFFFF;
    --primary-green: #64A86C; /* 親しみやすい若草色 */
    --primary-green-dark: #4A8552;
    --accent-orange: #F4A261; /* 温かいオレンジ */
    --accent-yellow: #FCEADE;
    --line-color: #06C755; /* LINEグリーン */
    --text-main: #333333;
    --text-sub: #666666;
    --border-soft: #EFE9DB;
    --radius-round: 24px;
    --radius-sm: 12px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
    font-family: 'Zen Maru Gothic', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-cream);
    /* 方眼紙風の薄いグリッド背景 */
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    line-height: 1.7;
}

/* 共通コンポーネント */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-tag {
    display: inline-block;
    background-color: #E8F3E8;
    color: var(--primary-green-dark);
    font-weight: 900;
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    letter-spacing: 1.5px;
    margin-bottom: 0.8rem;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.section-subtitle {
    color: var(--text-sub);
    font-size: 1.05rem;
    font-weight: 500;
}

/* ボタン */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background-color: var(--primary-green);
    color: #fff;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    box-shadow: 0 6px 15px rgba(100, 168, 108, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(100, 168, 108, 0.4);
}

.btn-line {
    background-color: var(--line-color);
    color: #fff;
    box-shadow: 0 6px 15px rgba(6, 199, 85, 0.3);
}

.btn-line:hover {
    background-color: #05b04b;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(6, 199, 85, 0.4);
}

.btn-secondary {
    background-color: #555;
    color: #fff;
    padding: 0.9rem 2rem;
}

.btn-secondary:hover {
    background-color: #333;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-lg {
    flex-direction: column;
    padding: 0.9rem 2.2rem;
    line-height: 1.3;
}

.btn-sub {
    font-size: 0.75rem;
    opacity: 0.9;
}

.btn-main {
    font-size: 1.2rem;
}

.btn-xl {
    padding: 1.2rem;
    font-size: 1.25rem;
}

.btn-sub-action {
    background-color: #fff;
    color: var(--text-main);
    border: 2px solid var(--border-soft);
    padding: 1rem 1.8rem;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.btn-sub-action:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
    transform: translateY(-2px);
}

/* 追従LINEボタン */
.floating-line {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition);
}

.float-badge {
    background-color: #FF5A5F;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    margin-bottom: -5px;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(255, 90, 95, 0.4);
}

.float-inner {
    background-color: var(--line-color);
    color: #fff;
    padding: 0.8rem 1.4rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 900;
    box-shadow: 0 8px 25px rgba(6, 199, 85, 0.4);
}

.floating-line:hover {
    transform: scale(1.08) translateY(-3px);
}

/* ヘッダー */
.header {
    background-color: rgba(252, 250, 242, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border-soft);
    position: relative;
    z-index: 900;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.8rem;
}

.logo-img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-green);
    background-color: #fff;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
}

.logo-sub {
    font-size: 0.68rem;
    color: #4A8552;
    font-weight: 800;
    letter-spacing: 0.5px;
    background-color: #E8F3E8;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 2px;
}

.logo-main {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary-green-dark);
}

.logo-ruby {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-sub);
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary-green);
}

.nav-line-btn {
    background-color: var(--line-color);
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(6, 199, 85, 0.25);
    transition: var(--transition);
}

.nav-line-btn:hover {
    background-color: #05b04b;
    transform: scale(1.05);
}

/* ヒーローセクション */
.hero {
    padding: 4rem 0 5rem 0;
}

.hero-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.hero-bubble {
    display: inline-block;
    background-color: #FFF3D6;
    color: #D97706;
    border: 2px solid #FCD34D;
    font-size: 0.95rem;
    font-weight: 900;
    padding: 0.4rem 1.2rem;
    border-radius: 30px;
    margin-bottom: 1.2rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.marker {
    background: linear-gradient(transparent 65%, #FFE29A 65%);
}

.highlight {
    color: var(--primary-green-dark);
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-sub);
    margin-bottom: 2.2rem;
}

.hero-cta-group {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hero-badges {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.badge-item {
    background-color: #fff;
    border: 1px solid var(--border-soft);
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
}

/* マスコットカード */
.mascot-card {
    background-color: #fff;
    border-radius: 36px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    border: 3px solid var(--border-soft);
    position: relative;
}

.mascot-img {
    width: 100%;
    max-width: 320px;
    border-radius: 24px;
    object-fit: contain;
    margin: 0 auto 0.6rem auto;
}

.mascot-tag {
    display: inline-block;
    background-color: var(--bg-cream);
    color: var(--primary-green-dark);
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
}

/* 📖 土地の本音図鑑（3Dフリップカード） */
.honne-section {
    background-color: #F7F3E8;
    border-top: 2px dashed #E2D9C3;
    border-bottom: 2px dashed #E2D9C3;
}

.flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.flip-card {
    perspective: 1000px;
    height: 380px;
    cursor: pointer;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-round);
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center; gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    border: 3px solid #fff;
    text-align: center;
}

.flip-back {
    transform: rotateY(180deg);
}

/* カードの色バリエーション */
.card-green { background-color: #E8F5E9; }
.card-green-back { background-color: #C8E6C9; border-color: #81C784; }

.card-orange { background-color: #FFF3E0; }
.card-orange-back { background-color: #FFE0B2; border-color: #FFB74D; }

.card-purple { background-color: #F3E5F5; }
.card-purple-back { background-color: #E1BEE7; border-color: #BA68C8; }

.card-yellow { background-color: #FFFDE7; }
.card-yellow-back { background-color: #FFF9C4; border-color: #FFF176; }

.card-badge {
    align-self: center;
    background-color: #fff;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 900;
    color: #666;
}

.card-badge-back {
    align-self: center;
    background-color: #FF5A5F;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 900;
}

.card-icon {
    font-size: 3.5rem;
    margin: 0.5rem 0;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.5;
}

.card-title-back {
    font-size: 1.15rem;
    font-weight: 900;
    color: #C62828;
    line-height: 1.4;
}

.card-hint {
    font-size: 0.8rem;
    color: #888;
    font-weight: 700;
}

.card-desc {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
}

.card-return {
    font-size: 0.8rem;
    color: #666;
    font-weight: 700;
}

/* 特徴セクション */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.feature-card {
    background-color: #fff;
    padding: 3rem 2.2rem;
    border-radius: var(--radius-round);
    border: 2px solid var(--border-soft);
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}

.feature-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #E2ECD8;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--primary-green-dark);
}

.feature-card p {
    color: var(--text-sub);
    font-size: 0.95rem;
}

/* シミュレーターセクション */
.sim-section {
    background-color: #EBF4EC;
}

.sim-wrapper {
    max-width: 680px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 36px;
    padding: 3.5rem 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 3px solid #D7EAD9;
}

.sim-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.sim-header h2 {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary-green-dark);
}

.sim-header p {
    font-size: 0.95rem;
    color: var(--text-sub);
    margin-top: 0.5rem;
}

.sim-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.sim-group label {
    display: block;
    font-weight: 900;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.sim-group select {
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-soft);
    background-color: var(--bg-cream);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.sim-group select:focus {
    outline: none;
    border-color: var(--primary-green);
}

.sim-result {
    margin-top: 2.5rem;
    background-color: var(--bg-cream);
    border-radius: var(--radius-round);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 2px dashed var(--primary-green);
    animation: popIn 0.4s ease-out;
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.result-badge {
    display: inline-block;
    background-color: var(--primary-green);
    color: #fff;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 0.3rem 1.2rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.result-price-box {
    margin-bottom: 1rem;
}

.price-val {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #E76F51;
}

.price-unit {
    font-size: 1.5rem;
    font-weight: 900;
    color: #E76F51;
    margin-left: 0.3rem;
}

.result-annotation {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 1.5rem;
}

/* ご利用の流れ */
.flow-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.8rem;
}

.flow-card {
    background-color: #fff;
    border-radius: var(--radius-round);
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 2px solid var(--border-soft);
}

.flow-step-num {
    display: inline-block;
    background-color: #E8F3E8;
    color: var(--primary-green-dark);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.flow-icon {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.flow-card h3 {
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.flow-card p {
    font-size: 0.88rem;
    color: var(--text-sub);
}

/* お問い合わせ・LINEセクション */
.contact-section {
    background-color: #FCFAF2;
}

.contact-box {
    max-width: 980px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: stretch;
}

.line-main-card {
    background: linear-gradient(135deg, #06C755 0%, #04A644 100%);
    color: #fff;
    border-radius: 36px;
    padding: 3.5rem 2.5rem;
    position: relative;
    box-shadow: 0 15px 35px rgba(6, 199, 85, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center; gap: 8px;
}

.line-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background-color: #FF5A5F;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
}

.line-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.line-big-icon {
    font-size: 3rem;
}

.line-card-header h3 {
    font-size: 1.5rem;
    font-weight: 900;
}

.line-card-header p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.line-guide {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.guide-num {
    background-color: #fff;
    color: var(--line-color);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.guide-item p {
    font-size: 0.92rem;
    line-height: 1.5;
}

.line-note {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 1rem;
}

.mail-sub-card {
    background-color: #fff;
    border-radius: 36px;
    padding: 3rem 2.2rem;
    border: 2px solid var(--border-soft);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.mail-sub-card h3 {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 1.8rem;
    color: var(--text-main);
}

.mail-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-item label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.req {
    background-color: #FF5A5F;
    color: #fff;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
}

.form-item input,
.form-item textarea {
    width: 100%;
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid #DDD;
    font-family: inherit;
    font-size: 0.95rem;
    background-color: var(--bg-cream);
}

.form-item input:focus,
.form-item textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    background-color: #fff;
}

.thanks-box {
    text-align: center;
    padding: 2rem 1rem;
}

.thanks-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.thanks-box h4 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--primary-green-dark);
    margin-bottom: 0.5rem;
}

/* フッター */
.footer {
    background-color: #EDE8DA;
    padding: 4rem 0 2rem 0;
    border-top: 2px solid #DDD4C0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.footer-mascot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-green);
    background-color: #fff;
}

.footer-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--primary-green-dark);
}

.footer-catch {
    font-size: 0.88rem;
    color: var(--text-sub);
    line-height: 1.7;
}

.footer-info h4 {
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.footer-info p {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin-bottom: 0.4rem;
}

.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    border-top: 1px solid #D5CCB6;
    padding-top: 1.5rem;
}

.hidden {
    display: none !important;
}

/* レスポンシブ */
@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-left {
        order: 1;
    }
    .hero-right {
        order: 2;
        max-width: 320px;
        margin: 0 auto;
    }
    .hero-title {
        font-size: 2.3rem;
    }
    .hero-cta-group {
        justify-content: center;
    }
    .hero-badges {
        justify-content: center;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .header-container {
        flex-direction: column;
        gap: 0.8rem;
    }
    .nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
    }
    .hero-title {
        font-size: 1.85rem;
    }
    .sim-wrapper {
        padding: 2rem 1.5rem;
    }
    .line-main-card,
    .mail-sub-card {
        padding: 2rem 1.5rem;
    }
}


/* 改行・タイポグラフィ最適化 */
.t-span {
    display: inline-block;
}

.d-sp {
    display: none;
}

.d-pc {
    display: inline;
}

.section-title, .hero-title, .card-title, .card-title-back {
    text-wrap: balance; /* モダンブラウザで折り返し行長を自動均等化 */
}

@media (max-width: 600px) {
    .d-pc {
        display: none !important;
    }
    .d-sp {
        display: inline !important;
    }
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.4 !important;
        letter-spacing: -0.5px;
    }
    .hero-desc {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    .hero-bubble {
        font-size: 0.82rem !important;
        padding: 0.35rem 0.9rem !important;
    }
    .section-title {
        font-size: 1.55rem !important;
        line-height: 1.35 !important;
    }
    .section-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    .card-title {
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
    }
    .card-title-back {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
    }
}


/* 湘南乃風テイスト: 力強い筆文字ロゴ ＆ 赤い落款印スタンプ */
.logo-brush-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.logo-brush {
    font-family: 'Yuji Boku', 'Reggae One', serif;
    font-size: 1.85rem;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

.logo-hanko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #D32F2F;
    color: #D32F2F;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
    line-height: 1;
    transform: rotate(-5deg);
    background-color: rgba(211, 47, 47, 0.05);
}

.footer-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-brush {
    font-family: 'Yuji Boku', 'Reggae One', serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 2px;
}

.footer-hanko {
    border: 2px solid #D32F2F;
    color: #D32F2F;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
    transform: rotate(-5deg);
}

.footer-corp {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-weight: 700;
}


/* 本格湘南乃風スタイル: 筆文字ロゴ画像設定 */
.logo-brush-wrap {
    display: block;
    line-height: 1;
    margin: 2px 0;
}

.logo-brush-img {
    height: 72px; /* 余白を完全にカットしたため、文字自体が実質2.5倍の巨大サイズに！ */
    width: auto;
    max-width: 260px;
    object-fit: contain;
    
    display: block;
    filter: contrast(1.25);
}

.logo-ruby {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--primary-green-dark);
    letter-spacing: 2px;
    display: block;
    margin-top: -2px;
}

/* ヒーロー内の特大筆文字ロゴ */
.hero-big-brush-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    
    display: block;
    margin: 0 auto 0.8rem auto;
    filter: contrast(1.15);
}

.footer-brush-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .logo-brush-img {
        height: 56px;
        max-width: 200px;
    }
}


/* 画面横幅いっぱいのワイド筆文字看板スタイル */
.top-wide-brand {
    background-color: var(--bg-cream);
    padding: 0.8rem 1rem 0.3rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
}

.text-center {
    text-align: center;
}

.brand-tag {
    display: inline-block;
    background-color: #E8F3E8;
    color: var(--primary-green-dark);
    font-size: 0.85rem;
    font-weight: 900;
    padding: 0.2rem 1.2rem;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}





.brand-sub-wrap {
    margin-top: -6px;
    margin-bottom: 0.2rem;
}

.brand-ruby {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--primary-green-dark);
    letter-spacing: 3px;
    display: inline-block;
}

/* 下段ナビバー */
.nav-bar-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid var(--border-soft);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.nav-container {
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: center;
}

.nav-container .nav {
    justify-content: center;
    gap: 2rem;
}

@media (max-width: 768px) {
    
    .brand-tag {
        font-size: 0.75rem;
    }
    .brand-ruby {
        font-size: 0.9rem;
    }
    .nav-container .nav {
        gap: 0.8rem;
    }
}


/* スマホ画面横幅めいっぱいの特大迫力スタイル */
@media (max-width: 600px) {
    .top-wide-brand {
        padding: 0.8rem 0 0.2rem 0 !important;
        overflow: hidden;
    }
    
    
    .brand-tag {
        font-size: 0.72rem !important;
        padding: 0.15rem 0.8rem !important;
    }
    .brand-ruby {
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
    }
}


/* スクロール時に邪魔にならないスマート設計 */
.header {
    /* 巨大な看板はスクロールすると自然に上に流れて消える */
    position: relative;
    border-bottom: none;
}

.top-wide-brand {
    padding: 0.8rem 0.5rem 0.3rem 0.5rem;
}

/* 下段ナビバー: 画面を邪魔しないようスクロール時は自動で隠れるか、超スリムに */
.nav-bar-wrapper {
    position: sticky;
    top: 0;
    z-index: 800;
    background-color: rgba(252, 250, 242, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.3rem 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 下にスクロールした時はナビバーもスッと隠れて画面100%全開に！ */
.nav-bar-wrapper.nav-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 600px) {
    .nav-bar-wrapper {
        padding: 0.25rem 0;
    }
    .nav-container .nav {
        gap: 0.5rem;
        font-size: 0.82rem;
    }
    .nav-line-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
    }
}


/* メニューバー: ボタン風チップ（Pill Buttons）デザイン */
.nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.4rem 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.nav-btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #FFFFFF;
    color: var(--text-main);
    border: 2px solid var(--border-soft);
    padding: 0.45rem 1rem;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nav-btn-chip:hover {
    border-color: var(--primary-green);
    color: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(100, 168, 108, 0.15);
}

.nav-btn-chip.chip-line {
    background-color: var(--line-color);
    color: #FFFFFF;
    border-color: var(--line-color);
    box-shadow: 0 3px 8px rgba(6, 199, 85, 0.25);
}

.nav-btn-chip.chip-line:hover {
    background-color: #05b04b;
    border-color: #05b04b;
}

.chip-icon {
    font-size: 1rem;
}

/* 筆文字ロゴの完璧な左右対称センタリング */




/* スマホ表示時の最適化 */
@media (max-width: 600px) {
    .nav-buttons {
        gap: 0.5rem;
        padding: 0.4rem 0.8rem;
        justify-content: flex-start; /* スマホでは指でサッとスワイプできる快適なタブバーに */
        scrollbar-width: none; /* スクロールバー非表示 */
    }
    .nav-buttons::-webkit-scrollbar {
        display: none;
    }
    .nav-btn-chip {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    .chip-icon {
        font-size: 0.85rem;
    }
}


/* ナビゲーションの2段ボタングリッド（絶対に切れない・押しやすい） */
.nav-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0.35rem 0.5rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}
.nav-buttons::-webkit-scrollbar {
    display: none !important;
}

.nav-row {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

.nav-row-1 .nav-btn-chip {
    flex: 1; /* 1段目の3つが均等に並ぶ */
    justify-content: center;
}

.nav-row-2 .nav-btn-chip {
    flex: 1; /* 2段目の2つが広めに並ぶ */
    justify-content: center;
}

.nav-btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: #FFFFFF;
    color: var(--text-main);
    border: 1.5px solid var(--border-soft);
    padding: 0.45rem 0.6rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    text-align: center;
}

.nav-btn-chip:hover {
    border-color: var(--primary-green);
    color: var(--primary-green-dark);
}

.nav-btn-chip.chip-line {
    background-color: var(--line-color);
    color: #FFFFFF;
    border-color: var(--line-color);
    box-shadow: 0 3px 8px rgba(6, 199, 85, 0.25);
    font-weight: 900;
}

/* 筆文字ロゴの完全センタリング (左右マージン・パディング完全均等) */




@media (max-width: 600px) {
    
    .nav-buttons {
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
    }
    .nav-btn-chip {
        padding: 0.4rem 0.4rem;
        font-size: 0.78rem;
    }
    .chip-icon {
        font-size: 0.85rem;
    }
}


/* キャラクター廃止後の洗練された1カラム・ヒーローレイアウト */
.hero-single-col {
    display: block !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.hero-center-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-single-col .hero-cta-group {
    justify-content: center !important;
}

.hero-single-col .hero-badges {
    justify-content: center !important;
}

.hero-single-col .hero-desc {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* ===================================================
   ✨ プロ仕様ギミックCSS
   =================================================== */

/* 1. LINEボタンのキラリ光るシャインエフェクト */
.btn-line, .float-inner, .chip-line {
    position: relative;
    overflow: hidden;
}

.floating-line {
    position: fixed !important;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
}

.btn-line::after, .float-inner::after, .chip-line::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shineEffect 3.5s infinite ease-in-out;
    pointer-events: none;
}

@keyframes shineEffect {
    0%, 70% {
        left: -60%;
    }
    100% {
        left: 140%;
    }
}

/* 2. スクロールでふわっと浮き上がるアニメーション */
.scroll-fade {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-ready .scroll-fade {
    opacity: 0;
    transform: translateY(20px);
}

.js-ready .scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 実績カウンターセクション */
.stats-section {
    background-color: #FFFFFF;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 2.2rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.stat-card {
    padding: 0.5rem;
}

.stat-num-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-green-dark);
    letter-spacing: -1px;
}

.stat-unit {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--primary-green-dark);
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-sub);
}

.stat-card-highlight {
    background-color: #F2FBF4;
    border-radius: 18px;
    padding: 0.7rem 0.5rem;
    border: 1.5px solid #A7F3D0;
}

.stat-card-highlight .stat-num,
.stat-card-highlight .stat-unit {
    color: #059669;
}

/* 4. アコーディオンFAQ */
.faq-section {
    background-color: #F7F3E8;
    border-top: 2px dashed #E2D9C3;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background-color: #FFFFFF;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-soft);
    overflow: hidden;
    transition: all 0.25s ease;
}

.faq-item:hover {
    border-color: var(--primary-green);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 900;
    color: var(--text-main);
    transition: background-color 0.2s ease;
}

.faq-q {
    background-color: var(--primary-green);
    color: #FFFFFF;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
}

.faq-title {
    flex: 1;
}

.faq-arrow {
    font-size: 0.8rem;
    color: #888;
    transition: transform 0.3s ease;
}

.faq-item.is-open .faq-arrow {
    transform: rotate(180deg);
    color: var(--primary-green-dark);
}

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

.faq-answer-inner {
    padding: 1.2rem 1.4rem 1.4rem 3.5rem;
    font-size: 0.92rem;
    color: #444;
    line-height: 1.7;
    border-top: 1px dashed #E5DECE;
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .stat-num {
        font-size: 2.3rem;
    }
    .faq-question {
        padding: 1rem;
        font-size: 0.9rem;
    }
    .faq-answer-inner {
        padding: 1rem;
        font-size: 0.85rem;
    }
}

/* ===================================================
   🚀 アドバンスド・プロ仕様ギミックCSS
   =================================================== */

/* 1. 読了率スクロール進捗バー（画面最上部） */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #06C755, #EAB308);
    z-index: 99999;
    box-shadow: 0 1px 6px rgba(6, 199, 85, 0.5);
    transition: width 0.08s ease-out;
}

/* 2. パルス点滅インジケーター（オンライン受付中） */
.pulse-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #06C755;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.8);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(6, 199, 85, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(6, 199, 85, 0);
    }
}

/* 3. トップに戻るボタン */
.scroll-top-btn {
    position: fixed !important;
    bottom: 25px;
    left: 25px;
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
    color: var(--primary-green-dark);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9998;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.scroll-top-btn .st-arrow {
    font-size: 0.85rem;
    font-weight: 900;
}

.scroll-top-btn .st-txt {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.scroll-top-btn.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: var(--primary-green);
    color: #FFFFFF;
    border-color: var(--primary-green);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* 4. Before & After 解決事例カード */
.cases-section {
    background-color: #F8FAF7;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 2rem;
}

.case-card {
    background-color: #FFFFFF;
    border-radius: 28px;
    border: 2px solid var(--border-soft);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0,0,0,0.08);
}

.case-header {
    background-color: #F0F7F0;
    padding: 1.1rem 1.4rem;
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
    border-bottom: 2px solid var(--border-soft);
}

.case-type {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--primary-green-dark);
}

.case-loc {
    font-size: 0.85rem;
    color: var(--text-sub);
    background: #FFFFFF;
    padding: 0.3rem 0.7rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    font-weight: 600;
}

.case-body {
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.case-box {
    border-radius: 16px;
    padding: 1.2rem;
}

.case-before {
    background-color: #FFF8F6;
    border: 1.5px dashed #FFA89F;
}

.case-after {
    background-color: #F0FDF4;
    border: 2px solid #86EFAC;
}

.case-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.before-label {
    background-color: #EF4444;
    color: #FFFFFF;
}

.after-label {
    background-color: #10B981;
    color: #FFFFFF;
}

.case-box h4 {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.case-box p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.55;
    margin: 0;
}

.case-arrow-wrap {
    text-align: center;
    margin: -0.4rem 0;
}

.case-arrow-icon {
    display: inline-block;
    background: #06C755;
    color: #FFFFFF;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 0.9rem;
    transform: rotate(90deg);
    box-shadow: 0 3px 8px rgba(6, 199, 85, 0.35);
}

/* 5. シミュレーター結果のポップアニメーション */
.sim-result:not(.hidden) {
    animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 6. スマホ時の追従ボタン＆トップへ戻るボタン配置最適化 */
@media (max-width: 600px) {
    .floating-line {
        bottom: 14px !important;
        right: 12px !important;
    }
    .float-badge {
        font-size: 0.62rem;
        padding: 0.15rem 0.45rem;
    }
    .float-inner {
        padding: 0.6rem 1rem;
    }
    .float-text {
        font-size: 0.88rem;
    }
    .line-icon {
        font-size: 1.1rem;
    }
    .scroll-top-btn {
        bottom: 14px !important;
        left: 12px !important;
        width: 44px;
        height: 44px;
    }
    .scroll-top-btn .st-arrow {
        font-size: 0.8rem;
    }
    .scroll-top-btn .st-txt {
        font-size: 0.55rem;
    }
}



/* ===================================================
   看板筆文字ロゴ (完全透過PNG & 視覚重心センタリング)
   =================================================== */
.top-wide-brand {
    padding: 1.2rem 0 0.4rem 0;
    background-color: transparent;
    text-align: center;
}

.wide-brush-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.super-wide-brush-logo {
    display: block !important;
    width: 88%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
}

@media (max-width: 600px) {
    .top-wide-brand {
        padding: 0.8rem 0 0.2rem 0;
    }
    .wide-brush-container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    .super-wide-brush-logo {
        width: 82vw !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        display: block !important;
        padding: 0 !important;
    }
}

/* ===================================================
   ⏳ 30年後の負担シミュレーション (future-cost)
   =================================================== */
.future-cost-section {
    background-color: #FAF7EE;
}

.future-cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.future-cost-card {
    background-color: #FFFFFF;
    border-radius: var(--radius-round);
    border: 2px solid var(--border-soft);
    padding: 2.2rem 1.6rem 2rem 1.6rem;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.future-cost-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.fcost-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background-color: var(--primary-green-dark);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.fcost-card-accent .fcost-badge {
    background-color: #D97706; /* アンバーオレンジ */
}

.fcost-card-danger .fcost-badge {
    background-color: #DC2626; /* レッド */
}

.fcost-icon {
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
}

.fcost-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 0.6rem;
}

.fcost-desc {
    font-size: 0.86rem;
    color: var(--text-sub);
    line-height: 1.55;
    margin-bottom: 1.2rem;
    min-height: 2.8em;
}

.fcost-calc-box {
    background-color: #F8F6F0;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}

.fcost-row {
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    color: #555;
    padding: 0.35rem 0;
}

.fcost-val {
    font-weight: 700;
    color: var(--text-main);
}

.fcost-total-row {
    border-top: 1px dashed #DDD5C7;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--text-main);
}

.fcost-total-val {
    color: var(--primary-green-dark);
}

.fcost-future-result {
    margin-top: auto;
    background: linear-gradient(135deg, #F0FDF4 0%, #E8F5E9 100%);
    border: 2px solid #A7F3D0;
    border-radius: 16px;
    padding: 1.2rem;
    text-align: center;
}

.fcost-card-accent .fcost-future-result {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FDE68A;
}

.fcost-card-danger .fcost-future-result {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-color: #FECACA;
}

.fcost-future-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #444;
    display: block;
    margin-bottom: 0.2rem;
}

.fcost-future-price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1;
}

.fcost-future-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-green-dark);
    letter-spacing: -1px;
}

.text-orange {
    color: #D97706 !important;
}

.text-red {
    color: #DC2626 !important;
}

.fcost-future-unit {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-main);
}

.fcost-note {
    font-size: 0.72rem;
    color: #777;
    margin-top: 0.5rem;
}

/* 将来負担のCTAバナー */
.future-cost-cta-banner {
    background: #FFFFFF;
    border: 2px solid var(--primary-green);
    border-radius: 28px;
    padding: 2.2rem 2.5rem;
    box-shadow: 0 8px 24px rgba(74, 133, 82, 0.08);
}

.fcost-banner-inner {
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
    gap: 2rem;
}

.fcost-banner-text h3 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 0.6rem;
}

.fcost-banner-text p {
    font-size: 0.92rem;
    color: #555;
    line-height: 1.6;
}

.fcost-banner-btn-wrap {
    flex-shrink: 0;
}

@media (max-width: 800px) {
    .fcost-banner-inner {
        flex-direction: column;
        text-align: center;
    }
    .fcost-banner-btn-wrap .btn {
        width: 100%;
    }
}


/* ===================================================
   ⚖️ 国の制度との徹底比較表 (comparison)
   =================================================== */
.comparison-section {
    background-color: #FFFFFF;
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 24px;
    border: 2px solid var(--border-soft);
    background-color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    margin-bottom: 2rem;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 600px;
}

.comparison-table th {
    padding: 1.2rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 900;
    border-bottom: 2px solid var(--border-soft);
}

.th-item {
    width: 25%;
    background-color: #F8F6F0;
    color: var(--text-main);
}

.th-gov {
    width: 37%;
    background-color: #F3F4F6;
    color: #4B5563;
    text-align: center;
}

.th-tochisuke {
    width: 38%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    text-align: center;
    font-size: 1.15rem;
}

.comparison-table td {
    padding: 1.3rem 1.4rem;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.td-item {
    background-color: #FAF8F2;
}

.td-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-main);
}

.td-sub {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
    display: block;
}

.td-gov {
    background-color: #FAFAFA;
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
}

.td-tochisuke {
    background-color: #F0FDF4;
    font-size: 0.92rem;
    color: var(--text-main);
    line-height: 1.55;
}

.badge-ng {
    display: inline-block;
    background-color: #FEE2E2;
    color: #DC2626;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.badge-ok {
    display: inline-block;
    background-color: #10B981;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.tr-highlight td {
    background-color: #ECFDF5;
    border-bottom: 2px solid #86EFAC;
}

.tr-highlight .td-item {
    background-color: #E6F7EC;
}

.comparison-bottom-note {
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 16px;
    padding: 1.1rem 1.5rem;
    font-size: 0.9rem;
    color: #92400E;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .future-cost-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .future-cost-card {
        padding: 1.8rem 1.2rem;
    }
    .fcost-future-num {
        font-size: 2rem;
    }
    .future-cost-cta-banner {
        padding: 1.5rem 1.2rem;
    }
    .fcost-banner-text h3 {
        font-size: 1.15rem;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 1rem 0.8rem;
    }
}

/* ==========================================================================
   2026 リニューアル: スマホ直感型UI・ビジュアル化・シンプル比較表・カード型フロー
   ========================================================================== */

/* --- 1. 目立つ緑色LINEボタン（共通） & セクション合間CTA --- */
.btn-line-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #06C755 0%, #05A847 100%);
    color: #ffffff !important;
    font-weight: 800;
    text-decoration: none;
    border-radius: 50px;
    padding: 16px 28px;
    box-shadow: 0 8px 24px rgba(6, 199, 85, 0.4), 0 2px 6px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid #ffffff;
    line-height: 1.3;
}
.btn-line-glow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(6, 199, 85, 0.55);
    background: linear-gradient(135deg, #07DC5E 0%, #06C755 100%);
}
.btn-line-glow:active {
    transform: translateY(1px) scale(0.99);
}
.btn-line-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-25deg);
    animation: cta-shine 3.5s infinite;
}
@keyframes cta-shine {
    0% { left: -120%; }
    25% { left: 180%; }
    100% { left: 180%; }
}
.cta-btn-ico {
    font-size: 2.2rem;
    flex-shrink: 0;
}
.cta-btn-txt-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.cta-btn-sub {
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.03em;
}
.cta-btn-main {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.btn-block {
    display: flex;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

/* セクション合間の中間CTA */
.section-mid-cta {
    padding: 30px 15px;
    background: linear-gradient(180deg, rgba(240, 249, 243, 0.6) 0%, rgba(230, 245, 235, 0.9) 100%);
    border-top: 1px dashed rgba(6, 199, 85, 0.3);
    border-bottom: 1px dashed rgba(6, 199, 85, 0.3);
    margin: 10px 0;
}
.mid-cta-card {
    background: #ffffff;
    border: 2px solid #06C755;
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(6, 199, 85, 0.12);
    max-width: 640px;
    margin: 0 auto;
}
.mid-cta-badge {
    display: inline-block;
    background: #e8f8ed;
    color: #048236;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 4px 16px;
    border-radius: 30px;
    margin-bottom: 14px;
}
.mid-cta-note {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* --- 2. ヒーローセクション（シニア夫婦写真 ＆ 太字チェックリスト） --- */
.hero-visual-card {
    margin: 22px auto 26px;
    max-width: 580px;
}
.hero-img-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    border: 4px solid #ffffff;
    background: #f5f5f0;
}
.hero-senior-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.hero-img-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(220, 220, 220, 0.8);
}
.hero-img-badge .badge-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.hero-img-badge .badge-txt {
    font-size: 0.85rem;
    color: #2b3a32;
    line-height: 1.35;
}
.hero-img-badge strong {
    color: #0b6b38;
}

.hero-summary-box {
    background: #ffffff;
    border: 2px solid #e2ece5;
    border-radius: 18px;
    padding: 18px 20px;
    margin: 0 auto 24px;
    max-width: 580px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    text-align: left;
}
.hero-summary-title {
    font-size: 1.02rem;
    color: #1e3a2b;
    margin-bottom: 12px;
    border-bottom: 2px solid #eef5f0;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-check-list li {
    font-size: 0.95rem;
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}
.hero-check-list .check-icon {
    color: #06C755;
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.hero-cta-action {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-cta-note {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- 3. お悩みセクション（山林・空き家写真 ＆ 太字チェックリスト） --- */
.troubles-section {
    background: #fbfbf9;
    padding-top: 50px;
    padding-bottom: 40px;
}
.trouble-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 720px;
    margin: 0 auto 26px;
}
.trouble-photo-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border: 1px solid #eaeaea;
}
.trouble-photo-wrap {
    position: relative;
    height: 160px;
    overflow: hidden;
}
.trouble-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.trouble-photo-card:hover .trouble-img {
    transform: scale(1.05);
}
.trouble-photo-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.trouble-photo-desc {
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #555;
    line-height: 1.4;
    text-align: left;
    background: #fafaf8;
}

.trouble-checklist-card {
    background: #ffffff;
    border: 2px solid #f2dede;
    border-left: 6px solid #e74c3c;
    border-radius: 16px;
    padding: 22px 20px;
    max-width: 720px;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(231, 76, 60, 0.06);
    text-align: left;
}
.trouble-card-title {
    font-size: 1.05rem;
    color: #c0392b;
    font-weight: 900;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trouble-check-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trouble-check-items li {
    font-size: 0.95rem;
    color: #2c3e50;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}
.check-ico-red {
    color: #e74c3c;
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- 4. 強みセクション（丸型アイコンバッジ） --- */
.badge-circle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.badge-circle-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b7a4b 0%, #175430 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(43, 122, 75, 0.28);
    border: 3px solid #e2f0e7;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}
.feature-card:hover .badge-circle-icon {
    transform: scale(1.08) rotate(-4deg);
}
.badge-circle-label {
    background: #e9f6ee;
    color: #175430;
    font-size: 0.88rem;
    font-weight: 900;
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid #b7dfc6;
    letter-spacing: 0.05em;
}
.feature-checklist {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feature-checklist li {
    font-size: 0.9rem;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.feature-checklist .fa-check {
    color: #06C755;
    margin-top: 3px;
    flex-shrink: 0;
}

/* --- 5. 国の制度との比較表（シンプル〇×表） --- */
.comparison-simple-wrap {
    max-width: 820px;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    border: 2px solid #e6ece8;
}
.comparison-simple-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.comparison-simple-table th {
    padding: 16px 12px;
    font-size: 0.95rem;
    font-weight: 800;
}
.comparison-simple-table .col-item {
    background: #f4f6f4;
    color: #444;
    width: 32%;
    border-bottom: 2px solid #dbe2dd;
}
.comparison-simple-table .col-gov {
    background: #eaeaea;
    color: #666;
    width: 34%;
    border-bottom: 2px solid #ccc;
}
.comparison-simple-table .col-tochisuke {
    background: linear-gradient(180deg, #1d6e3f 0%, #165631 100%);
    color: #ffffff;
    width: 34%;
    border-bottom: 2px solid #114226;
    font-size: 1.05rem;
    position: relative;
}
.comparison-simple-table .brand-emp {
    color: #a3ffc7;
    font-weight: 900;
}
.comparison-simple-table td {
    padding: 16px 10px;
    border-bottom: 1px solid #ebebeb;
    vertical-align: middle;
}
.comparison-simple-table tr:last-child td {
    border-bottom: none;
}
.td-item-title {
    background: #fafbfa;
    text-align: left;
    padding-left: 14px !important;
    font-size: 0.92rem;
    color: #2c3e50;
}
.td-gov-val {
    background: #fdfdfd;
}
.td-tochisuke-val {
    background: #f0f9f3;
    border-left: 2px solid #c2e8d0;
    border-right: 2px solid #c2e8d0;
}
.mark-bad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #feebee;
    color: #e53935;
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 6px;
    border: 2px solid #ffcdd2;
}
.mark-good {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f8ed;
    color: #06C755;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 6px;
    border: 2.5px solid #06C755;
    box-shadow: 0 4px 10px rgba(6, 199, 85, 0.2);
}
.cond-text {
    display: block;
    font-size: 0.82rem;
    color: #555;
    line-height: 1.35;
}
.cond-text small {
    color: #888;
}
.cond-emp {
    display: block;
    font-size: 0.88rem;
    color: #165631;
    line-height: 1.35;
}
.cond-emp strong {
    color: #0b6b38;
}
.price-zero {
    color: #e65100;
    font-size: 1.05rem;
}
.comparison-simple-table tr.row-highlight td {
    background: #fff9e6;
}
.comparison-simple-table tr.row-highlight .td-tochisuke-val {
    background: #e6f9ed;
}
.comparison-summary-card {
    background: #ffffff;
    border: 1px solid #d2e4d8;
    border-radius: 12px;
    padding: 12px 18px;
    max-width: 820px;
    margin: 0 auto;
    font-size: 0.9rem;
    color: #2b573c;
    text-align: left;
}

/* --- 6. ご利用の流れ（カード型レイアウト Step 1〜4） --- */
.flow-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto 20px;
}
.step-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 2px solid #eef2ef;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.step-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2b7a4b;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(43, 122, 75, 0.3);
    letter-spacing: 0.05em;
}
.step-badge.badge-final {
    background: #e67e22;
    box-shadow: 0 3px 8px rgba(230, 126, 34, 0.35);
}
.step-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eaf5ee;
    color: #2b7a4b;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 14px;
    border: 2px solid #cce5d5;
}
.step-icon-wrap.icon-final {
    background: #fef5e7;
    color: #e67e22;
    border-color: #fad7a0;
}
.step-title {
    font-size: 1rem;
    color: #1e3a2b;
    font-weight: 800;
    margin-bottom: 14px;
    line-height: 1.35;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.step-checklist li {
    font-size: 0.85rem;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.4;
}
.step-checklist .fa-check {
    color: #06C755;
    font-size: 0.85rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.step-card-final {
    border-color: #fcebd2;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

/* --- レスポンシブ最適化（スマホ 768px以下） --- */
@media screen and (max-width: 768px) {
    .btn-line-glow {
        padding: 15px 20px;
        width: 100%;
    }
    .cta-btn-ico {
        font-size: 1.9rem;
    }
    .cta-btn-main {
        font-size: 1.02rem;
    }
    .cta-btn-sub {
        font-size: 0.76rem;
    }
    .hero-senior-img {
        height: 220px;
    }
    .trouble-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .trouble-photo-wrap {
        height: 180px;
    }
    .comparison-simple-table th {
        padding: 12px 6px;
        font-size: 0.85rem;
    }
    .comparison-simple-table td {
        padding: 12px 6px;
    }
    .mark-bad, .mark-good {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
        margin-bottom: 4px;
    }
    .td-item-title {
        font-size: 0.82rem;
        padding-left: 8px !important;
    }
    .cond-text, .cond-emp {
        font-size: 0.76rem;
    }
    .flow-card-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 480px;
    }
    .step-title {
        min-height: auto;
    }
}

/* --- スマホ表示の最終微調整 --- */
@media screen and (max-width: 768px) {
    /* LINEボタンのテキストをきれいに1行で収める */
    .btn-line-glow {
        padding: 12px 14px !important;
        gap: 8px !important;
        border-radius: 40px !important;
    }
    .cta-btn-ico {
        font-size: 1.6rem !important;
    }
    .cta-btn-main {
        font-size: 0.92rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.02em !important;
    }
    .cta-btn-sub {
        font-size: 0.72rem !important;
    }

    /* 比較表を390pxスマホで横スクロールなしで完全表示 */
    .comparison-simple-wrap {
        margin: 0 -8px 20px !important;
        border-radius: 12px !important;
    }
    .comparison-simple-table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    .comparison-simple-table .col-item {
        width: 28% !important;
    }
    .comparison-simple-table .col-gov {
        width: 36% !important;
    }
    .comparison-simple-table .col-tochisuke {
        width: 36% !important;
    }
    .comparison-simple-table th {
        padding: 10px 4px !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
    }
    .comparison-simple-table td {
        padding: 10px 4px !important;
        font-size: 0.74rem !important;
    }
    .td-item-title {
        padding-left: 6px !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
    }
    .mark-bad, .mark-good {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
        border-width: 2px !important;
    }
    .cond-text {
        font-size: 0.7rem !important;
        line-height: 1.25 !important;
    }
    .cond-emp {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }
}

/* === スマホ幅完全フィット調整 (390px以下対応) === */
@media screen and (max-width: 768px) {
    .btn-line-glow {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 8px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    .cta-btn-ico {
        font-size: 1.5rem !important;
        flex-shrink: 0 !important;
    }
    .cta-btn-txt-wrap {
        flex-grow: 1 !important;
        min-width: 0 !important;
    }
    .cta-btn-sub {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }
    .cta-btn-main {
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.03em !important;
        white-space: normal !important;
    }

    /* 比較表の完全フィット */
    .comparison-simple-wrap {
        width: 100% !important;
        margin: 0 0 20px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        overflow-x: auto !important;
    }
    .comparison-simple-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 0.72rem !important;
    }
    .comparison-simple-table .col-item {
        width: 25% !important;
    }
    .comparison-simple-table .col-gov {
        width: 37.5% !important;
    }
    .comparison-simple-table .col-tochisuke {
        width: 37.5% !important;
    }
    .comparison-simple-table th {
        padding: 8px 2px !important;
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }
    .comparison-simple-table td {
        padding: 8px 2px !important;
        word-break: break-word !important;
    }
    .td-item-title {
        padding-left: 4px !important;
        font-size: 0.72rem !important;
    }
    .mark-bad, .mark-good {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }
    .cond-text, .cond-emp {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
    }
}

/* === スマホ完全最適化 (絶対に途切れない設定) === */
@media screen and (max-width: 768px) {
    /* LINEボタン全般 */
    .btn-line-glow {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        gap: 6px !important;
    }
    .cta-btn-ico {
        font-size: 1.4rem !important;
    }
    .cta-btn-main {
        font-size: 0.82rem !important;
        letter-spacing: -0.04em !important;
        white-space: normal !important;
        word-break: break-all !important;
        text-align: center !important;
    }
    .cta-btn-sub {
        font-size: 0.68rem !important;
        text-align: center !important;
    }
    .cta-btn-txt-wrap {
        text-align: center !important;
    }

    /* 比較表の完全収容 */
    .comparison-simple-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 0 15px !important;
        border: 1px solid #c8d8ce !important;
    }
    .comparison-simple-table {
        width: 100% !important;
        min-width: 330px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }
    .comparison-simple-table .col-item {
        width: 26% !important;
    }
    .comparison-simple-table .col-gov {
        width: 37% !important;
    }
    .comparison-simple-table .col-tochisuke {
        width: 37% !important;
    }
    .comparison-simple-table th {
        padding: 6px 2px !important;
        font-size: 0.7rem !important;
    }
    .comparison-simple-table td {
        padding: 8px 3px !important;
        word-break: break-word !important;
        vertical-align: middle !important;
    }
    .td-item-title {
        padding-left: 4px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
    }
    .mark-bad, .mark-good {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
        line-height: 24px !important;
    }
    .cond-text, .cond-emp {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
}

@media screen and (max-width: 768px) {
    .comparison-section .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .comparison-simple-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 16px !important;
        overflow-x: hidden !important;
    }
    .comparison-simple-table {
        width: 100% !important;
        table-layout: fixed !important;
    }
}

@media screen and (max-width: 768px) {
    .comparison-simple-wrap {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .comparison-simple-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    .comparison-simple-table .col-item {
        width: 26% !important;
    }
    .comparison-simple-table .col-gov {
        width: 37% !important;
    }
    .comparison-simple-table .col-tochisuke {
        width: 37% !important;
    }
    .comparison-simple-table th {
        padding: 6px 1px !important;
        font-size: 0.66rem !important;
        letter-spacing: -0.05em !important;
    }
    .comparison-simple-table td {
        padding: 6px 1px !important;
        font-size: 0.64rem !important;
        line-height: 1.15 !important;
    }
    .mark-bad, .mark-good {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.75rem !important;
        line-height: 22px !important;
        margin-bottom: 2px !important;
    }
    .cond-text, .cond-emp {
        font-size: 0.62rem !important;
        letter-spacing: -0.03em !important;
    }
}

/* === 比較表のピクセル完全固定（360px完全収容） === */
@media screen and (max-width: 768px) {
    .comparison-simple-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        display: flex !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .comparison-simple-table {
        width: 350px !important;
        max-width: 350px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
        border: 1px solid #d2ded5 !important;
    }
    .comparison-simple-table th.col-item, 
    .comparison-simple-table td.td-item-title {
        width: 80px !important;
        max-width: 80px !important;
        padding: 6px 3px !important;
        font-size: 0.68rem !important;
        box-sizing: border-box !important;
    }
    .comparison-simple-table th.col-gov, 
    .comparison-simple-table td.td-gov-val {
        width: 135px !important;
        max-width: 135px !important;
        padding: 6px 3px !important;
        box-sizing: border-box !important;
    }
    .comparison-simple-table th.col-tochisuke, 
    .comparison-simple-table td.td-tochisuke-val {
        width: 135px !important;
        max-width: 135px !important;
        padding: 6px 3px !important;
        box-sizing: border-box !important;
    }
    .mark-bad, .mark-good {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.8rem !important;
        line-height: 22px !important;
        margin: 0 auto 3px !important;
    }
    .cond-text {
        font-size: 0.64rem !important;
        line-height: 1.2 !important;
    }
    .cond-emp {
        font-size: 0.66rem !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   2026 修正: チェックリスト左右分断解消・シニア画像吹き出し下移動・見出し自然改行
   ========================================================================== */

/* 1. 見出しの自然な文節改行 */
.hero-title {
    font-size: clamp(1.4rem, 5.5vw, 2.3rem) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
}
.hero-title .phrase {
    display: inline-block !important;
    white-space: nowrap !important;
}
.hero-title .d-break {
    display: block !important;
}

/* 2. シニア夫婦画像と独立した下部吹き出しカード */
.hero-visual-card {
    margin: 20px auto 24px !important;
    max-width: 560px !important;
}
.hero-img-wrap {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
    border: 3px solid #ffffff !important;
    background: #f7f9f7 !important;
}
.hero-senior-img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
}
.hero-voice-card {
    margin-top: 12px !important;
    position: relative !important;
    background: #ffffff !important;
    border: 2px solid #bce1ca !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    box-shadow: 0 6px 18px rgba(43, 122, 75, 0.08) !important;
    text-align: left !important;
}
.voice-bubble-arrow {
    position: absolute !important;
    top: -9px !important;
    left: 36px !important;
    width: 14px !important;
    height: 14px !important;
    background: #ffffff !important;
    border-left: 2px solid #bce1ca !important;
    border-top: 2px solid #bce1ca !important;
    transform: rotate(45deg) !important;
}
.voice-card-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.voice-icon {
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.voice-text {
    flex: 1 1 auto !important;
}
.voice-lead {
    font-size: 0.92rem !important;
    color: #125e34 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
}
.voice-lead strong {
    font-weight: 800 !important;
}
.voice-sub {
    font-size: 0.78rem !important;
    color: #555 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* 3. チェックリストの左右分断完全解消（1つの自然な文章として表示） */
.hero-check-list,
.trouble-check-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.hero-check-list li,
.trouble-check-items li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: #2c3e50 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.hero-check-list li .check-icon,
.trouble-check-items li .check-ico-red {
    font-size: 1.15rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}
.hero-check-list li .list-content,
.trouble-check-items li .list-content {
    flex: 1 1 auto !important;
    text-align: left !important;
    word-break: normal !important;
    line-height: 1.55 !important;
    display: block !important;
}
.list-content strong {
    color: #1a3024 !important;
    font-weight: 800 !important;
}
.trouble-check-items .list-content strong {
    color: #c0392b !important;
}

@media screen and (max-width: 600px) {
    .hero-senior-img {
        height: 220px !important;
    }
    .hero-voice-card {
        padding: 10px 14px !important;
    }
    .voice-lead {
        font-size: 0.86rem !important;
    }
    .voice-sub {
        font-size: 0.74rem !important;
    }
    .hero-check-list li,
    .trouble-check-items li {
        font-size: 0.88rem !important;
        gap: 8px !important;
    }
    .hero-check-list li .check-icon,
    .trouble-check-items li .check-ico-red {
        font-size: 1.05rem !important;
    }
}

/* ==========================================================================
   決定版修正: はみ出し完全防止・自然な文節改行・リスト完全インライン化・吹き出し下部配置
   ========================================================================== */

/* 1. ページ全体のはみ出し・横スクロール完全防止（stickyとスクロール検知を壊さないclipを使用） */
html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

.container, .hero-container {
    width: 100% !important;
    max-width: 1000px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. トップ見出しの自然な文節改行 */
.hero-title {
    font-size: clamp(1.35rem, 5.2vw, 2.3rem) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}
.d-sp-break {
    display: block !important;
}

/* 3. シニア夫婦画像と独立した下部吹き出し */
.hero-visual-card {
    margin: 18px auto 22px !important;
    max-width: 520px !important;
    width: 100% !important;
}
.hero-img-wrap {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border: 3px solid #ffffff !important;
    background: #f7f9f7 !important;
    width: 100% !important;
}
.hero-senior-img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
}
.hero-voice-card {
    margin-top: 10px !important;
    position: relative !important;
    background: #ffffff !important;
    border: 2px solid #bce1ca !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    box-shadow: 0 4px 14px rgba(43, 122, 75, 0.08) !important;
    text-align: left !important;
    width: 100% !important;
}
.voice-bubble-arrow {
    position: absolute !important;
    top: -8px !important;
    left: 32px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-left: 2px solid #bce1ca !important;
    border-top: 2px solid #bce1ca !important;
    transform: rotate(45deg) !important;
}

/* 4. チェックリストの左右分断完全解消（1つの自然な文章として綺麗に上から下に流す） */
.hero-check-list,
.trouble-check-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}
.hero-check-list li,
.trouble-check-items li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: #2c3e50 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.hero-check-list li .check-icon,
.trouble-check-items li .check-ico-red {
    font-size: 1.15rem !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}
.hero-check-list li .list-content,
.trouble-check-items li .list-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    line-height: 1.55 !important;
    display: block !important;
    word-break: normal !important;
}
.hero-check-list li .list-content strong {
    color: #1a3024 !important;
    font-weight: 800 !important;
}
.trouble-check-items li .list-content strong {
    color: #c0392b !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   決定版: はみ出し完全防止・自然な文節改行・リスト完全インライン化
   ========================================================================== */

/* 横スクロール・はみ出しの根絶（stickyとスクロール検知を壊さないclipを使用） */
html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ヘッダー・看板のはみ出し防止 */
.header, .top-wide-brand, .wide-brush-container {
    max-width: 100% !important;
    overflow: hidden !important;
}
.super-wide-brush-logo {
    max-width: 100% !important;
    height: auto !important;
}

/* ヒーロー吹き出しのはみ出し防止 */
.hero-bubble {
    white-space: normal !important;
    max-width: 92% !important;
    margin: 0 auto 1.2rem !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* 見出しの自然な文節改行 */
.d-sp-only {
    display: none;
}
.d-pc-only {
    display: block;
}

.hero-title {
    font-size: clamp(1.3rem, 5vw, 2.2rem) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
    text-align: center !important;
}

@media screen and (max-width: 768px) {
    .d-sp-only {
        display: block !important;
    }
    .d-pc-only {
        display: none !important;
    }
    .hero-title {
        font-size: 1.35rem !important;
        line-height: 1.45 !important;
    }
}

/* シニア夫婦の写真と独立した下部吹き出し */
.hero-visual-card {
    margin: 16px auto 20px !important;
    max-width: 500px !important;
    width: 100% !important;
}
.hero-img-wrap {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border: 3px solid #ffffff !important;
    background: #fdfdfd !important;
}
.hero-senior-img {
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
}
.hero-voice-card {
    margin-top: 10px !important;
    position: relative !important;
    background: #ffffff !important;
    border: 2px solid #bce1ca !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    box-shadow: 0 4px 14px rgba(43, 122, 75, 0.08) !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.voice-bubble-arrow {
    position: absolute !important;
    top: -8px !important;
    left: 30px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-left: 2px solid #bce1ca !important;
    border-top: 2px solid #bce1ca !important;
    transform: rotate(45deg) !important;
}

/* チェックリストの左右分断完全解消（1つの自然な文章として綺麗に上から下に流す） */
.hero-check-list,
.trouble-check-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}
.hero-check-list li,
.trouble-check-items li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #2c3e50 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.hero-check-list li .check-icon,
.trouble-check-items li .check-ico-red {
    font-size: 1.15rem !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}
.hero-check-list li .list-content,
.trouble-check-items li .list-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    line-height: 1.55 !important;
    display: block !important;
    word-break: normal !important;
}
.hero-check-list li .list-content strong {
    color: #1a3024 !important;
    font-weight: 800 !important;
}
.trouble-check-items li .list-content strong {
    color: #c0392b !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   2026 追加: 概算料金プライシングカード ＆ 信頼感ある解決事例フリップカード
   ========================================================================== */

/* 1. 概算料金プライシングカード */
.hero-pricing-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%) !important;
    border: 2.5px solid #2b7a4b !important;
    border-radius: 20px !important;
    padding: 18px 20px !important;
    margin: 0 auto 20px !important;
    max-width: 580px !important;
    box-shadow: 0 10px 28px rgba(43, 122, 75, 0.12) !important;
    text-align: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.pricing-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
.pricing-badge {
    background: #2b7a4b !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    letter-spacing: 0.05em !important;
}
.pricing-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
}
.pricing-amount-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 4px 0 10px !important;
}
.pricing-val {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    color: #1d6e3f !important;
    line-height: 1 !important;
}
.pricing-unit {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #1d6e3f !important;
}
.pricing-tax {
    font-size: 0.8rem !important;
    color: #666 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}
.pricing-chips-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}
.p-chip {
    background: #e8f5ec !important;
    color: #165631 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 30px !important;
    border: 1px solid #b7dfc6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.p-chip i {
    color: #06C755 !important;
}
.pricing-note {
    font-size: 0.76rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 2. 信頼感あるBefore / After フリップカード */
.card-case-front {
    background: #ffffff !important;
    border: 2px solid #e5ebe7 !important;
    border-top: 5px solid #d9534f !important;
    color: #333 !important;
    padding: 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.card-case-back {
    background: linear-gradient(180deg, #f0f9f3 0%, #e6f6ec 100%) !important;
    border: 2px solid #2b7a4b !important;
    border-top: 5px solid #06C755 !important;
    color: #1a3024 !important;
    padding: 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.case-front-header, .case-back-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #d8e2dc !important;
}
.case-badge-before {
    background: #fdf0ed !important;
    color: #c0392b !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    border: 1px solid #fadbd8 !important;
}
.case-badge-after {
    background: #2b7a4b !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
}
.case-loc-tag, .case-period-tag {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #555 !important;
}

.case-title-front {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}
.case-title-back {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: #125e34 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.case-desc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
}
.case-desc-list li {
    font-size: 0.85rem !important;
    color: #555 !important;
    line-height: 1.4 !important;
}

.case-price-box {
    background: #ffffff !important;
    border: 1.5px solid #b7dfc6 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.price-box-label {
    font-size: 0.78rem !important;
    color: #555 !important;
    font-weight: 700 !important;
}
.price-box-val {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #c0392b !important;
}
.price-box-val small {
    font-size: 0.75rem !important;
    color: #444 !important;
}

.case-result-desc {
    font-size: 0.84rem !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
    flex-grow: 1 !important;
}

.case-flip-prompt {
    font-size: 0.78rem !important;
    color: #2b7a4b !important;
    font-weight: 800 !important;
    text-align: center !important;
    background: #edf7f0 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    margin-top: auto !important;
}
.case-flip-back-prompt {
    font-size: 0.78rem !important;
    color: #666 !important;
    text-align: center !important;
    margin-top: auto !important;
}

@media screen and (max-width: 600px) {
    .pricing-val {
        font-size: 2.3rem !important;
    }
    .pricing-unit {
        font-size: 1.15rem !important;
    }
    .p-chip {
        font-size: 0.76rem !important;
        padding: 3px 8px !important;
    }
    .hero-pricing-card {
        padding: 14px 12px !important;
    }
}

/* ==========================================================================
   2026 追加: 訳あり物件早見チェック ＆ 課税明細書撮影見本 ＆ 代表メッセージ
   ========================================================================== */

/* 1. 訳あり物件の早見チェック表 */
.special-cases-card {
    background: #ffffff !important;
    border: 2px solid #cce2d3 !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    margin: 24px auto 0 !important;
    max-width: 760px !important;
    box-shadow: 0 8px 24px rgba(43, 122, 75, 0.06) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.special-tag {
    display: inline-block !important;
    background: #e8f5ec !important;
    color: #175430 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    padding: 3px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #b7dfc6 !important;
    margin-bottom: 8px !important;
}
.special-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #1e3a2b !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
}
.special-sub {
    font-size: 0.84rem !important;
    color: #555 !important;
    margin: 0 0 18px !important;
}
.special-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    text-align: left !important;
    margin-bottom: 16px !important;
}
.special-item {
    background: #fbfdfc !important;
    border: 1.5px solid #dbeae0 !important;
    border-radius: 14px !important;
    padding: 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
}
.special-status {
    display: inline-block !important;
    background: #e6f7ec !important;
    color: #06C755 !important;
    font-weight: 900 !important;
    font-size: 0.78rem !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    border: 1.5px solid #06C755 !important;
    margin-bottom: 8px !important;
    align-self: flex-start !important;
}
.special-item h4 {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
}
.special-item p {
    font-size: 0.8rem !important;
    color: #555 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.special-bottom-note {
    background: #f4fbf6 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    color: #1d6e3f !important;
    text-align: left !important;
}
.special-bottom-note p {
    margin: 0 !important;
}

/* 2. 課税明細書の撮影見本 */
.tax-sample-card {
    background: #ffffff !important;
    border: 1.5px solid #d2ded5 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin: 18px 0 20px !important;
    text-align: left !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.tax-sample-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.sample-badge {
    background: #e67e22 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}
.tax-sample-header h4 {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
}

.tax-mock-doc {
    background: #fafaf8 !important;
    border: 1.5px dashed #b7dfc6 !important;
    border-radius: 12px !important;
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
}
.mock-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}
.mock-doc-title {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #444 !important;
}
.mock-privacy-tag {
    background: #fef5e7 !important;
    color: #d35400 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #fad7a0 !important;
}
.mock-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.mock-row {
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    border: 1px solid #ebebeb !important;
}
.mock-row-target {
    border: 2px solid #06C755 !important;
    background: #f0fbf4 !important;
    position: relative !important;
}
.mock-target-badge {
    display: inline-block !important;
    background: #06C755 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    margin-bottom: 4px !important;
}
.mock-sub-badge {
    display: inline-block !important;
    background: #95a5a6 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    margin-bottom: 4px !important;
}
.mock-data-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    font-size: 0.75rem !important;
    color: #333 !important;
}

.tax-sample-notes {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.tax-sample-notes li {
    font-size: 0.8rem !important;
    color: #444 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}
.tax-sample-notes li i {
    color: #06C755 !important;
    margin-top: 3px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

/* 3. 代表メッセージセクション */
.rep-section {
    background: #f7faf8 !important;
    padding: 40px 0 !important;
}
.rep-card {
    background: #ffffff !important;
    border: 1.5px solid #d4e5da !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}
.rep-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #eaf5ee !important;
    color: #2b7a4b !important;
    font-size: 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 2px solid #c2dfcc !important;
}
.rep-content {
    flex: 1 1 auto !important;
    text-align: left !important;
}
.rep-badge {
    display: inline-block !important;
    background: #e8f5ec !important;
    color: #175430 !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.05em !important;
}
.rep-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1a3024 !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}
.rep-text {
    font-size: 0.88rem !important;
    color: #444 !important;
    line-height: 1.7 !important;
    margin: 0 0 14px !important;
}
.rep-signature {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-top: 1px solid #edf2ee !important;
    padding-top: 10px !important;
}
.rep-corp {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: #1a3024 !important;
}
.rep-role {
    font-size: 0.82rem !important;
    color: #666 !important;
}

@media screen and (max-width: 768px) {
    .special-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .special-title {
        font-size: 1.05rem !important;
    }
    .rep-card {
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 16px !important;
        text-align: center !important;
    }
    .rep-content {
        text-align: left !important;
    }
    .rep-title {
        font-size: 1.02rem !important;
    }
    .rep-text {
        font-size: 0.84rem !important;
    }
}

@media screen and (max-width: 480px) {
    .special-cases-card {
        padding: 20px 12px !important;
    }
    .special-item {
        padding: 12px 10px !important;
    }
    .tax-sample-card {
        padding: 14px 10px !important;
    }
    .rep-card {
        padding: 20px 14px !important;
    }
}

/* ==========================================================================
   2026 追加: 紹介パートナーページ (partner.html) & トップページ導線バナー
   ========================================================================== */

/* --- トップページ用: パートナー導線バナー (.partner-cta-banner) --- */
.partner-cta-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f4fbf6 100%) !important;
    border: 2px solid #a3d9b5 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    margin: 32px auto 0 !important;
    box-shadow: 0 8px 24px rgba(43, 122, 75, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.partner-cta-content {
    flex: 1 1 auto !important;
}
.partner-cta-badge {
    display: inline-block !important;
    background: #175430 !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.05em !important;
}
.partner-cta-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #1e3a2b !important;
    margin: 0 0 6px !important;
    line-height: 1.4 !important;
}
.partner-cta-desc {
    font-size: 0.84rem !important;
    color: #555555 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.partner-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #06C755 0%, #00B900 100%) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    padding: 14px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(6, 199, 85, 0.3) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    flex-shrink: 0 !important;
}
.partner-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(6, 199, 85, 0.4) !important;
}

@media screen and (max-width: 768px) {
    .partner-cta-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 16px !important;
        margin: 24px 0 0 !important;
    }
    .partner-cta-title {
        font-size: 1.05rem !important;
    }
    .partner-cta-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }
}

/* --- partner.html 専用スタイル --- */
.partner-topbar {
    background: #1e3a2b;
    color: #ffffff;
    padding: 10px 0;
    font-size: 0.82rem;
}
.partner-topbar-inner {
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.partner-back-btn {
    color: #a3d9b5;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}
.partner-back-btn:hover {
    color: #ffffff;
    text-decoration: underline;
}
.partner-target-pill {
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
}

.partner-header {
    background: #ffffff;
    border-bottom: 1px solid #e0eae2;
    padding: 16px 0;
}
.partner-header-content {
    display: flex;
    justify-content: center; gap: 8px;
    align-items: center;
}
.partner-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.partner-logo-img {
    height: 48px;
    width: auto;
}
.partner-logo-sub {
    font-size: 0.95rem;
    font-weight: 800;
    color: #2c3e50;
}
.partner-contact-badge {
    background: #e8f5ec;
    color: #175430;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 2px;
}
.partner-contact-hours {
    font-size: 0.8rem;
    color: #666;
}

/* ヒーロー */
.partner-hero {
    padding: 40px 0 20px;
}
.partner-hero-card {
    background: #ffffff;
    border: 2px solid #cce2d3;
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(43, 122, 75, 0.08);
}
.partner-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e6f7ec;
    color: #06C755;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 6px 18px;
    border-radius: 30px;
    border: 1.5px solid #a8e5be;
    margin-bottom: 16px;
}
.partner-hero-title {
    font-size: 2rem;
    font-weight: 900;
    color: #1e3a2b;
    line-height: 1.35;
    margin-bottom: 14px;
}
.partner-hero-lead {
    font-size: 1rem;
    color: #444;
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto 30px;
}

.partner-target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;
}
.partner-target-item {
    background: #f7faf8;
    border: 1.5px solid #d5e5db;
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.target-icon {
    width: 48px;
    height: 48px;
    background: #eaf5ee;
    color: #2b7a4b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.target-text strong {
    display: block;
    font-size: 0.95rem;
    color: #2c3e50;
    margin-bottom: 2px;
}
.target-text span {
    font-size: 0.78rem;
    color: #666;
    display: block;
    line-height: 1.3;
}

.partner-hero-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.partner-hero-btns .btn {
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 50px;
    text-decoration: none;
}

/* お悩みセクション */
.partner-trouble-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.partner-trouble-card {
    background: #ffffff;
    border: 1.5px solid #e1ebe3;
    border-radius: 16px;
    padding: 24px 20px;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.trouble-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #e67e22;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
}
.trouble-icon {
    font-size: 1.6rem;
    color: #d35400;
    margin-bottom: 10px;
}
.partner-trouble-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 8px;
    line-height: 1.4;
}
.partner-trouble-card p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.partner-solution-banner {
    background: #eaf5ee;
    border: 2px solid #a3d9b5;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}
.solution-banner-icon {
    font-size: 2.2rem;
    color: #06C755;
    flex-shrink: 0;
}
.solution-banner-content h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: #175430;
    margin: 0 0 6px;
}
.solution-banner-content p {
    font-size: 0.88rem;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

/* メリットリスト */
.partner-merits-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}
.partner-merit-box {
    background: #ffffff;
    border: 1.5px solid #d5e5db;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-shadow: 0 4px 16px rgba(43, 122, 75, 0.04);
}
.merit-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #64A86C;
    line-height: 1;
    font-family: sans-serif;
    padding-top: 4px;
    flex-shrink: 0;
}
.merit-body {
    flex: 1 1 auto;
    text-align: left;
}
.merit-badge-tag {
    display: inline-block;
    background: #e8f5ec;
    color: #175430;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.merit-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e3a2b;
    margin-bottom: 8px;
    line-height: 1.4;
}
.merit-desc {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* フローカード */
.partner-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}
.partner-flow-grid .flow-card {
    background: #ffffff;
    border: 1.5px solid #dbeae0;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.partner-flow-grid .flow-step-badge {
    display: inline-block;
    background: #175430;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.partner-flow-grid .flow-icon {
    font-size: 1.8rem;
    color: #64A86C;
    margin-bottom: 12px;
}
.partner-flow-grid h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 8px;
}
.partner-flow-grid p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* フォーム */
.partner-contact-box {
    background: #ffffff;
    border: 2px solid #cce2d3;
    border-radius: 24px;
    padding: 40px 32px;
    max-width: 820px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(43, 122, 75, 0.08);
}
.partner-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
    margin-bottom: 24px;
}
.partner-form-grid .full-width {
    grid-column: span 2;
}
.partner-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.partner-form-grid label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2c3e50;
}
.partner-form-grid label .req {
    background: #e74c3c;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.partner-form-grid input,
.partner-form-grid select,
.partner-form-grid textarea {
    padding: 12px 14px;
    border: 1.5px solid #d0ded4;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fafcfb;
    outline: none;
    transition: border-color 0.2s;
}
.partner-form-grid input:focus,
.partner-form-grid select:focus,
.partner-form-grid textarea:focus {
    border-color: #64A86C;
    background: #ffffff;
}

/* ファイルアップロードUI */
.partner-file-upload {
    border: 2px dashed #a3d9b5;
    border-radius: 12px;
    background: #f7faf8;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.partner-file-upload.dragover {
    background: #e8f5ec;
    border-color: #06C755;
}
.upload-inner .upload-icon {
    font-size: 2rem;
    color: #64A86C;
    margin-bottom: 8px;
}
.upload-text {
    font-size: 0.88rem;
    color: #333;
    margin-bottom: 4px;
}
.upload-hint {
    font-size: 0.75rem;
    color: #888;
}
.file-info-box {
    margin-top: 10px;
    background: #eaf5ee;
    border: 1px solid #b7dfc6;
    border-radius: 8px;
    padding: 8px 14px;
}
.file-item {
    display: flex;
    align-items: center;
    justify-content: center; gap: 8px;
    font-size: 0.84rem;
    color: #175430;
}
.file-remove {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #e74c3c;
    cursor: pointer;
}

.btn-partner-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    margin: 0 auto;
}
.partner-thanks-box {
    text-align: center;
    padding: 40px 20px;
}
.partner-thanks-box .thanks-icon {
    font-size: 3rem;
    color: #06C755;
    margin-bottom: 16px;
}
.partner-thanks-box h3 {
    font-size: 1.4rem;
    color: #1e3a2b;
    margin-bottom: 10px;
}
.partner-thanks-box p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 24px;
}
.partner-back-area {
    margin-top: 30px;
    text-align: center;
    border-top: 1px solid #edf2ee;
    padding-top: 20px;
}
.partner-return-link {
    color: #64A86C;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .partner-hero-title {
        font-size: 1.35rem;
    }
    .partner-hero-lead {
        font-size: 0.88rem;
    }
    .partner-target-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .partner-trouble-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .partner-merit-box {
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
    }
    .merit-num {
        font-size: 1.8rem;
    }
    .merit-title {
        font-size: 1.05rem;
    }
    .partner-flow-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .partner-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .partner-form-grid .full-width {
        grid-column: span 1;
    }
    .partner-contact-box {
        padding: 24px 16px;
    }
}

/* ==========================================================================
   2026 追加: 会社概要 & 信頼と安心の3つのお約束 (.company-section)
   ========================================================================== */
.company-section {
    background: #ffffff !important;
    padding: 60px 0 !important;
    border-top: 1px solid #edf2ee !important;
}

.company-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}

/* 会社情報カード */
.company-card {
    background: #fafcfb !important;
    border: 1.5px solid #d5e5db !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    box-shadow: 0 6px 20px rgba(43, 122, 75, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
}
.company-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #a8e5be !important;
}
.company-card-header i {
    font-size: 1.4rem !important;
    color: #2b7a4b !important;
}
.company-card-header h3 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    margin: 0 !important;
}

.company-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}
.company-table tr {
    border-bottom: 1px solid #e2ece5 !important;
}
.company-table tr:last-child {
    border-bottom: none !important;
}
.company-table th {
    width: 30% !important;
    padding: 12px 10px !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    background: #f0f7f3 !important;
    text-align: left !important;
    vertical-align: top !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}
.company-table td {
    padding: 12px 14px !important;
    color: #444444 !important;
    text-align: left !important;
    vertical-align: top !important;
}
.table-subnote {
    font-size: 0.78rem !important;
    color: #668270 !important;
    display: inline-block !important;
    margin-top: 4px !important;
}

/* 信頼と安心の3つのお約束カード */
.compliance-card {
    background: #f4fbf6 !important;
    border: 2px solid #a3d9b5 !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    box-shadow: 0 6px 20px rgba(43, 122, 75, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
}
.compliance-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #a3d9b5 !important;
}
.compliance-header i {
    font-size: 1.4rem !important;
    color: #06C755 !important;
}
.compliance-header h3 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #175430 !important;
    margin: 0 !important;
}

.compliance-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.compliance-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1px solid #cde5d5 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-align: left !important;
}
.comp-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #eaf5ee !important;
    color: #2b7a4b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.comp-text h4 {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    margin: 0 0 4px !important;
}
.comp-text p {
    font-size: 0.82rem !important;
    color: #555555 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 768px) {
    .company-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .company-card,
    .compliance-card {
        padding: 20px 16px !important;
    }
    .company-table th {
        width: 32% !important;
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
    }
    .company-table td {
        padding: 10px 10px !important;
        font-size: 0.82rem !important;
    }
    .compliance-item {
        padding: 12px 12px !important;
        gap: 10px !important;
    }
    .comp-text h4 {
        font-size: 0.9rem !important;
    }
    .comp-text p {
        font-size: 0.78rem !important;
    }
}

/* ==========================================================================
   2026 追加: よくある質問 (FAQ) & LINEトークやり取り見本
   ========================================================================== */

/* --- 1. よくある質問 (FAQ) アコーディオン --- */
.faq-section {
    background: #fdfefd !important;
    padding: 60px 0 !important;
    border-top: 1px solid #edf2ee !important;
}
.faq-container {
    max-width: 860px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.faq-item {
    background: #ffffff !important;
    border: 1.5px solid #d5e5db !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(43, 122, 75, 0.04) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.faq-item:hover {
    border-color: #a3d9b5 !important;
}
.faq-item.active {
    border-color: #64A86C !important;
    box-shadow: 0 6px 20px rgba(43, 122, 75, 0.08) !important;
}

.faq-question {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 20px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    outline: none !important;
    transition: background-color 0.2s !important;
}
.faq-question:hover {
    background-color: #f7faf8 !important;
}
.faq-q-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #2b7a4b !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.faq-q-text {
    flex: 1 1 auto !important;
    line-height: 1.45 !important;
}
.faq-toggle-icon {
    font-size: 0.95rem !important;
    color: #64A86C !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}
.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg) !important;
    color: #2b7a4b !important;
}

.faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease !important;
    padding: 0 22px !important;
    background: #fafdfb !important;
}
.faq-item.active .faq-answer {
    max-height: 600px !important;
    opacity: 1 !important;
    padding: 10px 22px 22px !important;
    border-top: 1px dashed #d5e5db !important;
}
.faq-a-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding-top: 8px !important;
}
.faq-a-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #e67e22 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.faq-a-text {
    flex: 1 1 auto !important;
    text-align: left !important;
}
.faq-a-text p {
    font-size: 0.92rem !important;
    color: #444444 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* --- 2. LINEトーク画面風やり取り見本 (.line-chat-preview) --- */
.line-chat-preview {
    background: #ffffff !important;
    border: 1.5px solid #d2ded5 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin: 18px 0 20px !important;
    text-align: left !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.chat-preview-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.chat-preview-badge {
    background: #06C755 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 2px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.chat-preview-header h4 {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
}

.line-mock-screen {
    background: #7494c0 !important; /* 本格LINEトーク背景カラー */
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.1) !important;
}
.line-mock-header {
    background: #5b79a5 !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
}
.line-header-status {
    color: #98ff98 !important;
    font-size: 0.7rem !important;
}
.line-mock-body {
    padding: 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* メッセージ共通 */
.chat-msg {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    max-width: 90% !important;
}
.chat-bubble {
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}
.chat-time {
    font-size: 0.65rem !important;
    color: #eaf0f8 !important;
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
}

/* ユーザー（右側） */
.chat-msg-user {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}
.user-bubble {
    background: #85e249 !important;
    color: #111111 !important;
    border-top-right-radius: 2px !important;
}
.chat-img-thumb {
    margin-top: 6px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 0.74rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 土地助スタッフ（左側） */
.chat-msg-staff {
    align-self: flex-start !important;
    align-items: flex-start !important;
}
.staff-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #2b7a4b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
.staff-bubble-wrap {
    display: flex !important;
    flex-direction: column !important;
}
.staff-name {
    font-size: 0.68rem !important;
    color: #ffffff !important;
    margin-bottom: 3px !important;
    font-weight: 700 !important;
}
.staff-bubble {
    background: #ffffff !important;
    color: #222222 !important;
    border-top-left-radius: 2px !important;
}
.staff-bubble strong {
    color: #c0392b !important;
}

.chat-preview-footer {
    background: #f4fbf6 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    color: #1d6e3f !important;
}
.chat-preview-footer p {
    margin: 0 !important;
}

/* スマホ表示対応 */
@media screen and (max-width: 768px) {
    .faq-question {
        padding: 16px 14px !important;
        font-size: 0.95rem !important;
        gap: 10px !important;
    }
    .faq-q-badge, .faq-a-badge {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }
    .faq-answer {
        padding: 0 14px !important;
    }
    .faq-item.active .faq-answer {
        padding: 8px 14px 18px !important;
    }
    .faq-a-text p {
        font-size: 0.85rem !important;
    }
    .chat-bubble {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }
}

/* よくある質問ナビボタンのハイライト */
.chip-faq-highlight {
    background-color: #fdfaf0 !important;
    border-color: #f5c882 !important;
    color: #9c5c00 !important;
}
.chip-faq-highlight:hover {
    background-color: #fcf4dc !important;
    border-color: #e6a838 !important;
    color: #7a4600 !important;
}

/* PC閲覧時: スクロールしても目次ナビを隠さず常時固定表示 */
@media screen and (min-width: 769px) {
    .nav-bar-wrapper,
    .nav-bar-wrapper.nav-hidden {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
    }
}

/* ==========================================================================
   2026 追加: 4大保証エンブレム / スクロールスパイ / プライバシーモーダル / LINE安心注記
   ========================================================================== */

/* 1. ファーストビュー: 安心の4大保証エンブレム (.hero-trust-badges) */
.hero-trust-badges {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin: 20px 0 24px !important;
    text-align: left !important;
}
.trust-badge-item {
    background: #ffffff !important;
    border: 1.5px solid #d4e5da !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 14px rgba(43, 122, 75, 0.04) !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.trust-badge-item:hover {
    transform: translateY(-2px) !important;
    border-color: #64A86C !important;
    box-shadow: 0 6px 18px rgba(43, 122, 75, 0.1) !important;
}
.trust-badge-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #eaf5ee !important;
    color: #2b7a4b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
}
.trust-badge-text {
    display: flex !important;
    flex-direction: column !important;
}
.trust-tag {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #06C755 !important;
    letter-spacing: 0.05em !important;
}
.trust-badge-text strong {
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    color: #1e3a2b !important;
    line-height: 1.25 !important;
    margin: 1px 0 !important;
}
.trust-badge-text small {
    font-size: 0.72rem !important;
    color: #666666 !important;
    line-height: 1.2 !important;
}

@media screen and (max-width: 768px) {
    .hero-trust-badges {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 16px 0 20px !important;
    }
    .trust-badge-item {
        padding: 10px 10px !important;
        gap: 8px !important;
    }
    .trust-badge-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }
    .trust-badge-text strong {
        font-size: 0.84rem !important;
    }
    .trust-badge-text small {
        font-size: 0.68rem !important;
    }
}

/* 2. 目次ナビゲーション: スクロールスパイ現在地アクティブ (.is-active) */
.nav-btn-chip.is-active {
    background: #e8f5ec !important;
    border-color: #2b7a4b !important;
    color: #175430 !important;
    box-shadow: 0 4px 12px rgba(43, 122, 75, 0.2) !important;
    transform: translateY(-1px) !important;
}
.nav-btn-chip.chip-line.is-active {
    background: #00B900 !important;
    border-color: #008f00 !important;
    box-shadow: 0 4px 14px rgba(6, 199, 85, 0.4) !important;
}

/* 3. LINEボタン直下: 安心マイクロコピー (.line-micro-note) */
.line-micro-note {
    font-size: 0.78rem !important;
    color: #4a6b57 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 8px auto 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
.line-micro-note i {
    color: #2b7a4b !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

/* 4. フッター: プライバシーポリシーリンク & モーダル */
.footer-bottom-links {
    margin-bottom: 8px !important;
}
.privacy-modal-trigger {
    color: #64A86C !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}
.privacy-modal-trigger:hover {
    color: #2b7a4b !important;
}

/* モーダル本体 */
.privacy-modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 10000 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 0.25s ease !important;
}
.privacy-modal-backdrop.is-open {
    display: flex !important;
    opacity: 1 !important;
}
.privacy-modal-dialog {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 680px !important;
    width: 100% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}
@keyframes modalSlideUp {
    from {
        transform: translateY(20px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}
.privacy-modal-header {
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid #edf2ee !important;
    position: relative !important;
    text-align: left !important;
}
.privacy-header-badge {
    display: inline-block !important;
    background: #e8f5ec !important;
    color: #175430 !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
}
.privacy-modal-header h3 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    margin: 0 !important;
}
.privacy-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    font-size: 1.8rem !important;
    color: #888888 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
}
.privacy-modal-close:hover {
    color: #111111 !important;
}
.privacy-modal-body {
    padding: 20px 24px !important;
    overflow-y: auto !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    text-align: left !important;
}
.privacy-modal-body h4 {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #1e3a2b !important;
    margin: 18px 0 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #f0f4f1 !important;
}
.privacy-modal-body h4:first-of-type {
    margin-top: 12px !important;
}
.privacy-modal-body p {
    margin: 0 0 10px !important;
}
.privacy-modal-body ul {
    margin: 0 0 12px 20px !important;
    padding: 0 !important;
}
.privacy-modal-body li {
    margin-bottom: 4px !important;
}
.privacy-contact-box {
    background: #f7faf8 !important;
    border: 1px solid #dce8e0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-top: 10px !important;
    font-size: 0.82rem !important;
}
.privacy-contact-box p {
    margin: 0 0 2px !important;
}
.privacy-modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid #edf2ee !important;
    text-align: right !important;
    background: #fafcfb !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.btn-privacy-close {
    padding: 8px 24px !important;
    font-size: 0.88rem !important;
    border-radius: 30px !important;
    cursor: pointer !important;
}

/* ==========================================================================
   2026 追加: 本格ゴールドメダル・4大安心エンブレム (.hero-medal-section)
   ========================================================================== */
.hero-medal-section {
    background: linear-gradient(180deg, #fffef9 0%, #fbf8ee 100%) !important;
    border: 2px solid #e8d7a7 !important;
    border-radius: 22px !important;
    padding: 24px 20px 20px !important;
    margin: 24px 0 28px !important;
    box-shadow: 0 10px 28px rgba(184, 134, 11, 0.08) !important;
    text-align: center !important;
}

.medal-header-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #f7ecd2 0%, #fae6b2 100%) !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    border: 1px solid #e2cb8f !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.1) !important;
}
.medal-laurel-icon {
    color: #b8860b !important;
    font-size: 1.1rem !important;
}
.medal-section-title {
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    color: #634700 !important;
    letter-spacing: 0.04em !important;
}

.hero-medal-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}

/* 各メダルカード */
.gold-medal-card {
    background: #ffffff !important;
    border: 1.5px solid #ecdca8 !important;
    border-radius: 18px !important;
    padding: 18px 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.06) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s !important;
}
.gold-medal-card:hover {
    transform: translateY(-4px) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.16) !important;
}

/* まん丸のゴールドコイン（純金メダル風） */
.medal-coin-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}
.gold-coin {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse at 35% 35%, #FFF8C6 0%, #F5CE38 40%, #C49200 80%, #9E7400 100%) !important;
    border: 3px solid #FFFDE8 !important;
    box-shadow: 
        0 6px 14px rgba(158, 116, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}
.coin-inner {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.coin-icon {
    font-size: 1.35rem !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 3px rgba(110, 80, 0, 0.4)) !important;
}

/* メダルのリボン */
.coin-ribbon {
    background: linear-gradient(135deg, #c0392b 0%, #8e2115 100%) !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    margin-top: -9px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(142, 33, 21, 0.35) !important;
    letter-spacing: 0.05em !important;
    border: 1px solid #ffd0d0 !important;
}

.medal-card-body {
    width: 100% !important;
}
.medal-main-title {
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    color: #1e3a2b !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
}
.medal-sub-desc {
    font-size: 0.73rem !important;
    color: #666666 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* スマホ表示対応 (2列×2行) */
@media screen and (max-width: 768px) {
    .hero-medal-section {
        padding: 18px 12px 16px !important;
        margin: 18px 0 22px !important;
        border-radius: 18px !important;
    }
    .hero-medal-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .gold-medal-card {
        padding: 14px 8px 12px !important;
        border-radius: 14px !important;
    }
    .gold-coin {
        width: 52px !important;
        height: 52px !important;
    }
    .coin-inner {
        width: 40px !important;
        height: 40px !important;
    }
    .coin-icon {
        font-size: 1.15rem !important;
    }
    .coin-ribbon {
        font-size: 0.62rem !important;
        padding: 1px 8px !important;
        margin-top: -7px !important;
    }
    .medal-main-title {
        font-size: 0.86rem !important;
    }
    .medal-sub-desc {
        font-size: 0.68rem !important;
    }
}

/* ========================================================
   📲 LINE相談の3ステップかんたん図解
   ======================================================== */
.line-steps-infographic {
    display: flex;
    align-items: stretch;
    justify-content: center; gap: 8px;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.25rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #edf2f7;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.step-badge-pill {
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 20px;
    color: #ffffff;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.pill-step-1 {
    background: linear-gradient(135deg, #10b981, #059669);
}

.pill-step-2 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.pill-step-3 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.step-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bg-line-green {
    background: #ecfdf5;
    color: #06C755;
    border: 2px solid #a7f3d0;
}

.bg-camera-blue {
    background: #eff6ff;
    color: #2563eb;
    border: 2px solid #bfdbfe;
}

.bg-bolt-gold {
    background: #fefce8;
    color: #d97706;
    border: 2px solid #fde68a;
}

.step-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.4rem;
}

.step-card-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

.step-highlight {
    display: inline-block;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.step-arrow-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.1rem;
    padding: 0 0.25rem;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .line-steps-infographic {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    .step-arrow-divider {
        transform: rotate(90deg);
        padding: 0.2rem 0;
    }
}

/* ========================================================
   📄 印刷用ボタン＆親族会議案内バナー
   ======================================================== */
.header-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 12px;
    vertical-align: middle;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-print-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.family-print-callout {
    display: flex;
    align-items: center;
    justify-content: center; gap: 8px;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border: 1.5px dashed #cbd5e1;
    border-radius: 18px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.family-print-callout .callout-icon {
    font-size: 2.2rem;
    color: #059669;
    flex-shrink: 0;
}

.family-print-callout .callout-body {
    flex: 1;
}

.family-print-callout .callout-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.35rem;
}

.family-print-callout .callout-desc {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.print-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
    transition: all 0.2s ease;
}

.print-action-btn:hover {
    background: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
}

@media (max-width: 768px) {
    .family-print-callout {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        gap: 1rem;
    }
    .print-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================================
   🖨️ A4きれいな印刷スタイル (@media print)
   ======================================================== */
@media print {
    /* Hide floating, sticky, interactive UI elements */
    .print-hide,
    .header-sticky,
    .nav-bar-wrapper,
    .nav-buttons,
    .fixed-cta,
    .pc-float-line,
    .scroll-top-btn,
    .faq-toggle-icon,
    .privacy-modal,
    button:not(.print-keep),
    .video-wrapper,
    iframe {
        display: none !important;
    }

    /* Print color scheme & layout */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 10.5pt !important;
        line-height: 1.5 !important;
    }

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

    /* Clean header for paper */
    .header {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 2px solid #166534 !important;
        padding-bottom: 12px !important;
        margin-bottom: 20px !important;
    }

    .super-wide-brush-logo {
        max-width: 240px !important;
    }

    /* Avoid page-breaks inside content blocks */
    .section,
    .trouble-card,
    .case-card,
    .guarantee-item,
    .comparison-table-wrapper,
    .flow-step-item,
    .faq-item,
    .company-table,
    .contact-box {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Automatically expand all FAQ answers on print */
    .faq-answer {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Clean link presentation */
    a {
        text-decoration: none !important;
        color: inherit !important;
    }

    /* Print page margins */
    @page {
        margin: 15mm 12mm 15mm 12mm;
        size: A4 portrait;
    }
}


/* 電話番号のアンダーバー完全消去＆通常テキスト化 */
.plain-tel-text,
a[href^="tel"],
.company-table td a[href^="tel"],
.footer-info a[href^="tel"] {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 電話番号: アンダーバーなし＆周囲のテキストと自然に馴染む太さ（悪目立ち防止） */
.plain-tel-text {
    color: inherit !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    cursor: default !important;
    display: inline-block;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* 📍 iOS Safari による自動住所リンク・電話リンク化の完全無効化 */
[x-apple-data-detectors],
[x-apple-data-detectors-type="address"],
[x-apple-data-detectors-type="telephone"],
a[href^="x-apple-data-detectors"],
.plain-address-text,
.plain-address-text a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    pointer-events: none !important;
    cursor: default !important;
    box-shadow: none !important;
}


/* ========================================================
   📖 マンガでわかる！引き取り事例セクション
   ======================================================== */
.manga-section {
    background: #fdfbf7;
    border-top: 1px solid #f1ece4;
    border-bottom: 1px solid #f1ece4;
    padding: 4.5rem 0;
}

.manga-lead-tag {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 5px 16px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.25);
}



.manga-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    margin-top: 2.5rem;
}

/* --- マンガ事例 タブ切り替えUI --- */
.manga-tab-header-wrap {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.manga-tab-instruction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #475569;
    background: #f1f5f9;
    padding: 6px 16px;
    border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.manga-tab-instruction i {
    color: #059669;
    animation: bounceHorizontal 1.8s infinite;
}

@keyframes bounceHorizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.manga-tab-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 50px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    max-width: 680px;
    width: 100%;
}

.tab-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.manga-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 40px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    text-align: center;
    box-sizing: border-box;
}

.manga-tab-btn:hover {
    color: #0f172a;
}

.manga-tab-btn.active {
    background: #ffffff;
    color: #059669;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0,0,0,0.04);
}

.manga-tab-btn .tab-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.manga-tab-btn.active .tab-badge {
    background: #dcfce7;
    color: #15803d;
}

.manga-tab-btn:not(.active) .tab-badge {
    background: #e2e8f0;
    color: #64748b;
}

.manga-tab-panel {
    display: none;
}

.manga-tab-panel.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    animation: mangaFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mangaFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.manga-panel-card {
    background: #ffffff;
    border: 2.5px solid #1e293b;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.manga-panel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.12);
}

.panel-header {
    background: #1e293b;
    color: #ffffff;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.panel-num {
    background: #facc15;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 2px 9px;
    border-radius: 10px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.panel-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

.panel-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.panel-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.manga-panel-card:hover .panel-img {
    transform: scale(1.02);
}

/* 漫画オノマトペ（擬音） */
.manga-onomatopoeia {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 900;
    pointer-events: none;
    z-index: 2;
}

.ono-dark {
    font-size: 2.2rem;
    color: #475569;
    transform: rotate(-8deg);
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}

.ono-shock {
    font-size: 2.4rem;
    color: #dc2626;
    transform: rotate(10deg);
    text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff;
}

.ono-light {
    font-size: 2.2rem;
    color: #059669;
    transform: rotate(-6deg);
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}

.ono-happy {
    font-size: 2.4rem;
    color: #ea580c;
    transform: rotate(8deg);
    text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff;
}

/* 漫画の吹き出し・ダイアログ */
.panel-dialogue-wrap {
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.manga-balloon {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
    position: relative;
}

.balloon-speaker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #475569;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 0.35rem;
}

.manga-balloon p {
    font-size: 0.88rem;
    color: #1e293b;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

.balloon-despair {
    background: #fef2f2;
    border-color: #fca5a5;
}

.balloon-despair .balloon-speaker {
    background: #fee2e2;
    color: #b91c1c;
}

.balloon-surprise {
    background: #fefce8;
    border-color: #fde047;
}

.balloon-surprise .balloon-speaker {
    background: #fef08a;
    color: #854d0e;
}

.balloon-success {
    background: #f0fdf4;
    border-color: #86efac;
}

.balloon-success .balloon-speaker {
    background: #dcfce7;
    color: #15803d;
}

/* LINE返信風ボックス */
.manga-line-reply-box {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
}

.mini-staff-reply {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.staff-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    background: #06C755;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.reply-text {
    font-size: 0.85rem;
    color: #14532d;
    line-height: 1.45;
    margin: 0;
}

.reply-text strong {
    color: #dc2626;
    font-weight: 900;
    background: #fef08a;
    padding: 0 4px;
    border-radius: 3px;
}

.manga-narration-banner {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #ffffff;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 8px;
}

.manga-narration-banner i {
    color: #facc15;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* マンガ直下のLINE導線バナー */
.manga-bottom-cta {
    margin-top: 2.5rem;
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    box-shadow: 0 10px 25px rgba(22, 101, 52, 0.25);
    color: #ffffff;
}

.cta-inner-content {
    display: flex;
    align-items: center;
    justify-content: center; gap: 8px;
    gap: 1.5rem;
}

.cta-pill-tag {
    display: inline-block;
    background: #facc15;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 14px;
    margin-bottom: 0.4rem;
}

.cta-heading {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
}

.cta-sub {
    font-size: 0.88rem;
    color: #dcfce7;
    margin: 0;
    line-height: 1.45;
}

.btn-manga-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #06C755;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 900;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(6, 199, 85, 0.4);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-manga-cta:hover {
    background: #05b34c;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(6, 199, 85, 0.5);
    color: #ffffff;
}

@media (max-width: 768px) {
    .manga-tab-nav {
        flex-direction: column;
        border-radius: 16px;
        padding: 5px;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .manga-tab-btn {
        width: 100%;
        padding: 10px 14px;
        font-size: 0.88rem;
        border-radius: 12px;
        justify-content: center; gap: 8px;
        box-sizing: border-box;
    }
    .manga-tab-instruction {
        font-size: 0.8rem;
        padding: 5px 12px;
    }
    .manga-tab-panel.active {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .manga-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .cta-inner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .btn-manga-cta {
        width: 100%;
        justify-content: center;
    }
    .cta-heading {
        font-size: 1.1rem;
    }
}


/* ========================================================
   📌 常時追従（スティッキー）現在地ナビゲーションバー
   ======================================================== */
.nav-bar-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    padding: 0.35rem 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.nav-bar-wrapper.nav-hidden {
    transform: none !important;
    opacity: 1 !important;
}

.nav-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 0.75rem;
    display: flex;
    justify-content: center;
}

/* 💻 PC版（769px以上）: 切れることなく全項目が綺麗に並ぶ（折り返し対応） */
@media (min-width: 769px) {
    .nav-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* 切れるのを防止 */
        justify-content: center !important;
        align-items: center !important;
        gap: 0.45rem 0.6rem !important;
        width: 100% !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
        padding: 0.15rem 0 !important;
        overflow-x: visible !important;
    }

    .nav-btn-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        background-color: #f8fafc !important;
        color: #475569 !important;
        border: 1.5px solid #e2e8f0 !important;
        padding: 0.38rem 0.8rem !important;
        border-radius: 30px !important;
        font-size: 0.83rem !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    }
}

/* 📱 スマホ版（768px以下）: スワイプで快適な横スクロールバー */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 0.4rem !important;
    }

    .nav-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 0.2rem 0.25rem !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .nav-btn-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        background-color: #f8fafc !important;
        color: #475569 !important;
        border: 1.5px solid #e2e8f0 !important;
        padding: 0.35rem 0.72rem !important;
        border-radius: 30px !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    }
}

.nav-btn-chip:hover {
    background-color: #ffffff !important;
    border-color: #059669 !important;
    color: #059669 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.15) !important;
}

/* 📌 スティッキー追従を阻害する overflow-x: hidden を完全に clip へ統一 */
html, body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* 🌟 現在地ハイライト（スクロールスパイで今見てる場所）: 圧倒的に目立つ点灯エフェクト */
#sticky-nav-bar .nav-btn-chip.is-active,
.nav-btn-chip.is-active {
    background-color: #059669 !important;
    background-image: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.45), 0 0 0 2.5px #10b981 !important;
    transform: translateY(-2px) scale(1.05) !important;
    position: relative !important;
    z-index: 5 !important;
}

#sticky-nav-bar .nav-btn-chip.is-active .chip-txt,
.nav-btn-chip.is-active .chip-txt {
    color: #ffffff !important;
    font-weight: 900 !important;
}

#sticky-nav-bar .nav-btn-chip.is-active .chip-icon,
.nav-btn-chip.is-active .chip-icon {
    transform: scale(1.2) !important;
    display: inline-block !important;
}

/* マンガ事例用のアクティブ点灯（プレミアム・アンバーゴールド） */
#sticky-nav-bar .nav-btn-chip.chip-manga-highlight.is-active,
.nav-btn-chip.chip-manga-highlight.is-active {
    background-color: #d97706 !important;
    background-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.45), 0 0 0 2.5px #fbbf24 !important;
}

/* LINE相談用のアクティブ点灯（LINE公式グリーン） */
#sticky-nav-bar .nav-btn-chip.chip-line.is-active,
.nav-btn-chip.chip-line.is-active {
    background-color: #06C755 !important;
    background-image: linear-gradient(135deg, #06C755 0%, #05a346 100%) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(6, 199, 85, 0.45), 0 0 0 2.5px #34d399 !important;
}