/*  新デザイン（wn）の頭・足だけを .wnf の中に効かせる CSS。public/wn/site.v1.css から tools/gen-wn-frame-css.mjs で作った（手で直さない・見本が変わったら作り直す）。旧い枠（layouts/Base.astro）の本文は旧い CSS のままで、これは本文に効かない。  */
.wnf{--red:#D91433;--redd:#AE1029;--ink:#14161a;--gray:#5E6066;--soft:#EFF1F4;--line:#D5D8DD;--ease:cubic-bezier(.2,.7,.1,1);--disp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;--lx:max(14px,calc(50% - 620px + 14px))}
.wnf *{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:84px}
.wnf{font-family:"BIZ UDPGothic","Hiragino Sans",sans-serif;color:var(--ink);font-size:17px;line-height:1.85}
.wnf p,.wnf li{text-wrap:pretty}
.wnf a{color:inherit;text-decoration:none}
.wnf img,.wnf svg{max-width:100%;display:block}
.wnf button{font-family:inherit}
.wnf .wrap{width:1240px;max-width:100%;margin:0 auto;padding:0 28px 0 72px;position:relative}
.wnf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wnf header{position:fixed;inset:0 0 auto 0;height:72px;z-index:50;display:flex;align-items:center;transition:transform .45s var(--ease),background .3s,box-shadow .3s}
.wnf header.hide{transform:translateY(-100%)}
.wnf header.solid{background:rgba(255,255,255,.93);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.wnf header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;padding-left:28px;gap:20px}
.wnf header .logo img{height:32px;width:auto}
.wnf header nav{display:flex;gap:28px;font-weight:700;font-size:15px;align-items:center;margin-left:auto}
.wnf header nav>a,.wnf .dd>a{position:relative;padding:6px 0;display:block}
.wnf header nav>a:after,.wnf .dd>a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.wnf header nav>a:hover:after,.wnf .dd:hover>a:after,.wnf header nav a[aria-current]:after,.wnf .dd>a[aria-current]:after{transform:scaleX(1)}
.wnf .dd{position:relative}
.wnf .ddp{position:absolute;left:-20px;top:100%;min-width:230px;padding:10px;margin-top:6px;background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.wnf .dd:hover .ddp,.wnf .dd:focus-within .ddp{opacity:1;visibility:visible;transform:none}
.wnf .ddp a{display:block;padding:9px 14px;border-radius:12px;font-size:15px}
.wnf .ddp a:hover{background:var(--red);color:#fff}
.wnf .hbtn{height:44px!important;font-size:15px!important;padding:0 20px!important}
.wnf .mbtn{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.wnf .mbtn i{position:absolute;left:10px;right:10px;height:3px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.wnf .mbtn i:nth-child(1){top:14px}.wnf .mbtn i:nth-child(2){top:21px}.wnf .mbtn i:nth-child(3){top:28px}
.wnf .mbtn[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}.wnf .mbtn[aria-expanded=true] i:nth-child(2){opacity:0}.wnf .mbtn[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.wnf #mmenu{position:fixed;inset:60px 0 0 0;z-index:49;background:#fff;padding:20px 24px 90px;overflow:auto}
.wnf #mmenu[hidden]{display:none}
.wnf #mmenu nav{display:grid}
.wnf #mmenu a{font:900 22px var(--disp);padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.wnf #mmenu a:after{content:"→";color:var(--red)}
.wnf #bar{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.wnf .btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:10px 30px;background:var(--red);color:#fff;font:700 17px/1.4 "BIZ UDPGothic",sans-serif;border-radius:999px;border:0;cursor:pointer;transform:translate(var(--mx),var(--my));transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;box-shadow:0 10px 26px -10px rgba(217,20,51,.6)}
.wnf .btn:hover{background:var(--redd);box-shadow:0 16px 34px -12px rgba(217,20,51,.7)}
.wnf .btn.o{background:transparent;color:inherit;box-shadow:none;border:2px solid currentColor}
.wnf .btn.o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.wnf .btn.k{background:var(--ink);box-shadow:none} .wnf .btn.k:hover{background:var(--red)}
.wnf .lm{display:inline-block;flex:none;width:20px;height:18px;background:#fff;border-radius:6px}
.wnf #fab{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:55;transition:transform .55s var(--ease);pointer-events:none}
.wnf #fab .btn{pointer-events:auto;white-space:nowrap;min-height:54px;box-shadow:0 14px 34px -10px rgba(0,0,0,.5)}
body.fab .wnf #fab{transform:translate(-50%,0)} body.nofab .wnf #fab{transform:translate(-50%,140%)}
.rm .wnf *,.rm .wnf *::before,.rm .wnf *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.wnf footer{background:#0b0c0e;color:#9aa0a8;font-size:13px;padding:50px 0 100px}
.wnf footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-left:28px}
.wnf footer img{height:30px;width:auto}.wnf footer p{margin-top:12px;line-height:1.9}
.wnf footer .sns{display:flex;gap:16px;flex-wrap:wrap}.wnf footer .sns a,.wnf footer .fm a{color:#c7cad0;text-decoration:underline;text-underline-offset:3px}
.wnf footer .fm{display:grid;grid-template-columns:repeat(2,auto);gap:6px 36px;align-content:start}.wnf footer .note{color:#6e737b}
@media(max-width:1024px){
 .wnf header nav{gap:18px}
}
@media(max-width:900px){.wnf header nav,.wnf .hbtn{display:none}.wnf .mbtn{display:block;margin-left:auto}}
@media(max-width:820px){
 .wnf{font-size:16px}
 .wnf .wrap{padding-left:46px;padding-right:20px}
 .wnf header{height:60px}.wnf header .logo img{height:26px}.wnf header .wrap{padding-left:20px}
 .wnf .btn{padding:10px 24px}
 .wnf footer .wrap{padding-left:20px}
}