@charset "UTF-8";
@import "base.css";

/*==========================================================================*/
/*//////////////////////////////////////////////////////////////////////////*/
/*//////                                                              //////*/
/*//////                  © Branding Technology inc.                  //////*/
/*//////                                                              //////*/
/*//////////////////////////////////////////////////////////////////////////*/
/*                                                                          */
/*    base.css  --> スタイルの初期設定を行うため、変更しないで下さい。      */
/*    SP用の指定は responsive.css に記述                                    */
/*                                                                          */
/*==========================================================================*/

/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/
/* デザインカラー */
:root { --colorPrimary: #0571bd; --colorPrimaryLight: #e6f1f8; --colorRed: #de0000; --colorBlack: #141414; --colorGray: #434343; --colorLine: #d0d0d0; --headerHeight: 100px; }

/* 1rem = 10px、本文は 1.4rem（14px）を基本とする */
html { font-size: 62.5%; }
body { background: #fff; color: var(--colorBlack); font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.6; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
main { display: block; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
h1, h2, h3, h4, h5, h6 { line-height: 1.4; }
address { line-height: 1.6; }
section[id] { scroll-margin-top: var(--headerHeight); }

/* リンク */
a { color: var(--colorPrimary); text-decoration: underline; }
a:visited { color: #5a4a8a; }
a:hover { color: var(--colorRed); text-decoration: none; }
a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--colorRed); outline-offset: 2px; }

/* テキスト装飾（strong / em / b の代わりに使用） */
.textBlue { color: var(--colorPrimary); }
.textRed { color: var(--colorRed); }
.textBold { font-weight: bold; }
.textAccent { color: var(--colorRed); font-weight: bold; }
.textNote { font-size: 1.2rem; color: #666; }

/* 数字用フォント */
.fontBarlow { font-family: "Barlow", sans-serif; font-weight: 700; }

/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/
.inner { max-width: 1340px; margin: 0 auto; padding: 0 20px; }

/* セクション */
.section { padding: 80px 0; }
.sectionGray { background: #f4f6f8; }
.sectionTitle { margin-bottom: 40px; font-size: 2.8rem; font-weight: bold; text-align: center; }
.sectionText { margin-bottom: 1em; }

/* 見出し小 */
.blockTitle { margin-bottom: 15px; padding-left: 12px; border-left: 4px solid var(--colorPrimary); font-size: 2rem; font-weight: bold; }

/* 赤ボタン共通（上半分に光沢） */
.btnAssess, .btnForm { background: linear-gradient(to top, rgba(222, 0, 0, 0.6) 49.75%, rgba(255, 255, 255, 0.36) 49.763%, rgba(255, 255, 255, 0.03) 117%), var(--colorRed); color: #fff; text-decoration: none; transition: opacity 0.2s; }
.btnAssess:visited, .btnForm:visited { color: #fff; }
.btnAssess:hover, .btnForm:hover { color: #fff; opacity: 0.85; }

/* 青帯メッセージ（CTAバナーの下などで共通使用） */
.bandMessage { padding: 25px 20px 27px; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), var(--colorPrimary); color: #fff; font-size: 2.4rem; font-weight: 700; line-height: 1.45; text-align: center; }

/*==========================================================================*/
/*                               Header                                     */
/*==========================================================================*/
.header { position: fixed; top: 0; left: 25px; right: 25px; z-index: 100; height: var(--headerHeight); border-radius: 0 0 10px 10px; background: #fff; }
.headerInner { display: flex; align-items: center; height: 100%; padding: 0 10px 0 30px; }
.headerLogo { flex-shrink: 0; width: 327px; }
.headerLogo img { width: 100%; }

/* グローバルナビ */
.headerNav { margin: 0 30px 0 auto; }
.headerNavList { display: flex; }
.headerNavItem { margin-left: 25px; }
.headerNavItem:first-child { margin-left: 0; }
.headerNavItem a { display: flex; align-items: center; color: var(--colorBlack); font-size: 1.6rem; font-weight: 600; line-height: 1.45; text-decoration: none; white-space: nowrap; }
.headerNavItem a:hover { color: var(--colorPrimary); }
.headerNavIcon { width: 7px; margin-left: 12px; transform: rotate(90deg); }

/* 電話・無料査定ボタン */
.headerContact { display: flex; flex-shrink: 0; align-items: center; }
.headerTel { display: flex; align-items: center; margin-right: 20px; color: var(--colorBlack); text-decoration: none; }
.headerTel:visited, .headerTel:hover { color: var(--colorBlack); }
.headerTelIcon { width: 60px; margin-right: 12px; }
.headerTelBody { display: flex; flex-direction: column; text-align: center; }
.headerTelNumber { color: var(--colorPrimary); font-family: "Barlow", sans-serif; font-size: 3rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; }
.headerTelTime { margin-top: 1px; font-size: 1.3rem; line-height: 1.45; }
.btnAssess { position: relative; display: flex; align-items: center; width: 250px; height: 80px; padding-left: 90px; border-radius: 50px; font-size: 2rem; font-weight: 900; }
.btnAssessBadge { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #ffe344; color: var(--colorRed); font-size: 1.3rem; font-weight: 800; line-height: 1.2; text-align: center; }

/* ハンバーガーボタン（ナビが収まらない幅で表示） */
.headerMenuBtn { display: none; }

/* 確認・エラー・完了画面（MV非表示）で固定ヘッダーの下に余白を確保 */
.headerSpacer { height: var(--headerHeight); }

/*==========================================================================*/
/*                               Main Visual                                */
/*==========================================================================*/
/* 画像は幅1920px基準。縮小時もヘッダーに隠れないよう、縮んだ分だけ上に余白（色はMV上端の空に合わせる） */
.mainVisual { padding-top: max(0px, calc(100px - 100vw * 100 / 1920)); background: linear-gradient(90deg, #1e5da2 0%, #1f4a99 50%, #a8aebc 100%); }
.mainVisual img { width: 100%; }

/*==========================================================================*/
/*                               Intro                                      */
/*==========================================================================*/
.intro { padding: 58px 20px 59px; background: #eff7fe; }
.introCard { width: 944px; max-width: 100%; margin: 0 auto; padding: 32px 40px; border-radius: 12px; background: #fff; box-shadow: 0 4px 8px rgba(20, 20, 20, 0.06); }

/* 見出し（左右の斜線つき） */
.introTitle { display: flex; align-items: center; justify-content: center; font-size: 3.3rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.45; }
.introTitleSlash { flex-shrink: 0; width: 16px; }
.introTitleSlash:first-child { margin-right: 20px; transform: scaleX(-1); }
.introTitleSlash:last-child { margin-left: 20px; }
.introTitleSmall { font-size: 2.8rem; }

/* 最短即日査定・最短3日で現金化 */
.introFeature { display: flex; justify-content: center; width: 804px; max-width: 100%; margin: 24px auto 0; }
.introFeatureItem { display: flex; flex: 1; align-items: center; justify-content: center; padding: 12px 24px 18px; border-radius: 8px; background: var(--colorPrimaryLight); font-size: 3rem; font-weight: 900; line-height: 1.45; }
.introFeatureItem + .introFeatureItem { margin-left: 20px; }
.introFeatureIcon { width: 47px; margin-right: 16px; }
.introFeatureText .textRed { font-size: 3.8rem; }

/* 無料査定フォームボタン */
.btnForm { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 24px; padding: 26px 32px; border-radius: 12px; box-shadow: 0 4px 6px rgba(222, 0, 0, 0.19); font-size: 3.5rem; font-weight: 900; line-height: 1.45; }
.btnFormBadge { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 66px; height: 66px; margin-right: 16px; border-radius: 50%; background: linear-gradient(143deg, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0) 50%), #ffe344; color: var(--colorRed); font-size: 1.7rem; font-weight: 800; line-height: 1.2; text-align: center; }
.btnFormArrow { position: absolute; top: 50%; right: 32px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #fff; }
.btnFormArrow img { width: 16px; }

/* 電話 */
.introTel { margin-top: 24px; }
.introTelLead { display: flex; align-items: center; color: var(--colorGray); font-size: 2rem; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.introTelLead::before, .introTelLead::after { flex: 1; height: 1px; background: var(--colorLine); content: ""; }
.introTelLead::before { margin-right: 16px; }
.introTelLead::after { margin-left: 16px; }
.introTelBody { display: flex; align-items: center; justify-content: center; }
.introTelNumber { display: flex; align-items: center; color: var(--colorPrimary); font-family: "Barlow", sans-serif; font-size: 5.5rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; }
.introTelNumber:visited, .introTelNumber:hover { color: var(--colorPrimary); }
.introTelIcon { width: 47px; margin-right: 12px; }
.introTelTime { margin-left: 24px; color: var(--colorGray); font-size: 1.4rem; line-height: 1.45; }

/*==========================================================================*/
/*                               Worry                                      */
/*==========================================================================*/
/* 背景：上部に波画像（デザインのグレーグラデーション込み）＋波画像の下端と同じ単色（::before）、
   下部に水色グラデーション＋下向きV字の画像（::after）。V字部分（1920px幅で高さ154px）は左右が透明で、次のセクションに重ねる */
.worry { position: relative; z-index: 1; padding: 80px 20px 21px; }
.worry::before { position: absolute; top: 0; right: 0; bottom: max(154px, 8.0208vw); left: 0; z-index: -1; background: #dedede url(../images/worry_bg.webp) center top / max(100%, 1920px) auto no-repeat; content: ""; }
.worry::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: max(450px, 23.4375vw); background: url(../images/worry_bottom.webp) center bottom / max(100%, 1920px) auto no-repeat; content: ""; }
.worryInner { max-width: 1200px; margin: 0 auto; }
.worryTitle { line-height: 0; text-align: center; }
.worryTitle img { width: 780px; }
.worryLead { margin-top: 30px; color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1.9; text-align: center; }

/* お悩みカード（写真は背景・人物を合成済み。文字とラベルをHTMLで重ねる） */
.worryList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 50px; }
.worryCard { position: relative; overflow: hidden; aspect-ratio: 585 / 466; border-radius: 20px; box-shadow: 0 4px 5.5px rgba(0, 0, 0, 0.25); }
.worryCardImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.worryCardBody { position: absolute; top: 45px; left: 45px; width: 318px; }
.worryCardTitle { filter: drop-shadow(0 0 10px rgba(20, 20, 20, 0.1)); color: #fff; font-size: 4rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.worryCardLine { display: block; white-space: nowrap; }
.worryCardLine + .worryCardLine { margin-top: 5px; }
.worryCardMark { display: inline-block; margin-right: 10px; padding: 0 8px 1px; border: 1px solid #fff; background: #fff; color: #434343; }
.worryCardMarkEnd { margin-right: 0; }
.worryCardMarkAfter { margin-left: 10px; }
.worryCardCheck { margin-top: 20px; }
.worryCardCheck li { display: flex; align-items: center; color: #fff; font-size: 1.7rem; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.worryCardCheck li + li { margin-top: 5px; }
.worryCardCheck li::before { flex-shrink: 0; width: 14px; height: 11px; margin-right: 10px; background: url(../images/icon_check-small.svg) center / contain no-repeat; content: ""; }
.worryCardLink { position: absolute; top: 77.04%; left: 0; display: flex; align-items: center; padding: 20px 30px 21px 45px; border: 4px solid rgba(255, 255, 255, 0.4); border-left: 0; border-radius: 0 55px 55px 0; background: var(--colorPrimary); color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 1.45; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; }
.worryCardLink:visited, .worryCardLink:hover { color: #fff; }
.worryCardLink:hover { opacity: 0.85; }
.worryCardLinkIcon { width: 24px; margin-right: 12px; }
.worryCardLinkArrow { width: 10px; margin-left: 15px; }

/* 締め */
.worryConsultLead { margin-top: 50px; font-size: 3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.5; text-align: center; }
.worryConsult { margin-top: 16px; line-height: 0; text-align: center; }
.worryConsult img { width: 1012px; }
.worryArrow { display: flex; flex-direction: column; align-items: center; margin-top: 44px; line-height: 0; }
.worryArrow img { width: 24px; transform: rotate(180deg); }
.worryArrow img + img { margin-top: 5px; }

/*==========================================================================*/
/*                     Maru（丸投げOK・高額買取の理由・直接買取）            */
/*==========================================================================*/
/* お悩みセクションのV字（高さ max(154px, 8.0208vw)）の下に潜り込ませ、その分を上パディングで空け直す。背景・装飾はお悩み（z-index: 1）より下 */
.maru { position: relative; margin-top: calc(max(154px, 8.0208vw) * -1); padding: calc(max(154px, 8.0208vw) + 40px) 20px 80px; }

/* 背景：淡い街の画像をセクション内で画面いっぱいの高さに張り付ける（sticky） */
.maruBg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: inset(0); }
.maruBgImage { position: sticky; top: 0; height: 100vh; background: url(../images/town_bg.webp) center / cover no-repeat, var(--colorPrimaryLight); }

/* 背景の上をスクロールで流れる装飾（青い街・ナナメ線） */
.maruDeco { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
/* 青い街：上部の透過グラデーションと左上のナナメの切り欠きはCSS、下部の街並みは画像 */
.maruCity { position: absolute; right: 0; bottom: 0; left: 0; height: calc(max(500px, 26.0417vw) + max(593px, 30.8854vw)); clip-path: polygon(max(436px, 22.7083vw) 0, 100% 0, 100% 100%, 0 100%, 0 max(408px, 21.25vw)); background: url(../images/maru_city.webp) center bottom / max(100%, 1920px) auto no-repeat, linear-gradient(rgba(5, 113, 189, 0), #0571bd max(500px, 26.0417vw)); }
.maruStripeLeft { position: absolute; bottom: 500px; left: 0; width: 951px; height: 1172px; background: url(../images/maru_stripe-left.svg) left top / 100% 100% no-repeat; }
.maruStripeRight { position: absolute; right: 0; bottom: 0; width: 760px; height: 1078px; background: url(../images/maru_stripe-right.svg) right top / 100% 100% no-repeat; }

.maruInner { position: relative; max-width: 1300px; margin: 0 auto; }
.maruTitle { line-height: 0; text-align: center; }
.maruTitle img { width: 842px; }
.maruLead { margin-top: 15px; font-size: 1.8rem; line-height: 2; text-align: center; }

/* 丸投げOKカード */
.maruList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.maruCard { padding: 20px 20px 30px; border-radius: 16px; background: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); text-align: center; }
.maruCardImage { display: block; width: 100%; height: 199px; border-radius: 10px; object-fit: cover; }
/* 吹き出し画像は影の余白を含む（左右4px・下6px。円の上端＝画像の上端） */
.maruCardBadge { position: relative; display: block; width: 123px; margin: -67px auto 0; }
.maruCardTitle { margin-top: 16px; line-height: 0; }
.maruCardTitle span { display: inline-block; border-bottom: 12px solid var(--colorPrimaryLight); color: var(--colorPrimary); font-size: 2.8rem; font-weight: 900; letter-spacing: -0.01em; line-height: 0.7; white-space: nowrap; }
.maruCardText { margin-top: 15px; font-size: 1.6rem; line-height: 1.7; }

/* 高額買取の理由 */
.reason { margin-top: 80px; }
.reasonTitle { line-height: 0; text-align: center; }
/* 画像は白い光彩の余白込み（上46.5・右43.5・下48.5・左47.5px）。はみ出し分をマージンで相殺 */
.reasonTitle img { width: 879px; margin: -46.5px -43.5px -48.5px -47.5px; }
.reasonLead { margin-top: 19px; font-size: 1.8rem; line-height: 2; text-align: center; }
.reasonList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; }
.reasonCard { position: relative; margin-top: 65px; padding: 25px 25px 35px; border-bottom: 9px solid; border-radius: 15px; background: #fff; box-shadow: 0 0 10px rgba(20, 20, 20, 0.4); }
.reasonCard01 { border-color: #f57a00; }
.reasonCard02 { border-color: #00bbe5; }
.reasonCard03 { border-color: #35af00; }
.reasonCard04 { border-color: var(--colorRed); }
/* 理由の丸は画像（影とキラキラの余白込み） */
.reasonCardBadge { position: absolute; top: -67px; left: 50%; width: 132px; transform: translateX(-50%); }
.reasonCardImage { display: block; width: 100%; height: 180px; border-radius: 100px; object-fit: cover; }
.reasonCardTitle { margin-top: 19px; color: #003874; font-size: 3.3rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; text-align: center; white-space: nowrap; }
.reasonCardText { margin-top: 12px; padding: 0 10px; font-size: 1.6rem; line-height: 1.8; }

/* 直接買取・査定の考え方 */
.direct { max-width: 1100px; margin: 76px auto 0; }
.directTitle { text-align: center; }
.directTitle span { display: inline-block; padding: 5px 0 5px 20px; border: 3px solid #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); color: #fff; font-size: 5.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.directLead { margin-top: 25px; color: #fff; font-size: 1.8rem; line-height: 2; text-align: center; }
.assess { position: relative; margin-top: 81px; padding: 54px 20px 30px; border-radius: 20px; background: #fff; box-shadow: 0 0 12px rgba(0, 93, 186, 0.6); text-align: center; }
.assessLabel { position: absolute; top: -31px; left: 50%; padding: 17px 80px 18px; border-radius: 48px; background: linear-gradient(to top, rgba(222, 0, 0, 0.6) 49.75%, rgba(255, 255, 255, 0.36) 49.763%, rgba(255, 255, 255, 0.03) 117%), var(--colorRed); color: #fff; font-size: 2.6rem; font-weight: 800; line-height: 1.2; white-space: nowrap; transform: translateX(-50%); }
.assessTitle { font-size: 4.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.4; }
.assessTitleBlue { color: var(--colorPrimary); }
.assessTitleRed { color: var(--colorRed); }
.assessList { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; padding: 22px 0 23px; border-bottom: 1px solid var(--colorLine); }
.assessItem { position: relative; display: flex; align-items: center; }
/* 項目間の「×」 */
.assessItem:not(:last-child) { margin-right: 75px; }
.assessItem:not(:last-child)::after { position: absolute; top: 50%; right: -55px; width: 35px; height: 35px; background: url(../images/icon_cross.svg) center / contain no-repeat; transform: translateY(-50%); content: ""; }
.assessItem img { position: relative; width: 96px; }
.assessItem span { margin-left: -31px; padding: 20px 40px 25px 55px; border-radius: 0 80px 80px 0; background: #eef6fe; color: #003874; font-size: 3.2rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.assessText { margin-top: 15px; font-size: 2rem; line-height: 2; }
/*==========================================================================*/
/* CTA: HTML button aligned to the original image coordinate system.         */
/*==========================================================================*/
.ctaBanner { position: relative; container-type: inline-size; line-height: 0; }
.ctaBanner picture, .ctaBanner img { display: block; width: 100%; }
.ctaBanner img { height: auto; }
/* White backing hides the baked-in button, including its shadow. Keep the
   backing separate so hover/focus never reveal the original image button.
   PC source: 3840 x 1234; button: x1117 y890 w700 h200. */
.ctaFormSlot { position: absolute; left: calc(1100 / 3840 * 100%); top: calc(876 / 1234 * 100%); width: calc(740 / 3840 * 100%); height: calc(240 / 1234 * 100%); border-radius: calc(30 / 3840 * 100cqw); background: #fff; pointer-events: none; }
.ctaBtnForm { position: absolute; left: calc(17 / 740 * 100%); top: calc(14 / 240 * 100%); width: calc(700 / 740 * 100%); height: calc(200 / 240 * 100%); display: flex; align-items: center; gap: calc(32 / 3840 * 100cqw); padding: 0 calc(35 / 3840 * 100cqw); border-radius: 999px; background: linear-gradient(180deg, #e40a0a 0%, #f16b6b 50%, #e00000 50%, #e00000 100%); box-shadow: 0 calc(7 / 3840 * 100cqw) calc(10 / 3840 * 100cqw) rgba(0, 0, 0, .3); color: #fff; font-size: calc(68 / 3840 * 100cqw); font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap; pointer-events: auto; transition: filter .2s; }
.ctaBtnForm:visited, .ctaBtnForm:hover { color: #fff; text-decoration: none; }
.ctaBtnForm:hover { filter: brightness(1.1); }
.ctaBtnForm:focus-visible { outline: 3px solid #0571bd; outline-offset: 2px; }
.ctaBtnBadge { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; width: calc(130 / 3840 * 100cqw); height: calc(130 / 3840 * 100cqw); border-radius: 999px; background: linear-gradient(135deg, #fff99a, #ffe938 65%); color: #d60000; font-size: calc(34 / 3840 * 100cqw); line-height: 1.05; }
.ctaBtnLabel { text-shadow: 0 calc(4 / 3840 * 100cqw) calc(4 / 3840 * 100cqw) rgba(0, 0, 0, .22); }
.ctaBtnTel { position: absolute; left: 48.44%; top: 72.17%; width: 19.95%; height: 16.21%; border-radius: 10px; transition: background-color .2s; }
.ctaBtnTel:hover { background-color: rgba(5, 113, 189, .08); }
/* Gentle pulse; the white backing and layout stay fixed. */
.ctaBtnForm, .introCard .btnForm { transform-origin: center; animation: ctaAssessPulse 1.0s ease-in-out infinite; }
@keyframes ctaAssessPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.ctaBtnForm:hover, .ctaBtnForm:focus-visible, .introCard .btnForm:hover, .introCard .btnForm:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ctaBtnForm, .introCard .btnForm { animation: none; transform: none; transition: none; } }

/*==========================================================================*/
/*                               Risk（2つのリスク）                        */
/*==========================================================================*/
/* 背景：全体はグレー＋下部328pxに黒10%のグラデーション。上部625pxは質感入りの濃いグレーで、下端に黄黒の縞 */
/* 下の余白（226px）は、次のセクションの白いカードがこの背景に重なる分を含む */
.risk { position: relative; z-index: 0; padding: 90px 20px 226px; background: linear-gradient(rgba(20, 20, 20, 0) calc(100% - 328px), rgba(20, 20, 20, 0.1)), #e7e7e7; }
.risk::before { position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: 625px; background: url(../images/risk_stripe.svg) left bottom / 62px 40px repeat-x, #434343 url(../images/risk_bg.webp) center / cover no-repeat; content: ""; }
.riskInner { max-width: 1300px; margin: 0 auto; }
.riskTitle { display: flex; flex-direction: column; align-items: center; font-weight: 900; line-height: 1.5; text-align: center; }
.riskTitleLabel { margin-bottom: -15px; padding: 5px 10px; border: 1px solid #fff; color: #fff; font-size: 3.2rem; letter-spacing: -0.01em; }
.riskTitleMain { display: flex; align-items: flex-end; color: #ffe344; letter-spacing: -0.01em; white-space: nowrap; }
.riskTitleNum { margin-right: 6px; font-size: 9.5rem; }
.riskTitleSmall { margin-right: -1px; padding-bottom: 14px; font-size: 6.3rem; }
.riskTitleLarge { padding-bottom: 10px; font-size: 7.5rem; }
.riskLead { color: #fff; font-size: 1.6rem; line-height: 2; text-align: center; }

/* リスクカード */
.riskList { display: flex; justify-content: center; gap: 40px; margin-top: 46.5px; }
.riskItem { flex: 0 1 630px; }
.riskCard { min-height: 625px; overflow: hidden; border-radius: 10px; background: #fff; }
.riskCardHead { position: relative; }
.riskCardImage { display: block; width: 100%; height: 393px; object-fit: cover; }
.riskCardTitle { position: absolute; top: 120px; right: 0; left: 0; color: #fff; font-size: 5.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; text-align: center; }
.riskCardTitle img { display: block; width: 52px; margin: 0 auto 5px; }
.riskCardTitleSmall { margin: 0 1px; font-size: 4.5rem; }
.riskCardBody { position: relative; margin-top: -30px; padding: 0 50px 50px; }
.riskCardLabel { padding: 10px 0 12px; background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.48)), #d0d0d0; color: var(--colorGray); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.5; text-align: center; }
.riskCardCheck { margin-top: 30px; }
.riskCardCheck li { display: flex; align-items: center; font-size: 1.6rem; font-weight: 600; line-height: 1.45; }
.riskCardCheck li + li { margin-top: 10px; }
.riskCardCheck li::before { flex-shrink: 0; width: 14px; height: 11px; margin-right: 10px; background: url(../images/icon_check-blue.svg) center / contain no-repeat; content: ""; }
/* カード下の結論（赤い下矢印つき） */
.riskResult { margin-top: 34px; font-size: 3rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; text-align: center; }
.riskResult::before { display: block; width: 29px; height: 31px; margin: 0 auto 15px; background: url(../images/icon_arrow-red.svg) center / contain no-repeat; content: ""; }

/* まとめ */
.riskSummary { margin-top: 50px; padding: 40px 20px; border: 11px solid var(--colorLine); background: #fff; font-size: 2rem; line-height: 2; text-align: center; }
.riskSummaryStrong { color: var(--colorPrimary); font-weight: 700; }

/*==========================================================================*/
/*                     Compare（仲介売却との違い・古い家でも）               */
/*==========================================================================*/
/* 上の146pxはリスクの背景に重ねる（その部分は上角丸の白いカード、以降は全幅の白）。
   下部1071pxは「白→青＋街の写真」の背景（写真は乗算20%で焼き込み済み） */
.diff { position: relative; z-index: 0; margin-top: -146px; padding: 80px 20px 150px; background: linear-gradient(rgba(255, 255, 255, 0) 146px, #fff 146px); }
.diff::before { position: absolute; top: 0; left: 50%; z-index: -1; width: 1300px; max-width: 100%; height: 146px; border-radius: 30px 30px 0 0; background: #fff; transform: translateX(-50%); content: ""; }
.diff::after { position: absolute; top: 637px; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(#fff 4.397%, rgba(255, 255, 255, 0) 54.832%), #0571bd url(../images/diff_bg.webp) center top / max(100%, 1920px) 100% no-repeat; content: ""; }
.diffInner { max-width: 1200px; margin: 0 auto; }

/* 見出し */
.diffHead { text-align: center; }
.diffLabel { display: inline-block; padding: 8px 24px; border-radius: 50px; background: #f57a00; color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.diffTitle { margin-top: 20px; font-weight: 900; letter-spacing: -0.01em; }
.diffTitleSub { display: block; font-size: 3.2rem; font-weight: 800; line-height: 1.5; }
.diffTitleMain { display: block; margin-top: 15px; font-size: 5rem; line-height: 0.9; }
.diffTitleMark { display: inline-block; margin: 0 5px; border-bottom: 16px solid var(--colorPrimaryLight); color: var(--colorPrimary); font-size: 6rem; line-height: 0.9; }
.diffTitleMark:first-child { margin-left: 0; }

/* 比較表（画像は影の余白込み：上27・左右15・下16px） */
.diffTable { max-width: 1100px; margin: 50px auto 0; }
.diffTableScroll { line-height: 0; }
.diffTableScroll img { width: 1130px; max-width: none; margin: -27px -15px -16px; }

/* 買取がおすすめ */
.diffPoint { position: relative; max-width: 1100px; margin: 30px auto 0; padding: 27px 40px 20px 80px; border-radius: 60px; background: rgba(224, 241, 254, 0.7); }
.diffPointIcon { position: absolute; top: -25px; left: 53px; width: 111px; }
.diffPointText { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.5; text-align: center; }
.diffPointMark { display: inline-block; margin: 0 5px; border-bottom: 16px solid #ffe344; color: var(--colorPrimary); font-size: 4.3rem; font-weight: 900; line-height: 0.5; }
.diffNote { margin-top: 21px; color: #fff; font-size: 1.2rem; line-height: 1.5; text-align: center; }

/* 古い家でも価値がないとは限りません */
.diffHouse { display: flex; align-items: center; margin-top: 80px; overflow: hidden; border-radius: 20px; background: #fff; }
.diffHouse picture { flex-shrink: 0; width: 541px; line-height: 0; }
.diffHouseImage { width: 100%; }
.diffHouseBody { flex: 1; max-width: 618px; margin-left: 21px; }
.diffHouseTitle { color: var(--colorPrimary); font-size: 4.2rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.4; }
.diffHouseText { margin-top: 14px; font-size: 1.6rem; line-height: 2; }
.diffHouseCheck { display: inline-block; margin-top: 20px; padding: 25px; border-radius: 10px; background: #fffbdc; }
.diffHouseCheck li { display: flex; align-items: center; color: var(--colorPrimary); font-size: 1.7rem; font-weight: 700; line-height: 1.45; }
.diffHouseCheck li + li { margin-top: 5px; }
.diffHouseCheck li::before { flex-shrink: 0; width: 14px; height: 11px; margin-right: 10px; background: url(../images/icon_check-blue.svg) center / contain no-repeat; content: ""; }
.diffHouseNote { margin-top: 20px; color: #727272; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.5; }

/*==========================================================================*/
/*                     Sellable（この状態でも売れる？）                     */
/*==========================================================================*/
/* 見出しラベルは前のセクションの背景に55px重ねる（その分は透明、以降は薄い青） */
.sell { position: relative; z-index: 0; margin-top: -55px; padding: 0 20px 65px; overflow: hidden; background: linear-gradient(rgba(230, 241, 248, 0) 55px, var(--colorPrimaryLight) 55px); }
/* 背景の斜めの光（デザインの1920px基準で左-768px・上-520px。薄い青の部分だけに表示） */
.sell::before { position: absolute; top: -520px; left: calc(50% - 1728px); z-index: -1; width: 2000px; height: 1503px; background: url(../images/sell_light.svg) 0 0 / 100% 100% no-repeat; clip-path: inset(575px 0 0 0); content: ""; }
.sell::after { position: absolute; top: 41px; left: calc(50% - 464px); z-index: -1; width: 2000px; height: 1503px; background: url(../images/sell_light-bottom.svg) 0 0 / 100% 100% no-repeat; transform: rotate(180deg); content: ""; }
.sellInner { max-width: 1200px; margin: 0 auto; }
.sellTitle { display: flex; flex-direction: column; align-items: center; font-weight: 900; letter-spacing: -0.01em; text-align: center; }
.sellTitleLabel { position: relative; width: 507px; max-width: 100%; margin-bottom: 40px; padding: 23px 20px; border-radius: 20px; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%), #00bbe5; filter: drop-shadow(0 6px 3.5px rgba(20, 20, 20, 0.1)); color: #fff; font-size: 4.4rem; line-height: 1.5; text-shadow: 3px 3px 0 rgba(20, 20, 20, 0.2); }
.sellTitleLabel::after { position: absolute; top: 100%; left: 50%; margin-left: -12px; border-top: 20px solid #00bbe5; border-right: 12px solid transparent; border-left: 12px solid transparent; content: ""; }
.sellTitleMain { font-size: 4.5rem; line-height: 66px; text-shadow: 0 3px 9px rgba(0, 0, 0, 0.25); }
.sellTitleLarge { color: var(--colorPrimary); font-size: 5.7rem; }
.sellLead { margin-top: 25px; font-size: 1.8rem; line-height: 2; text-align: center; }
.sellList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 30px; }
.sellItem { display: flex; flex-direction: column; align-items: center; padding: 20px 10px 25px; border-radius: 10px; background: #fff; filter: drop-shadow(6px 7px 7.5px rgba(20, 20, 20, 0.2)); text-align: center; }
.sellItem img { width: 80px; margin-bottom: 10px; }
.sellItemTitle { color: var(--colorPrimary); font-size: 2.4rem; font-weight: 900; line-height: 2; }
.sellItemText { font-size: 1.6rem; line-height: 1.7; }
.sellNote { width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 12px 30px; border-radius: 70px; background: var(--colorPrimary); color: #fff; font-size: 2rem; font-weight: 700; line-height: 2; text-align: center; }

/*==========================================================================*/
/*                     Choose（安心して売却相談できる5つの理由）             */
/*==========================================================================*/
/* 背景：写真（黒40%焼き込み済み）を高さ940pxでセクション内に張り付ける（sticky）。写真の下は白 */
.choose { position: relative; padding: 90px 20px 84px; background: #fff; }
.chooseBg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: inset(0); }
.chooseBgImage { position: sticky; top: 0; height: 940px; background: #e6f1f8 url(../images/choose_bg.webp) 0 82% / max(109.27%, 2098px) auto no-repeat; }
.chooseInner { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; max-width: 1300px; margin: 0 auto; }
.chooseHead { margin-top: 83px; }
.chooseTitle { display: flex; flex-direction: column; color: #fff; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.chooseTitleSub { margin-bottom: -19px; font-size: 4.5rem; }
.chooseTitleMain { display: flex; align-items: flex-end; font-size: 6.8rem; white-space: nowrap; }
.chooseTitleNum { margin-right: 4px; margin-bottom: -22px; font-family: "Barlow", sans-serif; font-size: 11rem; font-weight: 700; line-height: 1.5; }
.chooseTitleMain { padding-bottom: 22px; }
.chooseLabel { display: inline-block; margin-top: 5px; padding: 12px 30px; border-radius: 70px; background: var(--colorPrimary); color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 2; white-space: nowrap; }
/* 見出しを1枠目、カードを残りの枠に並べる（リストはグリッドの子として展開） */
.chooseList { display: contents; }
.chooseCard { padding: 10px 10px 45px; background: #fff; box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8); }
.chooseCard img { display: block; width: 100%; aspect-ratio: 390 / 230; object-fit: cover; }
.chooseCardBody { max-width: 330px; margin: 40px auto 0; }
.chooseCardTitle { color: var(--colorPrimary); font-size: 3rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.chooseCardText { margin-top: 15px; font-size: 1.6rem; line-height: 2; }

/*==========================================================================*/
/*                     Inherit（相続＋売却 まとめてご相談も可能です）         */
/*==========================================================================*/
/* 上部の青い帯は1枚画像（1920px基準 1920×400）。白いカードは帯に20px重ねる */
.inherit { position: relative; padding: 0 20px 80px; background: var(--colorPrimaryLight); }
/* Figmaの写真・ぼかしマスクと、選択可能な見出し文字を分離 */
.inheritBand { --iu: min(0.052083333vw, 1px); margin: 0 -20px; overflow: clip; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.4) 24.648%, rgba(255,255,255,0) 83.803%), var(--colorPrimary); }
.inheritBandInner { position: relative; max-width: 1920px; height: calc(400 * var(--iu)); margin: auto; }
.inheritBandPhoto { position: absolute; top: 0; width: calc(516 * var(--iu)); height: calc(400 * var(--iu)); opacity: .4; overflow: hidden; }
.inheritBandPhotoLeft { left: calc(-2 * var(--iu)); }
.inheritBandPhotoRight { right: 0; }
.inheritBandMask { position: absolute; top: calc(-18.22 * var(--iu)); left: calc(-40.17 * var(--iu)); width: calc(566.536 * var(--iu)); height: calc(425.621 * var(--iu)); mask-repeat: no-repeat; mask-mode: alpha; mask-size: calc(677 * var(--iu)) calc(568 * var(--iu)); }
.inheritBandPhotoLeft .inheritBandMask { mask-image: url(../images/inherit_mask-left.svg); mask-position: calc(-90.83 * var(--iu)) calc(-90.778 * var(--iu)); }
.inheritBandPhotoRight .inheritBandMask { mask-image: url(../images/inherit_mask-right.svg); mask-position: calc(1.17 * var(--iu)) calc(12.222 * var(--iu)); }
.inheritBandCrop { position: absolute; inset: 0; overflow: hidden; background: white; }
.inheritBandCrop img { position: absolute; max-width: none; }
.inheritBandPhotoLeft img { top: .1%; left: 1.9%; width: 112.6%; height: 100%; }
.inheritBandPhotoRight img { top: 3.55%; left: -20.5%; width: 135.51%; height: 120.34%; }
.inheritBandLead { position: absolute; top: calc(119 * var(--iu)); left: 18.75%; font-size: calc(29 * var(--iu)); font-weight: 700; line-height: 1.8; letter-spacing: -.01em; }
.inheritBandHeading { position: absolute; top: calc(93 * var(--iu)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; text-align: center; letter-spacing: -.01em; }
.inheritBandWords { display: flex; align-items: center; justify-content: center; gap: calc(25 * var(--iu)); }
.inheritBandBox { display: block; padding: 0 calc(13 * var(--iu)) calc(2 * var(--iu)); border: calc(3 * var(--iu)) solid white; font-size: calc(87 * var(--iu)); line-height: 1.4; }
.inheritBandPlus { display: block; width: calc(40 * var(--iu)); height: calc(40 * var(--iu)); background: url(../images/inherit_plus.svg) center / contain no-repeat; }
.inheritBandSub { display: block; margin-top: calc(15 * var(--iu)); font-size: calc(41 * var(--iu)); line-height: 1.5; }
.inheritBandEnglish { position: absolute; top: calc(126 * var(--iu)); left: 68.75%; display: flex; align-items: center; justify-content: center; width: calc(245 * var(--iu)); height: calc(108 * var(--iu)); transform: rotate(-10.44deg); font-family: "Allison", cursive; font-weight: 400; font-size: calc(52 * var(--iu)); line-height: normal; white-space: nowrap; }
.inheritBandStroke { position: absolute; top: calc(156 * var(--iu)); left: 66.6667%; width: calc(391 * var(--iu)); height: calc(102 * var(--iu)); background: url(../images/inherit_stroke.svg) center / contain no-repeat; }

.inheritCard { position: relative; max-width: 1300px; margin: -20px auto 0; padding: 70px 50px; border-radius: 30px; background: #fff; box-shadow: 0 5px 20px rgba(60, 127, 161, 0.2); }
.inheritMain { display: flex; align-items: flex-start; justify-content: space-between; min-height: 472px; border-bottom: 1px solid var(--colorLine); }
.inheritBody { width: 590px; margin-left: 20px; }
.inheritTitle { font-size: 4rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.inheritTitleMark { display: inline-block; margin: 0 20px 8px 0; padding: 9px 23px; border-radius: 10px; background: var(--colorPrimaryLight); color: var(--colorPrimary); font-size: 4.3rem; vertical-align: middle; }
.inheritTitleSmall { font-size: 3.5rem; vertical-align: middle; }
.inheritText { margin-top: 20px; font-size: 1.8rem; line-height: 2; }
.inheritCheck { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 25px; }
.inheritCheck li { display: flex; align-items: center; min-height: 72px; padding: 10px 20px; border-radius: 10px; background: var(--colorPrimaryLight); font-size: 1.8rem; font-weight: 600; line-height: 1.45; }
.inheritCheck li::before { flex-shrink: 0; width: 28px; height: 28px; margin-right: 10px; background: url(../images/icon_check-circle.svg) center / contain no-repeat; content: ""; }
/* 関係図（画像は光彩の余白込み） */
.inheritDiagram { flex-shrink: 0; width: 514px; margin: -6px 17px 0 20px; line-height: 0; }
.inheritDiagram img { width: 100%; }

/* 専門家一覧 */
.inheritExperts { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-left: 30px; }
.inheritExpertsTitle { flex-shrink: 0; color: var(--colorPrimary); font-size: 2.7rem; font-weight: 900; line-height: 1.45; }
.inheritExpertList { display: flex; flex-wrap: wrap; gap: 10px 23px; width: 940px; }
.inheritExpert { display: flex; align-items: center; width: 217px; min-height: 80px; }
.inheritExpert img { flex-shrink: 0; width: 80px; margin-right: 15px; border-radius: 10px; }
.inheritExpertBody { display: flex; flex-direction: column; }
.inheritExpertRole { color: var(--colorPrimary); font-size: 1.7rem; line-height: 1.45; }
.inheritExpertName { font-size: 2rem; font-weight: 700; line-height: 1.45; white-space: nowrap; }

/*==========================================================================*/
/*                     Results（買取実績スライダー）                         */
/*==========================================================================*/
/* 背景：上部470pxは写真＋青80%（焼き込み済み）、その下は薄い青 */
.results { position: relative; padding: 100px 0 0; overflow: hidden; background: url(../images/results_bg.webp) center top / max(100%, 1920px) 470px no-repeat, var(--colorPrimaryLight); }
.resultsHead { padding: 0 20px; text-align: center; }
/* 見出しは白フチ付きの画像（行の高さ105px分を上下の余白で確保） */
.resultsTitle { padding: 10px 0 9px; line-height: 0; }
.resultsTitle img { width: 307px; }
.resultsLead { margin-top: 30px; color: #fff; font-size: 1.6rem; line-height: 2; }
.resultsNote { margin-top: 10px; color: rgba(255, 255, 255, 0.6); font-size: 1.1rem; line-height: 1.45; }
.resultsSlider { position: relative; margin-top: 50px; }
/* スライドは中央のカードを基準に左右へ並べる（位置は common.js で transform を設定） */
.resultsViewport { padding-bottom: 30px; touch-action: pan-y; cursor: grab; }
.resultsTrack { display: flex; gap: 30px; }
.resultsTrack.isAnimating { transition: transform 0.5s ease; }
/* インジケーターの両側に前後の矢印を配置 */
.resultsControls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 20px; }
.resultsArrow { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--colorPrimary); color: #fff; cursor: pointer; transition: opacity 0.2s; }
.resultsArrow::before { display: block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; }
.resultsArrowPrev::before { margin-left: 3px; transform: rotate(-135deg); }
.resultsArrowNext::before { margin-right: 3px; transform: rotate(45deg); }
.resultsArrow:hover { opacity: 0.8; }
.resultsArrow:focus-visible { outline: 3px solid var(--colorPrimary); outline-offset: 3px; }
.resultsDots { display: flex; align-items: center; justify-content: center; gap: 10px; }
.resultsDots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d0d0d0; cursor: pointer; }
.resultsDots button.isActive { background: var(--colorPrimary); }

/* 実績カード */
.resultsCard { position: relative; flex-shrink: 0; width: 580px; height: 564px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 5px 10px rgba(60, 127, 161, 0.2); user-select: none; }
.resultsCardArea { position: absolute; top: 0; left: 0; padding: 12px 15px; border-radius: 0 0 10px 0; background: #f57a00; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
.resultsCardHead { display: flex; justify-content: space-between; padding: 20px 20px 0 40px; }
.resultsCardInfo { padding-top: 53px; }
.resultsCardType { font-size: 3rem; font-weight: 900; line-height: 1.45; }
.resultsCardPriceLabel { position: relative; display: inline-block; margin-top: 16px; padding: 6px 20px 7px; border-radius: 50px; background: var(--colorRed); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
.resultsCardPrice { display: flex; align-items: flex-end; height: 102px; margin-top: -10px; padding-bottom: 11px; font-size: 2.7rem; font-weight: 900; line-height: 1.45; white-space: nowrap; }
.resultsCardPriceNum { margin-right: 3px; margin-bottom: -11px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 25.32%, rgba(255, 255, 255, 0) 42.48%, rgba(20, 20, 20, 0.2) 59.64%), var(--colorRed); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: "Barlow", sans-serif; font-size: 8.5rem; font-weight: 700; line-height: 1.2; }
.resultsCardImage { flex-shrink: 0; width: 260px; height: 260px; border-radius: 10px; object-fit: cover; }
.resultsCardBody { position: absolute; top: 300px; right: 10px; bottom: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; border-radius: 15px; }
.resultsCardReason { padding: 20px; background: #f7f7f7; }
.resultsCardReasonTitle { color: var(--colorPrimary); font-size: 1.8rem; font-weight: 700; line-height: 1.45; }
.resultsCardTags { display: flex; flex-wrap: wrap; gap: 5px; height: 75px; margin-top: 15px; }
.resultsCardTags li { display: flex; align-items: center; padding: 7px 17px 7px 8px; border-radius: 50px; background: #fff; color: var(--colorGray); font-size: 1.6rem; line-height: 1.45; white-space: nowrap; }
.resultsCardTags li::before { flex-shrink: 0; width: 21px; height: 21px; margin-right: 5px; background: url(../images/icon_check-circle-small.svg) center / contain no-repeat; content: ""; }
.resultsCardComment { display: flex; flex: 1; align-items: center; padding: 10px 20px 10px 10px; background: #f7f7f7; }
.resultsCardCommentLabel { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 100px; height: 73px; margin-right: 18px; border-radius: 10px; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), var(--colorPrimary); color: #fff; font-size: 1.4rem; line-height: 1.45; text-align: center; }
.resultsCardCommentText { font-size: 1.6rem; line-height: 1.45; }

/*==========================================================================*/
/*                               Voice（お客様の声）                        */
/*==========================================================================*/
.voice { padding: 70px 20px 84px; background: var(--colorPrimaryLight); }
/* 左の緑パネル（348px・斜めの光込みの画像）＋右の白い板。カードは緑パネルに28px重ねる */
.voiceInner { position: relative; display: flex; align-items: flex-start; max-width: 1300px; min-height: 468px; margin: 0 auto; border-radius: 20px 30px 30px 20px; background: #fff url(../images/voice_panel.webp) left top / 348px 468px no-repeat; }
.voiceHead { position: relative; flex-shrink: 0; width: 320px; min-height: 468px; padding: 90px 0 0 55px; color: #fff; }
.voiceLabel { color: rgba(255, 255, 255, 0.6); font-family: "Barlow", sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; }
.voiceLabel::after { display: block; width: 30px; height: 2px; margin-top: 13px; background: #fff; content: ""; }
.voiceTitle { margin-top: 10px; font-size: 4rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.voiceTitleSmall { font-size: 3.6rem; }
.voiceLead { margin-top: 30px; font-size: 1.6rem; line-height: 1.9; }
.voiceHouse { position: absolute; top: 373px; left: 41px; width: 130px; }
.voiceList { display: flex; align-items: flex-start; gap: 20px; margin-top: 50px; }
.voiceCard { position: relative; flex-shrink: 0; width: 300px; padding: 25px 0 25px 25px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 1px 15px rgba(20, 20, 20, 0.2); }
.voiceCard:first-child { width: 290px; }
/* 顔写真は縁をぼかした画像を右上に重ねる（はみ出しはカードで切り抜き。文字は白い光彩で読みやすく） */
.voiceCardPhoto { position: absolute; top: -20px; left: 117px; width: 211px; line-height: 0; }
.voiceCard:first-child .voiceCardPhoto { left: 113.6px; }
.voiceCardPhoto img { width: 100%; }
.voiceCardStar { position: relative; color: #f57a00; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.45; }
.voiceCardStar::after { display: block; width: 50px; height: 41px; margin-top: 13px; background: url(../images/icon_quote.svg) center / contain no-repeat; content: ""; }
.voiceCardTitle { position: relative; margin-top: 13px; font-size: 2.2rem; font-weight: 800; line-height: 1.45; text-shadow: 0 0 9px #fff; white-space: nowrap; }
.voiceCardMark { color: #35af00; }
.voiceCardText { margin-top: 24px; padding: 0 25px 15px 0; border-bottom: 1px solid var(--colorLine); font-size: 1.6rem; line-height: 1.8; }
.voiceCardName { display: flex; align-items: center; margin-top: 20px; font-size: 1.6rem; font-weight: 400; line-height: 1.45; }
.voiceCardName::before { flex-shrink: 0; width: 13px; height: 15px; margin: 0 10px 0 2px; background: url(../images/icon_person.svg) center / contain no-repeat; content: ""; }

/*==========================================================================*/
/*                               Flow（売却までの流れ）                     */
/*==========================================================================*/
/* 背景：上456pxは薄い青（左右に街のシルエット）、以降は白 */
.flow { position: relative; padding: 0 20px 87px; background: url(../images/flow_town-left.svg) left -5px / 519px 255px no-repeat, url(../images/flow_town-right.svg) right -10px / 520px 259px no-repeat, linear-gradient(var(--colorPrimaryLight) 456px, #fff 456px); }
.flowInner { max-width: 1200px; margin: 0 auto; }
.flowHead { text-align: center; }
.flowLabel { display: inline-flex; align-items: center; padding: 15px 25px; border-radius: 50px; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), var(--colorPrimary); color: #fff; font-size: 2.2rem; font-weight: 700; line-height: 1.45; }
.flowLabel::before { flex-shrink: 0; width: 27px; height: 27px; margin-right: 10px; background: url(../images/icon_check-circle-white.svg) center / contain no-repeat; content: ""; }
/* 見出しは白フチ・下線込みの画像 */
.flowTitle { margin-top: 10px; line-height: 0; }
.flowTitle img { width: 518px; }
.flowLead { margin-top: 20px; font-size: 1.8rem; line-height: 2; }

/* ステップ（矢印形の枠は影込みの画像。隣と25px重ねる） */
.flowList { position: relative; z-index: 0; display: flex; justify-content: center; margin-top: 50px; }
.flowStep { position: relative; flex-shrink: 0; width: 264px; height: 322px; padding: 62px 81px 0 40px; text-align: center; }
.flowStep + .flowStep { margin-left: -25.2px; }
/* 重ね順：STEP01が一番上、STEP05が一番下 */
.flowStep:nth-child(1) { z-index: 5; }
.flowStep:nth-child(2) { z-index: 4; }
.flowStep:nth-child(3) { z-index: 3; }
.flowStep:nth-child(4) { z-index: 2; }
.flowStep:nth-child(5) { z-index: 1; }
.flowStep::before { position: absolute; top: 8.5px; left: -13px; z-index: -1; width: 282px; height: 323px; background: url(../images/flow_step.webp) left top / 100% 100% no-repeat; content: ""; }
.flowStep:first-child::before { top: 8px; width: 281px; height: 324px; background-image: url(../images/flow_step-first.webp); }
.flowStep:last-child { width: 246px; padding-right: 49px; padding-left: 54px; }
.flowStep:last-child::before { width: 265px; background-image: url(../images/flow_step-last.webp); }
.flowStepNum { position: absolute; top: 0; left: 35px; padding: 4px 40px 7px; border-radius: 10px; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), var(--colorPrimary); color: #fff; font-family: "Barlow", sans-serif; font-size: 2.6rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; white-space: nowrap; }
.flowStep:last-child .flowStepNum { left: 49px; }
.flowStepNum span { font-size: 1.6rem; }
.flowStepIcon { display: block; width: 80px; margin: 0 auto; }
.flowStepTitle { margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--colorLine); color: var(--colorRed); font-size: 2.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; }
.flowStepText { margin-top: 10px; font-size: 1.6rem; line-height: 1.45; }

/* 補足 */
.flowNote { display: flex; align-items: center; justify-content: center; max-width: 1200px; margin: 40px auto 0; padding: 25px 45px; border: 3px solid #fff; border-radius: 30px; background: #fffbdc; box-shadow: 0 4px 8.5px rgba(37, 128, 188, 0.2); color: var(--colorPrimary); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.flowNote::before { flex-shrink: 0; box-sizing: content-box; width: 69px; height: 77px; margin-right: 26px; padding-right: 26px; border-right: 1px solid rgba(20, 20, 20, 0.2); background: url(../images/icon_bulb-line.svg) left center / 69px 77px no-repeat; content: ""; }

/*==========================================================================*/
/*                               FAQ（よくあるご質問）                      */
/*==========================================================================*/
/* details/summary のアコーディオン（開閉は標準動作。＋／−はCSSで描画） */
.faq { padding-bottom: 80px; background: #f3f3f3; }
.faqTitle { padding: 49px 20px 49px; background: var(--colorPrimary); color: #fff; font-size: 5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; text-align: center; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.faqList { max-width: 1140px; margin: 50px auto 0; padding: 0 20px; }
.faqItem { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 10px rgba(20, 20, 20, 0.1); }
.faqItem + .faqItem { margin-top: 5px; }
.faqQuestion { position: relative; display: flex; align-items: center; min-height: 70px; padding: 22px 68px 22px 89px; font-size: 1.8rem; font-weight: 600; line-height: 1.45; list-style: none; cursor: pointer; }
.faqQuestion::-webkit-details-marker { display: none; }
.faqQuestion::before { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 67px; background: var(--colorPrimary); color: #fff; font-family: "Barlow", sans-serif; font-size: 3rem; font-weight: 700; content: "Q"; }
/* ＋アイコン（開いている時は縦線を消して−） */
.faqQuestion::after { position: absolute; top: 50%; right: 22px; width: 24px; height: 24px; margin-top: -12px; background: url(../images/faq_plus.svg) center / contain no-repeat; content: ""; }
.faqItem[open] .faqQuestion::after { background-image: url(../images/faq_minus.svg); }
.faqQuestion:hover { color: var(--colorPrimary); }
.faqAnswer { padding: 25px; background: #f7f7f7; font-size: 1.6rem; font-weight: 400; line-height: 1.45; }

/*==========================================================================*/
/*                     Company（会社概要・代表メッセージ）                  */
/*==========================================================================*/
/* 横にはみ出す写真・装飾は切り落とす（overflow: clip はスクロールコンテナにならないため sticky を妨げない） */
.company { position: relative; padding: 75px 20px 0; overflow: clip; }

/* 背景：淡い街の画像をセクション内で画面いっぱいの高さに張り付ける（sticky） */
.companyBg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: inset(0); }
.companyBgImage { position: sticky; top: 0; height: 100vh; background: url(../images/town_bg.webp) center / cover no-repeat, var(--colorPrimaryLight); }

/* 背景の上をスクロールで流れるナナメ線（左上・右下） */
.companyDeco { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.companyDeco::before, .companyDeco::after { position: absolute; background: left top / 100% 100% no-repeat; content: ""; }
.companyDeco::before { top: 84px; left: 0; width: 950px; height: 1064px; background-image: url(../images/company_stripe-left.svg); }
.companyDeco::after { right: 1px; bottom: 0; width: 919px; height: 813px; background-image: url(../images/company_stripe-right.svg); }

/* 会社概要カード */
.companyCard { position: relative; display: flex; max-width: 1302px; margin: 0 auto; overflow: hidden; border-radius: 30px; background: #fff; box-shadow: 0 3px 17px rgba(0, 0, 0, 0.25); }
.companyPhoto { flex-shrink: 1; width: 642px; background: var(--colorPrimaryLight); line-height: 0; }
.companyPhoto img { width: 100%; height: 100%; object-fit: cover; }
.companyBody { flex-shrink: 0; width: 660px; padding: 60px; }
.companyLogo { width: 400px; margin: 0 auto; line-height: 0; }
.companyLogo img { width: 100%; }
.companyTable { width: 100%; margin-top: 38px; border-collapse: separate; border-spacing: 0 2px; font-size: 1.6rem; font-weight: 500; line-height: 1.45; }
.companyTable th, .companyTable td { border: 0; }
.companyTable th { width: 140px; padding: 15px 20px; background: var(--colorPrimary); color: #fff; font-weight: 500; text-align: center; }
.companyTable td { padding: 15px 25px; background: #f7f7f7; }

/* 代表メッセージ（左側の白い帯は半透明、写真は右下に接地） */
.message { position: relative; max-width: 1300px; min-height: 847px; margin: 80px auto 0; padding: 90px 0 0 100px; }
.message::before { position: absolute; top: 0; right: 180px; left: calc((100% - 100vw) / 2); height: 754px; background: rgba(255, 255, 255, 0.5); content: ""; }
.messageBody { position: relative; z-index: 1; }
.messageTitle { color: #fff; font-size: 4.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.5; }
.messageTitle span { display: table; padding: 0 0 6px 20px; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), var(--colorPrimary); }
.messageTitle span + span { margin-top: 5px; }
.messageLead { margin-top: 40px; font-size: 3.2rem; font-weight: 900; letter-spacing: -0.32px; line-height: 1.5; text-shadow: 0 0 20px #fff; }
/* 青文字＋黄色マーカー */
.messageMarker { display: inline-block; background: linear-gradient(transparent 70%, #ffe344 70%, #ffe344 98%, transparent 98%); color: var(--colorPrimary); font-size: 3.8rem; }
.messageMarker:first-child { font-size: 3.7rem; }
.messageText { margin-top: 25px; font-size: 1.6rem; font-weight: 500; line-height: 2; }
.messageText p + p { margin-top: 2em; }
.messagePhoto { position: absolute; top: 17px; right: -121px; width: 663px; height: 830px; }
/* うしろのぼかした影（同じ写真をぼかして薄く敷く） */
.messagePhoto::before { position: absolute; top: 36px; left: 110px; width: 663px; height: 794px; background: url(../images/message_photo.webp) center / 100% 100% no-repeat; filter: blur(15px) brightness(0); opacity: 0.1; content: ""; }
.messagePhoto img { position: relative; width: 100%; height: 100%; }
.messageName { position: absolute; top: 517px; left: 1131px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 50%; background: #fff; box-shadow: 6px 7px 10px rgba(20, 20, 20, 0.2); color: var(--colorPrimary); font-size: 3rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1.45; text-align: center; }
.messageName::before { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid var(--colorPrimary); border-radius: 50%; content: ""; }
.messageName span { color: var(--colorBlack); font-size: 1.7rem; font-weight: 700; }

/*==========================================================================*/
/*                               Footer                                     */
/*==========================================================================*/
.footer { padding: 70px 20px; background: #fff; }
.footerInner { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; }
.footerLogo { width: 381px; }
.footerLogo img { width: 100%; }
.footerCompany { margin-top: 20px; font-size: 1.6rem; line-height: 1.45; }
.footerCopyright { color: #a1a1a1; font-size: 1.6rem; line-height: 1.45; white-space: nowrap; }
.footerCopyright small { font-size: 100%; }

/*==========================================================================*/
/*                               Privacy                                    */
/*==========================================================================*/
/* モーダル（dialog 要素）。背景は20%の黒 */
.privacyModal { width: 1052px; max-width: calc(100% - 30px); max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; background: none; color: var(--colorBlack); }
.privacyModal::backdrop { background: rgba(20, 20, 20, 0.2); }
.privacyModalPanel { padding: 60px; background: #fff; }
/* スクロール領域（右端に細いスクロールバー：グレーの線に青いつまみ）。端までスクロールしても背面のページに伝えない */
.privacyModalScroll { height: 500px; max-height: calc(100vh - 250px); padding-right: 30px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--colorPrimary) #d0d0d0; }
.privacyModalScroll::-webkit-scrollbar { width: 2px; }
.privacyModalScroll::-webkit-scrollbar-track { background: #d0d0d0; }
.privacyModalScroll::-webkit-scrollbar-thumb { background: var(--colorPrimary); }
.privacyModalTitle { color: var(--colorPrimary); font-size: 2.2rem; font-weight: 800; line-height: 1.45; }
.privacyModalText { margin-top: 30px; font-size: 1.6rem; font-weight: 400; line-height: 2; }
.privacyModalText address { font-style: normal; line-height: 2; }
.privacyModalGap { margin-top: 2em; }
/* 閉じるボタン */
.privacyModalClose { display: flex; align-items: center; margin: 20px auto 0; padding: 12px 50px; border: 0; border-radius: 42px; background: rgba(20, 20, 20, 0.6); color: #fff; font-family: inherit; font-size: 1.6rem; font-weight: 500; line-height: 2; cursor: pointer; transition: opacity 0.2s; }
.privacyModalClose:hover { opacity: 0.85; }
.privacyModalClose img { width: 20px; margin-right: 10px; }

/*==========================================================================*/
/*                               Contact                                    */
/*==========================================================================*/
.contact { position: relative; padding: 80px 20px 60px; }

/* 背景：セクション内で画面いっぱいの高さの画像を上端に張り付ける（sticky）。セクション外にはみ出さないよう clip-path で切り抜き */
.contactBg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; clip-path: inset(0); }
.contactBgImage { position: sticky; top: 0; height: 100vh; background: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), url(../images/contact_bg.webp) center / cover no-repeat, var(--colorPrimaryLight); }
.contactInner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; }

/* グラデーション文字（青・赤） */
.textGradBlue, .textGradRed { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.textGradBlue { background-image: linear-gradient(180deg, rgba(20, 20, 20, 0) 22.449%, rgba(20, 20, 20, 0.48) 86.224%), linear-gradient(var(--colorPrimary), var(--colorPrimary)); }
.textGradRed { background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.6) 25.32%, rgba(255, 255, 255, 0) 42.48%, rgba(20, 20, 20, 0.2) 59.64%), linear-gradient(var(--colorRed), var(--colorRed)); }

/* 左カラム：見出し・バッジ・説明 */
.contactLead { display: flex; flex-direction: column; align-items: center; width: 506px; }
.contactLeadLabel { padding: 8px 15px 10px; border: 2px solid #fff; color: #fff; font-size: 2.2rem; font-weight: 800; line-height: 1.45; }
/* 見出し画像（SVG）は白い光彩の余白を含むため、上15px・下24px分をマージンで相殺 */
.contactTitle { margin: 4px 0 -24px; line-height: 0; }
.contactTitle img { width: 495px; }
.contactBadge { display: flex; margin-top: 40px; }
.contactBadgeItem { display: flex; align-items: center; padding: 12px 20px 12px 16px; border-radius: 50px; box-shadow: inset 0 0 9px #fffbdc; filter: drop-shadow(0 5px 5px rgba(20, 20, 20, 0.6)); color: #fff; font-size: 2.2rem; font-weight: 800; line-height: 1.45; white-space: nowrap; }
.contactBadgeItem + .contactBadgeItem { margin-left: 10px; }
.contactBadgeItemBlue { background: linear-gradient(to top, rgba(255, 255, 255, 0) 49.99%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.12) 100%), #00bbe5; }
.contactBadgeItemOrange { background: linear-gradient(to top, rgba(255, 255, 255, 0) 49.99%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.12) 100%), #f57a00; }
.contactBadgeItemGreen { background: linear-gradient(to top, rgba(255, 255, 255, 0) 49.99%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.12) 100%), #35af00; }
.contactBadgeIcon { width: 28px; margin-right: 10px; }
.contactText { margin-top: 30px; color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 1.9; text-align: center; text-shadow: 0 2px 7px rgba(20, 20, 20, 0.6); }

/* 左カラム：即日査定・3日で現金化カード */
.contactFeature { display: flex; margin-top: 50px; }
.contactFeatureItem { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 5px 25px; border: 3px solid var(--colorPrimaryLight); border-radius: 15px; background: #fff; }
.contactFeatureItem + .contactFeatureItem { margin-left: 10px; }
.contactFeatureIcon { width: 89px; }
.contactFeatureText { display: flex; flex-direction: column; align-items: center; margin-top: 9px; font-size: 2.3rem; font-weight: 900; line-height: 1.45; white-space: nowrap; }
.contactFeatureLine { display: flex; align-items: center; }
.contactFeatureLine:first-child { align-items: flex-end; margin-bottom: -5px; font-size: 2.2rem; }
.contactFeatureSmall { color: var(--colorBlack); font-size: 1.9rem; }
.contactFeatureLarge { margin: 0 0 0 4px; padding-bottom: 15px; font-size: 3.5rem; letter-spacing: -0.06em; }

/* 左カラム：電話 */
.contactTel { width: 100%; margin-top: 50px; }
.contactTelHead { padding: 9px 28px 10px; border-radius: 10px 10px 0 0; background: var(--colorPrimary); color: #fff; font-size: 1.6rem; line-height: 1.45; text-align: center; }
.contactTelBody { display: flex; align-items: flex-start; justify-content: center; padding: 15px 30px 15px 20px; border-radius: 0 0 10px 10px; background: #fff; color: var(--colorBlack); text-decoration: none; }
.contactTelBody:visited, .contactTelBody:hover { color: var(--colorBlack); }
.contactTelIcon { width: 66px; margin-right: 18px; }
.contactTelInfo { display: flex; flex-direction: column; text-align: center; }
.contactTelNumber { color: var(--colorPrimary); font-family: "Barlow", sans-serif; font-size: 3.5rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; }
.contactTelTime { margin-top: 3px; font-size: 1.4rem; line-height: 1.45; }

/* 右カラム：フォームカード */
.contactForm { position: relative; flex-shrink: 0; width: 660px; margin-top: 45px; padding: 30px 0 50px; border-radius: 20px; background: #fff; box-shadow: 0 3px 17px rgba(0, 0, 0, 0.25); }
.contactFormBadge { position: absolute; top: -45px; left: 517px; width: 113px; filter: drop-shadow(6px 7px 14px rgba(0, 0, 0, 0.25)); }
.contactFormBadge img { width: 100%; }
.contactFormTitle { padding: 4px 30px 4.5px; background: var(--colorPrimaryLight); line-height: 0; text-align: center; }
.contactFormTitle img { width: 207px; }

/* 確認・エラー・完了画面の案内文 */
.contactStatus { margin: 30px 50px 0; text-align: center; }
.contactStatusError { color: var(--colorRed); font-weight: 700; }
.contactStatusConfirm { margin-top: 40px; color: var(--colorGray); font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1.5; }
.contactStatusConfirm + .formArea { margin-top: 25px; }

/* 送信完了画面（本文はテンプレートに記述。fmail が出力する完了メッセージは使わない） */
.thanks { margin-top: 40px; padding: 0 50px; font-size: 1.6rem; letter-spacing: -0.01em; }
.thanks + .formArea { display: none; }
.thanksTitle { color: var(--colorPrimary); font-size: 2.5rem; font-weight: 800; line-height: 1.6; text-align: center; }
.thanksText { margin-top: 25px; line-height: 1.8; }
.thanksTitle + .thanksText { margin-top: 30px; }
.thanksFlow { margin-top: 25px; padding: 25px; border-radius: 10px; background: var(--colorPrimaryLight); }
.thanksFlowTitle { color: var(--colorPrimary); font-size: 1.8rem; font-weight: 700; line-height: 1.5; }
.thanksFlowList { margin-top: 15px; }
.thanksFlowList li { display: flex; align-items: center; line-height: 1.5; }
.thanksFlowList li + li { margin-top: 8px; }
.thanksFlowNum { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 33px; height: 33px; margin-right: 10px; border-radius: 50%; background: var(--colorPrimary); color: #fff; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.03em; }
.thanksTel { margin-top: 15px; line-height: 1.8; }
.thanksTel a, .thanksTel a:visited, .thanksTel a:hover { color: inherit; text-decoration: none; }
.thanksNote { margin-top: 25px; color: var(--colorGray); font-size: 1.3rem; font-weight: 400; line-height: 1.5; }
.thanksBack { margin-top: 25px; text-align: center; }
.thanksBack a { display: inline-flex; align-items: center; justify-content: center; width: 221px; height: 55px; border: 1px solid var(--colorPrimary); border-radius: 50px; background: #fff; color: var(--colorPrimary); font-size: 1.7rem; font-weight: 700; text-decoration: none; transition: opacity 0.2s; }
.thanksBack a:visited { color: var(--colorPrimary); }
.thanksBack a:hover { color: var(--colorPrimary); opacity: 0.85; }

/*==========================================================================*/
/*                     Form（fmail.lib/fmail.css の上書き）                 */
/*   fmail.css が #fmail（IDセレクタ）で指定しているため、入力部品のみ       */
/*   form#fmail を使って上書きする                                          */
/*==========================================================================*/
.formArea { margin-top: 40px; padding: 0 50px; }

/* 項目（dl形式） */
.formArea dl.mailform { width: auto; margin-top: 25px; padding: 0; }
.formArea form > dl.mailform:first-of-type { margin-top: 0; }
.formArea dl.mailform dt { display: flex; align-items: flex-start; height: auto; padding: 0; border: 0; color: var(--colorBlack); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.formArea dl.mailform dt span.name { display: inline; height: auto; overflow: visible; }
.formArea dl.mailform div.fmail_must { width: auto; height: auto; margin: 0 0 0 12px; padding: 3px 6px; overflow: visible; border-radius: 3px; background: var(--colorRed); color: #fff; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; text-indent: 0; }
.formArea dl.mailform dd { margin-top: 12px; padding: 0; font-size: 1.6rem; }
.formArea dt.fmail_error_line, .formArea dd.fmail_error_line { background: none; }

/* 入力欄 */
form#fmail input.fmail[type], form#fmail select.fmail, form#fmail textarea.fmail { width: 100%; height: 55px; margin: 0; padding: 16px 23px 15px; border: 0; border-radius: 5px; background-color: #f7f7f7; color: var(--colorBlack); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; }
form#fmail textarea.fmail { display: block; height: 127px; resize: vertical; }
form#fmail select.fmail { padding-right: 50px; background: #f7f7f7 url(../images/icon_select-arrow.svg) right 23px center / 11px 6px no-repeat; -webkit-appearance: none; appearance: none; cursor: pointer; }
form#fmail .fmail::placeholder { color: #a1a1a1; opacity: 1; }

/* プライバシーポリシー同意（見出しは同意文と重複するため非表示にし、チェックボックスのみ中央に表示） */
.formArea dl.mailformPrivacy dt { display: none; }
.formArea dl.mailformPrivacy dd { margin-top: 0; text-align: center; }
.formArea dl.mailformPrivacy ol.fmail_checkbox_list { display: flex; justify-content: center; width: 100%; }
form#fmail dl.mailformPrivacy ol.fmail_checkbox_list li { display: flex; float: none; padding: 0; }
.formArea dl.mailformPrivacy label.fmail_label, .formArea dl.mailformPrivacy label.fmail_label_enabled, .formArea dl.mailformPrivacy label.fmail_label_disabled { display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.5; text-indent: 0; }
/* fmail.css（SP）の「#fmail input.fmail { width: 100% !important; }」がチェックボックスにも効くため、幅のみ !important で戻す */
form#fmail dl.mailformPrivacy input.fmail[type="checkbox"] { flex-shrink: 0; width: 20px !important; height: 20px; margin: 0 8px 0 0; padding: 0; border: 1px solid #d0d0d0; border-radius: 0; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
form#fmail dl.mailformPrivacy input.fmail[type="checkbox"]:checked { border-color: var(--colorPrimary); background: var(--colorPrimary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4L13 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px auto no-repeat; }

/* 送信ボタン（最後の dl） */
.formArea form > dl.mailform:last-of-type { margin-top: 20px; }
.formArea form > dl.mailform:last-of-type dt { display: none; }
.formArea form > dl.mailform:last-of-type dd { margin-top: 0; text-align: center; }
.formArea input.submit_confirm_button, .formArea input.submit_send_button { width: 360px; max-width: 100%; height: 85px; border: 0; border-radius: 50px; background: linear-gradient(to top, rgba(222, 0, 0, 0.6) 49.75%, rgba(255, 255, 255, 0.36) 49.763%, rgba(255, 255, 255, 0.03) 117%), var(--colorRed); color: #fff; font-size: 2.2rem; font-weight: 900; cursor: pointer; transition: opacity 0.2s; }
.formArea input.submit_cancel_button { width: 180px; max-width: 100%; height: 55px; border: 0; border-radius: 50px; background: #a1a1a1; color: #fff; font-size: 1.7rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.formArea input.submit_confirm_button:hover, .formArea input.submit_send_button:hover, .formArea input.submit_cancel_button:hover { opacity: 0.85; }

/* 入力エラー */
.formArea .fmail_error_message { margin: 0 0 25px; padding: 10px; font-size: 1.4rem; }
.formArea span.fmail_error { padding: 0 0 6px; background: none; font-size: 1.3rem; }

/* 確認画面（fmail は表で出力）。グレーの枠内に「項目名→内容」を縦に並べる */
.formArea table.mailform, .formArea table.mailform tbody, .formArea table.mailform tr, .formArea table.mailform tr th, .formArea table.mailform tr td { display: block; width: auto; }
.formArea table.mailform { margin: 0; padding: 25px; background: #f7f7f7; }
.formArea table.mailform tr + tr { margin-top: 25px; }
.formArea table.mailform tr th { padding: 0; border: 0; background: none; color: var(--colorBlack); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; text-align: left; }
.formArea table.mailform tr td { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--colorGray); font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1.5; text-align: left; word-break: break-all; }
/* ボタン：HTMLは「修正」「送信」の順のため、並びを反転して送信を左に */
.formArea .button { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; margin-top: 25px; }
.formArea .button form.fmail_submit, .formArea .button form.fmail_cancel { float: none; width: auto; padding: 0; }
.formArea .button form.fmail_cancel { margin-left: 20px; }

/* Figmaの更新写真：元画像の解像度を保ち、指定のトリミングとフェードを適用 */
.voiceCardPhotoUpdated { height: 211px; overflow: hidden; mask: url(../images/voice_photo-02-mask.svg) 3px -40px / 248px 248px no-repeat; }
.voiceCardPhotoUpdated img { position: absolute; width: 351.62%; max-width: none; height: 234.6%; left: -113.41%; top: 0.01%; }