/* ========== Winter Warm Care Feature (no gradients/shadows) ========== */
.feature-warmcare{
  --c-pink: #E84B8B; /* ボタン/アクセント */
  --c-pink-soft: #EEBEBF;
  --c-beige: #F5E6D3;
  --c-brown: #8f6734;
  --c-blue-soft: #A7C0D3;
  --radius: 14px;
  font-size: 16px;
  font-family: "Noto Sans JP","Noto Sans",system-ui,-apple-system,sans-serif;
  color:#1A1A1A;
}

.feature-warmcare .fwc-container{
  max-width:1024px;
  width:90%;
  margin:0 auto;
  padding:24px 16px 72px;
  box-sizing:border-box;
}
@media screen and (max-width:768px){
  .feature-warmcare .fwc-container{
    width: 98%;
  }
}

/* ---------- HERO（図形あしらい・点線） ---------- */
.feature-warmcare .fwc-hero{
  background:#fff;
  border:3px solid var(--c-pink-soft);
  border-radius: calc(var(--radius) + 4px);
  padding:24px 16px 28px;
  position:relative;
  box-shadow:  15px 20px var(--c-beige);
}
/* 上辺にビーズ状の丸いあしらい */
.feature-warmcare .fwc-hero::before{
  content:"";
  position:absolute; left:14px; right:14px; top:-8px; height:16px;
  background:
    radial-gradient(circle at 8px 8px, var(--c-pink-soft) 8px, transparent 9px) left top/32px 16px repeat-x;
}  
  
.feature-warmcare .fwc-main{
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 10px auto 30px;
}
  
.feature-warmcare h1{
  font-family: 'Zen Maru Gothic', "Noto Sans JP", "Noto Sans", sans-serif; 
  line-height:1.35;
  font-weight:800;
  color:var(--c-brown);
  text-align: center;
  white-space: nowrap;
  margin-bottom: 70px;
  text-shadow: 0 0 5px var(--c-pink-soft);
}
.feature-warmcare #fwc-title-pc{
  font-size:40px;
}
.feature-warmcare #fwc-title-sp{
  display: none;
}
.feature-warmcare h1 span{
  font-size: 24px;
  color: var(--c-pink);
}

.feature-warmcare .fwc-main img:nth-child(2){ width: 25%;animation: floating-y 2s ease-in-out infinite alternate-reverse;animation-delay: 1s; }
.feature-warmcare .fwc-main img:nth-child(4){ width: 20%; padding-left: 2%; animation: floating-y 2s ease-in-out infinite alternate-reverse; }

@media screen and (max-width:768px){
  .feature-warmcare .fwc-main{
    flex-wrap: wrap;
  }
  .feature-warmcare #fwc-title-pc{
    display: none;
  }
  .feature-warmcare #fwc-title-sp{
    display: block;
    z-index: 1;
    font-size: 20px;
    margin-bottom: 0px;
    width: 100%;
  }
  .feature-warmcare h1 span{
    font-size: 16px;
  }
  .feature-warmcare .fwc-main img:nth-child(2){ width: 35%;}
  .feature-warmcare .fwc-main img:nth-child(4){ width: 30%;}
}

.feature-warmcare .fwc-intro p{
  margin:0 0 8px;
  line-height:1.9;
  font-size:clamp(14px,3.7vw,18px);
}

/* ---------- セクション ---------- */
.feature-warmcare .fwc-section{
  margin-top:50px;
  background:#fff;
  border:3px solid var(--c-beige);
  border-radius: var(--radius);
  padding:18px 14px 80px;
  position:relative;
  box-shadow:  15px 20px var(--c-pink-soft);
}

/* 交互のセクション配色（単色） */
.feature-warmcare .fwc-section--alt{
  border-color: var(--c-pink-soft);
  box-shadow:  15px 20px var(--c-beige);
}

/* セクション見出し：左飾り＋下点線 */
.feature-warmcare .fwc-section-head{
  display:grid;
  gap:12px;
}
.feature-warmcare h2{
  font-family: 'Zen Maru Gothic', "Noto Sans JP", "Noto Sans", sans-serif;
  font-size:clamp(18px,4vw,26px);
  font-weight:800;
  color:var(--c-brown);
  position:relative;
  padding-left:14px;
  margin:0;
  border-bottom:2px dotted var(--c-pink-soft);
  padding-bottom:6px;
  line-height: 3em;
}
@media screen and (max-width:768px){
  .feature-warmcare h2{
    line-height: 1.5em;
  }
  
}

/* 小見出し（カード内） */
.feature-warmcare .fwc-card h3{
  font-weight:800;
  font-size:18px;
  margin:0 0 8px;
  padding-left:28px;
  position:relative;
}
/* h3の“丸＋棒”図形（単色） */
.feature-warmcare .fwc-card h3::before{
  content:"";
  position:absolute; left:0; top:4px;
  width:16px; height:16px; border-radius:50%;
  background: var(--c-pink-soft);
}

/* 画像枠：単色枠＋角丸 */
.feature-warmcare .fwc-figure{
  width:100%;
  overflow:hidden;
  border-radius:50px;
  background:#fff;
  margin-bottom: 1em;
}
.feature-warmcare .fwc-figure img{ display:block; width:100%; height:auto; }

/* リード文 */
.feature-warmcare .fwc-lead p{
  margin:10px 0;
  line-height:1.9;
}
.feature-warmcare .fwc-highlight {
  position: relative;
  background-color: #f5e6d39c;
}

/* ---------- カード群（モバイル1 → 640pxで2 → 1024pxで3） ---------- */
.feature-warmcare .fwc-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width:640px){
  .feature-warmcare .fwc-cards{ grid-template-columns: repeat(2, 1fr); }
}

.feature-warmcare .fwc-card{
  background:#fff;
  border:2px solid var(--c-pink-soft);
  border-radius:12px;
  padding:14px;
  position:relative;
}
/* カード上辺の点線（内側） */
.feature-warmcare .fwc-card::before{
  content:"";
  position:absolute; left:10px; right:10px; top:8px; height:0;
  border-top:2px dotted var(--c-beige);
}

/* 本文 */
.feature-warmcare .fwc-card p{ margin:0; line-height:1.8; }
.feature-warmcare .fwc-card img { display: block; max-width: 240px; margin: 5px auto 0;}

.feature-warmcare .fwc-items{
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 20px auto;
}
.feature-warmcare .fwc-items img{
  display: block;
  max-width: 150px;
}
@media screen and (max-width:768px){
  .feature-warmcare .fwc-items{
    justify-content: space-around;
    width: 90%;
  }
  .feature-warmcare .fwc-items img{
    max-width: 80px;
  }
  
}

/* ---------- CTAボタン（反転ホバー） ---------- */
.feature-warmcare .fwc-cta{ margin-top:16px; text-align:center; }
.feature-warmcare .fwc-button{
  display:inline-block;
  background:#FFF;
  border:1px solid #e84b8b;
  color:#e84b8b;
  font-size: 1.1em;
  font-weight:700;
  border-radius:5px;
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
  padding:10px 25px;
  text-decoration:none;
  transition: 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}
.feature-warmcare .fwc-button::after {
    content: '→';
    position: absolute;
    display: inline-block;
    margin: auto 0;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 10px;
    transition: 0.3s 
    ease-in-out;
}
.feature-warmcare .fwc-button:hover{ background:#e84b8b; color:#fff; }
.feature-warmcare .fwc-button:active{ transform:translateY(1px); }

/* ---------- 余白／レイアウト ---------- */
.feature-warmcare .fwc-section + .fwc-section{ margin-top:60px; }

/* PCレイアウト微調整 */
@media (min-width:1024px){
  .feature-warmcare .fwc-section{ padding:22px 18px 36px; }
  .feature-warmcare .fwc-figure{ border-width:2px; }
}

/* ================== Inline SVG Decorations ================== */
.feature-warmcare .fwc-section{
  position: relative; /* デコの基準 */
  overflow: hidden;   /* はみ出し防止。必要に応じて visible に変更 */
}

/* 右下・左下の共通ポジション */
.feature-warmcare .fwc-deco{
  position: absolute;
  pointer-events: none; /* クリック無効 */
  opacity: .5;         /* 主張しすぎない透明度 */
  line-height: 0;
  bottom:10px;
  right:0;
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
.feature-warmcare .fwc-deco .fwc-ico{ transform: rotate(15deg); }
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

/* 雪の結晶を“並べる”：左右いずれの隅でも横並び */
.feature-warmcare .fwc-deco--flakes{
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* SVGのサイズ管理（!importantでインラインstyle幅を上書き） */
.feature-warmcare .fwc-ico svg{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* --- サイズ（モバイル基準 → ブレイクで拡大） --- */
.feature-warmcare .fwc-ico--flake1{ width: 88px; }
.feature-warmcare .fwc-ico--flake2{ width: 56px; }
.feature-warmcare .fwc-ico--glove  { width: 70px; }
.feature-warmcare .fwc-ico--snowman{ width: 70px; }

@media (min-width: 640px){
  .feature-warmcare .fwc-ico--flake1{ width: 110px; }
  .feature-warmcare .fwc-ico--flake2{ width: 72px;  }
  .feature-warmcare .fwc-ico--glove  { width: 120px; }
  .feature-warmcare .fwc-ico--snowman{ width: 124px; }
}
@media (min-width: 1024px){
  .feature-warmcare .fwc-ico--flake1{ width: 100px; }
  .feature-warmcare .fwc-ico--flake2{ width: 80px;  }
  .feature-warmcare .fwc-ico--glove  { width: 150px; }
  .feature-warmcare .fwc-ico--snowman{ width: 156px; }
}
.feature-warmcare .fwc-deco .st0{ fill: var(--c-blue-soft) !important; }

/* はみ出し防止（疑似要素や境界の誤差対策） */
.feature-warmcare .fwc-section{ overflow: hidden; }


/* ================== H2 左飾り：雪の結晶1 + 番号 ================== */
/* ベース（左にバッジ分の余白を作る） */
.feature-warmcare h2{
  position: relative;
  padding-left: 64px;          /* バッジの幅 + 余白 */
  margin: 0;
  border-bottom: 2px dotted var(--c-pink-soft); /* 既存の点線下線は活かす */
}

/* 雪の結晶バッジ（背景：雪の結晶1 / 単色 / 影・グラデなし） */
.feature-warmcare h2::before{
  content:"";
  position:absolute;
  left: 8px;                   /* 見出し左端からのオフセット */
  top: 50%;
  transform: translateY(-50%);
  width: 44px;                 /* モバイル基準サイズ */
  height: 44px;
  opacity: 0.9;                /* くっきり目。弱めたい場合は 0.75 などへ */
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* 雪の結晶１（fill: #EEBEBF）を data URI で敷く */
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>\<g>\<polygon fill='%23A7C0D3' points='467.942,305.039 453.202,279.443 389.577,316.077 288.962,257.981 285.538,256 288.962,254.02 389.587,195.924 453.193,232.548 467.942,206.952 419.144,178.866 485.087,140.789 470.317,115.212 404.366,153.289 404.443,96.972 374.904,96.934 374.807,170.346 274.193,228.442 270.769,230.424 270.769,110.27 334.289,73.491 319.5,47.923 270.769,76.144 270.769,0 241.231,0 241.231,76.144 192.5,47.923 177.711,73.491 241.231,110.27 241.231,230.424 137.183,170.346 137.096,96.934 107.557,96.972 107.615,153.279 41.683,115.212 26.913,140.789 92.846,178.856 44.057,206.952 58.798,232.548 122.403,195.924 226.461,256 122.423,316.077 58.788,279.443 44.048,305.039 92.865,333.135 26.913,371.212 41.683,396.789 107.615,358.722 107.549,415.019 137.087,415.058 137.173,341.655 241.231,281.577 241.231,285.538 241.231,401.731 177.711,438.5 192.5,464.068 241.231,435.856 241.231,512 270.769,512 270.769,435.856 319.5,464.068 334.289,438.5 270.769,401.731 270.769,285.538 270.769,281.577 274.193,283.558 374.817,341.655 374.904,415.058 404.443,415.019 404.384,358.722 470.317,396.789 485.087,371.212 419.135,333.135'/>\</g>\</svg>");
}

/* 番号（1/2/3）を中央に重ねる */
.feature-warmcare h2::after{
  position:absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--c-brown);         /* 番号色（装飾ポイント色） */
  z-index: 1;
  pointer-events: none;
  content: "";                  /* セクションごとに下で上書き */
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke;
}

/* セクション別に番号を振る */
#room-heating h2::after  { content: "1"; }
#onkatsu h2::after       { content: "2"; }
#cold-prevent h2::after  { content: "3"; }

/* 画面幅でやや拡大 */
@media (min-width:640px){
  .feature-warmcare h2{ padding-left: 72px; }
  .feature-warmcare h2::before,
  .feature-warmcare h2::after{
    left: 10px; width: 52px; height: 52px;
  }
}
@media (min-width:1024px){
  .feature-warmcare h2{ padding-left: 80px; }
  .feature-warmcare h2::before,
  .feature-warmcare h2::after{
    left: 12px; width: 60px; height: 60px;
  }
}

/* h2バッジ（雪の結晶）をゆっくり回転 */
@keyframes fwc-spin-slow {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ベース：常時ゆっくり回転（40s/周） */
.feature-warmcare h2::before {
  transform-origin: center center;
  will-change: transform;
  animation: fwc-spin-slow 40s linear infinite;
}

/* 端末の省エネ/酔い対策：アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .feature-warmcare h2::before {
    animation: none;
  }
}

.feature-warmcare .fwc-cta--all {
  display: inline-block;
  width: 60%;
  padding: 12px;
  margin: 70px auto 0;
  font-size: 20px;
  font-weight: 700;
  border-radius: 7px;
  background-color: var(--c-pink);
  color: #fff;
}
@media screen and (max-width:768px){
  .feature-warmcare .fwc-cta--all {
    width: 90%;
  }
}
.feature-warmcare .fwc-cta--all:hover {
  opacity: 0.75;
}