/* 全体の横スクロール抑止（clip非対応にフォールバック） */
:where(html, body){ overflow-x: clip; }
@supports not (overflow: clip){ :where(html, body){ overflow-x: hidden; } }

:root{
  --ink:#1f2937;
  --muted:#6b7280;
  --accent:#6fb67e;
  --border:#e5e7eb;
  --container: min(1000px, 92vw);
  --measure: 72ch;
}


/* ---- レイアウト ---- */
main.pp-main{ display:block; padding:3em 13em; }
.pp-container{ margin:0 auto; }
.pp-header{ text-align:center; margin-bottom: clamp(28px,4vw,40px); }

h1.pp-title{
  font-weight:500; line-height:1.2;
  background: linear-gradient(135deg, var(--grad1, #4aa37a) 0%, var(--grad2, #9ed0b8) 50%, var(--grad3, #4aa37a) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:"Baskervville",serif; margin:0 0 .3em; font-size:48px;
}
.pp-title.show{ opacity:1; transform:translateY(0); }
.pp-title{ opacity:0; transform:translateY(20px); transition:opacity .4s ease-out, transform .4s ease-out; }
.pp-eyebrow{ font-size:1em; }

/* ---- セクション ---- */
.pp-sections{ max-width:var(--measure); margin:0 auto; }
.pp-sec{ margin:3em 0; font-family:"Roboto", sans-serif; }
.pp-sec h2{ display:inline-block; font-size:1.4em; font-weight:700; margin:0 0 10px; line-height:1.5; }
.pp-sec p{ margin:.6em 0; }
.pp-sec ul{ padding-left:1.2em; }
.pp-sec li{ margin:.2em 0; }
.pp-note{color:var(--muted); }

/* ---- 罫線／小要素 ---- */
hr.pp-rule{ border:none; height:1px; background:var(--border); margin:28px auto; width:min(var(--measure),100%); }
a{ color:#4b8; } strong{ font-weight:600; }

/* Responsive */
@media (max-width:767.98px){ h1.pp-title{ font-size:25px; } }
@media (min-width:768px) and (max-width:1024px){
  main.pp-main{ padding:3em 10em; font-size:.8em; }
}
@media (min-width:600px) and (max-width:767.98px){
  main.pp-main{ padding:3em 6em; font-size:.7em; }
}
@media (max-width:599.98px){
  main.pp-main{ padding:3em 4em; font-size:.6em; }
}