@charset "utf-8";
/* ====================================================================
   SUIFEEL TYPOGRAPHY SYSTEM / LOWER PAGES
   2026-10-07

   TOP / Product で確立した階層を、下層ページへ横断適用する単一基準。
   - H1 / 主要H2 / editorial heading: Mincho, 400
   - Eyebrow: compact sans, 600
   - Lead / body / UI: existing sans hierarchy
   - Layout / spacing / colors are intentionally not redesigned here.
   - index.php / product.php には読み込ませない。
   ==================================================================== */

:root{
  --sf-font-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sf-type-title-weight:400;
  --sf-type-eyebrow-size:12px;
  --sf-type-eyebrow-line:1.4;
  --sf-type-eyebrow-spacing:.24em;
  --sf-type-section-size:40px;
  --sf-type-section-line:1.58;
  --sf-type-section-spacing:.045em;
  --sf-type-compact-size:30px;
  --sf-type-compact-line:1.6;
  --sf-type-block-size:28px;
  --sf-type-block-small-size:23px;
  --sf-type-card-size:22px;
  --sf-type-card-line:1.62;
  --sf-type-lead-size:15px;
  --sf-type-lead-line:2.1;
  --sf-type-lead-spacing:.035em;
}

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
.LowerHero .LowerHero_title{
  font-family:var(--sf-font-serif);
  font-size:clamp(34px,3.6vw,48px);
  font-weight:var(--sf-type-title-weight);
  line-height:1.42;
  letter-spacing:.055em;
}

.LowerHero .LowerHero_eyebrow{
  font-size:var(--sf-type-eyebrow-size);
  font-weight:600;
  line-height:var(--sf-type-eyebrow-line);
  letter-spacing:var(--sf-type-eyebrow-spacing);
}

.LowerHero .LowerHero_lead{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-lead-size);
  font-weight:500;
  line-height:var(--sf-type-lead-line);
  letter-spacing:var(--sf-type-lead-spacing);
}

/* --------------------------------------------------------------------
   SHARED LOWER-PAGE PRIMITIVES
   -------------------------------------------------------------------- */
.SfEyebrow,
.SfMiniEyebrow,
.AboutEyebrow,
.AboutIntro_eyebrow,
.BusinessEyebrow,
.GuideEyebrow,
.DealersEyebrow,
.DealersContact_eyebrow,
.FaqEyebrow,
.FinanceApplicationEyebrow,
.JournalArticleEyebrow,
.RoiEyebrow,
.ApplicationCompleteEyebrow,
.ContactCompleteEyebrow{
  font-size:var(--sf-type-eyebrow-size);
  font-weight:600;
  line-height:var(--sf-type-eyebrow-line);
  letter-spacing:var(--sf-type-eyebrow-spacing);
}

.SfSectionTitle,
.RentalPage .SfSectionTitle,
.LeasePage .SfSectionTitle,
.CasesPage .SfSectionTitle,
.CompanyPage .SfSectionTitle,
.LawPage .SfSectionTitle,
.PolicyPage .SfSectionTitle,
.ContactPage .SfSectionTitle,
.EvidencePage .SfSectionTitle,
.JournalPage .SfSectionTitle,
.ApplicationPage .SfSectionTitle,
.AboutArea .AboutIntro_title,
.AboutArea .AboutTitle,
.BusinessArea .BusinessTitle,
.GuideArea .GuideTitle,
.SalonPage .SalonH2,
.DealersPage .DealersTitle,
.DealersMessage_inner h2,
.DealersContact_head h2,
.FaqPage .FaqSectionTitle,
.FaqPage .FaqSectionHead h2{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-section-size);
  font-weight:var(--sf-type-title-weight);
  line-height:var(--sf-type-section-line);
  letter-spacing:var(--sf-type-section-spacing);
}

.SfBlockTitle,
.RentalPage .SfBlockTitle,
.LeasePage .SfBlockTitle,
.CasesPage .SfBlockTitle,
.CompanyPage .SfBlockTitle,
.LawPage .SfBlockTitle,
.PolicyPage .SfBlockTitle,
.ContactPage .SfBlockTitle,
.EvidencePage .SfBlockTitle,
.JournalPage .SfBlockTitle,
.ApplicationPage .SfBlockTitle{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-block-size);
  font-weight:var(--sf-type-title-weight);
  line-height:1.58;
  letter-spacing:.04em;
}

.SfBlockTitle.SfBlockTitle-small,
.SfBlockTitle-small{
  font-size:var(--sf-type-block-small-size);
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
}

.SfLead,
.RentalPage .SfLead,
.LeasePage .SfLead,
.CasesPage .SfLead,
.CompanyPage .SfLead,
.LawPage .SfLead,
.PolicyPage .SfLead,
.ContactPage .SfLead,
.EvidencePage .SfLead,
.JournalPage .SfLead,
.ApplicationPage .SfLead,
.AboutLead,
.BusinessLead,
.GuideLead,
.SalonLead,
.HydrogenLead,
.HydrogenMisinformationLead,
.JournalArticleLead,
.RoiLead,
.ApplicationCompleteLead,
.ContactCompleteLead,
.financeApplyLead{
  font-size:var(--sf-type-lead-size);
  line-height:var(--sf-type-lead-line);
  letter-spacing:var(--sf-type-lead-spacing);
}

/* --------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------- */
.AboutArea .AboutPrincipleTitle,
.AboutArea .AboutMissionAudienceTitle,
.AboutArea .AboutDesignValueTitle,
.AboutArea .AboutOriginValueTitle,
.AboutArea .AboutEvidenceInfoTitle,
.AboutArea .AboutJapanStepTitle,
.AboutArea .AboutMessageTitle{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-card-size);
  font-weight:var(--sf-type-title-weight);
  line-height:var(--sf-type-card-line);
  letter-spacing:.04em;
}

.AboutMessageClosing h3{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-compact-size);
  font-weight:var(--sf-type-title-weight);
  line-height:1.65;
  letter-spacing:.05em;
}

/* --------------------------------------------------------------------
   GUIDE / BUSINESS
   -------------------------------------------------------------------- */
.GuideMetricCard h3,
.GuideCriteriaCard h3,
.GuideUsageCard h3,
.GuideDecisionCard h3,
.BusinessTypeGrid h3,
.BusinessTrustGrid h3,
.BusinessPlanGrid h3,
.BusinessRoiCta h3,
.BusinessFlowList h3{
  font-family:var(--sf-font-serif);
  font-size:20px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
  letter-spacing:.035em;
}

/* --------------------------------------------------------------------
   RENTAL / LEASE
   -------------------------------------------------------------------- */
.RentalTrialIntro h2,
.LeaseCompareTitle,
.LeaseCostIntro h3{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-compact-size);
  font-weight:var(--sf-type-title-weight);
  line-height:var(--sf-type-compact-line);
  letter-spacing:.045em;
}

.RentalPlanCard h3,
.RentalTrialPanelHead h3,
.RentalNoticeItem h3,
.RentalUseCard h3,
.RentalProcessItem h3,
.LeaseNextStep h3,
.LeaseMeritCard h3,
.LeaseIndustryContent h3,
.LeaseProcessItem h3{
  font-family:var(--sf-font-serif);
  font-size:21px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.64;
  letter-spacing:.04em;
}

/* --------------------------------------------------------------------
   CASES / SALON / DEALERS
   -------------------------------------------------------------------- */
.CasesPerspective_card h3,
.ExperienceIntro_card h3,
.ExperienceValue_card h3,
.ExperienceMenu_policy h3,
.ExperienceMenu_card h3,
.ExperienceFlow_step h3,
.ExperienceConsult_card h3,
.DealersValue_card h3,
.DealersPartner_list h3,
.DealersNetwork_card h3,
.DealersMerit_matrix h3,
.DealersSupport_grid h3,
.DealersFlow_steps h3,
.DealersContact_card h3{
  font-family:var(--sf-font-serif);
  font-size:20px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
  letter-spacing:.04em;
}

.ExperienceAccess_info h3,
.ExperiencePartner_card h3,
.ExperienceRoute_head h3,
.DealersModel_grid h3,
.DealersAlternative_title{
  font-family:var(--sf-font-serif);
  font-size:var(--sf-type-compact-size);
  font-weight:var(--sf-type-title-weight);
  line-height:1.58;
  letter-spacing:.04em;
}

.CasesArea_head h3{
  font-family:var(--sf-font-serif);
  font-weight:var(--sf-type-title-weight);
}

/* --------------------------------------------------------------------
   FAQ / EVIDENCE
   -------------------------------------------------------------------- */
.FaqCtaCard h3,
.EvidenceDisclaimerBox h2,
.EvidenceEditorialNote h2{
  font-family:var(--sf-font-serif);
  font-weight:var(--sf-type-title-weight);
  letter-spacing:.04em;
}

.FaqCtaCard h3{font-size:22px;line-height:1.65;}
.EvidenceDisclaimerBox h2{font-size:24px;line-height:1.65;}
.EvidenceEditorialNote h2{font-size:var(--sf-type-compact-size);line-height:1.62;}

.EvidenceScopeStep h3,
.EvidenceAreaMagazine .EvidenceAreaCard h3,
.EvidenceSafetyCard h3,
.EvidenceFeaturedCard h3{
  font-family:var(--sf-font-serif);
  font-weight:var(--sf-type-title-weight);
}

/* --------------------------------------------------------------------
   LONG-FORM HYDROGEN ARTICLE
   Dense editorial pages use one step below landing-page H2.
   -------------------------------------------------------------------- */
.HydrogenH2,
.HydrogenSectionIntro .HydrogenH2,
.HydrogenInhalationDetail .HydrogenH2,
.HydrogenSummaryTitle{
  font-family:var(--sf-font-serif);
  font-size:36px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.58;
  letter-spacing:.045em;
}

.HydrogenH2_Small{
  font-size:24px;
  line-height:1.65;
}

.HydrogenInhalationDetail .SfBlockTitle,
.HydrogenPhilosophyBody h3,
.HydrogenPolicyBody h3,
.HydrogenReasonBody h3,
.HydrogenConditionBody h3,
.HydrogenDifferenceBody h3,
.HydrogenSafetyBody h3,
.HydrogenCaseBody h3,
.HydrogenCautionBody h3,
.HydrogenEvidenceBody h3,
.HydrogenReadNextItem h3,
.HydrogenSafetyCheckTitle,
.HydrogenRiskCostTitle,
.HydrogenKeywordBody h3,
.HydrogenMisinformationBody h3,
.HydrogenIssueEditorialItem h3,
.HydrogenDecisionGrid article h3,
.HydrogenPhilosophyEditorialGrid article h3,
.HydrogenPolicyEditorialGrid article h3,
.HydrogenFinalEditorialGrid article h3{
  font-family:var(--sf-font-serif);
  font-size:22px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.65;
  letter-spacing:.04em;
}

.HydrogenReferenceHead h3,
.HydrogenReferenceEditorialHead h3,
.HydrogenMisinformationBottomNote h3,
.HydrogenMisinformationClose h3,
.HydrogenEvidenceClose h3,
.HydrogenEditorialCloseBox h3,
.HydrogenFAQIntro h3,
.TruthArticleCTA_title{
  font-family:var(--sf-font-serif);
  font-size:28px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
  letter-spacing:.04em;
}

/* --------------------------------------------------------------------
   NEWS / JOURNAL
   -------------------------------------------------------------------- */
.JournalArticleTitle{
  font-family:var(--sf-font-serif);
  font-size:40px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.56;
  letter-spacing:.045em;
}

.JournalArticleEndTitle,
.JournalArticleNextHead h2{
  font-family:var(--sf-font-serif);
  font-size:30px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.6;
  letter-spacing:.04em;
}

.JournalArticleBody .Newsdetailh2{
  font-family:var(--sf-font-serif);
  font-size:30px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
  letter-spacing:.05em;
}

.JournalArticleBody .Newsdetailh3{
  font-family:var(--sf-font-serif);
  font-size:20px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.72;
  letter-spacing:.045em;
}

/* --------------------------------------------------------------------
   ROI
   Utility-heavy page: compact editorial tier by design.
   -------------------------------------------------------------------- */
.RoiPage h2{
  font-family:var(--sf-font-serif);
  font-size:30px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.6;
  letter-spacing:.04em;
}

.RoiPage h3{
  font-size:18px;
  font-weight:500;
  line-height:1.65;
}

/* --------------------------------------------------------------------
   APPLICATION / FINANCE
   -------------------------------------------------------------------- */
.FinanceApplicationIntro h1{
  font-family:var(--sf-font-serif);
  font-size:40px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.55;
  letter-spacing:.05em;
}

.FinanceApplicationNotice h2,
.FinanceApplicationError h2,
.FinanceApplicationComplete h2,
.ApplicationConfirmCardHead h2,
.ApplicationCompleteCard h2{
  font-family:var(--sf-font-serif);
  font-size:30px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.6;
  letter-spacing:.045em;
}

.FinanceApplicationBlock_head h2,
.ApplicationConfirmGroupHead h3,
.ApplicationCompleteNotice h3,
.ApplicationGuide h3{
  font-family:var(--sf-font-serif);
  font-size:22px;
  font-weight:var(--sf-type-title-weight);
  line-height:1.62;
  letter-spacing:.04em;
}

/* ====================================================================
   TABLET
   ==================================================================== */
@media screen and (max-width:1080px){
  :root{
    --sf-type-eyebrow-size:11px;
    --sf-type-eyebrow-spacing:.28em;
    --sf-type-section-size:34px;
    --sf-type-section-line:1.55;
    --sf-type-compact-size:27px;
    --sf-type-block-size:24px;
    --sf-type-block-small-size:21px;
    --sf-type-card-size:20px;
    --sf-type-lead-size:14px;
    --sf-type-lead-line:2.05;
    --sf-type-lead-spacing:.04em;
  }

  .LowerHero .LowerHero_title{font-size:38px;line-height:1.45;letter-spacing:.05em;}
  .LowerHero .LowerHero_lead{font-size:14px;line-height:2.02;}


  .GuideMetricCard h3,
  .GuideCriteriaCard h3,
  .GuideUsageCard h3,
  .GuideDecisionCard h3,
  .BusinessTypeGrid h3,
  .BusinessTrustGrid h3,
  .BusinessPlanGrid h3,
  .BusinessRoiCta h3,
  .BusinessFlowList h3,
  .RentalPlanCard h3,
  .RentalTrialPanelHead h3,
  .RentalNoticeItem h3,
  .RentalUseCard h3,
  .RentalProcessItem h3,
  .LeaseNextStep h3,
  .LeaseMeritCard h3,
  .LeaseIndustryContent h3,
  .LeaseProcessItem h3,
  .CasesPerspective_card h3,
  .ExperienceIntro_card h3,
  .ExperienceValue_card h3,
  .ExperienceMenu_policy h3,
  .ExperienceMenu_card h3,
  .ExperienceFlow_step h3,
  .ExperienceConsult_card h3,
  .DealersValue_card h3,
  .DealersPartner_list h3,
  .DealersNetwork_card h3,
  .DealersMerit_matrix h3,
  .DealersSupport_grid h3,
  .DealersFlow_steps h3,
  .DealersContact_card h3{
    font-size:19px;
  }

  .HydrogenH2,
  .HydrogenSectionIntro .HydrogenH2,
  .HydrogenInhalationDetail .HydrogenH2,
  .HydrogenSummaryTitle{font-size:31px;line-height:1.58;}

  .HydrogenInhalationDetail .SfBlockTitle,
  .HydrogenPhilosophyBody h3,
  .HydrogenPolicyBody h3,
  .HydrogenReasonBody h3,
  .HydrogenConditionBody h3,
  .HydrogenDifferenceBody h3,
  .HydrogenSafetyBody h3,
  .HydrogenCaseBody h3,
  .HydrogenCautionBody h3,
  .HydrogenEvidenceBody h3,
  .HydrogenReadNextItem h3,
  .HydrogenSafetyCheckTitle,
  .HydrogenRiskCostTitle,
  .HydrogenKeywordBody h3,
  .HydrogenMisinformationBody h3{font-size:20px;}

  .JournalArticleTitle{font-size:34px;line-height:1.58;}
  .JournalArticleEndTitle,
  .JournalArticleNextHead h2{font-size:27px;}
  .JournalArticleBody .Newsdetailh2{font-size:27px;}
  .JournalArticleBody .Newsdetailh3{font-size:19px;}

  .RoiPage h2{font-size:26px;}
  .RoiPage h3{font-size:17px;}

  .FinanceApplicationIntro h1{font-size:34px;}
  .FinanceApplicationNotice h2,
  .FinanceApplicationError h2,
  .FinanceApplicationComplete h2,
  .ApplicationConfirmCardHead h2,
  .ApplicationCompleteCard h2{font-size:27px;}
  .FinanceApplicationBlock_head h2,
  .ApplicationConfirmGroupHead h3,
  .ApplicationCompleteNotice h3,
  .ApplicationGuide h3{font-size:20px;}
}

/* ====================================================================
   SMARTPHONE
   ==================================================================== */
@media screen and (max-width:767px){
  :root{
    --sf-type-eyebrow-size:9.5px;
    --sf-type-eyebrow-line:1.5;
    --sf-type-eyebrow-spacing:.22em;
    --sf-type-section-size:26px;
    --sf-type-section-line:1.55;
    --sf-type-section-spacing:.04em;
    --sf-type-compact-size:23px;
    --sf-type-compact-line:1.6;
    --sf-type-block-size:21px;
    --sf-type-block-small-size:19px;
    --sf-type-card-size:18px;
    --sf-type-card-line:1.62;
    --sf-type-lead-size:13.5px;
    --sf-type-lead-line:2;
    --sf-type-lead-spacing:.03em;
  }

  .LowerHero .LowerHero_title{
    font-size:clamp(25px,7.5vw,29px);
    line-height:1.48;
    letter-spacing:.035em;
  }
  .LowerHero-spCompact .LowerHero_title{
    font-size:clamp(24px,7vw,28px);
  }
  .LowerHero-evidence.LowerHero-spCompact .LowerHero_title{
    font-size:clamp(22px,6.3vw,28px);
    line-height:1.58;
    letter-spacing:.02em;
  }
  .LowerHero .LowerHero_lead{
    font-size:13px;
    line-height:1.95;
    letter-spacing:.025em;
  }
  .LowerHero-evidence.LowerHero-spCompact .LowerHero_lead{
    font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  }


  .AboutPrincipleTitle,
  .AboutMissionAudienceTitle,
  .AboutDesignValueTitle,
  .AboutOriginValueTitle,
  .AboutEvidenceInfoTitle,
  .AboutJapanStepTitle,
  .AboutMessageTitle{font-size:18px;}
  .AboutMessageClosing h3{font-size:23px;}

  .GuideMetricCard h3,
  .GuideCriteriaCard h3,
  .GuideUsageCard h3,
  .GuideDecisionCard h3,
  .BusinessTypeGrid h3,
  .BusinessTrustGrid h3,
  .BusinessPlanGrid h3,
  .BusinessRoiCta h3,
  .BusinessFlowList h3,
  .RentalPlanCard h3,
  .RentalTrialPanelHead h3,
  .RentalNoticeItem h3,
  .RentalUseCard h3,
  .RentalProcessItem h3,
  .LeaseNextStep h3,
  .LeaseMeritCard h3,
  .LeaseIndustryContent h3,
  .LeaseProcessItem h3,
  .CasesPerspective_card h3,
  .ExperienceIntro_card h3,
  .ExperienceValue_card h3,
  .ExperienceMenu_policy h3,
  .ExperienceMenu_card h3,
  .ExperienceFlow_step h3,
  .ExperienceConsult_card h3,
  .DealersValue_card h3,
  .DealersPartner_list h3,
  .DealersNetwork_card h3,
  .DealersMerit_matrix h3,
  .DealersSupport_grid h3,
  .DealersFlow_steps h3,
  .DealersContact_card h3{font-size:17px;line-height:1.65;}

  .ExperienceAccess_info h3,
  .ExperiencePartner_card h3,
  .ExperienceRoute_head h3,
  .DealersModel_grid h3,
  .DealersAlternative_title{font-size:23px;}

  .FaqCtaCard h3{font-size:18px;}
  .EvidenceDisclaimerBox h2{font-size:20px;}
  .EvidenceEditorialNote h2{font-size:23px;}

  .HydrogenH2,
  .HydrogenSectionIntro .HydrogenH2,
  .HydrogenInhalationDetail .HydrogenH2,
  .HydrogenSummaryTitle{font-size:25px;line-height:1.6;}
  .HydrogenH2_Small{font-size:21px;}

  .HydrogenInhalationDetail .SfBlockTitle,
  .HydrogenPhilosophyBody h3,
  .HydrogenPolicyBody h3,
  .HydrogenReasonBody h3,
  .HydrogenConditionBody h3,
  .HydrogenDifferenceBody h3,
  .HydrogenSafetyBody h3,
  .HydrogenCaseBody h3,
  .HydrogenCautionBody h3,
  .HydrogenEvidenceBody h3,
  .HydrogenReadNextItem h3,
  .HydrogenSafetyCheckTitle,
  .HydrogenRiskCostTitle,
  .HydrogenKeywordBody h3,
  .HydrogenMisinformationBody h3{font-size:18px;line-height:1.68;}

  .HydrogenReferenceHead h3,
  .HydrogenReferenceEditorialHead h3,
  .HydrogenMisinformationBottomNote h3,
  .HydrogenMisinformationClose h3,
  .HydrogenEvidenceClose h3,
  .HydrogenEditorialCloseBox h3,
  .HydrogenFAQIntro h3,
  .TruthArticleCTA_title{font-size:22px;line-height:1.65;}

  .JournalArticleTitle{font-size:28px;line-height:1.62;}
  .JournalArticleEndTitle,
  .JournalArticleNextHead h2{font-size:23px;}
  .JournalArticleBody .Newsdetailh2{font-size:24px;line-height:1.65;}
  .JournalArticleBody .Newsdetailh3{font-size:18px;line-height:1.72;}

  .RoiPage h2{font-size:23px;line-height:1.62;}
  .RoiPage h3{font-size:16px;}

  .FinanceApplicationIntro h1{font-size:28px;line-height:1.58;}
  .FinanceApplicationNotice h2,
  .FinanceApplicationError h2,
  .FinanceApplicationComplete h2,
  .ApplicationConfirmCardHead h2,
  .ApplicationCompleteCard h2{font-size:23px;}
  .FinanceApplicationBlock_head h2,
  .ApplicationConfirmGroupHead h3,
  .ApplicationCompleteNotice h3,
  .ApplicationGuide h3{font-size:18px;}
}