/* ===================== 参加の条件：比較案（cd1〜cd3）。cd0 は今の案 ===================== */
/* 参考：cd1 Apple「Macの魅力」の縦長写真カード／cd2 Stripe の大小を組み合わせた格子（ベント）／cd3 雑誌の大きな文字の一覧 */
.cdx{display:none}
html[data-cd="cd1"] .ing__in,html[data-cd="cd2"] .ing__in,html[data-cd="cd3"] .ing__in{display:none}
html[data-cd="cd1"] .cd1,html[data-cd="cd2"] .cd2,html[data-cd="cd3"] .cd3{display:block}
.cdx__hd{max-width:720px}
.cdx__hd .h2{margin:0}

/* cd1 縦長の写真カード3枚。題名は写真の上、説明は下 */
.cd1__cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.cd1__cards li{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.cd1__cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.2s var(--ease)}
.cd1__cards li{isolation:isolate}
.cd1__cards li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,12,8,.72) 0%,rgba(4,12,8,.15) 38%,rgba(4,12,8,.15) 55%,rgba(4,12,8,.82) 100%)}
.cd1__cards li:hover img{transform:scale(1.04)}
.cd1__cards h3{font-size:clamp(20px,1.7vw,24px);font-weight:700;line-height:1.45}
.cd1__cards p{font-size:15px;line-height:1.85;color:rgba(255,255,255,.9)}

/* cd2 大小の格子：左に大きな1枚、右に2枚。淡い灰色の面に写真 */
.cd2__grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:20px;margin-top:48px}
.cd2__grid article{background:#f1f3f0;border-radius:16px;overflow:hidden;padding:30px 30px 0;display:flex;flex-direction:column}
.cd2__grid article img{display:block;width:calc(100% + 60px);margin:24px -30px 0;height:150px;object-fit:cover}
.cd2__big{grid-row:1/3;padding:0!important}
.cd2__big img{width:100%!important;margin:0!important;height:auto!important;flex:1;min-height:300px}
.cd2__big div{padding:30px}
.cd2__grid h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.45}
.cd2__grid p{margin-top:10px;font-size:15px;line-height:1.85;color:var(--v6-ink2)}

/* cd3 大きな文字の一覧：見出しを大きく左、説明を右。太い墨の線で区切る */
.cd3__hd{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.cd3__h2{font-size:clamp(34px,4vw,58px);font-weight:900;line-height:1.2;letter-spacing:.01em}
.cd3__hd .lead{margin:0}
.cd3__list{list-style:none;margin-top:56px;border-top:3px solid var(--v6-ink)}
.cd3__list li{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--v6-hair)}
.cd3__list h3{font-size:clamp(26px,2.6vw,38px);font-weight:900;line-height:1.3;letter-spacing:.005em}
.cd3__list p{font-size:16px;line-height:1.9;color:var(--v6-ink2)}
.cd3__list li{opacity:.25;transition:opacity .6s}
.cd3__list li.on,html.static .cd3__list li{opacity:1}

@media (max-width:900px){
  .cd1__cards{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .cd1__cards li{aspect-ratio:auto;min-height:340px;padding:24px}
  .cd2__grid{grid-template-columns:1fr;margin-top:32px}
  .cd2__big{grid-row:auto}
  .cd2__big img{min-height:200px}
  .cd3__hd{grid-template-columns:1fr;gap:16px}
  .cd3__list{margin-top:32px}
  .cd3__list li{grid-template-columns:1fr;gap:10px;padding:26px 0}
}
/* 見直し1 */
/* cd1：写真の上の文字が読めるよう、上下の影を濃く */
.cd1__cards li::before{background:linear-gradient(180deg,rgba(4,12,8,.85) 0%,rgba(4,12,8,.35) 30%,rgba(4,12,8,.2) 45%,rgba(4,12,8,.6) 62%,rgba(4,12,8,.92) 100%)}
.cd1__cards h3{text-shadow:0 2px 12px rgba(0,0,0,.4)}
/* cd2：高さを固定した格子に。右の2枚は「文字＋写真」を横並び、左は写真の下に文字 */
.cd2__grid{grid-template-rows:280px 280px}
.cd2__grid article{flex-direction:row;padding:0;align-items:stretch}
.cd2__grid article>h3,.cd2__grid article>p{display:none}
.cd2__grid article:not(.cd2__big){display:grid;grid-template-columns:1.15fr .85fr}
.cd2__grid article:not(.cd2__big)::before{content:none}
.cd2__grid article:not(.cd2__big) img{grid-column:2;grid-row:1/3;width:100%;height:100%;margin:0}
.cd2__grid article:not(.cd2__big)>h3,.cd2__grid article:not(.cd2__big)>p{display:block;grid-column:1;padding:0 26px}
.cd2__grid article:not(.cd2__big)>h3{grid-row:1;align-self:end;padding-top:26px}
.cd2__grid article:not(.cd2__big)>p{grid-row:2;align-self:start;padding-bottom:26px}
.cd2__big{flex-direction:column!important}
.cd2__big img{flex:1;min-height:0!important;height:0!important}
.cd2__big div{flex:none}
@media (max-width:900px){
  .cd2__grid{grid-template-rows:auto}
  .cd2__big img{height:200px!important;flex:none}
  .cd2__grid article:not(.cd2__big){grid-template-columns:1fr}
  .cd2__grid article:not(.cd2__big) img{grid-column:1;grid-row:3;height:150px}
}
/* cd1：影が写真の上に来るよう重なり順を直す */
.cd1__cards img{z-index:-2}