/* ----------------------------------------------------------
ファーストビュー（.plusHero・案C）
12カラム（1120px・溝12px・1カラム82.33px）。左5カラム＝460px、右7カラム＝648px。
左：主張 → 3ポイント（アイコン＋2行。文章は置かない）→ 行動と条件。
右：見本4枚（何が作れるかを説明なしで伝える）。強調色はCTAのオレンジ1か所。
---------------------------------------------------------- */

.plusHero {
    width: min(1120px, calc(100% - 4rem));
    margin: 0 auto;
}

.plusHero__inner {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    min-height: 600px;
}

/* どのページかの照合。主張の直上・小さく */
.plusHero__eyebrow {
    margin: 0;
    color: #087f8f;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* 主張。Noto Sans JP 600・2行・460pxに収める */
.plusHero__ttl {
    margin: 10px 0 0;
    font-size: 4.2rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #333;
    font-feature-settings: "palt";
}

/* 3ポイント。文章の代わりに「✓＋太字の結論1行＋薄字の補足1行」を縦に3つ（SmartHR・LINE WORKSの型）。
   箱・そろった影・等間隔3列は使わない。補足行があるので結論が誤読されない。 */
.plusHero__points {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.plusHero__point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plusHero__icon {
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 1px;
}

.plusHero__point-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plusHero__point-label {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.45;
    color: #182230;
}

.plusHero__point-sub {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #6b7a88;
}

.plusHero__cta {
    margin-top: 28px;
}

/* 行動の条件を1行（無料・解約無料・継続時の金額） */
.plusHero__note {
    margin: 12px 0 0;
    max-width: 460px;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #526273;
}

/* ---- 見本4枚（トップLPと同じ並び） ---- */
.plusHero__samples {
    margin: 0;
}

.plusHero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plusHero__grid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(14, 81, 96, 0.2);
}

.plusHero__samples-copy {
    margin: 18px 0 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.plusHero__caption-note {
    display: block;
    margin-top: 4px;
    font-size: 1.1rem;
    font-weight: 400;
    color: #8a97a3;
}

/* トップLPは .home .site-main が120px。ヘッダー直下は 96px に詰める */
.home .site-main {
    margin-top: 96px;
}

@media screen and (max-width: 1120px) {

    .plusHero__inner {
        grid-template-columns: 1fr;
        row-gap: 32px;
        min-height: 0;
    }

    .plusHero__ttl {
        font-size: 3.4rem;
    }

    .plusHero__samples {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {

    .home .site-main {
        margin-top: 84px;
    }

    .plusHero {
        width: calc(100% - 3.2rem);
    }

    /* スマホは見出しを中央に。真上の小見出しも同じ軸にそろえる */
    .plusHero__eyebrow {
        font-size: 1.2rem;
        text-align: center;
    }

    .plusHero__ttl {
        font-size: 2.9rem;
        line-height: 1.4;
        text-align: center;
    }

    .plusHero__points {
        margin-top: 18px;
        row-gap: 12px;
    }

    .plusHero__point-label {
        font-size: 1.45rem;
    }

    .plusHero__point-sub {
        font-size: 1.2rem;
    }

    .plusHero__cta {
        margin-top: 18px;
    }

    .plusHero .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .plusHero .btn a {
        height: 56px;
        font-size: 1.8rem;
        line-height: 52px;
    }

    .plusHero__note {
        max-width: none;
        font-size: 1.2rem;
        text-align: center;
    }

    /*
        スマホのFVの順：見出し → 見本のカルーセル → 3ポイント（太字だけ） → CTA。
        .plusHero__copy を display: contents で外し、親を縦の flex にして order で並べ替える。
        PCの構造（左に文、右に見本）はそのまま。
    */
    .plusHero__inner {
        display: flex;
        flex-direction: column;
        row-gap: 0;
    }

    .plusHero__copy {
        display: contents;
    }

    .plusHero__eyebrow { order: 1; }
    .plusHero__ttl { order: 2; }
    .plusHero__samples { order: 3; }
    .plusHero__points { order: 4; }
    .plusHero__cta { order: 5; }

    .plusHero__samples {
        max-width: none;
        margin: 20px 0 0;
    }

    /* 見本の直下は※の注記だけ。1文のキャプションは見出しと重なるので出さない */
    .plusHero__samples-copy-text {
        display: none;
    }

    .plusHero__samples-copy {
        margin-top: 0;
    }

    .plusHero__caption-note {
        margin-top: 4px;
        text-align: left;
    }

    /* 3ポイントは太字の1行だけ。補足は出さない */
    .plusHero__point-sub {
        display: none;
    }

    .plusHero__points {
        margin-top: 20px;
        row-gap: 10px;
    }

    .plusHero__point {
        align-items: center;
    }

    .plusHero__icon {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    .plusHero__cta {
        margin-top: 20px;
    }
}

/* ----------------------------------------------------------
料金（.plans）
パーソナルプラスの1枚だけ。幅は下の確認事項（.plans__notice）と同じ 1120px。
横長の1枚は .pcard--solo で ECの商品ページの骨格（左＝中身、右＝購入ボックス）にする。
左（誰向け＋内容）：右（申し込み枠）＝7：5（12カラムから取る）。注意事項は折りたたまず常時表示する。
---------------------------------------------------------- */

.plans {
    position: relative;
    padding-top: 114px;
}

.plans__anchor {
    position: absolute;
    top: 0;
}

.plans__inner {
    width: min(1120px, calc(100% - 4rem));
    margin-inline: auto;
}

/* リード文は置かない（年間プランのみ・税込は申し込み枠に書いてある）ので、見出しからカードまでの間をここで取る */
.plans .ttl {
    margin-bottom: 40px;
}

.pcard--solo .pcard__buy .pcard__price .pcard__tax {
    margin-left: 8px;
    font-size: 1.3rem;
    vertical-align: 0.2em;
}

.plans__lead {
    margin: 0 0 36px;
    color: #526273;
    font-size: 1.7rem;
    text-align: center;
}

/* 1枚だけ。幅は下の「お申し込みの前にご確認ください」（.plans__notice）と同じ 1120px */
.plans__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 1120px;
    margin: 0 auto;
}

.pcard__list li.is-off {
    color: #8a97a3;
}

.pcard__list li.is-off::before {
    width: 10px;
    height: 0;
    top: 12px;
    left: 2px;
    border: 0;
    border-top: 2px solid #b9c6cb;
    transform: none;
}

/* フリーの出口は文字リンク。高さはボタン列に合わせる（56px） */
.pcard__cta--link a {
    display: inline-flex;
    align-items: center;
    height: 56px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0e7c8a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 白ボタン（副CTA）はカード幅に合わせる */
.pcard__cta.white a {
    width: 100%;
    max-width: 340px;
    height: 56px;
    line-height: 52px;
    font-size: 1.8rem;
    box-shadow: none;
    border-color: #17aabd;
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 30px;
    border: 1px solid #dcebee;
    border-radius: 16px;
    background: #fff;
}

.pcard--recommended {
    border: 2px solid #17aabd;
    box-shadow: var(--shadow-card);
}

.pcard__ribbon {
    position: absolute;
    top: -14px;
    left: 28px;
    margin: 0;
    padding: 4px 14px;
    border-radius: 999px;
    background: #e96e28;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pcard__name {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #182230;
}

.pcard__ref {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #dcebee;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6b7a88;
    vertical-align: middle;
}

.pcard__for {
    margin: 6px 0 0;
    font-size: 1.4rem;
    color: #526273;
}

.pcard__price {
    margin: 18px 0 0;
    line-height: 1;
    color: #182230;
    font-variant-numeric: tabular-nums;
}

.pcard__term {
    margin-right: 8px;
    font-size: 1.6rem;
    font-weight: 700;
    vertical-align: 0.6em;
}

.pcard__figure {
    font-size: 4.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pcard--recommended .pcard__figure {
    font-size: 5.6rem;
    color: #0e7c8a;
}

.pcard__unit {
    margin-left: 4px;
    font-size: 1.8rem;
    font-weight: 700;
}

.pcard__terms {
    margin: 10px 0 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #526273;
}

.pcard__list {
    display: grid;
    row-gap: 10px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #e9f1f2;
    list-style: none;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #344054;
}

.pcard__list li {
    position: relative;
    padding-left: 26px;
}

/* ✓はCSSで描く（画像・絵文字を使わない） */
.pcard__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 13px;
    border-right: 2.4px solid #17aabd;
    border-bottom: 2.4px solid #17aabd;
    transform: rotate(45deg);
}

.pcard__list b {
    font-weight: 700;
    color: #182230;
    white-space: nowrap; /* 「月3／枚」のように単位の途中で折れないように */
}

.pcard__mult {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e9f5f7;
    color: #0e7c8a;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.pcard__note {
    display: block;
    font-size: 1.2rem;
    color: #6b7a88;
}

.pcard__cta {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 24px;
}

.pcard__cta-note {
    margin: 10px 0 0;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #6b7a88;
    text-align: center;
}

.pcard__plus-head {
    margin: 20px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0e7c8a;
}

.pcard__list--plus {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

/* ----------------------------------------------------------
1枚だけの横長カード（.pcard--solo）
参照：単一プランの料金ページ（Basecamp・HEY）。共通点は「価格とCTAをひと塊にする」
「機能は 結果＋補足 の一覧で、行間と外側の余白を広く取る」。
階層は 見出し（名前＋約束の1行・幅いっぱい・下に罫）→ その下に 変わること（左7）と 申し込み枠（右5）を同順位で。
変わることは FV の3ポイントと同じ「✓＋太字1行（結果）＋薄字1行（仕様）」の縦リスト。チーム利用だけは「＋」の印。
申し込み枠は薄いブランド色の面。CTAの直下に、背中を押す2行（解約0円／パーソナルからの充当）を置く。
余白は 8px の倍数で取る（カードの内側 48、列の間 64、行の間 24）。
---------------------------------------------------------- */

.pcard--solo {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "head head"
        "features buy";
    column-gap: 64px;
    align-items: stretch;
    padding: 44px 48px 44px;
}

.pcard--solo .pcard__head {
    grid-area: head;
    padding-bottom: 28px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e9f1f2;
}

.pcard--solo .pcard__name {
    font-size: 2.6rem;
    letter-spacing: 0.01em;
}

/* 約束の1行。名前より大きくはしない（主役は価格）が、本文よりは立てる */
.pcard__promise {
    margin: 10px 0 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: #344054;
}

.pcard--solo .pcard__features {
    grid-area: features;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pcard__group-head {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7a88;
}

.pcard__group-head--plus {
    color: #0e7c8a;
}

/* 1項目＝機能名と量（1行目）＋それで何ができるか（2行目） */
.pcard--solo .pcard__features .pcard__list {
    row-gap: 18px;
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    font-size: 1.6rem;
    line-height: 1.5;
}

.pcard--solo .pcard__features .pcard__list li {
    padding-left: 30px;
}

.pcard--solo .pcard__features .pcard__list li::before {
    top: 6px;
    left: 2px;
    width: 9px;
    height: 15px;
    border-width: 2.6px;
}

.pcard--solo .pcard__features .pcard__hint {
    margin-top: 4px;
    font-size: 1.3rem;
    line-height: 1.6;
}

/* 基本の一覧は2列にして左の幅を使い切る（読む順は行ごと：左→右） */
.pcard--solo .pcard__group--basic .pcard__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

/* プラスだけの機能：枠線の面＋「＋」の印。基本（✓）と同じ見え方にしない */
.pcard--solo .pcard__group--plus {
    padding: 20px 24px 22px;
    border: 1px solid #cfe7eb;
    border-radius: 12px;
}

/* プラスの2項目は1列に積む。説明を1行で収めるため（2列だと「招待できま／す」で折れる）。
   面が高くなる分、右の申し込み枠との高さの差も埋まる */
.pcard--solo .pcard__group--plus .pcard__list {
    row-gap: 14px;
}

.pcard--solo .pcard__group--plus .pcard__list li::before {
    content: "+";
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #17aabd;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transform: none;
}

.pcard--solo .pcard__buy {
    grid-area: buy;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 36px;
    border-radius: 16px;
    background: #f3fafb;
}

.pcard--solo .pcard__buy .pcard__price {
    margin-top: 0;
}

.pcard--solo .pcard__buy .pcard__figure {
    font-size: 6.4rem;
}

.pcard--solo .pcard__buy .pcard__permonth {
    margin-top: 16px;
    font-size: 1.5rem;
}

.pcard--solo .pcard__buy .pcard__permonth + .pcard__terms {
    margin-top: 12px;
    font-size: 1.35rem;
}

.pcard--solo .pcard__cta {
    width: 100%;
    margin-top: 0;
    padding-top: 28px;
}

/* テーマの .btn a は340px固定。申し込み枠の内側（スマホで約300px）に収めるため、枠いっぱい・最大340pxにする */
.pcard--solo .pcard__cta a {
    width: 100%;
    max-width: 340px;
}

/* 注記と充当の案内は左揃え（PC・スマホ共通。文の途中で折らず、1文＝1行で読ませる） */
.pcard--solo .pcard__cta-note {
    width: 100%;
    margin-top: 14px;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #344054;
    text-align: left;
}

/* パーソナル利用者への一言。注記と同じ小ささで、上に細い罫 */
.pcard__switch {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #dcebee;
    font-size: 1.25rem;
    line-height: 1.7;
    color: #526273;
    text-align: left;
}

.pcard--solo .pcard__switch {
    width: 100%;
}

/* 1120px 以下は 見出し → 変わること → 申し込み枠 の順に縦へ積む（申し込み枠は幅いっぱい・CTAは中央） */
@media screen and (max-width: 1120px) {
    .plans {
        padding-top: 80px;
    }

    .pcard--solo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "features"
            "buy";
        padding: 40px 36px 36px;
    }

    .pcard--solo .pcard__head {
        padding-bottom: 24px;
        margin-bottom: 28px;
    }

    .pcard--solo .pcard__buy {
        margin-top: 32px;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .pcard {
        padding: 24px 18px 24px;
    }

    .pcard--solo {
        padding: 32px 22px 28px;
    }

    .pcard--solo .pcard__name {
        font-size: 2.2rem;
    }

    .pcard--solo .pcard__head {
        padding-bottom: 20px;
        margin-bottom: 24px;
    }

    .pcard__promise {
        font-size: 1.6rem;
    }

    /* スマホは一覧を1列に */
    .pcard--solo .pcard__group--basic .pcard__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .pcard--solo .pcard__group--plus {
        padding: 18px 18px 20px;
    }

    .pcard--solo .pcard__features .pcard__list {
        font-size: 1.5rem;
    }

    .pcard--solo .pcard__buy {
        margin-top: 28px;
        padding: 32px 20px 28px;
    }

    /* 「年間 66,000 円 税込」を1行に収める（枠の内側は約300px） */
    .pcard--solo .pcard__buy .pcard__price {
        white-space: nowrap;
    }

    .pcard--solo .pcard__buy .pcard__figure {
        font-size: 4.8rem;
    }

    .pcard--recommended .pcard__figure {
        font-size: 4.8rem;
    }

    .pcard__list {
        font-size: 1.4rem;
    }

    .pcard__mult {
        display: inline-block;
        margin-left: 6px;
    }

    .plans__lead {
        font-size: 1.5rem;
    }
}

/* ----------------------------------------------------------
できること（パーソナルとの比較）
このページの主役。増える量が読み取れることだけを目的にする。
---------------------------------------------------------- */

/* ----------------------------------------------------------
料金
年額を主に、月あたりを補足に出す。一括の前払いであることを必ず添える。
---------------------------------------------------------- */

.plusPrice {
    padding-top: 114px;
}

.plusPrice__inner {
    width: min(1120px, calc(100% - 4rem));
    margin-inline: auto;
}

/* このページで唯一、影で浮かせる面。ほかの面は枠線だけで階層を作る */
.plusPrice__card {
    width: min(554px, 100%);
    margin-inline: auto;
    padding: 32px 24px 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.plusPrice__plan {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.plusPrice__amount {
    margin: 12px 0 0;
    line-height: 1.1;
    color: #0e7c8a;
}

.plusPrice__term {
    margin-right: 8px;
    font-size: 1.8rem;
    font-weight: 700;
    vertical-align: 0.5em;
}

.plusPrice__figure {
    font-family: "Oswald", sans-serif;
    font-size: 6.4rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
}

.plusPrice__unit {
    font-size: 2.4rem;
    font-weight: 700;
}

.plusPrice__tax {
    margin-left: 4px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #526273;
}

.plusPrice__month {
    margin: 6px 0 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #526273;
}

.plusPrice__meta {
    display: grid;
    gap: 0.3rem;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: #526273;
    font-size: 1.4rem;
    line-height: 1.7;
}

/* トップLPのボタンは幅340px固定なので、カードの中で中央に置く */
.plusPrice__cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.plusPrice__cta-note {
    margin: 10px 0 0;
    font-size: 1.2rem;
    color: #6b7a88;
}

.plusPrice__notice {
    width: min(744px, 100%);
    margin: 32px auto 0;
    padding: 24px;
    border: 1px solid #dcebee;
    border-radius: 12px;
    background: #fff;
}

.plusPrice__notice-ttl {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
}

.plusPrice__notice-list {
    display: grid;
    gap: 0.8rem;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: #526273;
    font-size: 1.4rem;
    line-height: 1.8;
}

.plusPrice__notice-list li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.plusPrice__notice-list li::before {
    content: "・";
}

.plusPrice__notice-list li.is-caution {
    color: #b4231f;
}

.plusPrice__notice-list li.is-caution::before {
    content: "※";
}

/* ----------------------------------------------------------
お客様の声
本文が主で、属性は出所を示す補足。写真は置かない（情報を足さないため）。
---------------------------------------------------------- */

/* ----------------------------------------------------------
1120px 以下（トップLPと同じ切替幅）
---------------------------------------------------------- */

/* ----------------------------------------------------------
768px 以下
---------------------------------------------------------- */

@media screen and (max-width: 768px) {

    .plusPrice__card {
        padding: 24px 16px;
    }

    .plusPrice__figure {
        font-size: 5.2rem;
    }

    .plusPrice__notice {
        padding: 20px 16px;
    }

    .plusPrice__notice-list {
        font-size: 1.3rem;
    }
}

/* ----------------------------------------------------------
導入実績の帯（.clientsBand）
FVの直下に置く「信用できるか」への答え。見出しを立てず、1行のテキストと
ロゴ2段の帯にとどめる（フルセクションだった頃の約500pxを約半分にし、
プランを見に来た人を料金へすぐ進ませる）。ロゴは白い小さな面に載せるだけで、
枚数・順序はトップLPと同じ。
---------------------------------------------------------- */

.clientsBand {
    margin-top: 32px;
    padding: 40px 0;
    border-top: 1px solid #dde9ec;
    border-bottom: 1px solid #dde9ec;
}

.clientsBand__inner {
    width: min(1120px, calc(100% - 4rem));
    margin-inline: auto;
}

.clientsBand__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin: 0 0 24px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    color: #2b3a48;
    text-align: center;
}

.clientsBand__kicker {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #17aabd;
    border-radius: 999px;
    color: #0e7c8a;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.clientsBand__text small {
    margin-left: 4px;
    color: #6b7a88;
    font-size: 1.2rem;
    font-weight: 400;
}

.clientsBand__logos {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
}

.clientsBand__logo {
    display: grid;
    height: 56px;
    padding: 8px 12px;
    place-items: center;
    border-radius: 6px;
    background: #fff;
}

.clientsBand__logo img {
    width: auto;
    max-width: 100%;
    max-height: 32px;
}

.clientsBand__note {
    margin: 14px 0 0;
    color: #6b7a88;
    font-size: 1.1rem;
    text-align: center;
}

/* 帯の直後に来る料金は、帯側の余白と足して 96px 前後にそろえる */
.clientsBand + .plans {
    padding-top: 88px;
}

/* 料金の後ろは「選ばれる理由」（濃いティールの面）が続くので、明るい面側の余白をここで確保する */
.plans {
    padding-bottom: 112px;
}

@media screen and (max-width: 1120px) {
    .clientsBand__logos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .clientsBand {
        margin-top: 56px;
        padding: 28px 0;
    }

    .clientsBand__title {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 18px;
        font-size: 1.4rem;
    }

    .clientsBand__text small {
        display: block;
        margin-left: 0;
    }

    /* スマホは2段の横スクロールにする。18社を6段に積むと帯でなくなるため */
    .clientsBand__inner {
        width: 100%;
    }

    .clientsBand__title,
    .clientsBand__note {
        padding-inline: 2rem;
    }

    .clientsBand__logos {
        grid-template-columns: none;
        grid-template-rows: repeat(2, 48px);
        grid-auto-flow: column;
        grid-auto-columns: 104px;
        gap: 6px;
        padding-inline: 2rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .clientsBand__logos::-webkit-scrollbar {
        display: none;
    }

    .clientsBand__logo {
        height: 48px;
        padding: 6px 10px;
        scroll-snap-align: start;
    }

    .clientsBand__logo img {
        max-height: 26px;
    }

    .clientsBand + .plans {
        padding-top: 64px;
    }

    .plans {
        padding-bottom: 80px;
    }
}

/* テーマの .reason はトップLPで前のセクションから 168px 空ける前提。ここでは料金の padding-bottom で
   余白を持つので、二重にならないよう打ち消す */
.plans + .reason {
    margin-top: 0;
}



/* カードの価格まわり：年間の総額が主、月あたりを2番目に見せる。
   パーソナルは月払いプランがあることを、プラスは月あたり5,500円であることを、条件つきで示す */
.pcard__permonth {
    margin: 10px 0 0;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #344054;
}

.pcard__permonth b {
    margin-left: 2px;
    font-size: 2rem;
    font-weight: 700;
    color: #182230;
    font-variant-numeric: tabular-nums;
}

.pcard__permonth--plus b {
    font-size: 2.4rem;
    color: #0e7c8a;
}

.pcard__tax {
    margin-left: 6px;
    font-size: 1.2rem;
    color: #6b7a88;
}

.pcard__permonth + .pcard__terms {
    margin-top: 8px;
}

/* ----------------------------------------------------------
枚数の目安（.pcard__hint）
「月200枚」「月40枚」が自分に足りるかを、資料の本数に換算して判断してもらう。
数字は仕様の枚数からの単純な換算（1本10〜20枚と仮定）。
---------------------------------------------------------- */

.pcard__hint {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #6b7a88;
}

/* ----------------------------------------------------------
契約・支払いの確認事項（.plans__notice）
折りたたまず常時表示。箱には入れず、ページの地の上に脚注として置く（カードが2枚連続して見えるのを避ける。
商品＝カード、契約条件＝脚注、と役割で見せ方を分ける。単一プランの料金ページも契約条件は価格の下の本文）。
カードとの区切りは上の細い罫1本。幅はカードと同じ 1120px。
---------------------------------------------------------- */

.plans__notice {
    max-width: 1120px;
    margin: 32px auto 0;
    padding: 28px 8px 0;
    border-top: 1px solid #dcebee;
}

.plans__notice-ttl {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #182230;
}

.plans__notice .plusPrice__notice-list {
    margin-top: 12px;
}

/* ----------------------------------------------------------
お客様の声（.voice）
面も装飾も置かず、ページの地色の上に「吹き出し → 話した人」を3列で並べる。
吹き出しの尻尾が人物を指す。旧LPから残すのは吹き出しの形と人物のイラストだけ。
---------------------------------------------------------- */

.voice {
    padding-top: 168px;
}

.voice__inner {
    width: min(1120px, calc(100% - 4rem));
    margin-inline: auto;
}

.voice__wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    margin-top: 48px;
}

.voice__item {
    display: flex;
    flex-direction: column;
}

/* 吹き出し。3枚の高さをそろえ、尻尾の位置（人物の真上）を同じ高さにする */
.voice__bubble {
    position: relative;
    flex: 1 0 auto;
    margin: 0;
    padding: 28px 28px 30px;
    border: 1px solid #cfe3e7;
    border-radius: 24px;
    background: #fff;
}

.voice__bubble::before,
.voice__bubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 44px;
    border-style: solid;
    translate: 0 100%;
}

.voice__bubble::before {
    border-width: 14px 11px 0 11px;
    border-color: #cfe3e7 transparent transparent;
}

.voice__bubble::after {
    margin-left: 1px;
    border-width: 12.5px 10px 0 10px;
    border-color: #fff transparent transparent;
}

.voice__text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.9;
    color: #344054;
}

/* FVの3ポイントに対応する一節だけ、薄い印。本文は変えない */
.voice__text mark {
    background: linear-gradient(transparent 62%, #d9f3f6 62%);
    color: inherit;
}

/* 話した人。尻尾の真下に人物、その右に業種・規模 */
.voice__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-left: 8px;
}

.voice__avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.voice__workType {
    margin: 0;
    color: #0e7c8a;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

.voice__attr {
    margin: 2px 0 0;
    color: #6b7a88;
    font-size: 1.3rem;
    line-height: 1.5;
}

@media screen and (max-width: 1120px) {
    .plans__grid {
        max-width: none;
    }

    .voice__wrap {
        column-gap: 20px;
    }

    .voice__bubble {
        padding: 22px 20px 24px;
    }
}

@media screen and (max-width: 768px) {
    .voice {
        padding-top: 100px;
    }

    .voice__wrap {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 36px;
        margin-top: 28px;
    }

    .voice__bubble {
        padding: 20px 18px 22px;
        border-radius: 18px;
    }

    .voice__text {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .voice__who {
        margin-top: 20px;
    }

    .voice__avatar {
        width: 48px;
        height: 48px;
    }

    .voice__workType {
        font-size: 1.4rem;
    }

    .voice__attr {
        font-size: 1.2rem;
    }

    .plans__notice {
        margin-top: 28px;
        padding: 24px 0 0;
    }
}

/* ----------------------------------------------------------
スマホのヘッダーCTA（.commonHeader__spCta）
ハンバーガーの左に小さな青いボタン。1120px以下（ナビが畳まれる幅）だけ表示する。
flex の auto マージンで右端へ寄せ、ハンバーガーとの間は 6px。
テーマ側（irusiru.jp の legacy-common.css）にも同じ規則を入れている。
---------------------------------------------------------- */

.commonHeader__spCta {
    display: none;
}

@media screen and (max-width: 1120px) {
    .commonHeader__spCta {
        display: inline-flex;
        align-items: center;
        height: 36px;
        margin-left: auto;
        margin-right: 6px;
        padding: 0 14px;
        border-radius: 6px;
        background-color: var(--color-brand-ink, #0e7c8a);
        color: #fff;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }

    /* メニューを開いている間は、全画面のナビに同じCTAがあるので隠す */
    .commonHeader__nav.is-open ~ .commonHeader__spCta {
        visibility: hidden;
    }
}