@charset "UTF-8";
/* 導入メリット：カード3列 */
.details { padding-block: 24px 8px; }
.details > .section-inner > h2 { margin-bottom: 16px; }

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 980px) {
  .benefit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .benefit-grid { grid-template-columns: 1fr; }
}

.benefit-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  position: relative;
}

/* 見出し行：アイコンバッジ付き */
.benefit-card h3 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 .4em;
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
}
.benefit-card h3::before {
  content: "＝";
  display: inline-grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 999px;
  font-weight: 700;
  background: #e8f6ef;        /* 緑系の淡色 */
  color: #178a5d;
  flex: 0 0 auto;
}
.benefit-card.is-negative h3::before {
  content: "≠";
  background: #fdecea;        /* 赤系の淡色 */
  color: #c5382b;
}

/* 本文段落の余白最適化（他で指定があっても上書き） */
.benefit-card .prose { margin-top: .4em !important; }

/* 微アニメ（hoverで少し持ち上がる） */
@media (hover:hover) {
  .benefit-card { transition: transform .2s ease, box-shadow .2s ease; }
  .benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
}

/* ========== 画像つき機能カード（3枚） ========== */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 980px){ .feature-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .feature-cards{ grid-template-columns: 1fr; } }

.svc-card--withthumb{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .svc-card--withthumb:hover{
    transform: translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }
}

/* 上部サムネ（丸型に切り抜き、旧デザインの雰囲気を踏襲） */
.svc-thumb{
  width:100%;
  aspect-ratio: 16 / 9;            /* 写真ありのときは横長 */
  display:block;
  margin:0;
  background: radial-gradient(120% 120% at 50% 40%, #f5f7fa 0%, #e9eef5 100%);
  position:relative;
  overflow:hidden;
}
.svc-thumb img{
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
}

/* 画像がない場合は円形のアイコン風プレースホルダを表示 */
.svc-thumb:has(img) { border-bottom: 1px solid rgba(0,0,0,.06); }
.svc-thumb:not(:has(img)){
  aspect-ratio: 1 / 1;             /* 画像なしは正円に */
  display:grid; place-items:center;
}
.svc-thumb:not(:has(img))::before{
  content: "??";
  font-size: 38px;
  line-height: 1;
}

/* タイトル・本文 */
.svc-card--withthumb h3{
  font-size:1.1rem;
  line-height:1.4;
  margin:14px 16px 6px;
  font-weight:700;
}
.svc-card--withthumb p{
  margin:0 16px 16px;
}

/* 既存の余白調整と合わせる */
.svc-grid .svc-card p{ margin-top:.4em; }

/* デモ画面の画像 */
.demo-figure {
  margin: 18px auto;
  max-width: 760px;   /* 横幅制御 */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.demo-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* デモ：ミニカード（上の3カードとトーン合わせ） */
.demo-card{
  max-width: 360px;                 /* ← カード相当の横幅に制限 */
  margin: 12px auto 8px;            /* 中央寄せ */
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
@media (max-width: 420px){
  .demo-card{ max-width: 92vw; }    /* スマホは画面幅に追従 */
}
.demo-figure{ margin:0; }
.demo-figure img{
  display:block;
  width:100%;
  height:auto;
}