/**
 * CanvasRoot - assets/css/cr-layout.css
 * Version: 20260710_v1
 *
 * サイドバー付きレイアウトの共通CSS（フェーズ1①: 22テンプレのコピペ重複を一本化）。
 * 読込: inc/cr-layout-css.php が対象テンプレのみ <head> で enqueue（?ver=filemtime）。
 *
 * ⚠️ ここにあるのは22ファイルで「完全一致」していた多数派の値のみ。
 *    ページ固有の派生値（例: gap:60px / margin-bottom:24px / #83B36A系）は
 *    各テンプレ内の <style> に残してあり、そちらが後勝ちで優先される設計。
 *    ここの値を変える時は全対象ページに効くことに注意。
 *
 * 対象外: page-mypage.php / page-my-profile.php（ブランド色#83B36A派生＋
 *         howto系ルール非保持のため、読み込むと見た目が変わる。インラインのまま）
 *         sidebar.php（素材詳細/ブログの文書末尾に出るCSSのため順序逆転リスクあり。インラインのまま）
 */

/* ---- レイアウト骨格 ---- */
.cr-layout { display: flex; gap: 40px; max-width: 1440px; margin: 40px auto; padding: 0 40px; align-items: flex-start; }
.cr-sidebar { width: 255px; flex-shrink: 0; position: sticky; top: 100px; }

/* ---- サイドバー: セクション/見出し ---- */
.cr-sb-section { margin-bottom: 4px; }
.cr-sb-title { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 3px solid #5a9a3a; }

/* ---- サイドバー: カテゴリ ---- */
.cr-cat-list { list-style: none; }
.cr-cat-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; text-decoration: none; color: #444; font-size: 0.87rem; transition: all 0.15s; }
.cr-cat-item:hover { background: #eef4e8; color: #5a9a3a; }
.cr-icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ---- サイドバー: 用途 ---- */
.cr-scene-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cr-scene-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 5px; border-radius: 8px; text-decoration: none; color: #444; font-size: 0.72rem; text-align: center; border: 1px solid #eee; background: #fff; transition: all 0.15s; }
.cr-scene-item:hover { background: #eef4e8; color: #5a9a3a; border-color: #c8e0b8; }
.cr-scene-icon svg { width: 22px; height: 22px; display: block; }
.cr-scene-label { line-height: 1.3; }

/* ---- サイドバー: シーズン ---- */
.cr-season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.cr-season-card { display: flex; align-items: flex-end; justify-content: center; border-radius: 8px; overflow: hidden; text-decoration: none; aspect-ratio: 1; position: relative; transition: transform 0.2s; padding-bottom: 7px; }
.cr-season-card:hover { transform: translateY(-2px); }
.cr-season-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.cr-season-label { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 999px; }

/* ---- サイドバー: Tips&使い方 ---- */
.cr-howto-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cr-howto-item { display: flex; gap: 10px; align-items: center; text-decoration: none; color: #333; transition: color 0.15s; }
.cr-howto-item:hover { color: #5a9a3a; }
/* ★20260811（司令塔）: アイキャッチ(16:9)に合わせて枠も16:9に。左右の切れを解消 */
.cr-howto-thumb { width: 92px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #eef4e8; }
.cr-howto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cr-howto-title { font-size: 0.78rem; line-height: 1.4; }
.cr-more-link { font-size: 0.78rem; color: #5a9a3a; text-decoration: none; font-weight: 700; }
.cr-more-link:hover { text-decoration: underline; }

/* ---- モバイル ---- */
@media (max-width: 768px) {
  .cr-layout { flex-direction: column; padding: 0 16px; }
  .cr-sidebar { width: 100%; position: static; }
  .cr-scene-list { grid-template-columns: repeat(3, 1fr); }
}
