/*/スペック*/
		/* 特定のクラス配下の要素にだけスタイルを適用する */
		.product-spec-container {
		  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
		  line-height: 1.6;
		  color: #333;
		  max-width: 850px;
		  margin: 20px auto;
		  padding: 0 20px;
		  font-size: 110%;
		}
		.product-spec-container h2 {
		  text-align: center;
		  font-size: 190%;
		  margin-bottom: 1rem;
		  padding: 10px 0;
		  border-top: 1px solid;
		  border-bottom: 1px solid;
		}
		.product-spec-container-text {
		  font-size: 110%;
		  margin-bottom: 20px;
		}
		/* テーブルのスタイル（このコンテナの中のtableのみ） */
		.product-spec-container table.spec-table {
		  width: 100%;
		  border-collapse: collapse;
		  margin-bottom: 20px;
		  border: 1px solid #ccc; /* 外枠 */
		  table-layout: fixed; /*  スマホで幅を強制するために追加 */
		}
		.product-spec-container .spec-table th, .product-spec-container .spec-table td {
		  border: 1px solid #ccc;
		  padding: 12px;
		  text-align: left;
		  word-wrap: break-word; /*  内容が長い場合に折り返す */
		}
		.product-spec-container .spec-table th {
		  background-color: #f4f4f4;
		  width: 30%; /*  PCでのデフォルト幅 */
		  /* white-space: nowrap;  スマホでの折り返しを許可するためにコメントアウト */
		}
		/*/スペック*/
		/* 特定のクラス配下の要素にだけスタイルを適用する */
		.product-feature-container {
		  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
		  line-height: 1.6;
		  color: #333;
		  max-width: 850px;
		  margin: 40px auto;
		  /* padding: 0 20px; */
		  font-size: 110%;
		}
		/* 偶数番目のアイテムのみ左右を反転させる (PC用) */
		.feature-item:nth-child(even) .feature-content {
		  flex-direction: row-reverse;
		}
		/* 各機能セクションの基本設定 */
		.feature-item {
		  margin-bottom: 40px; /* 各項目の間隔 */
		  background-color: #f9f9f9; /* サイトに馴染む薄いグレー */
		  padding: 20px;
		  border-radius: 8px; /* 角を少し丸く */
		}
		/* 機能タイトルのスタイル（赤枠の部分） */
		.feature-title {
		  background-color: #333; /* 濃いグレー */
		  color: #fff;
		  padding: 15px 15px;
		  font-weight: bold;
		  font-size: 140%;
		  border-radius: 4px;
		  margin-bottom: 15px;
		  text-align: center; /* 中央寄せ */
		}
		/* 中央寄せ・3カラムレイアウト */
		.feature-content {
		  display: flex;
		  align-items: center; /* center から flex-start に変更 */
		  justify-content: center;
		  gap: 20px;
		}
		/* 左右のテキストエリア */
		.text-area.control-box {
		  flex: 1;
		  min-width: 200px;
		  align-self: stretch; /* これで高さを画像と統一します */
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-start; /* 中身を一番上に配置 */
		  padding-top: 15px; /* 画像の枠内の高さに合わせて微調整 */
		}
		/* 画像枠の共通設定（黄色枠の部分） */
		.image-placeholder {
		  flex: 0 0 auto; /* 幅を固定 */
		  width: 45%; /* デフォルトの幅 */
		  border: 2px solid #ccc; /* 枠線 */
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background-color: #fff;
		  aspect-ratio: 1/1; /* 正方形を維持 */
		  border-radius: 4px;
		}
		.image-placeholder img {
		  max-width: 100%; /* 画像を枠内に収める */
		  height: auto;
		}
		/* 箇条書きの文頭を揃えるためのインナーボックス */
		.control-inner {
		  display: inline-block;
		  text-align: left; /* 箇条書き自体は左揃え */
		  padding-top: 25%;
		}
		/* 【PCのみ】L側エリア全体を右（画像側）に寄せる */
		.text-area.control-box.left-side {
		  /* align-items: flex-end で中身を右（画像側）に寄せる */
		  align-items: flex-end;
		}
		/* R側はそのまま（左寄せ） */
		.text-area.control-box.right-side {
		  text-align: left;
		  align-items: flex-start;
		}
		/* テキストエリアのスタイル設定 */
		.text-area {
		  flex: 1; /* 残りの幅をすべて使う */
		}
		.control-box-group {
		  display: flex;
		  justify-content: space-between;
		  gap: 20px;
		}
		.control-box {
		  flex: 1;
		}
		.text-main {
		  font-weight: bold;
		  margin-bottom: 15px;
		  font-size: 120%;
		}
		.text-sub {
		  font-size: 1rem;
		  color: #555;
		  text-align: left;
		}
		/* 箇条書きのインデント設定 */
		.indent-list li {
		  padding-left: 1em; /* 全体を1文字分右に寄せる */
		  text-indent: -1em; /* 1行目だけ1文字分左に戻す（「・」の位置を固定） */
		  margin-bottom: 5px; /* 項目間の余白（お好みで） */
		}
		/* PCでL側（左側）も同じようにインデントしたい場合 */
		.left-side .indent-list li {
		  /* L側はすでに control-inner で右寄せされているので、
     この設定だけで行頭が綺麗に揃ったままインデントされます */
		  padding-left: 1em;
		  text-indent: -1em;
		}
		.text-note {
		  text-align: left;
		  font-size: 1rem;
		  color: #666;
		  margin-top: 20px;
		}
		/* 画像エリアとテキストエリアの幅を均等にする */
		.image-area, .text-area {
		  flex: 1;
		  width: 100%;
		}
		.text-area.control-box.left-side .text-main {
		  /* ○ L 側操作ボタン の下の余白を調整 */
		  margin-bottom: 5px;
		}
		/* 各紹介セクションの基本設定 */
		.introduction-item {
		  margin-bottom: 40px;
		  background-color: #f9f9f9;
		  padding: 20px;
		  border-radius: 8px;
		}
		/* 黄色枠：画像エリアの共通設定 */
		.intro-image-area {
		  width: 100%;
		  background-color: #fff;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  overflow: hidden;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		/* 内部の画像タグのスタイル */
		.intro-image-area img {
		  max-width: 100%;
		  height: auto;
		  display: block;
		}
		/* スマートフォン向けのレスポンシブ設定 (画面幅が767px以下のとき) */
		@media screen and (max-width: 767px) {
  /* 1. 親要素の設定：縦並びを解除し、折り返しを許可 */
  .feature-item .feature-content, .feature-item:nth-child(even) .feature-content {
    display: flex !important;
    flex-direction: row !important; /* 強制的に横並び */
    flex-wrap: wrap !important; /* 収まらない分（テキスト）を下に回す */
    justify-content: space-between;
    gap: 10px 0; /* 上下の隙間10px、左右は0 */
    padding: 0;
  }
  /* 2. 画像：幅100%で1行目を占領させる */
  .image-placeholder {
    flex: 0 0 100% !important; /* 100%幅を強制 */
    max-width: 100% !important;
    order: 1 !important; /* 確実に一番上 */
    margin-bottom: 15px;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  /* 3. テキストエリア：2つで1行に収まるよう幅を48%程度にする */
  .text-area.control-box {
    flex: 0 0 48% !important; /* 50%より少し小さくして確実に横並び */
    max-width: 48% !important;
    min-width: auto !important; /* 以前の200px制限などを解除 */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 中身を中央寄せ */
  }
  /* 4. 並び順の固定 */
  .text-area.control-box.left-side {
    order: 2 !important;
  }
  .text-area.control-box.right-side {
    order: 3 !important;
  }
  /* 5. 内部テキストの調整（2列だと狭いのでサイズ調整） */
  .control-inner {
    display: inline-block;
    text-align: left; /* ・の縦ラインは揃える */
    width: auto;
	padding-top: 5%;
  }
  .text-main {
    font-size: 1rem !important;
    white-space: nowrap; /* 「L側操作ボタン」を一行で */
    /*text-align: center;*/
	text-align: left;
    margin-bottom: 5px;
  }
  .text-sub {
    font-size: 0.9rem !important; /* 2列に収まるようフォントを小さく */
    line-height: 1.4;
  }
  .product-spec-container h2 {
    padding: 5px 10px !important;
    font-size: 120% !important;
    margin-bottom: 15px !important;
  }
}