/* ============================================================
   _top.css — Top page (hero / featured / cards / categories)
   theme-agnostic, var() only
   出典: cms-design A-default _top.css
   ============================================================ */
/* ---- hero (image background, full overlay) ---- */
  .hero{
    border-bottom:1px solid var(--line);
    position:relative;
    background-color: var(--hero-bg-fallback);
    background-image: var(--hero-image);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    isolation:isolate;
    overflow:hidden;
    --hero-overlay:0.42;
  }
  /* dark overlay for legibility */
  .hero::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg,
        rgba(20,14,8, calc(var(--hero-overlay) * 0.55)) 0%,
        rgba(20,14,8, var(--hero-overlay)) 55%,
        rgba(15,10,6, calc(var(--hero-overlay) + 0.20)) 100%);
    z-index:0;
  }
  /* bottom accent line */
  .hero::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--accent); opacity:0.55; z-index:2;
  }
  .hero-inner{
    max-width:980px; margin:0 auto;
    padding:64px 32px 56px;
    position:relative; z-index:1;
    color:#fff;
  }
  @media (max-width:680px){
    .hero-inner{padding:44px 22px 36px;}
  }
  .hero .eyebrow{
    font-size:10.5px; color:var(--hero-accent); letter-spacing:0.28em;
    margin:0 0 18px; font-weight:500;
    display:flex; align-items:center; gap:12px;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
  }
  .hero .eyebrow::before{
    content:""; width:28px; height:1px; background:var(--hero-accent);
  }
  .hero h1{
    font-family:var(--font-display);
    font-size:36px; font-weight:700; line-height:1.5;
    letter-spacing:0.05em; margin:0 0 20px; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,0.35);
  }
  @media (max-width:680px){ .hero h1{font-size:24px; line-height:1.55; letter-spacing:0.04em;} }
  .hero h1 em{
    font-style:normal; color:#fff;
    background:linear-gradient(transparent 72%, rgba(var(--hero-accent-rgb),0.55) 72%);
    padding:0 3px;
  }
  .hero .lede{
    font-size:14.5px; color:rgba(255,255,255,0.86); line-height:1.95;
    margin:0 0 26px; max-width:640px;
    letter-spacing:0.04em;
    text-shadow:0 1px 4px rgba(0,0,0,0.35);
  }
  @media (max-width:680px){ .hero .lede{font-size:13px; line-height:1.9; margin-bottom:20px;} }
  .hero-meta{
    display:flex; gap:24px; flex-wrap:wrap;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.22);
  }
  .hero-meta div{
    display:flex; align-items:baseline; gap:8px;
  }
  .hero-meta b{
    font-family:var(--font-display);
    color:var(--hero-accent); font-weight:700; font-size:20px;
    letter-spacing:0.02em;
    line-height:1;
    text-shadow:0 1px 4px rgba(0,0,0,0.35);
  }
  .hero-meta span{
    font-size:10.5px; color:rgba(255,255,255,0.7); letter-spacing:0.18em;
  }
  @media (max-width:480px){
    .hero-meta{gap:14px 18px;}
    .hero-meta b{font-size:17px;}
  }
  /* fallback when image disabled */
  .hero.no-image{
    background-image:none;
    background-color:var(--bg);
  }
  .hero.no-image::after{ display:none; }
  /* 管理画面で単色（暗い色）を指定したとき: 暗オーバーレイのみ無効化し、白文字は維持 */
  .hero.bg-solid-dark::after{ display:none; }
  .hero.no-image .hero-inner{ color:var(--ink); }
  .hero.no-image .eyebrow{ color:var(--accent); text-shadow:none; }
  .hero.no-image .eyebrow::before{ background:var(--accent); }
  .hero.no-image h1{ color:var(--ink); text-shadow:none; }
  .hero.no-image h1 em{
    color:var(--accent);
    background:linear-gradient(transparent 72%, rgba(var(--accent-rgb),0.16) 72%);
  }
  .hero.no-image .lede{ color:var(--ink-2); text-shadow:none; }
  .hero.no-image .hero-meta{ border-top-color:var(--line); }
  .hero.no-image .hero-meta b{ color:var(--accent); text-shadow:none; }
  .hero.no-image .hero-meta span{ color:var(--muted); }

  /* ---- section heads ---- */
  .sec-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    margin:48px 0 24px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  main > .sec-head:first-of-type{ margin-top:36px; }
  .sec-head::after{
    content:""; position:absolute; left:0; bottom:-1px;
    width:72px; height:2px; background:var(--accent);
  }
  .sec-head .lab{
    font-size:11px; color:var(--accent); letter-spacing:0.22em;
    margin-bottom:6px; font-weight:500;
  }
  .sec-head h2{
    margin:0; font-size:24px; font-weight:700; letter-spacing:0.06em;
    font-family:var(--font-display);
  }
  .sec-head .more{
    font-size:12.5px; text-decoration:none; color:var(--muted);
    letter-spacing:0.1em;
  }
  .sec-head .more:hover{color:var(--accent);}

  /* ---- featured (top hero card) ---- */
  .featured{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap:24px;
    margin-top:8px;
  }
  @media (max-width:760px){.featured{grid-template-columns:1fr;}}
  .feat-main{
    text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:14px;
  }
  .feat-main .img{
    aspect-ratio: 16 / 10; border-radius:var(--radius-md);
    background:
      linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.02) 100%),
      repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.06) 0 14px, rgba(var(--accent-rgb),0.12) 14px 28px);
    position:relative; overflow:hidden;
    border:1px solid var(--line);
  }
  /* CMS拡張: 実画像があれば疑似要素を消して img 表示 */
  .feat-main .img.has-image{ background:#fff; }
  .feat-main .img.has-image::after{ display:none; }
  .feat-main .img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .feat-main .img::after{
    content:"FEATURED"; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    color:rgba(var(--accent-rgb),0.6); font-size:11px; letter-spacing:0.24em;
  }
  .feat-main .img .tag{
    position:absolute; top:14px; left:14px;
    background:rgba(255,255,255,0.95); color:var(--accent);
    border:1px solid var(--accent);
    font-size:10.5px; padding:6px 12px; border-radius:var(--radius-sm);
    letter-spacing:0.18em; font-weight:600;
    backdrop-filter:blur(2px);
    z-index:2;
  }
  .feat-main .ttl{
    font-family:var(--font-display);
    font-size:24px; font-weight:700; line-height:1.6;
    margin:0; letter-spacing:0.04em;
  }
  .feat-main .meta{
    display:flex; gap:12px; align-items:center;
    font-size:12px; color:var(--muted); letter-spacing:0.08em;
  }
  .feat-main .meta .cat{
    border:1px solid var(--accent); color:var(--accent);
    padding:3px 10px; border-radius:var(--radius-sm);
    font-size:10.5px; letter-spacing:0.14em; font-weight:500;
  }
  .feat-main .desc{
    font-size:14.5px; color:var(--ink-2); line-height:1.95;
    margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  .feat-side{
    display:flex; flex-direction:column;
    border-top:1px solid var(--line);
  }
  .feat-side a{
    display:grid; grid-template-columns:96px 1fr;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none; color:inherit;
    transition:background .15s ease;
  }
  .feat-side a:hover{background:var(--soft);}
  .feat-side .img{
    width:96px; height:68px; border-radius:var(--radius-sm);
    background:
      linear-gradient(135deg, rgba(var(--accent-rgb),0.05) 0%, rgba(var(--accent-rgb),0.02) 100%),
      repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.05) 0 8px, rgba(var(--accent-rgb),0.10) 8px 16px);
    border:1px solid var(--line);
    overflow:hidden;
  }
  .feat-side .img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .feat-side .ttl{
    font-family:var(--font-display);
    font-size:14px; font-weight:600; line-height:1.65; margin:0 0 6px;
    letter-spacing:0.03em;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .feat-side .meta{font-size:11px; color:var(--muted); letter-spacing:0.1em;}

  /* ---- card grid ---- */
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 22px;
  }
  @media (max-width:560px){.grid{grid-template-columns:1fr; gap:24px;}}
  .grid .card{
    text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:10px;
  }
  .grid .card .img{
    aspect-ratio: 16 / 10; border-radius:var(--radius-md);
    background:
      linear-gradient(135deg, rgba(var(--accent-rgb),0.06) 0%, rgba(var(--accent-rgb),0.02) 100%),
      repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.05) 0 12px, rgba(var(--accent-rgb),0.10) 12px 24px);
    position:relative; overflow:hidden;
    border:1px solid var(--line);
  }
  .grid .card .img.has-image{ background:#fff; }
  .grid .card .img.has-image::after{ display:none; }
  .grid .card .img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .grid .card .img::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(31,26,20,0.08) 100%);
  }
  .grid .card .tag{
    position:absolute; top:10px; left:10px; z-index:2;
    background:var(--surface); color:var(--accent);
    font-size:10px; padding:4px 10px; border-radius:var(--radius-sm);
    letter-spacing:0.14em; border:1px solid var(--accent);
    font-weight:500;
  }
  .grid .card .ttl{
    font-family:var(--font-display);
    font-size:15.5px; font-weight:600; line-height:1.7;
    margin:4px 0 0; letter-spacing:0.03em;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .grid .card .meta{
    display:flex; gap:10px; align-items:center;
    font-size:11px; color:var(--muted); letter-spacing:0.1em;
  }

  /* ---- categories ---- */
  .cat-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  }
  @media (max-width:600px){
    .cat-grid{grid-template-columns:1fr 1fr; gap:10px;}
  }
  .cat-tile{
    text-decoration:none; color:inherit;
    border:1px solid var(--line); border-radius:var(--radius-md);
    padding:22px 22px 20px;
    background:var(--surface);
    transition:all .2s ease;
    position:relative;
  }
  .cat-tile::before{
    content:""; position:absolute; top:0; left:0; bottom:0;
    width:0; background:var(--accent);
    transition:width .2s ease;
  }
  .cat-tile:hover{background:var(--soft); transform:translateY(-2px);}
  .cat-tile:hover::before{width:3px;}
  .cat-tile:hover .nm{color:var(--accent);}
  .cat-tile .num{
    font-family:var(--font-display);
    font-size:13px; color:var(--accent); letter-spacing:0.2em;
    margin-bottom:8px; font-weight:500;
  }
  .cat-tile .nm{
    font-family:var(--font-display);
    font-size:15.5px; font-weight:700; margin-bottom:6px;
    display:flex; align-items:center; justify-content:space-between;
    letter-spacing:0.04em;
    transition:color .2s ease;
  }
  .cat-tile .nm::after{
    content:""; width:7px; height:7px;
    border-right:1.5px solid var(--accent); border-top:1.5px solid var(--accent);
    transform:rotate(45deg);
  }
  .cat-tile .ct{font-size:11.5px; color:var(--muted); letter-spacing:0.1em;}

  /* スマホ: padding 縮小 + 矢印を絶対配置にしてカテゴリ名折り返しに耐える */
  @media (max-width:600px){
    .cat-tile{
      padding:16px 14px 14px;
    }
    .cat-tile .num{
      font-size:11.5px; margin-bottom:6px;
    }
    .cat-tile .nm{
      display:block;
      margin-right:18px;  /* 矢印分の右余白を確保 */
      margin-bottom:4px;
      font-size:13.5px;
      letter-spacing:0.02em;
      line-height:1.45;
    }
    .cat-tile .nm::after{
      position:absolute;
      top:18px;
      right:12px;
      width:6px; height:6px;
    }
    .cat-tile .ct{font-size:11px; letter-spacing:0.06em;}
  }

  /* ---- pagination (Topのページ送りでも使用) ---- */
  .pager{
    display:flex; justify-content:center; align-items:center; gap:6px;
    flex-wrap:wrap;
    margin:48px 0 16px;
  }
  .pager a, .pager span{
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    text-decoration:none; color:var(--ink-2);
    font-size:13px; font-weight:500;
    transition:all .15s ease;
    white-space:nowrap;
    flex-shrink:0;
  }
  .pager a:hover{border-color:var(--ink); color:var(--ink);}
  .pager .on{background:var(--ink); color:#fff; border-color:var(--ink);}
  .pager .nav{width:auto; padding:0 14px; font-size:12px; letter-spacing:0.06em; color:var(--muted);}
  .pager .ellipsis{border:none; color:var(--muted-2);}