@charset "utf-8";
/* =========================================================================
   融雪マット — Product Page Stylesheet
   SUWA Christy / KODENSHI DH
   白基調 × ブルー（雪・力強さ）の単色トーン。硬質・現場的なスペックシート寄りの表現。
   MYSAON（mysaon.css）とは別トーン：カードは左太線アクセント＋小さめ角丸、FAQはフラット区切りリスト。
   JSは共通 sc-scripts.php の IntersectionObserver（.reveal）のみに依存。ページ専用JSなし。
   ========================================================================= */

:root{
  --c-main:   #0B5A87;   /* 深い青（メインアクセント） */
  --c-accent: #67a9cb;   /* 明るい青 */
  --c-ice-light:#0c4363;   /* 濃紺（CONTROL/RUNNING COSTの帯） */
  --c-navy:   #0F2740;   /* 最も濃い青（PERFORMANCE/QUALITY等・薄青ゾーンとの対比を強化） */
  --c-base:   #FFFFFF;
  --c-sub:    #EDF5FB;   /* 薄青（カード内背景・FAQ等） */
  --c-sec:    #e9f6ff;   /* 薄青（セクション背景） */
  --c-text:   #16222B;
  --c-muted:  #5C6B76;
  --c-line:   #DCE6EC;
  --grad:      linear-gradient(135deg, var(--c-main) 0%, var(--c-accent) 100%);
  --grad-cta:  linear-gradient(115deg, #2F9BD6 0%, #0B3B57 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1200px;
  --pad-sec: clamp(64px, 9vw, 120px);
  --radius-card: 6px;   /* MYSAON(10-16px)より小さい角丸＝硬質トーン */
  --ff-jp: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: "Inter", "Montserrat", "Noto Sans JP", sans-serif;
}

/* ---------- reset / base ---------- */
.ysm *,.ysm *::before,.ysm *::after{ box-sizing:border-box; }
.ysm{
  margin:0; padding:0;
  background:var(--c-base); color:var(--c-text);
  font-family:var(--ff-jp);
  font-size:16px; line-height:1.85; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.ysm main img{ max-width:100%; height:auto; display:block; }
.ysm main a{ color:inherit; text-decoration:none; margin-bottom:10px; }
.ysm main ul,.ysm main ol{ list-style:none; margin:0; padding:0; }
.ysm main h1,.ysm main h2,.ysm main h3,.ysm main h4,.ysm main p{ margin:0; }
.ysm ::selection{ background:var(--c-main); color:#fff; }
.ysm main table{ border-collapse:collapse; }

/* 下限14px safety net（共通CSSに飲まれ対策・main配下のみに限定して共有ヘッダー/フッターへの波及を防ぐ） */
.ysm main p,.ysm main li,.ysm main dd,.ysm main dt,.ysm main td,.ysm main th,.ysm main summary,.ysm main label{ font-size:1rem; }
.ysm main small{ font-size:14px; }

.ysm__inner{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.ysm__eyebrow{
  display:inline-block; font-family:var(--ff-en);
  font-size:.875rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--c-main); font-weight:700; margin-bottom:18px;
  position:relative; padding-left:46px;
}
.ysm__eyebrow::before{
  content:""; position:absolute; left:0; top:50%; width:32px; height:2px;
  background:var(--c-accent);
}

.ysm-h2{
  font-family:var(--ff-jp); font-weight:800;
  font-size:clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.4; letter-spacing:.01em;
}
.ysm-h2 .hl{ color:var(--c-main); }
.ysm-lead-one{ margin-top:14px; color:var(--c-muted); font-size:1.02rem; line-height:1.9; max-width:640px; }

.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* 画像プレースホルダ（実画像が無い間も崩れないように・.ph は他ページと共通仕様） */
.ph{ position:relative; background:none; overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph img.img-missing{ display:none; }
.ph.is-empty::after{
  content:"IMAGE"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-en); letter-spacing:.3em; font-size:.875rem; color:#9FB4BF;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(14,127,191,.10), transparent 60%),
    repeating-linear-gradient(45deg, #EEF5F8 0 14px, #F4F9FB 14px 28px);
}

.tentative{ font-size:.875rem; color:#a64237; }

/* =========================================================================
   共有ヘッダー/フッターの保護（本番の sc-header.php / sc-footer.php を
   そのまま get_template_part で使う。.ysm main 配下にリセットを限定した上で、
   万一 body 直下のロゴ等に波及するケースだけ個別に打ち消す＝MYSAON踏襲）
   ========================================================================= */
.ysm .sc-logo img{ height:60px; width:auto; }
.ysm .sc-footer__logo img{ height:48px; width:auto; }
@media (min-width:769px){ .ysm .sc-footer__logo img{ height:80px; } }
@media (max-width:768px){ .ysm .sc-logo img{ height:55px; } .ysm .sc-footer__logo img{ height:60px; } }
@media (max-width:900px){ .ysm .sc-gnav__head img{ height:54px; width:auto; max-width:none; } }

/* =========================================================================
   [01] HERO
   ========================================================================= */
.ysm-hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:160px 20px 120px; overflow:hidden;
}
.ysm-hero__bg{ position:absolute; inset:0; z-index:0; }
.ysm-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.85; }
.ysm-hero::before{
  content:""; position:absolute; z-index:1; width:70vw; height:70vw; max-width:900px; max-height:900px;
  top:-14%; right:-12%; border-radius:50%;
  background:radial-gradient(circle, rgba(47,155,214,.34) 0%, rgba(47,155,214,0) 62%);
  filter:blur(20px); pointer-events:none;
}
.ysm-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%; z-index:1;
  background:linear-gradient(to top, #0A1826, transparent); pointer-events:none;
}
.ysm-hero__content{ position:relative; z-index:2; }
.ysm-hero__sub{
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.34em; text-transform:uppercase;
  color:#066ea8; font-weight:600; opacity:1; margin-bottom:14px;
}
.ysm-hero__title{
  font-family:var(--ff-jp); font-weight:800;
  font-size:clamp(2.6rem, 8vw, 5.6rem); line-height:1.15; letter-spacing:.02em;
  color:#fff; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.ysm-hero__line{ width:0; height:2px; background:var(--grad-cta); margin:30px auto; max-width:120px; }
.ysm-hero.is-in .ysm-hero__line{ width:120px; transition:width 1.1s var(--ease) .3s; }
.ysm-hero__catch{
  font-weight:700; letter-spacing:.04em;
  line-height:1.55; color:#fff; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.ysm-hero__content .ysm-hero__catch{ font-size:2rem; }
.ysm-hero__br--sp{ display:none; }
.ysm-hero__lux{
  font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:700; letter-spacing:.03em;
  margin:1.1rem 0 0; color:#D2E9F6;
}

/* ヒーロー：チェックマーク付きポイント（PC=横並び／SP=縦積み・左寄せ） */
.ysm-hero__points{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 26px; margin:1.5rem 0 0; padding:0; list-style:none;
  margin-top:20px;
}
.ysm-hero__points li{
  font-size:clamp(.95rem, 1.6vw, 1.1rem); font-weight:600; letter-spacing:.02em;
  line-height:1.7; color:var(--c-text); text-align:left;
  display:flex; align-items:center; gap:.5em;
  background:#fff; border-radius:999px; padding:8px 18px;
}
.ysm-hero__points li i{
  color:var(--c-accent); font-size:1.1em;
}
@media (max-width:768px){
  .ysm-hero__points{
    flex-direction:column; align-items:flex-start;
    gap:9px; width:fit-content; margin-left:auto; margin-right:auto;
  }
}
.ysm-hero__scroll{
  position:absolute; z-index:3; right:clamp(20px,5vw,56px); bottom:38px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.28em; color:#9FB4BF; text-transform:uppercase;
}
.ysm-hero__scroll .bar{ position:relative; width:1px; height:60px; background:rgba(255,255,255,.2); overflow:hidden; }
.ysm-hero__scroll .bar::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--grad-cta);
  animation:ysmScrollFlow 2.1s var(--ease) infinite;
}
@keyframes ysmScrollFlow{ 0%{top:-45%} 100%{top:100%} }
@media (max-width:768px){ .ysm-hero__scroll{ left:50%; right:auto; transform:translateX(-50%); } .ysm-hero__scroll span{ display:none; } }

/* SPEC AT A GLANCE（ヒーロー左下） */
.ysm-hero__spec{
  position:absolute; z-index:3; left:clamp(20px,5vw,56px); bottom:38px;
  max-width:min(420px,60vw); text-align:left;
}
.ysm-hero__spec-eyebrow{
  display:inline-block; font-family:var(--ff-en); font-weight:700;
  font-size:.875rem; letter-spacing:.2em; text-transform:uppercase;
  color:#9FB4BF; margin-bottom:10px; padding-bottom:6px; position:relative;
}
.ysm-hero__spec-eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--c-accent);
}
.ysm-hero__spec-list{ display:flex; flex-direction:column; gap:6px; }
.ysm-hero__spec-list li{ color:#fff; font-size:.98rem; font-weight:600; letter-spacing:.02em; }
.ysm-hero__spec-list li b{ color:var(--c-accent); font-weight:800; margin-right:.4em; }
@media (max-width:768px){
  .ysm-hero__spec{ position:static; left:auto; bottom:auto; max-width:100%; margin:26px auto 0; text-align:center; }
  .ysm-hero__spec-eyebrow::after{ left:50%; transform:translateX(-50%); }
}

/* breadcrumb */
.ysm-bc{ border-bottom:1px solid var(--c-line); background:var(--c-base); }
.ysm-bc ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:28px 0; font-size:.875rem; color:var(--c-muted); }
.ysm-bc li::after{ content:"/"; margin-left:8px; color:#444; }
.ysm-bc li:last-child::after{ content:none; }
.ysm-bc a{ color:var(--c-muted); transition:color .3s; }
.ysm-bc a:hover{ color:var(--c-main); }
.ysm-bc li[aria-current]{ color:var(--c-text); }

/* =========================================================================
   [02] PROBLEM
   ========================================================================= */
.ysm-problem{ padding:calc(var(--pad-sec) * .75) 0; background:var(--c-base); }
.ysm-problem__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start;
}
@media (max-width:900px){ .ysm-problem__grid{ grid-template-columns:1fr; gap:36px; } }

/* 左：雪の結晶を背景ウォーターマークに */
.ysm-problem__main{ position:relative; padding:44px 0 0; }
.ysm-problem__watermark{
  position:absolute; z-index:0; top:-40px; left:4%;
  width:clamp(240px,30vw,380px); height:auto;
  pointer-events:none; user-select:none;
}
@media (max-width:900px){ .ysm-problem__watermark{ width:clamp(200px,45vw,280px); left:0; top:-24px; } }
.ysm-problem__main-inner{ position:relative; z-index:1; }
.ysm-problem__rule{
  border:0; border-top:2px solid var(--c-navy); margin:30px 0 26px; max-width:520px;
}
.ysm-problem__label{
  font-size:1.15rem; font-weight:800; color:var(--c-main); line-height:1.5; margin:0 0 10px;
}
.ysm-problem__text{ font-weight:400; line-height:1.9; color:var(--c-text); margin:0; }
.ysm-problem__text b{ font-weight:700; color:var(--c-main); }
.ysm-problem__source{
  margin:16px 0 0; font-size:.8125rem; line-height:1.7; color:#9AA7B1;
}

/* 右：濃紺ボックスに他の手段 */
.ysm-problem__others{
  background:var(--c-navy); border-radius:14px; padding:34px 34px 12px; color:#fff;
}
/* 左右で対になる手段ラベル（人の手で／設備で） */
.ysm-problem__means-eyebrow{
  display:block; font-family:var(--ff-en); font-size:.75rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--c-accent); margin-bottom:14px;
}
.ysm-problem__means-eyebrow em{
  display:inline-block; margin-left:.9em;
  font-family:var(--ff-jp); font-style:normal; font-size:.8125rem; font-weight:700;
  letter-spacing:.06em; text-transform:none; color:var(--c-muted);
}
/* 右（濃紺ボックス内）は明度を上げる */
.ysm-problem__means-eyebrow--light{ color:#7E93A8; margin-bottom:22px; }
.ysm-problem__means-eyebrow--light em{ color:#9FB3C4; }
.ysm-problem__other{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.14); }
.ysm-problem__other:last-child{ border-bottom:none; }
.ysm-problem__other-label{
  font-size:1.05rem; font-weight:800; color:#fff; line-height:1.5; margin:0 0 8px;
}
.ysm-problem__other-text{ margin:0; font-size:.875rem; line-height:1.85; color:#BFCEDA; }

/* =========================================================================
   [03] INTRODUCTION
   ========================================================================= */
.ysm-intro{ position:relative; padding:var(--pad-sec) 0; background:var(--c-base); overflow:hidden; }
.ysm-intro__grid{ display:grid; grid-template-columns:1fr; gap:34px; position:relative; z-index:1; }
.ysm-intro__body{ color:#425058; font-size:1.03rem; line-height:2; }
.ysm-intro__body + .ysm-intro__body{ margin-top:1.1em; }
.ysm-intro__block + .ysm-intro__block{ margin-top:1.6em; }
.ysm-intro__subhead{ font-size:1.15rem; font-weight:700; color:var(--c-text); line-height:1.6; margin:0 0 .4em; }
.ysm-intro__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.ysm-intro__tags span{
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.1em; color:var(--c-main);
  border:1px solid var(--c-line); border-radius:3px; padding:7px 14px; background:#fff;
}
.ysm-intro__media{ border-radius:var(--radius-card); overflow:hidden; }
@media (min-width:880px){
  .ysm-intro__grid{ grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; max-width:var(--maxw); }
}

/* =========================================================================
   [04] POINT（4カード）— スペックシート調：左太線＋大きな背景ナンバー
   ========================================================================= */
.ysm-point{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.ysm-point__head{ margin-bottom:52px; }
.ysm-point__grid{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--c-line); border:1px solid var(--c-line); }
.ysm-point__card{
  position:relative; padding:34px 30px 34px 38px; background:#fff;
  border-left:4px solid var(--c-main); overflow:hidden;
  display:flex; flex-direction:column; gap:22px;
}
.ysm-point__card::after{
  content:attr(data-no); position:absolute; right:18px; top:8px;
  font-family:var(--ff-en); font-weight:800; font-size:5rem; line-height:1;
  color:var(--c-sub); z-index:0; pointer-events:none;
}
.ysm-point__body{ flex:1; position:relative; z-index:1; }
.ysm-point__no{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.2em; color:var(--c-main); font-weight:700; }
.ysm-point__en{ font-family:var(--ff-en); font-weight:700; font-size:1.3rem; color:var(--c-text); margin:10px 0 4px; }
.ysm-point__icon{ font-size:1.6rem; color:var(--c-accent); margin:6px 0 18px; }
.ysm-point__title{ font-size:1.14rem; font-weight:800; line-height:1.55; margin-bottom:12px; }
.ysm-point__desc{ color:#4C5A62; font-size:.96rem; line-height:1.9; }
.ysm-point__media{ flex:0 0 auto; position:relative; z-index:1; }
.ysm-point__media img{ width:100%; height:auto; border-radius:4px; background:#F4F8FA; }
@media (min-width:769px){
  /* 写真は必ず右。背景の大きな番号（::after）と重ならないよう本文側に余白を確保 */
  .ysm-point__card{ flex-direction:row; align-items:flex-start; gap:34px; padding:38px 34px 38px 42px; }
  .ysm-point__body{ flex:1 1 auto; min-width:0; padding-right:70px; }
  .ysm-point__media{ flex:0 0 34%; max-width:34%; order:2; }
  /* 番号は写真の外（本文右上）に置く */
  .ysm-point__card::after{ right:calc(34% + 46px); }
}

/* =========================================================================
   [05] PERFORMANCE（新規・数値訴求）
   ========================================================================= */
.ysm-perf{ padding:var(--pad-sec) 0; background:var(--c-navy); color:#fff; }
.ysm-perf .ysm__eyebrow{ color:var(--c-accent); }
.ysm-perf .ysm__eyebrow::before{ background:var(--c-accent); }
.ysm-perf .ysm-h2{ color:#fff; }
.ysm-perf__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); margin-top:44px; }
.ysm-perf__card{ background:#0F2740; padding:34px 26px; display:flex; flex-direction:column; gap:10px; border-top:2px solid var(--c-accent); }
.ysm-perf__label{ font-size:.875rem; color:#9FC0DC; font-weight:600; letter-spacing:.04em; }
.ysm-perf__value{ font-family:var(--ff-en); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; color:#fff; letter-spacing:.01em; }
.ysm-perf__value .u{ font-size:.55em; font-weight:600; margin-left:.15em; color:#9FC0DC; }
.ysm-perf__note{ margin-top:22px; color:#9FC0DC; font-size:.875rem; line-height:1.8; }
@media (max-width:900px){ .ysm-perf__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ysm-perf__grid{ grid-template-columns:1fr; } }

/* =========================================================================
   [06] COMPARISON（表）
   ========================================================================= */
.ysm-comp{ padding:var(--pad-sec) 0; background:var(--c-base); }
.ysm-comp__head{ margin-bottom:40px; }
/* 見出しの右に利用イメージを並べる */
.ysm-comp__intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; margin-bottom:40px; }
.ysm-comp__intro .ysm-comp__head{ margin-bottom:0; }
.ysm-comp__intro-media{ margin:0; min-height:220px; }
@media (max-width:900px){ .ysm-comp__intro{ grid-template-columns:1fr; gap:24px; } }
.ysm-comp__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-line); }
.ysm-comp__table{ width:100%; min-width:640px; border-collapse:collapse; }
.ysm-comp__table th,.ysm-comp__table td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--c-line); font-size:.96rem; line-height:1.7; }
.ysm-comp__table thead th{ background:var(--c-navy); color:#fff; font-weight:800; }
.ysm-comp__table tbody th{ font-weight:700; color:var(--c-muted); width:24%; background:#FAFCFD; }
.ysm-comp__table td:nth-child(2){ color:#8A96A0; }
.ysm-comp__table td:nth-child(3){ color:var(--c-main); font-weight:700; }
.ysm-comp__table tbody tr:last-child td,.ysm-comp__table tbody tr:last-child th{ border-bottom:none; }

/* =========================================================================
   [07] SCENE — アイコンは円ではなく角チップに（MYSAONは円バッジ）
   ========================================================================= */
.ysm-scene{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.ysm-scene__head{ margin-bottom:50px; }
.ysm-scene__group + .ysm-scene__group{ margin-top:50px; padding-top:50px; border-top:1px solid var(--c-line); }
.ysm-scene__glabel-wrap{ margin-bottom:26px; }
.ysm-scene__glabel{ display:inline-block; font-family:var(--ff-en); font-weight:800; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-main); }
.ysm-scene__gsub{ margin-top:6px; color:var(--c-text); font-size:1rem; font-weight:700; }
.ysm-scene__group--biz .ysm-scene__glabel,
.ysm-scene__group--biz .ysm-scene__gsub{ color:var(--c-navy); }
.ysm-scene__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ysm-scene__item{
  background:#fff; border:1px solid var(--c-line); border-top:3px solid var(--scene-border, var(--c-main));
  padding:26px 22px; display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
}
/* 写真はカード最上部に密着させる（上と左右のパディングを打ち消す） */
.ysm-scene__photo{
  margin:-26px -22px 4px; background:none; aspect-ratio:16/10; overflow:hidden;
}
.ysm-scene__photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ysm-scene__photo.ph::after{ content:none !important; }
.ysm-scene__group:not(.ysm-scene__group--biz) .ysm-scene__grid{ --scene-border:var(--c-main); }
.ysm-scene__group--biz .ysm-scene__grid{ --scene-border:var(--c-navy); }
/* MYSAON の scene__icon と同じ作り（円形＋ホバーで反転） */
.ysm-scene__icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:rgba(47,155,214,.12); color:var(--c-main); font-size:1.35rem;
  transition:transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.ysm-scene__group--biz .ysm-scene__icon{ background:#EBF2FA; color:var(--c-navy); }
/* ホバーはマウス環境（PC）のみ。タッチ端末では発火させない */
@media (hover:hover) and (pointer:fine){
  .ysm-scene__photo img{ transition:transform .6s var(--ease); }
  .ysm-scene__item:hover .ysm-scene__photo img{ transform:scale(1.08); }
  .ysm-scene__item:hover .ysm-scene__icon{
    transform:translateY(-4px) scale(1.06); background:var(--grad); color:#fff;
  }
  .ysm-scene__group--biz .ysm-scene__item:hover .ysm-scene__icon{ background:var(--c-navy); color:#fff; }
}
.ysm-scene__label{ font-size:1.03rem; font-weight:800; }
.ysm-scene__note{ color:#5C6B76; font-size:.9rem; line-height:1.75; }
.ysm-scene__hint{ display:none; font-size:.875rem; color:#8A96A0; text-align:center; margin-top:10px; }
@media (max-width:900px){ .ysm-scene__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .ysm-scene__grid{ display:flex; grid-template-columns:none; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:12px; padding-bottom:8px; }
  .ysm-scene__item{ flex:0 0 82%; scroll-snap-align:center; }
  .ysm-scene__hint{ display:block; }
}

/* =========================================================================
   [08] CONTROL + [09] RUNNING COST（同背景帯で連結）
   ========================================================================= */
.ysm-ctrl-cost{ padding:var(--pad-sec) 0; background:var(--c-ice-light); }
.ysm-ctrl-cost .ysm-h2, .ysm-ctrl-cost .ysm__eyebrow{ color:#fff; }
.ysm-ctrl-cost .ysm__eyebrow::before{ background:#fff; }
.ysm-ctrl{ margin-bottom:calc(var(--pad-sec) * .7); }
.ysm-ctrl__head, .ysm-cost__head{ margin-bottom:36px; }
.ysm-ctrl__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ysm-ctrl__card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-card); padding:28px 24px; }
.ysm-ctrl__icon{ font-size:1.4rem; color:var(--c-main); margin-bottom:14px; }
.ysm-ctrl__title{ font-weight:800; font-size:1.02rem; margin-bottom:10px; }
.ysm-ctrl__value{ color:#4C5A62; font-size:.94rem; line-height:1.8; }
@media (max-width:900px){ .ysm-ctrl__grid{ grid-template-columns:1fr; } }

.ysm-cost__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ysm-cost__card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-card); padding:30px 24px; text-align:center; }
.ysm-cost__label{ font-size:.9rem; color:var(--c-muted); font-weight:600; margin-bottom:10px; }
.ysm-cost__value{ font-family:var(--ff-en); font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:800; color:var(--c-main); }
.ysm-cost__note{ margin-top:22px; color:#5C6B76; font-size:.875rem; line-height:1.8; }
.ysm-cost__compare{ margin-top:16px; background:#fff; border:1px dashed var(--c-line); border-radius:var(--radius-card); padding:16px 20px; color:#4C5A62; font-size:.9rem; line-height:1.8; }
@media (max-width:900px){ .ysm-cost__grid{ grid-template-columns:1fr; } }

/* =========================================================================
   [10] LINEUP
   ========================================================================= */
.ysm-lineup{ padding:var(--pad-sec) 0; background:var(--c-base); }
.ysm-lineup__intro-grid{ margin-bottom:48px; }
.ysm-lineup__sub{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.14em; color:var(--c-muted); font-weight:700; margin-bottom:26px; text-transform:uppercase; }
/* 本体（クリスティウォーマー）はオプションより一段強く見せる */
.ysm-lineup__sub--main{
  position:relative; color:var(--c-main); margin-bottom:22px;
  padding:0 0 12px 16px; border-bottom:2px solid var(--c-accent);
}
.ysm-lineup__sub--main::before{
  content:""; position:absolute; left:0; top:.15em; width:5px; height:1.5em;
  background:var(--c-accent); border-radius:2px;
}
.ysm-lineup .ysm-lineup__sub--main{ font-size:1.4rem; letter-spacing:.06em; margin-bottom:15px; }
.ysm-lineup__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:56px; }
.ysm-lineup__grid--opt{ grid-template-columns:repeat(2,1fr); margin-bottom:0; }
.ysm-lineup__card{ border:1px solid var(--c-line); border-radius:var(--radius-card); padding:28px 24px; display:flex; flex-direction:column; gap:12px; background:#fff; }
.ysm-lineup__card-img{
  margin-top:4px; border-radius:var(--radius-card); overflow:hidden;
  background:none !important; background-color:transparent !important; background-image:none !important;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3;
}
/* .ph の縞模様プレースホルダ背景も打ち消す */
.ysm-lineup__card-img.ph::after{ content:none !important; }
.ysm-lineup__card-img img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.ysm-lineup__card-en{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.1em; color:var(--c-main); font-weight:700; text-transform:uppercase; }
.ysm-lineup__card-name{ font-size:1.3rem; font-weight:800; }
.ysm-lineup__card-desc{ color:#4C5A62; font-size:.92rem; line-height:1.8; flex:1; }
.ysm-lineup__card-price{ border-top:1px solid var(--c-line); padding-top:12px; font-size:.98rem; font-weight:700; color:var(--c-text); }
@media (max-width:900px){ .ysm-lineup__grid, .ysm-lineup__grid--opt{ grid-template-columns:1fr; } }

/* =========================================================================
   [11] CASE
   ========================================================================= */
.ysm-case{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.ysm-case__head{ margin-bottom:44px; }
.ysm-case__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ysm-case__item{ background:#fff; border:1px solid var(--c-line); overflow:hidden; }
.ysm-case__photo{ aspect-ratio:4/3; }
.ysm-case__cap{ padding:14px 16px; }
.ysm-case__cap dt{ font-size:.875rem; color:#8A96A0; font-weight:700; margin-top:8px; }
.ysm-case__cap dt:first-child{ margin-top:0; }
.ysm-case__cap dd{ font-size:.9rem; color:var(--c-text); margin:2px 0 0; }
@media (max-width:900px){ .ysm-case__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .ysm-case__grid{ grid-template-columns:1fr; } }

/* =========================================================================
   [12] FLOW
   ========================================================================= */
.ysm-flow{ padding:var(--pad-sec) 0; background:var(--c-base); }
.ysm-flow__head{ margin-bottom:50px; }
.ysm-flow__steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
.ysm-flow__step{
  position:relative; display:flex; flex-direction:column;
  border:1px solid #e1e1e2; padding:32px 18px 22px; background:#fff;
  box-shadow:0px 0px 9px rgb(0 0 0 / 20%);
}
/* カード間の矢印 */
.ysm-flow__step:not(:last-child)::after{
  content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  color:var(--c-main); font-size:.9rem; z-index:2;
}
/* 左上の四角い番号バッジ */
.ysm-flow__no{
  position:absolute; top:0; left:0; z-index:2;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--c-main); color:#fff;
  font-family:var(--ff-en); font-weight:800; font-size:1.15rem; line-height:1;
}
/* 見出しが2行になってもアイコンの横位置が揃うよう高さを固定 */
.ysm-flow__h{
  font-size:1rem; font-weight:800; color:var(--c-main);
  text-align:center; line-height:1.5; margin:0 0 15px;
  min-height:3em; display:flex; align-items:center; justify-content:center;
}
.ysm-flow__icon{
  width:76px; height:76px; margin:10px auto 18px;
  border-radius:50%; background:var(--c-sub);
  display:grid; place-items:center;
  color:var(--c-main); font-size:2rem;
}
.ysm-flow__body{
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--c-line);
  color:#4C5A62; font-size:.8125rem; line-height:1.8;
}
.ysm-flow__foot{ margin-top:36px; display:flex; flex-direction:column; gap:6px; }
.ysm-flow__foot p{ color:#5C6B76; font-size:.9rem; line-height:1.8; }
@media (max-width:1024px){
  .ysm-flow__steps{ grid-template-columns:repeat(3,1fr); gap:36px 28px; }
  .ysm-flow__step::after{ display:none !important; }
}
@media (max-width:600px){
  .ysm-flow__steps{ grid-template-columns:1fr; gap:32px; }
}

/* =========================================================================
   [13] SPEC
   ========================================================================= */
.ysm-spec{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.ysm-spec__head{ margin-bottom:20px; }
.ysm-spec__intro{ display:flex; align-items:center; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.ysm-spec__intro-text{ flex:1 1 260px; color:#4C5A62; font-size:.94rem; line-height:1.85; }
/* MYSAON spec__table を踏襲（色のみ本ページのブルーに差し替え） */
.ysm-spec__table{ width:100%; border-collapse:collapse; border-top:1px solid var(--c-line); }
.ysm-spec__table th,.ysm-spec__table td{ text-align:left; padding:24px 8px; border-bottom:1px solid var(--c-line); vertical-align:top; }
.ysm-spec__table th{ width:38%; font-weight:500; color:#555; font-size:.98rem; letter-spacing:.04em; font-family:var(--ff-jp); }
.ysm-spec__table th .en{ display:block; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.18em; color:var(--c-main); text-transform:uppercase; margin-bottom:4px; }
.ysm-spec__table td{ color:var(--c-text); font-size:1.02rem; }
.ysm-spec__note{ margin-top:18px; color:#8A96A0; font-size:.875rem; line-height:1.8; }
@media (max-width:600px){
  .ysm-spec__table th,.ysm-spec__table td{ display:block; width:100%; padding:14px 4px; }
  .ysm-spec__table th{ border-bottom:none; padding-bottom:2px; }
}

/* =========================================================================
   [14] SAFETY
   ========================================================================= */
.ysm-safety{ padding:var(--pad-sec) 0; background:var(--c-base); }
.ysm-safety__head{ margin-bottom:40px; }
.ysm-safety__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.ysm-safety__list{ display:flex; flex-direction:column; gap:16px; }
.ysm-safety__item{ display:flex; gap:16px; border:1px solid var(--c-line); border-left:3px solid var(--c-main); padding:18px 20px; }
.ysm-safety__item i{ flex:0 0 auto; font-size:1.1rem; color:var(--c-main); margin-top:3px; }
.ysm-safety__item-title{ font-weight:800; font-size:.98rem; margin-bottom:4px; }
.ysm-safety__item-value{ color:#4C5A62; font-size:.92rem; line-height:1.75; }
.ysm-safety__note{ margin-top:22px; background:var(--c-sub); padding:20px 22px; color:#4C5A62; font-size:.9rem; line-height:1.9; }
.ysm-safety__note h4{ font-weight:800; font-size:.95rem; margin-bottom:8px; color:var(--c-text); }
.ysm-safety__media{ border-radius:var(--radius-card); overflow:hidden; }
.ysm-safety__media figcaption{ font-size:.875rem; color:#8A96A0; margin-top:10px; text-align:center; }
@media (max-width:900px){ .ysm-safety__grid{ grid-template-columns:1fr; } }

/* =========================================================================
   [15] QUALITY
   ========================================================================= */

/* =========================================================================
   FAQ（<details>/<summary>）— MYSAON faq-item を踏襲（色のみ本ページのブルーに差し替え）
   ========================================================================= */
.ysm-faq{ padding:var(--pad-sec) 0; background:var(--c-base); }
.ysm-faq__head{ margin-bottom:44px; }
.ysm-faq__list{ max-width:860px; }
.ysm-faq-item{ border:1px solid var(--c-line); border-radius:12px; margin-bottom:14px; background:#F5F5F3; overflow:hidden; transition:border-color .4s; }
.ysm-faq-item[open]{ border-color:rgba(11,90,135,.5); }
.ysm-faq-item__q{
  list-style:none; cursor:pointer; padding:22px 56px 22px 24px; position:relative;
  font-weight:700; font-size:1.05rem; line-height:1.6;
}
.ysm-faq-item__q::-webkit-details-marker{ display:none; }
.ysm-faq-item__q::after{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:24px; top:24px; font-size:.95rem;
  color:var(--c-main); transition:transform .35s var(--ease);
}
.ysm-faq-item[open] .ysm-faq-item__q::after{ transform:rotate(180deg); }
.ysm-faq-item__a{ padding:0 24px 24px; color:#555; font-size:.98rem; line-height:1.95; }
/* 未回答FAQ（data-status="pending"）は一括非表示。回答確定後に属性を外せば表示される */
.ysm-faq-item[data-status="pending"]{ display:none; }

/* =========================================================================
   [17] CTA（雪の青一色グラデーション）
   ========================================================================= */
.ysm-cta{ position:relative; padding:clamp(80px,10vw,130px) 0; background:var(--grad-cta); color:#fff; text-align:center; overflow:hidden; }
.ysm-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(110% 140% at 50% -20%, rgba(255,255,255,.2), transparent 55%); pointer-events:none; }
.ysm-cta__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ysm-cta__lead{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700; opacity:.85; }
.ysm-cta__title{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; line-height:1.4; letter-spacing:.01em; }
.ysm-cta__sub{ margin:0; font-size:1rem; line-height:1.9; opacity:.95; }
.ysm-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.ysm-cta__btn{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; color:var(--c-main);
  font-weight:700; font-size:1rem; padding:18px 42px; border-radius:3px;
  border:2px solid #fff; transition:all .3s var(--ease);
}
.ysm-cta__btn i{ transition:transform .3s var(--ease); }
.ysm-cta__btn:hover{ background:transparent; color:#fff; border-color:#fff; }
.ysm-cta__btn:hover i{ transform:translateX(5px); }
.ysm-cta__btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.ysm-cta__btn--ghost:hover{ background:#fff; color:var(--c-main); }
.ysm-cta__tel{ margin-top:22px; font-size:1rem; font-weight:700; }
.ysm-cta__tel a{ text-decoration:underline; text-underline-offset:3px; }
.ysm-cta__brand{ margin:16px 0 0; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.16em; font-weight:600; opacity:.9; }

/* =========================================================================
   [18] RELATED
   ========================================================================= */
.ysm-related{ padding:calc(var(--pad-sec) * .6) 0; background:var(--c-base); border-top:1px solid var(--c-line); }
.ysm-related__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ysm-related__text{ color:#4C5A62; font-size:.98rem; }
.ysm-related__link{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--c-main);
  border:1px solid var(--c-main); border-radius:3px; padding:10px 22px; font-size:.92rem;
  transition:all .3s var(--ease);
}
.ysm-related__link:hover{ background:var(--c-main); color:#fff; }

/* =========================================================================
   responsive global
   ========================================================================= */
@media (max-width:768px){
  :root{ --pad-sec:clamp(56px,14vw,90px); }
  .ysm__inner{ width:min(100% - 36px, var(--maxw)); }
}

/* =========================================================================
   2026-08-19 構成改修（ターゲット＝施工業者／自治体 に合わせた再設計）
   追加: [02]ENTRY 3系統の入口 / [05]COMPARISON 3者比較 / [08]SCENE 形で割る
        [09]PARTNER 施工業者向け / [12]LINEUP 階層図 / [13]CASE 実績バンド
   ※フォントは全て 0.875rem(14px) 以上（seo_aio.md ## 13-4）
   ========================================================================= */

/* ---------- [05] COMPARISON：3者比較 ---------- */
.ysm-comp__table--3col th[scope="col"]{ font-size:.9375rem; line-height:1.5; vertical-align:middle; }
.ysm-comp__table--3col th[scope="col"].is-own{ background:var(--c-main); color:#fff; }
.ysm-comp__table--3col td.is-own{ background:#F2F9FE; }
.ysm-comp__sub{ display:block; font-size:.875rem; font-weight:400; opacity:.8; margin-top:2px; }
.ysm-comp__table--3col td{ font-size:.9375rem; line-height:1.7; vertical-align:top; }
.ysm-comp__table--3col b.ok{ color:var(--c-main); font-weight:700; }
.ysm-comp__table--3col td.is-own b.ok{ color:#0A4A72; }
.ysm-comp__table--3col b.ng{ color:#A64237; font-weight:700; }
.ysm-comp__note-in{ display:block; font-size:.875rem; color:var(--c-muted); margin-top:3px; line-height:1.6; }
.ysm-comp__note{ font-size:.875rem; color:var(--c-muted); margin-top:16px; line-height:1.75; }
@media (max-width:900px){ .ysm-comp__table--3col{ min-width:720px; } }

/* ---------- [08] SCENE：「形」で割る ---------- */
.ysm-scene__vs{ margin:10px 0 0; padding:0; }
.ysm-scene__vs dt{
  font-size:.875rem; font-weight:700; color:var(--c-muted);
  margin-top:8px; letter-spacing:.04em;
}
.ysm-scene__vs dt:first-child{ margin-top:0; }
.ysm-scene__vs dd{ margin:2px 0 0; font-size:.9375rem; line-height:1.7; color:var(--c-text); }
.ysm-scene__vs dd b{ color:var(--c-main); font-weight:700; }
.ysm-scene__item h3.ysm-scene__label{ font-size:1.15rem; margin:8px 0 0; }
.ysm-scene__foot{
  margin-top:28px; padding:18px 22px; background:var(--c-sub);
  border-left:4px solid var(--c-accent); border-radius:var(--radius-card);
  font-size:1rem; line-height:1.85;
}

/* ---------- [09] PARTNER：施工業者・販売店向け ---------- */
.ysm-partner{ background:var(--c-navy); color:#fff; padding:var(--pad-sec) 0; }
.ysm-partner__head{ text-align:center; max-width:820px; margin:0 auto 36px; }
.ysm__eyebrow--light{ color:#7FC4EC; }
.ysm-h2--light{ color:#fff; }
.ysm-partner__lead{ font-size:1.05rem; line-height:1.95; color:#D6E4EE; margin-top:16px; }
.ysm-partner__lead strong{ color:#fff; border-bottom:2px solid #D97539; padding-bottom:1px; }
.ysm-partner__cta{ text-align:center; margin-top:30px; }
.ysm-partner__btn{
  display:inline-block; background:#D97539; color:#fff; text-decoration:none;
  font-size:1.05rem; font-weight:700; padding:17px 40px; border-radius:4px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ysm-partner__btn:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(217,117,57,.36); }
.ysm-partner__btn i{ margin-left:6px; }
.ysm-partner__note{ font-size:.875rem; color:#A8BDCC; margin-top:14px; line-height:1.75; }

.ysm-lineup__sub-note{ display:block; font-size:.875rem; font-weight:400; color:var(--c-muted); margin-top:3px; }

/* ---------- [13] CASE：実績バンド ---------- */
.ysm-case__band{ margin-top:34px; padding:22px 24px; background:var(--c-sub); border-radius:var(--radius-card); }
.ysm-case__band-lead{ font-size:.9375rem; font-weight:700; color:var(--c-muted); margin:0 0 12px; text-align:center; }
.ysm-case__band-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:0; padding:0; list-style:none; }
.ysm-case__band-list li{ font-size:.9375rem; font-weight:600; color:var(--c-main); }
.ysm-case__band-list li i{ margin-right:6px; }

/* ---------- [19] CTA：3系統 ---------- */
.ysm-cta__btns--3{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.ysm-cta__btn--pro{ background:#D97539; border-color:#D97539; color:#fff; }
.ysm-cta__btn--pro:hover{ box-shadow:0 10px 26px rgba(217,117,57,.36); }

/* ---------- 2026-08-19b SCENE(場所割り) / LINEUP(構造・サイズ表) ---------- */
.ysm-scene__grid--place{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .ysm-scene__grid--place{ grid-template-columns:repeat(2,1fr); } }
.ysm-scene__why{ font-size:.9375rem; line-height:1.8; color:var(--c-text); margin:8px 0 0; text-align:left; }
.ysm-scene__why b{ color:var(--c-main); font-weight:700; }

/* ---------- 2026-08-19c SUMMARY（結論先出し）＋ TOC ---------- */
.ysm-sum{ padding:clamp(56px,7vw,84px) 0; background:var(--c-base); border-bottom:1px solid var(--c-line); }
.ysm-sum__head{ text-align:center; margin-bottom:26px; }
.ysm-sum__overview{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;
  margin:0 0 34px;
}
.ysm-sum__overview-text{
  display:flex; flex-direction:column; justify-content:center;
  font-size:1.02rem; line-height:2; color:var(--c-text);
  background:var(--c-sub); border-radius:var(--radius-card); padding:28px 30px;
}
.ysm-sum__overview-text strong{ color:var(--c-main); }
.ysm-sum__overview-text p + p:not(.ysm-sum__overview-note){ margin-top:1.1em; }
.ysm-sum__overview-note{ display:block; margin-top:10px; font-size:.875rem; color:var(--c-muted); line-height:1.7; }
.ysm-sum__overview-photo{ margin:0; border-radius:var(--radius-card); overflow:hidden; }
.ysm-sum__overview-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .ysm-sum__overview{ grid-template-columns:1fr; } }
.ysm-sum__qa{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:20px 0 40px;
}
@media (max-width:900px){ .ysm-sum__qa{ grid-template-columns:1fr; gap:0; } }

/* カード間は細い縦罫線で区切る（PC）。SPでは横罫線 */
.ysm-sum__qa-item{ display:flex; flex-direction:column; padding:0 34px; }
.ysm-sum__qa-item:first-child{ padding-left:0; }
.ysm-sum__qa-item:last-child{ padding-right:0; }
.ysm-sum__qa-item + .ysm-sum__qa-item{ border-left:1px solid var(--c-line); }
@media (max-width:900px){
  .ysm-sum__qa-item{ padding:32px 0; }
  .ysm-sum__qa-item:first-child{ padding-top:0; }
  .ysm-sum__qa-item + .ysm-sum__qa-item{ border-left:none; border-top:1px solid var(--c-line); }
}

.ysm-sum__qa-icon{ width:100%; max-width:260px; margin:0 auto; margin-bottom:20px; }
.ysm-sum__qa-icon img{ width:100%; height:auto; display:block; }

/* 大＝疑問／中＝答え／小＝根拠 の3段構成 */
.ysm-sum__qa-q{
  display:flex; align-items:baseline; gap:.4em;
  font-weight:800; color:var(--c-navy); line-height:1.4; margin:0 0 12px;
}
.ysm-sum__qa-item .ysm-sum__qa-q{ font-size:clamp(1.25rem,2vw,1.5rem); }
.ysm-sum__qa-q i{ flex:0 0 auto; font-size:.82em; color:var(--c-accent); }
.ysm-sum__qa-q span{ display:block; }
.ysm-sum__qa-item--2 .ysm-sum__qa-q i{ color:#D97539; }

.ysm-sum__qa-item dt{
  font-weight:800; color:var(--c-text); line-height:1.5; margin:0 0 14px;
}
.ysm-sum__qa-item > dt{ font-size:1.22rem; }
.ysm-sum__qa-item dd{ margin:0; font-size:.9rem; line-height:1.9; color:var(--c-muted); }
.ysm-sum__qa-item dd b{ color:var(--c-main); font-weight:700; }
.ysm-sum__qa-item--2 dd b{ color:#D97539; }

.ysm-toc{ max-width:920px; margin:0 auto; padding:22px 26px; background:var(--c-sec); border-radius:var(--radius-card); }
.ysm-toc__title{ font-size:1rem; font-weight:700; margin:0 0 12px; color:var(--c-navy); }
.ysm-toc__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 30px; margin:0; padding:0 0 0 1.2em; }
@media (max-width:600px){ .ysm-toc__list{ grid-template-columns:1fr; } }
.ysm-toc__list li{ font-size:.9375rem; line-height:1.7; }
.ysm-toc__list a{ color:var(--c-main); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s var(--ease); }
.ysm-toc__list a:hover{ border-bottom-color:var(--c-accent); }

/* 目次内：施工・販売パートナー導線（唯一の立場依存項目） */
/* 事業者向けの項目。ページ内の実際の並び順（4番目）に置いたため、
   末尾前提の全幅指定・上罫線をやめ、文字色だけで区別する */
.ysm-toc__list-pro a{ color:#D97539; }
.ysm-toc__list-pro a{ color:#D97539; font-weight:700; }
.ysm-toc__list-pro a:hover{ border-bottom-color:#D97539; }

/* ---------- 2026-08-19d PAIN（悩みの指名）／TIMING ---------- */
.ysm-pain{ background:var(--c-sec); padding:clamp(48px,6vw,72px) 0; }
.ysm-pain__h{ text-align:center; margin-bottom:28px; }
.ysm-pain__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px; }
@media (max-width:900px){ .ysm-pain__grid{ grid-template-columns:1fr; } }
/* カードはただの四角い枠 */
.ysm-pain__col{
  position:relative; background:var(--c-base); border-radius:20px;
  padding:26px 28px 22px; border:2px solid #67a9cb;
}
.ysm-pain__col--pro{ border-color:#D97539; }
.ysm-pain__label{ font-size:1.4rem; font-weight:700; color:#454545; margin:0 0 10px; }
.ysm-pain__col--pro .ysm-pain__label{ color:#454545; }
.ysm-pain__col--pro .ysm-pain__label i{ color:#D97539; }
.ysm-pain__label i{ margin-right:8px; }

/* お悩みリストは枠線なし・薄い背景色の下向き吹き出し */
.ysm-pain__bubbles{
  position:relative; display:flex; flex-direction:column;
  background:var(--c-sub); border-radius:14px; padding:8px 18px;
}
.ysm-pain__col--pro .ysm-pain__bubbles{ background:#FBEEE4; }
.ysm-pain__bubbles::after{
  content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:0; height:0; border-style:solid; border-width:14px 12px 0 12px;
  border-color:var(--c-sub) transparent transparent transparent;
}
.ysm-pain__col--pro .ysm-pain__bubbles::after{ border-top-color:#FBEEE4; }
.ysm-pain__bubble{
  position:relative; padding:11px 4px 11px 30px;
  font-size:.98rem; line-height:1.6; color:var(--c-text);
  border-bottom:1px dashed rgba(11,90,135,.18);
}
.ysm-pain__col--pro .ysm-pain__bubble{ border-bottom-color:rgba(217,117,57,.22); }
.ysm-pain__bubble:last-child{ border-bottom:none; }
.ysm-pain__bubble i{
  position:absolute; left:2px; top:14px;
  font-size:1rem; color:#67a9cb;
}
.ysm-pain__col--pro .ysm-pain__bubble i{ color:#D97539; }

/* 人物イラスト（吹き出しの尻尾の先） */
.ysm-pain__figure{ margin-top:24px; text-align:center; }
.ysm-pain__figure img{
  display:block; margin:0 auto; width:190px; height:auto;
}
.ysm-pain__answer{
  margin:26px auto 0; max-width:820px;
  border-radius:var(--radius-card); overflow:hidden;
  box-shadow:0 8px 24px rgba(15,39,64,.08);
}
.ysm-pain__answer b{ color:var(--c-main); }
.ysm-pain__answer-top{
  background:#ffffff; padding:22px 28px 20px;
  border-bottom:2px dashed #C7DCE8;
}
.ysm-pain__check-item{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; font-size:1rem; font-weight:600; color:var(--c-text); line-height:1.6;
}
.ysm-pain__check-item:last-child{ margin-bottom:0; }
.ysm-pain__check-item i{ flex:0 0 auto; font-size:1.1rem; color:var(--c-main); }
.ysm-pain__answer-bottom{
  background:var(--c-base); padding:26px 28px; text-align:center;
}
.ysm-pain__answer-main{
  margin:0; font-size:clamp(1.05rem,2.1vw,1.25rem); font-weight:700;
  line-height:1.9; color:var(--c-text);
}
.ysm-pain__highlight{
  display:inline-block; margin:0 1px;
  color:var(--c-main); font-size:1.2rem;
}
.ysm-point__caution{ display:block; margin-top:8px; font-size:.875rem; color:var(--c-muted); }
.ysm-timing{ background:var(--c-sub); padding:var(--pad-sec) 0; }
.ysm-timing__head{ text-align:center; max-width:860px; margin:0 auto; }
.ysm-timing__body{ max-width:760px; margin:24px auto 0; text-align:center; font-size:1.1rem; line-height:1.9; }
.ysm-timing__body b{ color:var(--c-main); font-weight:700; }

/* PAIN 締め文（リード／制約2つ／答え） */


/* ---------- 比較表：◎○△の3段階（×は使わない） ---------- */
.ysm-comp__table--mark td{ text-align:center; vertical-align:middle; }
.ysm-comp__table--mark th[scope="row"]{ text-align:left; }
.ysm-comp__table--mark .mk{
  display:block; font-size:1.45rem; font-weight:700; line-height:1.2; letter-spacing:0;
}
.ysm-comp__table--mark .mk--best{ color:var(--c-main); }
.ysm-comp__table--mark .mk--ok{ color:#4A9BC7; }
.ysm-comp__table--mark .mk--mid{ color:#B99248; }
.ysm-comp__table--mark .mk--na{ color:#B6C2CB; }
.ysm-comp__table--mark td.is-own .mk--best{ color:#0A4A72; }
.ysm-comp__table--mark .ysm-comp__note-in{ margin-top:4px; text-align:center; }
.ysm-comp__table--mark tr.is-data td,
.ysm-comp__table--mark tr.is-data th{ font-weight:700; }
.ysm-comp__table--mark tr.is-data{ background:#F7FAFC; }
.ysm-comp__legend{
  margin-top:14px; font-size:.9375rem; color:var(--c-muted); text-align:center; line-height:2;
}
.ysm-comp__legend .mk{ display:inline; font-size:1.15rem; font-weight:700; margin-right:.15em; }
.ysm-comp__legend .mk--best{ color:var(--c-main); }
.ysm-comp__legend .mk--ok{ color:#4A9BC7; }
.ysm-comp__legend .mk--mid{ color:#B99248; }

/* 電気代の注記 */
.ysm-sum__cost-note{ display:block; margin-top:6px; font-size:.875rem; color:var(--c-muted); line-height:1.6; }
.ysm-spec__inline-note{ display:block; margin-top:4px; font-size:.875rem; color:var(--c-muted); line-height:1.6; }

/* ---------- 写真の差し込み位置プレースホルダ（公開前に撤去） ---------- */
.ysm-photo-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  margin:14px 0; padding:22px 16px; text-align:center;
  border:2px dashed var(--c-accent); border-radius:var(--radius-card);
  background:repeating-linear-gradient(45deg,#F4F9FC 0 12px,#EAF3F9 12px 24px);
  min-height:120px;
}
.ysm-photo-ph.is-wide{ min-height:180px; margin:22px auto; max-width:900px; }
.ysm-photo-ph__mark{
  font-size:1rem; font-weight:700; letter-spacing:.06em; color:var(--c-main);
}
.ysm-photo-ph__note{
  font-style:normal; font-size:.875rem; line-height:1.6; color:var(--c-muted);
}

/* =========================================================================
   2026-08-27 一括スタイル調整（PC共通＋スマホ）
   ========================================================================= */

/* ---------- LINEUP：オプション群は本体群より控えめな幅に ---------- */
.ysm-lineup__grid--opt{ grid-template-columns:repeat(2,1fr); max-width:66%; }
@media (max-width:900px){ .ysm-lineup__grid--opt{ max-width:100%; } }

/* ---------- 画像エリアに背景色を残さない ---------- */
.ysm-lineup__card-img,
.ysm-scene__photo,
.ysm-sum__overview-photo,
.ysm-intro__media,
.ysm-point__media,
.ysm-comp__intro-media{ background:none !important; }

/* =========================================================================
   スマートフォン
   ========================================================================= */
@media (max-width:768px){
  /* 全体的に文字を大きく */
  .ysm{ font-size:17px; }
  .ysm main p,.ysm main li,.ysm main dd,.ysm main dt,
  .ysm main td,.ysm main th,.ysm main summary,.ysm main label{ font-size:1.05rem; }
  .ysm-lead-one{ font-size:1.05rem; }
  .ysm-pain__bubble{ font-size:1.02rem; }
  .ysm-scene__note,.ysm-scene__why{ font-size:.98rem; }
  .ysm-flow__body{ font-size:.95rem; }
  .ysm-sum__qa-item dd{ font-size:1rem; }
  .ysm-point__desc{ font-size:1rem; }
  .ysm-lineup__card-desc{ font-size:1rem; }
  .ysm-partner__desc,.ysm-partner__lead{ font-size:1.02rem; }

  /* HERO：どの端末でも画面内に収める */
  .ysm-hero{
    min-height:100svh; height:100svh;
    padding:96px 20px 84px; justify-content:center;
  }
  .ysm-hero__title{ font-size:clamp(2.2rem,11vw,3.2rem); }
  .ysm-hero__content .ysm-hero__catch{ font-size:1.5rem; }
  .ysm-hero__br--sp{ display:inline; }
  .ysm-hero__line{ margin:18px auto; }
  .ysm-hero__scroll{ bottom:18px; }

  /* HERO ポイント：2×2 */
  .ysm-hero__points{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:8px; width:100%; max-width:420px; margin:20px auto 0;
    flex-direction:unset; align-items:stretch;
  }
  .ysm-hero__points li{
    font-size:.92rem; padding:8px 3px; justify-content:center; text-align:center;
  }

  /* 横スライド（LINEUP／POINT／FLOW） */
  .ysm-lineup__grid,
  .ysm-lineup__grid--opt,
  .ysm-point__grid,
  .ysm-flow__steps{
    display:flex; grid-template-columns:none;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:14px; padding-bottom:10px;
    max-width:100%;
  }
  .ysm-lineup__card,
  .ysm-point__card,
  .ysm-flow__step{ flex:0 0 70%; scroll-snap-align:center; }
  .ysm-flow__step{ margin-bottom:0; }
  .ysm-flow__step::after{ display:none !important; }
  /* POINT：スマホでは写真を下に、番号は隠す */
  .ysm-point__card{ flex-direction:column; }
  .ysm-point__body{ padding-right:0; }
  .ysm-point__media{ max-width:100%; }
  .ysm-point__card::after{ display:none; }

  /* スマホではホバー演出を効かせない */
  .ysm-scene__photo img{ transition:none !important; transform:none !important; }
  .ysm-point__card:hover,
  .ysm-lineup__card:hover{ transform:none !important; }

  /* 比較表：1列目を固定してスクロール */
  .ysm-comp__scroll{ position:relative; }
  .ysm-comp__table--3col th[scope="row"]{
    position:sticky; left:0; z-index:2;
    background:#fff; box-shadow:1px 0 0 var(--c-line);
    min-width:8.5em;
  }
  .ysm-comp__table--3col tr.is-data th[scope="row"]{ background:#F7FAFC; }
  .ysm-comp__table--3col thead th:first-child{
    position:sticky; left:0; z-index:3; background:var(--c-navy);
  }
  /* 比較表の写真はスマホでは出さない */
  .ysm-comp__intro-media{ display:none; }
}

/* ---------- 共通リセット（.ysm main p{font-size:1rem}）に勝たせるための詳細度確保 ---------- */
.ysm-pain .ysm-pain__label{ font-size:1.4rem; margin-bottom:10px; }
.ysm-lineup .ysm-lineup__card-name{ font-size:1.3rem; }
@media (max-width:768px){
  .ysm-pain .ysm-pain__label{ font-size:1.3rem; }
  .ysm-lineup .ysm-lineup__card-name{ font-size:1.2rem; }
}

/* ---------- CTAボタン：.ysm main a{color:inherit} に負けて白背景+白文字になる問題の修正 ---------- */
.ysm main a.ysm-cta__btn{ color:var(--c-main); }
.ysm main a.ysm-cta__btn:hover{ color:#fff; }
.ysm main a.ysm-cta__btn--ghost{ color:#fff; }
.ysm main a.ysm-cta__btn--ghost:hover{ color:var(--c-main); }
.ysm main a.ysm-cta__btn--pro,
.ysm main a.ysm-cta__btn--pro:hover{ color:#fff; }
.ysm main a.ysm-partner__btn{ color:#fff; }

/* =========================================================================
   2026-08-27 修正2
   共通リセット（.ysm main ul/ol{margin:0;padding:0} と .ysm main img{height:auto}）
   に負けていた箇所を、詳細度を上げて確実に効かせる
   ========================================================================= */

/* HEROポイントの上余白（.ysm main ul の margin:0 に負けていた） */
.ysm-hero .ysm-hero__points{ margin-top:20px; }

/* パンくずの上下余白（.ysm main ol の padding:0 に負けていた） */
.ysm-bc .ysm-bc__list,
.ysm main .ysm-bc ol{ padding:28px 0; }

/* 画像の高さ（.ysm main img{height:auto} に負けて枠を埋めきれていなかった）
   → 競技場のように縦横比が異なる写真でも枠いっぱいに表示される */
.ysm main .ph img,
.ysm main .ysm-scene__photo img,
.ysm main .ysm-sum__overview-photo img,
.ysm main .ysm-intro__media img,
.ysm main .ysm-point__media img{ width:100%; height:100%; object-fit:cover; }
/* ラインナップのカード画像だけは全体を見せたいので contain のまま */
.ysm main .ysm-lineup__card-img img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }

/* OVERVIEW タイルの疑問見出し */
.ysm-sum__qa-item .ysm-sum__qa-q{ margin-bottom:15px; }

/* INTRODUCTION「発熱のしくみ」ブロックの上余白 */
.ysm-intro__block:first-of-type{ margin-top:20px; }

/* =========================================================================
   スマートフォン 追加調整
   ========================================================================= */
@media (max-width:768px){
  .ysm__inner{ width:min(100% - 25px, var(--maxw)); }

  /* HEROポイントの文字サイズ */
  .ysm-hero .ysm-hero__points li{ font-size:.9rem; }

  /* FLOWアイコン */
  .ysm-flow__icon{ width:90px; height:90px; }

  /* PAIN も横スライドに */
  .ysm-pain__grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:14px; padding-bottom:10px;
  }
  .ysm-pain__col{ flex:0 0 86%; scroll-snap-align:center; }

  /* 横スライドするカードは reveal のアニメーションを止める
     （横方向はIntersectionObserverで発火せず、ずれたまま残るため） */
  .ysm-pain__grid > .reveal,
  .ysm-point__grid > .reveal,
  .ysm-lineup__grid > .reveal,
  .ysm-lineup__grid--opt > .reveal,
  .ysm-flow__steps > .reveal,
  .ysm-scene__grid > .reveal,
  .ysm-pain__col, .ysm-point__card, .ysm-lineup__card,
  .ysm-flow__step, .ysm-scene__item{
    opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important;
  }
  /* ホバー由来の拡大も完全に無効化 */
  .ysm-scene__item:hover .ysm-scene__photo img,
  .ysm-scene__photo img{ transform:none !important; transition:none !important; }
  .ysm-scene__item:hover{ background:transparent !important; }
}

/* =========================================================================
   2026-08-27 修正3
   ========================================================================= */

/* 「ご自宅・施設で使いたい方」のアイコン色 */
.ysm-pain__label i{ color:#67a9cb; }
.ysm-pain__col--pro .ysm-pain__label i{ color:#D97539; }

/* スライド可能なことを示す注記（PCでは非表示） */
.ysm-slide-hint{ display:none; }

@media (max-width:768px){
  /* HERO */
  .ysm-hero{ padding:96px 10px 84px; }
  .ysm-hero__content{ width:100%; }

  /* PAIN カード */
  .ysm-pain__col{ flex:0 0 90%; padding:26px 15px 22px; }
  .ysm-pain__answer-main{ text-align:left; }

  /* SCENE：タップ時に色が変わる挙動を止める */
  .ysm-scene__item,
  .ysm-scene__item:hover,
  .ysm-scene__item:active,
  .ysm-scene__item:focus,
  .ysm-scene__item:focus-within{
    background:#fff !important;
    -webkit-tap-highlight-color:transparent;
  }
  .ysm-scene__grid, .ysm-scene__item{ -webkit-tap-highlight-color:transparent; }

  /* 見出しも本文もすべて左寄せ */
  .ysm main .ysm-h2,
  .ysm main .ysm__eyebrow,
  .ysm main .ysm-lead-one,
  .ysm-sum__head, .ysm-comp__head, .ysm-scene__head,
  .ysm-flow__head, .ysm-spec__head, .ysm-faq__head,
  .ysm-partner__head, .ysm-point__head, .ysm-problem__main-inner,
  .ysm-pain__h,
  .ysm-sum__qa-item, .ysm-scene__item, .ysm-flow__step,
  .ysm-cta__inner, .ysm-partner__cta,
  .ysm-comp__legend, .ysm-comp__note{ text-align:left !important; }
  .ysm-flow__h{ justify-content:flex-start; text-align:left; }
  .ysm-cta__inner{ align-items:flex-start; }
  .ysm-cta__btns, .ysm-cta__btns--3{ justify-content:flex-start; }
  .ysm-partner__head{ margin-left:0; margin-right:0; }

  /* スライド注記を表示 */
  .ysm-slide-hint{
    display:block; margin:0; line-height:1.4;
    font-size:.8125rem; color:var(--c-muted); text-align:left;
  }
}

/* =========================================================================
   2026-08-27 修正4
   ========================================================================= */

/* ① 目次：ページ上部に置き、目次らしい体裁にする */
.ysm-toc-sec{ padding:36px 0 8px; background:var(--c-base); }
.ysm-toc{ max-width:920px; margin:0 auto; padding:26px 30px; background:none; border-radius:var(--radius-card); }
.ysm-toc__title{
  font-size:1.05rem; font-weight:800; margin:0 0 14px; color:var(--c-navy);
  padding-bottom:10px; border-bottom:2px solid var(--c-accent);
}
.ysm-toc__list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px 30px;
  margin:0; padding:0; counter-reset:toc;
}
.ysm-toc__list li{
  position:relative; font-size:.9375rem; line-height:1.7;
  counter-increment:toc; padding:7px 0 7px 2.2em;
  border-bottom:1px dashed var(--c-line);
}
.ysm-toc__list li::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute; left:0; top:7px;
  font-family:var(--ff-en); font-weight:800; font-size:.85rem; color:var(--c-accent);
}

/* ② 改行の出し分け */
.ysm-br--pc{ display:inline; }
.ysm-br--sp{ display:none; }

/* ⑤ OVERVIEW 見出しの後半（PCでは通常色のまま） */
.ysm-sum__h-accent{ color:inherit; }

/* 画像は左寄せにしない（中央のまま） */
.ysm main .ysm-sum__qa-icon,
.ysm main .ysm-flow__icon,
.ysm main .ysm-pain__figure img{ margin-left:auto; margin-right:auto; }

@media (max-width:768px){
  /* ② スマホでは改行しない */
  .ysm-br--pc{ display:none; }
  /* ⑤ スマホでは「SUWAクリスティの」で改行し、後半を色分け */
  .ysm-br--sp{ display:inline; }
  .ysm-sum__h-accent{ color:var(--c-main); }

  /* ④ 注記の直下に余白を作らない */
  .ysm-pain__grid,
  .ysm-point__grid,
  .ysm-lineup__grid,
  .ysm-lineup__grid--opt,
  .ysm-flow__steps,
  .ysm-scene__grid--place{ margin-top:4px; }

  /* ⑧ ラインナップの補足 */
  .ysm-lineup__sub-note{ font-size:1rem; }

  /* ⑨ PROBLEM のラベル和文 */
  .ysm-problem__means-eyebrow em{ font-size:1.3rem; }

  /* 目次は1カラム */
  .ysm-toc__list{ grid-template-columns:1fr; }
  .ysm-toc{ padding:22px 20px; }
}

/* =========================================================================
   2026-08-27 ヒアリング回答の反映
   ========================================================================= */

/* SCENE 屋根カードの注意書き（他の注記と同じグレー小文字） */
.ysm-scene__caution{
  display:block; margin-top:8px;
  font-size:.8125rem; line-height:1.7; color:var(--c-muted);
}

/* QUALITY：第三者による評価と実証 */
.ysm-quality{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.ysm-quality__head{ margin-bottom:40px; }
.ysm-quality__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:900px){ .ysm-quality__grid{ grid-template-columns:1fr; } }
.ysm-quality__item{
  background:#fff; border:1px solid var(--c-line);
  border-top:3px solid var(--c-main);
  border-radius:0 0 var(--radius-card) var(--radius-card);
  padding:28px 26px;
}
.ysm-quality__en{
  font-family:var(--ff-en); font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent); margin:0 0 10px;
}
.ysm-quality__title{
  font-size:1.1rem; font-weight:800; color:var(--c-text); line-height:1.6; margin:0 0 12px;
}
.ysm-quality__desc{ margin:0; font-size:.9375rem; line-height:1.85; color:var(--c-muted); }
.ysm-quality__desc b{ color:#a64237; }


/* =========================================================================
   2026-08-27 修正5（スマホ限定の文字サイズ・余白・寄せ）
   ========================================================================= */
@media (max-width:768px){
  /* 「こんなこと、ありませんか？」の下余白
     共通リセット .ysm main h2{margin:0}（0,1,2）に負けるため詳細度を上げる */
  .ysm main .ysm-pain__h{ margin-bottom:20px; }

  /* OVERVIEW タイルの疑問見出しと、そのアイコン */
  .ysm-sum__qa-item .ysm-sum__qa-q{ font-size:clamp(1.5rem,2vw,1.5rem); }
  .ysm-sum__qa-q i{ font-size:1em; }

  /* 定義リストの見出し（共通リセットの 1.05rem から独立させる） */
  .ysm main dt{ font-size:1.3rem; }

  /* FLOW の各ステップ見出し（修正3で左寄せにしたものを中央に戻す） */
  .ysm-flow__h{ font-size:1.3rem; justify-content:center; text-align:center; }
}

/* =========================================================================
   2026-08-27 比較表の利用イメージ写真（プレースホルダ → 実画像）
   ========================================================================= */
.ysm-comp__intro-media{ min-height:0; }
.ysm main .ysm-comp__intro-media img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-card);
}

/* =========================================================================
   2026-08-27 QUALITY セクション刷新
   （.ysm main p / dt / dd の共通リセットに勝たせるため詳細度を上げている）
   ========================================================================= */
.ysm-quality__head{ margin-bottom:44px; }
.ysm-quality__grid{ gap:24px; align-items:stretch; }

.ysm-quality__item{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--c-line); border-top:none;
  border-radius:var(--radius-card);
  padding:30px 30px 28px;
  display:flex; flex-direction:column;
  box-shadow:0 2px 14px rgba(11,90,135,.06);
}
/* 上端のアクセントバー */
.ysm-quality__item::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--c-main) 0%,var(--c-accent) 100%);
}

/* アイコン＋英字ラベル */
.ysm-quality__top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ysm-quality__icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--c-sub); color:var(--c-main);
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
}
.ysm-quality__en{
  font-family:var(--ff-en); font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent); margin:0;
}
.ysm-quality__title{
  font-size:1.25rem; font-weight:800; color:var(--c-text);
  line-height:1.55; margin:0 0 18px;
}

/* 機関・所属などのメタ情報 */
.ysm-quality__meta{ margin:0 0 18px; padding:0; border-top:1px solid var(--c-line); }
.ysm-quality__meta-row{
  display:grid; grid-template-columns:5.5em 1fr; gap:0 14px;
  padding:9px 0; border-bottom:1px solid var(--c-line);
}
.ysm main .ysm-quality__meta dt{
  margin:0; font-size:.8125rem; font-weight:700; line-height:1.7;
  color:var(--c-accent); letter-spacing:.04em;
}
.ysm main .ysm-quality__meta dd{
  margin:0; font-size:.9375rem; line-height:1.7; color:var(--c-text);
}

.ysm main .ysm-quality__desc{
  margin:0; font-size:.9375rem; line-height:1.9; color:var(--c-muted);
}
.ysm-quality__desc b{ color:var(--c-main); font-weight:700; }

.ysm main .ysm-quality__note{
  margin:26px 0 0; font-size:.8125rem; line-height:1.85; color:var(--c-muted);
}

@media (max-width:768px){
  .ysm-quality__item{ padding:24px 20px 22px; }
  .ysm-quality__icon{ width:46px; height:46px; font-size:1.2rem; }
  .ysm-quality__title{ font-size:1.15rem; }
  .ysm-quality__meta-row{ grid-template-columns:4.5em 1fr; }
  .ysm main .ysm-quality__meta dt{ font-size:.8125rem; }
  .ysm main .ysm-quality__meta dd{ font-size:.95rem; }
}

/* =========================================================================
   2026-08-27 POINT カード（スマホ）
   ========================================================================= */
@media (max-width:768px){
  .ysm-point__card{ padding:20px 15px 20px 15px; }
  /* カード幅は POINT だけ 83%（LINEUP・FLOW は 70% のまま） */
  .ysm-point__card{ flex:0 0 83%; }

  /* カードの余白をなくす（本文と画像の間／画像の下）
     ① .ysm-point__body{flex:1} が余った高さを吸って画像を下端へ押し下げていた
     ② 横スライダーの既定 align-items:stretch で、背の低いカードも
        いちばん高いカードに合わせて引き伸ばされ、画像の下に空白が残っていた
     → ①は伸長を止め、②はカードを内容の高さで止める。
     ②を止めるとグリッドの下地（--c-line のグレー）が露出するため、
     スマホでは下地と枠線も消す（スライダーに区切り線は不要）。 */
  .ysm-point__body{ flex:0 0 auto; }
  .ysm-point__grid{ align-items:flex-start; background:none; border:none; }
}

/* =========================================================================
   2026-08-27 スマホの文字サイズ（最小15px ＋ 全体の底上げ）

   原因：SWELL が スマホで --swl-fz--root:3.6vw を使うため、ルートの
   font-size が画面幅に比例して縮む（390px幅=14.04px / 360px=12.96px /
   320px=11.52px）。このCSSは 16px を前提に rem で書かれているため、
   実機では設計値より 12〜28% 小さく描画されていた。

   対応：html は書き換えない（サイト共通ヘッダー/フッターに波及するため）。
   .ysm 配下の font-size だけを「16px を基準に換算した px」で再定義し、
   下限を 15px にする。px なので端末幅による目減りも起きない。
   em・%・var() 指定は親に追従するのでそのまま。
   ========================================================================= */
@media (max-width:768px){
  /* .ysm-hero__points li は対象外（ご指示により元の .9rem のまま）。
     ここに再定義を足すと 15px に持ち上がるので追加しないこと。 */
  .ysm main p,.ysm main li,.ysm main dd,.ysm main dt,.ysm main td,.ysm main th,.ysm main summary,.ysm main label{ font-size:16px; }   /* 旧 1rem */
  .ysm main small{ font-size:15px; }   /* 旧 14px */
  .ysm__eyebrow{ font-size:15px; }   /* 旧 .875rem */
  .ysm-h2{ font-size:clamp(27.2px, 3.6vw, 40px); }   /* 旧 clamp(1.7rem, 3.6vw, 2.5rem) */
  .ysm-lead-one{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-hero__sub{ font-size:15px; }   /* 旧 .875rem */
  .ysm-hero__title{ font-size:clamp(41.6px, 8vw, 89.6px); }   /* 旧 clamp(2.6rem, 8vw, 5.6rem) */
  .ysm-hero__content .ysm-hero__catch{ font-size:32px; }   /* 旧 2rem */
  .ysm-hero__lux{ font-size:clamp(25.6px, 3.2vw, 38.4px); }   /* 旧 clamp(1.6rem,3.2vw,2.4rem) */
  .ysm-hero__scroll{ font-size:15px; }   /* 旧 .875rem */
  .ysm-hero__spec-eyebrow{ font-size:15px; }   /* 旧 .875rem */
  .ysm-hero__spec-list li{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-bc ol{ font-size:15px; }   /* 旧 .875rem */
  .ysm-problem__label{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm-problem__source{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-problem__means-eyebrow{ font-size:15px; }   /* 旧 .75rem */
  .ysm-problem__means-eyebrow em{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-problem__other-label{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-problem__other-text{ font-size:15px; }   /* 旧 .875rem */
  .ysm-intro__body{ font-size:16.48px; }   /* 旧 1.03rem */
  .ysm-intro__subhead{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm-intro__tags span{ font-size:15px; }   /* 旧 .875rem */
  .ysm-point__card::after{ font-size:80px; }   /* 旧 5rem */
  .ysm-point__no{ font-size:15px; }   /* 旧 .875rem */
  .ysm-point__en{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-point__icon{ font-size:25.6px; }   /* 旧 1.6rem */
  .ysm-point__title{ font-size:18.24px; }   /* 旧 1.14rem */
  .ysm-point__desc{ font-size:15.36px; }   /* 旧 .96rem */
  .ysm-perf__label{ font-size:15px; }   /* 旧 .875rem */
  .ysm-perf__value{ font-size:clamp(24px, 2.6vw, 32px); }   /* 旧 clamp(1.5rem,2.6vw,2rem) */
  .ysm-perf__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-comp__table th,.ysm-comp__table td{ font-size:15.36px; }   /* 旧 .96rem */
  .ysm-scene__glabel{ font-size:16px; }   /* 旧 1rem */
  .ysm-scene__gsub{ font-size:16px; }   /* 旧 1rem */
  .ysm-scene__icon{ font-size:21.6px; }   /* 旧 1.35rem */
  .ysm-scene__label{ font-size:16.48px; }   /* 旧 1.03rem */
  .ysm-scene__note{ font-size:15px; }   /* 旧 .9rem */
  .ysm-scene__hint{ font-size:15px; }   /* 旧 .875rem */
  .ysm-ctrl__icon{ font-size:22.4px; }   /* 旧 1.4rem */
  .ysm-ctrl__title{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-ctrl__value{ font-size:15.04px; }   /* 旧 .94rem */
  .ysm-cost__label{ font-size:15px; }   /* 旧 .9rem */
  .ysm-cost__value{ font-size:clamp(24px, 2.6vw, 30.4px); }   /* 旧 clamp(1.5rem,2.6vw,1.9rem) */
  .ysm-cost__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-cost__compare{ font-size:15px; }   /* 旧 .9rem */
  .ysm-lineup__sub{ font-size:15px; }   /* 旧 .875rem */
  .ysm-lineup .ysm-lineup__sub--main{ font-size:22.4px; }   /* 旧 1.4rem */
  .ysm-lineup__card-en{ font-size:15px; }   /* 旧 .875rem */
  .ysm-lineup__card-name{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-lineup__card-desc{ font-size:15px; }   /* 旧 .92rem */
  .ysm-lineup__card-price{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-case__cap dt{ font-size:15px; }   /* 旧 .875rem */
  .ysm-case__cap dd{ font-size:15px; }   /* 旧 .9rem */
  .ysm-flow__step:not(:last-child)::after{ font-size:15px; }   /* 旧 .9rem */
  .ysm-flow__no{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm-flow__h{ font-size:16px; }   /* 旧 1rem */
  .ysm-flow__icon{ font-size:32px; }   /* 旧 2rem */
  .ysm-flow__body{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-flow__foot p{ font-size:15px; }   /* 旧 .9rem */
  .ysm-spec__intro-text{ font-size:15.04px; }   /* 旧 .94rem */
  .ysm-spec__table th{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-spec__table th .en{ font-size:15px; }   /* 旧 .875rem */
  .ysm-spec__table td{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-spec__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-safety__item i{ font-size:17.6px; }   /* 旧 1.1rem */
  .ysm-safety__item-title{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-safety__item-value{ font-size:15px; }   /* 旧 .92rem */
  .ysm-safety__note{ font-size:15px; }   /* 旧 .9rem */
  .ysm-safety__note h4{ font-size:15.2px; }   /* 旧 .95rem */
  .ysm-safety__media figcaption{ font-size:15px; }   /* 旧 .875rem */
  .ysm-faq-item__q{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-faq-item__q::after{ font-size:15.2px; }   /* 旧 .95rem */
  .ysm-faq-item__a{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-cta__lead{ font-size:15px; }   /* 旧 .875rem */
  .ysm-cta__title{ font-size:clamp(27.2px, 4vw, 41.6px); }   /* 旧 clamp(1.7rem,4vw,2.6rem) */
  .ysm-cta__sub{ font-size:16px; }   /* 旧 1rem */
  .ysm-cta__btn{ font-size:16px; }   /* 旧 1rem */
  .ysm-cta__tel{ font-size:16px; }   /* 旧 1rem */
  .ysm-cta__brand{ font-size:15px; }   /* 旧 .875rem */
  .ysm-related__text{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-related__link{ font-size:15px; }   /* 旧 .92rem */
  .ysm-comp__table--3col th[scope="col"]{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-comp__sub{ font-size:15px; }   /* 旧 .875rem */
  .ysm-comp__table--3col td{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-comp__note-in{ font-size:15px; }   /* 旧 .875rem */
  .ysm-comp__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-scene__vs dt{ font-size:15px; }   /* 旧 .875rem */
  .ysm-scene__vs dd{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-scene__item h3.ysm-scene__label{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm-scene__foot{ font-size:16px; }   /* 旧 1rem */
  .ysm-partner__lead{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-partner__btn{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-partner__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-lineup__sub-note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-case__band-lead{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-case__band-list li{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-scene__why{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-sum__overview-text{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-sum__overview-note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-sum__qa-item .ysm-sum__qa-q{ font-size:clamp(20px, 2vw, 24px); }   /* 旧 clamp(1.25rem,2vw,1.5rem) */
  .ysm-sum__qa-item > dt{ font-size:19.52px; }   /* 旧 1.22rem */
  .ysm-sum__qa-item dd{ font-size:15px; }   /* 旧 .9rem */
  .ysm-toc__title{ font-size:16px; }   /* 旧 1rem */
  .ysm-toc__list li{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-pain__label{ font-size:22.4px; }   /* 旧 1.4rem */
  .ysm-pain__bubble{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-pain__bubble i{ font-size:16px; }   /* 旧 1rem */
  .ysm-pain__check-item{ font-size:16px; }   /* 旧 1rem */
  .ysm-pain__check-item i{ font-size:17.6px; }   /* 旧 1.1rem */
  .ysm-pain__answer-main{ font-size:clamp(16.8px, 2.1vw, 20px); }   /* 旧 clamp(1.05rem,2.1vw,1.25rem) */
  .ysm-pain__highlight{ font-size:19.2px; }   /* 旧 1.2rem */
  .ysm-point__caution{ font-size:15px; }   /* 旧 .875rem */
  .ysm-timing__body{ font-size:17.6px; }   /* 旧 1.1rem */
  .ysm-comp__table--mark .mk{ font-size:23.2px; }   /* 旧 1.45rem */
  .ysm-comp__legend{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-comp__legend .mk{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm-sum__cost-note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-spec__inline-note{ font-size:15px; }   /* 旧 .875rem */
  .ysm-photo-ph__mark{ font-size:16px; }   /* 旧 1rem */
  .ysm-photo-ph__note{ font-size:15px; }   /* 旧 .875rem */
  .ysm main p,.ysm main li,.ysm main dd,.ysm main dt,
  .ysm main td,.ysm main th,.ysm main summary,.ysm main label{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-lead-one{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-pain__bubble{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-scene__note,.ysm-scene__why{ font-size:15.68px; }   /* 旧 .98rem */
  .ysm-flow__body{ font-size:15.2px; }   /* 旧 .95rem */
  .ysm-sum__qa-item dd{ font-size:16px; }   /* 旧 1rem */
  .ysm-point__desc{ font-size:16px; }   /* 旧 1rem */
  .ysm-lineup__card-desc{ font-size:16px; }   /* 旧 1rem */
  .ysm-partner__desc,.ysm-partner__lead{ font-size:16.32px; }   /* 旧 1.02rem */
  .ysm-hero__title{ font-size:clamp(35.2px, 11vw, 51.2px); }   /* 旧 clamp(2.2rem,11vw,3.2rem) */
  .ysm-hero__content .ysm-hero__catch{ font-size:24px; }   /* 旧 1.5rem */
  .ysm-pain .ysm-pain__label{ font-size:22.4px; }   /* 旧 1.4rem */
  .ysm-lineup .ysm-lineup__card-name{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-pain .ysm-pain__label{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-lineup .ysm-lineup__card-name{ font-size:19.2px; }   /* 旧 1.2rem */
  .ysm-slide-hint{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-toc__title{ font-size:16.8px; }   /* 旧 1.05rem */
  .ysm-toc__list li{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-toc__list li::before{ font-size:15px; }   /* 旧 .85rem */
  .ysm-lineup__sub-note{ font-size:16px; }   /* 旧 1rem */
  .ysm-problem__means-eyebrow em{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-scene__caution{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-quality__en{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-quality__title{ font-size:17.6px; }   /* 旧 1.1rem */
  .ysm-quality__desc{ font-size:15px; }   /* 旧 .9375rem */
  .ysm-sum__qa-item .ysm-sum__qa-q{ font-size:clamp(24px, 2vw, 24px); }   /* 旧 clamp(1.5rem,2vw,1.5rem) */
  .ysm main dt{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-flow__h{ font-size:20.8px; }   /* 旧 1.3rem */
  .ysm-quality__icon{ font-size:21.6px; }   /* 旧 1.35rem */
  .ysm-quality__en{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-quality__title{ font-size:20px; }   /* 旧 1.25rem */
  .ysm main .ysm-quality__meta dt{ font-size:15px; }   /* 旧 .8125rem */
  .ysm main .ysm-quality__meta dd{ font-size:15px; }   /* 旧 .9375rem */
  .ysm main .ysm-quality__desc{ font-size:15px; }   /* 旧 .9375rem */
  .ysm main .ysm-quality__note{ font-size:15px; }   /* 旧 .8125rem */
  .ysm-quality__icon{ font-size:19.2px; }   /* 旧 1.2rem */
  .ysm-quality__title{ font-size:18.4px; }   /* 旧 1.15rem */
  .ysm main .ysm-quality__meta dt{ font-size:15px; }   /* 旧 .8125rem */
  .ysm main .ysm-quality__meta dd{ font-size:15.2px; }   /* 旧 .95rem */
}

/* =========================================================================
   2026-08-27 PAIN の締め文（スマホ）
   「現場の形に合わせて、一枚ずつつくるから、SUWAクリスティの融雪マットなら、
     解決できます。」を、手動の改行を入れず自然に折り返すだけにする。

   原因：.ysm-pain__highlight が display:inline-block のため、強調部分
   （約326px）が分割できない1つの塊になり、テキスト領域（390px端末で309px）に
   入りきらず丸ごと次行へ送られていた。＝改行を入れたように見えていた。
   → inline に戻して、他の文字と同じように流れて折り返すようにする。
   （手動改行 <br class="ysm-br--pc"> はスマホで display:none のまま）
   ========================================================================= */
@media (max-width:768px){
  .ysm-pain__highlight{ display:inline; }
}