:root {
    --main-green: #0f8f5f;
    --pale-green: #edf8f2;
    --color-txt01: #13201a;
    --color-txt02: #68756e;
    --color-border: #dfe8e2;
    --scale: 100vw;
}
@media screen and (max-width: 767px) {
    :root {
        --scale: 1200px;
    }
}
article * {
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .sp_only {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .sp_only {
        display: block;
    }
    .pc_only {
        display: none !important;
        color: var(--main-green);
    }
}
.content_inner {
    max-width: min(calc((1160 / 1200) * var(--scale)), 1160px);
}
/* ======================
 料金プラン
====================== */
.lead-txt {
    color: var(--color-txt02);
}
.price_inner {
    box-sizing: border-box;
    /* =====================
   Plan Cards
   ===================== */
    .plan-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto; /* badge / name / summary / price / specs / btn */
        gap: 0 min(calc((22 / 1200) * var(--scale)), 22px);
        margin-bottom: min(calc((28 / 1200) * var(--scale)), 28px);
    }

    .plan-card {
        border-radius: min(calc((28 / 1200) * var(--scale)), 28px);
        padding: min(calc((32 / 1200) * var(--scale)), 32px);
        background: linear-gradient(to bottom, #ffffff, #fbfefb);
        position: relative;
        overflow: hidden;
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        align-content: start;
        border-radius: 28px;
        box-shadow: 0 18px 45px 0 rgba(19, 32, 26, 0.08);
    }

    .plan-card--premium {
        border: 2px solid var(--main-green);
    }

    .plan-card--enterprise {
        border: 1px solid var(--color-border);
        background: #ffffff;
    }

    /* Badge */
    .plan-badge {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: start;
        margin-bottom: min(calc((18 / 1200) * var(--scale)), 18px);
        padding: min(calc((6 / 1200) * var(--scale)), 6px) min(calc((13 / 1200) * var(--scale)), 13px);
        background-color: var(--pale-green);
        border: 1px solid var(--color-border);
        border-radius: 400px;
        font-size: 12px;
        font-weight: 900;
        color: var(--main-green);
        letter-spacing: 0.04em;
    }

    /* Plan name */
    .plan-name {
        font-size: min(calc((30 / 1200) * var(--scale)), 30px);
        font-weight: 900;
        color: var(--color-txt01);
        line-height: 1.33;
        align-self: start;
        padding-bottom: min(calc((15 / 1200) * var(--scale)), 15px);
    }

    /* Plan summary */
    .plan-summary {
        font-size: min(calc((15 / 1200) * var(--scale)), 15px);
        font-weight: 400;
        color: var(--color-txt02);
        line-height: 1.6;
        align-self: start;
        padding-bottom: min(calc((27 / 1200) * var(--scale)), 27px);
    }

    /* Price block */
    .plan-price-block {
        padding: min(calc((22 / 1200) * var(--scale)), 22px) 0;
        border-top: 1px solid var(--color-border);
        align-self: start;
    }

    .price-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--color-txt02);
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .price-row {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        margin-bottom: 8px;
    }

    .price-value {
        font-size: min(calc((52 / 1200) * var(--scale)), 52px);
        font-weight: 700;
        color: var(--color-txt01);
        line-height: 1.08;
        letter-spacing: -0.01em;
    }

    .price-value--inquiry {
        font-size: min(calc((40 / 1200) * var(--scale)), 40px);
        font-weight: 900;
        line-height: 1.4;
    }

    .price-unit {
        font-size: min(calc((15 / 1200) * var(--scale)), 15px);
        font-weight: 700;
        color: var(--color-txt02);
    }

    .price-original {
        font-size: 12px;
        font-weight: 400;
        color: var(--color-txt02);
    }

    /* Specs list */
    .plan-specs {
        list-style: none;
        border-top: 1px solid var(--color-border);
        align-self: start;
    }

    .plan-spec-item {
        display: flex;
        align-items: center;
        padding: min(calc((13 / 1200) * var(--scale)), 13px) 0;
        border-bottom: 1px solid var(--color-border);
        gap: 12px;
    }
    .plan-spec-item:last-child {
        border-bottom: none;
    }
    .spec-label {
        min-width: min(calc((150 / 1200) * var(--scale)), 150px);
        font-size: 14px;
        font-weight: 700;
        color: var(--color-txt02);
        white-space: nowrap;
    }

    .spec-value {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-txt01);
        text-align: right;
    }

    /* CTA Button */
    .plan-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: min(calc((56 / 1200) * var(--scale)), 56px);
        border-radius: 8px;
        font-size: min(calc((15 / 1200) * var(--scale)), 15px);
        font-weight: 900;
        text-decoration: none;
        margin-top: min(calc((24 / 1200) * var(--scale)), 24px);
        transition: opacity 0.2s;
    }

    .plan-btn:hover {
        opacity: 0.85;
    }

    .plan-btn--primary {
        background-color: var(--main-green);
        color: #ffffff;
    }

    .plan-btn--secondary {
        background-color: #ffffff;
        color: var(--main-green);
        border: 1px solid var(--color-border);
    }
}
@media screen and (max-width: 767px) {
    :root {
        --scale: 1200px;
    }
    .price_inner {
        padding: 0 2%;
        /* Plan Cards */
        .plan-cards {
            grid-template-columns: 1fr;
            grid-template-rows: none;
            gap: 16px 0;
            margin-bottom: 24px;
        }

        .plan-card {
            grid-row: auto;
            grid-template-rows: none;
            display: flex;
            flex-direction: column;
            padding: 24px;
            border-radius: 20px;
        }

        .plan-badge {
            padding: 5px 12px;
            margin-bottom: 14px;
        }

        .plan-name {
            font-size: 26px;
            padding-bottom: 12px;
        }

        .plan-summary {
            padding-bottom: 20px;
        }

        .plan-price-block {
            width: 100%;
            padding: 18px 0;
            margin-bottom: 0;
        }
        .price-value {
            font-size: 40px;
        }
        .price-value--inquiry {
            font-size: 30px;
        }
        .plan-specs {
            width: 100%;
        }
        .plan-spec-item {
            justify-content: space-between;
            padding: 12px 0;
        }
        .spec-label {
            min-width: auto;
        }
        .plan-btn {
            height: 52px;
            margin-top: 20px;
        }
    }
}
.price_inner {
    /* =====================
    共通してかかる費用
   ===================== */
    .common-costs {
        border: 1px solid var(--color-border);
        border-radius: min(calc((28 / 1200) * var(--scale)), 28px);
        margin-bottom: min(calc((40 / 1200) * var(--scale)), 40px);
        overflow: hidden;
    }

    .common-costs__inner {
        background-color: #fff;
        display: grid;
        grid-template-columns: 1fr min(calc((560 / 1200) * var(--scale)), 560px);
        align-items: start;
        padding: min(calc((40 / 1200) * var(--scale)), 40px);
        gap: min(calc((40 / 1200) * var(--scale)), 40px);
    }

    .section-title {
        font-size: min(calc((32 / 1200) * var(--scale)), 32px);
        font-weight: 900;
        color: var(--color-txt01);
        line-height: 1.4;
        margin-bottom: min(calc((16 / 1200) * var(--scale)), 16px);
    }

    .section-desc {
        font-size: 14px;
        font-weight: 400;
        color: var(--color-txt02);
        line-height: 1.75;
    }

    /* Cost list */
    .cost-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cost-item {
        display: grid;
        grid-template-columns: min(calc((145 / 1200) * var(--scale)), 145px) 1fr;
        align-items: start;
        gap: 12px;
        padding: min(calc((15 / 1200) * var(--scale)), 15px) min(calc((17 / 1200) * var(--scale)), 17px);
        border: 1px solid var(--color-border);
        border-radius: 12px;
    }

    .cost-label {
        font-size: 14px;
        font-weight: 900;
        color: var(--color-txt02);
    }

    .cost-value {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-txt01);
        line-height: 1.6;
    }
}
@media screen and (max-width: 767px) {
    .price_inner {
        /* 共通してかかる費用 */
        .common-costs {
            border-radius: 20px;
            margin-bottom: 32px;
        }

        .common-costs__inner {
            grid-template-columns: 1fr;
            padding: 24px;
            gap: 24px;
        }

        .cost-item {
            grid-template-columns: min(calc((105 / 375) * 100vw), 152px) 1fr;
            gap: 8px;
            padding: 14px 16px;
        }
    }
}
.price_inner {
    /* =====================
   利用できる主な機能
   ===================== */
    .functions {
        padding-top: min(calc((10 / 1200) * var(--scale)), 10px);
    }

    .functions__lead {
        margin-bottom: min(calc((24 / 1200) * var(--scale)), 24px);
        font-size: 14px;
    }

    .functions-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: min(calc((14 / 1200) * var(--scale)), 14px);
        margin-bottom: min(calc((16 / 1200) * var(--scale)), 16px);
    }

    /* Accordion */
    .acc-input {
        display: none;
    }

    .functions-accordion {
        background-color: #fff;
        border: 1px solid var(--color-border);
        border-radius: min(calc((18 / 1200) * var(--scale)), 18px);
        overflow: hidden;
    }

    .functions-accordion__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: min(calc((22 / 1200) * var(--scale)), 22px) min(calc((20 / 1200) * var(--scale)), 20px);
        cursor: pointer;
        user-select: none;
    }

    .functions-accordion__title {
        font-size: min(calc((16 / 1200) * var(--scale)), 16px);
        font-weight: 900;
        color: var(--color-txt01);
    }

    .functions-accordion__icon {
        position: relative;
        width: min(calc((28 / 1200) * var(--scale)), 28px);
        height: min(calc((28 / 1200) * var(--scale)), 28px);
        border: 1px solid var(--color-border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .functions-accordion__icon::before,
    .functions-accordion__icon::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        background-color: var(--main-green);
        border-radius: 1px;
        transition: transform 0.3s ease;
    }

    .functions-accordion__icon::after {
        transform: rotate(90deg);
    }

    .acc-input:checked ~ .functions-accordion__summary .functions-accordion__icon::after {
        transform: rotate(0deg);
    }

    /* Grid animation */
    .acc-grid-container {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
    }

    .acc-inner {
        min-height: 0;
        overflow: hidden;
    }

    .acc-input:checked ~ .acc-grid-container {
        grid-template-rows: 1fr;
        min-height: 100%;
    }
    /* functions list */
    .functions01:has(.acc-input:checked) ~ .functions02:has(.acc-input:checked) .functions-list-wrap {
        min-height: min(calc((140 / 1200) * var(--scale)), 140px);
    }
    .functions03:has(.acc-input:checked) ~ .functions04:has(.acc-input:checked) .functions-list-wrap {
        min-height: min(calc((218 / 1200) * var(--scale)), 218px);
    }
    .functions-list {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 0 min(calc((20 / 1200) * var(--scale)), 20px) min(calc((20 / 1200) * var(--scale)), 20px);
    }

    .functions-list li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 5px 0;
        font-size: 13px;
        font-weight: 400;
        color: #2f3d35;
        line-height: 1.5;
    }

    .functions-list li::before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: var(--main-green);
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
        top: -2px;
    }

    /* functions note */
    .functions-note {
        background-color: var(--pale-green);
        border: 1px solid var(--main-green);
        border-radius: min(calc((18 / 1200) * var(--scale)), 18px);
        padding: min(calc((22 / 1200) * var(--scale)), 22px) min(calc((24 / 1200) * var(--scale)), 24px);
        margin-bottom: min(calc((16 / 1200) * var(--scale)), 16px);
    }

    .functions-note p {
        font-size: 13px;
        font-weight: 400;
        color: #29513f;
        line-height: 1.75;
    }

    /* CTA link */
    .functions-cta {
        display: flex;
        justify-content: center;
    }

    .functions-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: min(calc((14 / 1200) * var(--scale)), 14px) min(calc((22 / 1200) * var(--scale)), 22px);
        border: 1px solid var(--main-green);
        background-color: #fff;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 900;
        color: var(--main-green);
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .functions-link:hover {
        opacity: 0.85;
    }
}

@media screen and (max-width: 767px) {
    .price_inner {
        /* 利用できる主な機能 */
        .functions {
            padding-top: 8px;
        }

        .functions__lead {
            margin-bottom: 16px;
        }

        .functions-grid {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        .functions-accordion {
            border-radius: 14px;
        }

        .functions-accordion__summary {
            padding: 18px 16px;
        }

        .functions-accordion__icon {
            width: 28px;
            height: 28px;
        }

        /* 同行揃えのmin-heightをSPではリセット */
        .functions01:has(.acc-input:checked) ~ .functions02:has(.acc-input:checked) .functions-list-wrap,
        .functions03:has(.acc-input:checked) ~ .functions04:has(.acc-input:checked) .functions-list-wrap {
            min-height: 0;
        }

        .functions-list {
            grid-template-columns: 1fr;
            padding: 0 16px 16px;
        }

        .functions-note {
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 14px;
        }

        .functions-link {
            padding: 12px 20px;
        }
    }
}