/* =========================================================
   Gardenas - Clean Theme (Consolidated)
   2025-09-02
   ========================================================= */

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,Arial,sans-serif;
  color:#2b2f36;background:#fff;line-height:1.75;-webkit-text-size-adjust:100%
}
img{max-width:100%;height:auto;display:block}
a{color:#0b66d6;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;line-height:1.3}
p{margin:.5rem 0}
small{font-size:.875rem}
.muted{color:#6b7280}
.sub{color:#55637a}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ============ Tokens ============ */
:root{
  --radius:16px;
  --border:#e6e9ef;
  --bg-soft:#fafbfc;
  --chip-bg:#f2f5f7;
  --chip-bd:#dde3e8;
  --shadow:0 8px 24px rgba(15,25,40,.08);
  --primary:#0b66d6;
  --hero-plate-bg:rgba(255,255,255,.62);
  --hero-plate-text:#263238;
  /* Anchor offset (site-wide): decided value */
  --header-offset:35px;
  /* Tints */
  --tint-sand:#faf5ef; --tint-mint:#f3faf6; --tint-sky:#f3f8ff; --tint-rose:#fdf6f7; --tint-wood:#fbf8f4;
}




/* ============ Header / Nav ============ */
header.site{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border)}
header.site .nav{display:flex;align-items:center;gap:18px;padding:10px 0}
.nav .brand{display:inline-flex;align-items:center}
.logo{width:180px;max-width:45vw;height:auto}
.mainnav{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mainnav li{margin:0;padding:0}
.nav-link{display:inline-flex;align-items:center;gap:6px;font-size:clamp(14px,1.15vw,15px);font-weight:600;line-height:1.2;white-space:nowrap;padding:8px 2px;border-bottom:2px solid transparent;color:#334155}
.nav-link:hover{border-bottom-color:#cdd6e1;text-decoration:none}
.nav-link .icon{width:22px;height:22px;display:block}
.nav-toggle{display:none}
@media (min-width:641px){.nav-toggle{display:none!important}}
@media (max-width:640px){
  header.site .nav{position:relative;gap:10px;padding:6px 0}
  .logo{width:140px}
  .nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:.5em;padding:8px 10px;border:1px solid #cfd6dd;border-radius:10px;background:#fff;color:#0f172a;cursor:pointer;user-select:none;white-space:nowrap;z-index:31}
  .nav-toggle::before{content:"";width:18px;height:2px;background:#334155;position:relative;box-shadow:0 5px 0 #334155,0 -5px 0 #334155;display:inline-block;margin-right:.35em}
  .mainnav{position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 12px;list-style:none;background:#fff;border-bottom:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height .25s ease;box-shadow:0 10px 24px rgba(15,25,40,.06);z-index:30;display:block}
  .navc:checked~.mainnav{position:static;max-height:65vh;box-shadow:none;border-bottom:1px solid var(--border);margin-top:8px}
  .nav-link{font-size:13px;padding:10px 6px;border-bottom:none;white-space:normal}
  .nav-link .icon{width:18px;height:18px}
}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden}

/* ============ Hero ============ */
.hero{background-size:cover;background-repeat:no-repeat;background-position:60% 54%;border-bottom:1px solid var(--border)}
.hero .inner{padding:60px 0 72px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.eyebrow{font-weight:700;letter-spacing:.08em;color:#7a5530}
.hero h1{font-size:clamp(26px,3.1vw,40px);color:#1f2937;margin:.2rem 0}
.lead{max-width:720px;color:#374151}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #cfd6dd;background:#fff;color:#0f172a;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:filter .15s ease,transform .02s ease,box-shadow .15s ease}
.btn:hover{background:#f6f8fb;filter:brightness(.99) saturate(1.02);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid rgba(11,102,214,.25);outline-offset:2px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}

/* hero text plates */
.hero .inner .eyebrow,
.hero .inner h1,
.hero .inner .lead{
  display:inline;background:var(--hero-plate-bg);color:var(--hero-plate-text);
  padding:.16em .52em;border-radius:.52em;border:1px solid rgba(255,255,255,.9);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  backdrop-filter:blur(3px) saturate(105%);-webkit-backdrop-filter:blur(3px) saturate(105%);
  box-shadow:0 10px 30px rgba(0,0,0,.10)
}
.hero .inner .eyebrow::after,
.hero .inner h1::after,
.hero .inner .lead::after{content:"";display:block;height:.35rem}
.hero .inner h1{max-width:24ch;line-height:1.22}
.hero .inner .lead{max-width:60ch}

/* hero brand colors by URL */
.hero .cta .btn{font-weight:900;font-size:clamp(15px,1.2vw,17px);padding:12px 18px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.10)}
.hero .cta .btn:hover{transform:translateY(-1px)}
.hero .cta .btn:active{transform:translateY(0)}
.hero .cta a[href*="amazon."]{background:#ff9900;border-color:#d98200;color:#111}
.hero .cta a[href*="rakuten."]{background:#bf0000;border-color:#9f0000;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}
.hero .cta a[href*="shopping.yahoo."],
.hero .cta a[href*="store.shopping.yahoo."],
.hero .cta a[href*="yahoo.co.jp/"]{background:#ff0033;border-color:#d6002a;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}

/* ============ Trust strip ============ */
.strip{background:#fff;border-bottom:1px solid var(--border)}
.trust{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);padding:14px 0}
.trust .card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
@media (max-width:980px){.trust{grid-template-columns:repeat(2,1fr)}}

/* ============ Sections ============ */
section{position:relative}
section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--border)}
#products{background:var(--tint-sand);padding:28px 0}
#features{background:var(--tint-mint);padding:28px 0}
#use-cases{background:var(--tint-sky);padding:28px 0}
#gallery{background:var(--tint-rose);padding:28px 0}
#news{background:var(--tint-wood);padding:28px 0}
#photo{background:var(--tint-mint);padding:28px 0}
#contact{background:#fff;padding:28px 0}
h2{font-size:1.6rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.35em;padding:.12em .5em;border-radius:.6em;background:rgba(255,255,255,.65);box-shadow:0 8px 22px rgba(15,25,40,.06);border:1px solid rgba(255,255,255,.95)}
#products .sub,#features .sub,#use-cases .sub{margin-bottom:12px}

/* ============ Cards grid ============ */
.products{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,25,40,.10);border-color:#dfe5eb}
.card:focus-within{outline:2px solid rgba(11,102,214,.18);outline-offset:2px}
.card figure{margin:0}
.card figure img{width:100%;height:220px;object-fit:cover}
@media (max-width:640px){.card figure img{height:200px}}
.card .body{padding:14px}
.card h3{font-size:1.05rem;margin:.35rem 0 .3rem}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:.35rem 0}
.badge{background:var(--chip-bg);border:1px solid var(--chip-bd);padding:4px 8px;border-radius:999px;font-size:.85rem}

/* ============ Products CTA & Store box ============ */
.channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.channels a{display:inline-block;padding:8px 10px;border:1px solid #cfd6dd;border-radius:10px;background:#fff;color:#0f172a}
.channels a:hover{background:#f4f7fb}
#products .cta.channels{display:block}

/* gap between "詳しく見る" and store box */
#products .cta.channels>.btn:first-child{margin-bottom:.75rem}
@media (min-width:960px){#products .cta.channels>.btn:first-child{margin-bottom:1.1rem!important}}

/* store box */
#products .cta.channels .store-links{margin-top:.8rem;padding:.6rem;border:1px solid #e5e7eb;border-radius:.8rem;background:#fff}
#products .cta.channels .store-links::before{content:"取扱いストア";display:block;font-size:.78rem;color:#6b7280;margin:-.1rem 0 .4rem}

/* layout inside store box */
@media (min-width:960px){
  #products .cta.channels .store-links{display:grid;gap:.6rem;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(9.4rem,1fr))}
  #products .cta.channels .store-links .btn{width:100%;min-width:0;padding:.44rem .64rem;font-size:.92rem;line-height:1.15;white-space:nowrap;text-align:center;min-height:2.4rem;display:flex;align-items:center;justify-content:center}
}
@media (max-width:959.98px){
  #products .cta.channels .store-links{display:flex;flex-wrap:wrap;gap:.55rem}
  #products .cta.channels .store-links .btn{flex:1 1 auto;min-width:8.2rem;text-align:center;min-height:2.4rem;display:flex;align-items:center;justify-content:center}
}

/* brand colors inside store box and legacy .channels */
#products .cta.channels .store-links .btn,
#products .channels a{font-weight:800;letter-spacing:.02em}
#products .cta.channels .store-links .btn[href*="amazon."],
#products .channels a[href*="amazon."]{background:#ff9900;border-color:#d98200;color:#111}
#products .cta.channels .store-links .btn[href*="rakuten."],
#products .channels a[href*="rakuten."]{background:#bf0000;border-color:#9f0000;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}
#products .cta.channels .store-links .btn[href*="shopping.yahoo."],
#products .cta.channels .store-links .btn[href*="store.shopping.yahoo."],
#products .cta.channels .store-links .btn[href*="yahoo.co.jp/"],
#products .channels a[href*="shopping.yahoo."],
#products .channels a[href*="store.shopping.yahoo."],
#products .channels a[href*="yahoo.co.jp/"]{background:#ff0033;border-color:#d6002a;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}
#products .cta.channels .store-links .btn:hover,
#products .channels a:hover{filter:brightness(.98);text-decoration:none}
#products .cta.channels .store-links .btn:focus-visible,
#products .cta.channels>.btn:focus-visible,
#products .channels a:focus-visible{outline:3px solid currentColor;outline-offset:2px}

/* ============ Feature grid ============ */
.feature-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:8px}
.feature{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.feature h3{font-size:1.02rem;margin:0 0 .25rem;color:#1f2937}
/* No crop & fixed ratio */
.feature figure{margin:.6rem 0 0!important;border-radius:12px;overflow:hidden;border:1px solid #e6e9ef;background:#fff;aspect-ratio:16/9}
.feature figure img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
@media (min-width:960px){.feature figure{aspect-ratio:4/3}}

/* ============ News cards ============ */
#news .products{gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
#news .card figure{width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff}
#news .card figure img{width:100%;height:100%;object-fit:cover}
#news .card small.muted{display:inline-block;margin:.1rem 0 .25rem}
#news .card .channels{margin-top:8px}
#news .card .body>small+*{display:block}
#news .card .body>small+*::first-line{font-weight:700}
#news .card .body>:first-child:not(small){display:block}
#news .card .body>:first-child:not(small)::first-line{font-weight:700}
#news .card a.btn{background:#2e7d32;border-color:#2e7d32;color:#fff;text-decoration:none;padding:8px 12px;border-radius:10px}
#news .card a.btn:hover{filter:brightness(.98)}
#news .card:nth-of-type(5n+1) a.btn{background:#2e7d32;border-color:#2e7d32}
#news .card:nth-of-type(5n+2) a.btn{background:#1e66d0;border-color:#1e66d0}
#news .card:nth-of-type(5n+3) a.btn{background:#af7a1f;border-color:#af7a1f}
#news .card:nth-of-type(5n+4) a.btn{background:#965f2d;border-color:#965f2d}
#news .card:nth-of-type(5n+5) a.btn{background:#157f6d;border-color:#157f6d}
#news .card .body p{margin:.45rem 0}

/* ============ Forms & Flash ============ */
label{display:block;margin:.6rem 0}
input[type="text"],input[type="email"],input[type="file"],input[type="url"],input[type="number"],textarea{width:100%;padding:10px;border:1px solid #cfd6dd;border-radius:12px;background:#fff;font:inherit;outline:none}
textarea{min-height:120px;resize:vertical}
.flash{margin:10px 0;padding:10px 12px;border-radius:12px;background:#eefaf0;border:1px solid #c8e6cb;color:#1d5e31}

/* ============ Footer ============ */
footer{border-top:1px solid var(--border);background:#fff;margin-top:26px}
.foot-grid{display:grid;gap:18px;grid-template-columns:1.4fr .8fr;padding:18px 0}
@media (max-width:640px){.foot-grid{grid-template-columns:1fr}}

/* ============ Admin tweaks ============ */
#recent-assets .asset-grid{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){#recent-assets .asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:840px){#recent-assets .asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#recent-assets .asset-grid{grid-template-columns:1fr}}
#recent-assets .asset{margin:0;padding:10px;border:1px solid #e6e9ef;border-radius:10px;background:#fff}
#recent-assets .thumb{aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#f6f7fb;display:grid;place-items:center}
#recent-assets .thumb img{width:100%;height:100%;object-fit:cover;display:block}
#recent-assets .kv{display:grid;grid-template-columns:60px 1fr;gap:6px 8px;margin:.6rem 0}
#recent-assets .kv label{font-size:12px;color:#556;align-self:center}
#recent-assets .kv input{width:100%;font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:6px 8px;border:1px solid #cfd6dd;border-radius:6px;background:#fafbfe}
#recent-assets .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:#566;margin-top:.25rem}
#recent-assets .meta .fn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recent-assets .actions{display:flex;gap:8px;align-items:center;margin-top:.5rem;flex-wrap:wrap}
#recent-assets .actions .btn{cursor:pointer;padding:6px 10px;border-radius:8px;border:1px solid #cfd6dd;background:#fff}
#recent-assets .actions .btn:hover{background:#f6f9fc}
#recent-assets .actions .btn.danger{border-color:#f3b1b1;color:#a44;background:#fff7f7}
#recent-assets .actions .btn.danger:hover{background:#ffecec}

/* latest news table (generic) */
.table.news-latest{table-layout:fixed;width:100%}
.table.news-latest th,.table.news-latest td{padding:6px 8px;vertical-align:middle}
.table.news-latest td.thumb{width:72px}
.table.news-latest td.thumb img{object-fit:cover;display:block;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;margin:0 auto}
.table.news-latest td.text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  max-width:560px;
}

/* ============ Readability ============ */
.container p{max-width:70ch}

/* ============ Use-cases list tidy (LIST layout) ============ */
#use-cases ul,#use-cases ol{list-style:none;margin:12px 0 0;padding:0}
#use-cases li{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 0!important;margin:0!important}
#use-cases li+li{border-top:1px solid #e6e9ef}
#use-cases li>*,#use-cases li a,#use-cases li span{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* motion reduce */
@media (prefers-reduced-motion:reduce){.card,.btn{transition:none!important}}

/* ============ Section-specific safe overrides ============ */
/* 主な用途：ボタン色（薄いブルーに固定） */
#use-cases a.btn{
  background:#EEF6FF;border-color:#D7E6FF;color:#0B66D6;font-weight:800;
}
#use-cases a.btn:hover{background:#E3F0FF;text-decoration:none;filter:brightness(.99)}
#use-cases a.btn:focus-visible{outline:3px solid rgba(11,102,214,.25);outline-offset:2px}
/* ===== Anchor fix: header-safe offset without JS ===== */
/* 実寸に合わせてここだけ調整（今は 40px でOK） */
/* ===== Anchor fix: header-safe offset without JS ===== */
/* 初期値（JSが走らない環境のフェイルセーフ） */
:root { --anchor-offset: 40px; }  /* デスクトップ既定 */

@media (max-width: 640px){
  :root { --anchor-offset: 48px; } /* モバイルはやや大きめ */
}

/* 以前の補正は抑止のまま（重複対策） */
section[id]::before{
  content:"";
  display:block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
  visibility:hidden;
}


/* 以前の補正を無効化（重複を回避） */
/*html { scroll-padding-top: 0 !important; }
section[id] { scroll-margin-top: 0 !important; }*/

/* すべてのアンカー要素(=id持ちセクション)の前に、見えないダミーを置く */
section[id]::before{
  content:"";
  display:block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
  visibility:hidden;
}
/* --- Upload preview / dropzone (Photo section) --- */
#photo .dropzone{
  display:flex;align-items:center;justify-content:center;min-height:120px;
  border:2px dashed #CCD6E0;border-radius:12px;background:#F7F9FB;cursor:pointer;
  transition:border-color .15s, background .15s; margin:.5rem 0;
}
#photo .dropzone.is-dragover{border-color:#0B66D6;background:#EEF6FF}
#photo .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#photo .thumb-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#photo .thumb{
  position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);background:#fff;border:1px solid #e5e7eb;
}
#photo .thumb img{width:100%;height:100%;object-fit:cover;display:block}
#photo .thumb .btn-x, #photo .thumb .btn-star{
  position:absolute;top:4px;width:20px;height:20px;line-height:20px;text-align:center;
  font-size:12px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);
  border:none;cursor:pointer;
}
#photo .thumb .btn-x{right:4px}
#photo .thumb .btn-star{left:4px}
#photo .thumb.is-primary{outline:2px solid #0B66D6; outline-offset:1px}
/* エラー用フラッシュ色 */
.flash.error{background:#fff2f2;border:1px solid #f5c2c2;color:#9a1f1f}
@media (max-width:640px){
  /* トグルボタン（既存のままでOK。見えない場合はこれで強制表示） */
  .nav-toggle{
    display:inline-flex!important;align-items:center;gap:.5rem;
    padding:.5rem .75rem;font-size:16px;line-height:1.25;
    border:1px solid var(--border);border-radius:10px;background:#fff;
    z-index:31;
  }

  /* 背景の半透明レイヤー（閉じる用）。デフォルト非表示 */
  .backdrop{
    position:fixed;inset:0;background:rgba(15,25,40,.28);
    -webkit-backdrop-filter:saturate(120%) blur(2px);
    backdrop-filter:saturate(120%) blur(2px);
    display:none;z-index:29;
  }
  /* チェック時に表示 */
  .navc:checked ~ .backdrop{ display:block; }

  /* メニュー本体：ヘッダー直下にドロワー表示（位置のズレ解消） */
  .mainnav{
    position:fixed;left:0;right:0;top:var(--anchor-offset);
    max-height:calc(100vh - var(--anchor-offset));
    overflow:auto; margin:0; padding:10px 12px 14px;
    list-style:none; background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 28px rgba(15,25,40,.08);
    z-index:30;
    /* 初期は閉じた状態（視覚的にも非表示） */
    opacity:0; transform:translateY(-8px);
    pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  }
  /* 開いた時（チェック時）だけ表示＆操作可 */
  .navc:checked ~ .mainnav{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }

  /* 項目の見やすさ（タップ領域・文字サイズ） */
  .mainnav li{ margin:0; padding:0; }
  .mainnav a{
    display:flex; align-items:center; gap:.65rem;
    padding:12px 10px; border-radius:10px;
    font-size:16px; line-height:1.35; color:#0f172a; text-decoration:none;
  }
  .mainnav a .icon{ width:22px; height:22px; flex:0 0 22px; }
  .mainnav a:active{ background:#f1f5f9; }
}
@media (max-width:640px){
  html.menu-open, body.menu-open{ overflow:hidden; } /* ← 既存ブロック内へ */
}
/* ===== Anchor offset fallback (JS不動時でも隠れない) ===== */
:root { --anchor-offset: 40px; }        /* PC 既定 */
@media (max-width: 640px){
  :root { --anchor-offset: 48px; }      /* SP はやや大きめ */
}
html { scroll-padding-top: 0 !important; }
section[id] { scroll-margin-top: 0 !important; }
section[id]::before{
  content: "";
  display: block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
  visibility: hidden;
}

/* （モバイル時にメニュー開いている間のスクロールロック。既にあれば不要） */
@media (max-width: 640px){
  html.menu-open, body.menu-open { overflow: hidden; }
}
/* === Photo section overrides (append-only, safe) === */

/* カウンタの行（メタ情報） */
#photo .meta-row{
  display:flex; flex-wrap:wrap; gap:8px;
  font-size:13px; color:#475569; margin:10px 0 8px;
}
#photo .meta-row .pill{
  background:#eef2f7; border:1px solid #d9e0ea;
  border-radius:999px; padding:6px 10px;
}

/* 1段目に常に5枚：狭い幅では各サムネが少し縮む */
#photo .thumb-grid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(48px, 64px));
  gap:8px;
}
/* 既存の 64px 固定を上書き：グリッドのセルいっぱいに */
#photo .thumb-grid .thumb{
  width:100% !important;
  height:auto !important;
  aspect-ratio: 1 / 1;
}

/* D&D：横長・右カラム幅に合わせつつ、5枚ぶんの幅に近づける（上限352px） */
#photo .dropzone{
  width:100%;
  max-width:352px;                 /* = 64*5 + 8*4 */
  min-height:220px;
  height:clamp(220px, 28vmin, 280px);
  padding:16px; /* 既存よりやや余裕 */
}

/* 同意チェック（カード化＆視認性アップ） */
#photo .consent{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #d9e0ea; border-radius:10px; padding:10px 12px;
}
#photo .consent input[type="checkbox"]{
  accent-color:#22a06b; width:18px; height:18px;
}

/* フラッシュは送信ボタン直前（明示テキスト用の軽いスタイルも） */
#photo .submit .flash{ margin-left:0; }
#photo .flash-hint{ font-size:12px; color:#64748b; }
/* === Photo: 2カラムレイアウト適用 === */
#photo .grid{
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 16px;
  align-items: start;
}
@media (max-width: 768px){
  #photo .grid{ grid-template-columns: 1fr; }
}

/* （任意）D&Dをカウンターと同じ横幅＝右カラムいっぱいにする */
#photo .dropzone{
  width: 100%;
  /* 下の1行が残っていると狭く見えるので、外します */
  /* max-width:352px; */
}
/* 左カラム：ラベル左・入力右（メッセージ以外） */
#photo .field.inline{
  display: grid;
  grid-template-columns: 140px 1fr;  /* ラベル幅はお好みで 120–160px */
  column-gap: 12px;
  align-items: center;
}
#photo .field.inline .label{
  margin: 0;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;               /* ラベルの折返し防止 */
}
#photo .field.inline .input{ width: 100%; }

/* モバイルは縦積みへ戻す */
@media (max-width: 768px){
  #photo .field.inline{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}
/* Flash を太字で強調（サイト全体） */
.flash{
  font-weight: 700;
  display: block;          /* 念のため */
  margin: 8px 0;
}