@charset "utf-8";



/*========== 全体 ==========*/
/* リフォームトップの.reform_box .titleと同じ、行ごとに正しくマーカーが引けるグラデーション方式 */
.purchase_highlight { display: inline; background: linear-gradient(transparent 60%, #FFF850 60%); }
.purchase_nowrap { white-space: nowrap; }
/* 「フロンティアの即金買取で」の後の改行：幅が狭い時だけ入れる。700px以上では列に余裕ができるので1行にまとめる */
.purchase_break_mid { display: inline; }
@media (min-width:700px) {
    .purchase_break_mid { display: none; }
}
/* 「フロンティアの即金買取なら」の後の改行：768〜901px、および1025〜1319pxの時に入れる（.nayami_messageの
   gapを40pxにした分、自然に1行へ収まる幅が広がったため上限を調整）。
   1025px側はnowrap化したflexの中で自然折り返しに頼ると、折り返し後の実際の幅より箱が広がってしまう
   （purchase_lead_breakと同じ理由）ため、改行位置を明示して箱の幅を実テキスト幅に一致させる */
.purchase_nayami_break { display: none; }
@media (min-width:768px) and (max-width:901px), (min-width:1025px) and (max-width:1319px) {
    .purchase_nayami_break { display: inline; }
}
/* 「不動産の売却でこのような」の後の改行：SP、および768〜889px（自然折り返しだと
   「…ありま／せんか？」のように不自然な位置で折り返ってしまう範囲）の時だけ入れる */
.purchase_nayami_h2_break { display: inline; }
@media (min-width:890px) {
    .purchase_nayami_h2_break { display: none; }
}
/* 「フロンティアに売却を」の後の改行：PC幅（1025px以上）では横に余裕があるので1行にまとめる */
.purchase_lead_break { display: inline; }
@media (min-width:1025px) {
    .purchase_lead_break { display: none; }
}
/* 「不動産売却のお悩みは、」の後の改行：1100px以上では「フロンティアの即金買取で解決できます。」と繋げて1行にまとめる */
.purchase_subtext_break1 { display: inline; }
@media (min-width:1100px) {
    .purchase_subtext_break1 { display: none; }
    .purchase_hero_subtext { white-space: nowrap; }
}


/*========== ヒーロー（FV） ==========*/
/* lead/title/[subtext+badgeのまとまり]/media/checklistをgridの独立アイテムにする。
   subtext+badgeを1つのまとまりにすることで、mediaが複数行にspanして
   auto行が不必要に引き伸ばされる（CSS Gridの仕様）のを避けている。
   iPad幅だけbadgeをmedia側に移したいので、その時だけラッパーをdisplay:contentsで解除し、
   subtext/badgeを個別のgridアイテムとして再配置する。 */
.purchase_hero {
    container-type: inline-size;
    display: grid;
    /* minmax(0, ...)にしないと、nowrapな見出し等の最小コンテンツ幅にトラックサイズが引っ張られる */
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 20px;
    grid-template-areas:
        "lead lead"
        "title title"
        "subtextbadge media"
        "checklist checklist";
    padding-top: 30px;
    padding-bottom: 30px;
}
/* 430px未満：イラスト列が広いと「フロンティアの即金買取で」が収まらず「即金買取」の後で改行されてしまうため、
   イラストを小さくして本文側の幅を広げる */
@media (max-width:429px) {
    .purchase_hero { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }
}
.purchase_hero_bg_building { display: none; }
@media (min-width:768px) {
    /* .contentsで中央寄せ・幅制限されているpurchase_heroの外まで画像をはみ出させ、ビューポート幅いっぱいに広げる */
    .purchase_hero { position: relative; z-index: 0; }
    .purchase_hero_bg_building.inline_pc {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100vw;
        transform: translateX(-50%);
        z-index: -1;
        pointer-events: none;
    }
}
.purchase_hero_lead_badge_wrap { grid-area: lead; }
.purchase_hero_lead { font-size: 24px; margin-top: 20px; }
@media (min-width:768px) and (max-width:1024px) {
    .purchase_hero_lead { font-size: 28px; }
}
@media (min-width:1025px) {
    .purchase_hero_lead { font-size: 32px; }
}
/* titleを専用のcontainer queryコンテナで包む。768px以上ではtitleの列幅が.purchase_hero全体より狭くなるため、
   .purchase_hero基準のcqwのままだと文字が列をはみ出してイラストと被ってしまう */
.purchase_hero_title_wrap { grid-area: title; container-type: inline-size; }
.purchase_hero_title { display: block; width: 100%; white-space: nowrap; font-size: 25cqw; line-height: 1.2; }
.purchase_hero_subtext_badge_wrap { grid-area: subtextbadge; }
@media (min-width:528px) {
    .purchase_hero_subtext { font-size: 18px; }
}
/* 768px以上：「フロンティアの即金買取で」と「解決できます。」の間で自然折り返しされないよう1行に固定 */
@media (min-width:768px) {
    .purchase_hero_subtext_line2 { white-space: nowrap; }
}
.purchase_hero_media { grid-area: media; align-self: center; }
.purchase_hero_media img { width: 100%; display: block; }
.purchase_checklist_card { grid-area: checklist; }

.purchase_hero_badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; background: #FA5118; color: #fff; border-radius: 12px; padding: 8px 16px; }
.purchase_hero_badge_wrap.inline_sp .purchase_hero_badge { flex-direction: row; gap: 8px; margin-top: 16px; }
/* ラベル・約・数字・件！を全て縦中央揃えに */
.purchase_hero_badge_number { display: flex; align-items: center; gap: 2px; }
.purchase_hero_badge_number strong { line-height: 1; }
@media (min-width:528px) {
    /* 「年間買取件数」で改行して2段に＋文字を1.3倍ほど拡大 */
    .purchase_hero_badge_wrap.inline_sp .purchase_hero_badge { flex-direction: column; gap: 4px; }
    .purchase_hero_badge_wrap.inline_sp .purchase_hero_badge .text_s { font-size: 17px; }
    .purchase_hero_badge_wrap.inline_sp .purchase_hero_badge .text_lm { font-size: 32px; }
}

/* PC/iPad：円形の吹き出しバッジ＋外側に「安心しておまかせください！」 */
.purchase_hero_badge_group { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.purchase_hero_badge_circle { position: relative; width: 130px; height: 130px; border-radius: 50%; padding: 0; flex-shrink: 0; }
.purchase_hero_badge_circle::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 18px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 11px 0 0;
    border-color: #FA5118 transparent transparent transparent;
    transform: rotate(35deg);
}
.purchase_hero_badge_sub { color: #FA5118; text-align: left; line-height: 1.4; font-size: 20px; }

.purchase_checklist_card { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 12px; }
.purchase_checklist_icon { width: 80px; flex-shrink: 0; }
@media (min-width:400px) {
    .purchase_checklist_icon { width: 100px; }
}
.purchase_checklist { width: 100%; display: grid; grid-template-columns: 1fr; gap: 0px; }
.purchase_checklist li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.purchase_checklist li img { width: 14px; flex-shrink: 0; }
@media (min-width:360px) {
    .purchase_checklist li { font-size: 16px; }
}

@media (min-width:768px) {
    .purchase_hero { padding-top: 50px; }
    .purchase_checklist_icon.inline_pc { width: 120px; }
    .purchase_checklist { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
    .purchase_checklist li img { width: 18px; }
    .purchase_checklist li { font-size: 16px; }
}

/* iPad（768px〜1024px）：アイコンが120pxに大きくなる分、2列だと窮屈になるため4行1列に戻す */
@media (min-width:768px) and (max-width:1024px) {
    .purchase_checklist { grid-template-columns: 1fr; }
}

/* 700px〜767px：チェックリストをイラストの左側（テキスト列）に収める。
   イラストの高さが左列（本文+バッジ+チェックリスト）より大きいと行が間延びするため、幅に上限をつけて揃える */
@media (min-width:700px) and (max-width:767px) {
    .purchase_hero {
        grid-template-areas:
            "lead lead"
            "title title"
            "subtextbadge media"
            "checklist media";
    }
    .purchase_hero_media { max-width: 260px; justify-self: center; }
}

/* 768px以上：見出し・タイトル・本文・チェックリストを左、イラストを右に。
   lead文とバッジは内容幅でぴったり並べたいので、グリッド列ではなくlead_badge_wrap内のflexで横並びにする
   （グリッド列基準だとleadの実テキスト幅と列幅の差分で隙間が空いてしまう） */
@media (min-width:768px) {
    /* ラッパーを解除し、subtextとbadgeを別々のgridアイテムに戻す */
    .purchase_hero_subtext_badge_wrap { display: contents; }
    .purchase_hero {
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        grid-template-areas:
            "lead lead"
            "title title"
            "subtext media"
            "checklist media";
    }
    .purchase_hero_subtext { grid-area: subtext; font-size: 20px; }
    .purchase_hero_title { font-size: 25cqw; }
    /* purchase_lead_breakで改行位置を明示的に固定したので、「そこで折り返した場合の幅」が
       あいまいさなく確定する。これによりflexのauto basisでも実テキスト幅ぴったりで計算できる
       （以前はdisplay:noneの自然折り返し任せだったため、flex-shrinkが折り返し前の1行分の幅を
       基準に計算してしまい、バッジとの間に余計な隙間ができていた） */
    .purchase_hero_lead_badge_wrap { display: flex; align-items: center; gap: 20px; }
    .purchase_hero_lead { margin-top: 0; }
    .purchase_hero_badge_wrap.inline_pc { flex-shrink: 0; }
    .purchase_hero_badge_wrap.inline_pc .purchase_hero_badge_group { margin-top: 0; max-width: 100%; }
    /* 80%のまま幅が伸び続けると、イラストが縦にも大きくなってバッジまで届いてしまうため上限を設ける */
    .purchase_hero_media { grid-area: media; align-self: center; justify-self: center; max-width: 280px; }
}

/* PC（1025px以上）：バッジ+イラストを右カラムにまとめて縦に並べ、左カラムにlead/title/本文/チェックリストを積む */
@media (min-width:1025px) {
    .purchase_hero {
        grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
        grid-template-areas:
            "lead   right"
            "title  right"
            "subtext right"
            "checklist right";
    }
    /* flex用ラッパーを解除し、leadとbadgeを別々のgridアイテムに戻す */
    .purchase_hero_lead_badge_wrap { display: contents; }
    .purchase_hero_lead { grid-area: lead; font-size: 3.2cqw; }
    .purchase_hero_title { font-size: 25cqw; }
    .purchase_hero_badge_wrap.inline_pc { grid-area: right; align-self: start; justify-self: center; min-width: 0; max-width: 100%; }
    .purchase_hero_media { grid-area: right; align-self: end; justify-self: center; max-width: 340px; min-width: 0; }
}


/*========== CTAバー ==========*/
/* purchase_heroがFV背景画像のためposition:relativeなので、位置指定なしのままだとその上に来る帯（かんたんバッジがマイナスマージンではみ出す部分）が背景画像の下に隠れてしまう。position+z-indexで確実に手前に出す */
.purchase_cta_bar { position: relative; z-index: 1; background: #C89E4D; padding: 16px 5%; overflow: visible; }
.purchase_cta_bar_inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; max-width: 1080px; margin: 0 auto; }
/* 帯からはみ出すよう少し大きめ＋上に引き上げる。左寄せで、右隣にテキストが来る */
.purchase_cta_badge { background: #FFF850; color: #343330; text-align: center; line-height: 1.3; border-radius: 50%; width: 100px; height: 100px; margin-top: -28px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width:1025px) {
    .purchase_cta_badge { transform: scale(1.2); }
}
.purchase_cta_badge_number { line-height: 1; }
.purchase_cta_badge_number strong { line-height: 1; }
.purchase_cta_text { text-align: left; flex: 1 1 0; min-width: 0; font-size: 18px; }
/* サイト共通でspanはdisplay:inline-blockのため、間の space が改行ポイントとして扱われず
   「当日回答！」が強制的に単独行になってしまう。display:inlineに戻して通常の折り返しに任せる */
.purchase_cta_text_seg { display: inline; }
/* PCでは「当日回答！」の直後でのみ改行させる */
@media (min-width:1025px) {
    .purchase_cta_text { font-size: 24px; }
    .purchase_cta_text_seg { white-space: nowrap; }
}
.purchase_cta_bar_inner .button { flex-shrink: 0; width: 100%; }

/* 「無料簡易査定へ進む」：ゴールドの帯の上なので白背景×黄土色文字に反転 */
.purchase_cta_button { background: #fff; border: 1px solid #fff; }
.purchase_cta_button .button_text { color: #C89E4D; }
.purchase_cta_button:hover { background: #E2CEA5; border: 1px solid #E2CEA5; }

@media (min-width:768px) {
    .purchase_cta_bar_inner { flex-wrap: nowrap; justify-content: flex-start; gap: 24px; }
    /* format.cssのa.button（768px以上で280px固定）と同じ幅に明示的に揃える。
       ここをautoや100%にすると、絶対配置の矢印アイコンと文字が重なってしまう */
    .purchase_cta_bar_inner .button { width: 280px; margin-left: auto; }
}


/*========== 緑の見出しバー ==========*/
.kadomaru { width: 100%; background: #529535; color: #fff; text-align: center; padding: 16px 0; letter-spacing: 0.08em; margin: 0 0 24px 0; }

@media (min-width:768px) {
    .kadomaru { padding: 32px 0; border-radius: 8px; }
}


/*========== お悩み（メリット導線） ==========*/
.contents.nayami .nayami { width: 100%; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 30px; }
.contents.nayami .nayami li { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.contents.nayami .nayami li img { width: 30%; object-fit: cover; border-radius: 10px; }
.contents.nayami .nayami li p { width: 67%; text-align: left; }

@media (min-width:768px) {
    .contents.nayami .nayami { max-width: 1080px; margin: 0 auto 20px auto; justify-content: space-between; gap: 0; }
    .contents.nayami .nayami li { width: 32%; }
    .contents.nayami .nayami li img { width: 100%; border-radius: 10px; }
    .contents.nayami .nayami li p { width: 100%; text-align: center; }
}
@media (min-width:1025px) {
    .contents.nayami .nayami li p { font-size: 18px; }
}

.nayami_message { width: 100%; }
.purchase_nayami_message_text { font-size: 20px; }
@media (min-width:1025px) {
    .purchase_nayami_message_text { font-size: 32px; }
}

/* テキストの左右にイラストを添える共通レイアウト */
/* スマホの時はイラストを非表示にし、テキストのみ表示 */
.purchase_flanked_message { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; text-align: center; }
.purchase_flanked_message strong { order: 1; width: 100%; }
.purchase_flanked_img { display: none; }

/* 「まずはお気軽にご相談ください」（メリット下）だけは文字サイズ20px＋スマホでもイラストを下に表示 */
.purchase_flanked_message_soudan strong { font-size: 20px; }
.purchase_flanked_message_soudan .purchase_flanked_img { display: block; order: 2; height: 70px; width: auto; flex-shrink: 0; }

@media (min-width:768px) {
    .purchase_flanked_message strong { order: 2; width: auto; }
    .purchase_flanked_img:first-child { order: 1; }
    .purchase_flanked_img:last-child { order: 3; }
    .purchase_flanked_img { display: block; height: 110px; width: auto; flex-shrink: 0; }
}

@media (min-width:1025px) {
    /* 文字サイズを32pxにすると画像込みで1行に収まらなくなるが、
       flex-wrap:wrapのままだと画像ごと縦積みになってしまうため、
       nowrapにして画像は横に固定したまま文字側だけ内部で折り返させる */
    .purchase_flanked_message { flex-wrap: nowrap; }
    .purchase_flanked_message_soudan strong { font-size: 32px; }
    .message.text_l { font-size: 32px; }
    .purchase_flanked_message_soudan, .purchase_flanked_message_final {
        margin-top: 80px;
        margin-bottom: 20px;
    }
}

/* 「フロンティアの即金買取なら安心してご売却いただけます！」：イラストと文字の隙間を詰める。
   イラストの高さは元の110pxに戻し、代わりに文字のline-heightを広げて行の高さを合わせる */
.nayami_message { gap: 8px; }
.purchase_nayami_message_text { line-height: 1.8; }
@media (min-width:1025px) {
    .nayami_message { gap: 40px; }
}


/*========== メリット（リフォームトップの h2_wrap / reform_box と同じ作り） ==========*/
.purchase_h2_wrap { width: 100%; background: #529535; }
.purchase_h2_wrap .contents { padding: 32px 0; }
.purchase_h2_wrap .contents h2 { color: #fff; text-align: center; font-size: 24px; letter-spacing: 0.08em; }

.purchase_merit_grid { display: flex; flex-direction: column; gap: 40px; margin: 40px 0; }
.purchase_merit_box { background: #F1F7EF; padding: 54px 5% 30px 5%; position: relative; }
.purchase_merit_box::before { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: #529535; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 60px; }
.purchase_merit_box.no01::before { content: "01"; }
.purchase_merit_box.no02::before { content: "02"; }
.purchase_merit_box.no03::before { content: "03"; }
.purchase_merit_box.no04::before { content: "04"; }
.purchase_merit_box.no05::before { content: "05"; }
.purchase_merit_box.no06::before { content: "06"; }
.purchase_merit_title_wrap { width: 100%; text-align: center; margin-bottom: 20px; }
.purchase_merit_box_title { font-size: 20px; display: inline; background: linear-gradient(transparent 60%, #FFF850 60%); }
.purchase_merit_icon { width: 200px; margin: 0 auto 20px auto; }
.purchase_merit_icon img { width: 100%; display: block; }
.purchase_merit_text { text-align: justify; }

@media (min-width:768px) {
    .purchase_h2_wrap .contents h2 { font-size: 40px; }
    .purchase_merit_box { padding: 100px 5% 54px 5%; }
    .purchase_merit_box_title { font-size: 32px; }
}

/* PC（1025px以上）：メリットカードを2列に */
@media (min-width:1025px) {
    .purchase_merit_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
}


/*========== まずはお気軽にご相談ください ==========*/
.purchase_soudan { text-align: center; margin-bottom: 10px; }
.purchase_soudan_text { margin-bottom: 16px; }
.purchase_soudan img { max-width: 300px; width: 60%; margin: 0 auto; display: block; }


/*========== 仲介と買取の違い ==========*/
/* リフォームトップの title_wrap（x-heading + illust_tree）と同じ作り */
.title_wrap { width: 100%; position: relative; }
.title_wrap .illust_tree { display: none; }

@media (min-width:768px) {
    .title_wrap .illust_tree { width: 14%; position: absolute; top: -60px; right: 0; display: block; }
}

.purchase_compare_wrap { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 40px 0; }
.purchase_compare_box { width: 100%; background: #F1F7EF; padding: 20px; text-align: center; }
.purchase_compare_box p { margin-bottom: 16px; }
.purchase_compare_box img { width: 100%; max-width: 320px; margin: 0 auto; display: block; }

@media (min-width:768px) {
    .purchase_compare_wrap { flex-direction: row; gap: 30px; margin: 40px 0 40px 0; }
    .purchase_compare_box { width: 50%; }
}

.message { display: block; }