/* =================================
   page-yane-area.css
   屋根エリアLP（市区町村別・page-yane-area.php）
================================= */

.page-yane-area {
    --yane-area-navy: #2b3a6d;
    --yane-area-yellow: #f5c800;
    --yane-area-pink: #f57f96;
    --yane-area-sky: #dbe8f5;
    --yane-area-cta-sky: #c5ddf0;

    overflow-x: hidden;
    background: #fff;
    color: #333;
}

/* ----- Hero ----- */
.yane-area-hero {
    position: relative;
    color: #fff;
}

.yane-area-hero_bg {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.yane-area-hero_bg-img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.yane-area-hero_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 48, 0.45) 0%, rgba(15, 23, 48, 0.72) 100%);
}

.yane-area-hero_inner {
    position: relative;
    margin: -340px auto 0;
    max-width: 420px;
    padding: 0 18px 28px;
    z-index: 1;
}

.yane-area-hero_kicker {
    margin: 0 0 8px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.yane-area-hero_ttl {
    margin: 0 0 16px;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.yane-area-hero_checks {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
    font-weight: 700;
}

.yane-area-hero_checks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0.45em 0;
    line-height: 1.4;
}

.yane-area-hero_checkicon {
    margin-top: 0.18em;
    color: var(--yane-area-yellow);
    flex-shrink: 0;
}

.yane-area-hero_badge {
    margin: 0 0 20px auto;
    width: min(164px, 42vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yane-area-yellow);
    color: var(--yane-area-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(0.78rem, 3.4vw, 0.92rem);
    font-weight: 900;
    line-height: 1.35;
    padding: 0.6em;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.yane-area-hero_badge span {
    max-width: 8em;
}

.yane-area-hero_ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.yane-area-hero_btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.95);
    font-weight: 800;
}

.yane-area-hero_btn__tel {
    background: var(--yane-area-navy);
    color: #fff;
}

.yane-area-hero_btn__line {
    background: var(--yane-area-pink);
    color: #fff;
}

.yane-area-hero_btn i {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    font-size: 1.25rem;
}

.yane-area-hero_btn_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.yane-area-hero_btn_label {
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}

.yane-area-hero_btn_num {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.yane-area-hero_btn_note {
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0.95;
}

/* ----- Section title ----- */
.page-yane-area .reasons-lp_inner.syokenkogyo-inner {
    max-width: 680px;
    padding-left: 16px;
    padding-right: 16px;
}

.yane-area-sec_ttl {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.38;
    color: var(--yane-area-navy);
}

/* ----- Navy band + service grid ----- */
.yane-area-band {
    padding: 32px 0 36px;
    background: var(--yane-area-navy);
    color: #fff;
}

.yane-area-band_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-band_text {
    margin: 0 0 20px;
    text-align: center;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.65;
}

.yane-area-band_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.yane-area-band_cell {
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.yane-area-band_cell-img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    display: block;
}

.yane-area-band_cell figcaption {
    padding: 8px 6px 10px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.12);
}

/* ----- Showcase ----- */
.yane-area-showcase {
    padding: 32px 0 28px;
    background: #f7f8fb;
}

.yane-area-showcase_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-showcase_list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.yane-area-showcase_item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(43, 58, 109, 0.08);
}

.yane-area-showcase_thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.yane-area-showcase_body {
    padding: 12px 14px 14px;
}

.yane-area-showcase_name {
    margin: 0 0 6px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--yane-area-navy);
}

.yane-area-showcase_star {
    margin: 0 0 8px;
    color: #f5c400;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

.yane-area-showcase_excerpt {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.65;
    color: #444;
}

.yane-area-showcase_empty {
    margin: 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #555;
}

.yane-area-showcase_more {
    margin-top: 20px;
    text-align: center;
}

.yane-area-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 12px 20px;
    border: 2px solid var(--yane-area-navy);
    border-radius: 999px;
    color: var(--yane-area-navy);
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
}

.yane-area-btn-outline:hover,
.yane-area-btn-outline:focus-visible {
    background: rgba(43, 58, 109, 0.06);
}

/* ----- Staff ----- */
.yane-area-staff {
    padding: 32px 0;
    background: #fff;
}

.yane-area-staff_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-staff_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

@media (min-width: 480px) {
    .yane-area-staff_wrap {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

.yane-area-staff_photo {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--yane-area-sky);
}

.yane-area-staff_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yane-area-staff_name {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--yane-area-navy);
}

.yane-area-staff_role {
    margin: 0 0 10px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #666;
}

.yane-area-staff_msg {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ----- FAQ ----- */
.yane-area-faq {
    padding: 28px 0 36px;
    background: #f7f8fb;
}

.yane-area-faq_inner {
    width: min(100%, 440px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-faq_item {
    margin: 0 0 10px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    border: 1px solid #e6eaf2;
}

.yane-area-faq_q {
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--yane-area-navy);
}

.yane-area-faq_q::-webkit-details-marker {
    display: none;
}

.yane-area-faq_item[open] .yane-area-faq_q {
    border-bottom: 1px solid #eef2f8;
}

.yane-area-faq_a {
    padding: 14px 16px 18px;
    font-size: 0.88rem;
    line-height: 1.75;
}

.yane-area-faq_a p {
    margin: 0 0 0.85em;
}

.yane-area-faq_a p:last-child {
    margin-bottom: 0;
}

/* ----- Flow ----- */
.yane-area-flow {
    padding: 32px 0;
    background: #fff;
}

.yane-area-flow_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-flow_steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yane-area-flow_step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.yane-area-flow_num {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--yane-area-navy);
    color: #fff;
    font-weight: 900;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yane-area-flow_ttl {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--yane-area-navy);
}

.yane-area-flow_txt {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.65;
    color: #444;
}

/* ----- Map / area ----- */
.yane-area-map {
    padding: 28px 0 32px;
    background: #f7f8fb;
}

.yane-area-map_inner {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-map_intro {
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.8;
}

.yane-area-map_frame {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.yane-area-map_frame iframe {
    width: 100%;
    min-height: 240px;
    border: none;
}

/* ----- Bottom CTA band ----- */
.yane-area-cta {
    padding: 28px 0 36px;
    background: var(--yane-area-cta-sky);
}

.yane-area-cta_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 720px) {
    .page-yane-area .reasons-lp_inner.syokenkogyo-inner,
    .yane-area-showcase_inner,
    .yane-area-band_inner,
    .yane-area-staff_inner,
    .yane-area-flow_inner,
    .yane-area-cta_inner,
    .yane-area-hero_inner {
        max-width: 760px;
    }

    .yane-area-band_inner {
        width: min(100%, 760px);
    }

    .yane-area-hero_inner {
        margin-top: -360px;
    }
}

/* ----- Subsidy + Feature panel ----- */
.yane-area-subsidy-section {
    padding: 34px 0 40px;
}

.yane-area-subsidy-section_inner {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0 16px;
}

.yane-area-subsidy-section_ttl {
    margin: 0 0 24px;
    text-align: center;
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    font-size: clamp(19px, 4.5vw, 23px);
    font-weight: 700;
    color: #2F3E77;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.yane-area-subsidy-main {
    margin: 0 0 14px;
    text-align: center;
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    font-size: clamp(30px, 7.3vw, 42px);
    font-weight: 700;
    color: #2F3E77;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.yane-area-subsidy-section_desc {
    margin: 0 0 26px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #222;
}

.yane-area-subsidy-section_hojo {
    margin: 0 0 16px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #2F3E77;
}

.yane-area-subsidy-section_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    background: #fff;
}

.yane-area-subsidy-section_table th,
.yane-area-subsidy-section_table td {
    border: 1px solid #d9d9d9;
    padding: 10px 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    vertical-align: top;
    color: #222;
}

.yane-area-subsidy-section_table th {
    width: 36%;
    font-weight: 700;
    background: #fafafa;
    text-align: left;
}

.yane-area-subsidy-section_table td {
 padding: 10px 20px!important;
}

.yane-area-subsidy-section_sep {
    margin: 26px 0 22px;
    border: 0;
    border-top: 2px dotted #7f94bc;
}

.yane-area-subsidy-section_item + .yane-area-subsidy-section_item {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #d8e0ef;
}

.yane-area-subsidy-section_feature {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.75;
    color: #2F3E77;
}