@charset "UTF-8";

/* ============================================================
   暮らしの中のフタムラ化学 - ワイヤーフレームCSS
   ※ リセット・ヘッダ・フッタは サイト共通CSS（import.css）が担当
   ※ ワイヤーフレーム固有セクションのみ、モノクロで定義
   ※ サイトは html{font-size:62.5%}(=10px) のため px で指定
   ============================================================ */

/* ── マゼンタ：要確認箇所 ── */
.needs-confirm {
  color: #FF00FF;
  border-bottom: 1px dashed #FF00FF;
}

/* ── 共通見出し ── */
.wf-heading {
  font-size: 28px;
  font-weight: normal;
  color: #222;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: 0.06em;
  position: relative;
  padding-bottom: 24px;
}
.wf-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #004ea2;
}

/* ============================================================
   ① ファーストビュー（共通ページヘッダー形式）
   ============================================================ */
.wf-section-fv {
  background-image: url(img/contentsheader-bg.jpg);
  box-shadow: none;
}
.wf-section-fv .contentsimageheader__header,
.wf-section-fv .contentsimageheader__headersub {
  text-shadow: 0 0 10px #81ddf6, 0 0 20px #81ddf6, 0 0 30px #81ddf6, 0 0 40px #81ddf6, 0 0 50px #81ddf6, 0 0 60px #81ddf6;
}

/* ── イントロダクション ── */
.wf-section-intro {
  background: #fff;
  overflow: hidden;
}

.wf-intro-layout {
  display: flex;
  align-items: stretch;
}

.wf-intro-text {
  flex: 1;
  padding: 0 30px 0 max(20px, calc((100vw - 1440px) / 2 + 12px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.wf-breadcrumb {
  padding: 10px 0 15px;
  font-size: 1.2rem;
  color: #888;
  letter-spacing: 0.1em;
  background: #fff;
}
.wf-breadcrumb .contentswidth {
  text-align: right;
}
.wf-breadcrumb a,
.wf-breadcrumb a:link,
.wf-breadcrumb a:visited {
  color: #444;
  text-decoration: none;
}
.wf-breadcrumb a:hover {
  color: #444;
  text-decoration: underline;
}
.wf-breadcrumb span {
  color: #444;
}

.wf-intro-text {
  position: relative;
  flex: 1;
  z-index: 2;
  margin-right: -200px;
}
.wf-intro-text::before,
.wf-intro-text::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}
.wf-intro-text::before {
  top: 10px;
  left: -30px;
  width: 250px;
  height: 250px;
  background-image: url(img/hex-pattern-top.svg);
}
.wf-intro-text::after {
  bottom: -80px;
  right: 10px;
  width: 375px;
  height: 375px;
  background-image: url(img/hex-pattern-bottom.svg);
}
.wf-intro-text > * {
  position: relative;
  z-index: 1;
}

.wf-intro-text .wf-heading {
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  padding-bottom: 0;
}
.wf-intro-text .wf-heading::after {
  display: none;
}

.wf-intro-image {
  position: relative;
  width: 66%;
  flex-shrink: 0;
  overflow: hidden;
}
.wf-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}
.wf-intro-image .wf-intro-image-sp {
  display: none;
}
.wf-intro-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
  z-index: 1;
  pointer-events: none;
}

.wf-fv-sub {
  font-size: 18px;
  color: #444;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  text-align: left;
}

.wf-fv-desc {
  text-align: left;
  margin-top: 8px;
}

.wf-fv-desc p {
  font-size: 16px;
  line-height: 2;
  color: #333;
  margin-bottom: 20px;
}

/* ② イントロダクション — FVセクション内に統合済み */

/* ============================================================
   ③ 暮らしの中のフタムラ【8製品セクション】
   ============================================================ */
.wf-section-products {
  padding: 80px 0;
  background: url(img/products-section-bg.jpg) center center / cover no-repeat fixed;
  position: relative;
}
.wf-section-products::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.wf-section-products > .contentswidth {
  position: relative;
  z-index: 1;
}
.wf-section-products::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── 製品セクション リード文 ── */
.wf-products-lead {
  text-align: center;
  font-size: 16px;
  line-height: 2;
  color: #444;
  margin-bottom: 12px;
}

/* ── 円形UI（PC） ── */
.wf-circle-ui-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  min-height: 760px;
  position: relative;
}

.wf-circle-ui {
  position: relative;
  width: 750px;
  height: 750px;
  flex-shrink: 0;
  margin-left: -40px;
}

/* ナビゲーションヒント */
.wf-circle-nav-hint {
  text-align: center;
  font-size: 13px;
  color: #004497;
  background: #fff;
  border: 1px solid #004497;
  border-radius: 4px;
  padding: 12px 18px 12px 22px;
  margin: 0;
  width: fit-content;
  position: absolute;
  z-index: 2;
  animation: wf-hint-bounce 2s ease-in-out infinite;
  line-height: 1.3;
}
.wf-circle-nav-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #004497;
}
.wf-circle-nav-hint::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
  z-index: 1;
}
@keyframes wf-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 中央ロゴ */
.wf-circle-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  z-index: 1;
  pointer-events: none;
}
.wf-circle-center-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 円パルスアニメーション */
@keyframes wf-circle-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 68, 151, 0.08); }
  50% { box-shadow: 0 2px 16px rgba(0, 68, 151, 0.25); }
}

/* 製品ボタン */
.wf-circle-item {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #004497;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 78, 162, 0.08);
  overflow: hidden;
  animation: wf-circle-pulse 2.5s ease-in-out infinite;
}
.wf-circle-item.is-active {
  animation: none;
}

.wf-circle-item-icon {
  width: 50px;
  height: auto;
  margin-bottom: 4px;
  pointer-events: none;
  transition: filter 0.3s;
}

.wf-circle-item.is-active .wf-circle-item-icon {
  filter: brightness(0) invert(1);
}

.wf-circle-item:hover {
  background: #004497;
  border-color: #004497;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 78, 162, 0.15);
}
.wf-circle-item:hover .wf-circle-item-num,
.wf-circle-item:hover .wf-circle-item-label {
  color: #fff;
}
.wf-circle-item:hover .wf-circle-item-icon {
  filter: brightness(0) invert(1);
}

.wf-circle-item.is-active {
  background: #004497;
  border-color: #004497;
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 78, 162, 0.3);
}
.wf-circle-item.is-active .wf-circle-item-num,
.wf-circle-item.is-active .wf-circle-item-label {
  color: #fff;
}

.wf-circle-item-num {
  font-size: 13px;
  font-weight: 700;
  color: #004497;
  line-height: 1;
  margin-bottom: 3px;
}

.wf-circle-item-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

/* 中央円から各ボタンへの線（破線リング） */
.wf-circle-ui::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px dashed rgba(0, 78, 162, 0.25);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── 詳細パネル ── */
.wf-detail-panel {
  flex: 1;
  max-width: 700px;
  height: 950px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #004497;
  border-radius: 0;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.wf-detail-header {
  padding: 20px 28px;
  background: #004497;
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-detail-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.wf-detail-body {
  padding: 24px 28px;
}

.wf-detail-close {
  display: none;
}

.wf-detail-num {
  display: none;
}

.wf-detail-name {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

/* 共通製品パーツ */
.wf-product-catch {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.5;
}

.wf-product-image {
  width: 100%;
  height: 230px;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
.wf-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-product-desc {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 20px;
}

.wf-product-usage-heading {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #004ea2;
}

.wf-product-usage {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.wf-product-usage li {
  font-size: 14px;
  color: #555;
  padding: 0 0 0 20px;
  position: relative;
  line-height: 1.6;
}
.wf-product-usage-box {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
  margin-top: 8px;
}
.wf-product-usage-image {
  width: 100%;
  height: 230px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.wf-product-usage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wf-product-usage-box .wf-product-usage {
  margin: 0;
}

.wf-product-usage li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #4e8beb;
  border-radius: 50%;
}

/* ── SPアコーディオンカード ── */
.wf-sp-cards {
  display: none;
}

.wf-sp-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}

.wf-sp-card-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  gap: 12px;
  transition: background 0.2s;
}
.wf-sp-card-header:hover {
  background: rgba(0, 78, 162, 0.04);
}

.wf-sp-card-num {
  display: none;
}

.wf-sp-card-icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(2986%) hue-rotate(209deg) brightness(87%) contrast(101%);
}

.wf-sp-card-name {
  flex: 1;
  font-weight: 700;
  color: #222;
}

.wf-sp-card-toggle {
  font-size: 24px;
  color: #004ea2;
  font-weight: 300;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.wf-sp-card-header[aria-expanded="true"] {
  background: rgba(0, 78, 162, 0.04);
}

.wf-sp-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 20px;
}

.wf-sp-card-header[aria-expanded="true"] + .wf-sp-card-body {
  padding: 0 20px 20px;
}

/* ============================================================
   ④ 環境セクション
   ============================================================ */
.wf-section-env {
  padding: 80px 0;
  background: #fff;
  position: relative;
  z-index: 1;
}
.wf-section-env::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.wf-section-env::after {
  bottom: -200px;
  height: 200px;
  background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, #fff 100%);
}

.wf-env-lead {
  text-align: center;
  font-size: 16px;
  line-height: 2;
  color: #444;
  margin-bottom: 48px;
}

.wf-env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wf-env-card {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.wf-env-card-header {
  position: relative;
  margin: 0;
  padding: 30px 20px 40px;
  border: 1px solid #e3e4e5;
  background: #f9fafc;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #222;
  line-height: 1.5;
}
.wf-env-card-header::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  border-bottom: 1px solid #004ea2;
}

.wf-env-card-num {
  display: block;
  width: fit-content;
  margin: 0 auto 10px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #004ea2;
  padding: 2px 10px;
  border-radius: 20px;
}

.wf-env-card-body {
  padding: 20px;
  border: 1px solid #e3e4e5;
  border-top: none;
}

.wf-env-card-flex {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.wf-env-card-text {
  flex: 1;
}
.wf-env-card-text p {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

.wf-env-card-image {
  width: 45%;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
}
.wf-env-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   ⑤ CTAセクション
   ============================================================ */
.wf-section-cta {
  padding: 80px 0;
  background: url(img/cta-bg.jpg) center center / cover no-repeat;
  text-align: center;
  position: relative;
}
.wf-section-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.wf-section-cta > * {
  position: relative;
  z-index: 1;
}

.wf-cta-lead {
  font-size: 16px;
  color: #444;
  margin-bottom: 32px;
}

.wf-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wf-cta-button,
.wf-cta-button:link,
.wf-cta-button:visited {
  display: block;
  min-width: 280px;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.5);
  color: #004497 !important;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #004497;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.wf-cta-button:hover {
  background: #004497;
  color: #fff !important;
  text-decoration: none;
}
.wf-cta-icon {
  vertical-align: middle;
  position: relative;
  top: -2px;
  filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(2986%) hue-rotate(209deg) brightness(87%) contrast(101%);
  transition: filter 0.3s;
}
.wf-cta-icon--recruit {
  filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(2986%) hue-rotate(209deg) brightness(87%) contrast(101%);
}
.wf-cta-button:hover .wf-cta-icon {
  filter: brightness(0) invert(1);
}

/* ============================================================
   レスポンシブ（SP: 767px以下）
   ============================================================ */
@media screen and (max-width: 767px) {

  /* FV・イントロ */
  .wf-section-fv {
    background-image: url(img/contentsheader-bg-sp.jpg);
    background-size: cover;
    background-position: center center;
    padding: 30px 0 100px;
  }
  .wf-section-fv .contentswidth {
    padding: 0 16px;
  }
  .wf-intro-layout {
    flex-direction: column;
    min-height: auto;
  }
  .wf-intro-text {
    padding: 48px 16px;
    max-width: none;
    margin-left: 0;
    margin-right: 0 !important;
    overflow: visible;
  }
  .wf-intro-image {
    margin: 0;
  }
  .wf-intro-image {
    width: 100%;
    height: 250px;
  }
  .wf-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .wf-intro-image .wf-intro-image-pc {
    display: none;
  }
  .wf-intro-image .wf-intro-image-sp {
    display: block;
  }
  .wf-intro-text::before {
    width: 125px;
    height: 125px;
    top: 5px;
    left: -10px;
  }
  .wf-intro-text::after {
    width: 188px;
    height: 188px;
    bottom: -40px;
    right: 10px;
  }
  .wf-breadcrumb {
    padding: 12px 16px 20px;
  }
  .wf-intro-image::before {
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  }
  .wf-fv-sub {
    font-size: 16px;
  }
  .wf-fv-desc p br {
    display: none;
  }

  /* セクション共通 */
  .wf-heading {
    font-size: 22px;
    padding-bottom: 20px;
  }
  .wf-heading::after {
    width: 30px;
  }

  .wf-section-products,
  .wf-section-env,
  .wf-section-cta {
    padding: 48px 0;
  }

  .wf-products-lead br {
    display: none;
  }
  .wf-products-lead {
    text-align: left;
    padding: 0 16px;
  }
  .wf-circle-nav-hint {
    display: none;
  }

  /* 8製品 - 円形UI非表示、カード表示 */
  .wf-circle-ui-wrapper {
    display: none;
  }
  .wf-sp-cards {
    display: block;
    margin: 24px 16px 0;
  }
  .wf-sp-cards .wf-product-image,
  .wf-sp-cards .wf-product-usage-image {
    height: 140px;
  }

  /* 環境 */
  .wf-env-grid {
    grid-template-columns: 1fr;
  }
  .wf-env-lead {
    padding: 0 16px;
  }
  .wf-env-lead br {
    display: none;
  }
  .wf-env-card-header {
    padding: 20px 16px 30px;
    font-size: 16px;
  }
  .wf-env-card-flex {
    flex-direction: column;
  }
  .wf-env-card-image {
    width: 100%;
  }

  /* CTA */
  .wf-section-cta {
    background-image: url(img/cta-bg-sp.jpg);
  }
  .wf-cta-lead {
    padding: 0 16px;
  }
  .wf-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .wf-cta-button {
    width: 100%;
    max-width: 320px;
    min-width: auto;
    font-size: 1.6rem;
  }
}

/* ============================================================
   タブレット調整（768px〜1024px）
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  .wf-circle-ui-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .wf-circle-ui {
    width: 500px;
    height: 500px;
  }

  .wf-detail-panel {
    width: 100%;
    max-width: 500px;
    max-height: none;
  }
}

/* ============================================================
   パターン2：製品カテゴリ別カラーリング
   ============================================================ */
.wf-circle-item[data-product="1"] { border-color: #36C3BF; }
.wf-circle-item[data-product="2"] { border-color: #F3D51A; }
.wf-circle-item[data-product="3"] { border-color: #3F86E9; }
.wf-circle-item[data-product="4"] { border-color: #DA468E; }
.wf-circle-item[data-product="5"] { border-color: #FE9802; }
.wf-circle-item[data-product="6"] { border-color: #B758E2; }
.wf-circle-item[data-product="7"] { border-color: #81D038; }
.wf-circle-item[data-product="8"] { border-color: #503200; }

.wf-circle-item[data-product="1"]:hover,
.wf-circle-item[data-product="1"].is-active { background: #36C3BF; border-color: #36C3BF; box-shadow: 0 4px 20px rgba(54, 195, 191, 0.3); }
.wf-circle-item[data-product="2"]:hover,
.wf-circle-item[data-product="2"].is-active { background: #F3D51A; border-color: #F3D51A; box-shadow: 0 4px 20px rgba(243, 213, 26, 0.3); }
.wf-circle-item[data-product="3"]:hover,
.wf-circle-item[data-product="3"].is-active { background: #3F86E9; border-color: #3F86E9; box-shadow: 0 4px 20px rgba(63, 134, 233, 0.3); }
.wf-circle-item[data-product="4"]:hover,
.wf-circle-item[data-product="4"].is-active { background: #DA468E; border-color: #DA468E; box-shadow: 0 4px 20px rgba(218, 70, 142, 0.3); }
.wf-circle-item[data-product="5"]:hover,
.wf-circle-item[data-product="5"].is-active { background: #FE9802; border-color: #FE9802; box-shadow: 0 4px 20px rgba(254, 152, 2, 0.3); }
.wf-circle-item[data-product="6"]:hover,
.wf-circle-item[data-product="6"].is-active { background: #B758E2; border-color: #B758E2; box-shadow: 0 4px 20px rgba(183, 88, 226, 0.3); }
.wf-circle-item[data-product="7"]:hover,
.wf-circle-item[data-product="7"].is-active { background: #81D038; border-color: #81D038; box-shadow: 0 4px 20px rgba(129, 208, 56, 0.3); }
.wf-circle-item[data-product="8"]:hover,
.wf-circle-item[data-product="8"].is-active { background: #503200; border-color: #503200; box-shadow: 0 4px 20px rgba(80, 50, 0, 0.3); }

@keyframes wf-circle-pulse-1 { 0%, 100% { box-shadow: 0 2px 8px rgba(54, 195, 191, 0.08); } 50% { box-shadow: 0 2px 16px rgba(54, 195, 191, 0.25); } }
@keyframes wf-circle-pulse-2 { 0%, 100% { box-shadow: 0 2px 8px rgba(243, 213, 26, 0.08); } 50% { box-shadow: 0 2px 16px rgba(243, 213, 26, 0.25); } }
@keyframes wf-circle-pulse-3 { 0%, 100% { box-shadow: 0 2px 8px rgba(63, 134, 233, 0.08); } 50% { box-shadow: 0 2px 16px rgba(63, 134, 233, 0.25); } }
@keyframes wf-circle-pulse-4 { 0%, 100% { box-shadow: 0 2px 8px rgba(218, 70, 142, 0.08); } 50% { box-shadow: 0 2px 16px rgba(218, 70, 142, 0.25); } }
@keyframes wf-circle-pulse-5 { 0%, 100% { box-shadow: 0 2px 8px rgba(254, 152, 2, 0.08); } 50% { box-shadow: 0 2px 16px rgba(254, 152, 2, 0.25); } }
@keyframes wf-circle-pulse-6 { 0%, 100% { box-shadow: 0 2px 8px rgba(183, 88, 226, 0.08); } 50% { box-shadow: 0 2px 16px rgba(183, 88, 226, 0.25); } }
@keyframes wf-circle-pulse-7 { 0%, 100% { box-shadow: 0 2px 8px rgba(129, 208, 56, 0.08); } 50% { box-shadow: 0 2px 16px rgba(129, 208, 56, 0.25); } }
@keyframes wf-circle-pulse-8 { 0%, 100% { box-shadow: 0 2px 8px rgba(80, 50, 0, 0.08); } 50% { box-shadow: 0 2px 16px rgba(80, 50, 0, 0.25); } }

.wf-circle-item[data-product="1"] { animation: wf-circle-pulse-1 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="2"] { animation: wf-circle-pulse-2 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="3"] { animation: wf-circle-pulse-3 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="4"] { animation: wf-circle-pulse-4 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="5"] { animation: wf-circle-pulse-5 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="6"] { animation: wf-circle-pulse-6 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="7"] { animation: wf-circle-pulse-7 2.5s ease-in-out infinite; }
.wf-circle-item[data-product="8"] { animation: wf-circle-pulse-8 2.5s ease-in-out infinite; }

/* SPカード カラーリング */
.wf-sp-card[data-product="1"] .wf-sp-card-num,
.wf-sp-card[data-product="1"][aria-expanded="true"],
.wf-sp-card[data-product="1"] .wf-sp-card-toggle { color: #36C3BF; }
.wf-sp-card[data-product="2"] .wf-sp-card-toggle { color: #F3D51A; }
.wf-sp-card[data-product="3"] .wf-sp-card-toggle { color: #3F86E9; }
.wf-sp-card[data-product="4"] .wf-sp-card-toggle { color: #DA468E; }
.wf-sp-card[data-product="5"] .wf-sp-card-toggle { color: #FE9802; }
.wf-sp-card[data-product="6"] .wf-sp-card-toggle { color: #B758E2; }
.wf-sp-card[data-product="7"] .wf-sp-card-toggle { color: #81D038; }
.wf-sp-card[data-product="8"] .wf-sp-card-toggle { color: #503200; }

.wf-sp-card[data-product="1"] { border-top: 3px solid #36C3BF; }
.wf-sp-card[data-product="2"] { border-top: 3px solid #F3D51A; }
.wf-sp-card[data-product="3"] { border-top: 3px solid #3F86E9; }
.wf-sp-card[data-product="4"] { border-top: 3px solid #DA468E; }
.wf-sp-card[data-product="5"] { border-top: 3px solid #FE9802; }
.wf-sp-card[data-product="6"] { border-top: 3px solid #B758E2; }
.wf-sp-card[data-product="7"] { border-top: 3px solid #81D038; }
.wf-sp-card[data-product="8"] { border-top: 3px solid #503200; }

.wf-sp-card[data-product="1"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="2"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="3"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="4"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="5"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="6"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="7"] .wf-sp-card-icon { filter: none; }
.wf-sp-card[data-product="8"] .wf-sp-card-icon { filter: none; }

/* 吹き出しカラー */
.wf-circle-nav-hint {
  color: #004497;
  border-color: #004497;
}
.wf-circle-nav-hint::after {
  border-top-color: #004497;
}