/* =================================================================
   DentaLab 共通スタイル（assets/style.css）
   ※ index.html 内の2つの<style>ブロックを統合・外部化したもの
   ================================================================= */

/* ---- メインスタイル ---- */
  :root{
    --cream:#F6F3EC; --paper:#FFFFFF; --ink:#16302B; --ink-soft:#5C726D;
    --teal:#0E8C82; --teal-deep:#0A5A53; --teal-soft:#E4F0ED;
    --coral:#E68466; --line:#DDE6E2; --shadow:0 14px 34px -18px rgba(10,90,83,.45);
    --font-head:'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ font-family:system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; background:var(--cream); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; }
  .wrap{ width:min(1180px, 92vw); margin-inline:auto; }

  header.site{ position:sticky; top:0; z-index:40; background:rgba(246,243,236,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .head-in{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; }
  .logo{ display:flex; align-items:center; gap:7px; text-decoration:none; }
  .logo .mark{ width:40px; height:40px; color:var(--teal); display:grid; place-items:center; flex:none; }
  .logo .mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text{ display:flex; flex-direction:column; line-height:1.12; }
  .logo-text .brand{ font-family:var(--font-head); font-weight:800; font-size:1.4rem; color:var(--ink); letter-spacing:-.01em; }
  .logo-text small{ font-weight:500; font-size:.66rem; letter-spacing:.04em; color:var(--ink-soft); margin-top:2px; }
  nav.site-nav{ display:flex; gap:26px; align-items:center; }
  nav.site-nav a{ color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .18s; cursor:pointer; }
  nav.site-nav a:hover{ color:var(--teal); }
  nav.site-nav a.back{ color:var(--teal); border:1px solid var(--teal); padding:7px 15px; border-radius:999px; font-weight:600; }
  nav.site-nav a.back:hover{ background:var(--teal); color:#fff; }
  .nav-toggle{ display:none; }

  .adminbar{ display:none; background:var(--teal-deep); color:#fff; }
  body.admin .adminbar{ display:block; }
  .adminbar-in{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 0; }
  .adminbar .status{ display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; margin-right:auto; }
  .adminbar .dot{ width:9px; height:9px; border-radius:50%; background:#7BE3C0; box-shadow:0 0 0 4px rgba(123,227,192,.25); }
  .adminbar .conn{ font-size:.76rem; font-weight:500; opacity:.85; }
  .abtn{ font-family:inherit; font-size:.84rem; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; transition:background .15s; display:inline-flex; gap:7px; align-items:center; }
  .abtn:hover{ background:rgba(255,255,255,.22); }
  .abtn svg{ width:15px; height:15px; }

  .hero{ position:relative; overflow:hidden; aspect-ratio:2500/843; max-height:560px; background:#EDEFF2; }
  .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .hero-bg-sp{ display:none; }
  .hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(10px,1.5vw,16px); padding:0 5%; }
  .hero-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(18px,3.1vw,34px); line-height:1.26; letter-spacing:.01em; color:var(--ink); margin:0; }
  .hero-title span{ display:block; white-space:nowrap; }
  .hero-sub{ margin:0; font-size:clamp(.82rem,1.25vw,1rem); color:var(--ink-soft); line-height:1.6; }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
  .btn-hero{ font-family:inherit; font-size:1.02rem; font-weight:700; padding:15px 34px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:all .16s; }
  .btn-hero-main{ background:var(--teal); color:#fff; box-shadow:0 14px 30px -14px rgba(14,140,130,.7); }
  .btn-hero-main:hover{ background:var(--teal-deep); transform:translateY(-2px); }
  .btn-hero-sub{ background:#fff; color:var(--teal-deep); border-color:var(--line); }
  .btn-hero-sub:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
  .hero-search{ display:flex; justify-content:center; padding:clamp(20px,3vw,32px) 20px 0; }
  .hero-search .searchbar{ width:100%; max-width:560px; margin:0; }
  @media(max-width:820px){
    .hero{ aspect-ratio:auto; height:auto; max-height:none; overflow:visible; display:block; }
    .hero-bg{ position:relative; inset:auto; width:100%; height:auto; object-fit:contain; }
    .hero-bg-pc{ display:none; }
    .hero-bg-sp{ display:block; }
    .hero-overlay{ position:relative; inset:auto; padding:16px 22px 2px; gap:12px; }
    .hero-title{ font-size:clamp(15px,5.8vw,24px); line-height:1.34; }
    .hero-title span{ white-space:nowrap; }
    .hero-sub{ font-size:.9rem; line-height:1.7; }
    .hero-cta{ gap:10px; }
    .hero-cta .btn-hero{ padding:13px 22px; font-size:.95rem; }
    .hero-search{ padding:16px 16px 0; }
  }
  .tl{ color:var(--teal); font-weight:600; text-decoration:none; border-bottom:1px solid var(--teal-soft); cursor:pointer; }
  .tl:hover{ border-color:var(--teal); }
  .hero-actions{ margin-top:20px; }
  .btn-terms{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:.92rem; font-weight:600; color:var(--teal-deep); background:var(--paper); border:1px solid var(--teal); padding:11px 22px; border-radius:999px; text-decoration:none; transition:all .16s; box-shadow:0 8px 20px -14px rgba(10,90,83,.5); }
  .btn-terms:hover{ background:var(--teal); color:#fff; }
  .btn-terms svg{ width:16px; height:16px; }

  .searchbar{ margin:30px auto 0; display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:6px 6px 6px 18px; box-shadow:var(--shadow); width:560px; max-width:100%; }
  .searchbar svg{ width:21px; height:21px; color:var(--teal); flex:none; }
  .searchbar input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:1rem; color:var(--ink); padding:12px 0; }
  .searchbar input::placeholder{ color:#9aada8; }
  .searchbar .clear{ border:none; background:var(--cream); color:var(--ink-soft); width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1.1rem; display:none; place-items:center; }
  .searchbar .clear:hover{ background:var(--teal-soft); }
  @media(max-width:640px){
    .searchbar{ margin-top:22px; padding:4px 4px 4px 14px; border-radius:13px; gap:8px; }
    .searchbar svg{ width:18px; height:18px; }
    .searchbar input{ font-size:.9rem; padding:9px 0; }
    .searchbar .clear{ width:30px; height:30px; }
  }

  .cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin:30px 0 8px; }
  .chip{ border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); font-family:inherit; font-size:.9rem; font-weight:500; padding:10px 8px; border-radius:999px; cursor:pointer; transition:all .16s; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
  .chip:hover{ border-color:var(--teal); color:var(--teal); }
  .chip.active{ background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600; }
  .chip .n{ opacity:.6; font-size:.82em; margin-left:5px; }
  .chip.active .n{ opacity:.8; }

  .count-line{ color:var(--ink-soft); font-size:.86rem; margin:18px 0 4px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .count-line b{ color:var(--ink); font-weight:600; }
  .add-inline{ display:none; }
  body.admin .add-inline{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--teal); background:var(--teal-soft); border:none; padding:7px 14px; border-radius:999px; font-family:inherit; }
  body.admin .add-inline:hover{ background:#d5e9e4; }
  .add-inline svg{ width:15px; height:15px; }

  .grid{ display:grid; gap:14px; padding:14px 0 60px; grid-template-columns:repeat(2, 1fr); }
  @media(min-width:560px){ .grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
  @media(min-width:820px){ .grid{ grid-template-columns:repeat(4,1fr); } }
  @media(min-width:1080px){ .grid{ grid-template-columns:repeat(5,1fr); } }

  .card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; }
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
  .card .thumb{ aspect-ratio:1/1; background:var(--cream); display:grid; place-items:center; color:var(--teal); padding:20px; transition:background .2s; }
  .card:hover .thumb{ background:var(--teal-soft); }
  .card .thumb svg, .card .thumb img{ width:100%; height:100%; max-width:130px; object-fit:contain; }
  .card .meta{ padding:12px 14px 14px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .card .meta .meta-txt{ min-width:0; }
  .card .meta h3{ font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.35; }
  .card .meta span{ font-size:.74rem; color:var(--ink-soft); }
  .card .corner{ position:absolute; top:10px; right:10px; display:flex; gap:6px; opacity:0; transform:translateY(-4px); transition:all .18s; }
  .card:hover .corner{ opacity:1; transform:none; }
  .card .iconbtn{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.94); border:1px solid var(--line); display:grid; place-items:center; color:var(--teal); }
  .card .iconbtn:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
  .card .iconbtn.del:hover{ background:var(--coral); border-color:var(--coral); }
  .card .iconbtn svg{ width:17px; height:17px; }
  .card .iconbtn.edit, .card .iconbtn.del{ display:none; }
  body.admin .card .iconbtn.edit, body.admin .card .iconbtn.del{ display:grid; }

  .empty{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-soft); }
  .empty svg{ width:54px; height:54px; color:var(--line); margin-bottom:14px; }
  .loading{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:.9rem; }
  .spinner{ width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; margin:0 auto 14px; animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .ov{ position:fixed; inset:0; z-index:80; background:rgba(16,48,43,.42); backdrop-filter:blur(4px); display:none; place-items:center; padding:20px; }
  .ov.open{ display:grid; }
  .sheet{ background:var(--paper); border-radius:24px; box-shadow:0 30px 80px -20px rgba(10,90,83,.5); width:min(820px,100%); max-height:90vh; overflow-y:auto; }
  .modal{ display:grid; grid-template-columns:1.1fr 1fr; }
  @media(max-width:680px){ .modal{ grid-template-columns:1fr; } }
  .modal .preview{ background:var(--teal-soft); display:grid; place-items:center; padding:46px; color:var(--teal); min-height:280px; }
  .modal .preview svg{ width:100%; max-width:230px; height:auto; }
  .modal .preview img{ width:100%; max-width:240px; height:auto; object-fit:contain; }
  .modal .info{ padding:30px 30px 34px; position:relative; }
  .x{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:11px; border:none; background:var(--cream); color:var(--ink-soft); cursor:pointer; font-size:1.3rem; display:grid; place-items:center; }
  .x:hover{ background:var(--teal-soft); color:var(--teal); }
  .modal .info .cat-tag{ display:inline-block; font-size:.74rem; font-weight:600; color:var(--teal-deep); background:var(--teal-soft); padding:5px 12px; border-radius:999px; margin-bottom:14px; }
  .modal .info h2{ font-family:var(--font-head); font-weight:700; font-size:1.55rem; line-height:1.25; margin-bottom:8px; }
  .modal .info .tags{ margin:16px 0 26px; display:flex; flex-wrap:wrap; gap:7px; }
  .modal .info .tags span{ font-size:.76rem; color:var(--ink-soft); background:var(--cream); padding:4px 11px; border-radius:8px; }
  .dl-row{ display:flex; flex-direction:column; gap:10px; }
  .btn{ display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:.95rem; font-weight:600; padding:13px; border-radius:13px; cursor:pointer; border:1px solid var(--teal); transition:all .16s; }
  .btn svg{ width:18px; height:18px; }
  .btn-primary{ background:var(--teal); color:#fff; }
  .btn-primary:hover{ background:var(--teal-deep); border-color:var(--teal-deep); }
  .btn-ghost{ background:var(--paper); color:var(--teal); }
  .btn-ghost:hover{ background:var(--teal-soft); }
  /* 販売物ライセンス購入の導線 */
  .license-cta{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
  .license-cta p{ font-size:.82rem; color:var(--ink); opacity:.85; margin:0 0 10px; line-height:1.6; }
  .license-cta p b{ color:var(--coral); }
  .btn-license{ width:100%; background:#fff; color:var(--coral); border:1px solid var(--coral); }
  .btn-license:hover{ background:var(--coral); color:#fff; }
  .license-detail{ display:inline-block; margin-top:10px; font-size:.78rem; color:var(--teal); text-decoration:none; border-bottom:1px solid var(--teal-soft); cursor:pointer; }
  .btn:disabled{ opacity:.5; cursor:default; }

  .form{ padding:30px 30px 34px; position:relative; }
  .form h2{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; margin-bottom:6px; }
  .form .desc{ color:var(--ink-soft); font-size:.9rem; margin-bottom:22px; }
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; }
  .field label .hint{ font-weight:400; color:var(--ink-soft); font-size:.78rem; }
  .field input[type=text], .field input[type=password], .field textarea, .field select{ width:100%; font-family:inherit; font-size:.95rem; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; background:var(--cream); }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--teal); background:#fff; }
  .field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C726D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer; }
  .field textarea{ min-height:90px; resize:vertical; font-family:ui-monospace, monospace; font-size:.82rem; }
  .filepick{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .filepick .pickbtn{ font-family:inherit; font-size:.86rem; font-weight:600; color:var(--teal); background:var(--teal-soft); border:none; padding:11px 18px; border-radius:11px; cursor:pointer; white-space:nowrap; }
  .filepick .pickbtn:hover{ background:#d5e9e4; }
  .filepick .fname{ font-size:.82rem; color:var(--ink-soft); }
  .or{ text-align:center; color:var(--ink-soft); font-size:.78rem; margin:6px 0 14px; }
  .live{ background:var(--teal-soft); border-radius:14px; padding:18px; display:grid; place-items:center; min-height:120px; color:var(--teal); margin-top:6px; }
  .live svg, .live img{ max-width:110px; max-height:110px; object-fit:contain; }
  .live.empty-live{ color:#9fb6b0; font-size:.82rem; }
  .form-actions{ display:flex; gap:10px; margin-top:24px; }
  .form-actions .btn{ flex:1; }
  .note{ background:#FFF6F2; border:1px solid #F4D9CE; color:#9A5B43; font-size:.8rem; border-radius:11px; padding:11px 14px; margin-top:14px; line-height:1.6; }

  .usage{ background:var(--paper); border-top:1px solid var(--line); padding:56px 0; }
  .usage h2{ font-family:var(--font-head); font-weight:700; font-size:1.7rem; margin-bottom:8px; }
  .usage .sub{ color:var(--ink-soft); margin-bottom:30px; }
  .usage-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
  .ucard{ background:var(--cream); border-radius:16px; padding:24px; }
  .ucard .ic{ width:42px; height:42px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; margin-bottom:14px; }
  .ucard .ic svg{ width:22px; height:22px; }
  .ucard h3{ font-size:1.02rem; font-weight:600; margin-bottom:6px; }
  .ucard p{ font-size:.9rem; color:var(--ink-soft); }
  /* よくある質問 */
  .faq{ margin-top:34px; max-width:760px; margin-inline:auto; }
  .faq-title{ font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--ink); text-align:center; margin-bottom:16px; }
  .faq-item{ background:var(--cream); border-radius:14px; margin-bottom:10px; overflow:hidden; }
  .faq-item summary{ list-style:none; cursor:pointer; padding:15px 46px 15px 18px; font-weight:600; font-size:.96rem; color:var(--ink); position:relative; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:1.3rem; color:var(--teal); font-weight:400; line-height:1; }
  .faq-item[open] summary::after{ content:"−"; }
  .faq-item p{ padding:0 18px 16px; font-size:.9rem; color:var(--ink-soft); line-height:1.8; margin:0; }

  section[id]{ scroll-margin-top:80px; }
  .terms{ padding:56px 0; border-top:1px solid var(--line); }
  .terms h2{ font-family:var(--font-head); font-weight:700; font-size:1.7rem; margin-bottom:8px; }
  .terms .sub{ color:var(--ink-soft); margin-bottom:28px; }
  .terms-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:30px; max-width:840px; }
  .terms-card h3{ font-size:1.02rem; font-weight:700; color:var(--ink); margin:22px 0 8px; }
  .terms-card h3:first-child{ margin-top:0; }
  .terms-card h4{ font-size:.86rem; font-weight:700; margin:16px 0 7px; display:inline-block; padding:4px 12px; border-radius:999px; }
  .terms-card h4.allow{ color:var(--teal-deep); background:var(--teal-soft); }
  .terms-card h4.deny{ color:#9A5B43; background:#FFF1EA; }
  .terms-card h4.buy{ color:#8A6D1F; background:#FBF3D9; }
  .terms-card > p:first-child{ font-size:.95rem; color:var(--ink); }
  .terms-card p, .terms-card li{ font-size:.92rem; color:var(--ink-soft); line-height:1.85; }
  .terms-card ul{ margin:6px 0 0 1.15em; }
  .terms-card li{ margin-bottom:4px; }
  .terms-edit{ background:#FFF6F2; border:1px solid #F4D9CE; color:#9A5B43; font-size:.8rem; border-radius:11px; padding:12px 15px; margin-top:22px; line-height:1.7; }

  footer.site{ padding:40px 0 56px; text-align:center; }
  footer.site .logo{ justify-content:center; margin-bottom:14px; }
  footer.site p{ color:var(--ink-soft); font-size:.85rem; }
  footer.site .fnav{ display:flex; gap:20px; justify-content:center; margin:18px 0; flex-wrap:wrap; }
  footer.site .fnav a{ color:var(--ink-soft); text-decoration:none; font-size:.88rem; cursor:pointer; }
  footer.site .fnav a:hover{ color:var(--teal); }
  footer.site .admin-link{ font-size:.78rem; color:#b9c7c2; }

  .toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:12px; font-size:.9rem; font-weight:500; opacity:0; pointer-events:none; transition:all .25s; z-index:100; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  @media(max-width:680px){
    nav.site-nav{ position:fixed; inset:62px 0 auto 0; background:var(--cream); flex-direction:column; padding:18px 0; gap:0; border-bottom:1px solid var(--line); display:none; }
    nav.site-nav.open{ display:flex; }
    nav.site-nav a{ padding:13px 0; width:100%; text-align:center; }
    nav.site-nav a.back{ margin:8px auto 0; width:fit-content; }
    .nav-toggle{ display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); cursor:pointer; }
  }

  /* ===== ハンバーガー（全画面で表示） ===== */
  .nav-toggle{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); cursor:pointer; }
  .nav-toggle:hover{ border-color:var(--teal); color:var(--teal); }

  /* ===== フルスクリーンメニュー ===== */
  .menu-ov{ position:fixed; inset:0; z-index:90; background:rgba(20,45,40,.5); opacity:0; visibility:hidden; transition:opacity .2s ease; }
  .menu-ov.open{ opacity:1; visibility:visible; }
  .menu-panel{ background:var(--teal); color:#fff; border-radius:0 0 22px 22px; box-shadow:0 20px 44px -18px rgba(0,0,0,.45); transform:translateY(-10px); transition:transform .2s ease; }
  .menu-ov.open .menu-panel{ transform:translateY(0); }
  .menu-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
  .menu-logo{ display:flex; flex-direction:column; line-height:1.15; }
  .menu-logo b{ font-family:var(--font-head); font-weight:800; font-size:1.2rem; }
  .menu-logo small{ font-size:.62rem; font-weight:600; opacity:.85; margin-top:2px; }
  .menu-close{ width:40px; height:40px; border:none; background:rgba(255,255,255,.16); color:#fff; border-radius:11px; font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
  .menu-close:hover{ background:rgba(255,255,255,.28); }
  .menu-list{ display:flex; flex-direction:column; padding:2px 0 12px; }
  .menu-list a{ display:block; text-align:center; color:#fff; text-decoration:none; font-size:.84rem; font-weight:500; letter-spacing:.02em; padding:7px 16px; border-top:1px solid rgba(255,255,255,.15); cursor:pointer; transition:background .15s; }
  .menu-list a:hover{ background:rgba(255,255,255,.1); }
  .menu-list .menu-ext{ font-size:.9rem; opacity:.8; }
  body.menu-open{ overflow:hidden; }

  /* ===== ページ切り替え ===== */
  .page{ display:none; }
  .page.active{ display:block; }
  .subpage{ min-height:60vh; }

  /* ===== リクエストフォーム ===== */
  .req-card .field:first-child{ margin-top:0; }
  .req-card textarea{ font-family:inherit; font-size:.95rem; min-height:110px; }
  .hp{ display:none; }
  .req-done{ display:none; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 0 6px; }
  .req-done svg{ width:46px; height:46px; color:var(--teal); }
  .req-done p{ font-weight:600; color:var(--ink); font-size:1rem; }
  .req-card.sent .field, .req-card.sent .form-actions, .req-card.sent .note{ display:none; }
  .req-card.sent .req-done{ display:flex; }

  /* ===== Cookie同意バナー ===== */
  .cookie-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:85; width:min(680px, calc(100% - 24px)); background:var(--ink); color:#fff; border-radius:16px; padding:15px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; box-shadow:0 18px 40px -12px rgba(0,0,0,.4); }
  .cookie-bar[hidden]{ display:none; }
  .cookie-bar p{ flex:1; min-width:200px; font-size:.84rem; line-height:1.7; margin:0; color:#fff; }
  .cookie-bar a{ color:#fff; text-decoration:underline; cursor:pointer; }
  .cookie-btns{ display:flex; gap:8px; }
  .cookie-bar button{ font-family:inherit; font-size:.84rem; font-weight:600; padding:9px 18px; border-radius:999px; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
  .cb-yes{ background:var(--teal); color:#fff; }
  .cb-yes:hover{ background:var(--teal-deep); }
  .cb-no{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
  .cb-no:hover{ border-color:#fff; }
  @media(max-width:520px){ .cookie-bar{ bottom:10px; } .cookie-btns{ width:100%; } .cookie-bar button{ flex:1; } }

/* ---- ホーム：カテゴリ/タグナビ/ページャ/お気に入り ---- */
/* === ホーム：カテゴリ一覧 / タグナビ / ページ送り === */
.sec-title{ font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--ink); text-align:center; margin:0 0 6px; }
.sec-sub{ text-align:center; color:var(--ink-soft); font-size:.9rem; margin:0 0 22px; }
.home-cats-sec{ padding:34px 20px 8px; }
.cat-cards{ max-width:520px; margin:0 auto; }
.cat-cards .tiles{ margin-top:4px; }
.cat-card{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:15px 16px; cursor:pointer; font-family:inherit; font-size:.98rem; font-weight:600; color:var(--ink); text-align:center; transition:all .16s; box-shadow:0 8px 20px -18px rgba(10,90,83,.4); }
.cat-card:hover{ border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px); }
.cat-card .n{ font-size:.78rem; font-weight:600; color:var(--ink-soft); background:var(--teal-soft); border-radius:999px; padding:2px 9px; flex:none; }
.see-all-wrap{ text-align:center; margin:26px auto 4px; }
.home-strip{ padding:32px 20px 6px; }
.see-all-btn{ display:inline-flex; align-items:center; gap:10px; font-family:inherit; font-size:1.02rem; font-weight:700; color:#fff; background:var(--teal); border:none; padding:15px 40px; border-radius:999px; cursor:pointer; box-shadow:0 14px 30px -14px rgba(14,140,130,.7); transition:all .16s; }
.see-all-btn:hover{ background:var(--teal-deep); transform:translateY(-2px); }
.see-all-btn svg{ width:18px; height:18px; }
.taxo{ padding:6px 20px 44px; }
.taxo-inner{ max-width:980px; margin:0 auto; }
.taxo-group{ border-top:1px dashed var(--line); padding:13px 0; display:grid; grid-template-columns:120px 1fr; gap:8px 16px; align-items:start; }
.taxo-group:first-child{ border-top:none; }
.taxo-head{ font-size:.84rem; font-weight:700; color:var(--teal); }
.taxo-links{ display:flex; flex-wrap:wrap; gap:6px 11px; }
.taxo-links a{ color:var(--ink); font-size:.74rem; text-decoration:none; cursor:pointer; border-bottom:1px solid transparent; }
.taxo-links a:hover{ color:var(--teal-deep); border-bottom-color:var(--teal); }
@media(max-width:560px){ .taxo-group{ grid-template-columns:1fr; gap:6px; } }
.back-to-cats{ display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:600; font-size:.92rem; cursor:pointer; margin-bottom:10px; }
.back-to-cats:hover{ color:var(--teal-deep); }
.pager{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:32px 0 8px; }
.pager button{ font-family:inherit; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; font-size:.95rem; font-weight:600; cursor:pointer; transition:all .15s; }
.pager button:hover:not(:disabled):not(.active){ border-color:var(--teal); color:var(--teal-deep); }
.pager button.active{ background:var(--teal); border-color:var(--teal); color:#fff; cursor:default; }
.pager button:disabled{ opacity:.4; cursor:default; }
.pager .dots{ color:var(--ink-soft); padding:0 2px; }
/* 丸アイコンのジャンルタイル（タグから探す） */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; max-width:400px; margin:10px auto 0; }
.gallery-tiles{ margin:6px 0 18px; }
.gallery-tiles .tiles{ margin-top:0; }
.tile{ display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; cursor:pointer; font-family:inherit; padding:4px 2px; }
.tile-ico{ width:clamp(40px,11vw,58px); height:clamp(40px,11vw,58px); border-radius:50%; background:var(--teal-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .16s, box-shadow .16s; }
.tile-ico img{ width:88%; height:88%; object-fit:contain; }
.tile:hover .tile-ico{ transform:translateY(-3px); box-shadow:0 14px 26px -12px rgba(14,140,130,.55); }
.tile-label{ font-size:.74rem; font-weight:600; color:var(--ink); line-height:1.25; text-align:center; }
.tile:hover .tile-label{ color:var(--teal-deep); }
/* お気に入り */
.head-actions{ display:flex; align-items:center; gap:2px; }
.head-fav{ position:relative; background:none; border:none; cursor:pointer; color:var(--ink-soft); width:42px; height:42px; display:grid; place-items:center; border-radius:10px; transition:color .15s, background .15s; }
.head-fav:hover{ color:var(--coral); background:var(--cream); }
.head-fav svg{ width:23px; height:23px; }
.fav-count{ position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--coral); color:#fff; font-size:.62rem; font-weight:700; display:none; align-items:center; justify-content:center; line-height:1; }
.fav-count.show{ display:flex; }
.fav-btn{ flex:none; width:30px; height:30px; margin:-2px -5px 0 0; border:none; background:none; display:grid; place-items:center; color:var(--ink-soft); cursor:pointer; transition:color .15s, transform .15s; }
.fav-btn:hover{ color:var(--coral); transform:scale(1.14); }
.fav-btn svg{ width:21px; height:21px; }
.fav-btn.on{ color:var(--coral); }
.fav-btn.on svg{ fill:var(--coral); }
.mfav.on{ color:var(--coral); border-color:var(--coral); }
.mfav.on svg{ fill:var(--coral); }

/* SNSフォロー */
.follow{ text-align:center; padding:8px 20px 56px; }
.follow-lead{ color:var(--ink-soft); margin:8px 0 22px; font-size:.95rem; }
.follow-btns{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; }
.sns-ico{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 18px -8px rgba(0,0,0,.32); transition:transform .16s, box-shadow .16s; }
.sns-ico:hover{ transform:translateY(-3px); box-shadow:0 14px 24px -10px rgba(0,0,0,.42); }
.sns-ico svg{ width:30px; height:30px; }
.ico-line{ background:#06C755; }
.ico-line span{ color:#fff; font-weight:800; font-size:.86rem; letter-spacing:.02em; font-family:Arial,Helvetica,sans-serif; }
.ico-ig{ background:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5 100%); }
.ico-x{ background:#000; }

/* =================================================================
   8pxグリッド リズム調整レイヤー（2026-06-22 追記）
   方針: 既存のレイアウト/構成は変えず、余白とタイポグラフィの
   「階層・リズム」だけを 8px(8/16/24/32/48) に揃えて上書きする。
   スマホ中心。ファイル末尾に置くことで同強度セレクタを後勝ちで統一。
   ================================================================= */
:root{
  --s-1:8px;  --s-2:16px; --s-3:24px;
  --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px;
}

/* ---- タイポグラフィ：見出し / 本文 / 補助 の階層を明確に ---- */
.sec-title{ line-height:1.4; margin:0 0 var(--s-1); }
.sec-sub{ line-height:1.7; margin:0 0 var(--s-3); }

/* ---- ヒーロー：PCは現状維持（gapだけグリッド化＝見た目はほぼ不変）---- */
.hero-overlay{ gap:var(--s-2); }
.hero-sub{ white-space:nowrap; }   /* サブタイトルを常に2行で固定（行内折返し無し）*/

/* ---- ホーム：セクション間を約48pxのリズムに（隣接padの合計）---- */
.home-cats-sec{ padding:var(--s-4) 20px var(--s-3); }
.home-strip{ padding:var(--s-3) 20px; }
.usage{ padding:var(--s-6) 0; }
.taxo{ padding:var(--s-3) 20px var(--s-4); }
.follow{ padding:var(--s-3) 20px var(--s-8); }

/* セクション内部の縦リズム */
.see-all-wrap{ margin:var(--s-3) auto 0; }
.home-strip .grid{ padding:var(--s-2) 0 0; }   /* ホームの帯はグリッド下余白を持たせない */
.cat-cards .tiles{ margin-top:var(--s-1); }
.tiles{ gap:var(--s-2) var(--s-1); margin:var(--s-1) auto 0; }
.follow-lead{ margin:var(--s-1) 0 var(--s-3); }
.follow-btns{ gap:var(--s-3); }
.taxo-group{ padding:var(--s-2) 0; }

/* ---- 一覧グリッド / ページャ ---- */
.grid{ gap:var(--s-2); padding:var(--s-2) 0 var(--s-6); }
.count-line{ margin:var(--s-2) 0 var(--s-1); }
.pager{ margin:var(--s-4) 0 var(--s-1); }

/* ---- サブページ共通（about / terms / privacy / request / materials）---- */
.terms{ padding:var(--s-6) 0; }
.terms-card{ padding:var(--s-4); }
.terms-card h3{ margin:var(--s-3) 0 var(--s-1); }
.terms-card h3:first-child{ margin-top:0; }
.usage .sub{ margin-bottom:var(--s-4); }
.usage-grid{ gap:var(--s-3); }
.ucard{ padding:var(--s-3); }
.faq{ margin-top:var(--s-6); }

/* フォーム */
.form{ padding:var(--s-4); }
.form .desc{ margin-bottom:var(--s-3); }
.field{ margin-bottom:var(--s-2); }
.form-actions{ margin-top:var(--s-3); }

/* プレビューモーダル（余白の階層だけ整える・2カラム構造は不変）*/
.modal .info{ padding:var(--s-4); }
.modal .info .tags{ margin:var(--s-2) 0 var(--s-3); }

/* フッター */
footer.site{ padding:var(--s-6) 0; }
footer.site .logo{ margin-bottom:var(--s-2); }
footer.site .fnav{ margin:var(--s-3) 0; }

/* =================================================================
   スマホ（〜820px）：余白を一段ゆったりに。呼吸感と上品さを優先
   ================================================================= */
@media(max-width:820px){
  /* ヒーロー：タイトル周囲24 / 説明16 / ボタン24 / 検索32 */
  .hero-overlay{ gap:0; padding:var(--s-3) var(--s-3) 0; }
  .hero-title{ line-height:1.4; }
  .hero-sub{ margin-top:var(--s-2); font-size:clamp(13px,3.6vw,15px); line-height:1.7; }
  .hero-cta{ margin-top:var(--s-3); }
  .hero-search{ padding:var(--s-4) var(--s-2) 0; }

  /* 検索バー直下のセクションは少し大きめの天余白で間を取る */
  .home-cats-sec{ padding:var(--s-6) 20px var(--s-3); }
  .follow{ padding:var(--s-3) 20px var(--s-6); }

  /* 見出し階層（スマホ）*/
  .sec-title{ font-size:1.2rem; }
  .sec-sub{ font-size:.88rem; }
}

/* =================================================================
   スマホ（〜767px）専用：余白の「場所」を区切りに集中させる
   （2026-06-22 追記 / PC・タブレットには一切影響させない）
   方針: 量を均等に増やさず、情報のまとまりの境目に余白を置く。
   各セクションは「天を大きく・地を0」にして、区切りの余白を
   すべて“次のタイトルの上”へ集約する。
   ================================================================= */
@media(max-width:767px){
  /* ① ボタン群 → 検索バー（48-64）*/
  .hero-search{ padding:64px var(--s-2) 0; }

  /* ② 検索バー → 「カテゴリから探す」（56-72）*/
  #home-landing .home-cats-sec{ padding:72px 20px 0; }

  /* ③【最重要】前のカード群 → 次のタイトル（約120px）
        ＃home-landing を付けて他ルールに必ず勝たせる（保険）        */
  #home-landing .home-strip{ padding:120px 20px 0; }
  #home-landing .usage{ padding:120px 0 96px; }
  #home-landing .taxo{ padding:80px 20px 0; }
  #home-landing .follow{ padding:80px 20px 56px; }

  /* ⑤ タイトル周辺のメリハリ：上は広く（=セクション天）/ 下はやや狭め16 */
  .sec-title{ margin:0 0 var(--s-2); }
  .cat-cards .tiles{ margin-top:0; }   /* タイトル→カテゴリ一覧 を16pxに */
  .home-strip .grid{ padding-top:0; }  /* タイトル→カード一覧 を16pxに */
  .see-all-wrap{ margin:var(--s-3) auto 0; } /* カード一覧→もっと見る 24px */
  #home-landing .see-all-wrap{ margin-top:50px; } /* カード一覧→「すべてのイラストをみる」を50px */

  /* 説明文を持つセクション（使い方／SNS）は「タイトル↓16 説明↓24」 */
  .usage h2{ margin-bottom:var(--s-2); }
  .usage .sub{ margin-bottom:var(--s-3); }
  .follow-lead{ margin:0 0 var(--s-3); }

  /* ⑥ イラスト一覧はスマホ全幅で必ず2列を維持（間隔16px）*/
  .grid{ grid-template-columns:repeat(2,1fr); gap:var(--s-2); }
}

/* =================================================================
   イラスト個別ページ /i/{id}/ ＆ モーダル内の説明・関連（2026-06-22 追記）
   既存の配色・余白トークンに合わせ、シンプルさを維持
   ================================================================= */
.detail-page{ padding:var(--s-6) 0 var(--s-8); }
.detail-page .wrap{ max-width:960px; }
.crumb{ font-size:.8rem; color:var(--ink-soft); margin-bottom:var(--s-3); display:flex; flex-wrap:wrap; gap:var(--s-1); align-items:center; }
.crumb a{ color:var(--ink-soft); text-decoration:none; }
.crumb a:hover{ color:var(--teal); }
.crumb span{ color:var(--line); }
.detail-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s-4); align-items:start; }
.detail-img{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:var(--s-3); display:flex; align-items:center; justify-content:center; }
.detail-img img{ max-width:100%; height:auto; display:block; }
.detail-meta h1{ font-family:var(--font-head); font-size:1.5rem; line-height:1.4; margin:var(--s-1) 0 var(--s-2); color:var(--ink); }
.detail-meta .tags{ margin-bottom:var(--s-3); }
.detail-dl{ margin-bottom:var(--s-2); }
.detail-dl .btn{ width:100%; }
.detail-sec{ margin-top:var(--s-6); }
.detail-sec h2{ font-family:var(--font-head); font-size:1.15rem; color:var(--ink); margin:0 0 var(--s-2); }
.detail-desc{ font-size:.95rem; line-height:1.9; color:var(--ink-soft); max-width:760px; }
.detail-uses{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s-1); }
.detail-uses li{ font-size:.85rem; color:var(--teal-deep); background:var(--teal-soft); border-radius:999px; padding:6px 14px; }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }
.rel-card{ text-decoration:none; color:var(--ink); }
.rel-thumb{ display:block; background:var(--paper); border:1px solid var(--line); border-radius:14px; aspect-ratio:1/1; overflow:hidden; }
.rel-thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.rel-name{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:var(--s-1); line-height:1.5; }
.rel-card:hover .rel-thumb{ border-color:var(--teal); }
.back-all{ margin-top:var(--s-6); }
.back-all a{ color:var(--teal); text-decoration:none; font-size:.9rem; }

/* モーダル内：このイラストについて（アコーディオン）/ 利用シーン / 関連 */
.about-acc{ margin:var(--s-2) 0 0; border-top:1px solid var(--line); padding-top:12px; }
.about-acc summary{ cursor:pointer; font-size:.9rem; font-weight:700; color:var(--ink); list-style:none; display:flex; align-items:center; justify-content:space-between; }
.about-acc summary::-webkit-details-marker{ display:none; }
.about-acc summary::after{ content:'▼'; font-size:.62rem; color:var(--ink-soft); transition:transform .2s; }
.about-acc[open] summary::after{ transform:rotate(180deg); }
.about-acc #mDesc{ font-size:.88rem; line-height:1.85; color:var(--ink-soft); margin:12px 0 0; }
.modal .uses{ margin-top:var(--s-2); display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.modal .uses .uses-h{ width:100%; font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:2px; }
.modal .use-chip{ font-size:.78rem; color:var(--teal-deep); background:var(--teal-soft); border-radius:999px; padding:4px 10px; }
.modal .related{ margin-top:var(--s-3); border-top:1px solid var(--line); padding-top:var(--s-2); }
.modal .rel-h{ font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.modal .rel-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.modal .rel-item{ background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; }
.modal .rel-item img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:6px; }
.modal .rel-item span{ display:block; font-size:.72rem; color:var(--ink-soft); margin-top:5px; line-height:1.4; }
.modal .detail-link{ display:inline-block; margin-top:var(--s-2); font-size:.85rem; color:var(--teal); text-decoration:none; }