/* =====================
   Concept バリアント追加オプション: .concept--split-photoless
   -----------------------------------------------------------
   写真を用意できない案件向けのオプション。concept.html（コラージュ本体）は無改造のまま使い、
   5枚の枠（.concept-square）の中身をグレーの仮置き（#CCCCCC）から
   ブランドカラーのグラデーションに差し替えるだけのCSSのみの対応にする。
   枠のサイズ・位置はconcept.cssの.concept-squareレイアウトをそのまま使うため、
   写真ありコラージュと同じ密度・同じ高さのレイアウトになる
   （hero--split-photolessと同じ「HTMLは変えずCSSだけで見た目を変える」方式）
===================== */
.concept--split-photoless {
  --deco-color-1: var(--color-primary);
  --deco-color-2: var(--color-secondary);
}

/* 仮置きの#CCCCCC divは表示せず、枠（.concept-square）自体をグラデーションで塗る */
.concept--split-photoless .concept-square > div {
  display: none;
}

/* 円形＋白枠＋影（2026-08-30、テンプレート本体へ格上げ）。
   以前は5マス全部を同じ長方形グラデーションで塗っていたが、重なり方が「不気味」と不評だったため、
   Heroのdeco円と揃えて円形にし、白枠+影でカード然とさせた。ガラス風の半透明白（rgba(255,255,255,0.x)）は
   案件の背景色が暗い/濃い色のときしか映えず、白系の背景（theme-mono等）だと白飛びして見えなくなるため、
   背景色に依存しないグラデーション塗りを採用（`clients/TEST-パン工房むぎ/03_制作/delivery.html`での検証結果） */
.concept--split-photoless .concept-square {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deco-color-1) 0%, var(--deco-color-2) 100%);
  border: 3px solid var(--color-white, #fff);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}