/*
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;
    }
}

/* ===============================
   Hero テキスト修正（Figma準拠）
================================ */

/* leadテキスト：ブラウン、40px */
.hatano-hero-lead {
    font-size: 40px;
    color: #3d3226;
    margin-bottom: 0;
    line-height: 1.98;
}

/* h1：グリーングラデーション、64px */
.hatano-hero-title {
    font-size: 64px;
    line-height: 1.238;
    margin-bottom: 0;
    background: linear-gradient(90deg, #6b8e6f 0%, #6d9071 50%, #6b8e6f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* h1内の「を」「で」などの助詞 */
.hatano-hero-title .small {
    font-size: 40px;
}

/* 本文テキスト：非表示（Figmaではhidden） */
.hatano-hero-text {
    display: none;
}

/* ボタン位置調整：Figmaではleadの直下ではなくh1の下に独立 */
.hatano-hero-buttons {
    margin-top: 56px;
}

/* アウトラインボタンの色をグリーンに */
.hatano-btn-outline {
    color: #6b8e6f;
    border-color: #6b8e6f;
}

/* ===============================
   Hero h1 修正（Figma準拠）
================================ */

.hatano-hero-title {
    font-size: 64px;
    line-height: 1.238;
    background: linear-gradient(90deg, #6b8e6f 0%, #7a9b7e 50%, #6b8e6f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 「を」：グリーン→グレー寄りグラデーション */
.hatano-hero-title .small-wo {
    font-size: 40px;
    background: linear-gradient(90deg, #6b8e6f 0%, #4a4a4a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 「で」：グリーン→黒グラデーション */
.hatano-hero-title .small-de {
    font-size: 40px;
    background: linear-gradient(90deg, rgba(107,142,111,0.44) 0%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* leadテキスト */
.hatano-hero-lead {
    font-size: 40px;
    color: #3d3226;
    line-height: 1.98;
    margin-bottom: 0;
}

/* 本文テキスト */
.hatano-hero-text {
    font-size: 16px;
    color: #8b7d6b;
    display: block;
}

/* ===============================
   比較テーブル ロゴサイズ修正（Figma準拠）
================================ */

.hatano-company-head img {
    width: 60px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
}
/* ===============================
   会社の特徴 ラベル太字修正
================================ */

.hatano-company-feature-box li strong {
    font-weight: 700;
    color: var(--hatano-text);
}
/* ===============================
   口コミ 引用元
================================ */

.hatano-review-source {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--hatano-muted);
}

.hatano-review-source a {
    color: var(--hatano-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hatano-review-source a:hover {
    color: var(--hatano-green-dark);
}

/* ===============================
   会社一覧 もっとみるボタン（button対応）
================================ */

button.hatano-more-button {
    width: 100%;
    border: none;
    cursor: pointer;
}

/* ===============================
   記事一覧・カテゴリページ
================================ */

.hatano-blog-grid--full {
    grid-template-columns: repeat(3, 1fr);
}

.hatano-blog-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hatano-blog-card h2 {
    margin: 0 0 8px;
    color: var(--hatano-text);
    font-size: 14px;
    line-height: 1.5;
}

.hatano-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hatano-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hatano-border);
    border-radius: 4px;
    font-size: 14px;
    color: var(--hatano-text);
    background: #fff;
}

.hatano-pagination .page-numbers.current {
    background: var(--hatano-green);
    color: #fff;
    border-color: var(--hatano-green);
}

.hatano-pagination a.page-numbers:hover {
    background: var(--hatano-bg);
}

/* ===============================
   固定ページ（プライバシーポリシー等）
================================ */

.hatano-page-article {
    padding: 40px 0;
}

.hatano-page-title {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--hatano-green);
    color: var(--hatano-text);
}

.hatano-page-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--hatano-text);
}

.hatano-page-body h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 16px;
    padding-left: 12px;
    border-left: 4px solid var(--hatano-green);
}

.hatano-page-body h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 12px;
}

.hatano-page-body p {
    margin: 0 0 16px;
}

.hatano-page-body a {
    color: var(--hatano-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .hatano-blog-grid--full {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .hatano-page-title {
        font-size: 22px;
    }
}

/* ===============================
   記事ページ（single）
================================ */

.hatano-single-main {
    background: var(--hatano-bg-light);
    padding: 48px 0 88px;
}

.hatano-single-inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}

/* 記事本文エリア */
.hatano-single-article {
    background: #fff;
    padding: 40px;
}

.hatano-single-meta-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hatano-single-category {
    display: inline-block;
    padding: 3px 12px;
    background: var(--hatano-green-soft);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
}

.hatano-single-dates {
    font-size: 12px;
    color: var(--hatano-muted);
}

.hatano-single-title {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--hatano-text);
}

.hatano-single-thumb {
    margin-bottom: 32px;
    border-radius: 8px;
    overflow: hidden;
}

.hatano-single-thumb img {
    width: 100%;
    height: auto;
}

/* 本文スタイル */
.hatano-single-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--hatano-text);
}

.hatano-single-body h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 16px;
    padding: 12px 16px;
    background: var(--hatano-bg);
    border-left: 4px solid var(--hatano-green);
}

.hatano-single-body h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hatano-border);
}

.hatano-single-body p {
    margin: 0 0 20px;
}

.hatano-single-body a {
    color: var(--hatano-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hatano-single-body ul,
.hatano-single-body ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.hatano-single-body li {
    margin-bottom: 8px;
}

.hatano-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* サイドバー */
.hatano-single-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hatano-sidebar-block {
    background: #fff;
    padding: 24px;
}

.hatano-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hatano-green);
    color: var(--hatano-text);
}

.hatano-sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* よく読まれている記事（サムネイル付き） */
.hatano-sidebar-item a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--hatano-text);
    text-decoration: none;
}

.hatano-sidebar-item a:hover .hatano-sidebar-item-title {
    color: var(--hatano-green);
}

.hatano-sidebar-thumb {
    width: 80px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

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

.hatano-sidebar-item-title {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    transition: color 0.2s;
}

/* 記事一覧（テキストのみ） */
.hatano-sidebar-item--text a {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid var(--hatano-border);
    color: var(--hatano-text);
    text-decoration: none;
}

.hatano-sidebar-item--text a:hover {
    color: var(--hatano-green);
}

.hatano-sidebar-item--text.is-current a {
    color: var(--hatano-green);
    font-weight: 700;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .hatano-single-inner {
        grid-template-columns: 1fr;
    }

    .hatano-single-sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .hatano-single-article {
        padding: 24px 16px;
    }

    .hatano-single-title {
        font-size: 22px;
    }
}

/* ===============================
   目次（TOC）
================================ */

.hatano-toc {
    margin: 0 0 40px;
    border: 1px solid var(--hatano-border);
    border-radius: 8px;
    background: var(--hatano-bg-light);
    overflow: hidden;
}

.hatano-toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--hatano-text);
    font-family: "Noto Sans JP", sans-serif;
}

.hatano-toc-arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.hatano-toc-toggle[aria-expanded="true"] .hatano-toc-arrow {
    transform: rotate(180deg);
}

.hatano-toc-body {
    padding: 0 20px 20px;
}

.hatano-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc-h2;
}

/* h2 項目 */
.hatano-toc-h2 {
    counter-increment: toc-h2;
    counter-reset: toc-h3;
    margin-bottom: 6px;
}

.hatano-toc-h2 > a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hatano-text);
    text-decoration: none;
    padding: 4px 0;
    line-height: 1.5;
}

.hatano-toc-h2 > a:hover {
    color: var(--hatano-green);
}

/* h3 項目 */
.hatano-toc-h3-list {
    margin: 4px 0 8px 16px;
    padding: 0;
    list-style: none;
}

.hatano-toc-h3 {
    counter-increment: toc-h3;
    margin-bottom: 4px;
}

.hatano-toc-h3 > a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--hatano-muted);
    text-decoration: none;
    padding: 3px 0;
    line-height: 1.5;
    border-left: 2px solid var(--hatano-border);
    padding-left: 10px;
}

.hatano-toc-h3 > a:hover {
    color: var(--hatano-green);
    border-left-color: var(--hatano-green);
}
/* ===============================
   サイドバー sticky 解除
================================ */

.hatano-single-sidebar {
    position: static;
    top: auto;
}

/* ===============================
   目次 中黒解除
================================ */

.hatano-toc-list,
.hatano-toc-h3-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.hatano-toc-list li,
.hatano-toc-h3-list li {
    list-style: none !important;
    list-style-type: none !important;
}

/* WordPressテーマのul/olリセットが上書きしている場合の対策 */
.hatano-toc ol,
.hatano-toc ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.hatano-toc-h3-list {
    margin-left: 16px !important;
}

/* ===============================
   目次（TOC）リセット＆再定義
================================ */

.hatano-toc {
    margin: 0 0 40px;
    border: 1px solid #d9d6d1;
    border-radius: 8px;
    background: #fdfbf7;
    overflow: hidden;
}

.hatano-toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: #4a4a4a;
    font-family: "Noto Sans JP", sans-serif;
    user-select: none;
}

.hatano-toc-arrow {
    font-size: 12px;
}

.hatano-toc-body {
    padding: 0 20px 20px;
}

/* ===============================
   目次（functions.php生成版）
================================ */

.post-toc {
    margin: 0 0 40px;
    border: 1px solid var(--hatano-border);
    border-radius: 8px;
    background: var(--hatano-bg-light);
    overflow: hidden;
}

.post-toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--hatano-text);
    font-family: "Noto Sans JP", sans-serif;
    text-align: left;
}

.post-toc-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex-shrink: 0;
}

.post-toc-icon::before,
.post-toc-icon::after {
    content: "";
    position: absolute;
    background: var(--hatano-text);
    transition: transform 0.2s ease;
}

.post-toc-icon::before {
    width: 10px;
    height: 2px;
    top: 7px;
    left: 3px;
}

.post-toc-icon::after {
    width: 2px;
    height: 10px;
    top: 3px;
    left: 7px;
}

.post-toc-toggle[aria-expanded="true"] .post-toc-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.post-toc-body {
    padding: 0 20px 20px;
}

/* 初期非表示はmain.jsで制御されているはずですが、
   念のためCSSでも非表示にしておく */
.post-toc-body:not([style*="display: block"]) {
    display: none;
}

.post-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.post-toc-item {
    list-style: none !important;
}

/* h2項目 */
.post-toc-level-2 > a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hatano-text);
    text-decoration: none;
    padding: 5px 0;
    line-height: 1.5;
    border-bottom: none;
}

.post-toc-level-2 > a:hover {
    color: var(--hatano-green);
}

/* h3項目 */
.post-toc-level-3 {
    margin-left: 16px !important;
}

.post-toc-level-3 > a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--hatano-muted);
    text-decoration: none;
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--hatano-border);
    line-height: 1.5;
}

.post-toc-level-3 > a:hover {
    color: var(--hatano-green);
    border-left-color: var(--hatano-green);
}

/* ===============================
   目次（post-toc）スタイル修正
================================ */

/* 初期は閉じた状態 */
.post-toc-body {
    display: none;
    padding: 0 20px 20px;
}

/* is-openクラスがついたら表示 */
.post-toc.is-open .post-toc-body {
    display: block;
}

/* 目次ボックス全体 */
.post-toc {
    margin: 0 0 40px;
    border: 1px solid var(--hatano-border);
    border-radius: 8px;
    background: var(--hatano-bg-light);
    overflow: hidden;
}

/* トグルボタン */
.post-toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--hatano-text);
    font-family: "Noto Sans JP", sans-serif;
    text-align: left;
}

/* アイコン（＋/－） */
.post-toc-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex-shrink: 0;
}

.post-toc-icon::before,
.post-toc-icon::after {
    content: "";
    position: absolute;
    background: var(--hatano-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.post-toc-icon::before {
    width: 10px;
    height: 2px;
    top: 7px;
    left: 3px;
}

.post-toc-icon::after {
    width: 2px;
    height: 10px;
    top: 3px;
    left: 7px;
}

/* 開いたときは縦線を消して－に */
.post-toc.is-open .post-toc-icon::after {
    opacity: 0;
}

/* リスト：中黒なし */
.post-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.post-toc-item {
    list-style: none !important;
}

/* h2項目 */
.post-toc-level-2 {
    margin-bottom: 6px;
}

.post-toc-level-2 > a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hatano-text);
    text-decoration: none;
    padding: 4px 0;
    line-height: 1.5;
}

.post-toc-level-2 > a:hover {
    color: var(--hatano-green);
}

/* h3項目 */
.post-toc-level-3 {
    margin-left: 16px !important;
    margin-bottom: 4px;
}

.post-toc-level-3 > a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--hatano-muted);
    text-decoration: none;
    padding: 3px 0 3px 10px;
    border-left: 2px solid var(--hatano-border);
    line-height: 1.5;
}

.post-toc-level-3 > a:hover {
    color: var(--hatano-green);
    border-left-color: var(--hatano-green);
}

/* ===============================
   会社カード Googleマップ
================================ */

.hatano-company-card-map {
    position: relative;
    aspect-ratio: 310 / 174;
    overflow: hidden;
}

.hatano-company-card-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===============================
   画像引用元テキスト
================================ */

.hatano-image-source {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--hatano-muted);
    text-align: right;
}

.hatano-image-source a {
    color: var(--hatano-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hatano-image-source a:hover {
    color: var(--hatano-green);
}

/* ===============================
   会社の特徴 strong色修正
================================ */

/* ラベル部分（コロンまで）：テキスト色・太字 */
.hatano-company-feature-box li > strong:first-child {
    color: var(--hatano-text);
    font-weight: 700;
}

/* 本文中のstrong（コロン以降の強調）：水色を維持 */
.hatano-company-feature-box li strong:not(:first-child) {
    color: #3586c0;
    font-weight: 700;
}

/* ===============================
   よく読まれている記事 縦並び修正
================================ */

.hatano-sidebar-item a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--hatano-text);
    text-decoration: none;
}

.hatano-sidebar-thumb {
    width: 100%;
    height: 160px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.hatano-sidebar-item-body {
    width: 100%;
}

.hatano-sidebar-item-title {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: var(--hatano-text);
    word-break: break-word;
}

.hatano-sidebar-item a:hover .hatano-sidebar-item-title {
    color: var(--hatano-green);
}

/* ===============================
   よく読まれている記事 サムネイルサイズ修正
================================ */

.hatano-sidebar-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}

.hatano-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: var(--hatano-bg);
}

/* ===============================
   よく読まれている記事 サムネイル修正
================================ */

.hatano-sidebar-thumb {
    width: 100%;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.hatano-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hatano-company-card-grid {
    align-items: stretch; /* これを追加 */
}

.hatano-company-card {
    height: 100%; /* これを追加 */
    display: flex;
    flex-direction: column;
}

.hatano-company-card-body {
    flex: 1; /* bodyが伸びて高さを埋める */
}

.hatano-company-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* テキスト部分（所在地・電話番号）が伸びてマップを下に押し下げる */
.hatano-company-card-body dl {
    flex: 1;
}

.hatano-quick-list {
    gap: 12px; /* 間隔はお好みで */
}

.hatano-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 上揃え */
    min-width: 160px; /* ← 横幅を広げる */
    padding: 20px 16px;
}

/* ===============================
   Quick Nav 高さ・幅揃え修正
================================ */

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

.hatano-quick-item {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.hatano-company-profile-box .profile-office-name {
    display: block;
    grid-template-columns: unset;
}

.hatano-company-profile-box .profile-office-name dd {
    font-weight: 700;
    font-size: 15px;
    color: var(--hatano-text);
    margin: 0;
}

.hatano-company-catch {
    font-size: 50px; /* お好みで調整 */
}

.hatano-company-catch {
    font-size: 50px !important;
}

.hatano-company-title-block .hatano-company-catch,
.hatano-company-article .hatano-company-catch {
    font-size: 30px !important;
}

.hatano-company-title-block .hatano-company-catch {
    font-size: 30px !important;
}

.hatano-company-title-block h3 {
    font-size: 40px !important; /* お好みで調整 */
}

/* ===============================
   サイトマップ
================================ */

.sitemap-section {
    padding: 40px 0 88px;
    background: #ffffff;
}

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

.sitemap-title {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--hatano-green);
    color: var(--hatano-text);
}

.sitemap-block {
    margin-bottom: 40px;
}

.sitemap-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 4px solid var(--hatano-green);
    color: var(--hatano-text);
}

.sitemap-heading-link {
    color: var(--hatano-text);
    text-decoration: none;
}

.sitemap-heading-link:hover {
    color: var(--hatano-green);
}

.sitemap-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitemap-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--hatano-border);
    font-size: 15px;
    line-height: 1.6;
}

.sitemap-list li a {
    color: var(--hatano-text);
    text-decoration: none;
}

.sitemap-list li a:hover {
    color: var(--hatano-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sitemap-empty {
    color: var(--hatano-muted);
    font-size: 14px;
}

.hatano-company-card {
    display: flex;
    flex-direction: column;
}

.hatano-company-card-body {
    flex: 1;
}

.hatano-company-card-foot-placeholder {
    min-height: 64px; /* ボタンの高さ分 */
}

/* ===============================
   ハンバーガーメニュー
================================ */

.site-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.site-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--hatano-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
    .site-nav-toggle {
        display: flex;
    }

    .site-nav ul {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        z-index: 100;
    }

    .site-nav ul.is-open {
        display: flex;
    }

    .site-nav a {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .site-header-inner {
        flex-direction: row; /* 横並びに戻す */
        align-items: center;
        height: 60px;
    }

    .site-nav {
        margin-left: auto; /* 右端に寄せる */
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
}

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

@media (max-width: 767px) {
    .hatano-compare-table-wrap {
        overflow-x: unset;
    }

    .hatano-compare-table {
        min-width: unset;
        width: 100%;
    }

    /* テーブルをブロック表示に変換 */
    .hatano-compare-table thead {
        display: none;
    }

    .hatano-compare-table tbody {
        display: block;
    }

    .hatano-compare-table tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr 1fr;
        border-bottom: 1px solid var(--hatano-green-dark);
    }

    .hatano-compare-table tbody tr th,
    .hatano-compare-table tbody tr td {
        font-size: 11px;
        padding: 8px 6px;
        border: none;
        border-right: 1px solid var(--hatano-green-dark);
    }

    .hatano-compare-table tbody tr th {
        background: #f8f8f8;
    }

    /* ボタンをスマホで縦1列に */
    .hatano-compare-buttons {
        width: 100%;
        margin: 24px 0 0;
    }

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

/* ===============================
   比較テーブル ボタン修正
================================ */

.hatano-compare-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}

.hatano-compare-company-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 767px) {
    .hatano-compare-buttons {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   比較テーブル タブ（スマホのみ）
================================ */

.hatano-compare-tabs {
    display: none;
}

@media (max-width: 767px) {
    .hatano-compare-tabs {
        display: block;
        margin-bottom: 16px;
    }

    .hatano-compare-tab-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .hatano-compare-tab-btn {
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 700;
        border: 2px solid var(--hatano-border);
        border-radius: 8px;
        background: #ffffff;
        color: var(--hatano-text);
        cursor: pointer;
        font-family: "Noto Sans JP", sans-serif;
    }

    .hatano-compare-tab-btn.is-active {
        background: var(--hatano-green);
        color: #ffffff;
        border-color: var(--hatano-green);
    }

    .hatano-compare-table thead th:last-child,
    .hatano-compare-table tbody td:last-child {
        display: none;
    }

    .hatano-compare-table.show-ichijo thead th:last-child,
    .hatano-compare-table.show-ichijo tbody td:last-child {
        display: table-cell;
    }

    .hatano-compare-table.show-ichijo thead th:nth-child(2),
    .hatano-compare-table.show-ichijo tbody td:nth-child(2) {
        display: none;
    }

    #btn-ichijo {
        display: none;
    }

    .hatano-compare-company-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .hatano-compare-table-wrap {
        overflow-x: unset;
    }

    .hatano-compare-table {
        min-width: unset;
        width: 100%;
        display: block;
    }

    .hatano-compare-table thead {
        display: none;
    }

    .hatano-compare-table tbody {
        display: block;
        width: 100%;
    }

    .hatano-compare-table tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr;
        border-bottom: 1px solid var(--hatano-green-dark);
    }

    .hatano-compare-table tbody tr th,
    .hatano-compare-table tbody tr td {
        font-size: 12px;
        padding: 8px 6px;
        border: none;
        border-right: 1px solid var(--hatano-green-dark);
        display: block;
    }

    .hatano-compare-table tbody tr td:last-child {
        display: none;
    }

    .hatano-compare-table.show-ichijo tbody tr td:last-child {
        display: block;
    }

    .hatano-compare-table.show-ichijo tbody tr td:nth-child(2) {
        display: none;
    }
}

/* PC時はボタン両方表示 */
@media (min-width: 768px) {
    .hatano-compare-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 24px;
        width: 100%;
    }

    #btn-hatano,
    #btn-ichijo {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .hatano-compare-table tbody tr th {
        border-right: 1px solid var(--hatano-green-dark);
        border-bottom: none;
    }

    .hatano-compare-table tbody tr td {
        border-right: none;
        border-bottom: none;
    }

    .hatano-compare-table tbody tr {
        border-bottom: 1px solid var(--hatano-green-dark);
    }
}

@media (min-width: 768px) {
    .hatano-compare-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 12px;
        width: calc(100% - 200px); /* 項目列200px分を除いた幅 */
        margin-left: auto; /* 右寄せ（項目列の右から始まる） */
    }
}

@media (max-width: 767px) {
    .hatano-compare-table tbody tr th {
        border-right: 1px solid var(--hatano-green-dark);
        border-bottom: none;
        border-top: none;
        border-left: none;
    }

    .hatano-compare-table tbody tr td {
        border: none;
    }

    .hatano-compare-table tbody tr {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--hatano-green-dark);
    }

    .hatano-compare-table {
        border: none;
    }
}

/* ===============================
   比較テーブル スマホ 最終上書き
================================ */

@media (max-width: 767px) {
    .hatano-compare-table-wrap {
        overflow-x: unset !important;
    }

    .hatano-compare-table {
        min-width: unset !important;
        width: 100% !important;
        display: block !important;
        border: none !important;
    }

    .hatano-compare-table thead {
        display: none !important;
    }

    .hatano-compare-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .hatano-compare-table tbody tr {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--hatano-green-dark) !important;
    }

    .hatano-compare-table tbody tr th {
        font-size: 12px !important;
        padding: 8px 6px !important;
        border-top: none !important;
        border-left: none !important;
        border-bottom: none !important;
        border-right: 1px solid var(--hatano-green-dark) !important;
        display: block !important;
        background: #f8f8f8 !important;
    }

    .hatano-compare-table tbody tr td {
        font-size: 12px !important;
        padding: 8px 6px !important;
        border: none !important;
        display: block !important;
    }

    /* ハタノ表示時：一条列を非表示 */
    .hatano-compare-table tbody tr td:last-child {
        display: none !important;
    }

    /* 一条表示時 */
    .hatano-compare-table.show-ichijo tbody tr td:last-child {
        display: block !important;
    }

    .hatano-compare-table.show-ichijo tbody tr td:nth-child(2) {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hatano-compare-table tbody tr {
        grid-template-columns: 80px 1fr !important;
    }

    /* 3列目（一条列）を完全に非表示 */
    .hatano-compare-table tbody tr > *:nth-child(3) {
        display: none !important;
    }

    /* 一条タブ選択時は2列目を非表示、3列目を表示 */
    .hatano-compare-table.show-ichijo tbody tr > *:nth-child(2) {
        display: none !important;
    }

    .hatano-compare-table.show-ichijo tbody tr > *:nth-child(3) {
        display: block !important;
    }
}

/* ===============================
   比較テーブル スマホ
================================ */
@media (max-width: 767px) {
    .hatano-compare-tabs {
        display: block;
        margin-bottom: 16px;
    }

    .hatano-compare-tab-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .hatano-compare-tab-btn {
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 700;
        border: 2px solid var(--hatano-border);
        border-radius: 8px;
        background: #ffffff;
        color: var(--hatano-text);
        cursor: pointer;
        font-family: "Noto Sans JP", sans-serif;
    }

    .hatano-compare-tab-btn.is-active {
        background: var(--hatano-green);
        color: #ffffff;
        border-color: var(--hatano-green);
    }

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

    .hatano-compare-table {
        min-width: unset;
        width: 100%;
        display: block;
        border: none;
    }

    .hatano-compare-table thead {
        display: none;
    }

    .hatano-compare-table tbody {
        display: block;
        width: 100%;
    }

    .hatano-compare-table tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr;
        border-bottom: 1px solid var(--hatano-green-dark);
    }

    .hatano-compare-table tbody tr th {
        font-size: 12px;
        padding: 8px 6px;
        border-right: 1px solid var(--hatano-green-dark);
        border-top: none;
        border-left: none;
        border-bottom: none;
        background: #f8f8f8;
    }

    .hatano-compare-table tbody tr td {
        font-size: 12px;
        padding: 8px 6px;
        border: none;
    }

    #btn-ichijo {
        display: none;
    }

    .hatano-compare-company-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hatano-compare-buttons {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }
}

@media (min-width: 768px) {
    .hatano-compare-tabs {
        display: none;
    }

    #btn-hatano,
    #btn-ichijo {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }

    .hatano-compare-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 12px;
        width: calc(100% - 200px);
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .hatano-compare-tabs { display: none; }
    .hatano-sp-compare { display: none; }
    .hatano-pc-only { display: block; }
}

@media (max-width: 767px) {
    .hatano-pc-only { display: none; }
    .hatano-compare-tabs { display: block; margin-bottom: 16px; }

    .hatano-sp-compare-panel dl div {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 8px;
        padding: 10px 6px;
        border-bottom: 1px solid var(--hatano-green-dark);
        font-size: 12px;
        line-height: 1.6;
    }

    .hatano-sp-compare-panel dl div:first-child {
        border-top: 1px solid var(--hatano-green-dark);
    }

    .hatano-sp-compare-panel dt {
        font-weight: 700;
        background: #f8f8f8;
        padding: 4px;
    }

    .hatano-sp-compare-panel dd {
        margin: 0;
        padding: 4px;
    }

    .hatano-compare-buttons {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }

    #btn-ichijo { display: none; }
}

@media (max-width: 767px) {
    .hatano-pc-only {
        display: none !important;
    }
}