@charset "utf-8";
/* =====================================================================
   費用総合ページ（費用ピラー /price/）専用スタイル
   page-price.php で読み込む。CSS変数・ヘッダー/フッターは site-chrome.css 側。
   クラスは pp- プレフィックスで page 内スコープ（.price-main）に限定。
   ===================================================================== */

/* ---- ベース（自己完結ページ用の保険） ----
   margin/padding の全称リセットは必須：site-chrome.css のヘッダー/フッターは
   このリセット前提で書かれている（無いと footer-col ul 等にブラウザ既定の
   padding-left が残りリンク列がずれる）。toppage-new3.css と同じ扱い。 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
    color: var(--text);
    -webkit-text-size-adjust: 100%;
}
.price-main {
    font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
    color: var(--text);
    font-size: 17px;
    line-height: 1.85;
    background: var(--bg);
    overflow-x: hidden;
}
/* img への height:auto / display:block 一括指定は禁止：
   共通プランカード（plans-shared.css .plan-photo img { height:110px }）を
   同詳細度・後読みで上書きし、写真がはみ出してカードが崩れる。 */
.price-main img { max-width: 100%; }
.price-main a { color: inherit; text-decoration: none; }
.price-main .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.price-main .container-narrow { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }

.pp-sec { padding: 64px 0; }
.pp-sec--white { background: #fff; }
@media (max-width: 640px) { .pp-sec { padding: 40px 0; } }

/* 見出し（トップ .sec-head 準拠） */
.pp-sec-head { text-align: center; margin-bottom: 36px; }
.pp-sec-head h2 { font-size: 30px; font-weight: 900; letter-spacing: .04em; line-height: 1.5; margin: 0; }
.pp-sec-head h2 em { font-style: normal; color: var(--primary); }
.pp-sec-head .pp-sec-lead { font-size: 16px; color: var(--mid); margin: 10px 0 0; }
@media (max-width: 640px) { .pp-sec-head h2 { font-size: 23px; } }

/* ボタン */
.pp-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--primary); border: 2px solid var(--primary);
    padding: 10px 18px; border-radius: 6px; font-weight: 700; font-size: 15px;
    transition: background .2s, color .2s;
}
.pp-btn-outline:hover { background: var(--primary); color: #fff; }
.pp-link-more { text-align: center; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ===================== ① MV ===================== */
.pp-mv { background: linear-gradient(180deg, #fff 0%, var(--primary-pale) 100%); padding: 56px 0 48px; }
.pp-mv-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; text-align: center; }
.pp-mv h1 { font-size: 38px; font-weight: 900; line-height: 1.5; letter-spacing: .03em; margin: 0; }
.pp-mv h1 em { font-style: normal; color: var(--primary); }
.pp-mv-lead { margin: 18px 0 0; font-size: 17px; color: var(--mid); text-align: left; }
@media (max-width: 640px) {
    .pp-mv { padding: 36px 0 32px; }
    .pp-mv h1 { font-size: 26px; }
    .pp-mv-lead { font-size: 15px; }
}

.pp-mv-lead strong.pp-price {
    font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 26px; font-weight: 700;
    color: var(--primary-dark); line-height: 1.4;
}
.pp-mv-note { font-size: 12px; color: var(--mid); margin: 8px 0 0; text-align: left; }

/* 目次 */
.pp-toc { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 24px 28px; margin: 32px auto 0; max-width: 860px; text-align: left; }
.pp-toc-title { font-size: 16px; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.pp-toc ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; padding: 0; }
.pp-toc ol a { font-size: 15px; color: var(--text); display: flex; gap: 8px; align-items: baseline; }
.pp-toc ol a::before { content: "\25B8"; color: var(--primary); font-size: 12px; }
.pp-toc ol a:hover { color: var(--primary); }
@media (max-width: 640px) { .pp-toc ol { grid-template-columns: 1fr; } }

/* ===================== ② プラン総額カード =====================
   共通プランカード（plans-shared.css の .plan-card / .plans-row）を使用。
   本ファイルには専用スタイルなし。 */

/* ===================== ③ 内訳3層 =====================
   カードごとの色は --bd-color / --bd-pale で切り替え。
   丸番号バッジ＋色帯見出し＋淡色のリストボックスで色を見やすく効かせる。 */
.pp-breakdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .pp-breakdown-grid { grid-template-columns: 1fr; } }
.pp-breakdown-card {
    --bd-color: var(--primary);
    --bd-pale: var(--primary-pale);
    background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    border: 1px solid var(--border); overflow: hidden;
    display: flex; flex-direction: column;
}
.pp-breakdown-card:nth-child(2) { --bd-color: var(--teal);   --bd-pale: #E4F6F9; }
.pp-breakdown-card:nth-child(3) { --bd-color: var(--orange); --bd-pale: #FDF2DC; }

/* 上部：色帯の見出し（丸番号＋タイトル） */
.pp-breakdown-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px; background: var(--bd-pale);
    border-bottom: 2px solid var(--bd-color);
}
.pp-breakdown-card .pp-bd-num {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--bd-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 20px; font-weight: 700;
    margin: 0;
}
.pp-breakdown-card h3 { font-size: 19px; font-weight: 900; margin: 0; color: var(--text); }

/* 本文 */
.pp-breakdown-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pp-breakdown-card .pp-breakdown-body > p { font-size: 15px; color: var(--mid); margin: 0; }
.pp-breakdown-card ul {
    list-style: none; font-size: 14px; margin: 14px 0 0; padding: 14px 16px;
    background: var(--bd-pale); border-radius: 6px; color: var(--text);
}
.pp-breakdown-card ul li { position: relative; padding-left: 20px; }
.pp-breakdown-card ul li + li { margin-top: 6px; }
.pp-breakdown-card ul li .pp-li-note { display: block; font-size: 12px; color: var(--mid); line-height: 1.5; }
.pp-breakdown-card ul li::before {
    content: ""; position: absolute; left: 4px; top: .55em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--bd-color);
}
.pp-breakdown-card .pp-hojo-link { margin-top: 12px; }

.pp-breakdown-point {
    margin-top: 28px; background: var(--primary-pale); border-radius: 6px;
    padding: 20px 28px; font-size: 16px; text-align: center;
}
.pp-breakdown-point strong { color: var(--primary-dark); }

/* ===================== ④ 形式別テーブル ===================== */
.pp-table-wrap { overflow-x: auto; background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.pp-price-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.pp-price-table th, .pp-price-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center; }
.pp-price-table thead th { background: var(--primary-pale); color: var(--primary-dark); font-size: 14px; }
.pp-price-table td.pp-plan-name { font-weight: 700; text-align: left; }
.pp-price-table .pp-tbl-price { font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 19px; color: var(--primary-dark); font-weight: 700; }
.pp-price-table td .pp-sub { display: block; font-size: 11px; color: var(--mid); font-weight: 400; }
.pp-table-note { font-size: 12px; color: var(--mid); margin-top: 10px; }

/* ===================== ⑤ 人数別 ===================== */
.pp-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .pp-people-grid { grid-template-columns: 1fr; } }
.pp-people-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px 24px; text-align: center; }
.pp-people-card .pp-pc-num { font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 44px; font-weight: 700; color: var(--teal); line-height: 1; margin: 0; }
.pp-people-card .pp-pc-num small { font-size: 18px; }
.pp-people-card h3 { font-size: 17px; font-weight: 700; margin: 8px 0 10px; }
.pp-people-card p { font-size: 14px; color: var(--mid); text-align: left; margin: 0; }
.pp-people-card .pp-pc-price { font-size: 14px; margin-top: 12px; text-align: center; color: var(--text); }
.pp-people-card .pp-pc-price strong { font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 22px; color: var(--primary-dark); }

/* ===================== ⑥ 不安解消 ===================== */
.pp-anshin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .pp-anshin-grid { grid-template-columns: 1fr; } }
.pp-anshin-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px 24px; text-align: center; }
.pp-anshin-card .pp-icon-circle {
    width: 64px; height: 64px; border-radius: 50%; background: var(--primary-pale);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 28px;
}
.pp-anshin-card h3 { font-size: 18px; font-weight: 900; line-height: 1.5; margin: 0 0 10px; }
.pp-anshin-card h3 em { font-style: normal; color: var(--primary); }
.pp-anshin-card p { font-size: 14px; color: var(--mid); text-align: left; margin: 0; }
.pp-caution-box { margin-top: 28px; background: #FFF8E6; color: #5A3A00; border-radius: 6px; padding: 20px 28px; font-size: 15px; }
.pp-caution-box strong { color: #6B3A00; }

/* ===================== ⑦ 相場比較 ===================== */
.pp-souba-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 720px) { .pp-souba-flex { grid-template-columns: 1fr; } }
.pp-souba-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 32px 28px; text-align: center; }
.pp-souba-card.is-wagaya { border: 2px solid var(--primary); }
.pp-souba-card .pp-souba-label { font-size: 15px; font-weight: 700; color: var(--mid); margin: 0; }
.pp-souba-card.is-wagaya .pp-souba-label { color: var(--primary-dark); }
.pp-souba-card .pp-souba-price { font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 46px; font-weight: 700; line-height: 1.3; margin: 0; }
.pp-souba-card.is-wagaya .pp-souba-price { color: var(--primary-dark); }
.pp-souba-card .pp-souba-price small { font-size: 18px; }
.pp-souba-card p { font-size: 13px; color: var(--mid); margin: 0; }
.pp-souba-source { font-size: 12px; color: var(--mid); margin-top: 12px; text-align: right; }
.pp-souba-source a { color: var(--primary); text-decoration: underline; }
.pp-souba-source a:hover { color: var(--primary-dark); }

/* ===================== ⑧ 抑える3つの方法 ===================== */
.pp-osaeru-list { display: grid; gap: 20px; }
.pp-osaeru-item {
    background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 24px 28px; display: flex; gap: 20px; align-items: center;
}
@media (max-width: 640px) { .pp-osaeru-item { flex-direction: column; text-align: center; } }
.pp-osaeru-item .pp-os-num {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--primary);
    color: #fff; font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pp-osaeru-item:nth-child(2) .pp-os-num { background: var(--teal); }
.pp-osaeru-item:nth-child(3) .pp-os-num { background: var(--orange); }
.pp-osaeru-item h3 { font-size: 19px; font-weight: 900; margin: 0 0 4px; }
.pp-osaeru-item h3 strong { color: var(--teal); font-size: 24px; }
.pp-osaeru-item p { font-size: 14px; color: var(--mid); margin: 0; }
.pp-osaeru-item .pp-btn-outline { flex-shrink: 0; margin-left: auto; }
@media (max-width: 640px) { .pp-osaeru-item .pp-btn-outline { margin-left: 0; } }

/* ===================== ⑨ お客様の声 ===================== */
.pp-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .pp-voice-grid { grid-template-columns: 1fr; } }
.pp-voice-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px 24px; }
.pp-voice-card blockquote { font-size: 16px; font-weight: 700; line-height: 1.8; margin: 0; }
.pp-voice-card blockquote span { background: linear-gradient(transparent 60%, #ffe169 60%); }
.pp-voice-card .pp-voice-meta { font-size: 13px; color: var(--mid); margin: 12px 0 0; }

/* ===================== ⑩ エリア ===================== */
.pp-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .pp-area-grid { grid-template-columns: 1fr; } }
.pp-area-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px; }
.pp-area-card h3 { font-size: 20px; font-weight: 900; color: var(--primary-dark); margin: 0 0 8px; }
.pp-area-card p { font-size: 14px; color: var(--mid); margin: 0 0 14px; }
.pp-area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-area-links a {
    font-size: 13px; border: 1px solid var(--border); border-radius: 50px; padding: 4px 14px;
    background: var(--bg); transition: border-color .2s, color .2s;
}
.pp-area-links a:hover { border-color: var(--primary); color: var(--primary); }

/* ===================== ⑧-2 補助金・給付金 ===================== */
.pp-hojo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .pp-hojo-grid { grid-template-columns: 1fr; } }
.pp-hojo-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px 24px; }
.pp-hojo-card h3 { font-size: 18px; font-weight: 900; margin: 0 0 6px; }
.pp-hojo-card .pp-hojo-amount {
    font-family: "Oswald", "Noto Sans JP", sans-serif; font-size: 26px; font-weight: 700;
    color: var(--green); margin: 0 0 8px;
}
.pp-hojo-card .pp-hojo-amount small { font-size: 13px; font-weight: 500; color: var(--mid); font-family: "Noto Sans JP", sans-serif; }
.pp-hojo-card p { font-size: 14px; color: var(--mid); margin: 0; }
.pp-hojo-link {
    display: inline-block; font-size: 14px; font-weight: 700; color: var(--primary);
    margin-top: 10px; text-decoration: underline;
}
.pp-hojo-link:hover { color: var(--primary-dark); }

/* ===================== ⑪ FAQ =====================
   /kasou/（plan-kasou.css）のFAQと同一デザイン：1枚の白カード内に
   Q行（白）＋A行（#fafafa・上罫線）。Q=28pxピンク丸、A=24pxティール丸。
   details/summary のアコーディオン機能は維持（既定はテンプレ側で open）。 */
.pp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.pp-faq-item { background: var(--white); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.pp-faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px; font-size: 16px; font-weight: 700;
}
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-item summary::before {
    content: "Q";
    flex-shrink: 0; width: 28px; height: 28px;
    background: var(--primary); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900; margin-top: 1px;
}
.pp-faq-item .pp-faq-a {
    padding: 16px 20px; background: #fafafa; border-top: 1px solid var(--border);
    display: flex; gap: 10px;
    font-size: 16px; color: var(--mid); line-height: 1.85;
}
.pp-faq-item .pp-faq-a::before {
    content: "A";
    flex-shrink: 0; width: 24px; height: 24px;
    background: var(--teal); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; margin-top: 2px;
}
.pp-faq-link {
    display: inline-block; font-size: 14px; font-weight: 700; color: var(--primary);
    margin-top: 8px; text-decoration: underline;
}
.pp-faq-link:hover { color: var(--primary-dark); }

/* ===================== ⑪-2 運営者情報 ===================== */
.pp-company-card { background: #fff; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); padding: 28px; }
.pp-company-lead { font-size: 15px; color: var(--text); margin: 0 0 18px; }
.pp-company-table { margin: 0; }
.pp-company-table > div { display: flex; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--border); font-size: 14px; }
.pp-company-table dt { flex-shrink: 0; width: 96px; font-weight: 700; color: var(--primary-dark); }
.pp-company-table dd { margin: 0; color: var(--mid); }
.pp-company-table dd a { color: var(--primary); text-decoration: underline; }
.pp-company-table dd a:hover { color: var(--primary-dark); }
@media (max-width: 640px) {
    .pp-company-table > div { flex-direction: column; gap: 2px; }
    .pp-company-table dt { width: auto; }
}

/* ===================== 脚注 ===================== */
.pp-footnotes { font-size: 12px; color: var(--mid); margin-top: 32px; text-align: left; }

/* ===================== 共通パーツ内の sp-only 改行 =====================
   footer-cta.php 等が使う。toppage-new3.css と同じ挙動（PCでは改行無効）。 */
br.sp-only { display: none; }
@media (max-width: 760px) { br.sp-only { display: inline; } }

/* ===================== 共通CTA（footer-cta.php）の色補正 =====================
   footer-cta は main.price-main の内側に置かれるため、汎用の
   .price-main a { color: inherit } が site-chrome.css のボタン色
   （.footer-cta-webbtn の白 / .footer-cta-tel の赤）を詳細度で
   打ち消してしまう。ここで明示的に戻す。 */
.price-main .footer-cta-webbtn { color: #fff; }
.price-main .footer-cta-tel { color: var(--cta-red); }
.price-main .footer-cta-tel:hover { color: #a01c1c; }