/* * {
  outline: 1px solid red !important;
} */

.inner {
  padding: 0;
  width: auto;
}
h1 {
  padding: 0;
  margin: 0;
}
h1:before {
  display: none;
}

h2:first-letter {
  font-size: inherit;
  color: inherit;
}
h3 {
  padding: 0;
  margin: 0;
}
h3:before {
  display: none;
}
p {
  margin: 0;
  padding: 0;
}

:root {
  --magenta: #aa0061;
  --pink: #fa4bae;
  --cyan: #2cd7f5;
  --black: #2e2c2d;
  --light-gray: #948d91;
  --bg-pink: #f5f0f3;
  --bg-gray: #474346;
  /* フォント指定 */
  --font-jp: "M PLUS 1p", sans-serif;
  --font-en: "Schibsted Grotesk", sans-serif;
  /* --- フォントサイズ --- */
  --fs-base: 18px; /* 標準の本文 */
  --fs-s: 14px; /* 補足・ラベル */
  --fs-h1: 64px; /* タイトル */
  --fs-h2: 48px; /* セクション見出し */
  --fs-h3: 24px; /* カードタイトル */
  --fs-fv32: 32px;
  --fs-tech16: 16px;
  --fs-problem22: 22px;
  --fs-problem16: 16px;
  --fs-reason56: 56px;
  --fs-reason36: 36px;
  --fs-reason28: 28px;
  --fs-merit22: 22px;
  --fs-merit16: 16px;
  --fs-process16: 16px;
  --fs-faq16: 16px;
  --fs-inquiry28: 28px;
  --fs-inquiry16: 16px;
  /* --- フォント太さ --- */
  --fw-normal: 400;
  --fw-bold: 700; /* 強調・見出し */
}

/* 本文の共通設定 */
body {
  font-family: var(--font-jp);
  color: var(--black);
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.8; /* 行間は広めが読みやすいです */
}

@media (max-width: 1260px) {
  /* 1. すべてのコンテナに左右の余白を強制する */
  .sol-container {
    width: 100%;
    max-width: 1240px; /* 1200px + 左右余白20pxずつ */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  /* 2. 画像が画面を突き破るのを防ぐ */
  img {
    max-width: 100%;
    height: auto;
  }
}

.sp-br {
  display: inline; /* 改行させず、そのまま横に並べる */
}

/* セクション共通の見出しスタイル */
.sol-sec-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

/* 英数字フォントの適用 */
.hex,
.step-num,
.nav-item {
  font-family: var(--font-en);
  color: #948d91;
  font-size: 14px;
}

/* ラベル（ABOUT, INQUIRYなど） */
.sol-label {
  font-family: var(--font-en);
  font-size: var(--fs-s);
  font-weight: var(--fw-normal);
  letter-spacing: 0.1em;
  color: #948d91;
  display: block;
}

/* スマホ版の設定 */
@media (max-width: 768px) {
  :root {
    --fs-h2: 28px; /* スマホでは見出しを一括で小さくする */
    --fs-base: 15px;
  }
}

.bg-black {
  background: var(--black);
  color: #fff;
  padding: 0em 0.3em; /* 文字の上下左右に黒い余白を作る */
  display: inline-block; /* 帯を独立させるために重要 */
  line-height: 1.4; /* 行間を少し広げて、帯同士がくっつかないようにする */
  margin-bottom: 0.1em; /* 次の行との物理的な隙間 */
  box-decoration-break: clone; /* 改行した時に背景が途切れないようにする魔法のプロパティ */
  -webkit-box-decoration-break: clone;
}

.magenta {
  color: var(--magenta);
}
.cyan {
  color: var(--cyan);
}
.pink {
  color: var(--pink);
}
.mr10 {
  margin-right: 10px;
}

.sol-fv {
  height: 700px;
  width: 100%; /* ★幅を100%に固定 */
  position: relative; /* 子要素（video）の基準にする */
  display: flex;
  align-items: center;
  overflow: hidden; /* 動画のはみ出しをカット */
  background-color: #000; /* 動画が読み込まれるまでの背景色 */
  z-index: 1; /* ★動画より上にテキストを重ねるための基準 */
}
.sol-fv::before,
.sol-fv::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7); /* 透明度はお好みで */
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  line-height: 1; /* 行間を詰めやすくする */
}
/* --- 1. PC版の設定（769px以上） --- */
@media (min-width: 769px) {
  .sol-fv::before {
    content: ""; /* PCでは before は使わない */
    display: none;
  }
  .sol-fv::after {
    content: "TSUNAGU SOLUTION";
    bottom: 10px;
    font-size: 8.5vw; /* 1行で画面幅に合わせる */
    letter-spacing: 0.05em;
  }
}
/* --- 2. SP版の設定（768px以下） --- */
@media (max-width: 768px) {
  /* 1行目：TSUNAGU */
  .sol-fv::after {
    content: "TSUNAGU";
    bottom: 70px; /* 2行目の上に配置（数値は要調整） */
    font-size: 18vw; /* 2行に分ける分、大きくできる */
    letter-spacing: 0.02em;
  }

  /* 2行目：SOLUTION */
  .sol-fv::before {
    content: "SOLUTION";
    display: block; /* 表示させる */
    bottom: 10px; /* 下端に配置 */
    font-size: 18vw; /* 1行目とサイズを合わせる */
    letter-spacing: 0.02em;
  }
}

/* 動画のスタイル */
.fv-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面いっぱいにリサイズ（重要！） */
  z-index: 1; /* 最背面 */
}

/* --- 通常時（PC）の設定 --- */
.fv-video.is-sp {
  display: none; /* 初期状態ではSP版を隠す */
}

.fv-video.is-pc {
  display: block; /* PC版を表示 */
}

/* --- スマホ時（768px以下）の設定 --- */
@media (max-width: 768px) {
  .fv-video.is-pc {
    display: none; /* PC版を隠す */
  }

  .fv-video.is-sp {
    display: block; /* SP版を表示 */
    width: 100%;
    height: 100%;
  }
}

/* コンテナを動画より上に持ってくる */
.sol-fv .sol-container {
  position: relative;
  z-index: 2;
}

/* コンテナ自体の設定（共通クラスがあるなら不要ですが、念のため） */
.sol-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 3; /* ★背景文字(z-index: 2)よりさらに上に配置して可読性を確保 */
}

/* テキストエリアの幅制限（必要に応じて） */
.sol-fv-inner {
  max-width: 850px; /* テキストが右側の黒い六角形に被らないよう調整 */
}

.sol-fv-title {
  line-height: 1.4;
  font-size: var(--fs-h1);
  margin: 30px 0;
}
.sol-fv-label {
  font-size: var(--fs-fv32);
  font-weight: var(--fw-bold);
  margin: 0;
}

/* --- ABOUTセクション全体 --- */
.sol-about {
  position: relative;
  padding: 100px 0;
  background: var(--bg-pink); /* 全体の薄ピンク背景 */
  overflow: hidden; /* ★ 念のためセクション全体で外側への漏れをカット */
}

.sol-about-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- テキストエリア（3割） --- */
.sol-about-text-content {
  flex: 0 0 30%; /* 3割固定 */
  position: relative;
  z-index: 10;
  /* padding-left を入れることで文字が白背景の端に張り付くのを防ぐ（任意） */
  padding-right: 30px;
}
.sol-about-text-content::before {
  content: "";
  position: absolute;
  top: -40px; /* 上下の余白調整（お好みで） */
  bottom: -40px;
  /* 画面の遥か左端から、テキストエリアの右端(100%)までを白く塗る */
  left: -100vw;
  right: 0;
  background: #fff;
  z-index: -1; /* テキスト（z-index: 10）より背面に配置 */
}

/* 見出しの突き抜け */
.sol-about-header .sol-sec-title {
  position: relative;
  width: 250%; /* 大胆に右へ伸ばす */
  line-height: 1.3;
  z-index: 20;
}

/* --- 画像エリア（7割） --- */
.sol-about-image-content {
  flex: 0 1 70%; /* 7割固定 */
  display: flex;
  justify-content: flex-end; /* 右端に寄せる */
  margin-left: 20px;
  min-width: 0; /* ★ flexアイテムのはみ出し防止の定石 */
}

.about-main-img {
  width: 100%;
  max-width: 733px; /* ご指定のサイズ */
  height: auto;
  display: block;
  /* ★ 画像自体が親の幅を絶対に超えないようにする */
  object-fit: cover;
}

/* --- SP版調整（768px以下） --- */
@media (max-width: 768px) {
  .sol-about-container {
    flex-direction: column; /* 画像が上、テキストが下 */
  }

  .sol-about-text-content,
  .sol-about-image-content {
    flex: 0 0 100%;
  }

  .sol-about-image-content {
    order: 1;
    z-index: 11;
    margin-left: 0;
  }

  .sol-about-text-content {
    order: 2;
    background: #fff;
    padding: 30px 20px;
    margin-top: -40px; /* 画像への重なり */
  }
  /* SPではこの疑似要素を消して、既存の background: #fff を活かす */
  .sol-about-text-content::before {
    display: none;
  }

  .sol-about-header .sol-sec-title {
    width: 100%; /* SPでは突き抜け解除 */
    white-space: normal;
  }
}

/* --- TECHNOLOGY セクション全体設定 --- */
.sol-tech {
  padding: 100px 0;
  overflow: hidden; /* スライダーのはみ出しを隠す */
}

/* ヘッダーエリア */
.sol-tech-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.sol-tech-lead {
  margin-top: 30px;
  line-height: 1.8;
  font-size: var(--fs-tech16);
}

/* 六角形グループ（右側） */
.sol-hex-group {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 20px;
}

/* --- スライダー実装（横並びの肝） --- */
.sol-slider-container {
  position: relative;
  width: 100%;
  padding-left: 100px;
  box-sizing: border-box;
}

.sol-slider-track {
  display: flex; /* グループ(OFFICE等)を横に並べる */
  gap: 40px; /* グループ間の隙間 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  /* 右端までスクロールした時の余白を少し確保 */
  padding-right: 50px;
}

.sol-slider-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* カテゴリーグループ (OFFICE, SUPERMARKETなど) */
.sol-card-group {
  flex: 0 0 auto; /* 内容に応じて横幅を確保 */
  display: flex;
  flex-direction: column;
}

/* カテゴリーラベルと横線 */
.sol-group-label {
  display: flex;
  align-items: center;
  font-family: var(--font-en);
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
  border-bottom: none;
  white-space: nowrap;
}

.sol-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ddd;
}

/* カードを横に並べるエリア */
.sol-group-items {
  display: flex;
  gap: 10px; /* カード同士の隙間 */
}

/* カード単体 */
.sol-card {
  flex: 0 0 170px; /* 幅を固定して縮ませない */
  background: var(--bg-pink);
  padding: 10px 10px 20px;
  text-align: center;
  scroll-snap-align: start;
}

/* --- スライダーボタン --- */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 30px;
  height: 80px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.slider-prev {
  left: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 3px solid var(--magenta);
}
.slider-next {
  right: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 3px solid var(--magenta);
}
/* --- PREV（前へ）ボタンのホバー --- */
.slider-prev:hover {
  background-color: var(--magenta) !important; /* 背景をマゼンタに */
  border-left-color: var(--pink) !important; /* 外側の線を明るいピンクに */
}
/* --- NEXT（次へ）ボタンのホバー --- */
.slider-next:hover {
  background-color: var(--magenta) !important; /* 背景をマゼンタに */
  border-right-color: var(--pink) !important; /* 外側の線を明るいピンクに */
}

/* --- カード内装飾 --- */
.sol-card-img img {
  width: 100%;
  object-fit: contain;
}

.sol-card-title {
  font-size: var(--fs-base);
  margin: 5px 0;
}

.sol-card-tech {
  display: inline-block;
  background: #aa97c0;
  color: #fff;
  padding: 2px 20px;
  font-size: 13px;
  margin: 0;
  clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
  -webkit-clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
}

.sol-card-desc {
  font-size: var(--fs-s);
  color: var(--bg-gray);
  margin: 10px 0 0;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .sol-slider-container {
    padding-left: 12%;
  }
  .sol-tech-header {
    flex-direction: column;
  }
  .sol-hex-group {
    margin-top: 30px;
    align-self: center;
  }
  .sol-slider-track {
    padding: 0 20px;
  }
  .sol-card {
    flex: 0 0 130px;
  } /* スマホでは少し小さく */
}

.sol-problem {
  position: relative; /* 人物画像の基準点 */
  background-color: var(--bg-gray); /* 背景画像が届くまでの仮色 */
  padding: 100px 0 250px; /* 人物画像が被らないよう下部余白を増やす */
  color: #fff;
  text-align: center;
  overflow: hidden; /* 人物画像のはみ出しをカット */
}

/* --- 人物画像の配置 --- */
.sol-problem::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 330px; /* 画像のサイズに合わせて調整 */
  height: 156px; /* 画像のサイズに合わせて調整 */
  background-image: url("/Portals/0/images/sol/top/section4_problem.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}

.sol-problem-title {
  font-size: var(--fs-h2);
  margin: 0;
  color: #fff;
}

.sol-problem-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 30px;
  font-size: var(--fs-h3);
}
.sol-problem-sub::before,
.sol-problem-sub::after {
  content: "";
  width: 100px;
  height: 1px;
  background: #fff;
}

/* グリッド配置 */
.sol-problem-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 吹き出しカード */
.sol-problem-card {
  background: #fff;
  border-radius: 10px;
  padding: 13px 10px;
  color: #333;
  position: relative; /* ツノの位置基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition:
    transform 0.3s,
    background-color 0.3s;
  cursor: pointer; /* カード全体がクリック可能であることを示す */
}

/* 吹き出しのツノ */
.sol-problem-card::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
}

.sol-problem-card:hover {
  background-color: #f0f0f0 !important; /* 薄いグレー */
  transform: scale(1.03); /* 少し大きく */
}
/* ホバー時にツノの色も変える */
.sol-problem-card:hover::after {
  border-top-color: #f0f0f0 !important;
}
/* --- 2. カードホバー時に中のボタンをピンクにする --- */
.sol-problem-card:hover .card-btn {
  background-color: var(--pink) !important;
}
/* --- 3. カードホバー時に中の矢印をアニメーションさせる --- */
.sol-problem-card:hover .arrow {
  animation: arrowAnim 0.3s ease forwards;
}

.card-icon img {
  width: 50px;
  height: auto;
}

.card-text {
  font-weight: 700;
  font-size: var(--fs-problem22);
  margin: 0 0 10px;
}

.card-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--magenta);
  transition: opacity 0.3s;
  color: #fff;
  padding: 6px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: var(--fs-problem16);
}

/* 矢印を動かす準備 */
.card-btn .arrow {
  display: inline-block;
  transition: transform 0.3s;
}

/* 矢印が右から消えて左から戻るアニメーション */
@keyframes arrowAnim {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 40%地点で右に消しきる（より早く消す） */
  40% {
    transform: translateX(20px);
    opacity: 0;
  }
  /* 41%〜59%の間で、目に見えない状態で左側に待機させる */
  50% {
    transform: translateX(-20px);
    opacity: 0;
  }
  /* 100%で元の位置に戻る */
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* SP版レスポンシブ */
@media (max-width: 768px) {
  .sol-problem-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホ版 2列 */
    gap: 20px;
  }
  .sol-problem-title {
    font-size: var(--fs-reason28);
    line-height: 1.3;
  }
  .sol-problem::after {
    width: 100%; /* スマホでは横幅いっぱいに */
    height: 10%;
  }
}

.sol-reason {
  padding: 100px 0;
  background: #fff;
}
.sol-reason-flex {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* 左側固定エリア */
.sol-reason-nav {
  flex: 0 0 450px;
  position: sticky;
  top: 100px; /* 画面上部からの固定位置 */
}

.reason-sticky-menu {
  margin-top: 40px;
}

.reason-nav-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  transition: all 0.4s ease;
}

/* アクティブ（現在地）のスタイル */
/* 1. 全体の背景や枠線を調整する場合 */
.reason-nav-item:hover,
.reason-nav-item.active {
  border-bottom: 2px solid var(--magenta);
}

/* --- 六角形の数字部分（通常時） --- */
.reason-num {
  position: relative; /* 中の数字を浮かせるため */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: bold;
  font-size: 18px;
  color: var(--magenta) !important; /* 通常時は文字色をマゼンタに */
  margin-right: 30px;
  flex-shrink: 0;
  transition: all 0.4s;
  z-index: 1;
}

/* 枠線用の六角形を擬似要素で作る */
.reason-num::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--magenta); /* 基本はマゼンタ */
  /* ここで切り抜く（内側をさらに抜くために一工夫） */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -1; /* 数字の下に配置 */
}

/* 通常時（白抜きに見せるための内側の白い層） */
.reason-num::after {
  content: "";
  position: absolute;
  top: 1px; /* 1pxだけマゼンタを見せて枠線にする */
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #fff; /* 通常時は中を白く塗る */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -1;
  transition: all 0.4s;
}

/* --- アクティブ時の表示（中までマゼンタ） --- */
.reason-nav-item:hover .reason-num,
.reason-nav-item.active .reason-num {
  color: #fff !important; /* 数字を白に */
  transform: scale(1.15);
}
.reason-nav-item:hover .reason-num::after,
.reason-nav-item.active .reason-num::after {
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  ) !important;
  background-color: var(--magenta); /* 背景を白からマゼンタに変更 */
  opacity: 1;
}
/* 3. 日本語を黒く、大きく */
.reason-nav-item.active .reason-name {
  color: #000 !important;
  font-size: var(--fs-reason56);
}
.reason-nav-item:hover .reason-name {
  color: #000 !important;
  font-weight: bold;
}
/* 4. 英語と「＞」をマゼンタに */
/* .reason-nav-item:hover .reason-en {
} */
.reason-nav-item:hover .reason-en::after,
.reason-nav-item.active .reason-en,
.reason-nav-item.active .reason-en::after {
  color: var(--magenta) !important;
}

/* ホバー時とアクティブ時、両方に適用 */
.reason-nav-item:hover,
.reason-nav-item.active {
  border-bottom: 2px solid var(--magenta); /* 線をマゼンタかつ少し太く */
}

/* --- 日本語名（通常時） --- */
.reason-name {
  font-size: var(--fs-reason28);
  color: var(--light-gray) !important;
  width: 180px; /* 日本語エリアの幅を固定すると英語の開始位置が揃います */
  margin-right: 10px;
  transition: all 0.4s;
  font-weight: normal; /* 通常時はノーマル */
}

/* --- 英語名（通常時） --- */
.reason-en {
  flex: 1; /* 残りの幅をすべて使う */
  display: flex;
  align-items: center;
  justify-content: space-between; /* テキストは左、矢印は右端へ */
  font-family: var(--font-en);
  font-size: var(--fs-s);
  color: var(--light-gray) !important;
  padding-left: 20px; /* ここで英語を「もう少し右」に寄せる */
  transition: all 0.4s;
}
/* --- 英語の横の「＞」（擬似要素） --- */
.reason-en::after {
  content: ">";
  font-family: serif;
  font-weight: bold;
  color: var(--light-gray);
  margin-left: 10px; /* テキストとの最低限の隙間 */
}

/* 右側スクロールエリア */
.sol-reason-contents {
  flex: 1;
}
.reason-content-block {
  padding-bottom: 30px; /* 下側の余白 */
  padding-top: 30px; /* 上側の余白を追加 */
  border-top: 1px solid var(--light-gray); /* グレーの横線 */
}

/* 最初のコンテンツ（01）の上には線を入れない */
.reason-content-block:first-child {
  border-top: none;
  padding-top: 0; /* 最初の項目は上余白も不要 */
}

/* コンテンツ内の画像の下にも少し余白を確保 */
.content-img {
  margin-top: 40px;
}

.content-num {
  font-family: var(--font-en);
  font-size: var(--fs-s);
}
.content-title {
  font-size: var(--fs-reason36);
  margin: 20px 0;
  line-height: 1.4;
}
.content-lead {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
}
.content-text {
  font-size: var(--fs-tech16);
  line-height: 1.8;
  margin: 0px 0 30px;
}
.content-img img {
  width: 100%;
  border-radius: 5px;
}

/* 3. SP版 (768px以下) */
@media (max-width: 768px) {
  .sol-reason-flex {
    display: block; /* 縦並び */
  }
  .sol-reason-nav {
    position: static; /* 追従を解除 */
    margin-bottom: 40px;
  }
  /* SP版のピンクの矢印 */
  .sp-arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--magenta, #d6006e);
    border-right: 2px solid var(--magenta, #d6006e);
    transform: rotate(135deg); /* 下向き */
    margin-left: auto;
    margin-bottom: 5px;
  }
  .reason-nav-item {
    border-bottom: 1px solid var(--magenta, #d6006e) !important;
    padding: 10px 0;
  }
  /* SP版：activeでない時も数字に少し色を持たせる（視認性向上） */
  /* .reason-nav-item .reason-num {
    background: #f9f9f9;
    border-color: var(--magenta);
    color: var(--magenta);
  } */
  .reason-nav-item .reason-num {
    color: #fff !important;
    width: 40px;
    height: 36px;
    font-weight: var(--fw-normal);
    margin-right: 10px;
  }
  .reason-nav-item .reason-num::after {
    background: var(--magenta);
  }
  /* SP版：activeを無効化する（強調させない） */
  .reason-nav-item:hover,
  .reason-nav-item.active {
    border-bottom: 1px solid var(--magenta) !important;
  }

  .reason-nav-item.active .reason-name {
    font-size: 22px !important; /* SPでは active になっても 22px を維持 */
    color: var(--black) !important;
  }

  .reason-nav-item.active .reason-en,
  .reason-nav-item.active .reason-en::after {
    color: var(--light-gray) !important;
  }

  .reason-nav-item.active .reason-num {
    transform: scale(1);
  }

  .reason-name {
    width: 120px;
    color: var(--black) !important;
    font-size: 22px;
  }
  .reason-en {
    font-size: 12px;
  }
  .reason-en::after {
    display: none;
  }
}

/* --- MERITセクション：共通 --- */
.sol-merit {
  padding: 100px 0;
  background: var(--bg-pink);
}
.sol-merit-lead {
  margin: 30px 0 60px;
  line-height: 1.8;
}
.sp-scroll-guide {
  display: none;
} /* 基本は隠す */

.sol-merit-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sol-merit-table {
  display: flex;
  flex-direction: column;
  min-width: 900px; /* PCでの幅 */
}

.table-row {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.table-cell {
  flex: 1;
  padding: 20px;
  font-style: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

.table-cell strong {
  display: block;
  font-size: var(--fs-merit22);
  font-weight: var(--fw-bold);
  margin-bottom: 15px;
  color: #333;
}

.table-cell p {
  font-size: var(--fs-merit16);
  font-weight: var(--fw-normal);
}

/* 左端の見出し列 */
.label-cell {
  flex: 0 0 160px; /* 見出しの幅 */
  background: var(--bg-pink);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.bg-pink {
  background: var(--bg-pink);
  border-left: 1px dotted #ccc;
}
.bg-pink-sp {
  background: var(--bg-pink);
}

/* 精電舎側（ピンク） */
.highlight-cell {
  color: var(--magenta, #d6006e);
  background: #fff;
}
.highlight-cell strong {
  color: var(--magenta, #d6006e);
}
.highlight-cell p {
  color: var(--black, #d6006e);
  font-size: var(--fs-merit16);
  font-weight: var(--fw-normal);
}

/* --- SP版：横スクロールと左固定設定 --- */
@media (max-width: 768px) {
  .sp-scroll-guide {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
  }

  .sol-merit-table {
    min-width: 600px; /* スマホでスワイプしやすくするための横幅 */
  }

  /* 左列をスクロールしても残るように固定 */
  .label-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); /* 境界線を分かりやすく */
  }
}

/* ガイドアイコンの親要素 */
.sol-merit-table-container {
  position: relative;
  margin-top: 40px;
  display: block;
  width: 100%;
  overflow-x: auto; /* これがないとJavaScriptはスクロールを検知できません */
  -webkit-overflow-scrolling: touch; /* スマホで滑らかにするため */
}

.sp-table-guide {
  display: none; /* デフォルトは非表示 */
}

/* ガイドエリア全体の初期状態 */
.sp-table-guide {
  transition:
    opacity 1.2s ease,
    visibility 1.2s;
  opacity: 1;
  visibility: visible;
}

/* スクロール後に付与されるクラス */
.sp-table-guide.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sp-table-guide {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 下の表を触れるようにする */
    transition: opacity 0.5s;
  }

  /* ガイドが消えるクラス（JSで使用） */
  .sp-table-guide.is-hidden {
    opacity: 0;
  }

  /* SP版：左端の列を固定する指定を再確認 */
  .label-cell {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #f2f2f2;
    min-width: 120px;
    max-width: 120px;
  }
}
/* --- 背景記号の追加設定 --- */

/* 共通：記号を配置するセルの準備 */
.bg-pink,
.highlight-cell {
  position: relative; /* 記号の基準点にする */
  z-index: 1;
  overflow: hidden; /* 記号がセルからはみ出さないようにする */
}

/* 自動機メーカー側：△ */
.bg-pink::before {
  content: "△";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px; /* セルの大きさに合わせて調整 */
  z-index: -1; /* テキストの後ろに配置 */
  pointer-events: none;
  font-family: serif;
  color: #e0e0e0; /* rgba(0,0,0,0.15) に近い薄いグレー */
  /* ★text-shadowで上下左右に0.5px〜1pxの影を落とす */
  text-shadow:
    1px 0 0 #e0e0e0,
    /* 右 */ -1px 0 0 #e0e0e0,
    /* 左 */ 0 1px 0 #e0e0e0,
    /* 下 */ 0 -1px 0 #e0e0e0; /* 上 */
}

/* 精電舎側：○ */
.highlight-cell::before {
  content: "○";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px; /* ○は少し大きめに設定 */
  z-index: -1;
  pointer-events: none;
  font-family: serif;
  color: rgba(214, 0, 110, 0.15); /* 元の色 */
  -webkit-text-stroke: 4px rgba(214, 0, 110, 0.15); /* 縁取りを同じ色で追加 */
}

/* 補足：ヘッダー部分には記号を出さない設定（必要に応じて） */
.table-header .table-cell::before {
  display: none;
}

/* --- 既存コードの微調整 --- */
.table-cell {
  position: relative; /* 念のため追加 */
}

.fv-sp-only,
.tech-sp-only,
.reason-sp-only,
.merit-h2-sp-only,
.merit-sp-only,
.custom-sp-only,
.approach-sp-only {
  display: none;
}

.pc-br {
  display: block;
}

@media (max-width: 768px) {
  .pc-br {
    display: inline;
  }
  .fv-pc-only,
  .tech-pc-only,
  .reason-pc-only,
  .merit-h2-pc-only,
  .merit-pc-only,
  .custom-pc-only,
  .approach-pc-only {
    display: none;
  }
  .fv-sp-only,
  .tech-sp-only,
  .reason-sp-only,
  .merit-h2-sp-only,
  .custom-sp-only,
  .approach-sp-only {
    display: block;
  }

  /* 1. SP版専用のコンテナ表示 */
  .merit-sp-only {
    display: block;
    width: 100%;
  }
  /* 2. スクロールを発生させるラッパー */
  .sol-merit-table-wrapper {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
  }
  /* 3. テーブル本体：十分な横幅を持たせる */
  .merit-sp-table {
    border-collapse: collapse;
    width: 1200px; /* 全体の横幅（見出し+内容5件分） */
    table-layout: fixed; /* 列幅を固定するために必須 */
    background: #fff;
  }
  /* 4. 左端列の見出し（項目名）を固定 */
  .sp-header-cell:first-child,
  .sp-fixed-label {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-pink);
    width: 50px; /* 左列の幅 */
    border-right: 2px solid #ddd;
    font-size: var(--fs-merit16);
  }

  .empty-top {
    background: #fff;
  }

  /* 5. 上段の「自動機メーカー」「精電舎...」の見出し */
  .sp-header-cell {
    width: 260px; /* 各内容カラムの幅 */
    padding: 15px;
    border-bottom: 2px solid #ddd;
    border-right: 2px solid #ddd;
    font-weight: bold;
    background: #fff;
  }

  /* 左上の空セル */
  .sp-header-cell:first-child {
    background: var(--bg-pink);
    z-index: 6; /* 重なりを一番上に */
    border-bottom: 2px solid #ddd;
    text-align: left;
    vertical-align: top;
  }

  .sp-header-cell.highlight {
    color: var(--magenta);
    background: #fff;
    border-bottom: 0;
  }

  /* 6. 内容セルの調整 */
  .sp-content-cell {
    padding: 10px 15px;
    border-right: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    z-index: 0;
    font-size: 15px;
    width: 100px;
  }

  /* 内容テキストの微調整 */
  .sp-item-name {
    display: block;
    font-size: var(--fs-merit16);
    color: var(--black);
    font-weight: var(--fw-bold);
  }

  .sp-content-cell strong {
    display: block;
    font-size: var(--fs-merit16);
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .sp-content-cell.highlight-cell.bg-circle {
    border-bottom: 0;
  }

  /* 背景記号：濃さ・サイズ調整 */
  .bg-delta::before,
  .bg-circle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    font-family: serif;
    pointer-events: none;
    line-height: 1;
  }

  .bg-delta::before {
    content: "△";
    font-size: 100px;
    color: #e0e0e0; /* rgba(0,0,0,0.15) に近い薄いグレー */
    /* ★text-shadowで上下左右に0.5px〜1pxの影を落とす */
    text-shadow:
      1px 0 0 #e0e0e0,
      /* 右 */ -1px 0 0 #e0e0e0,
      /* 左 */ 0 1px 0 #e0e0e0,
      /* 下 */ 0 -1px 0 #e0e0e0; /* 上 */
  }

  .bg-circle::before {
    content: "○";
    font-size: 100px;
    color: rgba(214, 0, 110, 0.15); /* 元の色 */
    -webkit-text-stroke: 4px rgba(214, 0, 110, 0.15); /* 縁取りを同じ色で追加 */
  }

  .highlight-cell {
    color: var(--magenta);
  }
}

/* --- PROCESSセクション共通 --- */
.sol-process {
  padding: 100px 0;
  background: #fff;
}

.sol-process-header {
  margin-bottom: 60px;
}

/* グリッドレイアウト（PC版：3列） */
.sol-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
}

.process-item {
  width: 30%;
  background: var(--bg-pink);
  margin-bottom: 40px;
  position: relative; /* バッジの基準 */
  padding-bottom: 20px;
}

.process-img-wrapper {
  position: relative;
  margin-bottom: 15px;
}

.process-img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* STEPバッジ（六角形や装飾は画像かCSSで） */
.step-badge {
  position: absolute;
  top: 0;
  left: 20px;
  background: #fff;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  width: 60px;
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  z-index: 2;
  line-height: 1.2;
}

.step-badge span {
  font-size: 20px;
}

.process-content {
  padding: 0 20px;
}

.process-item-title {
  color: var(--magenta);
  font-size: var(--fs-h3);
  margin: 0;
  font-weight: var(--fw-normal);
}

.process-item-text {
  font-size: var(--fs-process16);
  line-height: 1.6;
  margin: 8px 0;
}

/* --- SP版：縦1列に切り替え --- */
@media (max-width: 768px) {
  .sol-process-grid {
    grid-template-columns: 1fr; /* 縦1列 */
    gap: 30px;
  }

  .process-item {
    display: flex;
    flex-direction: column;
  }

  .process-item-title {
    font-size: 16px;
  }
}

/* --- PROCESSセクション全体 --- */
.sol-process-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* --- 六角形バッジ（向き修正＆上はみ出し） --- */
.hexagon-badge {
  position: absolute;
  top: -15px; /* 上辺を枠からはみ出させる */
  left: 20px;
  width: 76px; /* 横長にする */
  height: 64px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 外枠用のピンク（尖った方を左右に：25% 0, 75% 0...） */
.hexagon-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--magenta, #d6006e);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -2;
}

/* 内側の白 */
.hexagon-badge::before {
  content: "";
  position: absolute;
  inset: 1px; /* 1pxの枠線に見せる */
  background: #fff;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -1;
}

.hexagon-badge span {
  font-size: 10px;
  font-weight: bold;
  color: var(--magenta);
  line-height: 1;
  margin-top: 2px;
}

.hexagon-badge strong {
  font-size: 22px;
  font-weight: bold;
  color: var(--magenta);
  line-height: 1.1;
}

/* --- 矢印の垂直中央揃え --- */
.pc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--magenta);
  font-size: 20px;
  /* アイテムの高さに合わせて自動で中央に来るよう設定 */
  align-self: center;
  padding-bottom: 40px; /* 下のテキスト部分を除いた「画像＋余白」の中央に合わせる調整 */
}

.pc-arrow {
  display: flex;
  align-items: center;
  color: var(--magenta);
  font-size: 20px;
  height: 200px; /* 画像の高さに合わせる */
}

.sp-arrow02 {
  display: none;
}

/* --- SP版：縦1列・下矢印 --- */
@media (max-width: 768px) {
  .process-item {
    width: 100%;
    margin-bottom: 10px;
  }

  .pc-arrow {
    display: none;
  }

  .sp-arrow02 {
    display: block;
    text-align: center;
    color: var(--magenta);
    font-size: 24px;
    margin-bottom: 10px;
    width: 100%;
  }
}

.sol-faq {
  padding: 100px 0;
  background: var(--bg-pink);
}
.sol-faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden; /* アニメーション時のはみ出し防止 */
}

/* 質問部分 */
.faq-question {
  padding: 10px 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #fff;
}

/* 六角形アイコンの共通設定（塗りつぶしで安定させる） */
.faq-hex {
  width: 36px;
  height: 40px;
  background: var(--magenta, #d6006e);
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
  /* 左右が尖る六角形 */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.faq-hex-answer {
  position: relative;
  color: var(--magenta);
  width: 36px;
  height: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  flex-shrink: 0;
  margin-right: 20px;
}
.faq-hex-answer::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -1;
}
.faq-hex-answer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--magenta, #d6006e);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: -2;
}

/* 回答エリア：Qと列を揃える */
.faq-answer {
  display: flex; /* noneにせずflexのままにする */
  align-items: flex-start;
  padding: 0 30px;
  max-height: 0;
  opacity: 0;
  overflow: hidden; /* 中身がはみ出さないように必須 */
  transition: all 0.4s ease; /* 少し遅く、スムーズに動かす */
  position: relative;
}

/* QとAの間の境界線 */
.faq-answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background-color: #eee;
}

/* 開いた時の状態 */
.faq-item.is-open .faq-answer {
  max-height: 500px; /* 文字数に合わせて適宜調整 */
  opacity: 1;
  padding-top: 25px;
  padding-bottom: 30px;
}

/* 回答テキスト */
.faq-a-content {
  font-size: var(--fs-s);
  line-height: 1.7;
  padding-top: 8px; /* 六角形との高さ微調整 */
}

/* プラス・マイナスアイコン */
.faq-toggle-icon {
  width: 20px;
  height: 20px;
  position: relative;
  margin-left: auto;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--magenta, #d6006e);
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
}
.faq-toggle-icon::after {
  transform: rotate(90deg);
  transition: 0.3s;
}
.faq-item.is-open .faq-toggle-icon::after {
  transform: rotate(0deg);
}

.faq-q-text {
  font-size: var(--fs-base);
  font-weight: bold;
  flex-grow: 1;
  margin: 18px 0;
}

/* 開閉プラス・マイナス */
.faq-toggle-icon {
  width: 20px;
  height: 20px;
  position: relative;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--magenta);
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transition: transform 0.3s;
}
.faq-toggle-icon::after {
  transform: rotate(90deg);
} /* 縦棒 */

.faq-item.is-open .faq-toggle-icon::after {
  transform: rotate(0deg);
} /* 開いた時にマイナスに */

dd {
  margin-inline-start: 0px;
}

.faq-a-content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

@media (max-width: 768px) {
  .faq-q-text {
    font-size: 18px;
    padding-right: 5px;
    line-height: 1.6;
  }
  .faq-a-content {
    font-size: 16px;
  }
  .sol-faq-header {
    margin-bottom: 40px;
  }
}

.sol-inquiry {
  padding: 100px 0;
  background: #444;
  color: #fff;
} /* 全体背景は濃いグレー */
.sol-inquiry-header {
  text-align: center;
  margin-bottom: 60px;
}

.inquiry-grid {
  display: flex;
  gap: 15px;
  max-width: 1100px;
  margin: 0 auto;
}

.inquiry-card {
  flex: 1;
  padding: 60px 40px;
  border-radius: 4px;
}

.inquiry-card.is-gray {
  background: #666;
} /* 左側のカード */
.inquiry-card.is-white {
  background: #fff;
  color: #333;
} /* 右側のカード */

.inquiry-card-title {
  font-size: var(--fs-inquiry28);
  line-height: 1.5;
  margin-bottom: 30px;
}
.inquiry-card-text {
  font-size: var(--fs-inquiry16);
  line-height: 1.8;
  margin-bottom: 40px;
}

/* 共通ボタン */
.sol-btn-inquiry {
  display: flex;
  align-items: center;
  background: #333;
  justify-content: space-between; /* テキストと矢印を分ける */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: var(--fs-inquiry16);
  border-radius: 4px;
  overflow: hidden;
  transition: background-color 0.3s; /* 背景色の変化を滑らかに */
  max-width: 320px;
  position: relative;
  height: 60px; /* 高さを固定して安定させます */
}

.sol-btn-inquiry span {
  flex-grow: 1;
  text-align: center;
  z-index: 1;
}

/* --- 右側の背景ボックス（固定） --- */
.sol-btn-inquiry::after {
  content: "";
  background: var(--magenta); /* 初期：マゼンタ */
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
/* --- 矢印テキスト本体（動くパーツ） --- */
.sol-btn-inquiry::before {
  content: "→";
  position: absolute;
  right: 0;
  width: 30px; /* 上記の::afterと同じ幅 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color 0.3s;
}

/* --- ホバー時の挙動 --- */
/* 1. 全体とボックスの色変化 */
.sol-btn-inquiry:hover {
  background-color: var(--magenta) !important; /* 全体がマゼンタに */
}
.sol-btn-inquiry:hover::after {
  background-color: var(--pink) !important; /* 右側の箱がピンクに（Pink） */
}
/* 2. 矢印のみのアニメーション */
.sol-btn-inquiry:hover::before {
  animation: arrow-slide 0.4s forwards;
}
/* 矢印が「箱の中で」右に消えて左から出る動き */
@keyframes arrow-slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(100%); /* 右に消える */
    opacity: 0;
  }
  50% {
    transform: translateX(-100%); /* 左側に瞬間移動 */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* 定位置に戻る */
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .inquiry-grid {
    flex-direction: column;
  }
  .inquiry-card {
    padding: 30px 50px;
  }
}

.floating-diagnosis {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden; /* 子要素の角丸をはみ出させない */
  border-radius: 8px; /* 全体の角丸 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  background: transparent; /* 背景は子要素に任せる */
}

.floating-diagnosis:hover {
  /* ホバー時はボーダーをマゼンタ単色に（必要に応じて） */
  border-image-source: none;
  background-color: var(--magenta) !important;
  border-color: var(--magenta) !important;
}

.diag-content {
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 10px;

  /* グラデーションボーダーの設定 */
  border: 1px solid transparent;
  border-right: none; /* 右辺だけボーダーを消す */
  border-radius: 8px 0 0 8px; /* 左側だけ角丸 */

  /* ★高度な3層背景設定★ */
  background-image:
    linear-gradient(rgba(46, 44, 45, 0.9), rgba(46, 44, 45, 0.9)),
    linear-gradient(to right, #29abe2, #aa0061),
    linear-gradient(to right, #29abe2, #aa0061);

  background-origin: border-box;

  background-clip: padding-box, padding-box, border-box;

  color: #fff;
  transition: background 0.3s;
}

.diag-icon {
  display: flex;
  align-items: center;
}
.diag-icon img {
  /* width: 100%; */
  height: auto;
}

.diag-text {
  font-size: var(--fs-faq16);
  white-space: nowrap;
}

/* --- 右側：マゼンタの箱（ボーダーなし） --- */
.diag-arrow {
  background: var(--magenta);
  width: 30px;
  height: 56px; /* diag-contentのborder込みの高さに合わせる */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

/* --- ホバー時の挙動 --- */
/* 左側をマゼンタに（ボーダーもマゼンタに統一して隠す） */
.floating-diagnosis:hover .diag-content {
  background-image: none;
  background-color: var(--magenta) !important;
  border-color: var(--magenta) !important;
}
/* 右側をピンクに */
.floating-diagnosis:hover .diag-arrow {
  background-color: var(--pink) !important;
}
/* 矢印アニメーション（既存通り） */
.floating-diagnosis:hover .diag-arrow span {
  animation: diag-arrow-loop 0.4s forwards;
}
@keyframes diag-arrow-loop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(150%);
    opacity: 0;
  }
  50% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 矢印テキストのアニメーション */
.diag-arrow span {
  display: inline-block;
}
.floating-diagnosis:hover .diag-arrow span {
  animation: diag-arrow-loop 0.4s forwards;
}

/* スマホでは少し小さくするか、下部に固定 */
@media (max-width: 768px) {
  .floating-diagnosis {
    bottom: 10px;
    right: 10px;
  }
}

/* スマホ版の設定 */
@media (max-width: 768px) {
  .sol-fv {
    height: 690px;
    width: 100%; /* ★390px固定から100%に変更 */
  }
  .sol-fv-label {
    font-size: 22px;
  }
  .sol-fv-title {
    font-size: 40px;
    margin: 15px 0 10vh;
  }
  .sol-fv-text {
    font-size: 16px;
  }
  .sol-about,
  .sol-tech,
  .sol-problem,
  .sol-reason,
  .sol-merit,
  .sol-process,
  .sol-faq,
  .sol-inquiry {
    padding: 40px 0;
  }
  .sol-label {
    margin-bottom: 10px;
  }
  .sol-about-paragraphs {
    font-size: 16px;
    margin-top: 20px;
  }
  .sol-group-label {
    margin: 0 0 10px;
    color: var(--bg-gray);
  }
  .sol-problem-sub {
    font-size: 20px;
    gap: 10px;
  }
  .sol-problem-sub::before,
  .sol-problem-sub::after {
    width: 30px;
  }
  .card-text {
    font-size: 18px;
    line-height: 1.3;
  }
  .card-btn {
    font-size: 14px;
  }
  .sp-br {
    display: block; /* ブロック要素にすることで、ここで強制改行させる */
  }
  .sol-problem {
    height: 160vh;
  }
  .reason-sticky-menu {
    margin-top: 30px;
  }
  .content-title {
    font-size: 26px;
    margin: 15px 0;
  }
  .content-lead {
    font-size: 16px;
  }
  .content-text {
    font-size: 15px;
  }
  .reason-content-block {
    padding-bottom: 20px;
  }
  .sol-merit-lead {
    margin: 30px 0;
  }
  .process-item-title {
    font-size: 18px;
  }
  .process-item-text {
    font-size: 15px;
  }
  .hexagon-badge {
    width: 90px;
    height: 80px;
    left: 10px;
  }
  .hexagon-badge strong {
    font-size: 32px;
    font-weight: var(--fw-normal);
  }
  .hexagon-badge span {
    font-size: 14px;
  }
  .faq-question {
    padding: 0 10px;
  }
  .faq-hex,
  .faq-hex-answer {
    font-family: Schibsted Grotesk;
    font-weight: var(--fw-normal);
    width: 50px;
    height: 45px;
    margin-right: 10px;
    font-size: 20px;
  }
  .faq-item.is-open .faq-answer {
    padding-left: 10px;
    padding-right: 20px;
  }
  .sol-inquiry-header {
    margin-bottom: 40px;
  }
  .inquiry-card-title {
    font-size: 24px;
    margin: 30px 0;
  }
  .inquiry-card {
    padding: 0px 15px 30px;
  }
  .inquiry-card-text {
    margin-bottom: 20px;
  }
  .sol-btn-inquiry span {
    padding: 0 10px;
  }
}

/* 下層ページ
FV専用の高さ調整（必要に応じて） */
.detail-fv {
  height: 500px; /* 画像のデザインに合わせて調整 */
}

/* 背景画像のスタイル（TOPのfv-videoと同じ役割） */
.fv-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を隙間なく埋める */
  z-index: 1;
}

/* PC・SPの切り替え（TOPのロジックを継承） */
.fv-img.is-sp {
  display: none;
}
.fv-img.is-pc {
  display: block;
}

@media (max-width: 768px) {
  .detail-fv {
    height: 450px; /* SP版の高さ */
  }
  .fv-img.is-pc {
    display: none;
  }
  .fv-img.is-sp {
    display: block;
  }

  .sol-fv-title {
    font-size: 32px; /* SPでのタイトルの大きさ調整 */
    margin: 20px 0;
  }
}

/* ★ご要望のdetail部分 */
.sol-problem-card.sol-problem-card-lower {
  justify-content: flex-start;
  cursor: auto;
}
.sol-problem-card.sol-problem-card-lower:hover {
  background-color: #fff;
  transform: none;
}
.detail {
  font-size: 14px; /* 少し小さく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  color: #555; /* 真っ黒より少し薄くして視覚的な重さを軽減 */
  text-align: left; /* 説明文は左寄せが読みやすい */
  margin: 0 40px 20px;
  word-break: break-all;
}

/* SP版の調整 */
@media (max-width: 768px) {
  .detail {
    font-size: 15px; /* スマホでは少し大きくして視認性アップ */
    margin: 0;
  }
}

/* セクション全体 */
.reason-lower {
  background-color: #f7f0f5;
  padding: 80px 0;
}

.reason-lower .reason-main-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-normal);
  margin: 0;
}

.reason-lower .reason-item-sub {
  font-size: var(--fs-base);
  margin-bottom: 10px;
}

.reason-lower .reason-detail {
  font-size: var(--fs-s);
}

.reason-header {
  text-align: center;
  margin-bottom: 50px;
}

.reason-lower .reason-sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 30px;
  font-size: var(--fs-h3);
}
.reason-lower .reason-sub-title::before,
.reason-lower .reason-sub-title::after {
  content: "";
  width: 100px;
  height: 1px;
  background: var(--black);
}

.reason-lower .reason-lead {
  text-align: left;
}

/* 2列×2列のグリッド設定 */
.reason-lower .reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCで2列 */
  gap: 20px;
}

/* 各カードのスタイル */
.reason-lower .reason-card {
  background: #fff;
  display: flex; /* テキストと画像を横並びに */
  align-items: stretch;
  overflow: hidden;
  min-height: 250px; /* 必要に応じて最小の高さを指定 */
}

/* テキストエリア */
.reason-lower .reason-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
}

/* 数字と見出しの横並び */
.reason-lower .reason-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reason-lower .reason-num {
  font-family: Schibsted Grotesk;
  font-size: 32px;
  color: var(--magenta);
  margin-right: 0;
  font-weight: var(--fw-normal);
  justify-content: flex-start;
}
.reason-lower .reason-num::before,
.reason-lower .reason-num::after {
  display: none;
}

.reason-lower .reason-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

/* 画像エリア */
.reason-lower .reason-img {
  flex: 0 0 53%;
}
.reason-lower .reason-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  /* PC2列だと窮屈になる画面幅（タブレット等）への配慮 */
  .reason-lower .reason-grid {
    grid-template-columns: 1fr;
  }
}

/* スマホ版レスポンシブ */
@media (max-width: 768px) {
  .reason-lower .reason-title-row {
    gap: 0;
    margin-bottom: 10px;
  }

  .reason-lower .reason-sub-title {
    font-size: 20px;
    gap: 10px;
  }
  .reason-lower .reason-sub-title::before,
  .reason-lower .reason-sub-title::after {
    width: 20px;
  }

  .reason-lower .reason-num {
    margin-right: 5px;
  }

  .reason-lower .reason-card {
    flex-direction: column; /* スマホは画像が下（または上） */
    min-height: auto; /* PC版の高さ指定を解除 */
  }

  /* テキスト部分の設定 */
  .reason-lower .reason-content {
    flex: 0 0 auto; /* 幅100%を自動計算に */
    padding: 20px; /* 余白をスマホ用に少し詰める */
  }

  /* 画像部分の設定（ここが重要！） */
  .reason-lower .reason-img {
    flex: 0 0 auto; /* 幅100%を自動計算に */
    width: 100%;
    height: 200px; /* ★ここで画像の高さを指定。好みの大きさに調整してください */
  }

  .reason-lower .reason-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* approachセクション共通 */
.sol-approach-lower .reason-name {
  width: 280px;
}

.sol-approach-lower .sol-reason-nav {
  flex: 0 0 45%;
}

.sol-approach-lower .approach-lead {
  margin: 30px 0 50px;
}

.sol-approach-lower .content-sub-title {
  font-size: 16px;
  margin-bottom: 0;
}

.sol-approach-lower .content-text {
  font-size: 16px;
}

/* スマホ版レスポンシブ */
@media (max-width: 768px) {
  .sol-approach-lower .content-text {
    margin: 0px 0 10px;
  }
}

.sol-custom {
  padding: 100px 0;
  background-color: var(--bg-pink);
}

.sol-custom-lead {
  margin: 30px 0 60px;
  line-height: 1.8;
  font-size: var(--fs-base);
}

/* 各アイテムの並び */
.custom-item {
  display: flex;
  gap: 5%;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.custom-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 画像とテキストの幅 */
.custom-img {
  width: 360px;
}

.custom-img img {
  height: auto;
  border-radius: 2px;
}

.custom-body {
  flex: 1;
}

.custom-item-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.custom-item-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* スマホ版の調整 */
@media (max-width: 768px) {
  .sol-custom {
    padding: 60px 0;
  }

  .custom-item {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 10px;
  }

  .custom-img {
    width: 100%;
  }

  .custom-item-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}