/* （シーサー）引き出しデザイン */	
.induction__review-post,
.product-color-check {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
	margin: 0 5% 7%;
}
.induction__review-post .post-msg,
.product-color-check .post-msg {
	background-color: #ff5960;
	border-radius: 8px;
	padding: 8px;
	max-width: 75%;
	position: relative;
}
.induction__review-post .post-msg::before,
.product-color-check .post-msg::before {
	content: "";
	display: block;
	position: absolute;
	top: 45%;
	left: -40px;
	border-width: 24px;
	border-top: 14px;
	border-bottom: 14px;
	border-style: solid;
	border-color: transparent #ff5960 transparent transparent;
}
.induction__review-post .post-msg .post-msg--inr,
.product-color-check .post-msg .post-msg--inr {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #fff;
	border-radius: 8px;
	padding: 8px 16px;
}
.induction__review-post .post-icon img {
  width: 150px;
}
.induction__review-post .post-icon,
.product-color-check .post-icon {
  margin-top: 10px;
  margin-right: 18px;
}
/* --- スマホ（～767px）だけ縦積み＆中央寄せに --- */
@media (max-width: 767px) {
  .induction__review-post,
  .product-color-check {
    flex-direction: column;         /* 横並び→縦積み */
    align-items: center;            /* 中央寄せ */
    gap: 10px;                      /* アイコンと吹き出しの間隔 */
    margin: 0 4% 10%;
  }

  /* 並び順：アイコンを先、吹き出しを後ろに（HTML順が逆でもOK） */
  .induction__review-post .post-icon,
  .product-color-check .post-icon {
    order: 0;
    margin: 0 0 6px 0;              /* 下側に少し余白 */
  }
  .induction__review-post .post-msg,
  .product-color-check .post-msg {
    order: 1;
    max-width: 100%;
  }

  /* 吹き出しの三角を左側→上側中央に変更 */
  .induction__review-post .post-msg::before,
  .product-color-check .post-msg::before {
    top: -40px;                     /* 吹き出しの外、上に出す */
    left: 50%;
    transform: translateX(-50%);
    border-width: 24px;             /* 三角のサイズ */
    border-style: solid;
    /* 上向き三角：下辺に色を付ける */
    border-color: transparent transparent #ff5960 transparent;
  }

  /* 吹き出し内側の余白はそのまま。必要なら微調整 */
  .induction__review-post .post-msg .post-msg--inr,
  .product-color-check .post-msg .post-msg--inr {
    padding: 12px 16px;
  }

  /* スマホ時のアイコンサイズ（必要に応じて調整） */
  .induction__review-post .post-icon img,
  .product-color-check .post-icon img {
    width: 120px;                   /* 150→120に少し小さく */
    height: auto;
  }
}

:root{
  --brand-red:#b6232a;
  --ink:#222;
  --muted:#666;
  --bg:#fff;
  --card:#ffffff;
  --radius:14px;
}
.kv{
  margin:18px 3% 28px; padding:14px 16px; border-radius:var(--radius);
  background:linear-gradient(#fff0ef);
  border:1px solid #f2d6d8;
}
/* TOC アイコンカード */
.toc{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){
  .toc{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  .toc{grid-template-columns:repeat(4,1fr)}
}
.toc a{
  display:flex; align-items:center; gap:10px;
  padding:14px; border-radius:12px; background:var(--card);
  border:1px solid #efe3df; text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.toc a:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.06); border-color:#e7d5d0}
.toc img{width:28px;height:28px;flex:0 0 auto}
.toc b{font-size:14px}
/* フレックスで 2?4列に自動落ち */
.toc, .toc > ul{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.toc li{ list-style:none; margin:0; padding:0; }

/* 300px 基準で折り返し。親幅に応じて広がる */
.toc a{
  display: flex !important;
  flex: 1 1 160px !important;  /* ←ここを 240?320 に調整可 */
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 16px 18px;
}


/* 既存 .mh-btn から width:100% を削除し、中央寄せ用ラッパーを追加 */
.mh-btn{
  display:inline-flex;           /* インライン化して中央に揃えやすく */
  align-items:center;
  justify-content:center;
  gap:.6em;
  /* width:100%;  ←これを削除 */
  padding:1.1em 1.6em;
  background:#b6232a;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(16px,2.2vw,28px);
  line-height:1.2;
  border-radius:6px;
  transition:filter .2s, transform .02s;
}

/* ボタンを中央配置するラッパー */
.mh-btn-center{
  display:flex;
  justify-content:center;  /* 水平中央 */
  align-items:center;      /* 縦中央にしたいセクションで使うなら活きる */
  text-align:center;       /* 複数行になったときも中央 */
  margin:16px 10%;           /* お好みで余白 */
}

/* アイコンはそのまま */
.mh-btn__icon{ width:1.2em; height:1.2em; flex:0 0 auto; }

:root{
  --brand-red:#a32328;
  --q-radius:7px;
}
.faq--qa2 summary,
.faq--qa2 dt{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.9em;
  padding:16px 18px;
  font-weight:800;
  line-height:1.25;
  border-radius:var(--q-radius);
  cursor:pointer;
  position:relative;
  transition:
    transform .04s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;
  
}
/* 共通アイコン（→） */
.faq--qa2 summary::after,
.faq--qa2 dt::after{
  content:"";
  width:.7em;
  height:.7em;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform:rotate(-45deg);
  margin-left:auto;
  flex:0 0 auto;
  transition:transform .25s ease, opacity .25s ease;
  opacity:.9;
}
.faq--qa2 details[open] > summary::after{
  transform:rotate(45deg);
}
/* 通し番号（Q1, Q2…） */
.faq--qa2 summary::before,
.faq--qa2 dt::before{
  counter-increment:qcount;
  content:"Q" counter(qcount);
  font-weight:900;
  font-variation-settings: "wght" 900;
  display:inline-grid;
  place-items:center;
  width:2.2em;
  height:2.2em;
  border-radius:50%;
  flex:0 0 auto;
}
/* 質問と回答の間隔（回答はそのまま） */
.faq--qa2 details{
  margin:0 15px 14px;
}
.faq--qa2 .answer,
.faq--qa2 dd{
  margin:10px 14px 18px;
}
/* ===== Theme 1: Block（赤いカード・影・波模様） ===== */
.faq--block summary,
.faq--block dt{
  color:#fff;
  background:var(--brand-red);
}
.faq--block summary::before,
.faq--block dt::before{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);
}
.faq--block summary:hover,
.faq--block dt:hover{
  filter:brightness(1.05);
}
.faq--block summary:active,
.faq--block dt:active{
  transform:translateY(1px);
}
.faq--qa2 .answer,
.faq--qa2 {
	line-height:1.7em;
}
.answer a{
	text-decoration:underline!important;
	color:#b6232a!important;
}
.faq--qa2{
  counter-reset: qcount;
}
.midashi{
	margin:13% 3% 0;
	color:#b6232a;
	font-size:190%!important;
}