@charset "utf-8";

/* ===== リード文 ===== */
.buy_top_nav { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 60px; margin-bottom: -20px; z-index: 1; }
.buy_top_nav_link { border-bottom: 1px solid #CB4524; line-height: 1.5; }
.buy_top_nav_link:hover { border-color: transparent; }
.buy_top_nav_link .icon_arrow { margin-left: 6px; }
.buy_top_nav_link .icon_arrow_down { transform: rotate(90deg); }
@media ( min-width: 768px ) {
    .buy_top_nav { margin-top: 120px; margin-bottom: -100px; }
}
@media ( min-width: 1025px ) {
    .buy_top_nav { flex-direction: row; gap: 24px; }
}

/* ===== ご検討のお客さまへ ===== */
.buy_consult_card { position: relative; }
.buy_consult_title { text-align: center; margin-bottom: 24px; }
.buy_consult_inner { display: flex; flex-direction: column; gap: 24px; }
.buy_consult_img_wrap { position: relative; }
.buy_consult_img { display: block; width: 100%; max-width: 280px; margin: 0 auto; }
.buy_consult_deer { display: none; }
.buy_consult_body { display: flex; flex-direction: column; gap: 1em; }
@media ( min-width: 768px ) {
    .buy_consult_title { margin-bottom: 40px; }
    .buy_consult_inner { gap: 40px; }
    .buy_consult_deer { display: block; position: absolute; bottom: -24px; left: -24px; width: 80px; scale: -1 1; z-index: 1; pointer-events: none; }
    .buy_consult_body { flex: 1; min-width: 0; }
}
@media ( min-width: 1025px ) {
    .buy_consult_inner { flex-direction: row-reverse; align-items: center; }
    .buy_consult_img_wrap { display: flex; align-items: center; flex: 0 0 30%; }
}

/* ===== クラシカの特徴 ===== */
.buy_strength_head { text-align: center; margin-bottom: 32px; }
.buy_strength_subtitle { margin-top: 8px; }
.buy_strength_list { display: flex; flex-direction: column; gap: 24px; }
.buy_strength_card { position: relative; display: flex; flex-direction: column; margin-top: 24px; }
.buy_strength_num { position: absolute; top: -0.5em; right: 0; left: 0; display: block; text-align: center; font-size: 48px; line-height: 1; }
.buy_strength_title { display: flex; justify-content: center; align-items: center; margin-top: 24px; text-align: center; font-size: 20px; line-height: 1.5; }
.buy_strength_img { display: block; width: 100%; max-width: 240px; aspect-ratio: 4/3; object-fit: contain; margin: 12px auto; }
@media ( min-width: 768px ) {
    .buy_strength_head { margin-bottom: 48px; }
    .buy_strength_list { gap: 40px; }
    .buy_strength_title { margin-top: 0; }
}
@media ( min-width: 1025px ) {
    .buy_strength_subtitle { text-align: center; }
    .buy_strength_list { flex-direction: row; }
    .buy_strength_card.outline_card { flex: 1; padding: 24px; }
    .buy_strength_title { height: 60px; margin-top: 24px; }
}

/* ===== マッチングサービス ===== */
.buy_matching_lead { text-align: left; margin-bottom: 24px; }
.buy_matching_img { display: block; width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 3/2; }
.buy_matching_bubble_wrap { position: relative; width: fit-content; margin: -40px 0 0 auto; }
.buy_matching_pain_wrap { margin-top: 130px; }
.buy_matching_video_dock { width: fit-content; max-width: 320px; margin: 40px auto 0; }
.buy_matching_video_trigger_btn { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; transition: opacity .2s ease-out; }
.buy_matching_video_trigger_btn.is_floating { position: relative; z-index: 50; transform-origin: 0 0; will-change: transform; }
.buy_matching_video_dock:has(.is_floating) { z-index: 50; }
/* 右下に固定表示している間だけ画像の上に出す見出し。ボタンごと縮小されるので、縮小後に読める大きさで指定 */
.buy_matching_video_trigger_label { position: absolute; bottom: 100%; left: 50%; translate: -50% -24px; padding: 0.3em 1em; border-radius: 1000px; background: #FFF; color: #CB4524; font-size: 28px; font-weight: bold; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.buy_matching_video_trigger_label::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% -1px; border: 12px solid transparent; border-top: 14px solid #FFF; border-bottom: 0; }
.buy_matching_video_trigger_btn.is_floating .buy_matching_video_trigger_label { visibility: visible; }
.buy_matching_video_trigger_btn:hover { opacity: 0.8; }
.buy_matching_video_trigger_img { display: block; width: 100%; height: auto; }
.buy_matching_video_trigger_text { display: block; margin-top: 8px; color: #2F2F2F; font-size: 14px; font-weight: bold; letter-spacing: 0.1em; text-align: center; }
@media ( min-width: 768px ) {
    .buy_matching_lead { margin-bottom: 48px; }
    .buy_matching_img_wrap { position: relative; }
    .buy_matching_img { width: 80%; }
    .buy_matching_bubble_wrap { position: absolute; bottom: -40px; right: 0; margin-top: 0px; }
    .buy_matching_pain_wrap { margin-top: 60px; }
    .buy_matching_video_dock { max-width: 400px; margin-top: 60px; }
}
@media ( min-width: 1025px ) {
    .buy_matching_img { width: 70%; aspect-ratio: 2/1; }
    .buy_matching_bubble_wrap { top: -24px; bottom:  auto; margin-right: min(calc(60px - 5vw), calc(660px - 50vw)); }
    .buy_matching_pain_wrap { position: relative; }
    .buy_matching_pain_sec { max-width: calc(100% - 360px); }
    .buy_matching_video_dock { position: absolute; right: 0; bottom: 0; margin: 0; z-index: 2; }
    .buy_matching_bubble_wrap .speech_bubble::before { top: calc(100% - 30px); right: 14px; }
}

/* ===== マッチングサービス説明動画モーダル ===== */
.buy_matching_modal_overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0); opacity: 0; pointer-events: none; transition: opacity .35s ease-out, background-color .35s ease-out; }
.buy_matching_modal_overlay[hidden] { display: none; }
.buy_matching_modal_overlay.is_open { background: rgba(0,0,0,.6); opacity: 1; pointer-events: auto; }
.buy_matching_modal_box { position: relative; width: 100%; max-width: 800px; opacity: 0; transform: translateY(16px) scale(0.97); transition: opacity .35s ease-out, transform .35s ease-out; }
.buy_matching_modal_overlay.is_open .buy_matching_modal_box { opacity: 1; transform: translateY(0) scale(1); }
.buy_matching_modal_close { position: absolute; top: -60px; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 30px; border: 1px solid #4C8B4F; border-radius: 1000px; overflow: hidden; background: #FFF; color: #4C8B4F; font-size: 18px; line-height: 1; z-index: 2; cursor: pointer; transition: color .1s ease-out; }
.buy_matching_modal_close::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%) scale(0.1); display: block; width: 100%; height: 0; padding-top: 100%; margin: auto; border-radius: 50%; background: #4C8B4F; opacity: 0; z-index: -1; transition: opacity .1s, transform 0s; transition-delay: 0s, .1s; pointer-events: none; }
.buy_matching_modal_close:hover { color: #FFF; }
.buy_matching_modal_close:hover::before { transform: translateY(-50%) scale(1.1); opacity: 1; transition: opacity .8s, transform .6s ease-in-out; transition-delay: 0s; }
@media ( min-width: 768px ) {
    .buy_matching_modal_close { top: -80px; width: 48px; height: 40px; font-size: 22px; }
}
.buy_matching_modal_video { width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.buy_matching_modal_video_iframe { display: block; width: 100%; height: 100%; border: 0; }
@media ( min-width: 1025px ) {
    /* 動画モーダルをコンテンツ幅（min(90%, 1200px)）に合わせる。
       左右paddingを0にして％基準を画面幅に揃え、低い画面では高さ側でも上限をかけて見切れを防ぐ */
    .buy_matching_modal_overlay { padding-left: 0; padding-right: 0; }
    .buy_matching_modal_box { max-width: none; width: min(90%, 1200px, calc((100vh - 160px) / 9 * 16)); }
}

/* ===== CONTACT ===== */
/* .buy_contact_lead { text-align: justify; }
.contact_sec { margin-top: 140px; }
@media ( min-width: 768px ) {
    .contact_sec { margin-top: 160px; }
}
@media ( min-width: 1025px ) {
    .buy_contact_lead { text-align: center; }
    .contact_sec { margin-top: 120px !important; }
} */

.inline_only_1025-1095 { display: none; }
@media ( min-width: 1025px ) and ( max-width: 1095px ) {
    .inline_only_1025-1095 { display: inline; }
}