/* Sifr Ghibli Scene Quiz — help page 0.6.92 */
:root{
  --sgqh-paper:#f7f1e3;
  --sgqh-paper-deep:#eee1cb;
  --sgqh-ink:#1c2823;
  --sgqh-muted:#68716c;
  --sgqh-green:#254b3f;
  --sgqh-green-dark:#173a31;
  --sgqh-gold:#b08a43;
  --sgqh-gold-soft:#d6bd83;
  --sgqh-line:rgba(118,89,38,.22);
  --sgqh-white:rgba(255,252,244,.72);
}

html.sgq-help-html{
  margin:0;
  min-height:100%;
  background:var(--sgqh-paper);
  scroll-behavior:smooth;
}

body.sgq-help-page{
  margin:0!important;
  min-height:100vh;
  color:var(--sgqh-ink);
  background-color:var(--sgqh-paper);
  background-image:
    radial-gradient(900px 520px at 50% 0,rgba(255,255,255,.62),rgba(255,255,255,0) 72%),
    url('../images/paper-texture.webp');
  background-repeat:no-repeat,repeat;
  background-size:auto,512px 512px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.sgq-help-page *{box-sizing:border-box}
body.sgq-help-page a{color:inherit}

.sgqh-shell{min-height:100vh}

.sgqh-topbar{
  width:min(calc(100% - 56px),1180px);
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--sgqh-line);
}

.sgqh-brand,
.sgqh-back{
  text-decoration:none!important;
  color:#18251f!important;
}

.sgqh-brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:.12em;
}

.sgqh-back{
  position:relative;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  padding:10px 0;
}

.sgqh-back::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:4px;
  height:1px;
  background:var(--sgqh-green);
  transition:right .18s ease;
}
.sgqh-back:hover::after{right:0}

.sgqh-main{
  width:min(calc(100% - 40px),860px);
  margin:0 auto;
  padding:68px 0 90px;
}

.sgqh-hero{
  text-align:center;
  padding:18px 20px 54px;
}

.sgqh-eyebrow{
  margin:0 0 14px;
  color:var(--sgqh-gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.24em;
}

.sgqh-hero h1{
  margin:0;
  padding:0;
  border:0;
  color:#13241e;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:clamp(34px,5vw,54px);
  font-weight:600;
  line-height:1.28;
  letter-spacing:.015em;
}

.sgqh-lead{
  width:min(100%,660px);
  margin:24px auto 30px;
  color:#59645e;
  font-size:15px;
  line-height:2;
  text-align:left;
}

.sgqh-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(100%,330px);
  min-height:56px;
  padding:14px 28px;
  border:1px solid #b99245;
  border-radius:8px;
  background:linear-gradient(180deg,#285747,#183d33);
  color:#fffdf6!important;
  box-shadow:0 12px 28px rgba(31,57,48,.14),inset 0 0 0 1px rgba(255,220,139,.16);
  text-decoration:none!important;
  font-size:15px;
  font-weight:760;
  letter-spacing:.04em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.sgqh-cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#306251,#1c4539);
  box-shadow:0 16px 34px rgba(31,57,48,.2),inset 0 0 0 1px rgba(255,220,139,.2);
}

.sgqh-toc{
  margin:0 0 58px;
  padding:25px 28px 23px;
  border:1px solid var(--sgqh-line);
  border-radius:12px;
  background:rgba(255,251,240,.48);
  box-shadow:0 8px 24px rgba(95,70,31,.035);
}

.sgqh-toc-title{
  margin:0 0 13px;
  color:var(--sgqh-green);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.06em;
}

.sgqh-toc ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 30px;
  margin:0;
  padding:0;
  list-style:none;
}
.sgqh-toc li{margin:0;padding:0}
.sgqh-toc a{
  display:inline-block;
  color:#53615a!important;
  text-decoration:none!important;
  font-size:13px;
  line-height:1.7;
}
.sgqh-toc a::before{content:"◆";margin-right:8px;color:var(--sgqh-gold-soft);font-size:8px;vertical-align:1px}
.sgqh-toc a:hover{color:var(--sgqh-green)!important}

.sgqh-section{
  scroll-margin-top:24px;
  margin:0 0 64px;
}

.sgqh-section > h2{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 26px;
  padding:0 0 13px;
  border:0;
  border-bottom:1px solid rgba(176,138,67,.42);
  background:none;
  color:#17382f;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:26px;
  font-weight:650;
  line-height:1.45;
  letter-spacing:.025em;
}
.sgqh-section > h2::before{
  content:"";
  width:4px;
  height:1.25em;
  flex:0 0 4px;
  border-radius:3px;
  background:var(--sgqh-gold);
}

.sgqh-section h3{
  margin:36px 0 14px;
  padding:0;
  border:0;
  background:none;
  color:#294a40;
  font-size:18px;
  font-weight:760;
  line-height:1.55;
}

.sgqh-section p,
.sgqh-section li,
.sgqh-setting dd{
  color:#46534c;
  font-size:14px;
  line-height:2;
}
.sgqh-section p{margin:0 0 17px}
.sgqh-section ul,
.sgqh-section ol{margin:12px 0 20px;padding-left:1.55em}
.sgqh-section li{margin:6px 0}

.sgqh-section a:not(.sgqh-cta){
  color:#8b6528!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}
.sgqh-section a:not(.sgqh-cta):hover{color:#5d421c!important}

.sgqh-note{
  margin:21px 0;
  padding:16px 18px;
  border-left:3px solid var(--sgqh-gold);
  border-radius:0 8px 8px 0;
  background:rgba(255,250,234,.68);
  color:#4e594f;
  font-size:13px;
  line-height:1.85;
}

.sgqh-settings{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:18px 0 0;
}
.sgqh-setting{
  margin:0;
  padding:20px 21px 18px;
  border:1px solid rgba(118,89,38,.18);
  border-radius:10px;
  background:rgba(255,252,243,.56);
}
.sgqh-setting dt{
  margin:0 0 6px;
  color:#21483c;
  font-size:14px;
  font-weight:800;
}
.sgqh-setting dd{margin:0}

.sgqh-tips{
  margin:0;
  padding:0;
  list-style:none;
}
.sgqh-tips li{
  position:relative;
  margin:0 0 15px;
  padding:0 0 0 25px;
}
.sgqh-tips li::before{
  content:"◆";
  position:absolute;
  left:2px;
  top:.38em;
  color:var(--sgqh-gold);
  font-size:9px;
}

.sgqh-bottom{
  margin-top:70px;
  padding:40px 24px 16px;
  border-top:1px solid var(--sgqh-line);
  text-align:center;
}
.sgqh-bottom p{
  margin:0 0 19px;
  color:#59645e;
  font-size:13px;
  line-height:1.8;
}

@media(max-width:768px){
  .sgqh-topbar{width:calc(100% - 32px);min-height:62px}
  .sgqh-brand{font-size:15px;letter-spacing:.1em}
  .sgqh-back{font-size:12px}
  .sgqh-main{width:calc(100% - 30px);padding:42px 0 62px}
  .sgqh-hero{padding:10px 5px 42px}
  .sgqh-hero h1{font-size:clamp(29px,8.4vw,39px);line-height:1.35}
  .sgqh-lead{margin-top:20px;font-size:13.5px;line-height:1.9}
  .sgqh-cta{width:min(100%,340px);min-width:0;min-height:54px;font-size:14px}
  .sgqh-toc{padding:21px 20px;margin-bottom:46px}
  .sgqh-toc ul{grid-template-columns:1fr;gap:6px}
  .sgqh-section{margin-bottom:52px}
  .sgqh-section > h2{font-size:22px;margin-bottom:21px}
  .sgqh-section h3{font-size:16.5px;margin-top:31px}
  .sgqh-section p,.sgqh-section li,.sgqh-setting dd{font-size:13.5px;line-height:1.9}
  .sgqh-settings{grid-template-columns:1fr}
  .sgqh-bottom{margin-top:52px;padding-left:5px;padding-right:5px}
}

@media(prefers-reduced-motion:reduce){
  html.sgq-help-html{scroll-behavior:auto}
  .sgqh-cta,.sgqh-back::after{transition:none}
}


/* ========================================================================
   0.6.90 — Narrow-width typography resolved entirely by CSS at first layout.
   No JavaScript text fitting or external web font is used.
   ======================================================================== */
@media (max-width:600px){
  .sgqh-hero h1{
    font-size:clamp(25px,7.4vw,32px);
    line-height:1.42;
    letter-spacing:0;
  }

  .sgqh-eyebrow{
    font-size:9.5px;
    letter-spacing:.18em;
  }

  .sgqh-lead,
  .sgqh-section p,
  .sgqh-setting dd,
  .sgqh-note,
  .sgqh-tips li{
    text-align:justify;
    text-justify:inter-character;
    overflow-wrap:anywhere;
  }

  .sgqh-section > h2{
    font-size:clamp(19px,5.7vw,22px);
    gap:11px;
  }

  .sgqh-section h3{
    font-size:clamp(15.5px,4.5vw,17px);
  }

  .sgqh-cta{
    font-size:clamp(12.5px,3.8vw,14px);
    letter-spacing:.02em;
    padding-left:16px;
    padding-right:16px;
  }

  .sgqh-bottom p{
    text-align:justify;
    text-justify:inter-character;
  }
}

@media (max-width:420px){
  .sgqh-topbar{
    width:calc(100% - 24px);
    min-height:58px;
    gap:10px;
  }

  .sgqh-brand{
    flex:0 1 auto;
    min-width:0;
    font-size:13px;
    letter-spacing:.075em;
    white-space:nowrap;
  }

  .sgqh-back{
    flex:0 0 auto;
    font-size:11px;
    letter-spacing:.025em;
    white-space:nowrap;
  }

  .sgqh-main{
    width:calc(100% - 24px);
    padding-top:34px;
  }

  .sgqh-hero{
    padding-left:0;
    padding-right:0;
  }

  .sgqh-hero h1{
    font-size:clamp(23px,7vw,28px);
  }

  .sgqh-lead{
    font-size:13px;
    line-height:1.95;
  }

  .sgqh-toc{
    padding-left:16px;
    padding-right:16px;
  }

  .sgqh-section p,
  .sgqh-section li,
  .sgqh-setting dd{
    font-size:13px;
  }

  .sgqh-setting{
    padding:17px 16px 15px;
  }
}

@media (max-width:340px){
  .sgqh-brand{font-size:12px;letter-spacing:.05em}
  .sgqh-back{font-size:10.5px}
  .sgqh-hero h1{font-size:22px}
  .sgqh-cta{font-size:12px}
}


/* ========================================================================
   0.6.91 — Help-page H1 orphan-line fix for narrow phones.
   Pixel 7 (412px) previously resolved the <=420px rule to 28px, making the
   14 Japanese glyphs slightly wider than the available content area and
   leaving only 「方」 on a second centered line.
   Keep the heading centered, but scale it at first CSS layout and prohibit
   wrapping. No JavaScript measurement or post-render fitting is used.
   ======================================================================== */
@media (max-width:420px){
  .sgqh-hero h1{
    font-size:clamp(18px,6.4vw,26px)!important;
    line-height:1.42!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}


/* ========================================================================
   0.6.92 — Unified mobile help-page H1 fitting.
   Covers the whole phone-width range instead of device-specific patches.
   At 375 / 390 / 414 / 430 / 440px the font scales continuously with vw.
   The title remains one line. No JavaScript fitting is involved.
   ======================================================================== */
@media (max-width:600px){
  .sgqh-hero h1{
    font-size:clamp(20px,6.25vw,32px)!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
  }
}