@charset "UTF-8";
/* Google Fonts - より特徴的で印象的なフォント */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800;900&display=swap");
/* CSS Variables */
:root {
  --text: #333333;
  --bg: #000000;
  --highlight-bg: #ffcc00;
  --scramble-color: #ff6b35;
  --type-line-opacity: 0.05;
}

/* Background Frame */
.background-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Bottom Gradient - ヒーローセクション内のみ */
.hero .bottom-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 25%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Background Image - ヒーローセクション内のみ */
.hero .background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity 0.8s ease-in-out;
  /* コントラスト調整用のオーバーレイ */
}
.hero .background-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero .background-image.default {
  background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px), url("../images/sales_dp_images/hero_bg_3p.webp");
  background-size: 2px 2px, cover;
  background-position: 0 0, center;
  opacity: 1;
  filter: contrast(1.5) brightness(1.1) saturate(1.2) hue-rotate(15deg) sepia(0.1);
  /* 上部はカラー、下部はグレースケールのグラデーションマスク */
  mask: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.3) 100%);
  /* グレースケール効果を下部に適用 */
}
.hero .background-image.default::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(120, 120, 120, 0.9) 3px, rgba(120, 120, 120, 0.9) 6px), url("../images/sales_dp_images/hero_bg_3p.webp");
  background-size: 6px 6px, cover;
  background-position: 0 0, center;
  filter: contrast(0.8) brightness(1.1) saturate(1.2) hue-rotate(15deg) sepia(0.1) grayscale(0.2);
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.7) 100%);
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.7) 100%);
  z-index: -1;
}

/* Text Background Container - ヒーローセクション内のみ（ナビゲーション80pxと下部270pxを避ける） */
.hero .text-background {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 350px);
  z-index: 2;
  pointer-events: auto;
}

/* Text Items */
.text-item {
  position: absolute;
  color: #ffffff;
  font-size: 0.8rem;
  text-transform: uppercase;
  opacity: 1;
  white-space: nowrap;
  font-family: "Orbitron", "Rajdhani", "Exo 2", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  z-index: 5;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, background 0.3s ease; /* width を除外 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8), 1px -1px 2px rgba(0, 0, 0, 0.8), -1px 1px 2px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: max-content; /* 初期状態（英語）の幅に固定 */
  min-width: max-content; /* 最小幅も固定 */
  /* 日本語表示時の文字間隔を広げる（EFFICIENCYの各文字は除外） */
  /* EFFICIENCYの各文字にmin-widthを設定 */
}
.text-item[data-japanese]:not([data-text=E]):not([data-text=F]):not([data-text=I]):not([data-text=C]):not([data-text=N]):not([data-text=Y]) {
  letter-spacing: 0.4em;
}
.text-item[data-text=E], .text-item[data-text=F], .text-item[data-text=I], .text-item[data-text=C], .text-item[data-text=N], .text-item[data-text=Y] {
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-item::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: repeating-linear-gradient(45deg, transparent 0px, transparent 1px, rgba(255, 255, 255, 0.3) 1px, rgba(255, 255, 255, 0.3) 2px);
  background-size: 3px 3px;
  z-index: -1;
}

.text-item::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  width: 0;
  height: calc(100% + 4px);
  background-color: var(--highlight-bg);
  z-index: 1;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-item.highlight::after {
  width: calc(100% + 8px);
}

.text-item.highlight-reverse::after {
  width: 0;
  right: -4px;
  left: auto;
}

/* スクランブル文字用のスタイル */
.scramble-char {
  color: var(--scramble-color) !important;
  font-weight: bold;
  display: inline-block;
}

/* ネットワーク線の残像エフェクト */
.network-line {
  filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.5)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.3)) drop-shadow(0 0 9px rgba(0, 255, 136, 0.1));
  position: relative;
}

/* 流れ星の軌跡はJavaScriptでSVG要素として実装 */
/* Kinetic Type (empty placeholder) - ヒーローセクション内のみ */
.hero .type {
  position: absolute;
  height: 100vmax;
  width: 100vmax;
  text-transform: uppercase;
  display: none;
  justify-content: center;
  align-content: center;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -50vmax;
  margin-left: -50vmax;
  will-change: transform;
  z-index: 5;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Mobile Optimization */
/* For tablets and smaller screens */
@media screen and (max-width: 992px) {
  .text-item {
    font-size: 0.75rem;
  }
}
/* タブレット用（769px-1024px） - EFFICIENCYの位置調整 */
@media (min-width: 769px) and (max-width: 1024px) {
  /* EFFICIENCYの各文字のtopを40%に調整（leftは変更しない） */
  .text-item[data-text=E],
  .text-item[data-text=F],
  .text-item[data-text=I],
  .text-item[data-text=C],
  .text-item[data-text=N],
  .text-item[data-text=Y] {
    top: 40% !important;
  }
}
/* For mobile phones */
@media screen and (max-width: 768px) {
  .text-background {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(8, 1fr) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    justify-items: center !important; /* 各列でセンタリング */
  }
  .text-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    font-size: 0.7rem;
    height: 32px; /* 高さを制限 */
    line-height: 32px; /* 垂直中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: max-content !important; /* 英語の幅に固定 */
    min-width: max-content !important; /* 最小幅も固定 */
  }
  /* 12文字以上のキーワードを非表示（!important必須） */
  .text-item[data-text="CUSTOMER FOCUS"],
  .text-item[data-text=PROFESSIONAL],
  .text-item[data-text=COMMUNICATION],
  .text-item[data-text=COLLABORATION],
  .text-item[data-text=PARTNERSHIP],
  .text-item[data-text=RESPONSIVENESS],
  .text-item[data-text=SUSTAINABILITY],
  .text-item[data-text="COST CONTROL"],
  .text-item[data-text=STREAMLINING],
  .text-item[data-text=E],
  .text-item[data-text=F],
  .text-item[data-text=I],
  .text-item[data-text=C],
  .text-item[data-text=N],
  .text-item[data-text=Y] {
    display: none !important; /* display: flex を上書き */
  }
}
/* For very small screens */
@media screen and (max-width: 480px) {
  .text-background {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(12, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    justify-items: center !important; /* 各列でセンタリング */
  }
  .text-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    font-size: 0.6rem;
    height: 28px; /* 高さを制限 */
    line-height: 28px; /* 垂直中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: max-content !important; /* 英語の幅に固定 */
    min-width: max-content !important; /* 最小幅も固定 */
  }
  /* 480px以下でも同じキーワードを非表示（重複して指定） */
  .text-item[data-text="CUSTOMER FOCUS"],
  .text-item[data-text=PROFESSIONAL],
  .text-item[data-text=COMMUNICATION],
  .text-item[data-text=COLLABORATION],
  .text-item[data-text=PARTNERSHIP],
  .text-item[data-text=RESPONSIVENESS],
  .text-item[data-text=SUSTAINABILITY],
  .text-item[data-text="COST CONTROL"],
  .text-item[data-text=STREAMLINING],
  .text-item[data-text=E],
  .text-item[data-text=F],
  .text-item[data-text=I],
  .text-item[data-text=C],
  .text-item[data-text=N],
  .text-item[data-text=Y] {
    display: none !important;
  }
}
/* =============================
   Popup (Magnific) - dp_test互換
   ============================= */
.white-popup {
  background: #ffffff;
  padding: clamp(16px, 2.5vw, 28px);
  position: relative;
  max-width: min(900px, 92vw);
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  line-height: 1.7;
  color: var(--clr-text-base, #333);
  max-height: none !important; /* 高さ制限を完全に解除 */
}

.white-popup .popup-content {
  max-height: min(70vh, 720px);
  overflow: auto;
}

/* フレックスレイアウト関連のスタイルは shortcode-styles.css に移行済み */
.white-popup img,
.white-popup video,
.white-popup iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.white-popup h1,
.white-popup h2,
.white-popup h3,
.white-popup h4 {
  margin: 0 0 0.8em;
  line-height: 1.3;
}

.white-popup p {
  margin: 0 0 1em;
}

.white-popup hr {
  margin: 1.25em 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Magnific close button inside white-popup */
.white-popup .mfp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: rgba(0, 0, 0, 0.06);
  color: #222;
  border-radius: 50%;
}

/* =============================
   dp_test互換: mfp-content 内ユーティリティ
   - JSON内の popup_content が使用する簡易グリッド
   ============================= */
/* mfp-content と white-popup 両方でユーティリティが効くようにスコープを拡張 */
.mfp-content, .white-popup {
  /* base flex */
  /* 簡易グリッド（flex_1〜flex_10 × bw_0〜bw_25）: ページ内専用・dp_test移植ではなく現行仕様に最適化 */
  /* 余白指定（bw_0〜bw_25）: CSSカスタムプロパティで適用 */
  /* 画像の最大化 */
}
.mfp-content .flex, .white-popup .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0; /* dp_testは余白をクラスで制御 */
}
.mfp-content .flex.flex_1 > *, .white-popup .flex.flex_1 > * {
  width: calc((100% - (1 - 1) * var(--bw-percent, 0%)) / 1);
  flex: 0 0 calc((100% - (1 - 1) * var(--bw-percent, 0%)) / 1);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_1 > *:not(:nth-child(1n)), .white-popup .flex.flex_1 > *:not(:nth-child(1n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_1 > *:nth-child(1n), .white-popup .flex.flex_1 > *:nth-child(1n) {
  margin-right: 0;
}
.mfp-content .flex.flex_1 > *:last-child, .white-popup .flex.flex_1 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_2 > *, .white-popup .flex.flex_2 > * {
  width: calc((100% - (2 - 1) * var(--bw-percent, 0%)) / 2);
  flex: 0 0 calc((100% - (2 - 1) * var(--bw-percent, 0%)) / 2);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_2 > *:not(:nth-child(2n)), .white-popup .flex.flex_2 > *:not(:nth-child(2n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_2 > *:nth-child(2n), .white-popup .flex.flex_2 > *:nth-child(2n) {
  margin-right: 0;
}
.mfp-content .flex.flex_2 > *:last-child, .white-popup .flex.flex_2 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_3 > *, .white-popup .flex.flex_3 > * {
  width: calc((100% - (3 - 1) * var(--bw-percent, 0%)) / 3);
  flex: 0 0 calc((100% - (3 - 1) * var(--bw-percent, 0%)) / 3);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_3 > *:not(:nth-child(3n)), .white-popup .flex.flex_3 > *:not(:nth-child(3n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_3 > *:nth-child(3n), .white-popup .flex.flex_3 > *:nth-child(3n) {
  margin-right: 0;
}
.mfp-content .flex.flex_3 > *:last-child, .white-popup .flex.flex_3 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_4 > *, .white-popup .flex.flex_4 > * {
  width: calc((100% - (4 - 1) * var(--bw-percent, 0%)) / 4);
  flex: 0 0 calc((100% - (4 - 1) * var(--bw-percent, 0%)) / 4);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_4 > *:not(:nth-child(4n)), .white-popup .flex.flex_4 > *:not(:nth-child(4n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_4 > *:nth-child(4n), .white-popup .flex.flex_4 > *:nth-child(4n) {
  margin-right: 0;
}
.mfp-content .flex.flex_4 > *:last-child, .white-popup .flex.flex_4 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_5 > *, .white-popup .flex.flex_5 > * {
  width: calc((100% - (5 - 1) * var(--bw-percent, 0%)) / 5);
  flex: 0 0 calc((100% - (5 - 1) * var(--bw-percent, 0%)) / 5);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_5 > *:not(:nth-child(5n)), .white-popup .flex.flex_5 > *:not(:nth-child(5n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_5 > *:nth-child(5n), .white-popup .flex.flex_5 > *:nth-child(5n) {
  margin-right: 0;
}
.mfp-content .flex.flex_5 > *:last-child, .white-popup .flex.flex_5 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_6 > *, .white-popup .flex.flex_6 > * {
  width: calc((100% - (6 - 1) * var(--bw-percent, 0%)) / 6);
  flex: 0 0 calc((100% - (6 - 1) * var(--bw-percent, 0%)) / 6);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_6 > *:not(:nth-child(6n)), .white-popup .flex.flex_6 > *:not(:nth-child(6n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_6 > *:nth-child(6n), .white-popup .flex.flex_6 > *:nth-child(6n) {
  margin-right: 0;
}
.mfp-content .flex.flex_6 > *:last-child, .white-popup .flex.flex_6 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_7 > *, .white-popup .flex.flex_7 > * {
  width: calc((100% - (7 - 1) * var(--bw-percent, 0%)) / 7);
  flex: 0 0 calc((100% - (7 - 1) * var(--bw-percent, 0%)) / 7);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_7 > *:not(:nth-child(7n)), .white-popup .flex.flex_7 > *:not(:nth-child(7n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_7 > *:nth-child(7n), .white-popup .flex.flex_7 > *:nth-child(7n) {
  margin-right: 0;
}
.mfp-content .flex.flex_7 > *:last-child, .white-popup .flex.flex_7 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_8 > *, .white-popup .flex.flex_8 > * {
  width: calc((100% - (8 - 1) * var(--bw-percent, 0%)) / 8);
  flex: 0 0 calc((100% - (8 - 1) * var(--bw-percent, 0%)) / 8);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_8 > *:not(:nth-child(8n)), .white-popup .flex.flex_8 > *:not(:nth-child(8n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_8 > *:nth-child(8n), .white-popup .flex.flex_8 > *:nth-child(8n) {
  margin-right: 0;
}
.mfp-content .flex.flex_8 > *:last-child, .white-popup .flex.flex_8 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_9 > *, .white-popup .flex.flex_9 > * {
  width: calc((100% - (9 - 1) * var(--bw-percent, 0%)) / 9);
  flex: 0 0 calc((100% - (9 - 1) * var(--bw-percent, 0%)) / 9);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_9 > *:not(:nth-child(9n)), .white-popup .flex.flex_9 > *:not(:nth-child(9n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_9 > *:nth-child(9n), .white-popup .flex.flex_9 > *:nth-child(9n) {
  margin-right: 0;
}
.mfp-content .flex.flex_9 > *:last-child, .white-popup .flex.flex_9 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.flex_10 > *, .white-popup .flex.flex_10 > * {
  width: calc((100% - (10 - 1) * var(--bw-percent, 0%)) / 10);
  flex: 0 0 calc((100% - (10 - 1) * var(--bw-percent, 0%)) / 10);
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1em;
}
.mfp-content .flex.flex_10 > *:not(:nth-child(10n)), .white-popup .flex.flex_10 > *:not(:nth-child(10n)) {
  margin-right: var(--bw-percent, 0%);
}
.mfp-content .flex.flex_10 > *:nth-child(10n), .white-popup .flex.flex_10 > *:nth-child(10n) {
  margin-right: 0;
}
.mfp-content .flex.flex_10 > *:last-child, .white-popup .flex.flex_10 > *:last-child {
  margin-right: 0;
}
.mfp-content .flex.bw_0, .white-popup .flex.bw_0 {
  --bw-percent: 0%;
}
.mfp-content .flex.bw_1, .white-popup .flex.bw_1 {
  --bw-percent: 1%;
}
.mfp-content .flex.bw_2, .white-popup .flex.bw_2 {
  --bw-percent: 2%;
}
.mfp-content .flex.bw_3, .white-popup .flex.bw_3 {
  --bw-percent: 3%;
}
.mfp-content .flex.bw_4, .white-popup .flex.bw_4 {
  --bw-percent: 4%;
}
.mfp-content .flex.bw_5, .white-popup .flex.bw_5 {
  --bw-percent: 5%;
}
.mfp-content .flex.bw_6, .white-popup .flex.bw_6 {
  --bw-percent: 6%;
}
.mfp-content .flex.bw_7, .white-popup .flex.bw_7 {
  --bw-percent: 7%;
}
.mfp-content .flex.bw_8, .white-popup .flex.bw_8 {
  --bw-percent: 8%;
}
.mfp-content .flex.bw_9, .white-popup .flex.bw_9 {
  --bw-percent: 9%;
}
.mfp-content .flex.bw_10, .white-popup .flex.bw_10 {
  --bw-percent: 10%;
}
.mfp-content .flex.bw_11, .white-popup .flex.bw_11 {
  --bw-percent: 11%;
}
.mfp-content .flex.bw_12, .white-popup .flex.bw_12 {
  --bw-percent: 12%;
}
.mfp-content .flex.bw_13, .white-popup .flex.bw_13 {
  --bw-percent: 13%;
}
.mfp-content .flex.bw_14, .white-popup .flex.bw_14 {
  --bw-percent: 14%;
}
.mfp-content .flex.bw_15, .white-popup .flex.bw_15 {
  --bw-percent: 15%;
}
.mfp-content .flex.bw_16, .white-popup .flex.bw_16 {
  --bw-percent: 16%;
}
.mfp-content .flex.bw_17, .white-popup .flex.bw_17 {
  --bw-percent: 17%;
}
.mfp-content .flex.bw_18, .white-popup .flex.bw_18 {
  --bw-percent: 18%;
}
.mfp-content .flex.bw_19, .white-popup .flex.bw_19 {
  --bw-percent: 19%;
}
.mfp-content .flex.bw_20, .white-popup .flex.bw_20 {
  --bw-percent: 20%;
}
.mfp-content .flex.bw_21, .white-popup .flex.bw_21 {
  --bw-percent: 21%;
}
.mfp-content .flex.bw_22, .white-popup .flex.bw_22 {
  --bw-percent: 22%;
}
.mfp-content .flex.bw_23, .white-popup .flex.bw_23 {
  --bw-percent: 23%;
}
.mfp-content .flex.bw_24, .white-popup .flex.bw_24 {
  --bw-percent: 24%;
}
.mfp-content .flex.bw_25, .white-popup .flex.bw_25 {
  --bw-percent: 25%;
}
.mfp-content .flex img, .white-popup .flex img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .mfp-content [class*=flex_] > *, .white-popup [class*=flex_] > * {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* 旧・網羅強制上書きは削除（現行の簡易グリッドへ統一） */
/* =============================================
   プラント営業部（sales_dp）専用スタイル（暫定）
   - ページ固有のカラートークンと最小レイアウト
   - 画像レス/余白大きめ/軽量モーション前提
   ============================================= */
/* =============================================
   プラント営業部お知らせスライダー
   - 現在のページデザインに合わせた統一感
   - カード形式のレイアウト
   - レスポンシブ対応
   ============================================= */
.plant-news {
  padding: clamp(60px, 8vw, 100px) 0;
  background: linear-gradient(135deg, var(--clr-surface-muted) 0%, var(--clr-surface-base) 100%);
}
.plant-news .section-header {
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 72px);
}
.plant-news .section-header .section-title {
  color: var(--clr-text-strong);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  text-align: center;
}

.plant-news-body {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
}

.plant-news-slider {
  position: relative;
  width: 100%;
}
.plant-news-slider .splide__track {
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
.plant-news-slider .splide__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
.plant-news-slider .splide__list--center {
  justify-content: center;
}
.plant-news-slider .splide__slide {
  flex: 0 0 auto;
  padding: 0 12px;
  height: 100%;
  width: var(--slide-width, auto) !important;
  max-width: var(--slide-width, none);
  aspect-ratio: 16/9;
  position: relative;
}
.plant-news-slider .splide__slide:first-child {
  padding-left: 0;
}
.plant-news-slider .splide__slide:last-child {
  padding-right: 0;
}
@media (max-width: 1024px) {
  .plant-news-slider .splide__slide {
    width: var(--slide-width-tablet, auto) !important;
    max-width: var(--slide-width-tablet, none);
  }
}

.plant-news-card {
  background: var(--clr-surface-base);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plant-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  z-index: 10;
}
@media (min-width: 1025px) {
  .plant-news-card:hover__content {
    padding: calc(1.5rem + 6px) calc(1.5rem + 4px);
  }
}
.plant-news-card--empty {
  text-align: center;
  padding: 3rem 2rem;
}
.plant-news-card--empty .plant-news-card__title {
  color: var(--clr-text-muted);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.plant-news-card--empty .plant-news-card__description {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}
.plant-news-card__image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
  min-height: 200px;
}
.plant-news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-news-card__image:hover img {
  transform: scale(1.05);
}
@media (min-width: 1025px) {
  .plant-news-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .plant-news-card__content {
    position: relative;
    z-index: 2;
    background: transparent;
    height: var(--slide-height, 100%);
    overflow: hidden;
    font-size: var(--slide-font-size, 16px);
  }
  .plant-news-card[data-slide-type=inline_popup] .plant-news-card__content, .plant-news-card[data-slide-type=pdf_popup] .plant-news-card__content, .plant-news-card[data-slide-type=youtube_video] .plant-news-card__content {
    cursor: pointer;
  }
  .plant-news-card__action {
    display: none;
  }
  .plant-news-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 100px solid var(--category-color, var(--clr-primary));
    border-left: 100px solid transparent;
    opacity: 0.95;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
  }
  .plant-news-card::after {
    content: attr(data-category);
    position: absolute;
    bottom: 31px;
    right: 3px;
    color: var(--category-text-color, white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1em;
    z-index: 4;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transform: rotate(-45deg);
    transform-origin: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 1rem;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  }
  .plant-news-card:hover::before {
    border-bottom: 800px solid color-mix(in srgb, var(--category-color, var(--clr-primary)) 92%, black 8%);
    border-left: 800px solid transparent;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .plant-news-card:hover::after {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .plant-news-card:hover .plant-news-card__action {
    display: none;
  }
}
.plant-news-card__date-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.9375rem; /* 15px - 可読性向上 */
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0.3px;
  z-index: 5;
}
@media (max-width: 768px) {
  .plant-news-card__date-badge {
    bottom: 20px;
  }
}
@media (min-width: 1025px) {
  .plant-news-card__date-badge {
    transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }
}
.plant-news-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--clr-danger);
  color: white;
  font-size: 0.9375rem; /* 15px - 可読性向上 */
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
}
@media (min-width: 1025px) {
  .plant-news-card__badge {
    transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }
}
@media (min-width: 1025px) {
  .plant-news-card:hover .plant-news-card__date-badge, .plant-news-card:hover .plant-news-card__badge {
    opacity: 0;
  }
}
.plant-news-card__content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1025px) {
  .plant-news-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    padding: 15px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent;
    z-index: 5;
  }
  .plant-news-card:not(:hover) .plant-news-card__content {
    transition-delay: 0s;
  }
  .plant-news-card__content h3 {
    padding: 20px 0 0;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 6;
    font-size: var(--slide-font-size, 16px);
  }
  .plant-news-card__content .plant-news-card__date {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 1rem;
    position: relative;
    z-index: 6;
    font-size: calc(var(--slide-font-size, 16px) * 0.875);
  }
  .plant-news-card__content .plant-news-card__action {
    margin-top: auto;
    position: relative;
    z-index: 6;
  }
}
@media (min-width: 1025px) {
  .plant-news-card:hover .plant-news-card__content {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
    z-index: 10;
  }
}
.plant-news-card__title {
  color: var(--clr-text-strong);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  flex: 1;
  text-decoration: none;
}
.plant-news-card__title a {
  color: inherit;
  text-decoration: none;
}
.plant-news-card__title a:hover {
  color: inherit;
}
.plant-news-card__date {
  color: var(--clr-text-muted);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.plant-news-card__action {
  margin-top: auto;
}
.plant-news-card__button {
  background: var(--clr-primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plant-news-card__button:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}
.plant-news-card__button, .plant-news-card__button:link, .plant-news-card__button:visited {
  background: var(--clr-primary);
  color: white;
  text-decoration: none;
}
.plant-news-card__button:hover {
  background: var(--clr-primary-hover);
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}
.plant-news-card__button:active {
  transform: translateY(0);
}
.plant-news-card__button:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* スライダーナビゲーション */
.plant-news-slider .splide__arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  pointer-events: none;
}
.plant-news-slider .splide__arrows .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-surface-base);
  border: 1px solid var(--clr-line);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}
.plant-news-slider .splide__arrows .splide__arrow:hover {
  background: var(--clr-primary);
  color: white;
  border-color: var(--clr-primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.plant-news-slider .splide__arrows .splide__arrow--prev {
  left: -10px;
}
.plant-news-slider .splide__arrows .splide__arrow--next {
  right: -10px;
}
.plant-news-slider .splide__arrows .splide__arrow .material-symbols-outlined {
  font-size: 1.5rem;
}
.plant-news-slider .splide__pagination {
  text-align: center;
  margin-top: 2rem;
}
@media (min-width: 769px) {
  .plant-news-slider .splide__pagination {
    display: none;
  }
}
@media (max-width: 768px) {
  .plant-news-slider .splide__pagination {
    display: block;
    bottom: -2.5em;
  }
}
.plant-news-slider .splide__pagination .splide__pagination__list {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.plant-news-slider .splide__pagination .splide__pagination__page {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-line);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-news-slider .splide__pagination .splide__pagination__page.is-active {
  background: var(--clr-primary);
  transform: scale(1.2);
}
.plant-news-slider .splide__pagination .splide__pagination__page:hover {
  background: var(--clr-primary-light);
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .plant-news-slider .splide__arrows .splide__arrow {
    width: 44px;
    height: 44px;
  }
  .plant-news-slider .splide__arrows .splide__arrow--prev {
    left: -8px;
  }
  .plant-news-slider .splide__arrows .splide__arrow--next {
    right: -8px;
  }
}
@media (max-width: 768px) {
  .plant-news {
    padding: clamp(40px, 6vw, 60px) 0;
  }
  .plant-news-slider .splide__arrows {
    display: none;
  }
  .plant-news-slider .splide__slide {
    padding: 0 8px;
  }
  .plant-news-slider .splide__track {
    overflow-y: hidden;
  }
  .plant-news-card__image {
    height: 200px !important;
    aspect-ratio: none !important;
    min-height: 200px;
    max-height: 200px;
  }
  .plant-news-card__content {
    padding: 1.25rem;
  }
  .plant-news-card__title {
    font-size: 1rem;
  }
  .plant-news-card__button {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* カラートークン（ページ専用） */
body.sales-dp {
  /* コア - 千葉産業ブランドカラー（信頼性・成功・温かみ強化・WCAG AA準拠） */
  --clr-primary: #0B5A42; /* WCAG AA準拠：より深い緑（コントラスト比4.5:1以上） */
  --clr-primary-hover: #084A35; /* ホバー時の深い緑（コントラスト比強化） */
  --clr-primary-soft: #E0F2ED; /* アクセシブルな薄い緑（コントラスト比確保） */
  --clr-primary-light: #9DD1B8; /* アクセシブルな明るい緑 */
  --clr-secondary: #1A3F6B; /* WCAG AA準拠：より深いネイビー（コントラスト比4.5:1以上） */
  --clr-secondary-hover: #143355;
  --clr-secondary-soft: #E1EAF5; /* アクセシブルな薄いブルー */
  /* 中立色（WCAG AA準拠・コントラスト比改善） */
  --clr-text-strong: #0A0F1A; /* WCAG AA準拠：より深い黒（コントラスト比7:1以上） */
  --clr-text-body: #1E293B; /* WCAG AA準拠：より濃いスレート（コントラスト比4.5:1以上） */
  --clr-text-muted: #475569; /* WCAG AA準拠：より濃いグレー（コントラスト比4.5:1以上） */
  --clr-surface-base: #FFFFFF; /* 白 */
  --clr-surface-muted: #F8FAFC; /* ごく薄い灰 */
  --clr-line: #E2E8F0; /* 薄い灰（境界） */
  /* 状態/アクセント（WCAG AA準拠・コントラスト比改善） */
  --clr-info: #1A4A7A; /* WCAG AA準拠：より深いブルー（コントラスト比4.5:1以上） */
  --clr-success: #0B5A42; /* WCAG AA準拠：ブランドカラーと統一（コントラスト比4.5:1以上） */
  --clr-warning: #9A6B0A; /* WCAG AA準拠：より深いゴールド（コントラスト比4.5:1以上） */
  --clr-danger: #991B1B; /* WCAG AA準拠：より深い赤（コントラスト比4.5:1以上） */
  --clr-accent-lime: #6B8E23; /* WCAG AA準拠：より深い黄緑（コントラスト比4.5:1以上） */
  --clr-accent-teal: #0B5A42; /* WCAG AA準拠：ブランドカラーと統一 */
  --clr-accent-gold: #9A6B0A; /* WCAG AA準拠：より深いゴールド（コントラスト比4.5:1以上） */
  --clr-accent-orange: #C2410C; /* WCAG AA準拠：より深いオレンジ（コントラスト比4.5:1以上） */
  /* ============= タイポグラフィ変数（統一基準） ============= */
  /* フォントサイズ階層（1.618の黄金比ベース） */
  --font-size-xs: 0.75rem; /* 12px - キャプション */
  --font-size-sm: 0.875rem; /* 14px - 小見出し */
  --font-size-base: 1rem; /* 16px - 本文基準 */
  --font-size-lg: 1.125rem; /* 18px - リード文 */
  --font-size-xl: 1.5rem; /* 24px - 小見出し */
  --font-size-2xl: 2.25rem; /* 36px - 中見出し */
  --font-size-3xl: 3.5rem; /* 56px - 大見出し */
  --font-size-4xl: 5.5rem; /* 88px - セクションタイトル */
  --font-size-5xl: 8.5rem; /* 136px - ヒーロータイトル */
  /* 行間設計（読みやすさ重視） */
  --line-height-tight: 1.1; /* タイトル用 */
  --line-height-snug: 1.3; /* 小見出し用 */
  --line-height-normal: 1.5; /* 本文用 */
  --line-height-relaxed: 1.7; /* リード文用 */
  --line-height-loose: 2.0; /* 長文用 */
  /* 字間調整（視認性向上） */
  --letter-spacing-tight: -0.025em; /* 大見出し */
  --letter-spacing-normal: 0; /* 本文 */
  --letter-spacing-wide: 0.025em; /* 小見出し */
  --letter-spacing-wider: 0.05em; /* キャプション */
  /* 段落間隔システム（8px基準） */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4rem; /* 64px */
  --space-3xl: 6rem; /* 96px */
  --space-4xl: 8rem; /* 128px */
  /* 色彩階層システム（WCAG AA準拠・重要度別視覚的区別強化） */
  --importance-critical: var(--clr-primary); /* 最重要：WCAG AA準拠ブランドカラー */
  --importance-critical-bg: var(--clr-primary-soft); /* 最重要背景：アクセシブルな薄いブランドカラー */
  --importance-high: var(--clr-text-strong); /* 重要：WCAG AA準拠濃いグレー（コントラスト比7:1以上） */
  --importance-high-bg: rgba(10, 15, 26, 0.08); /* 重要背景：WCAG AA準拠薄いグレー */
  --importance-medium: var(--clr-text-body); /* 普通：WCAG AA準拠標準グレー（コントラスト比4.5:1以上） */
  --importance-medium-bg: rgba(30, 41, 59, 0.05); /* 普通背景：WCAG AA準拠極薄いグレー */
  --importance-low: var(--clr-text-muted); /* 低：WCAG AA準拠薄いグレー（コントラスト比4.5:1以上） */
  --importance-low-bg: rgba(71, 85, 105, 0.04); /* 低背景：WCAG AA準拠極薄いグレー */
  /* アニメーション設定（2025年トレンド・最適化された滑らかなアニメーション） */
  --animation-duration-fast: 0.25s;
  --animation-duration-normal: 0.5s;
  --animation-duration-slow: 0.75s;
  --animation-easing: cubic-bezier(0.23, 1, 0.32, 1); /* より自然なイージング */
  --animation-easing-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* より滑らか */
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --animation-easing-gentle: cubic-bezier(0.4, 0, 0.2, 1); /* 控えめな動き */
  --animation-easing-dramatic: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ドラマチックな動き */
  /* オフセット変数 */
  --offset-small: 10px;
  --offset-medium: 15px;
  --offset-large: 20px;
  /* オーバーラップ量（PCのみ使用） */
  --overlap-gap: 6px;
  /* ゴーストワード不透明度（セクション上書き可） */
  --ghost-word-opacity: 0.06;
}

/* タイポ/余白の初期値（ページ基準） */
body.sales-dp {
  color: var(--clr-text-body);
  background: var(--clr-surface-base);
  /* スムーズスクロール設定 */
  scroll-behavior: smooth;
  /* アクセシビリティ配慮 */
}
@media (prefers-reduced-motion: reduce) {
  body.sales-dp {
    /* キネティックタイポグラフィを無効化 */
  }
  body.sales-dp * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.sales-dp .section-title,
  body.sales-dp .section-eyebrow,
  body.sales-dp .trouble-item,
  body.sales-dp .strength-item,
  body.sales-dp .category-item,
  body.sales-dp .stat-number,
  body.sales-dp .section-header.header-ghost .ghost-word,
  body.sales-dp .intro-text,
  body.sales-dp .cta-link,
  body.sales-dp .flow-step,
  body.sales-dp .about-mission,
  body.sales-dp .about-lead,
  body.sales-dp .trouble-summary,
  body.sales-dp .trouble-details,
  body.sales-dp .trouble-solution,
  body.sales-dp .trouble-value,
  body.sales-dp .strength-summary,
  body.sales-dp .strength-details,
  body.sales-dp .strength-desc,
  body.sales-dp .strength-effect,
  body.sales-dp .flow-summary,
  body.sales-dp .category-summary,
  body.sales-dp .manufacturer-list,
  body.sales-dp .manufacturer-note {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ヒーローセクション */
.sales-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--clr-surface-base);
  padding: clamp(80px, 12vw, 120px) 0;
}

/* 余白は .hero-text 内でコントロール（パンくず位置は共通のまま触らない） */
.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 2rem 0; /* 水平方向のパディングはコンテナで管理 */
  text-align: left;
}

/* ============= 以降：プラント営業部 固有セクションのベース骨組み ============= */
/* セクション間の大胆な余白設計 */
.section {
  padding: clamp(200px, 25vw, 300px) 0; /* 大胆な余白 */
  margin-bottom: clamp(120px, 15vw, 200px); /* セクション間の極端な余白 */
}

/* Z字型視線誘導のためのセクションコンテンツ */
.section-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 768px) {
  .section-content {
    grid-template-columns: 2fr 1fr; /* メインコンテンツ重視 */
  }
}

.section-header {
  margin-bottom: clamp(120px, 15vw, 180px); /* 見出し下の極端な余白 */
  text-align: left; /* タイトル系は左寄せで統一 */
  position: relative;
  /* 装飾的要素を削除 - よりクリーンなデザイン */
}

/* ============= 統一された見出し階層システム（2025年ベストプラクティス） ============= */
.section-title {
  font-size: clamp(3rem, 6vw, 4.5rem); /* より大胆なサイズ */
  font-weight: 900; /* より重いウェイト */
  color: var(--clr-text-strong);
  line-height: 1.1; /* より密な行間 */
  letter-spacing: -0.01em; /* より密な文字間隔 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); /* 立体感 */
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  display: inline-block; /* タイトル実幅に下線を合わせる */
  /* スクロール連動アニメーション */
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-slow) var(--animation-easing);
}
.section-title::after {
  content: "";
  display: block;
  width: calc(100% * var(--title-underline-factor, 1)); /* デフォルト=タイトル幅 */
  height: 2px; /* 少し太く */
  margin: 0.75rem 0 0 0; /* 左起点の短線 */
  background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-primary-soft) 100%); /* グラデーション */
  opacity: 0.8; /* 視認性向上 */
  border-radius: 1px; /* 角丸 */
  transition: width 0.6s var(--animation-easing);
}
.section-title.animate {
  opacity: 1;
  transform: translateY(0);
}

.subsection-title,
h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600; /* 2025年トレンド：適度な太さ */
  color: var(--clr-text-strong);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  position: relative;
}

/* イントロテキストのアニメーション */
.intro-text {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s var(--animation-easing);
}
.intro-text.animate {
  opacity: 1;
  transform: translateY(0);
}

/* CTAボタンのアニメーション */
.cta-link {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}
.cta-link.animate {
  opacity: 1;
  transform: translateY(0);
}

/* アバウトセクションのテキストアニメーション */
.about-mission,
.about-lead {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}
.about-mission.animate,
.about-lead.animate {
  opacity: 1;
  transform: translateY(0);
}

/* トラブル・ストレングス・カテゴリーのテキストアニメーション */
.trouble-summary,
.strength-summary,
.trouble-details,
.strength-details {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.7s var(--animation-easing);
}
.trouble-summary.animate,
.strength-summary.animate,
.trouble-details.animate,
.strength-details.animate {
  opacity: 1;
  transform: translateY(0);
}

.trouble-solution,
.strength-desc,
.flow-summary {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.7s var(--animation-easing);
}
.trouble-solution.animate,
.strength-desc.animate,
.flow-summary.animate {
  opacity: 1;
  transform: translateY(0);
}

.trouble-value,
.strength-effect,
.manufacturer-list {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.7s var(--animation-easing);
}
.trouble-value.animate,
.strength-effect.animate,
.manufacturer-list.animate {
  opacity: 1;
  transform: translateY(0);
}

.manufacturer-note {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--animation-easing);
}
.manufacturer-note.animate {
  opacity: 0.8;
  transform: translateY(0);
}

/* アイブロウ（小見出し）と薄いベースライン */
.section-eyebrow {
  font-size: var(--font-size-sm); /* 統一サイズ */
  color: var(--clr-text-muted);
  font-weight: 500; /* 中程度のウェイト */
  letter-spacing: 0.1em; /* 大文字化に適した字間 */
  margin: 0 0 var(--space-xs) 0; /* 統一間隔 */
  opacity: 0.7; /* 控えめだが視認性確保 */
  line-height: var(--line-height-normal); /* 統一行間 */
  text-transform: uppercase; /* 大文字化でアクセント */
  /* スクロール連動アニメーション */
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}
.section-eyebrow.animate {
  opacity: 0.7;
  transform: translateY(0);
}

/* タイトル下線の長さユーティリティ（タイトル幅に対する比率） */
.title-underline--short .section-title::after {
  --title-underline-factor: 0.6;
}

.title-underline--mid .section-title::after {
  --title-underline-factor: 1;
}

.title-underline--long .section-title::after {
  --title-underline-factor: 1.3;
}

/* 余白調整（安全マージン） */
.about-body.safe-margin {
  padding-top: min(6vh, 64px);
}

/* B: ゴーストワード（背面英字） */
.section-header.header-ghost {
  position: relative;
  overflow: visible;
}

.section-header.header-ghost .ghost-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  font-size: clamp(6rem, 12vw, 15rem); /* モバイル時のサイズを縮小 */
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted);
  opacity: 0;
  visibility: hidden; /* 初期は非表示にしてフラッシュ防止 */
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* モバイル時の追加調整 */
  /* タッチデバイス用のマイクロインタラクション最適化 */
}
@media (max-width: 768px) {
  .section-header.header-ghost .ghost-word {
    font-size: clamp(4rem, 8vw, 8rem); /* モバイル時はさらに小さく */
  }
}
@media (hover: none) and (pointer: coarse) {
  .section-header.header-ghost .ghost-word {
    /* タッチデバイスではホバーエフェクトを無効化 */
    /* タッチ時のフィードバック */
    max-width: 90vw; /* 幅制限 */
    overflow: hidden; /* はみ出し防止 */
  }
  .section-header.header-ghost .ghost-word .trouble-item:hover,
  .section-header.header-ghost .ghost-word .category-item:hover,
  .section-header.header-ghost .ghost-word .flow-step:hover {
    transform: none;
    box-shadow: none;
  }
  .section-header.header-ghost .ghost-word .trouble-item:active,
  .section-header.header-ghost .ghost-word .category-item:active,
  .section-header.header-ghost .ghost-word .flow-step:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}
@media (max-width: 480px) {
  .section-header.header-ghost .ghost-word {
    font-size: clamp(3rem, 6vw, 6rem); /* 極小スマホではさらに小さく */
    max-width: 85vw; /* 幅制限を厳しく */
  }
}
.section-header.header-ghost .ghost-word.animate {
  opacity: var(--ghost-word-opacity, 0.06);
  visibility: visible; /* 表示時のみ可視化 */
}

.section-header.header-ghost > * {
  position: relative;
  z-index: 1;
}

/* 旧: 横＋縦アクセント（未採用） すべて削除 */
/* 「私たちについて」セクション - 大胆なレイアウト手法の適用 */
#about-plant.about-plant.section {
  position: relative;
  background-color: white; /* 白背景 */
  padding: 0 !important; /* .sectionクラスのpaddingを強制的に上書き */
  margin-bottom: 0 !important;
}
#about-plant.about-plant.section .container {
  padding: clamp(64px, 10vw, 120px) 0; /* コンテナに上下padding追加 */
  margin-bottom: 0;
}

.about-body {
  position: relative;
  z-index: 2;
}

/* 縦配置 - ミッションとリードを別の行に */
.about-text {
  display: grid;
  grid-template-columns: 1fr; /* 1列配置 */
  gap: 3em; /* フォントサイズの3倍の間隔（タイトルとミッションの余白の半分） */
  align-items: start;
  max-width: min(1600px, 100vw - 2rem); /* ビューポート幅を超えない */
  margin: 0 auto;
  padding: 0 6em; /* 左右の余白を調整 */
  position: relative;
}

.about-mission {
  grid-column: 1; /* 1行目に配置 */
  text-align: left; /* 左揃え */
  max-width: 100%; /* ミッション文の幅を制限解除 */
  min-width: 0; /* グリッドアイテムの最小幅を0に設定 */
}

.about-content {
  grid-column: 1; /* 2行目に配置 */
  text-align: left; /* 左揃え */
  margin-left: 0; /* 左寄せに変更 */
  max-width: 100%; /* リード文の幅を制限解除 */
}

/* ミッション文 - 1行目配置、2行程度に収まる幅 */
.about-mission {
  font-size: clamp(var(--font-size-2xl), 5.5vw, var(--font-size-3xl)); /* 統一サイズ */
  font-weight: 900; /* より重く */
  color: var(--clr-text-strong);
  line-height: var(--line-height-snug); /* 統一行間 */
  margin-bottom: 0; /* グリッドのgapで間隔を管理 */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  position: relative;
  z-index: 3;
  text-align: left; /* 左揃え */
  max-width: 95%; /* コンテナ幅の95%に制限してぶら下がりを防止 */
  word-break: keep-all; /* 単語の途中での改行を防止 */
  overflow-wrap: break-word; /* 長い単語は適切に改行 */
}

/* リード文 - 2行目配置、左寄せ左揃え */
.about-lead {
  font-size: var(--font-size-lg); /* 統一サイズ */
  line-height: var(--line-height-relaxed); /* 統一行間 */
  color: var(--clr-text-body); /* 適切な色 */
  margin-bottom: var(--space-2xl); /* 統一間隔 */
  font-weight: 400; /* 適切なフォントウェイト */
  position: relative;
  z-index: 1;
  text-align: left; /* 左揃え */
  max-width: 100%; /* 幅制限を解除 */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
}

/* 数値の視覚的強調デザイン - 通常の横並び配置 */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl); /* 統一間隔 */
  margin: var(--space-2xl) 0; /* 統一間隔 */
  padding: 0;
  list-style: none;
  max-width: min(1600px, 100vw - 2rem); /* ビューポート幅を超えない */
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.stat-item {
  display: flex;
  flex-direction: column; /* ラベル→数値の順で自然な縦並び */
  align-items: center; /* 中央揃え */
  text-align: center;
  padding: var(--space-lg) var(--space-md); /* 統一間隔 */
  background: transparent; /* 背景を透明に */
  border-radius: 0.5rem; /* 控えめな丸角 */
  border: none; /* 境界線を削除 */
  position: relative;
  /* ホバー効果を削除 - 情報表示専用のため */
}

.stat-item::before {
  content: "";
  position: absolute;
  inset: 0; /* 内側全体 */
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); /* ごく薄い内側エッジ（最終） */
  pointer-events: none;
}

.about-stats .stat-item .stat-number {
  display: block !important;
  font-size: var(--font-size-3xl) !important; /* より大きく */
  font-weight: 900 !important; /* 極太 */
  color: var(--clr-primary) !important;
  line-height: var(--line-height-tight) !important; /* 統一行間 */
  margin-top: 0 !important;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 2px 8px rgba(15, 122, 90, 0.3) !important; /* 影付き */
  position: relative !important;
  white-space: nowrap; /* 1行で収める */
  /* 重要情報の強調 - 下線強調 */
  /* スクロール連動アニメーション */
  opacity: 0;
  transform: scale(0.8);
  transition: all 1s var(--animation-easing-smooth);
}
.about-stats .stat-item .stat-number::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-primary);
  opacity: 0.3;
  border-radius: 1px;
}
.about-stats .stat-item .stat-number.animate {
  opacity: 1;
  transform: scale(1);
}

.stat-label {
  display: block;
  font-size: var(--font-size-sm); /* 統一サイズ */
  color: var(--clr-text-muted);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide); /* 統一字間 */
  line-height: 1.2;
  margin-bottom: 0.2rem; /* 数値との距離 */
}

/* 補助ルールありバリアント */
.about-stats.variant-rule .stat-label {
  position: relative;
  /* B: ラベルを明確に大きく・強く */
  font-size: var(--font-size-base); /* 統一サイズ */
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide); /* 統一字間 */
  margin-bottom: var(--space-xs); /* 統一間隔 */
}

.about-stats.variant-rule .stat-label::after {
  content: "";
  display: block;
  width: 42%;
  height: 2px; /* 視認性を上げる */
  margin: var(--space-xs) auto 0; /* 統一間隔 */
  background: var(--clr-text-muted);
  opacity: 0.25; /* 透明度を少し上げる */
  border-radius: 1px;
}

/* レスポンシブ対応 - 大胆な余白を維持 */
@media (max-width: 768px) {
  .about-stats {
    grid-template-columns: 1fr;
    gap: 3em; /* 大胆な余白を維持 */
  }
  .stat-item {
    padding: var(--space-md) var(--space-sm); /* 統一間隔 */
  }
  .about-stats .stat-item .stat-number {
    font-size: var(--font-size-xl) !important; /* 統一サイズ */
  }
  .stat-label {
    font-size: var(--font-size-sm); /* 統一サイズ */
  }
}
@media (max-width: 640px) {
  .about-stats {
    gap: 2.5em; /* 大胆な余白を維持 */
  }
  .stat-item {
    padding: var(--space-md) var(--space-sm); /* 統一間隔 */
  }
  .about-stats .stat-item .stat-number {
    font-size: var(--font-size-lg) !important; /* 統一サイズ */
  }
  .stat-label {
    font-size: var(--font-size-xs); /* 統一サイズ */
  }
}
.section {
  padding: clamp(64px, 10vw, 120px) 0; /* 余白を広めに */
}

/* about-plantセクションの.sectionクラスを上書き */
#about-plant.section {
  padding: 0 !important; /* 上部paddingを完全に削除 */
}

/* セクション共通の外側レール（広めの設定） */
.section .container {
  max-width: min(1500px, 100vw - 2rem); /* ビューポート幅を超えない */
  margin: 0 auto; /* 上部marginを0に設定 */
}

.section-header {
  margin-top: clamp(40px, 6vw, 80px); /* パンくずとの間隔を確保 */
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* お知らせ（プレースホルダ段階） */
.plant-news-placeholder {
  padding: 2rem;
  border: 1px dashed var(--clr-line);
  color: var(--clr-text-muted);
  text-align: center;
}

/* 現場の「困った」解決 */
.troubles-intro {
  margin-bottom: var(--space-2xl); /* 統一間隔 */
  text-align: center;
  margin-left: var(--offset-medium); /* 左オフセット */
}

.intro-text {
  font-size: var(--font-size-lg); /* 統一サイズ */
  line-height: var(--line-height-relaxed); /* 統一行間 */
  color: var(--clr-text-body);
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  max-width: 800px;
  margin: 0 auto;
}

.troubles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px); /* カード間の余白拡大 */
  position: relative;
  /* グループ化の表現 */
}
@media (min-width: 768px) {
  .troubles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.troubles-grid::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--decorative-line-width, 60px);
  height: 3px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.trouble-item {
  padding: clamp(20px, 4vw, 32px); /* カード内余白拡大 */
  border: none; /* ボーダー削除 */
  border-left: 4px solid var(--clr-primary); /* 左端アクセント */
  border-radius: 12px; /* より丸みを帯びた角 */
  background: linear-gradient(135deg, var(--clr-surface-base) 0%, var(--clr-primary-soft) 60%, rgba(157, 209, 184, 0.2) 100%); /* WCAG AA準拠：アクセシブルなグラデーション */
  /* 立体感を演出する重層シャドウ */
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.1), 0 12px 32px rgba(15, 23, 42, 0.06); /* 遠距離影 */
  /* 3D変形のためのperspective設定 */
  transform-style: preserve-3d;
  perspective: 1000px;
  /* ホバー時の浮上効果（立体感強化・2025年トレンド） */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  /* ホバー時の光るエフェクト */
  /* オフセット配置 */
  /* スクロール連動アニメーション */
  opacity: 0;
  transform: translateY(40px) translateZ(-15px);
  transition: all var(--animation-duration-slow) var(--animation-easing);
  /* 順次表示の遅延と奥行きの段階的配置 */
}
.trouble-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 1;
}
.trouble-item:hover {
  transform: translateY(-8px) translateZ(20px) rotateX(2deg) scale(1.02);
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12), 0 16px 40px rgba(15, 23, 42, 0.18), 0 32px 64px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1);
  /* 光るエフェクトの実行 */
  /* 内部要素の微細なアニメーション */
}
.trouble-item:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}
.trouble-item:hover .trouble-title {
  transform: translateY(-2px);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.trouble-item:hover .trouble-summary {
  transform: translateY(-1px);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.trouble-item:nth-child(odd) {
  margin-left: var(--offset-small);
  z-index: 2; /* 奇数カードを前面に */
}
.trouble-item:nth-child(even) {
  margin-right: var(--offset-small);
  z-index: 1; /* 偶数カードを背面に */
}
.trouble-item.animate {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}
.trouble-item:nth-child(1) {
  transition-delay: 0.1s;
  z-index: 4;
}
.trouble-item:nth-child(2) {
  transition-delay: 0.2s;
  z-index: 3;
}
.trouble-item:nth-child(3) {
  transition-delay: 0.3s;
  z-index: 2;
}
.trouble-item:nth-child(4) {
  transition-delay: 0.4s;
  z-index: 1;
}

.trouble-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--clr-text-strong);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  position: relative;
  /* 左肩ピルとテキストを同一ベースラインに */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0; /* 余白方式をgapに変更 */
  flex-wrap: wrap; /* SPの折返しで崩れないように */
}

.trouble-title::before {
  content: "課題";
  /* フロー内に配置してベースラインを揃える */
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.65rem;
  font-size: 0.9rem; /* 小さすぎによる滲みを回避 */
  font-weight: 700; /* くっきり */
  letter-spacing: 0.06em; /* さらに広げる */
  line-height: 1;
  font-family: var(--font-ui, "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  color: var(--clr-secondary);
  background: var(--clr-secondary-soft);
  border: 1px solid rgba(30, 58, 138, 0.22);
  border-radius: 6px; /* 前のデザイン：角丸 */
  margin-right: 0; /* gapで制御 */
}

.trouble-summary {
  line-height: var(--line-height-relaxed); /* 統一行間 */
  font-size: var(--font-size-base); /* 統一サイズ */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  margin-bottom: var(--space-md); /* 統一間隔 */
}

/* 役職部分（丸角ボタン風） */
.trouble-role {
  color: white; /* 白文字 */
  background: var(--clr-primary); /* 背景色 */
  padding: var(--space-xs) var(--space-sm); /* 内側余白 */
  border-radius: var(--radius-full); /* 丸角 */
  display: inline-block; /* インラインブロック */
  box-shadow: 0 2px 8px rgba(15, 122, 90, 0.2); /* 軽い影 */
  font-weight: 500; /* 少し強調 */
  margin-right: var(--space-xs); /* 右余白 */
}

/* 説明部分（吹き出し風） */
.trouble-description {
  color: var(--clr-text-body);
  background: #f8fafc; /* より明確な薄いグレー背景 */
  padding: var(--space-sm) var(--space-md); /* 内側余白拡大 */
  border-radius: var(--radius-lg); /* 角丸拡大 */
  display: inline-block; /* インラインブロック */
  position: relative; /* 吹き出しの矢印用 */
  margin-left: var(--space-sm); /* 左余白 */
  border: 1px solid #cbd5e1; /* 枠線 1px に調整 */
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1); /* 軽い影 */
  /* 吹き出しの矢印の境界線（外側） */
  /* 吹き出しの矢印の内側 */
}
.trouble-description::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 11px solid #cbd5e1; /* 1pxぶん外側ライン */
  z-index: 0;
}
.trouble-description::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 13px solid #f8fafc; /* 背景と同じ色（13pxに調整） */
  z-index: 1;
}

.trouble-details {
  margin-top: var(--space-sm); /* 統一間隔 */
  padding: calc(var(--space-sm) - 6px) var(--space-sm);
  background: var(--clr-surface-base);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  max-width: 100%;
  position: relative; /* コネクタ用 */
}

.trouble-details .details-inner {
  max-width: 92%;
  margin: 0 auto;
}

/* dividerからdetailsへ誘導するコネクタ */
.response-divider + .trouble-details::before,
.response-divider + .trouble-details::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.response-divider + .trouble-details::before {
  top: -22px; /* 余白拡張に追従 */
  width: 64px;
  height: 1px;
  background: rgba(15, 23, 42, 0.22);
}

.response-divider + .trouble-details::after {
  top: -14px; /* 三角形とボックスの間に十分な余白 */
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(15, 23, 42, 0.45);
}

/* ソリューションとバリューの階層表現 */
.trouble-solution {
  color: var(--clr-primary); /* 緑トーン */
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.02em;
  margin-bottom: 12px; /* パネル同士のボーダーが接しないよう広げる */
  font-weight: 600;
  position: relative;
  padding: 12px 14px 12px 3.6rem; /* ラベル分 + 面内余白 */
  background: rgba(15, 122, 90, 0.06); /* 薄い面 */
  border: 1px solid rgba(15, 122, 90, 0.18); /* コントラストをやや強化 */
  border-radius: 8px;
}

.trouble-solution::before {
  content: "対応";
  position: absolute;
  left: 0;
  top: 10px; /* 面内に揃える */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em; /* さらに広げる */
  color: var(--clr-primary);
  background: var(--clr-primary-soft);
  border: 1px solid rgba(15, 122, 90, 0.22);
  border-radius: 999px;
  margin-left: 0.5rem;
}

.trouble-value {
  color: var(--clr-secondary); /* 青トーン */
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-top: 12px; /* パネル同士のボーダーが接しないよう広げる */
  position: relative;
  padding: 12px 14px 12px 3.6rem; /* ラベル分 + 面内余白 */
  background: rgba(30, 58, 138, 0.06); /* 薄い面 */
  border: 1px solid rgba(30, 58, 138, 0.18); /* コントラストをやや強化 */
  border-radius: 8px;
}

.trouble-value::before {
  content: "効果";
  position: absolute;
  left: 0;
  top: 10px; /* 面内に揃える */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em; /* さらに広げる */
  color: var(--clr-secondary);
  background: var(--clr-secondary-soft);
  border: 1px solid rgba(30, 58, 138, 0.18);
  border-radius: 999px;
  margin-left: 0.5rem;
}

/* レスポンシブ微調整 */
@media (max-width: 768px) {
  .trouble-details .details-inner {
    max-width: 100%;
  }
  .trouble-solution, .trouble-value {
    padding-left: 3rem;
  }
}
.trouble-cta {
  margin-top: var(--space-sm); /* 統一間隔 */
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* アイコンとテキストの間隔 */
  padding: var(--space-xl) var(--space-3xl); /* さらに大きく */
  border: none; /* ボーダー削除 */
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-hover) 40%, var(--clr-accent-gold) 80%, var(--clr-accent-gold) 100%); /* 温かみのあるゴールドアクセント強化 */
  color: white; /* 白文字 */
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--font-size-xl); /* さらにサイズアップ */
  font-weight: 800; /* 極太 */
  line-height: var(--line-height-normal); /* 統一行間 */
  letter-spacing: var(--letter-spacing-wide); /* 統一字間 */
  /* より目立つ重層シャドウ */
  box-shadow: 0 6px 16px rgba(15, 122, 90, 0.3), 0 12px 32px rgba(15, 122, 90, 0.4), 0 24px 48px rgba(15, 122, 90, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); /* 内側の光る効果 */
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* ホバー時のグラデーションアニメーション */
  /* リップル効果の準備 */
  /* フォーカス可視化（WCAG AA準拠・アクセシビリティ強化） */
}
.cta-link:hover {
  background: linear-gradient(135deg, var(--clr-accent-gold) 0%, var(--clr-primary) 30%, var(--clr-primary-hover) 70%, var(--clr-accent-gold) 100%);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(15, 122, 90, 0.4), 0 16px 48px rgba(15, 122, 90, 0.5), 0 32px 64px rgba(15, 122, 90, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2); /* 内側の光る効果 */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.cta-link:hover {
  transform: translateY(-8px) translateZ(15px) rotateX(3deg); /* より強い立体感 */
  box-shadow: 0 12px 24px rgba(15, 122, 90, 0.4), 0 20px 48px rgba(15, 122, 90, 0.5), 0 32px 64px rgba(15, 122, 90, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.2); /* ホバー時の光る効果強化 */
  background: linear-gradient(135deg, var(--clr-primary-hover) 0%, var(--clr-primary) 25%, var(--clr-accent-gold) 70%, var(--clr-accent-gold) 100%); /* ホバー時の温かみのあるゴールド強調 */
}
.cta-link:active {
  transform: translateY(-1px);
  transition: all 0.1s ease;
}
.cta-link:active::before {
  width: 300px;
  height: 300px;
}
.cta-link:focus {
  outline: 3px solid var(--clr-primary);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(11, 90, 66, 0.2);
}
.cta-link:focus-visible {
  outline: 4px solid var(--clr-primary);
  outline-offset: 5px;
  border-radius: 8px;
  box-shadow: 0 0 0 8px rgba(11, 90, 66, 0.3);
  box-shadow: 0 4px 12px rgba(15, 122, 90, 0.25), 0 8px 24px rgba(15, 122, 90, 0.35), 0 16px 40px rgba(15, 122, 90, 0.2), 0 0 0 4px rgba(184, 230, 209, 0.3); /* フォーカス時の光る効果 */
}

/* CTAアイコンのスタイル */
.cta-icon {
  width: 1.75em; /* SVGの幅をさらに大きく */
  height: 1.75em; /* SVGの高さをさらに大きく */
  fill: currentColor; /* 現在の文字色を使用 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* アイコンに影を追加 */
}
.cta-link:hover .cta-icon {
  transform: scale(1.15) rotate(8deg);
  fill: white; /* ホバー時は白 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); /* ホバー時の影を強化 */
}

.section-cta {
  margin-top: var(--space-2xl); /* 統一間隔 */
  text-align: center;
  position: relative;
  /* 周囲の装飾要素 */
  /* 背景の装飾要素 */
}
.section-cta::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--clr-primary), var(--clr-accent-gold), transparent);
  border-radius: 2px;
  opacity: 0.8;
  box-shadow: 0 2px 8px rgba(15, 122, 90, 0.3);
}
.section-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(15, 122, 90, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .section-cta {
    margin-top: var(--space-xl);
  }
  .cta-link {
    gap: 0.5rem;
    padding: 1.25rem var(--space-2xl); /* 上下のパディングを増やして高さを確保 */
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    font-weight: 700;
    width: min(90%, 320px);
    justify-content: center;
  }
  .cta-icon {
    width: 1.35rem;
    height: 1.35rem;
  }
}
@media (max-width: 480px) {
  .cta-link {
    gap: 0.45rem;
    padding: 1rem var(--space-xl); /* 上下のパディングを増やして高さを確保 */
    font-size: clamp(0.9rem, 4vw, 1rem);
  }
  .cta-icon {
    width: 1.2rem;
    height: 1.2rem;
  }
}
/* 色彩による重要度表現 */
.importance-critical, .info-hierarchy__critical {
  color: var(--importance-critical) !important;
  font-weight: 700 !important;
  background: var(--importance-critical-bg) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  border-left: 3px solid var(--importance-critical) !important;
  position: relative !important;
}
.importance-critical::before, .info-hierarchy__critical::before {
  content: "★" !important;
  color: var(--clr-accent-gold) !important;
  margin-right: 0.25rem !important;
  font-size: 0.9em !important;
}

.importance-high, .info-hierarchy__high {
  color: var(--importance-high) !important;
  font-weight: 600 !important;
  background: var(--importance-high-bg) !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 3px !important;
  border-left: 2px solid var(--importance-high) !important;
  position: relative !important;
}
.importance-high::before, .info-hierarchy__high::before {
  content: "●" !important;
  color: var(--importance-high) !important;
  margin-right: 0.25rem !important;
  font-size: 0.8em !important;
}

.importance-medium, .info-hierarchy__medium {
  color: var(--importance-medium) !important;
  font-weight: 500 !important;
  background: var(--importance-medium-bg) !important;
  padding: 0.15rem 0.3rem !important;
  border-radius: 2px !important;
  position: relative !important;
}
.importance-medium::before, .info-hierarchy__medium::before {
  content: "○" !important;
  color: var(--importance-medium) !important;
  margin-right: 0.25rem !important;
  font-size: 0.7em !important;
}

.importance-low, .info-hierarchy__low {
  color: var(--importance-low) !important;
  font-weight: 400 !important;
  background: var(--importance-low-bg) !important;
  padding: 0.1rem 0.2rem !important;
  border-radius: 2px !important;
  opacity: 0.8 !important;
}

/* ============= 優先度表示システム ============= */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
}
.priority-badge.priority-urgent {
  background: linear-gradient(135deg, var(--clr-danger), #DC2626);
  color: white;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3);
}
.priority-badge.priority-urgent::before {
  content: "🚨";
  font-size: 0.8em;
}
.priority-badge.priority-high {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-hover));
  color: white;
  box-shadow: 0 2px 8px rgba(13, 107, 79, 0.3);
}
.priority-badge.priority-high::before {
  content: "⚡";
  font-size: 0.8em;
}
.priority-badge.priority-medium {
  background: linear-gradient(135deg, var(--clr-secondary), var(--clr-secondary-hover));
  color: white;
  box-shadow: 0 2px 8px rgba(26, 74, 122, 0.3);
}
.priority-badge.priority-medium::before {
  content: "📋";
  font-size: 0.8em;
}
.priority-badge.priority-low {
  background: var(--clr-surface-muted);
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-line);
}
.priority-badge.priority-low::before {
  content: "📝";
  font-size: 0.8em;
}

/* ============= アクセシビリティ強化ユーティリティ ============= */
/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* フォーカス表示の強化 */
.focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(11, 90, 66, 0.2);
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .hero-title,
  .section-title {
    color: #000000;
    text-shadow: none;
  }
  .trouble-item,
  .category-item {
    border: 2px solid var(--clr-text-strong);
  }
}
/* アニメーション無効化対応 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============= マイクロインタラクション用アニメーション ============= */
@keyframes pulse-critical {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(13, 107, 79, 0.2);
  }
  50% {
    box-shadow: 0 8px 24px rgba(13, 107, 79, 0.4);
  }
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(13, 107, 79, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(13, 107, 79, 0.6);
  }
}
@keyframes pulse-current {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(11, 90, 66, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(11, 90, 66, 0);
  }
}
@keyframes progress-line {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes step-complete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* ============= 情報階層の視覚的強化 ============= */
.info-hierarchy__critical {
  border: 2px solid var(--clr-primary);
  box-shadow: 0 4px 12px rgba(13, 107, 79, 0.2);
  animation: pulse-critical 2s infinite;
}
.info-hierarchy__high {
  border: 1px solid var(--clr-text-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.info-hierarchy__medium {
  border: 1px solid var(--clr-line);
}
@keyframes pulse-critical {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(13, 107, 79, 0.2);
  }
  50% {
    box-shadow: 0 6px 20px rgba(13, 107, 79, 0.4);
  }
}
/* テキスト主体セクションは内側レールを狭めて可読性を確保 */
#troubles .container,
#strengths .container,
#flow .container,
#catalog .container,
#about-plant .container,
#services-plant .container {
  max-width: min(1280px, 100vw - 2rem); /* ビューポート幅を超えない */
}

/* 私たちについて */
.about-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
}

.about-mission {
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--clr-text-strong);
  letter-spacing: 0.04em;
  max-width: 95%; /* タブレットでもぶら下がりを防止 */
  word-break: keep-all; /* 単語の途中での改行を防止 */
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.5vw, 20px);
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.about-stats strong {
  display: block;
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
}
.about-stats span {
  color: var(--clr-text-body);
  font-size: 0.95rem;
}

.about-lead {
  line-height: 1.9;
  color: var(--clr-text-body);
}

/* サービス内容 */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 24px);
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-item {
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--clr-line);
  border-radius: 8px;
  background: var(--clr-surface-base);
  text-align: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* 3つの力 - 中央強調 + オフセット配置 */
.strengths-intro {
  margin-bottom: var(--space-2xl); /* 統一間隔 */
  text-align: center;
  margin-right: var(--offset-small); /* 右オフセット */
}

.strengths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 50px);
  max-width: min(1200px, 100vw - 2rem); /* ビューポート幅を超えない */
  margin: 0 auto;
  position: relative;
  /* グループ化の表現 */
}
@media (min-width: 768px) {
  .strengths-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 6vw, 60px) clamp(30px, 4vw, 40px);
    /* カードの幅を強制的に均等化 */
    /* オフセット配置を無効化 - 3つ並列に戻す */
  }
  .strengths-grid .strength-item {
    min-width: 0; /* グリッドアイテムの最小幅をリセット */
    width: 100%; /* 幅を100%に固定 */
  }
  .strengths-grid .strength-item:nth-child(1),
  .strengths-grid .strength-item:nth-child(2),
  .strengths-grid .strength-item:nth-child(3) {
    transform: none;
    z-index: 1;
  }
}
.strengths-grid::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--decorative-line-width, 60px);
  height: 3px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* レスポンシブ対応 - オフセット配置の調整 */
@media (max-width: 768px) {
  /* オフセットを50%に縮小 */
  .troubles-intro,
  .strengths-intro,
  .flow-intro,
  .catalog-intro {
    margin-left: calc(var(--offset-medium) * 0.5) !important;
    margin-right: calc(var(--offset-medium) * 0.5) !important;
  }
  .trouble-item:nth-child(odd) {
    margin-left: calc(var(--offset-small) * 0.5);
  }
  .trouble-item:nth-child(even) {
    margin-right: calc(var(--offset-small) * 0.5);
  }
  /* オフセットをリセット */
  .category-item,
  .strength-item,
  .about-mission,
  .about-lead,
  .about-stats {
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* セクション間の余白を調整 */
  .section {
    padding: clamp(80px, 10vw, 120px) 0;
    margin-bottom: clamp(60px, 8vw, 80px);
  }
  /* グリッドを1列に */
  .categories-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(30px, 5vw, 40px) !important;
  }
  .strengths-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(30px, 5vw, 40px) !important;
  }
  /* 3カラム配置を1列に - モバイル対応 */
  .about-text {
    grid-template-columns: 1fr !important;
    gap: 3em !important; /* モバイルで適切な余白に調整 */
    padding: 0 1.5em !important;
  }
  .about-mission {
    grid-column: 1 !important;
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* モバイルで適切なサイズに調整 */
    margin-bottom: 2em !important;
    text-align: left !important; /* 左揃え */
    max-width: 95% !important; /* モバイルでもぶら下がりを防止 */
    word-break: keep-all !important; /* 単語の途中での改行を防止 */
  }
  .about-content {
    grid-column: 1 !important;
    text-align: left !important; /* 左揃え */
  }
  .about-lead {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 3em !important;
    text-align: left !important; /* 左揃え */
  }
  /* 数値カードの通常配置 */
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 4em !important;
  }
}
.strength-item {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: none; /* ボーダー削除 */
  border-radius: 12px; /* より丸みを帯びた角 */
  background: linear-gradient(135deg, var(--clr-surface-base) 0%, var(--clr-primary-soft) 60%, rgba(157, 209, 184, 0.2) 100%); /* WCAG AA準拠：アクセシブルなグラデーション */
  /* 立体感を演出する重層シャドウ */
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.12), 0 16px 40px rgba(15, 23, 42, 0.08); /* 遠距離影 */
  /* 3D変形のためのperspective設定 */
  transform-style: preserve-3d;
  perspective: 1000px;
  /* ホバー時の浮上効果（立体感強化・2025年トレンド） */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  /* ホバー時の光るエフェクト */
  /* ホバー時のグラデーション変化 */
  /* スクロール連動アニメーション（最適化） */
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-slow) var(--animation-easing-smooth);
  /* 順次表示の遅延と奥行きの段階的配置（最適化） */
}
.strength-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 1;
}
.strength-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(11, 90, 66, 0.08) 0%, rgba(157, 209, 184, 0.12) 50%, rgba(11, 90, 66, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 0;
}
.strength-item:hover {
  transform: translateY(-12px) translateZ(25px) rotateX(3deg) scale(1.03);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15), 0 24px 50px rgba(15, 23, 42, 0.2), 0 48px 80px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2);
  /* 光るエフェクトの実行 */
  /* グラデーション変化の実行 */
  /* 内部要素の微細なアニメーション */
}
.strength-item:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}
.strength-item:hover::after {
  opacity: 1;
}
.strength-item:hover .category-item__tag {
  transform: translateY(-3px) scale(1.05);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.strength-item:hover .category-item__txt {
  transform: translateY(-2px);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.strength-item.animate {
  opacity: 1;
  transform: translateY(0);
}
.strength-item:nth-child(1) {
  transition-delay: 0.05s;
  z-index: 3;
}
.strength-item:nth-child(2) {
  transition-delay: 0.15s;
  z-index: 2;
}
.strength-item:nth-child(3) {
  transition-delay: 0.25s;
  z-index: 1;
}
.strength-item:nth-child(4) {
  transition-delay: 0.35s;
  z-index: 1;
}
.strength-item:nth-child(5) {
  transition-delay: 0.45s;
  z-index: 1;
}

/* 縦書きタイトル */
.strength-title-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 900;
  color: white;
  padding: clamp(16px, 3vw, 24px) clamp(8px, 1.5vw, 12px);
  border-right: 5px solid var(--clr-accent-gold);
  width: clamp(2.5rem, 6vw, 4rem); /* モバイル時により小さく */
  min-width: clamp(2.5rem, 6vw, 4rem); /* 最小幅も調整 */
  max-width: clamp(2.5rem, 6vw, 4rem); /* 最大幅も調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-hover) 100%);
  letter-spacing: 0.3em;
  line-height: 1.8;
  /* 立体感を強化する重層シャドウ */
  box-shadow: 0 2px 8px rgba(15, 122, 90, 0.2), 0 6px 16px rgba(15, 122, 90, 0.3), 0 12px 24px rgba(15, 122, 90, 0.15); /* 遠距離影 */
  position: relative;
  flex-shrink: 0; /* 縮小を防止 */
  z-index: 2; /* コンテンツより前面に */
  /* 3D変形対応 */
  transform-style: preserve-3d;
  /* ホバー時の立体感強化 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.strength-title-vertical::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.strength-item:hover .strength-title-vertical {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(15, 122, 90, 0.3), 0 12px 24px rgba(15, 122, 90, 0.4), 0 20px 40px rgba(15, 122, 90, 0.25);
}

/* コンテンツエリア */
.strength-content {
  flex: 1;
  padding: clamp(16px, 3vw, 24px);
  min-width: 0; /* フレックスアイテムの最小幅をリセット */
  overflow: hidden; /* はみ出しを防止 */
  word-wrap: break-word; /* 長い単語の改行 */
  position: relative;
  z-index: 1; /* タイトルより背面に */
  /* ホバー時の微細な立体感 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.strength-item:hover .strength-content {
  transform: translateY(-1px);
}

.strength-title {
  font-size: var(--font-size-xl); /* 統一サイズ */
  color: var(--clr-text-strong);
  margin-bottom: var(--space-xs); /* 統一間隔 */
  line-height: var(--line-height-snug); /* 統一行間 */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  font-weight: 700; /* 適切なウェイト */
}

.strength-summary {
  color: var(--clr-text-strong);
  line-height: var(--line-height-relaxed); /* 統一行間 */
  font-size: var(--font-size-lg); /* 統一サイズ */
  font-weight: 700; /* 強調 */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  margin-bottom: var(--space-md); /* 統一間隔 */
  max-width: 100%; /* 親要素の幅に制限 */
  word-wrap: break-word; /* 長い単語の改行 */
}

.strength-details {
  margin-top: var(--space-sm); /* 統一間隔 */
}

.strength-desc {
  color: var(--clr-text-body);
  line-height: var(--line-height-relaxed); /* 統一行間 */
  font-size: var(--font-size-sm); /* 統一サイズ */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  margin-bottom: var(--space-xs); /* 統一間隔 */
  max-width: 100%; /* 親要素の幅に制限 */
  word-wrap: break-word; /* 長い単語の改行 */
}

.strength-effect {
  color: var(--clr-primary);
  line-height: var(--line-height-relaxed); /* 統一行間 */
  font-size: var(--font-size-base); /* サイズアップ */
  letter-spacing: var(--letter-spacing-normal); /* 統一字間 */
  font-weight: 700; /* より強調 */
  max-width: 100%; /* 親要素の幅に制限 */
  word-break: keep-all; /* 単語の途中改行を防止 */
  overflow-wrap: break-word; /* 長い単語の適切な改行 */
  hyphens: none; /* ハイフネーションを無効化 */
}

/* ご利用の流れ */
.service-flow {
  position: relative;
  overflow: hidden;
  /* モバイル時の横幅制限 */
}
@media (max-width: 767px) {
  .service-flow {
    max-width: 100vw; /* ビューポート幅に制限 */
    width: 100%; /* 親要素の幅に合わせる */
    box-sizing: border-box; /* パディング込みで幅計算 */
  }
}
.service-flow .section-header.header-ghost {
  position: relative;
  z-index: 1;
}
.service-flow .section-header.header-ghost .ghost-word {
  opacity: var(--ghost-word-opacity, 0.06);
  visibility: visible;
  z-index: 0;
}

.flow-intro {
  margin-bottom: var(--space-2xl); /* 統一間隔 */
  text-align: center;
  margin-left: var(--offset-large); /* 左オフセット */
  position: relative;
  z-index: 1;
}

.flow-steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* 接続線システム（進行感の明確化） */
  /* 接続線の進行アニメーション */
  /* アニメーション実行時 */
  /* ステップ間の接続点（シンプルデザイン） */
  gap: 24px;
  /* 中画面以下の接続点調整（1200px以下） */
  /* 中画面以下は縦表示（1200px以下） */
  /* 水平レール（PC時のみ表示） */
  /* 矢羽（矢印）の追加（PC時のみ表示） */
}
.flow-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-primary-light) 25%, var(--clr-primary-light) 75%, var(--clr-primary) 100%);
  transform: translateY(-50%);
  z-index: 1;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(11, 90, 66, 0.2);
}
.flow-steps::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-accent-gold) 0%, var(--clr-primary) 50%, var(--clr-accent-gold) 100%);
  transform: translateY(-50%);
  z-index: 2;
  border-radius: 2px;
  width: 0%;
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(154, 107, 10, 0.4);
}
.flow-steps.animate::after {
  width: 100%;
}
.flow-steps .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 8px;
  height: 8px;
  background: var(--clr-primary);
  border: 2px solid white;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-shadow: 0 2px 6px rgba(11, 90, 66, 0.3);
}
@media (max-width: 1200px) {
  .flow-steps .flow-step:not(:last-child)::after {
    top: auto;
    bottom: -10px;
    right: 50%;
    transform: translateX(50%);
  }
}
@media (max-width: 1200px) {
  .flow-steps {
    flex-direction: column; /* 縦並びに変更 */
    /* 縦表示時の接続線 */
    gap: 20px; /* 縦間隔を調整 */
    padding: 0 16px; /* 左右にパディングを追加 */
    max-width: 100%; /* 横幅制限を削除 */
    overflow: visible; /* 横スクロールを無効化 */
    align-items: center; /* 子要素（flow-step）を中央寄せ */
    /* ステップの横幅統一 */
  }
  .flow-steps::before {
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-light) 25%, var(--clr-primary-light) 75%, var(--clr-primary) 100%);
  }
  .flow-steps::after {
    top: 0;
    left: 50%;
    width: 3px;
    height: 0%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--clr-accent-gold) 0%, var(--clr-primary) 50%, var(--clr-accent-gold) 100%);
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .flow-steps.animate::after {
    height: 100%;
  }
  .flow-steps .flow-step {
    width: 100%;
    max-width: 500px; /* 最大幅を制限 */
    min-width: 300px; /* 最小幅を設定 */
    margin: 0 auto; /* 中央配置 */
  }
}
.flow-steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 122, 90, 0.3) 8%, var(--clr-primary) 15%, rgba(15, 122, 90, 0.6) 25%, rgba(15, 122, 90, 0.4) 35%, rgba(15, 122, 90, 0.6) 45%, rgba(15, 122, 90, 0.4) 55%, rgba(15, 122, 90, 0.6) 65%, rgba(15, 122, 90, 0.4) 75%, var(--clr-primary) 85%, rgba(15, 122, 90, 0.3) 92%, transparent 100%);
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(15, 122, 90, 0.1);
}
@media (max-width: 767px) {
  .flow-steps::before {
    display: none; /* モバイル・タブレットでは非表示 */
  }
}
.flow-steps::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid var(--clr-primary);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}
@media (max-width: 767px) {
  .flow-steps::after {
    display: none; /* モバイル・タブレットでは非表示 */
  }
}
@media (min-width: 768px) {
  .flow-steps {
    justify-content: center; /* PC: 中央寄せ */
    overflow: visible;
  }
}

.flow-step {
  position: relative;
  padding: 28px;
  background: #fff; /* ベース */
  border: none; /* 2025年トレンド：ボーダーなし */
  border-radius: 12px; /* 2025年トレンド：より大きな角丸 */
  /* 透かし数字（ステップ5と同じデザイン） */
  /* 各ステップの透かし数字 */
  /* 進行状態による視覚的変化 */
  text-align: center;
  color: var(--clr-text-body);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 1; /* 背景画像の上に表示 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* 子要素を中央寄せ */
  /* モバイル時の縦表示調整 */
}
.flow-step::before {
  content: "";
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(11, 90, 66, 0.08);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
.flow-step:nth-child(1)::before {
  content: "01";
}
.flow-step:nth-child(2)::before {
  content: "02";
}
.flow-step:nth-child(3)::before {
  content: "03";
}
.flow-step:nth-child(4)::before {
  content: "04";
}
.flow-step.completed {
  background: linear-gradient(135deg, rgba(11, 90, 66, 0.02) 0%, rgba(157, 209, 184, 0.05) 100%);
  border-left: 4px solid var(--clr-primary);
}
.flow-step.completed .step-number {
  background: var(--clr-primary);
  box-shadow: 0 6px 20px rgba(11, 90, 66, 0.3);
}
.flow-step.current {
  background: linear-gradient(135deg, rgba(11, 90, 66, 0.05) 0%, rgba(157, 209, 184, 0.08) 100%);
  border-left: 4px solid var(--clr-accent-gold);
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(11, 90, 66, 0.15);
}
.flow-step.current .step-number {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent-gold));
  box-shadow: 0 8px 25px rgba(11, 90, 66, 0.4);
}
.flow-step.pending {
  opacity: 0.6;
}
.flow-step.pending .step-number {
  background: var(--clr-text-muted);
  box-shadow: 0 4px 10px rgba(71, 85, 105, 0.2);
}
@media (min-width: 768px) {
  .flow-step {
    width: auto;
    flex: 0 0 20%;
    min-height: 300px; /* PC時のみ高さを統一 */
    text-align: center; /* PC時も中央寄せ */
    align-items: center; /* PC時も中央寄せ */
  }
}
@media (max-width: 767px) {
  .flow-step {
    padding: 24px 20px; /* パディングを調整 */
    min-height: 200px; /* 最小高さを設定 */
    width: 100%; /* 全幅に変更 */
    flex-shrink: 1; /* 縮小を許可 */
    text-align: center; /* 中央寄せ */
    align-items: center; /* 子要素を中央寄せ */
  }
}
.flow-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
}

/* ゴール（STEP5）中央ワイド - 解決感強化・進行表示 */
.flow-step--goal {
  padding-top: 44px;
  padding-bottom: 44px;
  background: radial-gradient(1200px 420px at 18% -20px, rgba(11, 90, 66, 0.15) 0%, rgba(11, 90, 66, 0.08) 40%, transparent 65%) #fff;
  position: relative;
  overflow: visible; /* 光彩ラインを表示するため */
  /* ゴール達成時の特別エフェクト */
  border: 3px dashed rgba(15, 122, 90, 0.7); /* 破線ボーダー追加（濃く） */
  /* 光彩ライン効果 */
  /* ホバー時の特別エフェクト */
  /* 見出しの強調 */
}
.flow-step--goal.achieved {
  background: radial-gradient(1200px 420px at 18% -20px, rgba(154, 107, 10, 0.2) 0%, rgba(154, 107, 10, 0.1) 40%, transparent 65%) #fff;
  border: 2px solid var(--clr-accent-gold);
  box-shadow: 0 12px 40px rgba(154, 107, 10, 0.2);
}
.flow-step--goal.achieved .step-number {
  background: linear-gradient(135deg, var(--clr-accent-gold), var(--clr-primary));
  animation: step-complete 0.6s ease-out;
}
.flow-step--goal.achieved::before {
  content: "🎉";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 2rem;
  animation: float 2s ease-in-out infinite;
}
@media (min-width: 768px) {
  .flow-step--goal {
    flex: 0 0 30%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
.flow-step--goal::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, rgba(15, 122, 90, 0.3) 0%, rgba(15, 122, 90, 0.1) 25%, rgba(15, 122, 90, 0.2) 50%, rgba(15, 122, 90, 0.1) 75%, rgba(15, 122, 90, 0.3) 100%);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flow-step--goal:hover {
  transform: translateY(-6px) scale(1.02); /* より大きく浮上・スケール */
  /* ステップ番号の特別エフェクト */
  /* タイトルの微細なアニメーション */
  /* 説明文の微細なアニメーション */
  box-shadow: 0 16px 40px rgba(15, 122, 90, 0.15), 0 8px 20px rgba(15, 122, 90, 0.1);
}
.flow-step--goal:hover .step-number {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(13, 107, 79, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flow-step--goal:hover .flow-title {
  transform: translateY(-2px);
  color: var(--clr-primary);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flow-step--goal:hover .flow-summary {
  transform: translateY(-1px);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flow-step--goal:hover::before {
  opacity: 0.3; /* 光彩ラインをさらに薄く表示 */
}
.flow-step--goal .flow-title {
  font-size: clamp(1.43rem, 2.35vw, 1.6rem); /* +0.15rem */
  font-weight: 700; /* より太く */
  color: var(--clr-primary); /* ブランドカラーに変更 */
  text-shadow: 0 1px 2px rgba(15, 122, 90, 0.1);
  /* アンパサンドのアクセント */
}
.flow-step--goal .flow-title .ampersand {
  font-size: 0.7em; /* 小さく */
  font-weight: 400; /* 細く */
  color: rgba(15, 122, 90, 0.6); /* 薄い色 */
  margin: 0 0.1em; /* 左右の余白 */
  vertical-align: baseline;
}

.flow-subcopy {
  font-size: clamp(0.95rem, 1.6vw, 1rem);
  line-height: 1.6;
  color: var(--clr-text-body);
  letter-spacing: 0.01em;
  margin: 0.5rem 0 1.1rem;
  /* STEP5のサブコピーを強調 */
}
.flow-step--goal .flow-subcopy {
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  font-weight: 500;
  color: var(--clr-text-strong);
  line-height: 1.7;
  margin: 0.8rem 0 1.3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.flow-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  justify-content: center;
  padding: 0;
  margin: 0.5rem 0 0;
  list-style: none;
}

.flow-chip {
  border: 0;
  background: rgba(15, 122, 90, 0.12);
  border-radius: 16px;
  padding: 0.38rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-primary);
  width: 100%;
  text-align: center;
  transition: all 0.2s ease;
  /* STEP5のチップを特別に強調 */
}
.flow-step--goal .flow-chip {
  background: linear-gradient(135deg, rgba(15, 122, 90, 0.15) 0%, rgba(15, 122, 90, 0.08) 100%);
  border: 1px solid rgba(15, 122, 90, 0.2);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 122, 90, 0.1);
}
.flow-step--goal .flow-chip:hover {
  background: linear-gradient(135deg, rgba(15, 122, 90, 0.2) 0%, rgba(15, 122, 90, 0.12) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 122, 90, 0.15);
}

.flow-title {
  font-size: clamp(1.28rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--clr-text-strong);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 0.25rem;
  position: relative;
  min-height: 4.2em; /* 見出し3行分を確保 */
  display: flex;
  align-items: center; /* 1行時は縦中央に */
  text-wrap: pretty; /* より自然な改行に */
  word-break: normal; /* 日本語も改行可に */
  overflow-wrap: anywhere; /* はみ出し防止 */
  justify-content: center; /* デフォルトで中央寄せ */
  /* モバイル時の調整 */
}
@media (max-width: 767px) {
  .flow-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    min-height: 3.5em; /* 高さを縮小 */
    margin-bottom: 0.5rem; /* 余白を増加 */
  }
}

.flow-title.is-center {
  justify-content: center; /* 横中央寄せ */
  text-align: center;
}

.flow-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem; /* フォントサイズアップ */
  font-weight: 700; /* より太く */
  color: var(--clr-primary);
  background: linear-gradient(135deg, rgba(15, 122, 90, 0.15) 0%, rgba(15, 122, 90, 0.08) 100%); /* グラデーション背景 */
  border: 1px solid rgba(15, 122, 90, 0.2); /* ボーダー追加 */
  border-radius: 999px;
  padding: 0.4rem 0.8rem; /* パディング増加 */
  margin: 0 auto 0.8rem; /* 上下余白を増加 */
  text-align: center;
  min-height: 2rem; /* 高さを増加 */
  line-height: 1.3rem; /* 行間を調整 */
  width: fit-content; /* コンテンツ幅に合わせる */
  box-shadow: 0 2px 6px rgba(15, 122, 90, 0.1); /* 影追加 */
  transition: all 0.2s ease; /* ホバー効果用 */
  /* モバイル時の調整 */
  /* ホバー効果 */
}
@media (min-width: 768px) {
  .flow-benefit {
    margin: 0 auto 0.8rem; /* PC時も余白増加 */
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .flow-benefit {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    margin: 0 auto 0.6rem;
    min-height: 1.8rem;
  }
}
.flow-benefit:hover {
  background: linear-gradient(135deg, rgba(15, 122, 90, 0.2) 0%, rgba(15, 122, 90, 0.12) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 122, 90, 0.15);
}

.step-number {
  position: relative;
  display: inline-block;
  width: 90px; /* アイコンサイズをさらにアップ */
  height: 90px;
  /* 進行状態インジケーター */
  /* 完了状態の表示 */
  /* 現在のステップ表示 */
  border-radius: 50%; /* 円形背景を維持 */
  background: var(--clr-primary); /* 円形背景色をここに移動 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  margin: 0 auto 1rem; /* 中央配置と余白 */
  /* モバイル時のアイコンサイズ調整 */
}
.step-number::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--clr-accent-gold);
  border: 3px solid white;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 3;
  box-shadow: 0 2px 8px rgba(154, 107, 10, 0.3);
}
.step-number.completed::before {
  opacity: 1;
  transform: scale(1);
}
.step-number.current::before {
  opacity: 1;
  transform: scale(1);
  background: var(--clr-primary);
  animation: pulse-current 2s infinite;
}
.step-number .step-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .step-number {
    width: 80px; /* モバイル時もサイズアップ */
    height: 80px;
  }
}

.flow-step--goal .step-number {
  width: 120px !important; /* ゴールステップを120pxに */
  height: 120px !important;
  transform: scale(1.1) !important; /* スケール調整 */
  background: linear-gradient(135deg, var(--clr-primary) 0%, rgba(15, 122, 90, 0.8) 100%) !important; /* ゴールステップの背景色をここに移動 */
  box-shadow: 0 6px 16px rgba(15, 122, 90, 0.25) !important;
  /* 背景色は親要素に移動済み */
  /* モバイル時のゴールステップ調整 */
}
@media (max-width: 767px) {
  .flow-step--goal .step-number {
    width: 80px !important;
    height: 80px !important;
    transform: scale(1.05) !important;
  }
}

/* 透かし番号（メリハリ強化）*/
.flow-step {
  overflow: hidden;
}

/* 透かし番号を疑似要素の競合を避けるため、より具体的なセレクタで定義 */
.flow-step:nth-child(1)::after {
  content: "01";
  position: absolute;
  right: 16px;
  bottom: 8px; /* 位置を下へ */
  font-size: 3rem; /* フォントサイズを大きく */
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 24, 39, 0.06);
  z-index: 0;
  pointer-events: none;
}

.flow-step:nth-child(2)::after {
  content: "02";
  position: absolute;
  right: 16px;
  bottom: 8px; /* 位置を下へ */
  font-size: 3rem; /* フォントサイズを大きく */
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 24, 39, 0.06);
  z-index: 0;
  pointer-events: none;
}

.flow-step:nth-child(3)::after {
  content: "03";
  position: absolute;
  right: 16px;
  bottom: 8px; /* 位置を下へ */
  font-size: 3rem; /* フォントサイズを大きく */
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 24, 39, 0.06);
  z-index: 0;
  pointer-events: none;
}

.flow-step:nth-child(4)::after {
  content: "04";
  position: absolute;
  right: 16px;
  bottom: 8px; /* 位置を下へ */
  font-size: 3rem; /* フォントサイズを大きく */
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 24, 39, 0.06);
  z-index: 0;
  pointer-events: none;
}

.flow-step:nth-child(5)::after {
  content: "05";
  position: absolute;
  right: 16px;
  bottom: 8px; /* 位置を下へ */
  font-size: 3rem; /* フォントサイズを大きく */
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 24, 39, 0.06);
  z-index: 0;
  pointer-events: none;
}

.flow-summary {
  font-size: 0.98rem;
  color: var(--clr-text-body);
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
  text-align: left; /* 左寄せで読みやすく */
  display: block; /* 省略記号を出さず全文表示 */
}

/* 取扱い商材 - オフセット配置 + 非矩形形状 */
.product-categories {
  position: relative;
  overflow: hidden;
  /* 背景装飾要素 */
}
.product-categories::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -15%;
  width: 400px;
  height: 400px;
  background: var(--clr-primary-soft);
  border-radius: 50%;
  opacity: 0.15;
  z-index: -1;
}

.catalog-intro {
  margin-bottom: var(--space-2xl); /* 統一間隔 */
  text-align: center;
  margin-right: var(--offset-medium); /* 右オフセット */
}

.catalog-note {
  margin-top: var(--space-xl); /* 統一間隔 */
  color: var(--clr-text-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

.categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 32px);
  max-width: min(1200px, 100vw - 2rem); /* ビューポート幅を超えない */
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px, 3vw, 24px); /* 左右のパディング追加 */
  /* オフセット配置を無効化 - 全て並列に統一 */
  /* グループ化の表現 */
}
@media (min-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 32px);
    max-width: min(1000px, 100vw - 2rem); /* ビューポート幅を超えない */
  }
}
@media (min-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 28px);
    max-width: min(1200px, 100vw - 2rem); /* ビューポート幅を超えない */
  }
}
.categories-grid .category-item:nth-child(odd),
.categories-grid .category-item:nth-child(3n+2) {
  transform: none;
}
.categories-grid::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--decorative-line-width, 60px);
  height: 3px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-item {
  padding: 0;
  border: 1px solid rgba(11, 90, 66, 0.12);
  position: relative;
  text-align: left;
  background: linear-gradient(135deg, #ffffff 0%, rgba(11, 90, 66, 0.02) 30%, rgba(157, 209, 184, 0.05) 70%, #ffffff 100%); /* 洗練されたグラデーション背景 */
  /* 右下角の凹み形状（より洗練された形状） */
  clip-path: polygon(0 0, 100% 0, 100% 78%, 82% 100%, 0 100%);
  /* 2025年トレンド：より洗練された重層シャドウ */
  box-shadow: 0 2px 8px rgba(11, 90, 66, 0.08), 0 8px 24px rgba(11, 90, 66, 0.12), 0 16px 40px rgba(11, 90, 66, 0.06), 0 32px 64px rgba(11, 90, 66, 0.04); /* 最深影 */
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* 3D変形のためのperspective設定 */
  transform-style: preserve-3d;
  perspective: 1200px;
  /* 疑似要素で右下角の凹み背景（洗練されたグラデーション） */
  /* より滑らかなホバー効果（最適化） */
  transition: all 0.4s var(--animation-easing-smooth);
  /* アクセシビリティ対応 */
}
.category-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 58%;
  background: linear-gradient(135deg, rgba(11, 90, 66, 0.03) 0%, rgba(157, 209, 184, 0.08) 50%, rgba(11, 90, 66, 0.05) 100%);
  z-index: -1;
  border-radius: 0 0 0 24px;
  transition: all 0.4s var(--animation-easing-smooth);
  box-shadow: inset 0 2px 8px rgba(11, 90, 66, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .category-item {
    transition: none;
  }
  .category-item:hover {
    transform: none;
  }
}
.category-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(11, 90, 66, 0.15), 0 24px 64px rgba(11, 90, 66, 0.12), 0 48px 96px rgba(11, 90, 66, 0.08);
  border-color: rgba(11, 90, 66, 0.2);
  /* 疑似要素の色変更とアニメーション（より洗練された効果） */
  /* タグの強調 */
}
.category-item:hover::after {
  background: linear-gradient(135deg, rgba(11, 90, 66, 0.08) 0%, rgba(157, 209, 184, 0.15) 50%, rgba(11, 90, 66, 0.1) 100%);
  transform: scale(1.08) rotate(1deg);
  transition: all 0.4s var(--animation-easing-smooth);
  box-shadow: inset 0 4px 12px rgba(11, 90, 66, 0.15);
}
.category-item:hover .category-item__tag .tag-text {
  background: #222;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.category-item:hover .category-details h4::before {
  animation: dotBounce 0.8s ease-in-out;
  background: #ff4444;
}

/* タグ部分（h3タグ）- 洗練されたデザイン */
.category-item__tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  margin: 0;
}
.category-item__tag .tag-text {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-hover) 100%);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px; /* より丸みを帯びたデザイン */
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.3s var(--animation-easing-smooth);
  display: inline-block;
  box-shadow: 0 2px 8px rgba(11, 90, 66, 0.3), 0 4px 16px rgba(11, 90, 66, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* ホバー時の効果 */
}
.category-item__tag .tag-text:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(11, 90, 66, 0.4), 0 8px 24px rgba(11, 90, 66, 0.3);
}

/* SVG要素（絶対配置で右端にピッタリ）- 洗練されたデザイン */
.category-item__img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  border-radius: 0 0 0 20px; /* より大きな角丸 */
  overflow: hidden; /* 子要素をクリップ */
  /* 洗練された影効果 */
  box-shadow: 0 4px 16px rgba(11, 90, 66, 0.1), 0 8px 32px rgba(11, 90, 66, 0.08);
  /* ホバー時の画像効果 */
}
.category-item__img picture, .category-item__img img, .category-item__img svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--animation-easing-smooth);
  filter: brightness(1.05) contrast(1.1); /* 微細な画像調整 */
}
.category-item:hover .category-item__img picture, .category-item:hover .category-item__img img, .category-item:hover .category-item__img svg {
  transform: scale(1.05) rotate(1deg);
  filter: brightness(1.1) contrast(1.15);
}

/* テキスト部分 - 洗練されたレイアウト */
.category-item__txt {
  width: 100%;
  padding: 80px 24px 24px 24px; /* より余裕のあるパディング */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  /* テキストの読みやすさ向上 */
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.category-summary {
  font-size: clamp(0.8rem, 1.4vw, 0.9rem);
  color: var(--clr-text-body);
  margin-bottom: 1.5rem;
  line-height: 2;
  letter-spacing: 0;
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: break-word;
  flex-shrink: 0;
  max-height: 12em;
  overflow: hidden;
  /* アニメーション機能（最適化） */
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s var(--animation-easing-smooth);
}
.category-summary.animate {
  opacity: 1;
  transform: translateY(0);
}
.category-summary > span {
  position: relative;
  display: inline-block;
}
.category-summary > span::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -4px;
  top: -4px;
  right: -4px;
  background-color: #ffffff;
  border-radius: 4px;
  z-index: -1;
}

.category-details {
  margin-top: auto; /* 下部に配置 */
  flex-shrink: 0; /* 詳細部分の縮小を防止 */
}

.category-details h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: var(--clr-primary);
  margin: 0 0 1rem -1rem;
  line-height: 1.4;
  letter-spacing: 0.8px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  cursor: default;
  /* ホバー時の効果 */
}
.category-details h4::before {
  content: "";
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, var(--clr-accent-gold) 0%, var(--clr-primary) 100%);
  border-radius: 50%;
  transition: all 0.3s var(--animation-easing-smooth);
  box-shadow: 0 2px 4px rgba(11, 90, 66, 0.3);
}
.category-item:hover .category-details h4 {
  color: var(--clr-primary-hover);
}
.category-item:hover .category-details h4::before {
  transform: scale(1.3);
  box-shadow: 0 3px 8px rgba(11, 90, 66, 0.4);
}

.manufacturer-list {
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  color: var(--clr-text-strong);
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 0;
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: break-word;
  position: relative;
  padding-left: 0;
  padding-right: 35%;
  max-height: 6em;
  overflow: hidden;
  /* ホバー時の効果 */
}
.category-item:hover .manufacturer-list {
  color: var(--clr-primary);
  transition: color 0.3s ease;
}

/* ドットのバウンドアニメーション */
@keyframes dotBounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-4px);
  }
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .category-item {
    flex-direction: column;
    height: auto;
    min-height: 340px; /* 画像高さ増加に合わせて調整 */
    /* モバイルでは形状を通常の四角形に */
    clip-path: none;
    border-radius: 12px;
  }
  .category-item::after {
    display: none;
  }
  .category-item__img {
    position: relative; /* 絶対配置を解除 */
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: 200px; /* モバイル用の高さを統一 */
    display: block; /* 表示する */
    border-radius: 12px 12px 0 0; /* 上部のみ丸角 */
    margin-bottom: 0;
  }
  .category-item__txt {
    padding: 20px 16px 16px 16px; /* パディングを調整 */
    width: 100%;
  }
  .category-item__tag {
    position: relative; /* 絶対配置を解除 */
    top: auto;
    left: auto;
    margin-bottom: 12px;
  }
}
@media (max-width: 480px) {
  .category-item {
    min-height: 320px; /* 画像高さ増加に合わせて調整 */
  }
  .category-item__img {
    height: 130px; /* スマートフォンでも適切な高さに調整 */
  }
  .category-item__txt {
    padding: 16px 12px 12px 12px; /* パディングを調整 */
  }
  .category-item__tag {
    margin-bottom: 8px;
  }
  .category-summary {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }
  .manufacturer-list {
    padding-right: 0;
    font-size: 0.75rem; /* フォントサイズを調整 */
  }
}
/* 重複する.category-itemスタイルを削除 - 上記の統合されたスタイルを使用 */
.hero-text {
  margin-bottom: 0;
  /* 左はパンくずレール、右は画面端と同幅にする */
  --hero-side-gap: clamp(24px, 6vw, 64px);
  --breadcrumb-rail: 72px; /* 共通パンくずの実測に合わせた視覚余白 */
  padding-left: calc(var(--breadcrumb-rail) + var(--hero-side-gap));
  padding-right: var(--hero-side-gap);
}

.hero-section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--clr-text-strong);
  letter-spacing: 0.1em;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.hero-title {
  font-size: clamp(4rem, 9vw, 7rem); /* より大胆なサイズ */
  font-weight: 900; /* より重いウェイト */
  color: var(--clr-text-strong); /* 通常の色を復活 */
  line-height: 1.05; /* より密な行間 */
  letter-spacing: -0.02em; /* より密な文字間隔 */
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.1); /* より強い立体感 */
  position: relative;
  /* グラデーション効果を削除して通常の色表示に戻す */
}

.textone {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: clamp(6px, 1.2vw, 12px);
  height: clamp(200px, 50vw, 600px);
  z-index: 20;
}

.bar {
  position: relative;
  width: clamp(4px, 0.8vw, 8px);
  height: clamp(60px, 12vw, 150px);
  background-color: var(--clr-text-strong);
  transform: scaleY(0.1);
  opacity: 1;
  border-radius: 2px;
}

.text {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  font-size: clamp(3.5rem, 8vw, 6rem); /* 元のフォントサイズを維持 */
  font-weight: 300;
  color: var(--clr-text-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
  word-break: keep-all;
  display: inline;
  max-width: 100%; /* はみ出し防止 */
  overflow: hidden; /* はみ出し部分を隠す */
  box-sizing: border-box;
}

.small-text {
  font-size: 0.6em;
  vertical-align: baseline;
}

.title-line {
  font-size: 1em;
  font-weight: 300;
  color: var(--clr-text-strong);
  letter-spacing: 0.02em;
  display: inline;
  white-space: nowrap; /* 一行固定 */
  word-break: keep-all; /* 途中改行を防止 */
  opacity: 1; /* アニメーション用コンテナ内では初期状態を表示 */
  transform: none; /* 既存のアニメーションを無効化 */
  transition: none; /* 既存のトランジションを無効化 */
  /* 中黒（・）の詰め調整 */
}
.title-line .bullet-separator {
  margin-left: -0.22em;
  margin-right: -0.22em;
}
.title-line br {
  line-height: 1;
}

.small-text {
  font-size: 0.6em;
  vertical-align: baseline;
  line-height: 1;
  letter-spacing: 0; /* 助詞自体の追い出しを防止 */
  display: inline-block;
  margin-left: 0.1em; /* 助詞の前の空きを広く */
  margin-right: 0.1em; /* 助詞の後ろの空きを広く */
}

/* かな（え・る）をわずかに詰めてスッキリ見せる */
.kana-tight {
  display: inline-block;
  letter-spacing: 0; /* 単独文字なのでletter-spacingは効きづらい */
  margin-left: -0.1em; /* 前をさらに詰める */
  margin-right: -0.03em; /* 後ろも少し詰める */
}

/* kinetic-small クラスの基本スタイル */
.kinetic-small {
  font-size: 0.6em !important;
  vertical-align: baseline;
}

/* kinetic-text アニメーションを kinetic-small にも適用しつつ、フォントサイズは維持 */
.kinetic-small.kinetic-text {
  font-size: 0.6em !important;
  vertical-align: baseline;
  /* アニメーションは通常通り適用 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* アニメーション完了後の状態 */
.sales-hero.animate .kinetic-small.kinetic-text {
  opacity: 1;
  transform: translateY(0);
  font-size: 0.6em !important;
}

/* より強力なセレクタで確実に適用 */
.sales-hero .hero-title .title-line .kinetic-small,
.sales-hero .hero-title .title-line .kinetic-small.kinetic-text {
  font-size: 0.6em !important;
  vertical-align: baseline;
}

/* 特定の文字を検出して強制適用 */
.sales-hero .hero-title .title-line span:contains("を"),
.sales-hero .hero-title .title-line span:contains("で") {
  font-size: 0.6em !important;
  vertical-align: baseline;
}

/* インラインスタイルで強制適用 */
.sales-hero .hero-title .title-line .kinetic-small[style*="font-size: 0.6em"] {
  font-size: 0.6em !important;
  vertical-align: baseline !important;
}

/* より強力なセレクタで確実に適用 */
.sales-hero .hero-title .title-line .kinetic-small.kinetic-text {
  font-size: 0.6em !important;
  vertical-align: baseline !important;
}

.hero-title-line {
  width: 100%;
  height: 1px;
  background: var(--clr-text-muted);
  margin: 1.5rem 0; /* コンテンツ幅いっぱい */
  opacity: 0.6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.hero-subtitle-small {
  font-family: "Heebo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--clr-text-body);
  letter-spacing: -0.007em;
  text-transform: none;
  margin-bottom: 0.2rem; /* リードとの距離をさらに詰める */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

/* 強弱の付与 */
.hero-subtitle-small .en-strong {
  font-weight: 500; /* ほんの少し強く */
  letter-spacing: -0.01em;
  font-size: 1.04em;
  color: var(--clr-text-strong);
}

.hero-subtitle-small .en-and {
  opacity: 0.75; /* 少し前に */
  font-weight: 300;
  font-size: 0.92em;
}

.hero-subtitle-small .en-amp {
  display: inline-block;
  font-weight: 500;
  transform: translateY(-0.01em);
  letter-spacing: 0;
  font-size: 1.02em; /* わずかに戻す */
  margin-left: 0.12em; /* 「を」の処理に合わせて余白を広めに */
  margin-right: 0.12em;
}

.hero-subtitle {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 200;
  color: var(--clr-secondary);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
  font-style: italic;
}

.hero-lead {
  font-size: clamp(0.95rem, 1.6vw, 1.2rem); /* サブタイトルと同等〜やや小さめ */
  color: var(--clr-text-body);
  line-height: 1.6;
  max-width: 900px; /* 横幅を広げてぶら下がりを防止 */
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal; /* レイアウトの都合で折返し可 */
}

/* アニメーション発火 */
.sales-hero.animate .hero-section-title,
.sales-hero.animate .title-line {
  opacity: 1;
  transform: translateY(0);
}

.sales-hero.animate .hero-title-line,
.sales-hero.animate .hero-subtitle-small,
.sales-hero.animate .hero-subtitle,
.sales-hero.animate .hero-lead {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ対応 - 5段階ブレークポイント */
/* 大画面デスクトップ (1200px以上) - デフォルト */
/* 小さいデスクトップ (1024px以下) */
@media (max-width: 1024px) {
  .sales-hero {
    padding: clamp(70px, 10vw, 100px) 0;
  }
  .hero-title {
    font-size: clamp(3rem, 6vw, 5rem); /* タブレットでも大胆に */
  }
  .text {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  }
  .hero-section-title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
  }
  .hero-subtitle-small {
    font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  }
  .hero-lead {
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  }
}
/* タブレット専用最適化 (768px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* タブレット専用のスライダー高さ調整 */
  .plant-news-body {
    height: 500px;
  }
  /* タブレット専用のスライダートラック調整 */
  .plant-news-slider {
    height: 440px;
  }
  .plant-news-slider .splide__track {
    overflow-y: hidden;
  }
  /* タブレット専用のフォントサイズ調整 */
  .hero-title {
    font-size: clamp(3.5rem, 7vw, 4.5rem); /* タブレット専用サイズ */
  }
  .text {
    font-size: clamp(3rem, 6vw, 4rem); /* タブレット専用サイズ */
  }
  /* タブレット専用の余白調整 */
  .sales-hero {
    padding: clamp(80px, 12vw, 120px) 0;
  }
  /* タブレット専用のコンテナ幅調整 */
  .about-text {
    padding: 0 4em; /* タブレット用の余白 */
  }
  /* タブレット専用のボタン改善 */
  .plant-news-card {
    height: auto !important;
    min-height: 400px;
  }
  .plant-news-card__image {
    height: 200px !important;
    aspect-ratio: none !important;
    min-height: 200px;
    max-height: 200px;
  }
  .plant-news-card__content {
    padding: 1.25rem;
    opacity: 1;
    position: relative;
    z-index: 2;
    flex: 1;
  }
  .plant-news-card__button {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* タブレット専用のhero-text設定 */
  .hero-text {
    text-align: center;
    padding-left: var(--hero-side-gap) !important;
    padding-right: var(--hero-side-gap) !important;
  }
  .stats-list {
    padding: 0 2em; /* タブレット用の余白 */
    grid-template-columns: repeat(3, 1fr); /* タブレット時は3列横並び */
    gap: clamp(20px, 3vw, 30px);
  }
  /* about-statsのタブレット専用設定 */
  .about-stats {
    grid-template-columns: repeat(2, 1fr) !important; /* タブレット時は2列横並び */
    gap: clamp(20px, 3vw, 30px) !important;
  }
  /* タブレット専用のグリッド調整 */
  .strengths-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
    gap: clamp(30px, 5vw, 40px);
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
    gap: clamp(20px, 4vw, 28px);
  }
  /* タブレット専用のカードサイズ調整 */
  .category-item {
    min-height: 280px; /* タブレット用の高さ */
  }
  .category-item__img {
    height: 140px; /* タブレット用の画像高さ */
    width: 160px; /* 幅を制限して拡大を防ぐ */
    object-fit: contain; /* 画像の比率を保持 */
    object-position: center; /* 中央配置 */
  }
  /* タブレット専用のタッチ操作最適化 */
  .category-item__title,
  .category-item__description {
    font-size: clamp(1rem, 2.2vw, 1.2rem); /* タブレット用フォントサイズ */
    line-height: 1.5;
  }
  .category-item__title {
    min-height: 2.5em; /* タブレット用の高さ確保 */
  }
  /* タブレット専用のボタンサイズ */
  .category-item__link {
    padding: 12px 20px; /* タブレット用のタッチ領域 */
    font-size: 0.9rem;
    min-height: 44px; /* タッチ操作に適したサイズ */
  }
  /* タブレット専用のフローステップ調整 */
  .flow-steps {
    gap: 24px; /* タブレット用の間隔 */
    padding: 0 2rem; /* タブレット用の余白 */
  }
  .flow-step {
    padding: 24px; /* タブレット用のパディング */
    min-height: 180px; /* タブレット用の最小高さ */
  }
  .flow-step__title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* タブレット用フォントサイズ */
    margin-bottom: 12px;
  }
  .flow-step__description {
    font-size: clamp(0.9rem, 2vw, 1rem); /* タブレット用フォントサイズ */
    line-height: 1.6;
  }
  /* タブレット専用のsection-header間隔調整 */
  .section-header {
    margin-top: clamp(200px, 25vw, 300px) !important; /* タブレット用の大幅な上部間隔 */
  }
  /* 「プラント営業部の強み」セクションのみの左側パディング調整 */
  #about-plant .section-header {
    padding-left: 4em !important; /* about-textと並ぶ程度の左側パディング */
  }
  /* 主要取扱商材セクションのドットマーク+「主要取扱メーカー」の中央配置 */
  .category-details h4 {
    justify-content: center; /* 中央配置 */
    text-align: center;
  }
  /* category-detailsの上部余白調整 */
  .category-details {
    margin-top: 8px; /* 上部余白をさらに縮小 */
  }
  /* category-itemのレイアウトを横並びに変更 */
  .category-item {
    display: flex;
    flex-direction: row; /* 横並びレイアウト */
    align-items: center;
    min-height: 200px; /* 高さを調整 */
  }
  .category-item__txt {
    flex: 1; /* テキスト部分を拡張 */
    padding: 20px 16px; /* パディングを調整 */
  }
  .category-item__img {
    flex: 0 0 160px; /* 画像部分を固定幅 */
    height: 120px; /* 高さを調整 */
    position: relative; /* 絶対配置を解除 */
    top: auto;
    right: auto;
    transform: none;
  }
}
/* タブレット (768px以下) */
@media (max-width: 768px) {
  /* オフセットを無効化 */
  .troubles-intro,
  .strengths-intro,
  .flow-intro,
  .catalog-intro {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .trouble-item:nth-child(odd), .trouble-item:nth-child(even) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* strength-itemの幅制限 */
  .strength-item {
    max-width: 100% !important; /* 親要素の幅に制限 */
    width: 100% !important; /* 幅を100%に固定 */
    min-width: 0 !important; /* 最小幅をリセット */
  }
  /* 縦書きタイトルの調整 */
  .strength-title-vertical {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    width: clamp(2rem, 4vw, 2.5rem) !important; /* さらに小さく */
    min-width: clamp(2rem, 4vw, 2.5rem) !important;
    max-width: clamp(2rem, 4vw, 2.5rem) !important;
    flex-shrink: 1 !important; /* 縮小を許可 */
    padding: clamp(8px, 1.5vw, 12px) clamp(4px, 0.8vw, 6px);
    letter-spacing: 0.2em;
    border-right: 3px solid var(--clr-accent-gold);
    box-shadow: 0 2px 6px rgba(15, 122, 90, 0.2);
  }
  .hero-title {
    font-size: clamp(2.5rem, 8.5vw, 4rem); /* モバイルでも印象的に */
    margin-bottom: 1.2rem;
  }
  .title-line:nth-child(1) {
    font-size: 0.4em;
    margin-bottom: 0.5rem;
  }
  .hero-title-line {
    width: 100%;
    margin: 1rem 0;
  }
  .hero-subtitle-small {
    font-size: clamp(0.8rem, 3vw, 1rem);
    margin-bottom: 0.8rem;
  }
  .hero-subtitle {
    font-size: clamp(1.2rem, 5vw, 2rem);
    margin-bottom: 2rem;
  }
  .hero-lead {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
}
/* 極小スマートフォン (480px以下) */
@media (max-width: 480px) {
  .sales-hero {
    padding: clamp(45px, 9vw, 65px) 0;
  }
  /* モバイル専用のhero-text設定 */
  .hero-text {
    text-align: center;
    padding-left: var(--hero-side-gap) !important;
    padding-right: var(--hero-side-gap) !important;
  }
  /* strength-itemの幅制限 */
  .strength-item {
    max-width: 100% !important; /* 親要素の幅に制限 */
    width: 100% !important; /* 幅を100%に固定 */
    min-width: 0 !important; /* 最小幅をリセット */
  }
  /* 縦書きタイトルの調整 */
  .strength-title-vertical {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    width: clamp(1.5rem, 3.5vw, 2rem) !important; /* 極小スマホではさらに小さく */
    min-width: clamp(1.5rem, 3.5vw, 2rem) !important;
    max-width: clamp(1.5rem, 3.5vw, 2rem) !important;
    flex-shrink: 1 !important; /* 縮小を許可 */
    padding: clamp(6px, 1.2vw, 10px) clamp(2px, 0.5vw, 4px);
    letter-spacing: 0.15em;
    border-right: 2px solid var(--clr-accent-gold);
    box-shadow: 0 1px 4px rgba(15, 122, 90, 0.15);
  }
  /* strength-effectのモバイル調整 */
  .strength-effect {
    max-width: 90% !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .hero-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem); /* 小画面でも大胆に */
    margin-bottom: 1rem;
  }
  .hero-section-title {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    margin-bottom: 0.9rem;
  }
  .text {
    white-space: normal;
    word-break: break-word;
    font-size: clamp(1.1rem, 2.8vw, 1.8rem);
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .textone {
    max-width: 100%;
    overflow: hidden;
  }
  /* 480px幅のみで2行対応 */
  .text {
    display: block;
    font-size: 0; /* 元のテキストを非表示 */
  }
  .text::before {
    content: "現場を調達力・選定力";
    display: block;
    line-height: 1.1;
    margin-bottom: 0.1em;
    font-size: clamp(1.2rem, 5.5vw, 2rem);
  }
  .text::after {
    content: "で支える";
    display: block;
    line-height: 1.1;
    font-size: clamp(1.2rem, 5.5vw, 2rem);
  }
  .text::before,
  .text::after {
    font-size: clamp(1.2rem, 5.5vw, 2rem);
    font-weight: 300;
    color: var(--clr-text-strong);
    letter-spacing: 0.02em;
  }
  .hero-title-line {
    width: 100%;
    margin: 0.7rem 0;
  }
  .hero-subtitle-small {
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    margin-bottom: 0.5rem;
  }
  .hero-subtitle {
    font-size: clamp(0.9rem, 4.5vw, 1.3rem);
    margin-bottom: 1.3rem;
  }
  .hero-lead {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }
}
/* カード（ elevation は影うすめ） */
.card {
  background: var(--clr-surface-base);
  border: 1px solid var(--clr-line);
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* アコーディオン（1つだけ展開想定） */
.accordion__header {
  cursor: pointer;
  border-bottom: 1px solid var(--clr-line);
}

.accordion__icon {
  color: var(--clr-secondary);
  transition: transform 0.15s ease;
}

.accordion__item[open] .accordion__icon {
  transform: rotate(90deg);
}

/* 微小モーション（キネティックタイポ控えめ） */
.fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* PC以外でスライドバーを非表示 */
@media (max-width: 1024px) {
  .slide-bar {
    display: none;
  }
  /* PC以外でテキストをヒーローセクションの90%の位置に配置 */
  .hero-content {
    position: absolute;
    top: 90%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    bottom: auto;
  }
  /* PC以外でメインタイトルの文字サイズを大きく */
  .text {
    font-size: clamp(1.1rem, 2.8vw, 1.8rem);
  }
  /* 480px以下では疑似要素を使用するため、元のテキストを非表示 */
}
@media (max-width: 1024px) and (max-width: 480px) {
  .text {
    font-size: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* 当社の対応ディバイダ */
.response-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: var(--space-lg) 0 calc(var(--space-lg) + 16px); /* さらに+4pxで呼吸感 */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s var(--animation-easing), transform 0.28s var(--animation-easing);
}

.response-divider::before,
.response-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.15);
}

.response-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--font-size-sm);
  color: var(--clr-primary);
  background: var(--clr-primary-soft);
  border-radius: 999px;
  border: 1px solid rgba(15, 122, 90, 0.18);
  position: relative;
}

.response-label::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--clr-primary);
  margin-left: 0.2rem;
}

/* アニメーション連携（summaryが見えたら自然に表示） */
.trouble-summary + .response-divider {
  opacity: 1;
  transform: translateY(0);
}

/* 1-2 重なり合い：PCでsummaryをdetailsに軽く食い込ませて連続性を付与 */
@media (min-width: 768px) {
  .trouble-description {
    position: relative;
    margin-bottom: calc(var(--overlap-gap) * -1);
    z-index: 2;
  }
  .trouble-details {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--overlap-gap) + 6px);
  }
  /* 課題ピル前面化のみ（位置はflexで揃える） */
  .trouble-title::before {
    position: static;
    z-index: 3;
  }
}
/* トラブルセクションの上端を持ち上げて接続感を強める */
.troubles {
  background: white; /* セクション自体は白 */
  position: relative;
  padding-top: clamp(40px, 6vw, 72px);
}

/* Strengths 背景色を連結 */
.strengths {
  background-color: white; /* 白背景 */
  padding-top: 0 !important; /* 上部paddingを削除 */
  padding-bottom: clamp(64px, 10vw, 120px) !important; /* 下部に120px padding */
  margin-bottom: 0 !important;
}
.strengths .container {
  padding-top: 0; /* コンテナの上部paddingも削除 */
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Plant News 背景色を統一 */
.plant-news {
  background-color: white; /* 白背景 */
  padding-bottom: 0 !important; /* 下部パディングを削除 */
  margin-bottom: 0 !important; /* 下部マージンを削除 */
}
.plant-news .container {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* フレックスショートコードのレスポンシブ対応は shortcode-styles.css に移行済み */
/* =============================
   ヒーロースライダー ポップアップアイコン
   ============================= */
.hero-slide-card[data-slide-type=inline_popup] .hero-slide-image::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background-image: url("../images/sales_dp_images/mouse_click_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 1;
  /* 背景を追加して視認性を向上 */
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  padding: 4px;
  /* 自然な影を追加 */
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.hero-slide-card[data-slide-type=inline_popup]:hover .hero-slide-image::after {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.4);
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4));
}

/* ポップアップ非対応スライドではアイコンを非表示 */
.hero-slide-card:not([data-slide-type=inline_popup]) .hero-slide-image::after {
  display: none;
}

/*# sourceMappingURL=sales_dp.css.map */