@charset "utf-8";

/* ===== パラメータ（行ごとの style で上書き可） ===== */
.feature{
  --imgW: 62%;      /* 画像幅（%を下げると小さく） */
  --gapX: 48px;     /* 画像とカードの距離（左右を離す） */
  --overlapX: -32px;/* 横のかぶり量（負: 画像側へ寄せる / 0で非重なり） */
  --overlapY: 24px; /* 縦のかぶり量（小さいほど浅い） */
  --cardW: 520px;   /* カード最大幅 */
  --padY: 80px;     /* セクション上下余白 */
  background:#231f1e; color:#fff; padding:var(--padY) 0;
  font-feature-settings:"palt";
  overflow:visible;
	margin-bottom: 80px;
}

/* ===== 基本レイアウト ===== */
.feature__row{
  width:min(1200px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;  /* SPは縦積み */
  gap:20px;
  align-items:center;          /* 縦中央 */
  overflow:visible;
}

/* 画像 */
.feature__img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:0;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

/* カード */
.feature__card{
  background:#2d2726;
  border-radius:0;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  padding:clamp(18px,2.4vw,34px);
  max-width:var(--cardW);
  z-index:2;
}

/* ===== PC：左右2カラム + 浅い重なり ===== */
@media (min-width:960px){
  /* 幅配分（左右） */
  .feature__row.is-right{ grid-template-columns: var(--imgW) 1fr; column-gap: var(--gapX); }
  .feature__row.is-left { grid-template-columns: 1fr var(--imgW); column-gap: var(--gapX); }
	.feature__row.is-left  .feature__card { grid-row: 1; }

  /* 列入れ替え（※これが反転のキモ） */
  .feature__row.is-right .feature__media{ grid-column:1; }
  .feature__row.is-right .feature__card { grid-column:2; }
  .feature__row.is-left  .feature__media{ grid-column:2; }
  .feature__row.is-left  .feature__card { grid-column:1; }

  /* かぶり量（左右で反転） */
  .feature__row.is-right .feature__card{ margin-left:auto;  transform:translate(var(--overlapX), var(--overlapY)); }
  .feature__row.is-left  .feature__card{ margin-right:auto; transform:translate(calc(var(--overlapX)*-1), var(--overlapY)); }

  /* 念のため：縦位置を中央固定 */
  .feature__row > *{ align-self:center; }
}

/* ===== タイポ ===== */
.num{ font-size:clamp(44px,7vw,88px); line-height:1; opacity:.18; margin:0; }
.feature__card h3{ margin:0 0 24px; font-weight:700; text-align:left; }
.feature__card p { margin:0;        font-weight:400; text-align:left;  line-height: 2; }

/* オプション */
.num .beige{ font-size:5em; }

.feature__row {
  margin-bottom: 80px; /* ← 好きな余白量に調整 */
}