/* Scoped to article diagnosis. Values follow the approved Figma components. */
#sfDiagnosisBanner, #sfArticleDiagnosis { --sf-blue:#00afec; --sf-ink:#40536a; --sf-sub:#6b7c88; --sf-tint:#f1faff; color:var(--sf-ink); font-family:'Noto Sans JP',sans-serif; font-size:13px; line-height:1.6; }
#sfDiagnosisBanner *, #sfArticleDiagnosis * { box-sizing:border-box; }
#sfDiagnosisBanner p, #sfArticleDiagnosis p { margin:0; padding:0; background:none; border:0; font-size:inherit; line-height:inherit; letter-spacing:normal; word-break:normal; }
#sfDiagnosisBanner { width:100%; max-width:600px; margin:32px auto; border:2px solid var(--sf-blue); border-radius:16px; overflow:hidden; background:white; }
.sfDiagnosisHero { position:relative; background:var(--sf-tint); }
.sfDiagnosisHero picture { display:block; }
.sfDiagnosisHero img { display:block; width:100%; height:136px; object-fit:cover; margin:0; }
.sfDiagnosisHeading { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 16px; position:relative; }
.sfDiagnosisBadge { display:inline-block; color:white; background:var(--sf-blue); font-size:11px; line-height:1.5; padding:3px 10px; border-radius:20px; font-weight:700; }
#sfDiagnosisBanner .sfDiagnosisEvidence { font-weight:700; color:#0092c0; font-size:14px; line-height:1.5; }
#sfDiagnosisBanner .sfDiagnosisHeadline { font-weight:900; font-size:20px; line-height:1.4; }
#sfDiagnosisBanner:has([data-sf-first^="剪定"]) .sfDiagnosisHeadline { font-size:18px; }
#sfDiagnosisBanner .sfDiagnosisSubheading { font-weight:700; font-size:12px; line-height:1.5; }
.sfDiagnosisFirst { padding:16px 16px 18px; }
.sfDiagnosisQuestionLabel { display:flex; gap:8px; align-items:center; margin-bottom:12px!important; }
.sfDiagnosisQuestionLabel>span { background:#d7f5ff; color:var(--sf-blue); padding:1px 6px; border-radius:3px; font-size:11px; font-weight:700; white-space:nowrap; }
.sfDiagnosisQuestionLabel strong { font-size:16px; line-height:1.5; }
.sfDiagnosisOptions { display:grid; gap:10px; width:100%; }
#sfDiagnosisBanner button, #sfArticleDiagnosis button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
#sfDiagnosisBanner .sfDiagnosisOption, #sfArticleDiagnosis .sfDiagnosisOption { width:100%; min-height:56px; border:1px solid var(--sf-blue); border-radius:15px; padding:15px 20px; background:white; color:var(--sf-ink); text-align:left; font-size:14px; font-weight:700; line-height:1.7; }
#sfDiagnosisBanner .sfDiagnosisOption:hover, #sfArticleDiagnosis .sfDiagnosisOption:hover { background:var(--sf-tint); }
#sfDiagnosisBanner button:focus-visible, #sfArticleDiagnosis button:focus-visible, #sfArticleDiagnosis a:focus-visible, #sfArticleDiagnosis select:focus-visible { outline:3px solid #006894; outline-offset:3px; }
#sfDiagnosisBanner .sfDiagnosisHint { margin-top:12px; text-align:center; color:var(--sf-sub); font-size:11px; }
body.sfDiagnosisOpen { overflow:hidden; }
#sfArticleDiagnosis[hidden] { display:none; }
#sfArticleDiagnosis { position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:24px 20px; isolation:isolate; }
#sfArticleDiagnosis .sfDiagnosisOverlay { position:absolute; inset:0; background:rgba(64,83,106,.85); z-index:-1; }
#sfArticleDiagnosis .sfDiagnosisDialog { display:flex; flex-direction:column; width:600px; max-width:100%; max-height:calc(100dvh - 48px); border-radius:20px; overflow:hidden; background:white; outline:0; }
#sfArticleDiagnosis .sfDiagnosisTop { display:flex; align-items:center; gap:12px; flex-shrink:0; background:var(--sf-blue); color:white; padding:14px 16px; font-size:18px; font-weight:700; line-height:1.5; }
#sfArticleDiagnosis .sfDiagnosisTop p { flex:1; text-align:center; color:white; }
#sfArticleDiagnosis .sfDiagnosisTop button { color:white; font-size:26px; line-height:1; min-width:28px; min-height:28px; }
#sfArticleDiagnosis .sfDiagnosisBody { overflow:auto; overscroll-behavior:contain; min-height:0; }
#sfArticleDiagnosis .sfDiagnosisWizard { background:var(--sf-tint); padding:18px 20px 20px; }
#sfArticleDiagnosis .sfDiagnosisStep { color:var(--sf-sub); font-size:12px; font-weight:700; }
#sfArticleDiagnosis .sfDiagnosisProgress { height:6px; border-radius:20px; background:#e0e0e0; margin:4px 0 16px; overflow:hidden; }
#sfArticleDiagnosis .sfDiagnosisProgress span { display:block; height:100%; background:var(--sf-blue); }
#sfArticleDiagnosis .sfDiagnosisQuestion { font-size:20px; font-weight:700; text-align:center; line-height:1.4; margin:0 0 16px; outline:0; }
#sfArticleDiagnosis .sfDiagnosisWizard .sfDiagnosisOptions { gap:15px; }
#sfArticleDiagnosis [data-sf-action="back"] { display:block; width:100%; text-align:center; font-weight:700; color:var(--sf-sub); margin-top:16px; font-size:14px; }
#sfArticleDiagnosis .sfDiagnosisStatus { text-align:center; padding:28px 20px; }
#sfArticleDiagnosis .sfDiagnosisStatus button { display:inline-block; margin:16px 5px 0; border:1px solid var(--sf-blue); border-radius:10px; padding:10px 14px; color:var(--sf-blue); background:white; }
#sfArticleDiagnosis .sfDiagnosisResultImage { display:block; width:100%; height:100px; object-fit:cover; }
#sfArticleDiagnosis .sfDiagnosisVerdict { padding:20px 16px; }
#sfArticleDiagnosis .sfDiagnosisVerdictTitle { font-size:18px; font-weight:900; line-height:1.4; margin:0 0 10px; outline:0; }
#sfArticleDiagnosis .sfDiagnosisVerdict>p+ p { font-size:13px; }
#sfArticleDiagnosis .sfDiagnosisNeed { margin:16px 0; }
#sfArticleDiagnosis .sfDiagnosisNeed>span { font-size:11px; font-weight:700; }
#sfArticleDiagnosis .sfDiagnosisNeedBar { display:flex; gap:3px; height:8px; margin:5px 0; }
#sfArticleDiagnosis .sfDiagnosisNeedBar i { flex:1; background:#dbe4ec; border-radius:4px; }
#sfArticleDiagnosis .sfDiagnosisNeedBar i:nth-child(1).active { background:#02a995; }
#sfArticleDiagnosis .sfDiagnosisNeedBar i:nth-child(2).active { background:#ffc34d; }
#sfArticleDiagnosis .sfDiagnosisNeedBar i:nth-child(3).active { background:#f76969; }
#sfArticleDiagnosis .sfDiagnosisNeedLabels { display:flex; justify-content:space-between; gap:4px; font-size:10px; }
#sfArticleDiagnosis .sfDiagnosisAnswers { background:var(--sf-tint); padding:10px 12px; border-radius:6px; font-size:11px; }
#sfArticleDiagnosis .sfDiagnosisAnswers>strong { display:block; margin-bottom:6px; }
#sfArticleDiagnosis .sfDiagnosisAnswers p { padding:3px 0; }
#sfArticleDiagnosis .sfDiagnosisAnswers b { display:inline-block; font-size:10px; color:var(--sf-blue); background:#d7f5ff; padding:1px 3px; border-radius:2px; }
#sfArticleDiagnosis .sfDiagnosisSection { padding:0 16px; margin:0 0 24px; }
#sfArticleDiagnosis .sfDiagnosisSectionTitle { font-size:16px; font-weight:700; line-height:1.6; }
#sfArticleDiagnosis .sfDiagnosisSectionSub { color:var(--sf-sub); font-size:11px; line-height:1.6; margin-bottom:10px; }
#sfArticleDiagnosis ul, #sfArticleDiagnosis ol { list-style:none; margin:0; padding:0; }
#sfArticleDiagnosis .sfDiagnosisPoints { display:grid; gap:10px; margin-top:10px; }
#sfArticleDiagnosis .sfDiagnosisPoints li { display:flex; gap:8px; align-items:flex-start; background:var(--sf-tint); border-radius:10px; padding:12px; }
#sfArticleDiagnosis .sfDiagnosisNumber { flex-shrink:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--sf-blue); color:white; font-weight:700; font-size:12px; }
#sfArticleDiagnosis .sfDiagnosisPoints strong { display:block; font-size:11px; color:var(--sf-blue); }
#sfArticleDiagnosis .sfDiagnosisPoints p { font-size:13px; }
#sfArticleDiagnosis .sfDiagnosisRisk { background:#fffde1; border:1px solid #ffd059; border-radius:10px; padding:14px; font-size:13px; }
#sfArticleDiagnosis .sfDiagnosisRisk ul { margin-top:12px; }
#sfArticleDiagnosis .sfDiagnosisRisk li { margin:8px 0; padding-left:14px; position:relative; font-size:12px; }
#sfArticleDiagnosis .sfDiagnosisRisk li:before { content:'•'; position:absolute; left:0; color:#f76969; }
#sfArticleDiagnosis .sfDiagnosisProList { display:grid; gap:8px; }
#sfArticleDiagnosis .sfDiagnosisProList li { display:flex; gap:12px; padding:12px; border:1px solid #cfe3ee; border-radius:10px; }
#sfArticleDiagnosis .sfDiagnosisProList img { flex-shrink:0; box-sizing:content-box; padding:8px; border-radius:8px; background:var(--sf-tint); }
#sfArticleDiagnosis .sfDiagnosisProList strong, #sfArticleDiagnosis .sfDiagnosisChecks strong { font-size:14px; }
#sfArticleDiagnosis .sfDiagnosisProList p, #sfArticleDiagnosis .sfDiagnosisChecks p { color:var(--sf-sub); font-size:12px; }
#sfArticleDiagnosis .sfDiagnosisChecks { background:var(--sf-tint); border-radius:10px; padding:4px 14px; }
#sfArticleDiagnosis .sfDiagnosisChecks li { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #cfe3ee; }
#sfArticleDiagnosis .sfDiagnosisChecks li:last-child { border:0; }
#sfArticleDiagnosis .sfDiagnosisChecks li>span { color:white; background:var(--sf-blue); font-size:11px; font-weight:700; padding:2px 6px; height:max-content; border-radius:3px; }
#sfArticleDiagnosis .sfDiagnosisSelfHelp { background:#fffde1; border-radius:10px; padding:14px; margin:0 16px 20px; }
#sfArticleDiagnosis .sfDiagnosisSelfHelp .sfDiagnosisSectionTitle { font-size:14px; margin-bottom:8px; }
#sfArticleDiagnosis .sfDiagnosisSelfHelp li { margin:8px 0; }
#sfArticleDiagnosis .sfDiagnosisAgain { text-align:center; margin:20px 0; font-size:14px; font-weight:700; color:var(--sf-sub); }
#sfArticleDiagnosis .sfDiagnosisConsult { padding:0 16px 24px; }
#sfArticleDiagnosis .sfDiagnosisGuide { background:var(--sf-tint); border:1px solid #cfe3ee; border-radius:12px; padding:18px 16px; }
#sfArticleDiagnosis .sfDiagnosisConsultTitle { text-align:center; color:var(--sf-blue); font-weight:700; font-size:15px; }
#sfArticleDiagnosis .sfDiagnosisConsultTitle strong { display:block; font-size:22px; font-weight:900; line-height:1.3; }
#sfArticleDiagnosis .sfDiagnosisMessage { display:flex; gap:12px; align-items:flex-start; margin:14px 0; }
#sfArticleDiagnosis .sfDiagnosisPerson { width:78px; flex-shrink:0; text-align:center; font-size:10px; line-height:1.2; }
#sfArticleDiagnosis .sfDiagnosisPerson img { width:56px; height:56px; object-fit:cover; border-radius:50%; margin-bottom:4px; }
#sfArticleDiagnosis .sfDiagnosisSpeech { flex:1; min-width:0; padding:12px 14px; border-radius:10px; box-shadow:0 4px 16px #40546b1f; background:white; font-size:12px; line-height:1.5; }
#sfArticleDiagnosis .sfDiagnosisSpeech p+p { margin-top:8px; }
#sfArticleDiagnosis .sfDiagnosisSpeech strong { color:var(--sf-blue); }
#sfArticleDiagnosis .sfDiagnosisPrefLabel { display:block; font-size:12px; font-weight:700; }
#sfArticleDiagnosis .sfDiagnosisPrefLabel>span { background:#f76969; color:white; border-radius:2px; padding:1px 4px; font-size:10px; }
#sfArticleDiagnosis select { display:block; width:100%; padding:12px; border:1px solid #cfe3ee; border-radius:6px; background:white; color:var(--sf-ink); font-size:14px; margin-top:6px; }
#sfArticleDiagnosis .sfDiagnosisVendorHeading { color:var(--sf-blue); font-weight:900; font-size:17px; margin:20px 0 4px; }
#sfArticleDiagnosis .sfDiagnosisVendorNote { color:var(--sf-sub); font-size:11px; margin-bottom:12px; }
#sfArticleDiagnosis .consultResult { display:grid; gap:14px; }
#sfArticleDiagnosis .consultResult .listBox { padding:14px; border:1px solid #a5a3a9; border-radius:10px; margin:0; width:100%; background:white; }
#sfArticleDiagnosis .boxWrap, #sfArticleDiagnosis .boxSpWrap { display:flex; gap:10px; }
#sfArticleDiagnosis .boxSpWrap { flex:1; min-width:0; }
#sfArticleDiagnosis .boxPhoto { width:96px; flex-shrink:0; }
#sfArticleDiagnosis .boxPhoto img { width:96px; height:59px; object-fit:cover; border-radius:5px; }
#sfArticleDiagnosis .boxSpInfo { display:block; min-width:0; flex:1; }
#sfArticleDiagnosis .infoTitle { font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.4; padding:0; background:none; border:0; }
#sfArticleDiagnosis a { color:var(--sf-blue); }
#sfArticleDiagnosis .boxInfo { width:100%; }
#sfArticleDiagnosis .boxWrap { flex-direction:column; }
#sfArticleDiagnosis .infoTitle.pc, #sfArticleDiagnosis .infoWrap.pc { display:none; }
#sfArticleDiagnosis .wrapRevLike, #sfArticleDiagnosis .starReview { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
#sfArticleDiagnosis .star { position:relative; font-size:15px; line-height:1; width:80px; height:18px; }
#sfArticleDiagnosis .star .full { position:relative; display:block; width:80px; height:18px; }
#sfArticleDiagnosis .star .full:before { content:'★★★★★'; color:#ddd; position:absolute; inset:0; }
#sfArticleDiagnosis .star .bgColor { display:block; height:18px; overflow:hidden; position:absolute; top:0; left:0; }
#sfArticleDiagnosis .star .bgColor:before { content:'★★★★★'; color:#ffd800; display:block; width:80px; }
#sfArticleDiagnosis .score_avg { font-size:16px; font-weight:700; color:#f76969; }
#sfArticleDiagnosis .seeReview { font-size:12px; }
#sfArticleDiagnosis .concernBtn { display:none; }
#sfArticleDiagnosis .recommendPoint { display:grid; gap:7px; padding:5px; background:#fffff1; margin:12px 0; }
#sfArticleDiagnosis .recommendPointItem { display:flex; gap:6px; align-items:flex-start; }
#sfArticleDiagnosis .recommendPointStep { background:#f76969; color:white; border-radius:5px; padding:0 5px; font-size:10px; white-space:nowrap; }
#sfArticleDiagnosis .recommendPointTitle { font-size:10px; font-weight:700; }
#sfArticleDiagnosis .concernTxt { font-size:12px; margin:10px 0; }
#sfArticleDiagnosis .rankContactWrap { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
#sfArticleDiagnosis .rankContactWrap>p { flex:1; min-width:0; }
#sfArticleDiagnosis .rankContactWrap .btnPopUp { flex:0 0 102px; }
#sfArticleDiagnosis .rankContactWrap a { display:flex; align-items:center; justify-content:center; min-height:38px; border-radius:10px; padding:9px 8px; font-size:11px; font-weight:700; text-decoration:none; line-height:1.3; text-align:center; }
#sfArticleDiagnosis .btnPopUp a { background:#ffef75; }
#sfArticleDiagnosis .consultBtn a { background:#dc2626; color:white; white-space:nowrap; }
#sfArticleDiagnosis .btnReviewDetail a { border:1px solid var(--sf-blue); }
#sfArticleDiagnosis .btnReviewDetail { display:block; }
#sfArticleDiagnosis .phonenumberBtn .pc, #sfArticleDiagnosis .phoneTxt { display:none; }
#sfArticleDiagnosis .sfDiagnosisReviews { margin:12px 0; }
#sfArticleDiagnosis .sfDiagnosisReviewsHeading { font-size:13px; font-weight:700; margin-bottom:8px; }
#sfArticleDiagnosis .sfDiagnosisReviewTrack { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
#sfArticleDiagnosis .sfDiagnosisReview { flex:0 0 100%; min-width:0; scroll-snap-align:start; background:#fffde1; border:1px solid #ffd059; border-radius:5px; padding:15px 14px; }
#sfArticleDiagnosis .sfDiagnosisReviewTitle { border-bottom:1px solid #ffd059; padding-bottom:8px; margin-bottom:8px; font-size:14px; font-weight:700; }
#sfArticleDiagnosis .sfDiagnosisReviewRating { color:#ffd800; font-size:16px; margin:8px 0; }
#sfArticleDiagnosis .sfDiagnosisReviewRating b { color:var(--sf-ink); }
#sfArticleDiagnosis .sfDiagnosisReviewText { font-size:13px; white-space:pre-line; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
#sfArticleDiagnosis .sfDiagnosisReviewText.is-expanded { display:block; }
#sfArticleDiagnosis [data-sf-action="review_more"] { color:var(--sf-blue); text-decoration:underline; font-size:13px; margin:5px 0; padding:0; }
#sfArticleDiagnosis .sfDiagnosisReviewMeta { font-size:11px; line-height:1.5; margin-top:8px; }
#sfArticleDiagnosis .sfDiagnosisReviewMeta span { display:inline-block; margin-right:8px; }
#sfArticleDiagnosis .sfDiagnosisReviewService { background:var(--sf-tint); color:var(--sf-blue); padding:1px 4px; border-radius:3px; }
#sfArticleDiagnosis .sfDiagnosisReviewNav { display:flex; align-items:center; justify-content:center; gap:10px; font-size:11px; color:#8493a9; margin:8px 0; }
#sfArticleDiagnosis .sfDiagnosisReviewNav button { border:1px solid #cfe3ee; border-radius:50%; width:28px; height:28px; color:var(--sf-blue); }
#sfArticleDiagnosis .sfDiagnosisReviewAll { font-size:12px; font-weight:700; }
@media(min-width:769px) {
    .sfDiagnosisHero picture { position:absolute; inset:0; }
    .sfDiagnosisHero img { height:100%; }
    .sfDiagnosisHeading { min-height:256px; padding:24px 262px 38px 28px; }
    #sfDiagnosisBanner .sfDiagnosisHeading .sfDiagnosisHeadline { font-size:20px; min-width:308px; }
    #sfDiagnosisBanner .sfDiagnosisOptions { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #sfArticleDiagnosis .sfDiagnosisResultImage { height:150px; }
    #sfArticleDiagnosis .sfDiagnosisVerdict { padding:24px; }
    #sfArticleDiagnosis .sfDiagnosisSection { padding:0 24px; }
    #sfArticleDiagnosis .sfDiagnosisSelfHelp { padding:14px; margin-left:24px; margin-right:24px; }
    #sfArticleDiagnosis .sfDiagnosisConsult { padding:0 24px 24px; }
}
@media(max-width:374px) {
    #sfArticleDiagnosis { padding:12px; }
    #sfArticleDiagnosis .sfDiagnosisDialog { max-height:calc(100dvh - 24px); }
    #sfArticleDiagnosis .sfDiagnosisPerson { width:56px; }
    #sfArticleDiagnosis .sfDiagnosisMessage { gap:8px; }
    #sfArticleDiagnosis .rankContactWrap { gap:6px; }
    #sfArticleDiagnosis .rankContactWrap .btnPopUp { flex-basis:88px; }
    #sfArticleDiagnosis .rankContactWrap a { padding:9px 4px; font-size:10px; }
}

body.sfDiagnosisOpen .feePopup[id^="feePopupDiagnosisEstimate"] { z-index:100000; }
#sfArticleDiagnosis .sfDiagnosisSectionTitle { display:flex; gap:10px; align-items:center; }
#sfArticleDiagnosis .sfDiagnosisSectionTitle>img { box-sizing:content-box; padding:6px; border-radius:50%; background:#00afec; }
#sfArticleDiagnosis .sfDiagnosisRiskSection .sfDiagnosisSectionTitle>img { background:#f76969; }
#sfArticleDiagnosis .sfDiagnosisSectionTitle>img[src$="section-checks.svg"] { background:#02a995; }
#sfArticleDiagnosis .concernBtn { display:block; border:1px solid #f76969; border-radius:5px; font-size:10px; }
#sfArticleDiagnosis .concernBtn a { color:#f76969; padding:2px 5px; display:block; }
#sfArticleDiagnosis .favoriteButtonWrap { display:flex; align-items:center; gap:3px; }
#sfArticleDiagnosis .favoriteImage img { width:12px; height:12px; }
#sfArticleDiagnosis .favoriteImage .white { display:none; }

#sfArticleDiagnosis .boxSpWrap>.boxInfo.sp { display:block; flex:1; min-width:0; }
#sfArticleDiagnosis .phonenumberBtn .sp, #sfArticleDiagnosis .btnReviewDetail .sp { display:inline; }
#sfArticleDiagnosis .btnReviewDetail .pc { display:none; }
#sfArticleDiagnosis .sfDiagnosisReviewDots { display:flex; align-items:center; gap:6px; }
#sfArticleDiagnosis .sfDiagnosisReviewDots img { flex-shrink:0; }
#sfArticleDiagnosis .sfDiagnosisVendorHeading>span { display:inline-block; padding:1px 6px; border-radius:16px; margin-left:6px; background:var(--sf-blue); color:white; font-size:11px; vertical-align:middle; }