/* 淀川区社協 サンプル案C「ポップ・みんなの戦隊」 */
:root{
  --ink:#14213D; --paper:#FFFBEF; --cream:#FFF1C9;
  --red:#D61F36; --red-d:#B5152A; --yellow:#FFC31F; --blue:#1558D6; --green:#0B7A44; --pink:#C9246F; --purple:#6D3FC8; --orange:#C2410C;
  --red-l:#FFE1E4; --yellow-l:#FFF0B8; --blue-l:#DCE8FF; --green-l:#D6F5E3; --pink-l:#FFE0EE; --purple-l:#EADFFF; --orange-l:#FFE3D2;
  --line:3px solid var(--ink); --sh:5px 5px 0 var(--ink); --r:22px;
  --f-head:"Mochiy Pop One","Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
html{font-size:18px;-webkit-text-size-adjust:100%}
html[data-fs="s"]{font-size:16px}
html[data-fs="l"]{font-size:21px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--f-body);font-weight:500;color:var(--ink);background:var(--paper);
  background-image:radial-gradient(rgba(20,33,61,.08) 1.4px,transparent 1.5px);background-size:22px 22px;
  line-height:1.8;word-break:keep-all;line-break:strict;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:.2em}
a:hover{color:var(--red-d)}
:focus-visible{outline:4px solid var(--purple);outline-offset:3px;border-radius:6px}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-80px;background:var(--ink);color:#fff;padding:.7em 1em;z-index:200;border-radius:8px}
.skip:focus{top:8px}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--f-head);font-weight:400;line-height:1.4;margin:0}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.5em 1.4em;border:var(--line);border-radius:999px;font:700 1rem/1.4 var(--f-body);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{color:#fff;background:var(--red-d)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{color:var(--ink);background:var(--yellow)}
.btn-ghost{background:#fff;color:var(--ink)}.btn-ghost:hover{color:var(--ink);background:var(--yellow-l)}

/* topbar */
.topbar{background:var(--ink);color:#fff;font-size:.875rem}
.topbar a{color:#fff}
.topbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-block:8px}
.tel{font-weight:700}
.tel-n{font-size:1.25rem;font-family:var(--f-head);color:var(--yellow)!important;text-decoration:none}
.search{display:flex;flex:1 1 220px;max-width:340px}
.search input{flex:1;min-width:0;min-height:44px;padding:0 .9em;border:2px solid #fff;border-right:0;border-radius:999px 0 0 999px;font:inherit;color:var(--ink);background:#fff}
.search button{min-height:44px;min-width:64px;border:2px solid var(--yellow);background:var(--yellow);color:var(--ink);font:700 .9rem var(--f-body);border-radius:0 999px 999px 0;cursor:pointer}
.fs,.lang{display:flex;align-items:center;gap:6px}
.fs-l{font-weight:700}
.fs button,.lang button{min-height:44px;min-width:44px;padding:0 .8em;border:2px solid #fff;background:transparent;color:#fff;border-radius:999px;font:700 .875rem var(--f-body);cursor:pointer}
.fs button[aria-pressed="true"],.lang button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.toplinks{display:flex;gap:6px;margin-left:auto}
.toplinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5em;font-weight:700}

/* header */
.head{background:var(--paper);border-bottom:var(--line);position:relative;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-mark{display:grid;grid-template-columns:repeat(3,16px);gap:3px;transform:rotate(-8deg)}
.logo-mark i{width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;display:block}
.logo-mark .d1{background:var(--red)}.logo-mark .d2{background:var(--blue)}.logo-mark .d3{background:var(--yellow)}.logo-mark .d4{background:var(--green);grid-column:1}.logo-mark .d5{background:var(--pink)}
.logo-t{display:flex;flex-direction:column;line-height:1.25}
.logo-t small{font-size:.75rem;font-weight:700}
.logo-t b{font:400 1.25rem/1.25 var(--f-head)}
.menu-btn{white-space:nowrap;flex:none;display:none;align-items:center;gap:8px;min-height:48px;padding:0 1em;background:var(--yellow);border:var(--line);border-radius:999px;font:700 1rem var(--f-body);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.bars,.bars::before,.bars::after{display:block;width:20px;height:3px;background:var(--ink);border-radius:2px;position:relative;content:""}
.bars::before{position:absolute;top:-7px}.bars::after{position:absolute;top:7px}
.gnav ul:first-child{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gnav a{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1em;border:var(--line);border-radius:999px;font-weight:700;text-decoration:none;color:#fff;box-shadow:3px 3px 0 var(--ink)}
.gnav a:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);color:#fff}
.n-red{background:var(--red)}.n-green{background:var(--green)}.n-blue{background:var(--blue)}.n-pink{background:var(--pink)}
.gnav .sub{display:flex;gap:6px 14px;justify-content:flex-end;margin-top:6px}
.gnav .sub a{min-height:44px;padding:0 .3em;border:0;background:none;color:var(--ink);box-shadow:none;font-size:.875rem;text-decoration:underline}
.gnav .sub a:hover{color:var(--red-d);transform:none}

/* alert */
.alert{background:var(--yellow);border-bottom:var(--line);position:relative}
.alert::before{content:"";display:block;height:14px;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px);border-bottom:var(--line)}
.alert-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:16px}
.alert-tag{background:var(--red);color:#fff;font:400 1.1rem var(--f-head);padding:.35em 1em;border:var(--line);border-radius:999px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.alert-body{flex:1 1 420px}
.alert-body h2{font-size:1.5rem}
.alert-body p{font-weight:700}
.alert-meta{font-size:.9rem}
.alert-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alert-close{min-height:44px;padding:0 1.1em;border:var(--line);border-radius:999px;background:#fff;color:var(--ink);font:700 .95rem var(--f-body);cursor:pointer}
.alert[data-state="normal"] .wrap.alert-in{display:none}
.alert[data-state="normal"]{background:var(--paper)}
.alert[data-state="normal"]::before{display:none}
.alert[data-state="normal"]{border-bottom:0}
.demo-ctl{text-align:right;padding:0 16px 8px;font-size:.8rem}
.demo-ctl a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}

/* hero */
.hero{padding:40px 0 56px;background:linear-gradient(180deg,var(--cream) 0,var(--cream) 100%);border-bottom:var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:var(--pink-l);border:var(--line);z-index:0}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;position:relative;z-index:1}
.stk{display:inline-block;padding:.3em 1em;border:var(--line);border-radius:999px;font-weight:900;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.stk-y{background:var(--yellow)}
.hero-h{font-size:clamp(2.1rem,5vw,3.6rem);margin:16px 0 18px;line-height:1.3}
.hero-h em{font-style:normal;color:#fff;background:var(--red);padding:0 .25em;border-radius:12px;display:inline-block;transform:rotate(-1.5deg);border:var(--line);box-shadow:4px 4px 0 var(--ink)}
.hero-p{font-size:1.05rem;max-width:34em}
.hero-p b{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.hero-img{position:relative}
.hero-img img{border:var(--line);border-radius:28px;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.5deg);background:#fff}
.burst{position:absolute;left:-14px;bottom:-22px;width:116px;height:116px;display:grid;place-items:center;text-align:center;background:var(--yellow);color:var(--ink);font:400 1rem/1.3 var(--f-head);border:var(--line);border-radius:50%;transform:rotate(-12deg);box-shadow:4px 4px 0 var(--ink)}

/* sections */
.sec{padding:56px 0}
.sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
.sec-h span{display:inline-block;background:var(--yellow);border:var(--line);border-radius:14px;padding:.15em .8em;font-size:1.6rem;transform:rotate(-1.2deg);box-shadow:4px 4px 0 var(--ink)}
.sec-h small{font:700 1rem var(--f-body);padding-left:.4em}

/* categories */
.sec-cat{background:var(--paper)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat{display:flex;flex-direction:column;border:var(--line);border-radius:var(--r);box-shadow:var(--sh);background:#fff;overflow:hidden}
.cat-a{position:relative;display:block;text-decoration:none;color:var(--ink)}
.cat-a img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:var(--line)}
.cat-n{position:absolute;left:10px;top:10px;width:44px;height:44px;display:grid;place-items:center;border:var(--line);border-radius:50%;background:#fff;font:400 1.3rem var(--f-head)}
.cat-b{display:flex;flex-direction:column;gap:2px;padding:14px 16px;color:#fff}
.c-red .cat-b{background:var(--red)}.c-green .cat-b{background:var(--green)}.c-blue .cat-b{background:var(--blue)}.c-pink .cat-b{background:var(--pink)}
.cat-t{font:400 1.2rem/1.35 var(--f-head)}
.cat-s{font-size:.85rem;font-weight:700}
.cat-l{padding:14px 16px 4px;flex:1}
.cat-l li{position:relative;padding:.15em 0 .15em 1.2em;font-size:.95rem;font-weight:700}
.cat-l li::before{content:"";position:absolute;left:0;top:.75em;width:.7em;height:.7em;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
.cat-go{display:flex;align-items:center;justify-content:center;min-height:52px;margin:10px 16px 16px;border:var(--line);border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:900;text-decoration:none;text-align:center}
.cat-go:hover{background:var(--ink);color:#fff}

/* news */
.sec-news{background:var(--blue-l);border-block:var(--line)}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.tab{min-height:48px;padding:0 1.1em;border:var(--line);border-radius:999px;background:#fff;color:var(--ink);font:700 .95rem var(--f-body);cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--red)}
.newslist{display:grid;gap:14px}
.nitem{display:grid;grid-template-columns:auto auto 1fr;gap:6px 16px;align-items:center;background:#fff;border:var(--line);border-radius:18px;padding:12px 18px;box-shadow:4px 4px 0 var(--ink)}
.newslist.big .nitem{grid-template-columns:96px auto auto 1fr}
.nitem img{width:84px;height:84px;object-fit:cover;border:2px solid var(--ink);border-radius:14px;display:none}
.newslist.big .nitem img{display:block}
.nitem time{font-weight:700;white-space:nowrap}
.kind{display:inline-flex;align-items:center;min-height:32px;padding:0 .8em;border:2px solid var(--ink);border-radius:999px;font-size:.8rem;font-weight:900;white-space:nowrap}
.k-info{background:var(--blue-l)}.k-event{background:var(--red-l)}.k-vol{background:var(--green-l)}.k-fund{background:var(--yellow-l)}.k-news{background:var(--pink-l)}.k-job{background:var(--purple-l)}
.nitem a{font-weight:700;color:var(--ink);text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center}
.nitem a:hover{color:var(--red-d)}
.more{margin-top:26px;text-align:center}
.empty{padding:24px;text-align:center;background:#fff;border:var(--line);border-radius:18px;font-weight:700}
.fl-count{margin:0 0 14px;font-weight:700}

/* works */
.sec-work{background:var(--paper)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:w}
.work{border:var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);overflow:hidden}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:var(--line)}
.work>div{padding:16px 20px 22px}
.work-n{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.work-n span{font-weight:900;font-size:.85rem}
.work-n b{font:400 1.4rem var(--f-head);padding:.05em .7em;border:var(--line);border-radius:999px;color:#fff}
.w-red .work-n b{background:var(--red)}.w-yellow .work-n b{background:var(--yellow);color:var(--ink)}.w-blue .work-n b{background:var(--blue)}
.work h3{font-size:1.1rem;margin-bottom:8px}
.work-note{margin-top:28px;text-align:center;font-weight:700;background:var(--yellow-l);border:var(--line);border-radius:18px;padding:14px 18px}

/* video */
.sec-video{background:var(--yellow);border-block:var(--line)}
.video-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center}
.video-txt p{font-weight:700}
.video-box{position:relative;border:var(--line);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);aspect-ratio:3/2;background:#fff}
.video-box img{width:100%;height:100%;object-fit:cover}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;min-height:68px;padding:0 1.6em 0 1.1em;border:var(--line);border-radius:999px;background:var(--red);color:#fff;font:400 1.3rem var(--f-head);cursor:pointer;box-shadow:5px 5px 0 var(--ink)}
.play:hover{background:var(--red-d)}
.tri{width:0;height:0;border-left:20px solid #fff;border-block:12px solid transparent}

/* map */
.sec-map{background:var(--green-l);border-bottom:var(--line)}
.map-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}
.map-side h3{font-size:1.1rem;margin:0 0 10px}
.map-side .chips{margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:48px;padding:0 1.1em;border:var(--line);border-radius:999px;background:#fff;color:var(--ink);font:700 .95rem var(--f-body);cursor:pointer}
.chip:hover{background:var(--yellow-l)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:#fff}
.note{font-size:.85rem;font-weight:700}
.map-addr{margin-top:14px;font-weight:700}
.map-frame{border:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff;aspect-ratio:4/3}
.map-frame iframe{width:100%;height:100%;border:0}

/* footer */
.foot{background:var(--ink);color:#fff;padding:44px 0 90px;border-top:var(--line)}
.foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:28px}
.foot-name{font:400 1.3rem var(--f-head);margin-bottom:10px}
.foot address{font-style:normal;margin-bottom:8px}
.foot-contact{background:#fff;color:var(--ink);border-radius:var(--r);padding:20px 22px;border:3px solid var(--yellow)}
.foot-contact h2{font-size:1.1rem;margin-bottom:10px}
.foot-contact li{display:flex;gap:14px;align-items:center;min-height:44px;font-weight:700}
.foot-contact li b{display:inline-block;min-width:4.8em;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;text-align:center;font-size:.85rem}
.foot-contact a{color:var(--blue);font-weight:900}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 22px;padding-top:20px;border-top:2px dashed rgba(255,255,255,.4)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.copy{margin-top:14px;font-size:.8rem}
.badge{position:fixed;right:12px;bottom:12px;z-index:100;background:var(--red);color:#fff;border:3px solid #fff;border-radius:999px;padding:.35em 1em;font-size:.8rem;font-weight:900;box-shadow:0 0 0 3px var(--ink);pointer-events:none}

/* sub pages */
.pagehead{background:var(--cream);border-bottom:var(--line);padding:22px 0 36px}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px;font-size:.875rem;font-weight:700}
.crumb li+li::before{content:"▶";font-size:.6em;margin-right:.6em;vertical-align:middle}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.ph-h{margin:6px 0 12px;font-size:clamp(1.9rem,4vw,2.6rem)}
.ph-h span{display:inline-block;background:var(--red);color:#fff;border:var(--line);border-radius:16px;padding:.1em .7em;transform:rotate(-1.2deg);box-shadow:4px 4px 0 var(--ink)}
.ph-p{max-width:40em;font-weight:700}
.telbox{background:var(--yellow);border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px 24px;text-align:center;margin-bottom:44px}
.telbox-l{font-weight:900}
.telbox-n{font:400 clamp(2rem,6vw,3rem)/1.3 var(--f-head);color:var(--ink);text-decoration:none}
.telbox-t{font-weight:700;font-size:.95rem}
.fl{margin-bottom:16px}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.scard[hidden]{display:none}
.scard a{display:flex;flex-direction:column;height:100%;border:var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);overflow:hidden;text-decoration:none;color:var(--ink)}
.scard a:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.scard img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:var(--line)}
.scard-b{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px;flex:1}
.scard-t{font:400 1.05rem/1.4 var(--f-head)}
.scard-d{font-size:.9rem;font-weight:700;flex:1}
.scard-go{align-self:flex-start;font-weight:900;font-size:.85rem;padding:.3em .9em;border:2px solid var(--ink);border-radius:999px}
.k-red .scard-go{background:var(--red-l)}.k-blue .scard-go{background:var(--blue-l)}.k-green .scard-go{background:var(--green-l)}.k-pink .scard-go{background:var(--pink-l)}.k-purple .scard-go{background:var(--purple-l)}.k-orange .scard-go{background:var(--orange-l)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;align-items:start}
.ways{background:var(--blue-l);border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px}
.ways h2{font-size:1.2rem;margin-bottom:12px}
.ways li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:2px dashed var(--ink)}
.ways li b{align-self:flex-start;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:0 .9em;font-size:.85rem}
.ways .big{font:400 1.5rem var(--f-head);color:var(--ink)}
.ways .big2{font-weight:900}
.ways li span:last-child{font-size:.85rem;font-weight:700}
.formbox{background:#fff;border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.steps{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;padding:.3em 1em .3em .4em;border:var(--line);border-radius:999px;background:#fff;font-weight:900}
.steps li span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.steps li.on{background:var(--yellow)}
.steps li.done{background:var(--green-l)}
.fld{margin-bottom:20px}
.fld label{display:block;font-weight:900;margin-bottom:6px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{width:100%;min-height:52px;padding:.6em .9em;border:var(--line);border-radius:14px;font:500 1rem var(--f-body);color:var(--ink);background:#fff}
.fld textarea{min-height:160px}
.req,.opt{display:inline-block;padding:0 .6em;border-radius:999px;font-size:.78rem;font-weight:900;vertical-align:.1em}
.req{background:var(--red);color:#fff}
.opt{background:var(--blue-l);border:2px solid var(--ink)}
.req-note{margin-bottom:18px;font-weight:700}
.chk{display:flex!important;align-items:flex-start;gap:12px;cursor:pointer}
.chk input{width:28px;height:28px;flex:none;margin-top:.1em;accent-color:var(--red)}
.err{color:var(--red-d);font-weight:900;font-size:.9rem;margin-top:6px}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sec-note{margin-bottom:16px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.cf-h{font-size:1.4rem;margin-bottom:12px}
.confirm{display:grid;grid-template-columns:auto 1fr;gap:0;border:var(--line);border-radius:16px;overflow:hidden;margin:18px 0}
.confirm dt,.confirm dd{margin:0;padding:12px 16px;border-bottom:2px solid var(--ink)}
.confirm dt{background:var(--yellow-l);font-weight:900}
.confirm dd{white-space:pre-wrap;overflow-wrap:anywhere}
.confirm dt:last-of-type,.confirm dd:last-of-type{border-bottom:0}

/* news page */
.nsearch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.nsearch label{font-weight:900}
.nsearch input{flex:1 1 240px;min-height:52px;padding:0 1em;border:var(--line);border-radius:999px;font:500 1rem var(--f-body);color:var(--ink);background:#fff}
.pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.pager button{min-width:52px;min-height:52px;padding:0 1em;border:var(--line);border-radius:999px;background:#fff;color:var(--ink);font:900 1rem var(--f-body);cursor:pointer}
.pager button[aria-current="page"]{background:var(--ink);color:#fff}
.pager button:disabled{opacity:.5;cursor:default}

/* responsive */
@media (max-width:1100px){
  .cats,.scards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-in,.video-in,.map-grid,.contact-grid,.foot-grid{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
  .work{display:grid;grid-template-columns:42% 1fr}
  .work img{height:100%;aspect-ratio:auto;border-bottom:0;border-right:var(--line)}
  .menu-btn{display:inline-flex}
  .gnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--line);padding:16px}
  .gnav.open{display:block}
  .gnav ul:first-child{flex-direction:column;justify-content:stretch}
  .gnav ul:first-child a{width:100%;justify-content:flex-start}
  .gnav .sub{justify-content:flex-start;margin-top:12px}
  .toplinks{margin-left:0}
  .hero::after{display:none}
}
@media (max-width:560px){
  html{font-size:17px}
  html[data-fs="s"]{font-size:16px}
  html[data-fs="l"]{font-size:20px}
  .wrap{width:calc(100% - 28px)}
  .sec{padding:40px 0}
  .search{max-width:none;flex-basis:100%}
  .fs-l{display:none}
  .lang button{padding:0 .6em;font-size:.8rem}
  .logo-mark{grid-template-columns:repeat(3,12px)}.logo-mark i{width:12px;height:12px}
  .logo-t b{font-size:.95rem;white-space:nowrap}.logo-t small{font-size:.7rem}.menu-btn{padding:0 .8em}.head-in{gap:8px}
  .cats,.scards{grid-template-columns:1fr}
  .cat{display:grid;grid-template-columns:38% 1fr;grid-template-rows:auto auto auto}
  .cat-a{grid-row:1 / 3;grid-column:1 / 3}
  .cat-a img{aspect-ratio:16/10}
  .cat-l,.cat-go{grid-column:1 / 3}
  .cat{display:flex}
  .nitem,.newslist.big .nitem{grid-template-columns:auto 1fr}
  .nitem a{grid-column:1 / 3}
  .newslist.big .nitem img{grid-column:1 / 3;width:100%;height:150px}
  .work{display:block}
  .work img{height:auto;aspect-ratio:4/3;border-right:0;border-bottom:var(--line)}
  .alert-body h2{font-size:1.2rem}
  .sec-h span{font-size:1.3rem}
  .burst{width:92px;height:92px;font-size:.85rem;left:-4px}
  .hero-img img{transform:none}
  .confirm{grid-template-columns:1fr}
  .confirm dt{border-bottom:0}
  .formbox{padding:18px 16px}
  .hero-cta .btn,.btns .btn{width:100%}
  .play{min-height:60px;font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover,.scard a:hover{transform:none}}