/* ===== base ===== */
:root{
  --cp-card:#f9f6ee;
  --cp-ink:#222;
  --cp-shadow:0 6px 18px rgba(0,0,0,.08);
  --cp-gap:28px;
  --cp-radius:18px;
}
.cp-container{width:min(1200px,92%);margin-inline:auto}
.cp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--cp-gap);
}

/* ===== ratio utility ===== */
/* 1:2（縦/横）を padding-top で作る */
.ratio-12{position:relative}
.ratio-12::before{content:"";display:block;padding-top:50%} /* 1:2 */
.ratio__inner{position:absolute;inset:0}  /* ← これが“面一”の本体 */

/* ===== cards (1:2 の中身) ===== */
.cp-card{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.35rem;
  background:var(--cp-card);color:var(--cp-ink);
  border-radius:var(--cp-radius);box-shadow:var(--cp-shadow);
  text-decoration:none;overflow:hidden;padding:28px;
}
.cp-card .jp{font-weight:700;font-size:1.4rem;line-height:1.25}
.cp-card .en{opacity:.65}

/* ===== right duo (inside 1:2 container) ===== */
.duo{display:flex;gap:0}               /* 高さズレ防止：隙間0 */
.duo__cell{
  position:relative;
  width:50%;height:100%;               /* ← 親の高さに合わせる（各1:1） */
  background:var(--cp-card);box-shadow:var(--cp-shadow);overflow:hidden;
}
.duo__cell:first-child{border-top-left-radius:var(--cp-radius);border-bottom-left-radius:var(--cp-radius)}
.duo__cell:last-child {border-top-right-radius:var(--cp-radius);border-bottom-right-radius:var(--cp-radius)}

/* 中身（テキスト側） */
.duo__inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.35rem;
  padding:28px;color:var(--cp-ink);text-decoration:none;
}
.duo__cell--text .jp{font-weight:700;font-size:1.3rem;line-height:1.25}
.duo__cell--text .en{opacity:.65}

/* 画像側 */
.duo__cell--image img{width:100%;height:100%;object-fit:cover;display:block}
.cp-badge{
  position:absolute;left:12px;bottom:12px;
  padding:6px 10px;border-radius:999px;background:#f4caa0;font-weight:700;font-size:.9rem
}

/* about */
.cp-about{
  grid-column:1 / -1;background:#fff;border-radius:calc(var(--cp-radius) + 2px);
  box-shadow:0 10px 22px rgba(0,0,0,.06);padding:20px 22px;
}
.cp-box-title{
  display:inline-block;margin:0 0 .6rem;padding:.35rem .75rem;
  background:#fff;border:2px solid rgba(0,0,0,.15);border-radius:12px;font-weight:800;
}

/* reset image quirks */
.cp-grid img{display:block;max-width:100%;height:auto}

/* ===== responsive ===== */
@media (max-width: 900px){
  .cp-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  /* 右上2枚は縦積み：1:2固定解除 → 子を個別比率 */
  .ratio-12::before{padding-top:0}
  .duo{flex-direction:column;gap:var(--cp-gap)}
  .duo__cell{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--cp-radius)}
  .cp-card{aspect-ratio:4/3}
}

/* ===== クリック感度UP（positionは付けない） ===== */
a.cp-card,
a.duo__cell { display:block; cursor:pointer; z-index:1; } /* ← position:relative はNG */

.cp-grid > * { position:relative; z-index:0; } /* 行間の装飾が重ならないように */

/* ===== モバイルで説明が切れる対策 ===== */
@media (max-width: 560px){
  /* ラッパの疑似要素で高さを作るのをやめる */
  .ratio-12 { position: static !important; }
  .ratio-12::before { display: none !important; }

  /* 中身を絶対配置から通常フローへ */
  .ratio__inner { position: static !important; inset: auto !important; }

  /* 高さはコンテンツ任せに（固定比率を解除） */
  .cp-card { aspect-ratio: auto !important; }
  .duo { flex-direction: column; gap: var(--cp-gap); }
  .duo__cell { width: 100%; height: auto !important; aspect-ratio: auto !important; }

  /* 念のため：説明ボックスははみ出し不可にしない */
  .cp-about { overflow: visible !important; }
}