/* css/style.css に追加 */

/* ===== 製品紹介ページ ===== */
.product-page {
  /* ★ 背景色の変化を滑らかにするためのtransition */
  transition: background-color 0.8s ease-in-out;
}

/* --- 製品コンセプトセクション --- */
.product-concept {
  padding: 120px 0;
  text-align: center;
  background-color: #f5f5f0;
  position: relative; /* 疑似要素の基準点 */
  overflow: hidden; /* はみ出した図形を隠す */
}
.product-concept::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  padding-bottom: 70%;
  background: radial-gradient(circle, rgb(255, 255, 255) 20%, /* 中心から20%まではっきりと白く */ rgba(245, 245, 240, 0) 70% /* 70%地点で完全に透明になるように */);
  border-radius: 50%;
  z-index: 1;
}
/* ★★★ ロゴエリアのスタイル ★★★ */
.product-concept__logo-area {
  position: relative;
  z-index: 2; /* 背景アクセントより手前に */
  margin-bottom: 80px;
}
.product-concept__logo-area img {
  max-width: 650px;
  width: 90%;
  height: auto;
}
.product-concept__title {
  font-family: "Mozilla Text", "M PLUS 2", sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 400; /* 細めのウェイト */
  letter-spacing: -0.02em;
  color: #333;
}
/* サブタイトルと説明文 */
.product-concept__subtitle {
  position: relative;
  z-index: 2;
  font-size: 1.45rem;
  font-weight: 700;
  text-align: left;
  max-width: 650px; /* 幅を制限 */
  margin: 0 auto; /* 中央に配置 */
}
.product-concept__desc {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 20px auto 0;
  line-height: 2;
  text-align: left; /* テキストを左揃えに */
}

/* ===== 製品特長セクション (新レイアウト) ===== */
.product-features {
  padding: 100px 0;
  background-color: #fff;
}
.features-main-title {
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 80px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ccc;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feature-block {
  padding: 0; /* paddingは内部で制御 */
}
/* 背景色が「ない」（偶数番目）ブロックのフレーム */
.feature-block:nth-of-type(even) {
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin: 40px 0;
}
/* 背景色が「ある」（奇数番目）ブロックのワイド背景 */
.feature-block:nth-of-type(odd) {
  position: relative;
  z-index: 1;
  padding: 40px 0;
}
.feature-block:nth-of-type(odd)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #f5f5f0;
  z-index: -1;
}

/* ★★★ タイトルエリアを上部に配置 ★★★ */
.feature-block__title-area {
  padding: 30px 40px;
  border-bottom: 1px solid #eee;
}
/* 色付き背景ブロックのタイトルエリアのボーダー色 */
.feature-block:nth-of-type(odd) .feature-block__title-area {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ★★★ Gridコンテナで重ね合わせを定義 ★★★ */
.title-with-bg-number {
  display: grid;
  grid-template-areas: "cell";
  justify-items: start;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 4rem;
}

/* ★★★ 背景番号のスタイル ★★★ */
.feature-block__title-area .feature-block__number {
  grid-area: cell;
  font-size: 5rem;
  font-weight: 900;

  /* ★ 白背景用の数字の色 */
  color: #f0f0f0; /* わずかに濃いグレー */

  line-height: 1;
  z-index: 1;
}
/* ★★★ 色付き背景のブロック（奇数番目）の数字の色を上書き ★★★ */
.feature-block:nth-of-type(odd) .feature-block__title-area .feature-block__number {
  /* 半透明の白ではなく、背景色より少し明るい色を不透明で指定 */
  color: #ffffff;
  opacity: 0.6; /* 透明度で調整 */
}

/* ★★★ タイトルのスタイル ★★★ */
.feature-block__title-area h3 {
  grid-area: cell;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.4;
  z-index: 2;
  padding-left: 4.5rem;

  /* ★ タイトルの文字色は、背景色に合わせて変更 */
  /* 白背景のブロック */
  color: #111;
}
/* 色付き背景のブロックのタイトルの文字色 */
.feature-block:nth-of-type(odd) .feature-block__title-area h3 {
  /* 色付き背景(#f5f5f0)の上なので、同じ濃い色でOK */
  color: #111;
}

/* ★★★ 詳細コンテンツエリア ★★★ */
.feature-block__grid {
  display: block; /* gridはやめる */
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.feature-block:nth-of-type(even) .feature-block__grid {
  padding: 60px 20px; /* フレーム付きブロックの内側余白 */
}

.feature-block__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 60px;
}

.feature-block__desc-wrapper {
  font-size: 1.1rem; /* 詳細文の文字を少し大きく */
  line-height: 2.2;
}
.feature-block__image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /*
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  */
}

.feature-block__pickup-list {
  border-top: 1px solid #eee;
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.feature-block__pickup {
  /* グラスモーフィズム（すりガラス効果）のためのスタイル */
  background: rgba(255, 255, 255, 0.3); /* 半透明の白 */
  backdrop-filter: blur(10px); /* 背景をぼかす */
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  border: 1px solid rgba(255, 255, 255, 0.4); /* 白い半透明の枠線 */

  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
}

.feature-block__pickup h4 {
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111; /* 文字色を濃くして可読性を確保 */
}
.feature-block__pickup h4 .fa-cube {
  font-size: 1.5rem; /* アイコンサイズ */
  margin-right: 12px;
  color: var(--color-primary); /* アイコンの色をメインの青色に */
}
.feature-block__pickup p {
  line-height: 1.8;
  color: #333; /* 文字色を濃く */
}
/* レスポンシブ対応 */
@media (max-width: 991px) {
  .feature-block__grid {
    grid-template-columns: 1fr;
  }
  .feature-block__details {
    grid-template-columns: 1fr;
  }
  .feature-block__image {
    order: -1;
  } /* スマホでは画像を先に表示 */
  .feature-block__pickup {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  /* ★★★ このブロックを追加 ★★★ */
  /* スマホの時だけ、タイトルのフォントサイズを小さくする */
  .feature-block__title-area h3 {
    font-size: 1.25rem; /* 2.1remから、スマホに適した1.5remに変更 */
  }
}

/* --- CTAセクション --- */
.product-cta {
  padding: 100px 0;
}
.cta-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background-color: #f5f5f0;
  padding: 50px;
  border-radius: 12px;
}
.cta-card__text .label {
  /* ★★★ スタイルを大幅に変更 ★★★ */
  display: inline-block; /* 背景色やpaddingを適用するため */
  background-color: var(--color-accent-orange); /* オレンジの背景色 */
  color: var(--color-light); /* 文字色を白に */

  font-size: 1rem; /* フォントサイズを少し大きく */
  font-weight: 700;

  padding: 8px 20px; /* 内側の余白 */
  border-radius: 50px; /* 角を丸めてカプセル型に */

  margin-bottom: 20px; /* 見出しとの間に余白を確保 */
}
.cta-card__text h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
}
.cta-card__image img {
  width: 100%; /* 親の幅いっぱいに広がる */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像下の不要な余白を防ぐ */
  border-radius: 8px; /* 画像の角を少し丸めると、よりデザインに馴染みます（任意）*/
}
.btn .fa-solid {
  margin-left: 8px; /* テキストとアイコンの間に余白 */
  font-size: 0.9em; /* アイコンサイズを文字サイズに合わせる */
}

/* --- CTAセクションの微調整 --- */
.cta-card__text .desc {
  margin-bottom: 30px;
  line-height: 1.8;
  color: #555;
}

/* 既存のCTAスタイルはそのまま */
.product-cta {
  padding: 100px 0;
}
.cta-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background-color: #f5f5f0;
  padding: 50px;
  border-radius: 12px;
}

.cta-card__text h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
} /* ★ descとの余白を調整 */
/* レスポンシブ対応 */
@media (max-width: 767px) {
  .cta-card {
    grid-template-columns: 1fr;
  }
  .cta-card__image {
    order: -1;
    margin-bottom: 30px;
  }
}

/* ===== SVG追従サイドボタン（レスポンシ-ブ対応 最終FIX版） ===== */

/* --- 共通スタイル --- */
.side-button {
  position: fixed;
  z-index: 1000;
  background-color: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.side-button.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ★★★ 画像の表示・非表示をここで制御 ★★★ */
.side-button__img--pc {
  display: none; /* ★ まずは両方非表示に */
}
.side-button__img--sp {
  display: none; /* ★ まずは両方非表示に */
}

/* --- PC・タブレット向けスタイル (768px以上) --- */
@media (min-width: 768px) {
  .side-button {
    top: 50%;
    right: 0;

    /* ★★★ widthとscaleでさらに大きく ★★★ */
    width: 250px; /* まずベースの幅を250pxに */

    /* ★ Y軸中央揃えとX軸移動、スケールを同時に指定 */
    transform: translateY(-50%) translateX(100%) scale(1.2);
    transform-origin: right center; /* ★ 拡大・縮小の基点を右端中央に */

    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .side-button:hover {
    /* ★ ホバー時にもscaleを維持し、X軸移動だけ変更 */
    transform: translateY(-50%) translateX(-20px) scale(1.2);
  }
  .side-button.is-visible {
    /* ★ 表示時にもscaleを維持 */
    transform: translateY(-50%) translateX(0) scale(1.2);
  }

  .side-button__img--pc {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- スマホ向けスタイル (767px以下) --- */
@media (max-width: 767px) {
  .side-button {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
  }
  .side-button.is-visible {
    transform: translateY(0);
  }

  /* ★ スマホではスマホ用画像だけを表示 */
  .side-button__img--sp {
    display: block;
    width: 100%;
    height: auto;
  }
}