/* Legacy pricing page styles, kept for backward compatibility */
.pricing .tab-content .row.mobile-plan {
    overflow: visible !important;
}
.pricing .sec-body h2 {
    font-size: 2rem;
    margin-bottom: 4rem;
    line-height: 1.3;
}
@media screen and (min-width: 960px) {
    .pricing .sec-body h2 {
        margin-bottom: 5rem;
        font-size: 2.4rem;
    }
}
.row .column {
    position: relative;
}
.wrap__plan-heading {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 270px;
    padding: 0;
}
.small__plan-heading_standard {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: -15px;
}
.small__plan-heading_standard p {
    margin: 0;
    background: var(--main-color-1);
    color: #fff;
    padding: 5px 35px;
    font-size: 15px;
    border-radius: 99px;
}
span.num.num2 {
    margin-left: 5px;
    display: block;
    font-size: 13px;
}
.row.mobile-plan {
    .plan-item .plan-heading h3 {
        margin: 25px auto 10px;
        color: var(--main-color-1);
        font-size: 1.8rem;
    }
}
@media screen and (min-width: 960px) {
    .row.mobile-plan {
        .plan-item .plan-heading h3 {
            font-size: 2rem;
        }
    }
}
@media screen and (max-width: 959px) {
    .row.mobile-plan {
        .plan-item .plan-heading h3 {
            margin: 10px auto 30px;
        }
    }
}
.wrap_plice__plan-heading {
    display: block;
    padding: 0;
    margin: -10px 0 -10px;
}
span.zeikomi__plan-heading {
    display: block;
    font-size: 1.5rem;
}
span.agreement_span__plan-heading {
    display: block;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0;
    margin: 10px 0 0;
}
.pricing .tab-content .row.mobile-plan .plan-heading {
    min-height: initial;
}
a.btn__for_plan {
    width: 40%;
    display: block;
    max-width: 255px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
}
.pricing {
    .text-indent {
        margin-bottom: 6px;
        line-height: 1.65;
    }
    ul.ul__text-indent li {
        margin-bottom: 6px;
    }
}
dt.dt__sp {
    display: flex;
    flex-wrap: wrap;
}
ul.ul__price_dt.ul__price_dt2 li {
    color: #b0bac6;
}
ul.ul__price_dt {
    width: 100%;
    list-style: none;
    margin-top: 10px;
    padding-left: 12px;
}
ul.ul__price_dt li {
    font-size: 14px;
    margin-bottom: 5px;
}
ul.ul__price_dt li::before {
    content: "●";
    margin-right: 8px;
    color: var(--main-color-1);
    font-size: 10px;
    top: -2px;
    position: relative;
}
ul.ul__price_dt.ul__price_dt2 li::before {
    content: "─";
    margin-right: 8px;
    color: #b0bac6;
    font-size: 10px;
    top: -2px;
    position: relative;
}
.acms-icon-tooltip:before {
    margin-left: 4px;
}
@media screen and (min-width: 960px) {
    .pricing .sec-body h3 {
        margin-bottom: 5rem;
    }
    .pricing .container.mobile-plan {
        max-width: 96rem;
    }
    .pricing .tab-content .row .column {
        position: relative;
    }
}
@media screen and (max-width: 959px) {
    .plan-item .plan-heading {
        padding: 4rem 1rem;
    }
    .wrap__plan-heading {
        height: initial;
        padding: initial;
    }
    .plan-heading h4 {
        margin: 10px auto 30px;
    }
    .small__plan-heading_standard p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    a.btn__for_plan {
        width: 95%;
    }
}
@media screen and (max-width: 480px) {
    .small__plan-heading_standard p {
        font-size: 13px;
    }
    .pricing dt.dt-wrap {
        white-space: initial;
        display: inline-block;
    }
}

/* ==========================================
   New pricing page (2025 redesign)
   ========================================== */

/* Base */
section.pricing-new {
    background: #fff;
    /* Section spacing. Every background is white, so this gap is the only
       separator. Changing it retimes the whole page. */
    --sec-gap: 72px;
    /* 75px left 95px below the breadcrumb. The footer's margin-top:200px covers the bottom */
    padding: 32px 0 0;
}

.pricing-new * {
    box-sizing: border-box;
}

/* Header section */
.pricing-header {
    text-align: center;
    margin-bottom: 24px;
}

.pricing-title {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #2a3037;
    margin: 0 0 24px;
    line-height: normal;
}

.pricing-subtitle {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2a3037;
    line-height: normal;
}

.pricing-subtitle p {
    margin: 0;
}

/* Plan card section */
.pricing-plans-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 0;
    position: relative;
}

/* The top page (#plans) reuses these classes, so the pricing page gap is set
   only here. --sec-gap exists on section.pricing-new alone; using var() on a bare
   .pricing-plans-container would invalidate the whole margin declaration. */
section.pricing-new .pricing-plans-container {
    margin-bottom: var(--sec-gap);
    padding-bottom: 0;
}

/* Toggle switch and saving badge */
.pricing-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 4px;
}

/* Saving badge */
.pricing-badge-info {
    background: #0ba360;
    color: #fff;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 4.5px 16px 3.5px;
    border-radius: 3px;
    white-space: nowrap;
    margin-bottom: 12px;
    transition: background-color 0.3s ease;
}

.pricing-badge-info.badge-warning {
    background: #616a78;
}

/* Badge and price switching (annual by default) */
.pricing-badge-info.badge-yearly {
    display: block;
}

.pricing-badge-info.badge-monthly {
    display: none;
    background: #616a78;
}

.price-row.price-yearly {
    display: flex;
}

p.price-monthly.price-yearly {
    display: block;
}

.price-row.price-monthly-contract,
p.price-monthly.price-monthly-contract {
    display: none;
}

/* Switching when monthly is selected */
.pricing-toggle-wrapper:has(#pricing-toggle-input:checked)
    .pricing-badge-info.badge-yearly {
    display: none;
}

.pricing-toggle-wrapper:has(#pricing-toggle-input:checked)
    .pricing-badge-info.badge-monthly {
    display: block;
}

.pricing-plans-container:has(#pricing-toggle-input:checked)
    .price-row.price-yearly,
.pricing-plans-container:has(#pricing-toggle-input:checked)
    p.price-monthly.price-yearly {
    display: none;
}

.pricing-plans-container:has(#pricing-toggle-input:checked)
    .price-row.price-monthly-contract {
    display: flex;
}

.pricing-plans-container:has(#pricing-toggle-input:checked)
    p.price-monthly.price-monthly-contract {
    display: block;
}

/* Toggle switch */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 4px;
}

.toggle-label {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #616a78;
    margin: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0ba360; /* Annual (default) */
    transition: 0.4s;
    /* Pill, matching the features page filter switch */
    border-radius: 999px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    transform: translateX(0);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #c4cbd4; /* Monthly */
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Plan cards */
.pricing-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 4px;
}

/* Grey cards on white, as on the top page. The tag and plan name colour identify
   the plan, so the card's own coloured border is dropped. */
.plan-card {
    flex: 1;
    background: #f8f8fc;
    border: 0;
    border-radius: 8px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 304px;
}

/* Plan tag */
.plan-tag {
    background: #0ba360;
    color: #fff;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    /* Equal padding makes the text sit 0.6-1.1px high, so the top is 0.5px thicker */
    padding: 4.5px 16px 3.5px;
    border-radius: 3px;
}

.plan-tag-orange {
    background: #264a73;
}

/* Plan header (tag + name) */
.plan-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Plan name */
.plan-name {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.plan-standard .plan-name {
    color: #087e4a;
}

.plan-enterprise .plan-name {
    color: #264a73;
}

/* Price */
.plan-pricing {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.price-row {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.price-badge {
    background: #0ba360;
    color: #fff;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4.5px 8px 3.5px;
    border-radius: 3px;
}

.price-amount {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-weight: 600;
}

.price-yen {
    font-size: 18px;
    color: var(--main-color-d1);
    line-height: 24px;
}

.price-number {
    font-size: 32px;
    color: var(--main-color-d1);
    line-height: 24px;
}

.plan-enterprise .price-number {
    font-size: 32px;
    color: #264a73;
}

.price-unit {
    font-size: 16px;
    color: #616a78;
    line-height: 1;
}

.price-monthly {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #616a78;
    margin: 0;
}

/* Buttons */
.btn-trial {
    background: #fff;
    border: 1px solid #0ba360;
    border-radius: 3px;
    color: #087e4a;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 67px 15px 42px;
    min-width: 300px;
    height: 57px;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
    position: relative;
}

.btn-trial::after {
    content: "→";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 33px;
    height: 33px;
    background: #f8f8fc;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #087e4a;
    font-size: 18px;
}

.btn-contact {
    background: #203e60;
    border: 1px solid #203e60;
    border-radius: 3px;
    color: #fff;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 65px 15px 40px;
    min-width: 300px;
    height: 57px;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
    position: relative;
}

.btn-contact::after {
    content: "→";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 33px;
    height: 33px;
    background: #fff;
    border: 0;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a3037;
    background-image: #203e60;
    font-size: 18px;
}

/* Notes */
.pricing-note {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2a3037;
    text-align: center;
    margin: 0;
}

/* Plan comparison section */
.plan-comparison {
    max-width: 960px;
    /* Fallback required: without --sec-gap the whole margin declaration is dropped */
    margin: 0 auto var(--sec-gap, 72px);
}

.section-title {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #2a3037;
    text-align: center;
    margin: 0 0 24px;
}

/* Tightened when a lead follows, so heading and lead read as one block */
.section-title:has(+ .section-subtitle) {
    margin-bottom: 12px;
}

.comparison-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.header-item {
    text-align: center;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 0 16px;
}

.header-item:first-child {
    flex: 2;
}

.header-item:nth-child(2),
.header-item:nth-child(3) {
    flex: 1;
}

.header-standard {
    color: #087e4a;
}

.header-enterprise {
    color: #264a73;
}

.comparison-table {
    border-top: 3px solid #eaedf4;
    border-bottom: 3px solid #eaedf4;
    transition: border-bottom-color 0.2s ease;
}

.comparison-table.is-collapsing {
    border-bottom-color: transparent;
}

.comparison-row {
    display: flex;
    align-items: stretch;
}

.comparison-row-colored {
    background: #f8f8fc;
}

.row-label {
    flex: 2;
    padding: 16px;
    border-right: 3px solid #eaedf4;
}

.row-label h3 {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2a3037;
    margin: 0 0 4px;
}

.row-label .label-desc {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #616a78;
    margin: 0;
}

.row-value {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.row-value-standard {
    background: #f8f8fc;
    border-right: 4px solid #fff;
}

.row-value-enterprise {
    background: #eef2f6;
}

.comparison-row:not(.comparison-row-colored) .row-value-standard {
    background: rgba(238, 238, 238, 0.15);
}

.comparison-row:not(.comparison-row-colored) .row-value-enterprise {
    background: rgba(200, 221, 239, 0.15);
}

/* Enterprise-only features: grey background on Standard */
.row-enterprise-only .row-value-standard {
    background: #e2e6ee !important;
}

.value-text {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-align: right;
}

.row-value-standard .value-text {
    color: #2a3037;
}

.row-value-enterprise .value-text {
    color: #264a73;
}

.value-badge {
    background: #f8f8fc;
    border: 1px solid #087e4a;
    border-radius: 3px;
    color: #087e4a;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4.5px 8px 3.5px;
    line-height: 12px;
}

/* Matches the other buttons: pale fill, light grey border, 3px radius.
   Was a full-width text link; now a centred button. */
.btn-more-comparison {
    background: #fff;
    border: 1px solid #d5d5dc;
    border-radius: 3px;
    color: #2a3037;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    width: auto;
    min-width: 300px;
    /* Separated from the table and notes above so it reads as its own control */
    margin: 24px auto 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
}

.btn-more-comparison:hover {
    background: #2a3037;
    border-color: #2a3037;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(14, 14, 26, 0.15);
}

.btn-more-comparison .btn-icon {
    width: 24px;
    height: 24px;
    transition:
        transform 0.3s ease,
        filter 0.25s;
    display: inline-block;
}

/* arrow-icon.svg is a solid #233447 and would disappear on the black hover fill */
.btn-more-comparison:hover .btn-icon {
    filter: brightness(0) invert(1);
}

.btn-more-comparison .btn-icon.rotated {
    transform: rotate(180deg);
}

/* Accordion (extra comparison rows) */
.comparison-additional {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.8s ease-out 0.2s,
        opacity 0.3s ease-out 0s;
}

.comparison-additional.expanded {
    max-height: 3000px;
    opacity: 1;
}

/* Feature list */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #2a3037;
}

.feature-list li {
    margin-bottom: 0;
    margin-left: 21px;
    position: relative;
    line-height: normal;
}

.feature-list li::before {
    content: "•";
    position: absolute;
    left: -21px;
}

/* Links inside the Q&A area */
.faq-answer a {
    color: var(--main-color-1);
    text-decoration: underline;
}

/* Footnote links */
.footnote-link {
    color: #0071c1;
    text-decoration: underline;
    font-size: 12px;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

/* Value notes */
.value-note {
    font-size: 14px;
}

/* Notes section */
.comparison-notes {
    background: #f8f8fc;
    padding: 0 16px;
    border-radius: 3px;
    margin-top: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.5s ease-out,
        opacity 0.4s ease-out,
        padding 0.4s ease-out;
}

.comparison-notes.expanded {
    max-height: 1000px;
    opacity: 1;
    padding: 16px;
    margin-top: 24px;
}

.notes-list {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    color: #2a3037;
    line-height: 1.7;
    margin: 0;
    padding-left: 21px;
    list-style: decimal;
}

.notes-list li {
    margin-bottom: 0;
    margin-left: 21px;
}

/* CTA section */
/* The CTA band breaks out of the centred, max-width container, which needs vw to
   measure the distance to the viewport edge. 100vw includes the classic scrollbar,
   so the band lands 7.5px past each edge and the page scrolls horizontally by 7px.
   The container is centred with a max-width, so the breakout distance changes with
   the viewport and cannot be replaced by a fixed padding offset the way the top page
   full-bleed elements were. Clipping at the root removes the scroll instead; the band
   is a flat colour, so the 7.5px trimmed off each side is not visible.
   overflow-x: clip does not create a scroll container, so sticky and fixed still work,
   and it has to sit on both html and body (body alone does not stop the scroll).
   This file is loaded on every page, so the rule is scoped to the pricing body. */
html:has(body.pricing__body),
body.pricing__body {
    overflow-x: clip;
}

.pricing-new .sec-top-cta {
    margin: var(--sec-gap) calc(-50vw + 50%);
    width: 100vw;
    background: #2a3037;
    padding-top: 36px;
    padding-bottom: 36px;
}

.pricing-new .sec-top-cta .p__sec-top-cta {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.pricing-new .sec-top-cta .dots_line {
    padding: 16px 0;
}

.pricing-new .sec-top-cta .dots_line img {
    width: clamp(33px, 2.9vw, 45px);
    filter: grayscale(1) brightness(2.4);
}

/* Primary is flat green; green buttons only ever mean a CTA on this site */
.pricing-new .sec-top-cta a.btn-common.btn-common202512 {
    background: var(--main-color-1);
    color: #fff;
    border-radius: 3px;
    box-shadow: none;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
}

.pricing-new .sec-top-cta a.btn-common.btn-common202512 .allow-box {
    background: #fff;
}

.pricing-new .sec-top-cta a.btn-common.btn-common202512 .allow-box::after {
    color: var(--main-color-d1);
}

.pricing-new .sec-top-cta a.btn-common.btn-common202512:hover {
    background: var(--main-color-d1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 163, 96, 0.45);
}

/* Secondary is a white outline on the dark band, inverting to white on hover;
   the usual black fill would disappear against the band */
.pricing-new .sec-top-cta a.btn-common.btn-common-white.btn-common-white202512 {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    color: #fff;
    box-shadow: none;
    transition:
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
}

.pricing-new
    .sec-top-cta
    a.btn-common.btn-common-white.btn-common-white202512
    .allow-box {
    background: rgba(255, 255, 255, 0.15);
}

.pricing-new
    .sec-top-cta
    a.btn-common.btn-common-white.btn-common-white202512
    .allow-box::after {
    color: #fff;
}

.pricing-new
    .sec-top-cta
    a.btn-common.btn-common-white.btn-common-white202512:hover {
    background: #fff;
    border-color: #fff;
    color: #2a3037;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.pricing-new
    .sec-top-cta
    a.btn-common.btn-common-white.btn-common-white202512:hover
    .allow-box {
    background: #f3f3f7;
}

.pricing-new
    .sec-top-cta
    a.btn-common.btn-common-white.btn-common-white202512:hover
    .allow-box::after {
    color: #2a3037;
}

/* Orange button for the Enterprise plan */
.btn-common.btn-common202512.btn-common-orange202512 {
    background: #203e60;
    box-shadow: 0 2px 8px 0 #203e6004;
}
.btn-common.btn-common202512.btn-common-orange202512 .allow-box {
    &::after {
        color: #203e60;
    }
}

/* Add-on options section */
.additional-options {
    max-width: 960px;
    /* Fallback required: without --sec-gap the whole margin declaration is dropped */
    margin: 0 auto var(--sec-gap, 72px);
}

.section-subtitle {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2a3037;
    text-align: center;
    margin: 0 0 16px;
}

.section-subtitle br {
    display: block;
}

.options-table {
    background: #f8f8fc;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
}

.option-row-colored {
    background: #f8f8fc;
}

.option-name {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2a3037;
    margin: 0;
}

.option-price {
    text-align: right;
}

.price-main {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2a3037;
    margin: 0 0 4px;
}

.price-desc {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #616a78;
    margin: 0;
}

.options-note {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #616a78;
    text-align: right;
    margin: 0;
    height: 18px;
}

/* Support plan section */
.support-plans {
    max-width: 960px;
    /* Fallback required: without --sec-gap the whole margin declaration is dropped */
    margin: 0 auto var(--sec-gap, 72px);
}

.support-plan-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.support-image {
    width: 158px;
    height: 107px;
    object-fit: cover;
    flex-shrink: 0;
}

.support-content h3 {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2a3037;
    margin: 0 0 8px;
}

.support-content p {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2a3037;
    line-height: normal;
    margin: 0;
}

/* Q&A section */
.faq-section {
    max-width: 960px;
    margin: 0 auto;
}

.faq-list {
    background: #f8f8fc;
    border-radius: 8px;
    padding: 24px 32px;
}

.faq-item {
    margin-bottom: 16px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.faq-icon {
    background: #2a3037;
    color: #fff;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    width: 39px;
    height: auto;
    /* Q has a descender and sits 2.3px low, so the padding is flipped to offset it */
    padding: 3px 10px 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-question h3 {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2a3037;
    margin: 0;
    flex: 1;
}

.faq-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: inline-block;
}

.faq-item.is-open .faq-toggle {
    transform: rotate(180deg);
}

/* FAQ answers */
.faq-answer {
    background: #fff;
    padding: 0 16px;
    border-radius: 3px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.5s ease-out,
        opacity 0.4s ease-out,
        padding 0.4s ease-out,
        margin-top 0.4s ease-out;
}

.faq-item.is-open .faq-answer {
    max-height: 1000px;
    opacity: 1;
    padding: 16px;
    margin-top: 16px;
}

.faq-answer p {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2a3037;
    line-height: 1.6;
    margin: 0 0 1.5em;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    font-family: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2a3037;
    line-height: 1.6;
    list-style: disc;
    padding-left: 24px;
    margin: 0 0 1.5em;
}

.faq-answer ul:last-child {
    margin-bottom: 0;
}

/* Responsive */

/* Tablet (<=959px) */
@media screen and (max-width: 959px) {
    .pricing-new {
        padding: 75px 0;
    }

    /* Header */
    .pricing-header {
        gap: 24px;
    }

    .pricing-title {
        font-size: 24px;
    }

    .pricing-subtitle p {
        font-size: 14px;
    }

    /* Plan cards */
    .pricing-plans-container {
        padding: 32px 0 0;
    }

    .pricing-toggle-wrapper {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        margin-bottom: 4px;
    }

    .pricing-badge-info {
        font-size: 14px;
        margin-bottom: 0;
        margin-left: 0;
        order: 1;
    }

    .pricing-toggle {
        order: 2;
        gap: 4px;
    }

    .toggle-label {
        font-size: 14px;
    }

    .plan-card {
        height: 304px;
        min-height: 304px;
        padding: 40px 8px;
    }

    .plan-tag {
        font-size: 14px;
        padding: 6px 12px;
    }

    .plan-name {
        font-size: 24px;
    }

    .price-badge {
        font-size: 12px;
        padding: 6px;
    }

    .price-yen {
        font-size: 18px;
    }

    .price-number {
        font-size: 32px;
    }

    .price-unit {
        font-size: 16px;
    }

    .price-monthly {
        font-size: 12px;
    }

    .pricing-note {
        font-size: 12px;
        text-align: initial;
    }

    /* Feature comparison */
    .plan-comparison {
        padding: 0;
    }

    .section-title {
        font-size: 22px;
    }

    .comparison-header {
        font-size: 14px;
    }

    .header-item {
        padding: 0 8px;
    }

    .header-item:first-child {
        flex: 1;
    }

    .header-item:nth-child(2),
    .header-item:nth-child(3) {
        flex: 1;
    }

    .header-standard::before {
        content: "スタンダード";
    }

    .header-enterprise::before {
        content: "エンタープライズ";
    }

    .header-standard,
    .header-enterprise {
        font-size: 0;
    }

    .header-standard::before,
    .header-enterprise::before {
        font-size: 12px;
    }

    .comparison-row {
        flex-direction: row;
    }

    .row-label {
        flex: 1;
        border-right: 3px solid #eaedf4;
        border-bottom: none;
        padding: 16px 8px;
    }

    .row-label h3 {
        font-size: 14px;
    }

    /* Matches the specificity of the base .row-label .label-desc rule, which would
       otherwise keep its 14px here. */
    .row-label .label-desc {
        font-size: 12px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .row-value {
        flex: 1;
        padding: 16px 8px;
        align-items: flex-end;
    }

    .value-text {
        font-size: 14px;
    }

    .value-badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Add-on options */
    .additional-options {
        padding: 0;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .section-subtitle br {
        display: none;
    }

    .option-row {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px;
    }

    .option-name {
        font-size: 16px;
        text-align: center;
    }

    .price-main {
        font-size: 14px;
        text-align: center;
    }

    .price-desc {
        font-size: 14px;
        text-align: center;
    }

    .options-note {
        font-size: 12px;
        text-align: initial;
    }

    /* Support plans */
    .support-plans {
        padding: 0;
    }

    .support-plan-item {
        flex-direction: column;
        align-items: center;
        padding: 16px;
        gap: 16px;
    }

    .support-image {
        width: 158px;
        height: auto;
    }

    .support-content h3 {
        font-size: 16px;
        text-align: center;
    }

    .support-content p {
        font-size: 16px;
    }

    /* Q&A */
    .faq-section {
        padding: 0;
    }

    .faq-list {
        padding: 24px 16px;
    }

    .faq-question {
        gap: 8px;
    }

    .faq-icon {
        font-size: 16px;
        width: 39px;
        padding: 4px 10px;
    }

    .faq-question h3 {
        font-size: 14px;
    }

    .faq-answer {
        padding: 0 16px;
        margin-top: 0;
    }

    .faq-item.is-open .faq-answer {
        padding: 16px;
        margin-top: 16px;
    }

    .faq-answer p {
        font-size: 14px;
    }

    .faq-answer ul {
        font-size: 14px;
    }

    /* Feature list (enterprise features etc.) */
    .feature-list {
        font-size: 14px;
    }

    .feature-list li {
        font-size: 14px;
    }

    /* Notes section */
    .comparison-notes {
        padding: 0 16px;
    }

    .comparison-notes.expanded {
        padding: 16px;
    }

    .notes-list {
        font-size: 14px;
    }

    .notes-list li {
        font-size: 14px;
    }

    /* Comparison detail button */
    .btn-more-comparison {
        font-size: 16px;
        padding: 16px;
    }

    /* Overall gap adjustments */
    .pricing-new > * + * {
        margin-top: var(--sec-gap);
    }
}

/* Phone (<=767px) */
@media screen and (max-width: 767px) {
    .pricing-plans-container .pricing-cards {
        flex-direction: column !important;
        gap: 8px;
    }
}

/* Enterprise restyle: same hover as the top page (refill, 2px lift, shadow) */
.btn-trial:hover {
    background: #0ba360;
    border-color: #0ba360;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 163, 96, 0.3);
}

.btn-trial:hover::after {
    background: #fff;
    color: #087e4a;
}

.btn-contact:hover {
    background: #162a41;
    border-color: #162a41;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(32, 62, 96, 0.35);
}

/* ============================================================
   Enterprise restyle, bringing the pricing page into the top page system.
   .pricing__body is only set on the pricing page, so the top page and the other
   single-column pages that also load this file are unaffected.
   ============================================================ */
.pricing__body.body-renewal2025 {
    /* Roboto for Latin and figures; Japanese stays on Noto Sans JP */
    font-family:
        "Roboto", "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック",
        "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック",
        "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}

/* Buttons inside the plan cards take the 3px radius; the shared 202512 rules
       still use 6px */
.pricing__body .pricing-plans-container a.btn-common.btn-common202512,
.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common-white.btn-common-white202512 {
    border-radius: 3px;
    box-shadow: none;
    font-size: 17px;
    height: 57px;
}

/* Standard = green outline, Enterprise = flat navy, as on the top page */
.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common-white.btn-common-white202512 {
    background: #fff;
    border: 1px solid var(--main-color-1);
    color: var(--main-color-d1);
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common-white.btn-common-white202512
    .allow-box {
    background: #f8f8fc;
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common-white.btn-common-white202512:hover {
    background: var(--main-color-1);
    border-color: var(--main-color-1);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 163, 96, 0.3);
}

/* The navy tag above and a filled button together read too heavy, so this is an
   outline built like the Standard green: coloured border and text, filling on hover. */
.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512 {
    background: #fff;
    border: 1px solid #264a73;
    color: #203e60;
    box-shadow: none;
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512
    .allow-box {
    background: #f8f8fc;
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512
    .allow-box::after {
    color: #203e60;
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512:hover {
    background: #264a73;
    border-color: #264a73;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(32, 62, 96, 0.3);
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512:hover
    .allow-box {
    background: #fff;
}

.pricing__body
    .pricing-plans-container
    a.btn-common.btn-common202512.btn-common-orange202512:hover
    .allow-box::after {
    color: #203e60;
}

/* Widened; the sections did not read as separate. The type is included because
   the responsive `.pricing-new` (0,1,0) cannot override `section.pricing-new` (0,1,1). */
@media screen and (max-width: 959px) {
    section.pricing-new {
        --sec-gap: 56px;
        padding: 28px 0 0;
    }
}

@media screen and (max-width: 767px) {
    section.pricing-new {
        --sec-gap: 48px;
        padding: 24px 0 0;
    }
}

/* ============================================================
   Enterprise restyle: type scale.
   The page mixed ten sizes (38/32/24/22/18/17/16/14/13/12) and used both 16px and
   14px for the same role, such as comparison values against their descriptions.
   This reduces it to the top page's scale:
     item heading 17 / body 15 / meta 14 / badge 12
   Each rule is prefixed with section.pricing-new to outrank the per-breakpoint sizes.
   ============================================================ */

/* Page lead. line-height was unset (normal); 1.65 matches the body */
section.pricing-new .pricing-subtitle {
    font-size: 17px;
    line-height: 1.65;
}

section.pricing-new .section-subtitle {
    font-size: 15px;
    line-height: 1.65;
}

/* Item heading, the same as the top page feature and case study cards.
   .row-label h3 is excluded: the comparison table's label column is only ~114px at
   360px, where 17px wraps the longest label over three lines. It keeps the smaller
   sizes the <=959px block already sets for that column. */
section.pricing-new .option-name,
section.pricing-new .support-content h3,
section.pricing-new .faq-question h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

section.pricing-new .row-label h3 {
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

/* Body */
section.pricing-new .value-text,
section.pricing-new .support-content p,
section.pricing-new .faq-answer,
section.pricing-new .faq-answer p,
section.pricing-new .faq-answer li,
section.pricing-new .btn-more-comparison {
    font-size: 15px;
    line-height: 1.65;
}

/* The Q badge stays below the 17px heading; its box matches the heading height */
section.pricing-new .faq-icon {
    font-size: 15px;
    padding: 3px 9px 5px;
}

/* ------------------------------------------------------------
   Tightening the spacing
   ------------------------------------------------------------ */

/* 40px was loose for the contents and left a gap between price and button */
section.pricing-new .plan-card {
    padding: 32px 28px;
}

/* Dropped a height:18px that did not match the actual rows; padding sets the
   row height instead */
section.pricing-new .option-row {
    height: auto;
    padding: 14px 16px;
}

section.pricing-new .support-plan-item {
    padding: 16px;
    margin-bottom: 12px;
}

section.pricing-new .support-content h3 {
    margin-bottom: 6px;
}

/* The last two odd sizes. 16px and 13px appeared only here, leaving the price
   area off the scale; both move into the 14-15px meta tier. */
section.pricing-new .price-unit {
    font-size: 15px;
}

section.pricing-new .price-monthly {
    font-size: 14px;
}