/* ガイドラインページ：トップと同じ見た目（styles.css の色・書体・部品を使う）。
   文章と構成は、旧いページのまま。 */
.g-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:1.6vw var(--pad)}
.g-bar .logo{display:inline-block;background:var(--k);color:#fff;padding:.5em .9em;font:900 max(15px,1.4vw)/1 var(--fd);text-decoration:none}
.g-bar .mid{font:800 13px/1 var(--fd);color:var(--acc2)}
.gsv{display:block;height:.7em;width:auto;max-width:100%}

/* ── 冒頭 ── */
.g-hero{position:relative;isolation:isolate;padding:3.4vw var(--pad) 4vw;border-top:1px solid var(--k)}
.g-hero{--gh:url(assets/gh-guidelines.svg);--gr:11.843}
.g-hero::after{content:"";position:absolute;z-index:-1;right:-1vw;top:50%;translate:0 -50%;height:min(clamp(67px,11.9vw,189px),calc(96vw / var(--gr)));aspect-ratio:var(--gr);background:var(--gh) no-repeat right center/100% 100%;pointer-events:none}
.g-eyebrow{font:800 max(12px,.85vw)/1.4 var(--fd);color:var(--acc2)}
.g-hero h1{margin-top:.8vw;display:flex;flex-direction:column;gap:.5vw}
.g-hero h1 span:first-child{font:900 clamp(40px,5.6vw,92px)/1.08 var(--fb);text-shadow:3px 0 0 var(--acc2),-3px 0 0 var(--acc)}
.g-hero h1 span[lang="en"] img{display:block;height:clamp(16px,1.6vw,22px);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.g-lead{max-width:44em;margin-top:1.6vw;font:700 max(14px,1.05vw)/1.95 var(--fb)}
.g-updated{display:flex;align-items:center;gap:.7em;margin-top:1.2vw;font:800 12px/1.6 var(--fd);color:var(--mute)}
.g-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw;margin-top:2.6vw}
.g-principles>div{padding-top:1vw;border-top:2px solid var(--k)}
.g-principles b{display:flex;align-items:center;gap:.6em;font:900 max(13px,.95vw)/1.4 var(--fd)}
.g-principles b::before{content:"";flex:none;width:.6em;height:.6em;background:var(--acc2);rotate:45deg}
.g-principles span{display:block;margin-top:.4vw;font:700 max(13px,.95vw)/1.8 var(--fb);color:var(--mute)}

/* ── 本文（左に目次、右に4つの項目） ── */
.g-body{display:grid;grid-template-columns:minmax(180px,.26fr) minmax(0,1fr);gap:4vw;padding:0 var(--pad) 4vw;border-top:1px solid var(--k)}
.g-index{position:sticky;top:2vw;align-self:start;padding-top:2.6vw}
.g-index .lbl{font:800 12px/1 var(--fd);color:var(--acc2);margin-bottom:1vw}
.g-index a{display:flex;align-items:center;gap:.6em;padding:.45em 0;border-bottom:1px solid var(--k);font:800 max(13px,.95vw)/1.5 var(--fb);text-decoration:none}
.g-index a::before{content:"";flex:none;width:.55em;height:.55em;background:var(--acc2);rotate:45deg}
.g-index a:hover{background:var(--acc-soft)}
.g-main>section{padding:2.6vw 0 2vw;border-bottom:2px solid var(--k)}
.g-main>section:first-child{border-top:0}
.g-sec-h{display:flex;align-items:flex-end;gap:1.6vw}
.g-sec-h .no{font:900 clamp(44px,5vw,80px)/.9 var(--fd);color:var(--acc2)}
.g-sec-h .no .gsv{margin-block:.1em}
.g-sec-h small{display:block;font:800 max(12px,.85vw)/1 var(--fd);color:var(--acc2)}
.g-sec-h h2{margin-top:.4vw;font:900 clamp(24px,2.6vw,42px)/1.25 var(--fb);text-shadow:2px 0 0 var(--acc2),-2px 0 0 var(--acc)}
.g-sec-b{margin-top:1.6vw}
.g-sec-b>p{font:700 max(14px,1.05vw)/1.9 var(--fb)}
.g-sec-b ul{margin-top:1.2vw;border-top:1px solid var(--k)}
.g-sec-b li{position:relative;padding:.9vw 0 .9vw 1.4em;border-bottom:1px solid var(--k);font:500 max(14px,1vw)/1.95 var(--fb)}
.g-sec-b li::before{content:"";position:absolute;left:0;top:calc(.9vw + .8em);width:.55em;height:.55em;background:var(--acc2);rotate:45deg}
.g-sec-b strong{font-weight:900}
.tagx{display:inline-block;padding:.05em .7em .1em;border:1.5px solid var(--k);border-radius:999px;background:var(--acc2-soft);font:800 .9em/1.6 var(--fd)}

/* ── 判断に迷ったら／NEXT ── */
.g-doubt,.g-next{padding:3.4vw var(--pad);border-top:1px solid var(--k)}
.g-doubt .lbl,.g-next .lbl{display:flex;align-items:center;gap:.8em;font:800 max(12px,.85vw)/1.4 var(--fd);color:var(--acc2)}
.g-doubt .lbl span,.g-next .lbl span{font:800 max(12px,.85vw)/1.4 var(--fb);letter-spacing:.06em}
.g-doubt h2,.g-next h2{margin-top:.8vw;max-width:26em;text-wrap:balance;word-break:auto-phrase;font:900 clamp(26px,3.2vw,52px)/1.3 var(--fb);text-shadow:3px 0 0 var(--acc2),-3px 0 0 var(--acc)}
.g-doubt p,.g-next p{max-width:44em;margin-top:1.4vw;font:700 max(14px,1.05vw)/1.95 var(--fb)}
.g-mail{display:inline-flex;align-items:center;gap:1.6em;flex-wrap:wrap;margin-top:1.8vw;padding:.9em 1.6em;border:2px solid var(--k);border-radius:999px;background:var(--acc);color:var(--k);text-decoration:none;box-shadow:3px 3px 0 var(--k);transition:translate .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.g-mail:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--k)}
.g-mail span:first-child{font:800 12px/1 var(--fd)}
.g-mail span:last-child{font:900 max(15px,1.15vw)/1.2 var(--fb)}
.g-next ul{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8vw}
.g-next li a{display:inline-flex;align-items:center;min-height:44px;padding:.6em 1.5em;border:2px solid var(--k);border-radius:999px;background:var(--paper);font:800 14px/1.2 var(--fb);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.g-next li a:hover{background:var(--acc);color:var(--k)}

/* ── フッター ── */
.g-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:2.6vw var(--pad);border-top:1px solid var(--k);font:700 14px var(--fd);color:var(--mute)}
.g-foot a{display:inline-flex;align-items:center;gap:.5em;color:var(--k);font-weight:800;text-decoration:none;border-bottom:2px solid var(--acc2)}

@media(max-width:900px){
  .g-hero{padding:8vw var(--pad) 9vw}
  .g-hero h1{margin-top:12px;gap:8px}
  .g-lead{margin-top:20px}
  .g-updated{margin-top:14px}
  .g-principles{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .g-principles>div{padding-top:14px}
  .g-principles span{margin-top:6px}
  .g-body{grid-template-columns:1fr;gap:0}
  .g-index{position:static;padding-top:28px}
  .g-index .lbl{margin-bottom:12px}
  .g-main>section{padding:32px 0 24px}
  .g-sec-h{gap:16px}
  .g-sec-h h2{margin-top:6px}
  .g-sec-b{margin-top:20px}
  .g-sec-b ul{margin-top:16px}
  .g-sec-b li{padding:12px 0 12px 1.4em}
  .g-sec-b li::before{top:calc(12px + .8em)}
  .g-doubt,.g-next{padding:12vw var(--pad)}
  .g-doubt h2,.g-next h2{margin-top:12px}
  .g-doubt p,.g-next p{margin-top:16px}
  .g-mail{margin-top:22px}
  .g-next ul{margin-top:22px}
  .g-foot{padding:32px var(--pad)}
}