@charset "utf-8";
/* ==========================================================================
   売買（不動産仲介）ページ専用スタイル
   - 適用範囲は .sale-section 配下のみ（共通ヘッダー・フッターへ影響させない）
   - 配色：アイボリーホワイト × セージグリーン（平成建設グループの温かみ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ベース（和文ゴシック体・地色）
   PLAZA24の他ページ（search.css 等）と同じゴシックのフォントスタックに統一
   -------------------------------------------------------------------------- */
.sale-section,
.sale-section h1,
.sale-section h2,
.sale-section h3,
.sale-section h4,
.sale-section h5,
.sale-section h6,
.sale-section button,
.sale-section input,
.sale-section select,
.sale-section textarea,
.sale-section span,
.sale-section p,
.sale-section a,
.sale-section li,
.sale-section td,
.sale-section th,
.sale-section label {
    font-family: Lato, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.sale-section {
    background-color: #faf9f5; /* PLAZA24・木造をイメージした温かなアイボリーホワイト */
    color: #2b332f;            /* 墨色に近いチャコールグリーングレー */
}

/*
 * 共通CSS(style.min.css)の「h1〜h6 { color:#444 }」が売買コンテンツの見出しにも効き、
 * 濃色バナー上の白抜き見出しが灰色に沈んでしまうため、親要素の文字色を継承させる。
 * :where() は詳細度を持たないため、text-white 等のユーティリティ指定が常に優先される。
 */
.sale-section :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

.sale-section .font-serif-luxury {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
}

/* FontAwesome の明朝体化・セリフ化を防ぐ定義 */
.sale-section .fa,
.sale-section .fas,
.sale-section .far,
.sale-section .fab,
.sale-section .fa-solid,
.sale-section .fa-regular,
.sale-section .fa-brands,
.sale-section [class^="fa-"],
.sale-section [class*=" fa-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important;
}
.sale-section .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}
.sale-section .fa-regular {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   1-2. 文字サイズ（視認性の底上げ）
   Tailwindのサイズ指定を売買ページ内だけ一段階拡大する。
   HTML側（約400箇所）を書き換えずに全体を底上げでき、今後の追記にも自動で効く。
   行間は日本語が読みやすい値へ調整している（leading-* の指定より優先される）。
   -------------------------------------------------------------------------- */
.sale-section .text-\[8px\] {
    font-size: 11px;
    line-height: 1.5;
}
.sale-section .text-\[9px\],
.sale-section .text-\[9\.5px\] {
    font-size: 12px;
    line-height: 1.5;
}
.sale-section .text-\[10px\],
.sale-section .text-\[10\.5px\],
.sale-section .text-\[11px\] {
    font-size: 13px;
    line-height: 1.6;
}
.sale-section .text-xs {
    font-size: 14px;
    line-height: 1.75;
}
.sale-section .text-sm {
    font-size: 16px;
    line-height: 1.75;
}
.sale-section .text-base {
    font-size: 17px;
    line-height: 1.7;
}
.sale-section .text-lg {
    font-size: 20px;
    line-height: 1.55;
}
.sale-section .text-xl {
    font-size: 22px;
    line-height: 1.5;
}
.sale-section .text-2xl {
    font-size: 26px;
    line-height: 1.45;
}

/* レスポンシブ指定（sm:）も同じ比率で拡大する */
@media (min-width: 640px) {
    .sale-section .sm\:text-sm {
        font-size: 16px;
        line-height: 1.75;
    }
    .sale-section .sm\:text-base {
        font-size: 17px;
        line-height: 1.7;
    }
    .sale-section .sm\:text-xl {
        font-size: 22px;
        line-height: 1.5;
    }
    .sale-section .sm\:text-2xl {
        font-size: 26px;
        line-height: 1.45;
    }
}

/* --------------------------------------------------------------------------
   2. ブランドカラー：セージグリーン（オリーブ）＋ウォームベージュ
   -------------------------------------------------------------------------- */
.sale-section .color-sage-brand {
    color: #4a6b58 !important; /* 温かなセージグリーン */
}
.sale-section .bg-sage-brand {
    background-color: #4a6b58 !important;
}
.sale-section .bg-sage-hover:hover {
    background-color: #3b5445 !important;
}
.sale-section .border-sage-brand {
    border-color: #4a6b58 !important;
}
.sale-section .bg-sage-light {
    background-color: #f3f6f4 !important;
}
.sale-section .bg-sage-dark {
    background-color: #2d4738 !important;
}
.sale-section .bg-wood-warm {
    background-color: #f7f4ec !important; /* 木の温かみを感じるウォームベージュ */
}

/* 重厚感のあるチャコール */
.sale-section .bg-charcoal-dark {
    background-color: #1a221e !important;
}
.sale-section .text-charcoal-dark {
    color: #1a221e !important;
}

/* --------------------------------------------------------------------------
   3. 売却ガイド：落ち着いたインディゴネイビー
   -------------------------------------------------------------------------- */
.sale-section .sell-theme-color,
.sale-section .bg-sell-theme-color {
    background-color: #384c66 !important;
}
.sale-section .text-sell-theme {
    color: #384c66 !important;
}
.sale-section .border-sell-theme {
    border-color: #384c66 !important;
}
.sale-section .bg-sell-light {
    background-color: #f0f4f8 !important;
}

/* --------------------------------------------------------------------------
   4. 購入ガイド：深い朱赤
   -------------------------------------------------------------------------- */
.sale-section .purchase-theme-color,
.sale-section .bg-purchase-theme-color {
    background-color: #9c3a33 !important;
}
.sale-section .text-purchase-theme {
    color: #9c3a33 !important;
}
.sale-section .border-purchase-theme {
    border-color: #9c3a33 !important;
}
.sale-section .bg-purchase-light {
    background-color: #fcf5f4 !important;
}

/* --------------------------------------------------------------------------
   5. キャンペーンバナー：上品な淡金
   -------------------------------------------------------------------------- */
.sale-section .campaign-gold-bg {
    background-color: #d1a85c !important;
}
.sale-section .campaign-gold-text {
    color: #d1a85c !important;
}

/* --------------------------------------------------------------------------
   6. パーツ：円形アイコン／ステップカード／スクロールバー
   -------------------------------------------------------------------------- */
.sale-section .circle-icon-container {
    width: 76px;
    height: 76px;
    background-color: #4a6b58;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(74, 107, 88, 0.15);
    transition: all 0.3s ease;
}

.sale-section .step-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
    border: 1px solid #dcdbd3;
}
.sale-section .step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -5px rgba(74, 107, 88, 0.12);
    border-color: #4a6b58;
}
/*
 * 詳細を展開中のカード
 * 浮き上がるホバー演出を止め、どのカードの詳細を開いているかを枠線で示す。
 * （詳細パネルの表示位置は sale/index.js が画面幅に応じて差し替える：
 *   PC＝カード列の下の .sale-detail-slot ／ スマホ＝カードの枠内）
 */
.sale-section .step-card.is-open,
.sale-section .step-card.is-open:hover {
    transform: none;
    border-color: #4a6b58;
    box-shadow: 0 8px 20px -6px rgba(74, 107, 88, 0.18);
}

/* PC表示用：詳細パネルの受け皿。パネルが無い間は高さを持たない */
.sale-section .sale-detail-slot:empty {
    display: none;
}
/*
 * 親の space-y-* が付ける余白を打ち消す。
 * 閉じている（中のパネルが display:none）ときに空白が残らないようにし、
 * 間隔はパネル自身の mt-4 で確保する。
 */
.sale-section .sale-detail-slot {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   6-2. コンテンツ切替（PC＝タブ／スマホ＝アコーディオン）
   -------------------------------------------------------------------------- */
/*
 * PC：折り返して全タブを表示
 * （Bootstrapの .flex-wrap{...!important} と競合するため、
 *   HTML側では flex-wrap クラスを付けず、ここで制御する）
 */
.sale-section .sale-tabnav {
    flex-wrap: wrap;
}

/*
 * スマホ：タブ列は非表示（HTML側に sale-pc-only を付与）にして、
 * 各セクションの直前に置いた見出しボタンで開閉する。
 * 横スワイプが不要になり、スクロールだけで全項目に気づける。
 */
@media (max-width: 767px) {
    .sale-section .sale-accordion-head {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0.625rem 0;
        padding: 0.875rem 1rem;
        border: 1px solid transparent;
        border-left-width: 5px;
        border-radius: 0.875rem;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        text-align: left;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .sale-section .sale-accordion-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .sale-section .sale-accordion-title .fa-solid {
        font-size: 14px;
        opacity: 0.85;
    }
    .sale-section .sale-accordion-chevron {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    /*
     * セクションごとの配色
     * 閉じているとき：淡いテーマ色の地色＋左端に濃いテーマ色のライン
     * 開いているとき：テーマ色で塗りつぶし＋白文字
     */
    .sale-section .sale-accordion-head[data-accordion="concept"] {
        background-color: #eaf1ec;
        border-color: #4a6b58;
        color: #2d4738;
    }
    .sale-section .sale-accordion-head[data-accordion="concept"].is-open {
        background-color: #4a6b58;
    }
    .sale-section .sale-accordion-head[data-accordion="sell"] {
        background-color: #e9eef5;
        border-color: #384c66;
        color: #2b3b50;
    }
    .sale-section .sale-accordion-head[data-accordion="sell"].is-open {
        background-color: #384c66;
    }
    .sale-section .sale-accordion-head[data-accordion="buy"] {
        background-color: #f8ebea;
        border-color: #9c3a33;
        color: #7c2d27;
    }
    .sale-section .sale-accordion-head[data-accordion="buy"].is-open {
        background-color: #9c3a33;
    }
    .sale-section .sale-accordion-head[data-accordion="simulator"] {
        background-color: #f4eee5;
        border-color: #8c6a4a;
        color: #6b4f36;
    }
    .sale-section .sale-accordion-head[data-accordion="simulator"].is-open {
        background-color: #8c6a4a;
    }
    .sale-section .sale-accordion-head[data-accordion="form"] {
        background-color: #e7eeea;
        border-color: #2d4738;
        color: #23382b;
    }
    .sale-section .sale-accordion-head[data-accordion="form"].is-open {
        background-color: #2d4738;
    }

    /*
     * 開いている見出しは白文字で強調し、スクロールしても画面上部に留める。
     * 追従範囲は .sale-section-block（見出し＋そのセクション）内に限定されるため、
     * セクションを読み終えると自然に外れ、次の見出しと入れ替わる。
     */
    .sale-section .sale-accordion-head.is-open {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 30;
        color: #ffffff;
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.3);
    }
    .sale-section .sale-accordion-head.is-open .sale-accordion-chevron {
        transform: rotate(180deg);
    }
    .sale-section .sale-accordion-head.is-open .sale-accordion-title .fa-solid {
        opacity: 1;
    }
}

/* 選択中タブは下線でも強調（塗りだけでは気づきにくいスマホ向け） */
.sale-section .tab-btn.is-current {
    box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.55), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   6-3. スマホ表示：本文の表示幅を確保するため入れ子の余白を詰める
   -------------------------------------------------------------------------- */
/*
 * 注意：Bootstrap(css/bootstrap.min.css)の余白ユーティリティが
 *       「.p-5{padding:3rem!important}」「.px-4{...!important}」「.mt-4{...!important}」等と
 *       !important 付きでTailwindと同名定義されており、通常の指定では打ち勝てない。
 *       そのため以下のスマホ向け調整は !important を明示している。
 */
@media (max-width: 767px) {
    /* ページ左右の余白を詰める */
    .sale-section main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* 売却／購入ガイドの外枠 */
    .sale-section .sale-guide-block {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    /* ステップカード */
    .sale-section .step-card {
        padding: 1rem 0.5rem !important;
    }
    /* カード内に展開した詳細は、カードの内側余白を打ち消して枠を広く使う */
    .sale-section .step-card > [id^="details-"] {
        margin: 0.75rem -0.375rem 0 !important;
        padding: 0.75rem 0.625rem !important;
    }
}

.sale-section .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.sale-section .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.sale-section .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   7. お住み替えスケジュール（ガントチャート）
   -------------------------------------------------------------------------- */
.sale-section .timeline-bar {
    height: 12px;
    border-radius: 6px;
    position: relative;
}
.sale-section .timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 3px solid #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 30;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sale-section .timeline-dot:hover {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/*
 * PC／スマホの表示切替
 * 共通CSS(style.min.css)に「.hidden{display:none!important}」があり、
 * Tailwind の「hidden md:block」では !important に打ち負けてPC表示に戻せないため、
 * 出し分けは専用クラスで行う。
 * 「表示する側では display を指定しない」ことで、要素自身の flex / grid 等の
 * 指定をそのまま活かせるようにしている。
 */
@media (max-width: 767px) {
    .sale-section .sale-pc-only {
        display: none;
    }
}
@media (min-width: 768px) {
    .sale-section .sale-sp-only {
        display: none;
    }
}

/* 月目盛りヘッダー（6ヶ月を等分割し、バーの％位置と一致させる） */
.sale-section .sched-month-head {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sale-section .sched-month-head > div {
    border-left: 1px solid #e7e5e4;
}
.sale-section .sched-month-head > div:first-child {
    border-left: 0;
}

/* --------------------------------------------------------------------------
   8. フローティングCTA・通知モーダル
   -------------------------------------------------------------------------- */
.sale-section .sale-floating-cta {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
}
@media (max-width: 575px) {
    .sale-section .sale-floating-cta {
        right: 1rem;
        bottom: 1rem;
    }
}

.sale-section .sale-modal {
    z-index: 1100;
}