/* きろくのタネ 共通の磨き（2026-10-13 rieko「全部のページを」）。LP・専門職のページと同じ見せ方を、ほかのページにも。
   ・名前はすべて pl- で始める（各ページの既存の名前と重ならないように）。html.pl は js/polish.js が付ける＝JSが動かないときは何も変わらない。
   ・モードは <html data-pl="full|light|form">：full＝読みもの・開発者のはなし・使い方 など／light＝規約など（線と上へ戻るだけ）／form＝登録画面（控えめ）。 */
:root{--pl-ease:cubic-bezier(.22,1,.36,1);--pl-acc:#b8563f;--pl-gold:#b8862c}
html.pl h1,html.pl h2{font-weight:700}
/* 見出しが1行ずつ立ち上がる */
html.pl .pl-ln{display:block;clip-path:inset(0 -2em 0 -2em);padding-bottom:.08em}
html.pl .pl-ln>span{display:inline-block;transform:translateY(110%);animation:plLineUp 1.1s var(--pl-ease) forwards}
html.pl .pl-ln:nth-child(2)>span{animation-delay:.15s}
html.pl .pl-ln:nth-child(3)>span{animation-delay:.3s}
@keyframes plLineUp{to{transform:none}}
/* 画面に入ったら現れる */
html.pl .pl-rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--pl-ease),transform .9s var(--pl-ease)}
html.pl .pl-rv.pl-l{transform:translateX(-36px)}
html.pl .pl-rv.pl-r{transform:translateX(36px)}
html.pl .pl-rv.pl-in{opacity:1;transform:none}
/* 見出しの下に、引かれていく短い線 */
html.pl .pl-h2line{position:relative}
html.pl .pl-h2line::after{content:"";display:block;width:40px;height:2px;border-radius:2px;margin-top:14px;background:var(--pl-acc);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--pl-ease) .25s}
html.pl .pl-h2line.pl-center::after{margin-left:auto;margin-right:auto;transform-origin:center}
html.pl .pl-h2line.pl-in::after{transform:scaleX(1)}
/* 葉の線（最初のかたまりの右下） */
.pl-leafbox{isolation:isolate}
.pl-leaf{position:absolute;right:-90px;bottom:-70px;width:520px;max-width:72vw;z-index:-1;pointer-events:none;color:color-mix(in srgb,var(--pl-acc) 28%,transparent)}
.pl-leaf path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:1600;stroke-dashoffset:1600;animation:plDraw 3.4s var(--pl-ease) .5s forwards}
.pl-leaf path:nth-child(2){animation-delay:.9s}.pl-leaf path:nth-child(3){animation-delay:1.3s}
@keyframes plDraw{to{stroke-dashoffset:0}}
/* 読んだ分の線・上へ戻る */
.pl-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pl-acc),var(--pl-gold));z-index:200;pointer-events:none}
.pl-top{position:fixed;right:18px;bottom:24px;z-index:190;width:46px;height:46px;border-radius:50%;border:0;background:var(--pl-acc);color:#fffaf7;
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(184,86,63,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;cursor:pointer}
.pl-top.pl-show{opacity:1;visibility:visible;transform:none}
.pl-top svg{width:20px;height:20px}
body.pl-has-kbar .pl-top{bottom:92px}
/* ボタンに色が流れ込む */
html.pl .pl-btn{position:relative;overflow:hidden;isolation:isolate}
html.pl .pl-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.16);transform:translateX(-101%);transition:transform .45s var(--pl-ease)}
html.pl .pl-btn:hover::before{transform:none}
/* 登録画面：カードがふわっと現れるだけ */
html.pl[data-pl="form"] .pl-card{animation:plCardIn .9s var(--pl-ease) both}
@keyframes plCardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:760px){.pl-leaf{width:360px;right:-120px;bottom:-90px}}
@media print{.pl-progress,.pl-top,.pl-leaf{display:none!important}}
@media (prefers-reduced-motion:reduce){
  html.pl .pl-ln>span,.pl-leaf path,html.pl[data-pl="form"] .pl-card{animation:none;transform:none;stroke-dashoffset:0}
  html.pl .pl-rv{opacity:1;transform:none;transition:none}
  html.pl .pl-h2line::after{transition:none;transform:scaleX(1)}
  html.pl .pl-btn::before{transition:none}
}