/* ========== Winter Outing (no gradients/shadows) ========== */
.feature-warmcare{
  --c-pink: #E84B8B;      /* ボタン/アクセント */
  --c-pink-soft: #EEBEBF;
  --c-green: #2e907e;
  --c-green-soft: #84b9af;
  --c-beige: #F5E6D3;
  --c-blue: #477497;
  --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-green-soft);
  padding:24px 16px 28px;
  position:relative;
  box-shadow:  15px 20px var(--c-pink-soft);
}
/* 上辺にビーズ状の丸いあしらい */
.feature-warmcare .fwc-hero::before{
  content:"";
  position:absolute; left:14px; right:14px; top:-8px; height:16px;
  background: linear-gradient(90deg, var(--c-green-soft) 50%, transparent 50%) 0 0/30px 15px repeat-x;
}

.feature-warmcare .fwc-main{
  margin: 10px auto 30px;
}

.feature-warmcare h1{
  font-family: 'Zen Kaku Gothic New', "Noto Sans JP", "Noto Sans", sans-serif; 
  line-height:1.35;
  font-size: 40px;
  font-weight:900;
  color:var(--c-blue);
  text-align: center;
  white-space: nowrap;
  margin-bottom: 10px;
  text-shadow: 2px 2px var(--c-beige);
  position: relative;
  z-index: 1;
}
.feature-warmcare h1 span{
  font-size: 24px;
  color: var(--c-green);
}

.feature-warmcare h1::before,
.feature-warmcare h1::after {
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  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>");
  transform-origin: center center;
  will-change: transform;
  animation: fwc-spin-slow 40s linear infinite;
}
.feature-warmcare h1::before{ left: 10px;}
.feature-warmcare h1::after { right: 10px;}

@media screen and (max-width:768px){
  .feature-warmcare .fwc-main{
    flex-wrap: wrap;
  }
  .feature-warmcare h1 {
    font-size: 20px;
  }
  .feature-warmcare h1 span{
    font-size: 16px;
  }
  .feature-warmcare h1::before { top: 100px; left: -15px;}
  .feature-warmcare h1::after { top: 200px; right: -15px;}
}

.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:4px double var(--c-pink-soft);
  padding:18px 14px 80px;
  position:relative;
  box-shadow:  15px 20px var(--c-green-soft);
}

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

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

/* リード文 */
.feature-warmcare .fwc-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
}
.feature-warmcare .fwc-lead img {
  width: 50%;
  max-width: 240px;
  border-radius: 50%;
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
.feature-warmcare .fwc-lead p{
  margin:10px 0;
  line-height:1.9;
}
@media screen and (max-width:768px){
  .feature-warmcare .fwc-lead {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .feature-warmcare .fwc-section:nth-child(odd) .fwc-lead {
    flex-direction: column-reverse;
  }
  .feature-warmcare .fwc-lead img {
    width: 60%;
  }
}

/* アイテム画像群 */
.feature-warmcare .fwc-items{
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 60%;
  margin: 20px auto;
}
.feature-warmcare .fwc-items img{
  display: block;
  max-width: 150px;
  object-fit: cover;
}
.feature-warmcare .w200 img{
  max-width: 200px;
}
@media screen and (max-width:768px){
  .feature-warmcare .fwc-items{
    width: unset;
    gap: 10px;
    flex-wrap: wrap;
  }
  .feature-warmcare .fwc-items img{
    max-width: 120px;
  }
}

/* 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; }
@media (min-width:1024px){
  .feature-warmcare .fwc-section{ padding:22px 18px 36px; }
}

/* セクションの安全対策（デコや境界のはみ出し防止） */
.feature-warmcare .fwc-section{
  position: relative;
  overflow: hidden;
}

/* 画像等の上下ゆらぎアニメーション */
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

/* ===== Feature B: h2番号付与 ===== */
#stroller h2::after      { content: "1"; }  /* ベビーカー/抱っこ紐 */
#wearables h2::after     { content: "2"; }  /* 身につける防寒 */
#care h2::after          { content: "3"; }  /* 保湿・除菌 */
#others h2::after        { content: "4"; }  /* その他 */

/* ================== H2 左飾り：雪の結晶1 + 番号 ================== */
/* バッジ分の余白を作る */
.feature-warmcare h2{
  position: relative;
  padding-left: 64px;
  margin: 0;
  border-bottom: 2px dashed var(--c-green-soft);
}
/* 雪の結晶バッジ（背景：雪の結晶1） */
.feature-warmcare h2::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  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>");
}
/* 番号を中央に重ねる（上記 #stroller 等で数値を上書き） */
.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-blue); /* 番号色 */
  z-index: 1;
  pointer-events: none;
  content: "";
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke;
}

/* 画面幅でやや拡大 */
@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-outing  .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-outing  .fwc-cta--all {
    width: 90%;
  }
}
.feature-outing  .fwc-cta--all:hover {
  opacity: 0.75;
}