/* ============================================================
   IP CROSS (IP BANK) — Figma最新デザイン準拠 共通スタイル
   Figma: IPBANK (Qi877aNx7uWRmRxJPzdv3B) 2026-07-17時点
   ============================================================ */
:root{
  --red:#d42c36;          /* 基本レッド（ボタン・アクセント） */
  --red-deep:#bc041f;     /* 権利者カード・eyebrow */
  --red-vivid:#e40536;    /* 見出しアクセント */
  --red-cta:#dc0115;      /* CTA帯 */
  --pink:#f11664;         /* ヒーローボタン */
  --pink2:#fd4c56;
  --navy:#071959;         /* ヒーローテキスト */
  --ink:#26282b;
  --black:#000;
  --gray:#6b7280;
  --line:#d7d7d7;
  --bg-gray:#f7f8f8;
  --bg-footer:#f8f9fb;
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  color:var(--black);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
/* 左右余白: PC=50px / Tablet≒40px / SP=16px */
.inner{width:min(100% - clamp(32px,5.2vw,100px),1750px);margin-inline:auto;}

/* ============ ヘッダー（Figma Component 1） ============ */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid #eef0f3;
}
.site-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:82px;gap:20px;
}
.brand{display:flex;align-items:baseline;gap:14px;}
.brand-logo{height:24px;width:auto;}
.gnav{
  display:flex;align-items:stretch;align-self:stretch;gap:0;
  margin:0 auto 0 40px;font-size:13px;font-weight:700;position:relative;
}
.gnav-toggle,.gnav-find{
  display:none;align-items:center;gap:9px;
  height:46px;padding:0 20px;border:1px solid #cfd6dd;border-radius:26px;
  background:#fff;cursor:pointer;white-space:nowrap;flex:none;
  font-family:var(--font);font-size:13px;font-weight:700;color:#26282b;
  transition:background-color .2s,border-color .2s,color .2s;
}
.gnav-toggle::after{
  content:"";width:7px;height:7px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s,margin .2s;
}
.gnav-toggle:hover,.gnav-find:hover{background:#f1f3f5;border-color:#b9c2cc;}
.gnav-find{border:0;padding:0 28px;margin-left:16px;}
.gnav-find:hover{border:0;}
.gnav.is-open .gnav-toggle{border-color:var(--red);color:var(--red);}
.gnav.is-open .gnav-toggle::after{transform:rotate(225deg);margin-top:3px;}
.gnav-list{display:flex;align-items:stretch;gap:0;}
.gnav .gnav-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#8089a0;padding-right:20px;border-right:1px solid #e2e5ea;}
.gnav .gnav-label svg{width:16px;height:16px;color:var(--red);}
.gnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:#26282b;position:relative;padding:0 18px;white-space:nowrap;
  flex:none;min-width:118px;   /* 5カテゴリのボタン幅を均一に（最長「キャラクター」基準） */
  text-align:center;transition:background-color .2s,color .2s;
}
.gnav .gnav-ico{width:23px;height:23px;flex:none;}
/* カテゴリ別のナビ色（hover / 現在地）。各項目は自身のカテゴリ色で点灯 */
.gnav a[href*="category-vtuber"]{--gnav-c:#e01a83;--gnav-soft:#fdeaf4;}
.gnav a[href*="category-youtuber"]{--gnav-c:#e0212b;--gnav-soft:#fdeced;}
.gnav a[href*="category-anime"]{--gnav-c:#1877e4;--gnav-soft:#eaf2fd;}
.gnav a[href*="category-comic"]{--gnav-c:#469e1f;--gnav-soft:#eff8e9;}
.gnav a[href*="category-character"]{--gnav-c:#7c3aed;--gnav-soft:#f4efff;}
.gnav a[href*="category-game"]{--gnav-c:#ee7a12;--gnav-soft:#fdf3e7;}
.gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gnav-c,var(--red));transform:scaleX(0);transition:transform .2s;
}
.gnav a:hover{background-color:var(--gnav-soft,#fdeef3);color:var(--gnav-c,var(--red));}
.gnav a:hover::after{transform:scaleX(1);}
.gnav a.is-current{color:var(--gnav-c,var(--red));}
.gnav a.is-current::after{transform:scaleX(1);}
.gnav a.is-current:hover{background-color:var(--gnav-soft,#fdeef3);}
/* ハンバーガー／左ドロワー（SP専用・〜640px で表示。既定は非表示） */
.gnav-burger{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;padding:0;
  border:0;border-radius:11px;background:#fff;
  color:#26282b;cursor:pointer;
  transition:background-color .2s;
}
.gnav-burger:hover{background:#f1f3f5;}
.gnav-burger-bars{position:relative;}
.gnav-burger-bars,
.gnav-burger-bars::before,
.gnav-burger-bars::after{
  display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,background-color .15s ease;
}
.gnav-burger-bars::before,
.gnav-burger-bars::after{content:"";position:absolute;left:0;}
.gnav-burger-bars::before{top:-6px;}
.gnav-burger-bars::after{top:6px;}
.gnav.is-open .gnav-burger-bars{background:transparent;}
.gnav.is-open .gnav-burger-bars::before{transform:translateY(6px) rotate(45deg);}
.gnav.is-open .gnav-burger-bars::after{transform:translateY(-6px) rotate(-45deg);}
.gnav-drawer-head{display:none;}
.gnav-overlay{display:none;}
.header-actions{display:flex;align-items:center;gap:12px;}
.hbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 20px;border-radius:26px;
  font-size:13.5px;font-weight:700;white-space:nowrap;flex:none;
  transition:opacity .2s,background .2s;
}
.hbtn:hover{opacity:.85;}
.hbtn-company{background:var(--red);border:1.5px solid var(--red);color:#fff;}
.hbtn-holder{background:#fff;border:1.5px solid var(--red);color:var(--red);}
.hbtn-dl{background:#26282b;border:1.5px solid #26282b;color:#fff;}
.hbtn-dl svg{flex:none;}
/* 検索：ヘッダー右のアイコンボタン。押すとヘッダー全体を覆う全幅パネルを表示（js/header.js） */
.hs-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;padding:0;
  background:#1a1c1d;border:0;border-radius:50%;
  cursor:pointer;transition:background-color .2s;
}
.hs-btn img{width:20px;height:20px;filter:brightness(0) invert(1);}
.hs-btn:hover{background:#3a3d40;}
.hs-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
/* 全幅検索パネル（ヘッダーを覆うオーバーレイ） */
.header-search-panel{
  position:absolute;inset:0;z-index:20;background:#fff;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.header-search-panel.is-open{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s ease,transform .3s ease;
}
/* パネル内の検索フォーム（横幅は .inner に合わせる） */
.header-search{
  display:flex;align-items:center;gap:16px;
  width:min(100% - clamp(32px,5.2vw,100px),1750px);margin-inline:auto;
}
.hs-ico{width:22px;height:22px;flex:none;opacity:.7;}
.header-search input{
  flex:1;min-width:0;height:52px;padding:0 4px;
  border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;
  appearance:none;-webkit-appearance:none;outline:0;
  font-family:var(--font);font-size:18px;color:var(--ink);
  transition:border-color .2s;
}
.header-search input::-webkit-search-cancel-button{display:none;}
.header-search input::placeholder{color:#a9adb2;}
.header-search input:focus{border-bottom-color:var(--red);}
.hs-submit{
  flex:none;height:46px;padding:0 28px;border:0;border-radius:26px;
  background:var(--red);color:#fff;cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:opacity .2s;
}
.hs-submit:hover{opacity:.85;}
.hs-close{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:44px;height:44px;flex:none;padding:0;
  background:#fff;border:1px solid #cfd6dd;border-radius:50%;
  color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s;
}
.hs-close:hover{background:#f1f3f5;border-color:#b9c2cc;}
.hs-close::before,.hs-close::after{
  content:"";position:absolute;width:16px;height:2px;border-radius:2px;background:currentColor;
}
.hs-close::before{transform:rotate(45deg);}
.hs-close::after{transform:rotate(-45deg);}
/* JS無効時のフォールバック：検索ボタンにフォーカスするとパネルを開く（js/header.js が html.js を付与） */
html:not(.js) .site-header:has(.hs-btn:focus) .header-search-panel,
html:not(.js) .header-search-panel:focus-within{
  opacity:1;visibility:visible;transform:translateY(0);transition:none;
}
/* リサイズ／ブレークポイント切り替え中はヘッダー内のトランジションを止める。
   （js/header.js が html.is-resizing を一時付与。メディアクエリの切り替わりで
     ドロワーが一瞬開いて見えたり、.gnav a::after のカラーバーが
     意図せずアニメーションするのを防ぐ） */
html.is-resizing .site-header,
html.is-resizing .site-header *,
html.is-resizing .site-header *::before,
html.is-resizing .site-header *::after{
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .header-search-panel{transform:none;transition:opacity .01s linear,visibility 0s linear .01s;}
  .header-search-panel.is-open{transform:none;transition:opacity .01s linear;}
}

/* ============ パンくず ============ */
.breadcrumb{padding:18px 0 8px;}
.breadcrumb img{height:29px;width:auto;}
.breadcrumb-text{font-size:13px;color:#7b8494;font-weight:600;}
.breadcrumb-text a{color:#7b8494;}
.breadcrumb-text a:hover{color:var(--red);}
.breadcrumb-text .sep{margin:0 8px;color:#b6bcc7;}
.breadcrumb-text .cur{color:#333;}

/* ============ 見出し（Figmaセクション見出し） ============ */
.sec-title{
  font-size:clamp(38px,4.17vw,80px);
  font-weight:800;letter-spacing:.02em;line-height:1.15;
}
.sec-title .em{color:var(--red-vivid);}
.sec-title-sm{
  font-size:clamp(26px,2.08vw,40px);
  font-weight:800;letter-spacing:.02em;line-height:1.2;
}
.sec-title-sm .em{color:var(--red-vivid);}
.sec-lead{font-size:20px;font-weight:700;letter-spacing:.02em;margin-top:14px;}
.sec-lead .em{color:var(--red);}

/* ============ ボタン ============ */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:63px;padding:0 34px;border-radius:500px;
  font-size:20px;font-weight:700;letter-spacing:.02em;
  transition:opacity .2s,transform .2s;
}
.btn-pill:hover{opacity:.88;}
.btn-pill .arr{font-weight:400;font-size:22px;line-height:1;transform:translateY(-1px);}
.btn-red{background:var(--red);border:2px solid var(--red);color:#fff;}
.btn-white-red{background:#fff;border:2px solid var(--red);color:var(--red);}
.btn-grad{
  background:linear-gradient(72deg,#f11664 7%,#fd4c56 95%);
  color:#fff;border:0;
}
.btn-ghost-pink{background:#fff;border:2px solid #f21964;color:var(--pink);}

/* ============ フッター（Figma Component 3） ============ */
/* コンテンツエリアとの境目に余白を追加（全画面サイズ共通） */
.site-footer{background:var(--bg-footer);margin-top:clamp(40px,5vw,80px);}
.rainbow{
  height:10px;
  background:linear-gradient(90deg,#e6212a 0%,#f2711c 15%,#f7c948 30%,#3cb44b 48%,#2196d9 66%,#3f51b5 82%,#9c27b0 100%);
}
.footer-main{
  width:min(100% - clamp(32px,5.2vw,100px),1750px);margin-inline:auto;
  display:flex;gap:48px;padding:64px 0 72px;flex-wrap:wrap;
}
.footer-brand{flex:0 0 300px;}
.footer-brand .f-logo{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;flex-direction:column;}
.footer-brand .f-logo img:first-child{height:28px;width:auto;}
.footer-brand .f-logo img:last-child{height:16px;width:auto;}
.footer-brand p{font-size:14px;font-weight:700;line-height:1.9;margin:16px 0 22px;}
.f-social{display:flex;gap:12px;}
.f-social a{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid #e2e5ea;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-size:15px;font-weight:800;transition:border-color .2s;
}
.f-social a:hover{border-color:var(--red);color:var(--red);}
.f-social svg{width:18px;height:18px;fill:currentColor;}
.footer-cols{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;min-width:0;
}
.fcol{border-left:1px solid #e4e7ec;padding-left:28px;}
.fcol h4{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;margin-bottom:22px;
}
.fcol h4 svg{width:22px;height:22px;flex:none;}
.fcol li{margin-bottom:14px;font-size:13.5px;font-weight:600;}
.fcol li a{display:flex;gap:8px;align-items:baseline;color:#26282b;}
.fcol li a:hover{color:var(--red);}
.fcol li .soon{display:flex;gap:8px;align-items:baseline;color:#a8aeb9;cursor:default;}
.fcol li .soon .gt{color:#c3c8d1;}
.fcol li .gt{font-size:11px;font-weight:800;flex:none;}
.fcol-red h4 svg,.fcol-red .gt{color:#e6212a;}
.fcol-blue h4 svg{color:#2196d9;} .fcol-blue .gt{color:#e6212a;}
.fcol-green h4 svg,.fcol-green .gt{color:#3cb44b;}
.fcol-orange h4 svg,.fcol-orange .gt{color:#f2711c;}
.footer-bottom{background:#26282b;color:#fff;}
.footer-bottom .fb-inner{
  width:min(100% - clamp(32px,5.2vw,100px),1750px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  min-height:63px;font-size:13px;font-weight:500;flex-wrap:wrap;gap:8px;padding:10px 0;
}
.footer-bottom nav{display:flex;align-items:center;gap:20px;}
.footer-bottom nav .sep{color:rgba(255,255,255,.5);font-size:12px;}
.footer-bottom a:hover{text-decoration:underline;}
.footer-bottom .copy{font-size:12px;letter-spacing:.03em;}

/* ============ サブページ共通 ============ */
.page-head{padding:72px 0 64px;}
.page-head .sec-title{margin-top:20px;}
.page-head .page-sub{font-size:18px;font-weight:600;color:#444;margin-top:22px;max-width:900px;}
.section{padding:56px 0;}
.section.band{background:var(--bg-gray);}
.eyebrow{
  font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--red-deep);
  margin-bottom:12px;text-transform:uppercase;
}
.h2{font-size:clamp(24px,1.77vw,34px);font-weight:800;letter-spacing:.04em;margin-bottom:26px;}
.h2 .em{color:var(--red-vivid);}
.grid{display:grid;gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:34px 30px;box-shadow:0 4px 28px rgba(0,0,0,.06);
}
.card .num{font-size:30px;font-weight:800;color:var(--red);margin-bottom:8px;}
.card h3{font-size:20px;font-weight:800;margin-bottom:10px;letter-spacing:.02em;}
.card p{font-size:15px;color:#444;}
.check-list li{
  display:flex;gap:12px;align-items:baseline;
  font-size:19px;font-weight:500;margin-bottom:12px;
}
.check-list .ck{color:var(--red);font-weight:800;flex:none;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
.tbl th,.tbl td{padding:16px 20px;border-bottom:1px solid #eceff3;font-size:15px;text-align:left;vertical-align:top;}
.tbl th{background:#faf7f7;font-weight:800;width:220px;white-space:nowrap;}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0;}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.step{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 20px;position:relative;
}
.step .sn{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--red-deep);margin-bottom:8px;}
.step h3{font-size:17px;font-weight:800;margin-bottom:6px;}
.step p{font-size:13.5px;color:#555;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;}
.faq-item summary{
  cursor:pointer;padding:20px 24px;font-size:16px;font-weight:800;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"▾";color:var(--red);flex:none;transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(180deg);}
.faq-item .ans{padding:0 24px 20px;font-size:15px;color:#444;}
.faq-item .ans b{color:var(--red-deep);}
.center{text-align:center;}
.mt8{margin-top:8px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}.mt40{margin-top:40px;}
.note{font-size:12.5px;color:#8a93a3;margin-top:14px;}

/* フォーム（Figma contact-form 準拠） */
.form-lead{font-size:19px;font-weight:800;text-align:center;margin-bottom:44px;}
.form-block{max-width:980px;margin-inline:auto;}
.form-row{margin-bottom:30px;}
.form-row label{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;margin-bottom:10px;}
.required{
  background:var(--red);color:#fff;font-size:12px;font-weight:700;
  border-radius:4px;padding:1px 8px;line-height:1.6;flex:none;
}
.form-row input[type=text],.form-row input[type=tel],.form-row input[type=email],
.form-row select,.form-row textarea{
  width:100%;height:52px;border:1px solid #cfd6dd;border-radius:8px;background:#fff;
  padding:0 18px;font-family:var(--font);font-size:15px;outline-color:var(--red);
}
.form-row textarea{height:220px;padding:14px 18px;resize:vertical;}
.form-agree{display:flex;justify-content:center;align-items:center;gap:10px;font-size:15px;font-weight:700;margin:34px 0 26px;}
.form-agree a{color:var(--red);text-decoration:underline;}
.form-submit{display:flex;justify-content:center;}
.form-submit button{
  width:280px;height:60px;border-radius:500px;background:var(--red);color:#fff;
  border:0;font-family:var(--font);font-size:17px;font-weight:800;cursor:pointer;transition:opacity .2s;
}
.form-submit button:hover{opacity:.85;}
.form-turnstile{display:flex;justify-content:center;margin:0 auto 26px;max-width:420px;}
.form-turnstile .cf-turnstile{width:100%;}

/* 法務ページ */
.legal h2{font-size:20px;font-weight:800;margin:38px 0 12px;padding-left:14px;border-left:4px solid var(--red);}
.legal p,.legal li{font-size:15px;color:#333;margin-bottom:10px;}
.legal ol{padding-left:24px;}
.legal ol li{list-style:decimal;}
.legal ul{padding-left:0;}
.legal ol li ul{margin:8px 0 4px;}
.legal ol li ul li{list-style:none;margin-bottom:6px;}
.legal .updated{color:#8a93a3;font-size:13px;margin-top:34px;}
.legal-note{
  background:#fdf3f4;border:1px solid #f3c9cd;border-radius:12px;
  padding:16px 20px;font-size:13.5px;color:#8d2530;margin:26px 0;
}

/* ============ レスポンシブ ============ */
@media(max-width:1280px){
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
}
/* ---- PC（1025〜1459px）: 6カテゴリーは格納せず常に1段で表示。
        1025px→1460px の間で各値を 1460px以上の基準値へ線形補間し、
        狭くなるほどボタン幅・間隔・文字・アイコンを詰めて 1025px まで収める
        （--gnav-d = 現在の幅 - 1025px。1024px以下はハンバーガー＋左ドロワー） ---- */
@media(min-width:1025px) and (max-width:1459px){
  .site-header{--gnav-d:calc(100vw - 1025px);}
  .site-header .header-inner{gap:clamp(10px,calc(10px + var(--gnav-d)*.023),20px);}
  .gnav{margin:0 auto 0 clamp(12px,calc(12px + var(--gnav-d)*.0644),40px);}
  .gnav a{
    min-width:clamp(88px,calc(88px + var(--gnav-d)*.069),118px);
    padding:0 clamp(6px,calc(6px + var(--gnav-d)*.0276),18px);
    font-size:clamp(12px,calc(12px + var(--gnav-d)*.0023),13px);
  }
  .gnav .gnav-ico{
    width:clamp(20px,calc(20px + var(--gnav-d)*.0069),23px);
    height:clamp(20px,calc(20px + var(--gnav-d)*.0069),23px);
  }
}
/* ---- Tablet（641〜1024px）: ロゴ横に［探す］。カテゴリーはSPと同じ左ドロワー（下の〜1024px） ---- */
@media(min-width:641px) and (max-width:1024px){
  .site-header .header-inner{height:auto;min-height:72px;padding:10px 0;gap:12px;}
  .brand{flex:none;}
  .gnav-find{display:inline-flex;height:40px;padding:0 28px;margin-left:16px;}
  /* ハンバーガーは［探す］と高さを揃える */
  .gnav-burger{width:40px;height:40px;border-radius:12px;}
}
/* ---- Tablet/SP（〜1024px）: カテゴリーはハンバーガー＋左スライドインのドロワーに格納
        （開閉は js/header.js が .gnav.is-open / body.is-nav-open を付与） ---- */
@media(max-width:1024px){
  /* .gnav は箱を持たず、ハンバーガー／ドロワー／オーバーレイを直接扱う */
  .gnav{display:contents;}
  /* ［カテゴリー］ボタンはハンバーガーに置き換える（［探す］はタブレットのみ表示） */
  .gnav-toggle{display:none;}
  .gnav-burger{display:inline-flex;order:-1;}
  /* オーバーレイ（ドロワーの背面） */
  .gnav-overlay{
    display:block;position:fixed;inset:0;z-index:190;
    background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .gnav.is-open .gnav-overlay{opacity:1;visibility:visible;}
  /* 左ペイン（ドロワー本体） */
  .gnav-list{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:0;left:0;z-index:200;
    width:min(80vw,300px);height:100vh;height:100dvh;
    padding:0 0 env(safe-area-inset-bottom);
    background:#fff;box-shadow:0 0 40px rgba(0,0,0,.18);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    visibility:hidden;transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s ease;
  }
  .gnav.is-open .gnav-list{visibility:visible;transform:translateX(0);}
  /* ドロワー見出し＋閉じるボタン */
  .gnav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:1;flex:none;
    padding:13px 14px 13px 18px;background:#fff;border-bottom:1px solid #eef0f3;
  }
  .gnav-drawer-title{font-size:11.5px;font-weight:800;letter-spacing:.09em;color:#8089a0;}
  .gnav-close{
    display:flex;align-items:center;justify-content:center;position:relative;
    width:34px;height:34px;flex:none;padding:0;border:0;border-radius:50%;
    background:#f4f6f8;color:#26282b;cursor:pointer;
  }
  .gnav-close::before,.gnav-close::after{
    content:"";position:absolute;width:15px;height:2px;border-radius:2px;background:currentColor;
  }
  .gnav-close::before{transform:rotate(45deg);}
  .gnav-close::after{transform:rotate(-45deg);}
  /* 各メニュー項目を縦向きに配置 */
  .gnav a{
    flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;
    width:100%;min-width:0;flex:none;
    padding:15px 18px;font-size:14px;text-align:left;
    border-bottom:1px solid #f2f4f7;
  }
  .gnav .gnav-ico{width:21px;height:21px;color:var(--gnav-c,var(--red));}
  /* アクセントバーは下線ではなく左端の縦バーに */
  .gnav a::after{
    left:0;right:auto;top:0;bottom:0;width:4px;height:auto;
    transform:scaleY(0);transform-origin:center;
  }
  .gnav a:hover::after,
  .gnav a.is-current::after{transform:scaleY(1);}
  .gnav a.is-current{background-color:var(--gnav-soft,#fdeef3);}
  /* ドロワーを開いている間は背面をスクロールさせない */
  body.is-nav-open{overflow:hidden;}
  .header-actions{margin-left:auto;}
}
@media(max-width:940px){
  .hbtn{height:40px;padding:0 14px;font-size:12px;gap:5px;}
  /* 検索ボタンもボタン高さに合わせて縮小（サイズを揃える） */
  .hs-btn{width:40px;height:40px;}
  .header-search input{height:48px;font-size:17px;}
  .hs-submit{height:40px;padding:0 20px;font-size:12.5px;}
  .hs-close{width:40px;height:40px;}
}
@media(max-width:840px){
  .header-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:6px 0;}
  .header-search{gap:12px;}
}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .tbl th{width:130px;}
}
/* ---- SP（〜640px）: ヘッダーを1段のコンパクト表示に（カテゴリーは上の左ドロワー） ---- */
@media(max-width:640px){
  .site-header .header-inner{flex-wrap:nowrap;height:auto;min-height:60px;padding:10px 0;gap:8px;}
  /* ロゴは残り幅に応じて縮む（アスペクト比は維持） */
  .brand{flex:0 1 auto;min-width:0;}
  .brand-logo{height:17px;max-width:100%;object-fit:contain;object-position:left center;}
  .header-actions{flex-wrap:nowrap;margin-left:auto;padding:0;gap:8px;}
  .hbtn{height:36px;padding:0 12px;font-size:11.5px;}
  .hs-btn{width:36px;height:36px;}
  .hs-btn img{width:17px;height:17px;}
  /* 検索パネル：SPでも横いっぱい。入力は16px（iOSの自動ズーム回避） */
  .header-search{gap:10px;}
  .hs-ico{width:18px;height:18px;}
  .header-search input{height:44px;font-size:16px;}
  .hs-submit{height:36px;padding:0 14px;font-size:12px;border-radius:20px;}
  .hs-close{width:36px;height:36px;}
  .hs-close::before,.hs-close::after{width:14px;}
}
@media(max-width:600px){
  .g4,.footer-cols,.steps{grid-template-columns:1fr;}
  .fcol{border-left:0;padding-left:0;border-top:1px solid #e4e7ec;padding-top:20px;}
  .btn-pill{height:54px;font-size:16px;padding:0 24px;}
}
/* ---- SP（〜640px）: 余白・文字サイズの最適化 ---- */
@media(max-width:640px){
  .sec-title{font-size:clamp(28px,8vw,38px);}
  .sec-title-sm{font-size:clamp(22px,6.4vw,26px);}
  .sec-lead{font-size:15px;margin-top:10px;}
  .page-head{padding:44px 0 36px;}
  .page-head .page-sub{font-size:15px;margin-top:16px;}
  .section{padding:40px 0;}
  .card{padding:24px 20px;border-radius:20px;}
  .card h3{font-size:18px;}
  .check-list li{font-size:15.5px;}
  .tbl th,.tbl td{padding:12px 12px;font-size:13.5px;}
  .tbl th{width:96px;white-space:normal;}
  .breadcrumb-text{font-size:11.5px;}
  .form-lead{font-size:16px;margin-bottom:30px;}
  .form-row textarea{height:160px;}
  .footer-main{gap:28px;padding:40px 0 44px;}
  .footer-brand{flex:1 1 100%;}
  .footer-cols{flex:1 1 100%;}
  .footer-bottom .fb-inner{justify-content:center;text-align:center;}
  .footer-bottom nav{gap:12px;flex-wrap:wrap;justify-content:center;}
}

/* ===== IPサムネイル共通（1200:630 OGP比率枠） =====
   方針: 画像は絶対にクロップしない。枠内に原本全体を等比で収め（object-fit:contain）、
   余白は白。角丸で画像の隅が欠けないよう内側に --ipimg-pad ぶんの余白を確保する。 */
.ipimg{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:1200/630;overflow:hidden;background:#fff;isolation:isolate;padding:var(--ipimg-pad,4px);}
.ipimg>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;}
/* 1:1枠（YouTuber/VTuberのカテゴリTOP・IP詳細） */
.ipimg.is-1x1{aspect-ratio:1/1;}