/*
Theme Name: Original Housing Guide
Version: 1.0
*/

/* ===============================
   Reset / Base
================================ */

:root {
    --hatano-bg: #f8f6f3;
    --hatano-bg-light: #fdfbf7;
    --hatano-white: #ffffff;
    --hatano-text: #4a4a4a;
    --hatano-muted: #8a8a8a;
    --hatano-green: #6b8e6f;
    --hatano-green-dark: #5a7a5e;
    --hatano-green-soft: #7d8a7f;
    --hatano-brown: #3d3226;
    --hatano-border: #d9d6d1;
    --hatano-footer: #4a4a4a;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--hatano-text);
    background: var(--hatano-bg);
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.hatano-inner {
    width: min(1232px, calc(100% - 32px));
    margin: 0 auto;
}

.hatano-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.hatano-btn-primary {
    background: linear-gradient(90deg, var(--hatano-green) 0%, var(--hatano-green-dark) 100%);
    color: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(107, 142, 111, 0.3),
                0 8px 10px -6px rgba(107, 142, 111, 0.3);
}

.hatano-btn-outline {
    background: #ffffff;
    color: var(--hatano-green);
    border: 2px solid var(--hatano-green);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

/* ===============================
   Header
================================ */

.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--hatano-border);
}

.site-header-inner {
    width: min(1232px, calc(100% - 32px));
    height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo-main {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
    color: var(--hatano-text);
}

.site-logo-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--hatano-muted);
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav a {
    font-size: 16px;
    color: var(--hatano-text);
}

/* ===============================
   Hero
================================ */

.hatano-hero {
    padding: 48px 0 72px;
    background: linear-gradient(155deg, #f5f1e8 0%, #fdfbf7 50%, #e8e3d8 100%);
    overflow: hidden;
}

.hatano-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52%;
    gap: 48px;
    align-items: center;
}

.hatano-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 24px;
    padding: 0 24px;
    border-radius: 999px;
    border: 2px solid rgba(107, 142, 111, 0.2);
    background: rgba(255, 255, 255, 0.8);
    color: var(--hatano-green);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

.hatano-hero-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--hatano-green);
    opacity: 0.66;
}

.hatano-hero-lead {
    font-size: 40px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.hatano-hero-title {
    font-size: 60px;
    line-height: 1.18;
    margin-bottom: 28px;
}

.hatano-hero-title .small {
    font-size: 40px;
}

.hatano-hero-text {
    margin: 0;
    max-width: 680px;
    font-size: 20px;
    line-height: 1.65;
    color: #8b7d6b;
}

.hatano-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.hatano-hero-image {
    min-height: 450px;
    border: 2px dashed rgba(107, 142, 111, 0.2);
    border-radius: 24px;
    overflow: hidden;
    background: #e8e3d8;
}

.hatano-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
}

/* ===============================
   Quick Nav
================================ */

.hatano-quick-nav {
    padding: 56px 0 64px;
    background: var(--hatano-bg);
}

.hatano-quick-label {
    margin: 0 0 32px;
    color: var(--hatano-muted);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hatano-quick-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: start;
}

.hatano-quick-item {
    min-height: 150px;
    padding: 24px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(107, 142, 111, 0.18);
    box-shadow: 0 10px 25px rgba(61, 50, 38, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: center;
    color: var(--hatano-text);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hatano-quick-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(61, 50, 38, 0.1);
}

.hatano-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #5b7b5f;
    font-size: 28px;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .hatano-quick-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .hatano-quick-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hatano-quick-item {
        min-height: 132px;
        padding: 20px 10px;
        font-size: 12px;
    }
}

/* ===============================
   Sections
================================ */

.hatano-section {
    padding: 64px 0 88px;
    background: #ffffff;
}

.hatano-section.alt {
    background: var(--hatano-bg-light);
}

.hatano-section-heading {
    margin-bottom: 40px;
}

.hatano-section-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--hatano-text);
}

.hatano-section-subtitle {
    margin: 18px 0 0;
    font-size: 20px;
    color: var(--hatano-muted);
}

/* ===============================
   Comparison
================================ */

.hatano-compare-table-wrap {
    overflow-x: auto;
}

.hatano-compare-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}

.hatano-compare-table th,
.hatano-compare-table td {
    border: 1px solid var(--hatano-green-dark);
    padding: 22px 24px;
    vertical-align: middle;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
}

.hatano-compare-table th {
    font-weight: 700;
}

.hatano-compare-table thead th:first-child,
.hatano-compare-table tbody th {
    width: 200px;
}

.hatano-company-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hatano-company-head img {
    width: 60px;
    height: 58px;
    object-fit: cover;
    background: #d9d9d9;
}

.hatano-company-head p {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hatano-muted);
}

.hatano-company-head strong {
    display: block;
    font-size: 20px;
    line-height: 1.4;
}

.hatano-price {
    display: block;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

.hatano-compare-buttons {
    width: min(1007px, 100%);
    margin: 44px 0 0 auto;
}

.hatano-compare-button-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 69px;
}

.hatano-compare-button-row + .hatano-compare-button-row {
    margin-top: 12px;
}

.hatano-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.hatano-small-btn-outline {
    background: #ffffff;
    border: 1px solid var(--hatano-border);
}

.hatano-small-btn-fill {
    background: var(--hatano-green-soft);
    color: #ffffff;
}

/* ===============================
   Footer
================================ */

.site-footer {
    background: var(--hatano-footer);
    color: #ffffff;
    padding: 64px 0 32px;
}

.site-footer-inner {
    width: min(1232px, calc(100% - 32px));
    margin: 0 auto;
}

.site-footer-top {
    display: grid;
    grid-template-columns: 1fr 284px 284px;
    gap: 32px;
}

.site-footer h3,
.site-footer h4 {
    margin: 0 0 16px;
    color: #ffffff;
}

.site-footer p,
.site-footer a,
.site-footer li {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 32px;
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

/* ===============================
   Responsive
================================ */

@media (max-width: 1024px) {
    .hatano-hero-inner {
        grid-template-columns: 1fr;
    }

    .hatano-hero-title {
        font-size: 48px;
    }

    .hatano-quick-list {
        flex-wrap: wrap;
    }

    .site-footer-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .site-header-inner {
        height: auto;
        padding: 16px 0;
        align-items: flex-start;
        gap: 16px;
        flex-direction: column;
    }

    .site-nav ul {
        flex-wrap: wrap;
        gap: 16px;
    }

    .hatano-hero {
        padding: 48px 0;
    }

    .hatano-hero-lead {
        font-size: 26px;
    }

    .hatano-hero-title {
        font-size: 36px;
    }

    .hatano-hero-title .small {
        font-size: 24px;
    }

    .hatano-hero-text {
        font-size: 15px;
    }

    .hatano-hero-buttons {
        flex-direction: column;
    }

    .hatano-btn {
        width: 100%;
        min-height: 56px;
        font-size: 14px;
    }

   .hatano-hero-image,
.hatano-hero-image img {
    min-height: 420px;
}

.hatano-hero-image {
    border-radius: 24px;
}

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

    .hatano-quick-item {
        width: auto;
    }

    .hatano-section-title {
        font-size: 24px;
    }

    .hatano-section-subtitle {
        font-size: 15px;
    }

    .hatano-compare-button-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .site-footer-bottom {
        flex-direction: column;
    }
}

/* ===============================
   Quick Navigation
================================ */

.hatano-quick-nav {
    padding: 48px 0 56px;
    background: var(--hatano-bg);
}

.hatano-quick-label {
    margin: 0 0 32px;
    color: var(--hatano-muted);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hatano-quick-list {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.hatano-quick-item {
    width: 150px;
    min-height: 89px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--hatano-text);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.hatano-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #5b7b5f;
    font-size: 28px;
    opacity: 0.6;
}

/* ===============================
   Section Common
================================ */

.hatano-section {
    padding: 64px 0 88px;
    background: #ffffff;
}

.hatano-section-heading {
    margin-bottom: 40px;
}

.hatano-section-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--hatano-text);
}

.hatano-section-subtitle {
    margin: 18px 0 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--hatano-muted);
}

/* ===============================
   Comparison
================================ */

.hatano-comparison {
    background: #ffffff;
}

.hatano-compare-table-wrap {
    overflow-x: auto;
}

.hatano-compare-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}

.hatano-compare-table th,
.hatano-compare-table td {
    border: 1px solid #5a7a5e;
    padding: 20px 24px;
    vertical-align: middle;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
    color: var(--hatano-text);
}

.hatano-compare-table th {
    font-weight: 700;
}

.hatano-compare-table thead th:first-child,
.hatano-compare-table tbody th {
    width: 200px;
}

.hatano-company-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hatano-company-head img {
    width: 60px;
    height: 58px;
    object-fit: cover;
    background: #d9d9d9;
    flex-shrink: 0;
}

.hatano-company-head p {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hatano-muted);
}

.hatano-company-head strong {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    color: var(--hatano-text);
}

.hatano-price {
    display: block;
    margin-bottom: 6px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

.hatano-compare-table td span {
    display: block;
    font-size: 14px;
    line-height: 1.6;
}

.hatano-compare-buttons {
    width: min(1007px, 100%);
    margin: 44px 0 0 auto;
}

.hatano-compare-button-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 69px;
}

.hatano-compare-button-row + .hatano-compare-button-row {
    margin-top: 12px;
}

.hatano-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
}

.hatano-small-btn-outline {
    background: #ffffff;
    color: var(--hatano-text);
    border: 1px solid var(--hatano-border);
}

.hatano-small-btn-fill {
    background: var(--hatano-green-soft);
    color: #ffffff;
    border: 1px solid var(--hatano-green-soft);
}

/* ===============================
   Points
================================ */

.hatano-points {
    background: #ffffff;
}

.hatano-point-list {
    border-top: 1px solid var(--hatano-border);
}

.hatano-point-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    padding: 33px 0 32px;
    border-bottom: 1px solid var(--hatano-border);
}

.hatano-point-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b7b5f;
    font-size: 56px;
    opacity: 0.7;
}

.hatano-point-number {
    margin: 0 0 4px;
    color: var(--hatano-muted);
    font-size: 12px;
    line-height: 1.4;
}

.hatano-point-content h3 {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--hatano-text);
}

.hatano-point-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hatano-point-content li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--hatano-text);
}

.hatano-point-content li + li {
    margin-top: 8px;
}

.hatano-point-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--hatano-green-dark);
}

/* ===============================
   Area
================================ */

.hatano-area {
    background: var(--hatano-bg-light);
}

.hatano-area-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.hatano-area-box {
    padding-top: 32px;
    border-top: 1px solid #5b7b5f;
}

.hatano-area-box h3,
.hatano-cost-box h3 {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--hatano-text);
}

.hatano-area-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hatano-area-box li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.75;
}

.hatano-area-box li + li {
    margin-top: 16px;
}

.hatano-area-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--hatano-green-dark);
}

.hatano-area-box strong {
    display: block;
    font-weight: 700;
}

.hatano-area-box span {
    display: block;
}

.hatano-cost-box {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #5b7b5f;
}

.hatano-cost-table-wrap {
    overflow-x: auto;
}

.hatano-cost-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    background: #ffffff;
}

.hatano-cost-table th,
.hatano-cost-table td {
    border: 1px solid #111111;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.hatano-cost-table th {
    font-weight: 700;
}

.hatano-note {
    margin: 12px 0 0;
    color: var(--hatano-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ===============================
   Responsive
================================ */

@media (max-width: 1024px) {
    .hatano-quick-list {
        flex-wrap: wrap;
    }

    .hatano-area-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hatano-section {
        padding: 56px 0 72px;
    }

    .hatano-section-title {
        font-size: 24px;
    }

    .hatano-section-subtitle {
        font-size: 15px;
    }

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

    .hatano-quick-item {
        width: auto;
    }

    .hatano-compare-button-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hatano-point-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hatano-point-icon {
        width: 72px;
        height: 72px;
        font-size: 42px;
    }
}

/* ===============================
   Recommended Companies
================================ */

.hatano-recommend {
    background: #ffffff;
}

.hatano-company-article {
    padding: 29px 0;
    border-top: 1px solid #5b7b5f;
}

.hatano-company-article + .hatano-company-article {
    margin-top: 32px;
}

.hatano-company-title-block {
    margin-bottom: 25px;
}

.hatano-company-catch {
    margin: 0 0 8px;
    color: var(--hatano-muted);
    font-size: 24px;
    line-height: 1.4;
}

.hatano-company-title-block h3 {
    margin: 0;
    color: var(--hatano-text);
    font-size: 24px;
    line-height: 1.4;
}

.hatano-company-main-image {
    margin-bottom: 25px;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #e8e3d8;
}

.hatano-company-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hatano-company-feature-box {
    margin-bottom: 24px;
    padding: 25px;
    border: 1px solid var(--hatano-border);
    background: #ffffff;
}

.hatano-company-feature-box h4,
.hatano-company-gallery h4,
.hatano-company-profile-box h4 {
    margin: 0 0 16px;
    color: var(--hatano-text);
    font-size: 18px;
    line-height: 1.55;
}

.hatano-company-feature-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hatano-company-feature-box li {
    position: relative;
    padding-left: 14px;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.75;
}

.hatano-company-feature-box li + li {
    margin-top: 8px;
}

.hatano-company-feature-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hatano-green-dark);
}

.hatano-company-feature-box strong {
    color: #3586c0;
    font-weight: 700;
}

.hatano-company-button-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 24px 0;
}

.hatano-company-button-row .hatano-small-btn {
    width: 100%;
    min-height: 46px;
}

.hatano-company-gallery {
    margin: 25px 0;
    padding: 25px;
    border: 1px solid var(--hatano-border);
    background: #ffffff;
}

.hatano-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    grid-template-rows: 537px 469px;
    gap: 22px 30px;
}

.hatano-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e8e3d8;
}

.hatano-review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px 0;
}

.hatano-review-card {
    padding: 25px;
    border: 1px solid var(--hatano-border);
    background: #ffffff;
}

.hatano-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.hatano-review-head h5 {
    margin: 0;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.5;
}

.hatano-review-head span {
    color: var(--hatano-green-soft);
    font-size: 12px;
    letter-spacing: 4px;
}

.hatano-review-card p {
    margin: 0;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.75;
}

.hatano-company-profile {
    display: grid;
    grid-template-columns: 478px 1fr;
    gap: 24px;
    align-items: stretch;
    margin: 25px 0;
}

.hatano-company-map {
    height: 306px;
    overflow: hidden;
    background: #e8e3d8;
}

.hatano-company-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hatano-company-profile-box {
    padding: 25px;
    border: 1px solid var(--hatano-border);
    background: #ffffff;
}

.hatano-company-profile-box dl {
    margin: 0;
}

.hatano-company-profile-box dl div {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 16px;
    padding: 0 0 13px;
    border-bottom: 1px solid var(--hatano-border);
}

.hatano-company-profile-box dl div + div {
    padding-top: 12px;
}

.hatano-company-profile-box dt,
.hatano-company-profile-box dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--hatano-text);
}

.hatano-company-profile-box dt {
    font-weight: 700;
}

/* Recommended Companies Responsive */
@media (max-width: 1024px) {
    .hatano-company-main-image {
        height: 420px;
    }

    .hatano-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 320px 320px;
    }

    .hatano-company-profile {
        grid-template-columns: 1fr;
    }

    .hatano-company-map {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .hatano-company-catch {
        font-size: 18px;
    }

    .hatano-company-title-block h3 {
        font-size: 22px;
    }

    .hatano-company-main-image {
        height: 260px;
    }

    .hatano-company-button-row {
        grid-template-columns: 1fr;
    }

    .hatano-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 220px);
        gap: 16px;
    }

    .hatano-company-profile-box dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ===============================
   FAQ
================================ */

.hatano-narrow {
    width: min(848px, calc(100% - 32px));
    margin: 0 auto;
}

.hatano-faq {
    background: var(--hatano-bg-light);
}

.hatano-faq-list {
    border-top: 1px solid var(--hatano-border);
}

.hatano-faq-item {
    border-bottom: 1px solid var(--hatano-border);
    background: transparent;
}

.hatano-faq-item summary {
    min-height: 60px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

.hatano-faq-item summary::-webkit-details-marker {
    display: none;
}

.hatano-faq-item summary::after {
    content: "+";
    margin-left: auto;
    color: var(--hatano-green-soft);
    font-size: 20px;
    line-height: 1;
}

.hatano-faq-item[open] summary::after {
    content: "−";
}

.hatano-faq-q {
    color: var(--hatano-green-soft);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.hatano-faq-answer {
    padding: 0 16px 18px 40px;
}

.hatano-faq-answer p {
    margin: 0;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.8;
}

/* ===============================
   Company List
================================ */

.hatano-company-list-section {
    background: #ffffff;
}

.hatano-section-heading-center {
    text-align: center;
}

.hatano-section-title span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hatano-company-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.hatano-company-card {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hatano-company-card.is-muted {
    opacity: 0.75;
}

.hatano-company-card-head {
    padding: 12px;
    background: #e5e7eb;
    border-bottom: 1px solid #111111;
    text-align: center;
}

.hatano-company-card-head h3 {
    margin: 0;
    color: #333333;
    font-size: 14px;
    line-height: 1.45;
}

.hatano-company-card-body {
    padding: 20px;
}

.hatano-company-card-body p {
    margin: 0 0 15px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.65;
    font-weight: 700;
}

.hatano-company-card-body dl {
    margin: 0 0 15px;
}

.hatano-company-card-body dl div + div {
    margin-top: 3px;
}

.hatano-company-card-body dt,
.hatano-company-card-body dd {
    display: inline;
    margin: 0;
    color: #1f2937;
    font-size: 10px;
    line-height: 1.6;
}

.hatano-company-card-body dt {
    font-weight: 700;
}

.hatano-company-card-body dt::after {
    content: "：";
    font-weight: 400;
}

.hatano-company-card-image {
    aspect-ratio: 310 / 174;
    background: #d1d5db;
    border: 1px solid #e5e7eb;
}

.hatano-company-card-foot {
    padding: 16px;
    background: #f3f4f6;
    border-top: 1px solid #111111;
}

.hatano-company-card-foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    background: #1f2937;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
}

.hatano-company-card.is-muted .hatano-company-card-head h3,
.hatano-company-card.is-muted .hatano-company-card-body p,
.hatano-company-card.is-muted .hatano-company-card-body dt,
.hatano-company-card.is-muted .hatano-company-card-body dd,
.hatano-company-card.is-muted .hatano-company-card-foot a {
    color: #9ca3af;
}

.hatano-company-card.is-muted .hatano-company-card-foot a {
    background: transparent;
    color: #d1d5db;
}

.hatano-more-button-wrap {
    margin-top: 32px;
}

.hatano-more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 8px;
    background: var(--hatano-green-soft);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

/* ===============================
   Blog
================================ */

.hatano-blog {
    background: var(--hatano-bg-light);
}

.hatano-section-label {
    margin: 0 0 4px;
    color: var(--hatano-muted);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hatano-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hatano-blog-card {
    background: #ffffff;
    overflow: hidden;
}

.hatano-blog-thumb {
    position: relative;
    height: 222px;
    background: #e8e3d8;
    overflow: hidden;
}

.hatano-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hatano-blog-badge {
    position: absolute;
    top: 12px;
    left: 8px;
    min-width: 40px;
    padding: 2px 8px;
    background: var(--hatano-green-soft);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.hatano-blog-category {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    background: #ffffff;
    color: var(--hatano-green-soft);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.hatano-blog-body {
    padding: 16px;
}

.hatano-blog-body time {
    display: block;
    margin-bottom: 8px;
    color: var(--hatano-muted);
    font-size: 12px;
    line-height: 1.4;
}

.hatano-blog-body h3 {
    margin: 0 0 8px;
    min-height: 38px;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.4;
}

.hatano-blog-body p {
    margin: 0;
    color: var(--hatano-muted);
    font-size: 12px;
    line-height: 1.65;
}

.hatano-blog-more-wrap {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.hatano-blog-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 148px;
    min-height: 46px;
    padding: 12px 32px;
    border: 1px solid var(--hatano-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--hatano-text);
    font-size: 14px;
    font-weight: 700;
}

/* Lower Sections Responsive */
@media (max-width: 1024px) {
    .hatano-company-card-grid,
    .hatano-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .hatano-company-card-grid,
    .hatano-blog-grid {
        grid-template-columns: 1fr;
    }

    .hatano-faq-item summary {
        align-items: flex-start;
    }

    .hatano-faq-answer {
        padding-left: 16px;
    }

    .hatano-blog-thumb {
        height: 200px;
    }
}


/* ===============================
   Real Estate Sale Guide
================================ */

:root {
    --re-bg: #f8f5ee;
    --re-bg-light: #fffaf2;
    --re-white: #ffffff;
    --re-text: #2f2f2f;
    --re-muted: #777777;
    --re-main: #8a5a2b;
    --re-main-dark: #6f451f;
    --re-accent: #d79b45;
    --re-border: #d9c6ad;
    --re-dark: #3a2a1d;
}

.realestate-pr-bar {
    height: 27px;
    padding: 6px 16px;
    background: #ffffff;
    color: #777777;
    font-size: 12px;
    line-height: 1.2;
}

.realestate-header {
    background: #ffffff;
    border-bottom: 1px solid var(--re-border);
}

.realestate-header-inner {
    width: min(1536px, calc(100% - 48px));
    height: 64px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 384px 1fr;
    align-items: center;
}

.realestate-logo {
    display: block;
    color: var(--re-text);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    text-decoration: none;
}

.realestate-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.6fr;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.realestate-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 16px;
    color: var(--re-text);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.realestate-inner {
    width: min(1152px, calc(100% - 32px));
    margin: 0 auto;
}

.realestate-fv {
    min-height: 760px;
    padding: 96px 0;
    background: linear-gradient(135deg, #fff7e8 0%, #f8efe0 55%, #ead7bd 100%);
    overflow: hidden;
}

.realestate-fv-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48%;
    gap: 56px;
    align-items: center;
}

.realestate-fv-label {
    display: inline-flex;
    margin: 0 0 24px;
    padding: 10px 24px;
    border: 1px solid var(--re-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    color: var(--re-main-dark);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

.realestate-fv-title {
    margin: 0 0 24px;
    color: var(--re-dark);
    font-size: 56px;
    line-height: 1.28;
    font-weight: 700;
}

.realestate-fv-text {
    margin: 0;
    color: var(--re-muted);
    font-size: 18px;
    line-height: 1.9;
}

.realestate-fv-buttons {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

.realestate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    text-decoration: none;
}

.realestate-btn-primary {
    background: var(--re-main);
    color: #ffffff;
    box-shadow: 0 16px 24px rgba(138, 90, 43, 0.24);
}

.realestate-btn-outline {
    background: #ffffff;
    color: var(--re-main);
    border: 1px solid var(--re-main);
}

.realestate-fv-image {
    min-height: 460px;
    border-radius: 24px;
    overflow: hidden;
    background: #ead7bd;
    box-shadow: 0 24px 50px rgba(58, 42, 29, 0.18);
}

.realestate-fv-image img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
}

.realestate-insight {
    padding: 96px 0;
    background: #ffffff;
}

.realestate-insight-heading {
    margin-bottom: 56px;
    text-align: center;
}

.realestate-insight-heading h2 {
    margin: 0;
    color: var(--re-text);
    font-size: 40px;
    line-height: 1.55;
    font-weight: 700;
}

.realestate-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 548px;
    gap: 96px;
    align-items: start;
}

.realestate-insight-text p {
    margin: 0;
    color: var(--re-text);
    font-size: 18px;
    line-height: 1.9;
}

.realestate-insight-text p + p {
    margin-top: 40px;
}

.realestate-insight-strong {
    padding-top: 32px;
    border-top: 1px solid var(--re-border);
    color: var(--re-main-dark) !important;
    font-size: 22px !important;
    line-height: 1.7 !important;
    font-weight: 700;
}

.realestate-ng-card {
    border: 1px solid var(--re-border);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(58, 42, 29, 0.1);
}

.realestate-ng-card h3 {
    margin: 0;
    padding: 24px 32px;
    background: var(--re-main);
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
}

.realestate-ng-list {
    padding: 40px 48px;
}

.realestate-ng-item {
    position: relative;
    padding-left: 40px;
}

.realestate-ng-item + .realestate-ng-item {
    margin-top: 48px;
}

.realestate-ng-item::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--re-accent);
}

.realestate-ng-item h4 {
    margin: 0 0 16px;
    color: var(--re-text);
    font-size: 20px;
    line-height: 1.6;
}

.realestate-ng-item p {
    margin: 0;
    color: var(--re-muted);
    font-size: 16px;
    line-height: 1.8;
}

@media (max-width: 1024px) {
    .realestate-header-inner {
        grid-template-columns: 1fr;
        height: auto;
        padding: 16px 0;
        gap: 12px;
    }

    .realestate-nav ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .realestate-fv-inner,
    .realestate-insight-grid {
        grid-template-columns: 1fr;
    }

    .realestate-fv-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .realestate-header-inner {
        width: min(100% - 24px, 1536px);
    }

    .realestate-logo {
        font-size: 14px;
    }

    .realestate-nav a {
        font-size: 11px;
        padding: 8px 6px;
    }

    .realestate-fv {
        min-height: auto;
        padding: 56px 0;
    }

    .realestate-fv-title {
        font-size: 32px;
    }

    .realestate-fv-text,
    .realestate-insight-text p {
        font-size: 15px;
    }

    .realestate-fv-buttons {
        flex-direction: column;
    }

    .realestate-btn {
        width: 100%;
    }

    .realestate-fv-image,
    .realestate-fv-image img {
        min-height: 260px;
    }

    .realestate-insight {
        padding: 64px 0;
    }

    .realestate-insight-heading h2 {
        font-size: 26px;
    }

    .realestate-ng-list {
        padding: 28px 24px;
    }
}

/* ===============================
   Real Estate Guide / Revised
================================ */

:root {
    --re-navy: #45556b;
    --re-navy-dark: #273344;
    --re-orange: #f25a00;
    --re-orange-dark: #d94f00;
    --re-sky: #eaf5fb;
    --re-sky-strong: #d8edf7;
    --re-white: #ffffff;
    --re-text: #1f2937;
    --re-muted: #667085;
    --re-border: #d9e2ea;
    --re-green: #009e73;
}

.re-pr-bar {
    height: 32px;
    padding: 7px 16px;
    background: #ffffff;
    color: var(--re-navy);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.re-header {
    background: #ffffff;
    border-bottom: 1px solid var(--re-border);
}

.re-header-inner {
    width: min(1536px, calc(100% - 48px));
    height: 76px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: center;
}

.re-logo {
    color: var(--re-text);
    font-size: 22px;
    line-height: 1.45;
    font-weight: 700;
    text-decoration: none;
}

.re-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.re-nav a {
    min-height: 56px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--re-text);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.re-inner {
    width: min(1152px, calc(100% - 32px));
    margin: 0 auto;
}

/* FV */

.re-fv {
    background: var(--re-navy);
    color: #ffffff;
}

.re-fv-inner {
    width: min(1536px, calc(100% - 48px));
    min-height: 680px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: stretch;
}

.re-fv-main {
    padding: 92px 72px 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.re-fv-area {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 36px;
    padding: 10px 28px;
    border-radius: 999px;
    background: var(--re-orange);
    color: #ffffff;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 700;
}

.re-fv-sub {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
}

.re-fv-title {
    margin: 0;
    color: #ffffff;
    font-size: 54px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.re-fv-title span {
    color: var(--re-orange);
}

.re-fv-lead {
    margin: 32px 0 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 700;
}

.re-fv-cta {
    margin-top: 48px;
}

.re-fv-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 520px;
    min-height: 68px;
    padding: 16px 32px;
    background: #ffffff;
    color: var(--re-navy-dark);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    text-decoration: none;
}

.re-fv-photos {
    display: grid;
    grid-template-rows: 1.15fr 1fr 1fr;
    gap: 0;
}

.re-fv-photo {
    min-height: 190px;
    overflow: hidden;
    background: #d9e2ea;
}

.re-fv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-fv-photo-large {
    min-height: 260px;
}

/* INDEX */

.re-index {
    padding: 48px 0 60px;
    background: #f5f8fb;
}

.re-index h2 {
    margin: 0 0 24px;
    color: var(--re-navy-dark);
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-align: center;
}

.re-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.re-index-grid a {
    min-height: 86px;
    padding: 18px 16px;
    background: #ffffff;
    border: 2px solid #b8c8d8;
    color: var(--re-navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* Insight */

.re-insight {
    padding: 96px 0 104px;
    background: #ffffff;
}

.re-section-heading {
    margin-bottom: 56px;
    text-align: center;
}

.re-section-heading h2 {
    margin: 0;
    color: var(--re-text);
    font-size: 42px;
    line-height: 1.55;
    font-weight: 800;
}

.re-insight-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 548px;
    gap: 92px;
    align-items: start;
}

.re-insight-text p {
    margin: 0;
    color: var(--re-text);
    font-size: 20px;
    line-height: 1.95;
    font-weight: 500;
}

.re-insight-text p + p {
    margin-top: 40px;
}

.re-insight-emphasis {
    padding-top: 34px;
    border-top: 2px solid var(--re-border);
    color: var(--re-navy-dark) !important;
    font-size: 25px !important;
    line-height: 1.75 !important;
    font-weight: 800 !important;
}

.re-risk-card {
    border: 1px solid var(--re-border);
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(39, 51, 68, 0.14);
}

.re-risk-card h3 {
    margin: 0;
    padding: 24px 32px;
    background: var(--re-navy);
    color: #ffffff;
    font-size: 25px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
}

.re-risk-item {
    position: relative;
    margin: 0 48px;
    padding: 40px 0 40px 40px;
}

.re-risk-item + .re-risk-item {
    border-top: 1px solid var(--re-border);
}

.re-risk-item::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--re-orange);
}

.re-risk-item h4 {
    margin: 0 0 16px;
    color: var(--re-text);
    font-size: 22px;
    line-height: 1.65;
    font-weight: 800;
}

.re-risk-item p {
    margin: 0;
    color: var(--re-muted);
    font-size: 18px;
    line-height: 1.8;
}

/* Responsive */

@media (max-width: 1024px) {
    .re-header-inner {
        grid-template-columns: 1fr;
        height: auto;
        padding: 16px 0;
        gap: 12px;
    }

    .re-nav ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .re-fv-inner {
        grid-template-columns: 1fr;
    }

    .re-fv-main {
        padding: 64px 0;
    }

    .re-fv-photos {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: none;
    }

    .re-fv-photo,
    .re-fv-photo-large {
        min-height: 220px;
    }

    .re-insight-layout {
        grid-template-columns: 1fr;
    }

    .re-index-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .re-pr-bar {
        height: 28px;
        font-size: 13px;
    }

    .re-header-inner,
    .re-fv-inner {
        width: min(100% - 24px, 1536px);
    }

    .re-logo {
        font-size: 17px;
    }

    .re-nav a {
        font-size: 12px;
    }

    .re-fv-main {
        padding: 48px 0;
    }

    .re-fv-area {
        font-size: 14px;
    }

    .re-fv-sub {
        font-size: 18px;
    }

    .re-fv-title {
        font-size: 34px;
    }

    .re-fv-lead {
        font-size: 17px;
    }

    .re-fv-cta a {
        min-width: 0;
        width: 100%;
        font-size: 14px;
    }

    .re-fv-photos {
        grid-template-columns: 1fr;
    }

    .re-index-grid {
        grid-template-columns: 1fr;
    }

    .re-section-heading h2 {
        font-size: 28px;
    }

    .re-insight-text p {
        font-size: 16px;
    }

    .re-insight-emphasis {
        font-size: 19px !important;
    }

    .re-risk-card h3 {
        font-size: 20px;
    }

    .re-risk-item {
        margin: 0 24px;
        padding-left: 28px;
    }

    .re-risk-item h4 {
        font-size: 18px;
    }

    .re-risk-item p {
        font-size: 15px;
    }
}

/* ===============================
   Recommend Companies
================================ */

.re-recommend {
    padding: 112px 0 120px;
    background: #f5f8fb;
}

.re-recommend-heading {
    margin-bottom: 56px;
    text-align: center;
}

.re-recommend-heading p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 560px;
    min-height: 72px;
    margin: 0 0 32px;
    padding: 16px 40px;
    background: var(--re-orange);
    color: #ffffff;
    font-size: 26px;
    line-height: 1.45;
    font-weight: 800;
}

.re-recommend-heading h2 {
    margin: 0;
    color: var(--re-text);
    font-size: 44px;
    line-height: 1.45;
    font-weight: 800;
}

.re-recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.re-recommend-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #d9e2ea;
    box-shadow: 0 16px 32px rgba(39, 51, 68, 0.12);
}

.re-recommend-balloon {
    min-height: 92px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--re-orange);
    background: #ffffff;
    border-bottom: 1px solid #d9e2ea;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 800;
    text-align: center;
}

.re-recommend-company {
    min-height: 112px;
    padding: 22px 24px;
    background: var(--re-navy);
    color: #ffffff;
    text-align: center;
}

.re-recommend-company span {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.re-recommend-company h3 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 800;
}

.re-recommend-image {
    height: 210px;
    background: #e5edf4;
    overflow: hidden;
}

.re-recommend-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-recommend-actions {
    padding: 36px 40px 40px;
    display: grid;
    gap: 18px;
    background: #ffffff;
    border-top: 1px solid #d9e2ea;
}

.re-btn-gray,
.re-btn-orange {
    min-height: 56px;
    padding: 14px 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.re-btn-gray {
    background: #6b7a8c;
    color: #ffffff;
}

.re-btn-orange {
    background: var(--re-orange);
    color: #ffffff;
    box-shadow: 0 12px 18px rgba(242, 90, 0, 0.22);
}

@media (max-width: 1024px) {
    .re-recommend-grid {
        grid-template-columns: 1fr;
    }

    .re-recommend-heading p {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .re-recommend {
        padding: 72px 0 80px;
    }

    .re-recommend-heading p {
        font-size: 18px;
    }

    .re-recommend-heading h2 {
        font-size: 28px;
    }

    .re-recommend-company h3 {
        font-size: 24px;
    }
}
/* ===============================
   Company Detail Sections
================================ */

.re-detail-section {
    padding: 112px 0 120px;
    background: #ffffff;
}

.re-detail-main-heading {
    margin-bottom: 64px;
    text-align: center;
}

.re-detail-main-heading h2 {
    display: inline-block;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 3px solid #009e73;
    color: var(--re-text);
    font-size: 44px;
    line-height: 1.45;
    font-weight: 800;
}

.re-company-detail {
    padding: 0 0 96px;
    border-bottom: 1px solid #edf2f7;
}

.re-company-detail + .re-company-detail {
    padding-top: 96px;
}

.re-company-kv {
    width: min(1022px, 100%);
    min-height: 339px;
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: 45% 55%;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background: #ffffff;
    overflow: hidden;
}

.re-company-kv-text {
    padding: 32px 40px;
    background: var(--re-orange);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.re-company-no {
    margin: 0 0 56px;
    color: rgba(255,255,255,0.45);
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: left;
}

.re-company-kv-text h3 {
    margin: 0;
    color: #ffffff;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.re-company-catch {
    margin: 56px 0 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.re-company-kv-image {
    min-height: 339px;
    background: #e5edf4;
}

.re-company-kv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-detail-block {
    margin-top: 64px;
}

.re-detail-block h4 {
    margin: 0 0 48px;
    padding-left: 28px;
    border-left: 4px solid #1e293b;
    color: #1e293b;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 800;
}

.re-point-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.re-point-card {
    padding: 40px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.re-point-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.re-point-num {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    flex-shrink: 0;
}

.re-point-num small {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1;
}

.re-point-card h5 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    line-height: 1.55;
    font-weight: 800;
}

.re-point-card p {
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
    font-weight: 500;
}

.re-detail-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.re-detail-btn {
    min-height: 60px;
    padding: 18px 24px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.08em;
}

.re-detail-btn-gray {
    background: #64748b;
}

.re-detail-btn-orange {
    background: var(--re-orange);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.re-fit-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #e2e8f0;
}

.re-fit-col {
    padding: 48px;
}

.re-fit-good {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.re-fit-bad {
    background: #f8fafc;
}

.re-fit-col h5 {
    margin: 0 0 40px;
    padding: 18px 24px;
    text-align: center;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
}

.re-fit-good h5 {
    background: #475569;
    color: #ffffff;
}

.re-fit-bad h5 {
    background: #cbd5e1;
    color: #334155;
}

.re-fit-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.re-fit-col li {
    color: #475569;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 700;
}

.re-fit-col li + li {
    margin-top: 20px;
}

.re-fit-col li::before {
    content: "・";
}

.re-review-list {
    display: grid;
    gap: 24px;
}

.re-review-card {
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 40px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.re-review-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.re-review-card p {
    margin: 0;
    color: #334155;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 700;
}

.re-result-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
}

.re-result-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.re-result-table th {
    background: #f1f5f9;
    color: #475569;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.re-result-table th,
.re-result-table td {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.re-result-table td {
    color: #64748b;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
}

.re-result-table td:nth-child(2) {
    color: #1e293b;
    font-weight: 800;
}

.re-company-info {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 48px;
    padding: 48px;
    border: 1px solid #e2e8f0;
    background: rgba(248,250,252,0.3);
}

.re-company-info-text {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.re-company-info-text span {
    display: block;
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.re-company-info-text p {
    margin: 0;
    color: #475569;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 800;
}

.re-company-info-text a {
    color: #059669;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.re-company-map {
    min-height: 360px;
    border: 1px solid #cbd5e1;
    background: #e5edf4;
}

.re-map-placeholder {
    height: 100%;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .re-company-kv,
    .re-point-grid,
    .re-fit-box,
    .re-company-info {
        grid-template-columns: 1fr;
    }

    .re-fit-good {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 767px) {
    .re-detail-section {
        padding: 72px 0 80px;
    }

    .re-detail-main-heading h2 {
        font-size: 28px;
    }

    .re-company-kv-text h3 {
        font-size: 30px;
    }

    .re-detail-block h4 {
        font-size: 22px;
    }

    .re-point-card,
    .re-fit-col,
    .re-review-card,
    .re-company-info {
        padding: 28px;
    }

    .re-point-head,
    .re-review-card {
        align-items: flex-start;
    }

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

    .re-point-card h5 {
        font-size: 18px;
    }

    .re-point-card p,
    .re-review-card p,
    .re-company-info-text p {
        font-size: 16px;
    }
}

/* ===============================
   Latest Posts
================================ */

.re-latest {
    padding: 112px 0 120px;
    background: #ffffff;
}

.re-latest-heading {
    margin-bottom: 56px;
}

.re-latest-heading h2 {
    margin: 0;
    color: var(--re-text);
    font-size: 54px;
    line-height: 1.4;
    font-weight: 800;
}

.re-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 96px;
    margin-left: 248px;
}

.re-latest-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.re-latest-thumb {
    height: 323px;
    background: #e5edf4;
    overflow: hidden;
}

.re-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-latest-no-image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 22px;
}

.re-latest-body {
    padding-top: 24px;
}

.re-latest-date {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
}

.re-latest-body h3 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    line-height: 1.65;
    font-weight: 800;
}

.re-latest-more {
    margin-top: 48px;
    text-align: right;
}

.re-latest-more a {
    color: #1e293b;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
}

/* ===============================
   FAQ
================================ */

.re-faq {
    padding: 128px 0;
    background: #45556b;
}

.re-faq-inner {
    width: min(896px, calc(100% - 32px));
    margin: 0 auto;
}

.re-faq-heading {
    margin-bottom: 56px;
    text-align: center;
}

.re-faq-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 800;
}

.re-faq-heading p {
    margin: 16px 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.16em;
}

.re-faq-list {
    display: grid;
    gap: 20px;
}

.re-faq-item {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
}

.re-faq-item summary {
    min-height: 96px;
    padding: 32px 48px;
    display: flex;
    align-items: center;
    gap: 40px;
    cursor: pointer;
    list-style: none;
}

.re-faq-item summary::-webkit-details-marker {
    display: none;
}

.re-faq-item summary::after {
    content: "+";
    margin-left: auto;
    color: #334155;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
}

.re-faq-item[open] summary::after {
    content: "−";
}

.re-faq-q {
    color: #1e293b;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
}

.re-faq-question {
    color: #1e293b;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 800;
}

.re-faq-answer {
    padding: 36px 48px 44px;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 40px;
}

.re-faq-answer span {
    color: #009e73;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 800;
}

.re-faq-answer p {
    margin: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.9;
}

/* ===============================
   Company List
================================ */

.re-company-list {
    padding: 128px 0;
    background: #ffffff;
}

.re-company-list-heading {
    margin-bottom: 64px;
    text-align: center;
}

.re-company-list-heading h2 {
    margin: 0;
    color: #1e293b;
    font-size: 42px;
    line-height: 1.45;
    font-weight: 800;
}

.re-company-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.re-company-list-card {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.re-company-list-card-head {
    min-height: 77px;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(248,250,252,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.re-company-list-card-head h3 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
}

.re-company-list-card-body {
    padding: 40px;
}

.re-company-list-info + .re-company-list-info,
.re-company-list-map + .re-company-list-info {
    margin-top: 32px;
}

.re-company-list-info span {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.re-company-list-info p {
    margin: 0;
    color: #334155;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 600;
}

.re-company-list-map {
    height: 128px;
    margin-top: 32px;
    border: 1px solid #cbd5e1;
    background: #e5edf4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.re-company-list-map span {
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.re-company-list-card-foot {
    padding: 32px 40px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.re-company-list-card-foot a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #64748b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.re-company-more {
    margin-top: 56px;
    text-align: center;
}

.re-company-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 448px;
    min-height: 80px;
    padding: 20px 48px;
    background: #64748b;
    color: #ffffff;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 24px rgba(71, 85, 105, 0.2);
}

/* ===============================
   Site Content Index
================================ */

.re-site-index {
    padding: 128px 0;
    background: #ffffff;
}

.re-site-index-inner {
    width: min(896px, calc(100% - 32px));
    margin: 0 auto;
}

.re-site-index h2 {
    margin: 0 0 72px;
    color: #1e293b;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 800;
    text-align: center;
}

.re-site-index-block + .re-site-index-block {
    margin-top: 80px;
}

.re-site-index-block h3 {
    margin: 0 0 40px;
    padding: 16px;
    border: 1px solid #b6f0dc;
    color: #1e293b;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 800;
}

.re-site-index-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.re-site-index-block li + li {
    margin-top: 28px;
}

.re-site-index-block a {
    color: #1e293b;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .re-latest-grid {
        margin-left: 0;
    }

    .re-company-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .re-latest-grid,
    .re-company-list-grid {
        grid-template-columns: 1fr;
    }

    .re-latest-heading h2,
    .re-faq-heading h2,
    .re-company-list-heading h2,
    .re-site-index h2 {
        font-size: 30px;
    }

    .re-faq-item summary {
        padding: 24px;
        gap: 20px;
    }

    .re-faq-question {
        font-size: 17px;
    }

    .re-faq-answer {
        padding: 24px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .re-company-more a {
        min-width: 0;
        width: 100%;
    }
}

/* ===============================
   Footer
================================ */

.re-footer {
    padding: 128px 0;
    background: #0f172a;
    color: #ffffff;
}

.re-footer-inner {
    width: min(1536px, calc(100% - 48px));
    margin: 0 auto;
    text-align: center;
}

.re-footer-brand h2 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 800;
}

.re-footer-brand p {
    margin: 24px 0 0;
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    letter-spacing: 0.18em;
}

.re-footer-links {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    gap: 64px;
}

.re-footer-links a {
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
}

.re-footer-notice {
    width: min(896px, 100%);
    margin: 80px auto 0;
    padding: 48px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    text-align: left;
}

.re-footer-notice h3 {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.re-footer-notice p {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.9;
}

.re-footer-copy {
    margin: 80px 0 0;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}

@media (max-width: 767px) {
    .re-footer {
        padding: 80px 0;
    }

    .re-footer-links {
        flex-direction: column;
        gap: 20px;
    }

    .re-footer-notice {
        padding: 28px;
    }
}

.re-review-content {
    flex: 1;
}

.re-review-content small {
    display: block;
    margin-top: 16px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    text-align: right;
}

.re-review-content small a {
    color: #64748b;
    text-decoration: underline;
}

/* ===============================
   Sticky Global Header
================================ */

.re-pr-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.re-header {
    position: sticky;
    top: 32px;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.re-pr-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.re-header {
    position: sticky;
    top: 32px;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* Company list card order adjustment */
.re-company-list-card-body {
    display: flex;
    flex-direction: column;
}

.re-company-list-info + .re-company-list-info {
    margin-top: 32px;
}

.re-company-list-info + .re-company-list-map {
    margin-top: 32px;
}

.re-company-list-map {
    order: 3;
    height: 160px;
}

.re-company-list-info p {
    font-size: 18px;
    line-height: 1.8;
}
/* ===============================
   Insight section background image
================================ */

.re-insight {
    position: relative;
    background-image:
        linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
        url("./assets/img/insight-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.re-section-heading h2 {
    display: inline;
    background-image: linear-gradient(transparent 72%, var(--re-orange) 72%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.re-insight-emphasis {
    border-top-color: var(--re-orange) !important;
}

/* ===============================
   Recommend section - Figma style
================================ */

.re-recommend-heading {
    position: relative;
    width: min(960px, 100%);
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: 160px 1fr 160px;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.re-recommend-heading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.re-recommend-heading-center p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 360px;
    min-height: 64px;
    margin: 0 0 28px;
    padding: 14px 40px;
    background: #64748b;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.re-recommend-heading-center h2 {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.re-recommend-heading-center h2 br + * {
    font-size: 42px;
}

.re-recommend-heading-illust img {
    width: 120px;
    height: auto;
    display: block;
}

.re-recommend-heading-illust-left {
    justify-self: end;
}

.re-recommend-heading-illust-right {
    justify-self: start;
}

.re-recommend-card {
    overflow: visible;
    padding-top: 0;
}

.re-recommend-balloon {
    position: relative;
    min-height: 72px;
    margin: 0 24px 0;
    padding: 14px 18px;
    background: #ffffff;
    border: 3px solid #2f2a27;
    border-radius: 999px;
    color: #ea580c;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 900;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.re-recommend-balloon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 18px solid #2f2a27;
}

.re-recommend-balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 13px solid #ffffff;
}

.re-recommend-company {
    margin-top: 0;
    background: #475569;
}

.re-recommend-company span {
    display: none;
}

.re-recommend-company h3 {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.4em;
}

@media (max-width: 767px) {
    .re-recommend-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .re-recommend-heading-illust {
        display: none;
    }

    .re-recommend-heading-center p {
        min-width: 0;
        width: 100%;
        font-size: 18px;
        letter-spacing: 0.14em;
    }

    .re-recommend-heading-center h2 {
        font-size: 24px;
    }

    .re-recommend-balloon {
        margin: 0 16px;
        font-size: 13px;
    }
}
.re-point-icon {
    margin: 20px auto 24px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.re-point-icon img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
    opacity: 0.82;
}
/* ===============================
   Review user icon
================================ */

.re-review-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.re-review-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===============================
   Review cards layout
================================ */

.re-review-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.re-review-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100%;
    padding: 40px 48px !important;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.re-review-card .re-review-icon {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}

.re-review-card .re-review-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.re-review-content {
    flex: 1;
}

.re-review-content p {
    margin: 0;
    color: #334155;
    font-size: 18px !important;
    line-height: 1.9 !important;
    font-weight: 700;
}
/* ===============================
   Detail section width fix
================================ */

.re-detail-section .re-inner {
    width: min(1180px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.re-company-detail {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.re-detail-block {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.re-company-info {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.re-result-table-wrap {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
}

.re-detail-buttons {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* Google Map が横に伸びすぎる対策 */
.re-company-map {
    min-height: 260px;
    max-height: 360px;
    overflow: hidden;
}

.re-company-map iframe {
    width: 100% !important;
    height: 100% !important;
}

/* ===============================
   Review cards horizontal layout
================================ */

.re-review-list {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid !important;
    gap: 24px !important;
}

.re-review-card {
    width: 100%;
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    align-items: center !important;
    column-gap: 40px !important;
    padding: 40px 48px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.re-review-card .re-review-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
    display: block !important;
}

.re-review-card .re-review-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.re-review-content {
    min-width: 0;
}

.re-review-content p {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 20px !important;
    line-height: 1.9 !important;
    font-weight: 700 !important;
}

/* スマホ */
@media (max-width: 767px) {
    .re-detail-section .re-inner,
    .re-company-detail,
    .re-detail-block,
    .re-company-info,
    .re-result-table-wrap,
    .re-detail-buttons,
    .re-review-list {
        width: min(100% - 32px, 100%);
        max-width: none;
    }

    .re-review-card {
        grid-template-columns: 56px 1fr !important;
        column-gap: 18px !important;
        padding: 28px 20px !important;
    }

    .re-review-card .re-review-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }

    .re-review-content p {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
}

/* ===============================
   Market Section
================================ */

.re-market {
    padding: 128px 0;
    background: #f8fafc;
}

.re-market .re-inner {
    width: min(896px, calc(100% - 48px));
    margin: 0 auto;
}

.re-market-heading {
    margin-bottom: 88px;
    text-align: center;
}

.re-market-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 40px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.re-market-heading p {
    margin: 16px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}

.re-market-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 32px auto 0;
    background: #10b981;
}

.re-market-list {
    display: grid;
    gap: 88px;
}

.re-market-area h3 {
    margin: 0 0 28px;
    padding-left: 16px;
    border-left: 4px solid #009e73;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 900;
}

.re-market-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.re-market-card {
    min-height: 96px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.re-market-card span {
    display: block;
    padding: 8px 16px;
    background: #009e73;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
}

.re-market-card strong {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 900;
}

@media (max-width: 767px) {
    .re-market {
        padding: 80px 0;
    }

    .re-market .re-inner {
        width: min(100% - 32px, 100%);
    }

    .re-market-heading h2 {
        font-size: 30px;
    }

    .re-market-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .re-market-list {
        gap: 64px;
    }
}

/* ===============================
   Detail layout spacing fix
================================ */

.re-detail-section {
    overflow: hidden;
}

.re-detail-section .re-inner {
    width: min(1188px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.re-company-detail {
    width: 100% !important;
    max-width: 1188px !important;
    margin: 0 auto 128px !important;
}

.re-company-kv {
    max-width: 1022px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.re-detail-block {
    width: 100% !important;
    max-width: 1188px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 96px !important;
}

.re-point-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
}

.re-fit-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
}

.re-company-info {
    display: grid !important;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important;
    gap: 48px !important;
    max-width: 959px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.re-company-map {
    width: 100% !important;
    min-height: 360px !important;
    max-height: 414px !important;
}

.re-detail-buttons {
    width: 100% !important;
    max-width: 1188px !important;
    margin: 48px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.re-detail-btn {
    width: 100% !important;
}

/* 口コミを横並びに固定 */
.re-review-list {
    width: 100% !important;
    max-width: 1188px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 24px !important;
}

.re-review-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 40px !important;
    padding: 40px 48px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.re-review-card .re-review-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
    display: block !important;
}

.re-review-card .re-review-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.re-review-content {
    min-width: 0 !important;
}

.re-review-content p {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 19px !important;
    line-height: 1.9 !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .re-detail-section .re-inner {
        width: min(100% - 32px, 100%) !important;
    }

    .re-point-grid,
    .re-fit-box,
    .re-company-info,
    .re-detail-buttons {
        grid-template-columns: 1fr !important;
    }

    .re-company-map {
        min-height: 240px !important;
    }

    .re-review-card {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        column-gap: 18px !important;
        padding: 28px 20px !important;
    }

    .re-review-card .re-review-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }

    .re-review-content p {
        font-size: 16px !important;
    }
}

/* ===============================
   Company detail vertical spacing fix
================================ */

.re-company-detail {
    margin-bottom: 160px !important;
}

.re-company-detail + .re-company-detail {
    padding-top: 80px !important;
    border-top: 1px solid #e2e8f0;
}

.re-company-detail .re-detail-buttons {
    margin-bottom: 88px !important;
}

.re-company-kv {
    margin-top: 40px !important;
}
/* ===============================
   Company KV spacing fix
================================ */

.re-company-detail + .re-company-detail {
    margin-top: 160px !important;
}

.re-company-kv {
    margin-top: 72px !important;
}

/* ===============================
   Company section spacing adjustment
   会社間の余白を少しだけに戻す
================================ */

.re-company-detail {
    margin-bottom: 96px !important;
}

.re-company-detail + .re-company-detail {
    margin-top: 96px !important;
}

.re-company-detail .re-company-kv {
    margin-top: 0 !important;
}

/* 会社概要内の最後のボタン下だけ、少し余白を確保 */
.re-company-detail .re-detail-block:last-child {
    margin-bottom: 72px !important;
}
/* ===============================
   FV height + vertical photo loop
================================ */

.re-fv {
    min-height: calc(100vh - 92px) !important;
    height: calc(100vh - 92px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
}

.re-fv-inner {
    width: min(1536px, 100%) !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px) !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.re-fv-main {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 64px 64px !important;
}

.re-fv-photos {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
}

.re-fv-photo-track {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    animation: re-fv-photo-loop 24s linear infinite;
    will-change: transform;
}

.re-fv-photo {
    width: 100% !important;
    height: 33.333vh !important;
    min-height: 260px !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.re-fv-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

@keyframes re-fv-photo-loop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* ホバー時は止めたい場合。不要なら削除OK */
.re-fv-photos:hover .re-fv-photo-track {
    animation-play-state: paused;
}

@media (max-width: 767px) {
    .re-fv {
        height: auto !important;
        min-height: auto !important;
    }

    .re-fv-inner {
        grid-template-columns: 1fr !important;
    }

    .re-fv-main {
        padding: 72px 24px 48px !important;
    }

    .re-fv-photos {
        height: 420px !important;
    }

    .re-fv-photo {
        height: 210px !important;
        min-height: 210px !important;
    }
}

/* ===============================
   SP → 北章宅建 の間だけ広げる
================================ */

/* 2社目（北章宅建）の上だけ余白を追加 */
.re-company-detail:nth-of-type(2) {
    padding-top: 120px !important;
}

/* 3社目（カチタス）は広がりすぎないように戻す */
.re-company-detail:nth-of-type(3) {
    padding-top: 0 !important;
}

/* ===============================
   SP → 北章宅建 の間だけ調整
================================ */

#company-articles .re-company-detail-01 {
    margin-bottom: 180px !important;
}

#company-articles .re-company-detail-02 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#company-articles .re-company-detail-03 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#company-articles .re-company-detail:first-child .re-detail-block:last-child,
#company-articles .re-company-detail:first-of-type .re-detail-block:last-child {
    margin-bottom: 180px !important;
}
/* ===============================
   Company spacing final
   SP → 北章宅建だけ広げる
================================ */

#company-articles .re-company-detail {
    margin-bottom: 96px !important;
    padding-bottom: 96px !important;
}

#company-articles .re-company-detail + .re-company-detail {
    margin-top: 0 !important;
    padding-top: 48px !important;
}

#company-articles .re-company-detail-01 {
    margin-bottom: 72px !important;
}

#company-articles .re-company-detail-02 {
    margin-top: 0 !important;
    padding-top: 96px !important;
}

#company-articles .re-company-detail-03 {
    margin-top: 0 !important;
    padding-top: 96px !important;
}

/* ===============================
   Company spacing reset - final
   会社間の余白を狭める
================================ */

#company-articles .re-company-detail {
    padding-top: 0 !important;
    padding-bottom: 72px !important;
    margin-top: 0 !important;
    margin-bottom: 72px !important;
}

#company-articles .re-company-detail + .re-company-detail {
    padding-top: 72px !important;
    margin-top: 0 !important;
}

/* SP土地建物 → 北章宅建だけ、少しだけ広め */
#company-articles .re-company-detail-01 {
    margin-bottom: 96px !important;
    padding-bottom: 72px !important;
}

/* 北章宅建 → カチタスは広がりすぎないように固定 */
#company-articles .re-company-detail-02 {
    margin-bottom: 72px !important;
    padding-bottom: 72px !important;
}

#company-articles .re-company-detail-03 {
    margin-bottom: 0 !important;
}

/* 会社KVの上に余白が重複していたら消す */
#company-articles .re-company-kv {
    margin-top: 0 !important;
}

/* ===============================
   Single article page
================================ */

.re-single-page {
    background: #ffffff;
}

.re-single {
    padding: 96px 0 128px;
}

.re-single-inner {
    width: min(960px, calc(100% - 48px));
    margin: 0 auto;
}

.re-single-header {
    margin-bottom: 64px;
}

.re-single-category {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.re-single-category a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.re-single-header h1 {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.re-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.re-single-eyecatch {
    margin-top: 48px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.re-single-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

.re-single-content {
    color: #334155;
    font-size: 18px;
    line-height: 2.1;
    font-weight: 500;
}

.re-single-content p {
    margin: 0 0 2em;
}

.re-single-content h2 {
    margin: 3em 0 1.1em;
    padding-left: 18px;
    border-left: 5px solid #0f172a;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.55;
    font-weight: 900;
}

.re-single-content h3 {
    margin: 2.4em 0 1em;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.55;
    font-weight: 900;
}

.re-single-content h4 {
    margin: 2em 0 1em;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 900;
}

.re-single-content ul,
.re-single-content ol {
    margin: 0 0 2em;
    padding-left: 1.5em;
}

.re-single-content li {
    margin-bottom: 0.7em;
}

.re-single-content a {
    color: #009e73;
    font-weight: 800;
    text-decoration: underline;
}

.re-single-content table {
    width: 100%;
    margin: 2.5em 0;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    font-size: 16px;
}

.re-single-content th,
.re-single-content td {
    padding: 16px;
    border: 1px solid #e2e8f0;
    vertical-align: top;
}

.re-single-content th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 900;
}

.re-single-content blockquote {
    margin: 2.5em 0;
    padding: 28px 32px;
    background: #f8fafc;
    border-left: 5px solid #009e73;
    color: #334155;
    font-weight: 700;
}

/* ===============================
   Category / Archive page
================================ */

.re-archive-page {
    background: #ffffff;
}

.re-archive-hero {
    padding: 96px 0 72px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.re-archive-inner {
    width: min(1152px, calc(100% - 48px));
    margin: 0 auto;
}

.re-archive-label {
    margin: 0 0 16px;
    color: #009e73;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.re-archive-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.re-archive-description {
    margin: 24px auto 0;
    max-width: 760px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 600;
}

.re-archive-list-section {
    padding: 96px 0 128px;
}

.re-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.re-archive-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.re-archive-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.re-archive-thumb {
    aspect-ratio: 16 / 10;
    background: #e2e8f0;
    overflow: hidden;
}

.re-archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.re-archive-card a:hover .re-archive-thumb img {
    transform: scale(1.05);
}

.re-archive-no-image {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.re-archive-card-body {
    padding: 28px;
}

.re-archive-date {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.re-archive-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 900;
}

.re-archive-excerpt {
    margin: 16px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 600;
}

.re-pagination {
    margin-top: 72px;
    text-align: center;
}

.re-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.re-pagination a,
.re-pagination span {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.re-pagination .current {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.re-archive-empty {
    text-align: center;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .re-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .re-single {
        padding: 72px 0 96px;
    }

    .re-single-inner,
    .re-archive-inner {
        width: min(100% - 32px, 100%);
    }

    .re-single-header h1,
    .re-archive-hero h1 {
        font-size: 30px;
    }

    .re-single-content {
        font-size: 16px;
        line-height: 2;
    }

    .re-single-content h2 {
        font-size: 24px;
    }

    .re-single-content h3 {
        font-size: 21px;
    }

    .re-archive-hero {
        padding: 72px 0 56px;
    }

    .re-archive-list-section {
        padding: 72px 0 96px;
    }

    .re-archive-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Single article page - tone update
================================ */

.re-single-page {
    background:
        linear-gradient(180deg, #f8fafc 0, #ffffff 420px);
    color: #0f172a;
}

.re-single {
    padding: 112px 0 144px;
}

.re-single-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.re-single-header {
    max-width: 900px;
    margin: 0 auto 72px;
    text-align: center;
}

.re-single-category {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.re-single-category a {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 900;
    text-decoration: none;
}

.re-single-header h1 {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.re-single-header h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 32px auto 0;
    background: #ff5a00;
    border-radius: 999px;
}

.re-single-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 800;
}

.re-single-eyecatch {
    margin-top: 48px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.re-single-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

.re-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}

.re-single-main {
    min-width: 0;
}

.re-single-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 56px 64px;
    color: #1e293b;
    font-size: 17px;
    line-height: 2.15;
    font-weight: 600;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.05);
}

.re-single-content > *:first-child {
    margin-top: 0;
}

.re-single-content p {
    margin: 0 0 2em;
}

.re-single-content a {
    color: #009e73;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.re-single-content h2 {
    position: relative;
    margin: 3.2em 0 1.2em;
    padding: 22px 28px 22px 32px;
    background: #475569;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.re-single-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: #ff5a00;
}

.re-single-content h3 {
    margin: 2.7em 0 1.1em;
    padding: 0 0 14px;
    border-bottom: 3px solid #e2e8f0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 900;
}

.re-single-content h3::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 14px;
    background: #ff5a00;
}

.re-single-content h4 {
    margin: 2.2em 0 1em;
    padding-left: 16px;
    border-left: 4px solid #009e73;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 900;
}

.re-single-content ul,
.re-single-content ol {
    margin: 0 0 2em;
    padding: 28px 32px 28px 52px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.re-single-content li {
    margin-bottom: 0.75em;
}

.re-single-content strong {
    color: #0f172a;
    font-weight: 900;
    background: linear-gradient(transparent 68%, rgba(255, 90, 0, 0.22) 68%);
}

.re-single-content blockquote {
    margin: 2.5em 0;
    padding: 32px 36px;
    background: #fff7ed;
    border-left: 6px solid #ff5a00;
    color: #1e293b;
    font-weight: 800;
}

.re-single-content table {
    width: 100%;
    margin: 2.5em 0;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    font-size: 15px;
    line-height: 1.8;
}

.re-single-content th,
.re-single-content td {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    vertical-align: top;
}

.re-single-content th {
    background: #475569;
    color: #ffffff;
    font-weight: 900;
}

.re-single-content td {
    background: #ffffff;
}

/* sidebar */
.re-single-sidebar {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 24px;
}

.re-sidebar-box {
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.re-sidebar-box h2 {
    margin: 0 0 18px;
    padding-left: 14px;
    border-left: 4px solid #ff5a00;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 900;
}

.re-sidebar-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.re-sidebar-box li {
    border-top: 1px solid #e2e8f0;
}

.re-sidebar-box li:first-child {
    border-top: 0;
}

.re-sidebar-box li a {
    display: block;
    padding: 14px 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 800;
    text-decoration: none;
}

.re-sidebar-box li a:hover {
    color: #009e73;
}

.re-sidebar-cta {
    background: #475569;
    border-color: #475569;
    color: #ffffff;
}

.re-sidebar-cta .re-sidebar-label {
    margin: 0 0 12px;
    color: #ffb180;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.re-sidebar-cta h2 {
    padding-left: 0;
    border-left: 0;
    color: #ffffff;
    font-size: 22px;
}

.re-sidebar-cta p {
    margin: 0 0 22px;
    color: rgba(255,255,255,0.86);
    font-size: 14px;
    line-height: 1.9;
    font-weight: 700;
}

.re-sidebar-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    background: #ff5a00;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(255, 90, 0, 0.24);
}

/* WordPress generated blocks */
.re-single-content .wp-block-image {
    margin: 2.5em 0;
}

.re-single-content .wp-block-image img {
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.re-single-content .wp-block-buttons {
    margin: 2.5em 0;
}

.re-single-content .wp-block-button__link {
    background: #ff5a00;
    color: #ffffff;
    border-radius: 0;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .re-single-layout {
        grid-template-columns: 1fr;
    }

    .re-single-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .re-sidebar-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .re-single {
        padding: 72px 0 96px;
    }

    .re-single-inner {
        width: min(100% - 32px, 100%);
    }

    .re-single-header {
        margin-bottom: 48px;
        text-align: left;
    }

    .re-single-category {
        justify-content: flex-start;
    }

    .re-single-header h1 {
        font-size: 30px;
    }

    .re-single-header h1::after {
        margin-left: 0;
    }

    .re-single-meta {
        justify-content: flex-start;
    }

    .re-single-content {
        padding: 32px 22px;
        font-size: 16px;
        line-height: 2;
    }

    .re-single-content h2 {
        font-size: 23px;
        padding: 18px 20px 18px 24px;
    }

    .re-single-content h3 {
        font-size: 21px;
    }

    .re-single-content ul,
    .re-single-content ol {
        padding: 22px 22px 22px 40px;
    }

    .re-single-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Single article final adjustment
================================ */

/* PC時の全体幅を広げる */
.re-single-inner {
    width: min(1360px, calc(100% - 48px)) !important;
}

/* 本文を広め、サイドバーは少しコンパクトに */
.re-single-layout {
    grid-template-columns: minmax(0, 860px) 300px !important;
    gap: 56px !important;
    justify-content: center !important;
    align-items: start !important;
}

.re-single-content {
    padding: 64px 72px !important;
    font-size: 18px !important;
    line-height: 2.15 !important;
}

/* h2：読みにくい濃色ベタをやめて、TOPに寄せた見出しに変更 */
.re-single-content h2 {
    position: relative !important;
    margin: 3.2em 0 1.3em !important;
    padding: 0 0 18px 24px !important;
    background: transparent !important;
    color: #0f172a !important;
    border-left: 6px solid #475569 !important;
    border-bottom: 1px solid #dbe3ea !important;
    font-size: 30px !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
}

.re-single-content h2::before {
    display: none !important;
}

.re-single-content h2::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 24px !important;
    bottom: -2px !important;
    width: 88px !important;
    height: 3px !important;
    background: #ff5a00 !important;
    border-radius: 999px !important;
}

/* h3も少しメリハリ */
.re-single-content h3 {
    margin: 2.6em 0 1.1em !important;
    padding: 18px 22px !important;
    background: #f8fafc !important;
    border-left: 5px solid #ff5a00 !important;
    border-bottom: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
}

.re-single-content h3::after {
    display: none !important;
}

/* 目次アコーディオン */
.re-toc-accordion {
    margin: 48px 0 56px !important;
    border: 1px solid #dbe3ea !important;
    background: #f8fafc !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05) !important;
}

.re-toc-accordion summary {
    cursor: pointer !important;
    list-style: none !important;
    padding: 22px 28px !important;
    background: #475569 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    position: relative !important;
}

.re-toc-accordion summary::-webkit-details-marker {
    display: none !important;
}

.re-toc-accordion summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffb180 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}

.re-toc-accordion[open] summary::after {
    content: "−" !important;
}

.re-toc-accordion ul,
.re-toc-accordion ol {
    margin: 0 !important;
    padding: 26px 32px 28px 52px !important;
    background: #ffffff !important;
    border: 0 !important;
}

.re-toc-accordion li {
    margin-bottom: 12px !important;
    color: #334155 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
}

.re-toc-accordion li:last-child {
    margin-bottom: 0 !important;
}

.re-toc-accordion a {
    color: #009e73 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}

/* サイドバーの新着記事を少し読みやすく */
.re-sidebar-box li a {
    line-height: 1.8 !important;
}

.re-sidebar-box li a[aria-current="page"] {
    color: #ff5a00 !important;
}

/* PCで本文が広くなったぶん、見出し上の余白を少し調整 */
.re-single-header {
    max-width: 980px !important;
}

/* タブレット以下 */
@media (max-width: 1024px) {
    .re-single-inner {
        width: min(100% - 40px, 100%) !important;
    }

    .re-single-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .re-single-content {
        padding: 48px 40px !important;
    }
}

/* スマホ */
@media (max-width: 767px) {
    .re-single-inner {
        width: min(100% - 32px, 100%) !important;
    }

    .re-single-content {
        padding: 32px 22px !important;
        font-size: 16px !important;
        line-height: 2 !important;
    }

    .re-single-content h2 {
        font-size: 24px !important;
        padding-left: 18px !important;
    }

    .re-single-content h2::after {
        left: 18px !important;
    }

    .re-single-content h3 {
        font-size: 21px !important;
        padding: 16px 18px !important;
    }

    .re-toc-accordion summary {
        padding: 18px 22px !important;
    }

    .re-toc-accordion summary::after {
        right: 22px !important;
    }

    .re-toc-accordion ul,
    .re-toc-accordion ol {
        padding: 22px 22px 24px 42px !important;
    }
}

/* ===============================
   Single article headings + TOC final
================================ */

/* h2：大見出し。背景なし・太い左線・オレンジ下線 */
.re-single-content h2 {
    position: relative !important;
    margin: 3.4em 0 1.35em !important;
    padding: 0 0 20px 26px !important;
    background: transparent !important;
    color: #0f172a !important;
    border-left: 8px solid #475569 !important;
    border-bottom: 1px solid #dbe3ea !important;
    font-size: 30px !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
}

.re-single-content h2::before {
    display: none !important;
}

.re-single-content h2::after {
    content: "" !important;
    position: absolute !important;
    left: 26px !important;
    bottom: -2px !important;
    width: 96px !important;
    height: 4px !important;
    background: #ff5a00 !important;
    border-radius: 999px !important;
}

/* h3：中見出し。淡い背景カードにしてh2と明確に分ける */
.re-single-content h3 {
    position: relative !important;
    margin: 2.6em 0 1.1em !important;
    padding: 18px 22px 18px 26px !important;
    background: #f8fafc !important;
    border: 1px solid #dbe3ea !important;
    border-left: 5px solid #ff5a00 !important;
    color: #0f172a !important;
    font-size: 23px !important;
    line-height: 1.6 !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

.re-single-content h3::after {
    display: none !important;
}

/* h4：小見出し */
.re-single-content h4 {
    margin: 2.1em 0 1em !important;
    padding-left: 14px !important;
    border-left: 4px solid #009e73 !important;
    color: #0f172a !important;
    font-size: 19px !important;
    line-height: 1.6 !important;
    font-weight: 900 !important;
}

/* 目次アコーディオン：初期は閉じる */
.re-toc-accordion {
    margin: 44px 0 56px !important;
    border: 1px solid #dbe3ea !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}

.re-toc-accordion summary {
    cursor: pointer !important;
    list-style: none !important;
    padding: 20px 28px !important;
    background: #475569 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    position: relative !important;
}

.re-toc-accordion summary::-webkit-details-marker {
    display: none !important;
}

.re-toc-accordion summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffb180 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
}

.re-toc-accordion[open] summary::after {
    content: "−" !important;
}

.re-toc-accordion ul,
.re-toc-accordion ol {
    margin: 0 !important;
    padding: 26px 32px 30px 54px !important;
    background: #f8fafc !important;
    border: 0 !important;
}

.re-toc-accordion li {
    margin-bottom: 12px !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
}

.re-toc-accordion li:last-child {
    margin-bottom: 0 !important;
}

.re-toc-accordion a {
    color: #009e73 !important;
    font-weight: 900 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}

/* ============================================
   FV 写真エリア レイアウト修正（完全版）
   目的：PC表示を SP表示（1枚目）と同じ
         写真3枚縦並び・コンパクト縦幅に統一
   ============================================ */

/* ── FV セクション全体 ───────────────────── */
.re-fv {
    min-height: unset !important;   /* 既存の高さ指定を解除 */
    height: auto !important;
    overflow: hidden;
}

/* ── FV 内部レイアウト（左テキスト＋右写真） ── */
.re-fv-inner {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: unset !important;
}

/* ── 左：テキスト部分 ──────────────────── */
.re-fv-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 高さはautoのまま */
}

/* ── 右：写真コンテナ ──────────────────── */
.re-fv-photos {
    width: 370px !important;        /* ← PC時の写真エリア幅（調整可） */
    flex: 0 0 370px !important;
    height: auto !important;        /* 高さを写真3枚分に自動調整 */
    max-height: none !important;
    overflow: hidden !important;
    position: relative;
}

/* ── 写真トラック（縦スクロール用ラッパー） ── */
.re-fv-photo-track {
    display: flex !important;
    flex-direction: column !important;
    /* スクロールアニメーションを使う場合はそのまま */
    /* 止めたい場合: animation: none !important; */
}

/* ── 個別の写真ブロック ──────────────────── */
.re-fv-photo {
    width: 100% !important;
    height: 200px !important;       /* ← 1枚あたりの高さ（3枚 × 200px = 600px） */
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.re-fv-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── アニメーションをOFFにして3枚だけ表示（静止版） ──
   ループ複製した4〜6枚目を非表示にする場合のみ使用
   ───────────────────────────────────────────────── */
/*
.re-fv-photo:nth-child(n+4) {
    display: none !important;
}
.re-fv-photo-track {
    animation: none !important;
}
*/


/* ============================================
   SP（スマホ）は既存スタイルを維持
   ============================================ */
@media (max-width: 768px) {
    .re-fv-inner {
        flex-direction: column !important;
    }

    .re-fv-photos {
        width: 100% !important;
        flex: none !important;
    }

    .re-fv-photo {
        height: 160px !important;
    }
}

/* ===============================
   TOC hierarchy adjustment
   目次：h2/h3階層・中黒削除
================================ */

.re-toc-accordion ul,
.re-toc-accordion ol,
.re-toc-accordion li {
    list-style: none !important;
}

.re-toc-accordion ul,
.re-toc-accordion ol {
    margin: 0 !important;
    padding: 28px 32px !important;
}

.re-toc-accordion li {
    margin: 0 !important;
    padding: 0 !important;
}

.re-toc-accordion li + li {
    margin-top: 14px !important;
}

/* h2相当：親項目 */
.re-toc-accordion .re-toc-h2 {
    padding-left: 0 !important;
}

.re-toc-accordion .re-toc-h2 a {
    display: inline-block !important;
    color: #009e73 !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 900 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}

/* h3相当：一字下げ */
.re-toc-accordion .re-toc-h3 {
    padding-left: 1.5em !important;
    position: relative !important;
}

.re-toc-accordion .re-toc-h3::before {
    content: "└" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.15em !important;
    color: #94a3b8 !important;
    font-weight: 900 !important;
}

.re-toc-accordion .re-toc-h3 a {
    display: inline-block !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* h4がある場合：さらに下げる */
.re-toc-accordion .re-toc-h4 {
    padding-left: 3em !important;
    position: relative !important;
}

.re-toc-accordion .re-toc-h4::before {
    content: "└" !important;
    position: absolute !important;
    left: 1.5em !important;
    top: 0.15em !important;
    color: #cbd5e1 !important;
    font-weight: 900 !important;
}

.re-toc-accordion .re-toc-h4 a {
    display: inline-block !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ================================================
   FV 写真エリア 最終修正
   ・アニメーション完全停止
   ・4枚を静止で縦並び表示
   ・左テキストと高さを合わせる
   ================================================ */

/* ── FV セクション全体 ── */
.re-fv {
    min-height: unset !important;
    height: auto !important;
    overflow: hidden !important;
    display: block !important;        /* flexを解除してシンプルに */
}

/* ── FV 内部（左テキスト＋右写真）── */
.re-fv-inner {
    width: min(1536px, 100%) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 370px !important;  /* ← 写真幅 */
    align-items: stretch !important;
    height: auto !important;
    min-height: unset !important;
    gap: 0 !important;
}

/* ── 左：テキスト ── */
.re-fv-main {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 64px 64px !important;
}

/* ── 右：写真コンテナ ── */
.re-fv-photos {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

/* ── 写真トラック：アニメーション完全停止 ── */
.re-fv-photo-track {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    animation: none !important;          /* ← ループアニメ停止 */
    transform: none !important;
    will-change: auto !important;
}

/* ── 写真1枚：4枚を均等に ── */
.re-fv-photo {
    width: 100% !important;
    height: 175px !important;            /* 4枚 × 175px = 700px */
    min-height: unset !important;
    overflow: hidden !important;
    flex: 0 0 175px !important;
}

.re-fv-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── @keyframes も念のため上書き停止 ── */
@keyframes re-fv-photo-loop {
    0%   { transform: translateY(0); }
    100% { transform: translateY(0); }   /* 動かさない */
}

/* ================================================
   タブレット・スマホ
   ================================================ */
@media (max-width: 1024px) {
    .re-fv-inner {
        grid-template-columns: 1fr !important;
    }

    .re-fv-main {
        padding: 64px 40px !important;
    }

    /* タブレット：横3列グリッドに */
    .re-fv-photos {
        height: 220px !important;
    }

    .re-fv-photo-track {
        flex-direction: row !important;
    }

    .re-fv-photo {
        flex: 1 1 0 !important;
        height: 220px !important;
    }
}

@media (max-width: 767px) {
    .re-fv-main {
        padding: 48px 24px !important;
    }

    /* スマホ：縦2枚 */
    .re-fv-photos {
        height: auto !important;
    }

    .re-fv-photo-track {
        flex-direction: column !important;
    }

    .re-fv-photo {
        flex: none !important;
        height: 180px !important;
    }
}

/* ===============================
   会社間余白を統一（最終上書き）
   全社同じ間隔・現在の約半分に
================================ */

#company-articles .re-company-detail {
    padding-top: 0 !important;
    padding-bottom: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 48px !important;
}

#company-articles .re-company-detail + .re-company-detail {
    padding-top: 48px !important;
    margin-top: 0 !important;
    border-top: 1px solid #e2e8f0;
}

/* 個別指定をリセット（1社目だけ広い問題を解消） */
#company-articles .re-company-detail-01,
#company-articles .re-company-detail-02,
#company-articles .re-company-detail-03 {
    margin-bottom: 48px !important;
    padding-bottom: 48px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2社目以降のpaddng-topは維持 */
#company-articles .re-company-detail-02,
#company-articles .re-company-detail-03 {
    padding-top: 48px !important;
}

/* 最終社は下余白不要 */
#company-articles .re-company-detail-03 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ===============================
   サイトマップページ用CSS
   既存のCSSの一番下に追記
================================ */

/* サイトマップページ全体 */
.page-template-sitemap,   /* カスタムテンプレートの場合 */
body.page-id-YOUR_PAGE_ID  /* ← サイトマップのページIDに変更 */
{
    background: var(--re-bg, #f8fafc);
}

/* WordPressが自動で付けるbodyクラスを使う方法（推奨） */
/* サイトマップページのbodyには .page-{slug} が付く */
body.page-sitemap {
    background: #ffffff;
    color: var(--re-text, #1f2937);
    font-family: "Noto Sans JP", sans-serif;
}

/* サイトマップ本文エリア */
body.page-sitemap .entry-content,
body.page-sitemap .page-content,
body.page-sitemap article {
    width: min(896px, calc(100% - 48px));
    margin: 80px auto 120px;
    padding: 0;
}

/* ページタイトル */
body.page-sitemap .entry-title,
body.page-sitemap h1.page-title {
    margin: 0 0 64px;
    color: #0f172a;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 900;
    padding-bottom: 20px;
    border-bottom: 3px solid #009e73;
}

/* h2見出し（TOPページ、エリア・コラム など） */
body.page-sitemap h2 {
    margin: 56px 0 24px;
    padding: 16px 20px;
    background: #f1f5f9;
    border-left: 5px solid #45556b;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 900;
}

/* h3見出し */
body.page-sitemap h3 {
    margin: 40px 0 16px;
    padding-left: 16px;
    border-left: 4px solid #009e73;
    color: #1e293b;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 900;
}

/* リスト */
body.page-sitemap ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

body.page-sitemap ul li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
    color: #334155;
}

body.page-sitemap ul li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #009e73;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
}

body.page-sitemap ul li a {
    color: #334155;
    text-decoration: none;
    transition: color 0.2s;
}

body.page-sitemap ul li a:hover {
    color: #009e73;
    text-decoration: underline;
}

@media (max-width: 767px) {
    body.page-sitemap .entry-content,
    body.page-sitemap .page-content,
    body.page-sitemap article {
        width: min(100% - 32px, 100%);
        margin: 48px auto 80px;
    }

    body.page-sitemap h1.page-title,
    body.page-sitemap .entry-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    body.page-sitemap h2 {
        font-size: 18px;
        margin-top: 40px;
    }
}
/* ===============================
   サイトマップページ CSS
   既存CSSの一番下に追記してください
================================ */

.sitemap-section {
    background: #ffffff;
    padding: 80px 0 120px;
}

.sitemap-section .inner,
.sitemap-section .narrow-inner {
    width: min(896px, calc(100% - 48px));
    margin: 0 auto;
}

/* ページタイトル */
.sitemap-title {
    margin: 0 0 64px;
    padding-bottom: 20px;
    border-bottom: 3px solid #009e73;
    color: #0f172a;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 900;
}

/* 各ブロック */
.sitemap-block {
    margin-bottom: 56px;
}

/* h2見出し（TOPページ、エリア・コラム など） */
.sitemap-heading {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: #f1f5f9;
    border-left: 5px solid #45556b;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 900;
}

.sitemap-heading-link {
    color: inherit;
    text-decoration: none;
}

.sitemap-heading-link:hover {
    color: #009e73;
}

/* リスト */
.sitemap-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitemap-list li {
    position: relative;
    padding: 12px 0 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
    color: #334155;
}

.sitemap-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #009e73;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
}

.sitemap-list li a {
    color: #334155;
    text-decoration: none;
}

.sitemap-list li a:hover {
    color: #009e73;
    text-decoration: underline;
}

/* 子リスト（記事一覧） */
.sitemap-child-list li {
    font-size: 15px;
    font-weight: 500;
}

/* 記事なし */
.sitemap-empty {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

/* レスポンシブ */
@media (max-width: 767px) {
    .sitemap-section {
        padding: 48px 0 80px;
    }

    .sitemap-section .inner,
    .sitemap-section .narrow-inner {
        width: min(100% - 32px, 100%);
    }

    .sitemap-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .sitemap-heading {
        font-size: 18px;
    }

    .sitemap-list li {
        font-size: 14px;
        padding: 10px 0 10px 18px;
    }
}
.re-detail-main-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 64px;
}
 
.re-detail-main-heading h2 {
    margin: 0;
}
 
.re-detail-main-heading-illust {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
 
@media (max-width: 767px) {
    .re-detail-main-heading-illust {
        width: 56px;
        height: 56px;
    }
}

.re-section-heading-inner {
    position: relative;
    display: inline-block;
}
 
.re-section-heading h2 {
    font-size: 20px !important;
    line-height: 1.6 !important;
    font-weight: 800 !important;
    text-align: left !important;
}

.re-insight-h2-small {
    font-size: 38px;
    font-weight: 700;
}

.re-insight-h2-large {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .re-section-heading h2 {
        font-size: 16px !important;
    }

    .re-insight-h2-small {
        font-size: 16px;
    }

    .re-insight-h2-large {
        font-size: 28px;
    }
}

.re-insight {
    position: relative;
}

.re-section-heading-inner {
    position: static;
    display: block;
}

.re-section-heading h2 {
    font-size: 20px !important;
    line-height: 1.6 !important;
    font-weight: 800 !important;
    text-align: left !important;
}

.re-insight-h2-small {
    font-size: 20px;
    font-weight: 700;
}

.re-insight-h2-large {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.3;
}

.re-insight-person-illust {
    position: absolute;
    top: 60px;
    right: 40px;
    width: 160px;
    height: auto;
    opacity: 0.75;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .re-insight-person-illust {
        width: 120px;
        right: 20px;
        top: 40px;
    }
}

@media (max-width: 900px) {
    .re-insight-person-illust {
        display: none;
    }
}

@media (max-width: 767px) {
    .re-insight-h2-small {
        font-size: 16px;
    }

    .re-insight-h2-large {
        font-size: 28px;
    }
}

/* ===============================
   Company list show more + equal height
================================ */

.re-company-list-grid {
    align-items: stretch !important;
}

.re-company-list-card {
    height: 100% !important;
    min-height: 760px !important;
    display: flex !important;
    flex-direction: column !important;
}

.re-company-list-card.is-hidden-company {
    display: none !important;
}

.re-company-list-card-head {
    min-height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.re-company-list-card-head h3 {
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.re-company-list-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.re-company-list-info {
    min-height: 112px !important;
}

.re-company-list-map {
    margin-top: auto !important;
    height: 170px !important;
    min-height: 170px !important;
}

.re-company-list-card-foot {
    margin-top: auto !important;
    min-height: 108px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.re-company-list-card-foot a {
    width: 100% !important;
    max-width: 260px !important;
}

.re-company-more {
    margin-top: 64px !important;
    text-align: center !important;
}

.re-company-more-button {
    appearance: none !important;
    border: 0 !important;
    cursor: pointer !important;
    min-width: 420px !important;
    min-height: 72px !important;
    padding: 20px 48px !important;
    border-radius: 999px !important;
    background: #6b7c91 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16) !important;
}

.re-company-more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.2) !important;
}

@media (max-width: 767px) {
    .re-company-list-card {
        min-height: auto !important;
    }

    .re-company-list-card-head,
    .re-company-list-card-head h3,
    .re-company-list-info {
        min-height: auto !important;
    }

    .re-company-more-button {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 18px !important;
    }
}
/* ===============================
   Market source
================================ */

.re-market-area {
    position: relative;
}

.re-market-source {
    margin: 16px 0 0;
    text-align: right;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.re-market-source a {
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.re-market-source a:hover {
    color: #009e73;
}

/* ===============================
   Review cards from ACF
================================ */

.re-review-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.re-review-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 32px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ea !important;
    min-height: 170px !important;
}

.re-review-icon {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
}

.re-review-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.re-review-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.re-review-content p {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    line-height: 1.9 !important;
    font-weight: 800 !important;
}

.re-review-content small {
    display: block !important;
    margin-top: 18px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.re-review-content small a {
    color: #64748b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.re-review-content small a:hover {
    color: #009e73 !important;
}

@media (max-width: 767px) {
    .re-review-list {
        grid-template-columns: 1fr !important;
    }

    .re-review-card {
        padding: 24px !important;
    }
}

/* ===============================
   Review card wide layout
================================ */

.re-review-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}

.re-review-card {
    width: 100% !important;
    min-height: 190px !important;
    padding: 44px 56px !important;
    display: flex !important;
    align-items: center !important;
    gap: 48px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ea !important;
    box-shadow: none !important;
}

.re-review-icon {
    flex: 0 0 88px !important;
    width: 88px !important;
    height: 88px !important;
}

.re-review-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.re-review-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.re-review-content p {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    line-height: 1.8 !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

.re-review-content small {
    display: block !important;
    margin-top: 22px !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.re-review-content small a {
    color: #475569 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.re-review-content small a:hover {
    color: #009e73 !important;
}

@media (max-width: 767px) {
    .re-review-card {
        min-height: auto !important;
        padding: 28px 22px !important;
        gap: 18px !important;
        align-items: flex-start !important;
    }

    .re-review-icon {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
    }

    .re-review-content p {
        font-size: 17px !important;
        line-height: 1.9 !important;
    }

    .re-review-content small {
        text-align: left !important;
        font-size: 12px !important;
    }
}

/* ===============================
   Result source
================================ */

.re-result-source {
    margin: 14px 0 0 !important;
    text-align: right !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
}

.re-result-source a {
    color: #64748b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.re-result-source a:hover {
    color: #009e73 !important;
}

/* ===============================
   Company detail section background
   会社詳細：会社ごとの背景差分
================================ */

/* 会社詳細ブロック全体 */
.re-company-detail {
    position: relative !important;
    padding: 96px 0 !important;
}

/* 1社目：白 */
.re-company-detail:nth-of-type(1) {
    background: #ffffff !important;
}

/* 2社目：薄いグレー */
.re-company-detail:nth-of-type(2) {
    background: #f8fafc !important;
}

/* 3社目：少し温かい薄色 */
.re-company-detail:nth-of-type(3) {
    background: #fffaf5 !important;
}

/* 各会社ブロックの上下に区切り線 */
.re-company-detail + .re-company-detail {
    border-top: 1px solid #e2e8f0 !important;
}

/* 中のカード類は白を維持して見やすく */
.re-company-detail .re-point-card,
.re-company-detail .re-review-card,
.re-company-detail .re-result-table-wrap,
.re-company-detail .re-company-info,
.re-company-detail .re-company-profile,
.re-company-detail .re-good-bad,
.re-company-detail .re-company-summary {
    background: #ffffff !important;
}

/* 会社ごとの冒頭KVは少し浮かせる */
.re-company-detail .re-company-kv {
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
}

/* 2社目以降の見出しが背景に埋もれないように */
.re-company-detail h4 {
    position: relative !important;
}

/* スマホは余白を少し控えめに */
@media (max-width: 767px) {
    .re-company-detail {
        padding: 72px 0 !important;
    }
}

/* ===============================
   Company detail full width background
   会社詳細：背景を画面横いっぱいにする
================================ */

.re-company-detail {
    position: relative !important;
    z-index: 0 !important;
    padding: 96px 0 !important;
    background: transparent !important;
}

/* 横幅いっぱいの背景レイヤー */
.re-company-detail::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    z-index: -1 !important;
}

/* 1社目 */
.re-company-detail:nth-of-type(1)::before {
    background: #ffffff !important;
}

/* 2社目 */
.re-company-detail:nth-of-type(2)::before {
    background: #f8fafc !important;
}

/* 3社目 */
.re-company-detail:nth-of-type(3)::before {
    background: #fffaf5 !important;
}

/* 会社詳細内の中身は通常幅のまま */
.re-company-detail > * {
    position: relative !important;
    z-index: 1 !important;
}

/* 区切り線も横幅いっぱい */
.re-company-detail + .re-company-detail::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: #e2e8f0 !important;
    z-index: 0 !important;
}

/* 中のカードは白のまま */
.re-company-detail .re-point-card,
.re-company-detail .re-review-card,
.re-company-detail .re-result-table-wrap,
.re-company-detail .re-company-info,
.re-company-detail .re-company-profile,
.re-company-detail .re-good-bad,
.re-company-detail .re-company-summary,
.re-company-detail .re-company-overview,
.re-company-detail .re-company-kv {
    background-color: #ffffff !important;
}

@media (max-width: 767px) {
    .re-company-detail {
        padding: 72px 0 !important;
    }
}

/* ===============================
   Articles archive page
================================ */

.re-archive-page {
    background: #ffffff;
    color: #0f172a;
}

.re-archive-hero {
    padding: 96px 0 56px;
    background: #f8fafc;
    text-align: center;
}

.re-archive-label {
    margin: 0 0 16px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.re-archive-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 48px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.re-archive-lead {
    margin: 20px 0 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
    font-weight: 700;
}

.re-archive-list-section {
    padding: 72px 0 112px;
}

.re-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.re-archive-card {
    background: #ffffff;
    border: 1px solid #dbe3ea;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.re-archive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

.re-archive-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.re-archive-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #e2eaf2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
}

.re-archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.re-archive-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px;
}

.re-archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.re-archive-meta span {
    display: inline-flex;
    align-items: center;
}

.re-archive-meta span + span::before {
    content: "";
    width: 1px;
    height: 12px;
    margin-right: 10px;
    background: #cbd5e1;
}

.re-archive-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 900;
}

.re-archive-card p {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
    font-weight: 600;
}

.re-archive-more {
    margin-top: auto;
    padding-top: 28px;
    color: #ea580c;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.re-archive-empty {
    text-align: center;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .re-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .re-archive-hero {
        padding: 72px 0 40px;
    }

    .re-archive-hero h1 {
        font-size: 34px;
    }

    .re-archive-list-section {
        padding: 48px 0 80px;
    }

    .re-archive-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
/* ===============================
   FV photo 2 x 2 grid
================================ */

.re-fv-photos {
    height: 100% !important;
    overflow: hidden !important;
}

.re-fv-photo-track {
    animation: none !important;
    transform: none !important;
}

.re-fv-photo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: 100% !important;
}

.re-fv-photo {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.re-fv-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* 少しだけ写真に動きを付ける */
.re-fv-photo img {
    animation: reFvPhotoZoom 12s ease-in-out infinite alternate;
}

.re-fv-photo:nth-child(2) img {
    animation-delay: 1s;
}

.re-fv-photo:nth-child(3) img {
    animation-delay: 2s;
}

.re-fv-photo:nth-child(4) img {
    animation-delay: 3s;
}

@keyframes reFvPhotoZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

@media (max-width: 767px) {
    .re-fv-photo-grid {
        min-height: 320px !important;
    }
}