/* HAKONIWA SITE_001 — v6: 3枚目の参考（やいづ原崎矯正歯科）を主役に、構成・色・書体・ヘッダーをほぼそのまま再現 */
:root{
  --cream:#f4f4ee;
  --ink:#1e2d44;
  --muted:#5f6c7d;
  --navy:#3a69a5;        /* 参考の青（波形の面・ボタン） */
  --navy-d:#2f5788;
  --pale:#cfe0ec;        /* 左上の淡い青の波 */
  --line:rgba(30,45,68,.30);
  --cy:#35c6e0;          /* ロゴの水色（ごく小さなアクセントのみ） */
  --shadow:0 10px 30px rgba(40,70,110,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wavew:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{font-size:16px}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--ink);font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:400;line-height:2;font-size:16px;letter-spacing:.04em;-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:Outfit,Inter,sans-serif;font-weight:400;letter-spacing:.02em}
.gutter{margin:0 clamp(14px,2.2vw,34px)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- ヘッダー：右上の波形の青い面にナビ・電話・白い丸ボタン／左上に淡い青の波。サブメニュー・現在地・縮小・開閉アイコン付き ---- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;height:116px;pointer-events:none}
.hd-pale{position:absolute;left:0;top:0;width:min(34vw,470px);height:104px;transform-origin:top left;transition:transform .45s var(--ease);filter:drop-shadow(0 8px 14px rgba(60,100,150,.16))}
.hd-pale svg,.hd-wave svg{display:block;width:100%;height:100%}
.hd-wave{position:absolute;top:0;right:0;width:min(84vw,1260px);height:128px;transform-origin:top right;transition:transform .45s var(--ease),filter .3s;filter:drop-shadow(0 10px 16px rgba(40,80,140,.22))}
.hd-in{position:relative;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;transition:height .45s var(--ease)}
.hd a,.hd button,.has-sub,.sub{pointer-events:auto}
.hd a:focus-visible,.hd button:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
.brand{display:flex;flex-direction:column;gap:5px;transition:background .3s,padding .3s,box-shadow .3s,border-radius .3s,opacity .2s}
.brand:hover{opacity:.82}
.brand .tg{display:block;width:130px;font-size:10px;line-height:1;letter-spacing:0;text-align:justify;text-align-last:justify;white-space:nowrap;color:var(--ink)}
.logo{position:relative;display:block;height:34px;width:130px}
.logo img{position:absolute;left:0;top:0;height:34px;width:auto}
.logo .l-white{opacity:0}
.hd.is-solid .hd-pale{transform:scaleY(.82)}
.hd.is-solid .hd-wave{transform:scaleY(.94)}
.hd.is-solid .hd-in{height:64px}

.nav{display:flex;align-items:center;gap:20px;color:#fff;font-size:14px;font-weight:500;letter-spacing:.08em;padding-right:6px}
.nav .lk{position:relative;display:inline-flex;align-items:center;padding:6px 0;white-space:nowrap}
.nav .lk::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#fff;border-radius:2px;transition:width .3s var(--ease)}
.nav .lk:hover::after,.nav .lk.on::after{width:100%}
.nav .lk .pl{position:relative;display:inline-block;width:9px;height:9px;margin-left:8px;transition:transform .3s var(--ease)}
.nav .lk .pl::before,.nav .lk .pl::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1.5px;background:currentColor}
.nav .lk .pl::after{transform:rotate(90deg)}
.has-sub{position:relative}
.has-sub::after{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:30px}
.has-sub:hover .lk .pl,.has-sub:focus-within .lk .pl{transform:rotate(45deg)}
.sub{position:absolute;top:calc(100% + 22px);left:50%;transform:translate(-50%,10px);min-width:340px;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 18px 40px rgba(30,60,110,.22);padding:10px;opacity:0;visibility:hidden;transition:opacity .22s .16s,transform .3s var(--ease) .16s,visibility 0s .38s}
.sub::before{content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .3s var(--ease),visibility 0s}
.has-sub:hover>.lk::after,.has-sub:focus-within>.lk::after{width:100%}
.sub a{position:relative;display:flex;align-items:center;gap:14px;white-space:nowrap;padding:13px 16px;border-radius:12px;font-size:15px;font-weight:500;letter-spacing:.06em;transition:background .2s}
.sub a:hover{background:#edf3fa}
.sub a .go{margin-left:auto;width:16px;height:16px;color:var(--navy);opacity:.45;stroke-width:2;transition:transform .25s var(--ease),opacity .25s}
.sub a:hover .go,.sub a:focus-visible .go{opacity:1;transform:translateX(4px)}
.sub a .si{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#e8f0f9;color:var(--navy);transition:background .25s,color .25s}
.sub a .si .ico{width:19px;height:19px;stroke-width:1.7}
.sub a:hover .si,.sub a:focus-visible .si{background:var(--navy);color:#fff}
.sub a small{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:.02em}
.nav .tel{display:flex;align-items:center;gap:8px;font:500 18px/1 Outfit,Inter,sans-serif;letter-spacing:.04em;margin-left:6px}
.nav .tel .ico{width:18px;height:18px;stroke-width:1.9}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;height:46px;padding:0 22px;background:#fff;color:var(--navy);border:1.5px solid #fff;border-radius:99px;font-size:14px;font-weight:700;line-height:1;letter-spacing:.04em;white-space:nowrap;box-shadow:0 8px 18px rgba(20,50,100,.2);transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.pill:hover{transform:translateY(-2px);background:#eef5fc;box-shadow:0 12px 22px rgba(20,50,100,.26)}
.pill .ico{width:18px;height:18px;flex:none}
.ico-line{width:22px;height:22px;flex:none}
.pill-mail{background:transparent;color:#fff;border-color:rgba(255,255,255,.9);box-shadow:none}
.pill-mail:hover{background:rgba(255,255,255,.16);box-shadow:none}
.pill-line{padding:0 22px 0 16px}
.burger{display:none;width:46px;height:46px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
.burger::before{top:16px}.burger span{top:22px}.burger::after{top:28px}
.burger[aria-expanded="true"]::before{top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::after{top:22px;transform:rotate(-45deg)}
@media(max-width:1280px){.nav{gap:18px}.nav .tel{display:none}}
@media(max-width:900px){
  .hd{height:92px}
  .hd-wave{width:168px;height:84px}
  .hd-pale{width:300px;height:104px}
  .hd-in{padding:0 16px}
  .burger{display:block;margin-top:-20px;transition:margin-top .45s var(--ease)}
  .hd.is-solid .burger{margin-top:-12px}
  .nav{position:fixed;top:84px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:0;padding:14px;background:#fff;border-radius:20px;box-shadow:0 24px 50px rgba(30,60,110,.3);display:none;color:var(--ink);font-size:16px;pointer-events:auto;max-height:calc(100svh - 110px);overflow:auto}
  .nav.is-open{display:flex;animation:drawer .35s var(--ease)}
  @keyframes drawer{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav .lk{padding:16px 10px;border-bottom:1px solid rgba(30,45,68,.1);display:flex}
  .nav .lk::after{display:none}
  .nav .lk .pl{margin-left:auto}
  .has-sub::after{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:0;padding:4px 0 8px 12px;border-radius:0}
  .has-sub:hover .sub,.has-sub:focus-within .sub{transform:none;transition:none}
  .has-sub .lk .pl,.has-sub:hover .lk .pl,.has-sub:focus-within .lk .pl{transform:rotate(45deg)}
  .has-sub.is-closed .lk .pl,.has-sub.is-closed:hover .lk .pl,.has-sub.is-closed:focus-within .lk .pl{transform:none}
  .has-sub.is-closed .sub,.has-sub.is-closed:hover .sub,.has-sub.is-closed:focus-within .sub{display:none}
  .sub::before{display:none}
  .sub a{padding:12px 10px;font-size:15px}
  .nav .tel{display:flex;color:var(--ink);padding:16px 10px;font-size:18px}
  .nav .tel .ico{color:var(--navy)}
  .pill{margin-top:8px;height:54px;font-size:16px;box-shadow:none}
  .pill-mail{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
  .pill-mail:hover{background:#eef5fc}
  .pill-line{background:#fff;color:#04a547;border:1.5px solid #06c755}
}

/* ---- ファーストビュー（P2）：上下左右に余白のある大きな写真。左下に背景色の面が食い込み、そこに見出し ---- */
.top{position:relative;padding:148px 0 0;--g:clamp(14px,2.2vw,34px);--r:30px}
.photo-wrap{position:relative;width:calc(100% - 2*var(--g));margin:0 auto;height:clamp(560px,52vw,760px)}
.photo-main{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:#cfe3f0}
.slides{position:absolute;inset:0}
.photo-main .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 8s ease-out}
.photo-main .sl.on{opacity:1;transform:scale(1)}
.sds{position:absolute;right:clamp(14px,2vw,30px);bottom:clamp(14px,2vw,28px);z-index:3;display:flex;gap:8px}
.sd{width:26px;height:4px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s,width .3s}
.sd.on{width:44px;background:#fff}.sd:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.photo-main .sl{transition:opacity .01s;transform:none}}
.vtext{position:absolute;right:clamp(14px,2vw,30px);top:clamp(14px,2vw,28px);writing-mode:vertical-rl;background:#fff;padding:20px 12px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.12em;border-radius:3px;white-space:nowrap}
@keyframes draw{to{stroke-dashoffset:0}}
.plate{position:absolute;left:0;bottom:0;z-index:2;background:var(--cream);padding:44px 56px 0 max(0px,calc((100% - 1292px)/2));border-top-right-radius:44px;max-width:min(66%,860px);box-sizing:content-box}
.plate::before,.plate::after{content:"";position:absolute;width:44px;height:44px;background:radial-gradient(circle at 100% 0,transparent 44px,var(--cream) 44.5px)}
.plate::before{right:-44px;bottom:0}
.plate::after{left:0;top:-44px}
.top-eyebrow{margin:0 0 16px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.26em;color:var(--navy);text-transform:uppercase}
.plate h1{margin:0;font-weight:500;color:var(--ink)}
.plate h1 span{display:block}
.plate .l1{font-size:clamp(24px,2.5vw,38px);line-height:1.6;letter-spacing:.1em}
.plate .l2{font-size:clamp(32px,4vw,62px);line-height:1.5;letter-spacing:.06em;font-weight:700;white-space:nowrap}
.plate h1 em{position:relative;display:inline-block;font-style:normal;color:var(--navy)}
.plate h1 em .uline{position:absolute;left:0;bottom:-.08em;width:100%;height:.28em;overflow:visible}
.plate h1 em .uline path{fill:none;stroke:var(--cy);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.1s ease-out .9s forwards}
.top-sub{margin:18px 0 38px;font-size:16px;letter-spacing:.12em;color:var(--muted)}
@media(max-width:860px){
  .top{padding-top:104px;--r:22px}   /* スマホ：最初の画面に、見出しが入るよう、ロゴと写真の間を詰める */
  .photo-wrap{height:auto;aspect-ratio:3/4.2}
  .plate{max-width:94%;padding:26px 26px 0 0}
  .plate::before{width:26px;height:26px;right:-26px;background:radial-gradient(circle at 100% 0,transparent 26px,var(--cream) 26.5px)}
  .plate::after{width:26px;height:26px;top:-26px;background:radial-gradient(circle at 100% 0,transparent 26px,var(--cream) 26.5px)}
  .plate{border-top-right-radius:26px}
  .plate .l1{font-size:clamp(18px,5vw,24px)}
  .plate .l2{font-size:clamp(24px,6.4vw,38px);letter-spacing:.03em}
  .top-sub{font-size:13px;margin:12px 0 24px}
  .vtext{right:20px;top:18px;font-size:11.5px;padding:16px 13px 18px;line-height:2.1;letter-spacing:.05em}   /* 写真の角（丸み）から離し、行の間とふちの余白を広げる。高さは抑えて、下の見出しの面とぶつからないように */
}

/* ---- News ---- */
.news{padding:115px 0 265px}
.news-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,8vw,120px);align-items:center;max-width:1360px;margin:0 auto;padding:0 clamp(14px,2.2vw,34px)}
.news-l{padding-left:clamp(0px,3vw,50px)}
.news-ttl{position:relative;display:inline-block}
.news .big-en{color:var(--ink)}
.news .nbirds{left:calc(100% + 18px);top:-10px;bottom:auto;width:70px;height:50px}
.news-ds{margin:18px 0 18px;line-height:2;font-size:16px;letter-spacing:.06em}
@media(max-width:860px){.news{padding:70px 0 180px}.news-in{grid-template-columns:1fr;gap:28px}.news-l{padding-left:0}}
.sec-vlabel{writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;color:var(--navy);letter-spacing:.14em;line-height:1.2}
.sec-vlabel b{font:500 20px/1 Outfit,sans-serif;letter-spacing:.06em}
.sec-vlabel span{font-size:12px}
.nlist{list-style:none;margin:0;padding:0;max-width:none}
.nlist li{border-top:1px solid var(--line)}
.nlist li:last-child{border-bottom:1px solid var(--line)}
.nlist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px}
.nlist .d{display:block;font:400 13px/1.5 Outfit,sans-serif;color:var(--navy);letter-spacing:.06em}
.nlist .t{display:block;font-size:16px;line-height:1.8}
.plus{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--navy);font:500 15px/1 Outfit,sans-serif;box-shadow:0 2px 8px rgba(40,70,110,.1);transition:transform .3s var(--ease)}
.nlist a:hover .plus{transform:translateX(4px)}
.plus .ico{width:14px;height:14px;stroke-width:2}

/* ---- Message：角丸の写真＋見出し＋文＋手描き下線のリンク／縦長の巨大な薄い英字 ---- */
.msg{position:relative;padding:100px 0 120px;overflow-x:clip}
.msg-in{max-width:1360px;margin:0 auto;padding:0 clamp(14px,2.2vw,34px);display:grid;grid-template-columns:auto 1fr 1.15fr;gap:clamp(24px,5vw,70px);align-items:start}
.msg-vt{writing-mode:vertical-rl;margin:0;font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.6;letter-spacing:.18em;height:min(520px,60vw)}
.msg-tx{padding-top:30px}
.msg-eb{margin:0 0 20px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.26em;color:var(--navy);text-transform:uppercase}
.msg p{margin:0 0 22px;font-size:16px;line-height:2.3;letter-spacing:.08em}
.msg .msg-eb{font-size:12px;line-height:1;letter-spacing:.26em}
.msg-pic{position:relative;aspect-ratio:4/5}
.msg-ph{width:100%;height:100%;border-radius:26px;overflow:hidden}
.msg-ph img{width:100%;height:100%;object-fit:cover;display:block}
.msg .msg-bubble{position:absolute;left:58px;bottom:103px;margin:0;padding:16px 34px;background:#fff;border-radius:99px;font-size:16px;line-height:1.5;letter-spacing:.12em;filter:drop-shadow(0 8px 14px rgba(30,60,110,.16))}
.msg .msg-bubble::after{content:"";position:absolute;left:30px;top:calc(100% - 3px);width:34px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Cpath fill='%23fff' d='M10 0C10 12 8 21 1 27C18 26 30 15 34 0Z'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.msg-cat{position:absolute;z-index:3;left:-168px;top:calc(100% - 154px);width:300px;height:auto;pointer-events:none;user-select:none}
.js .msg-bubble{opacity:0;transform:scale(.15);transform-origin:34px calc(100% + 26px)}
.js .msg-bubble.pop{animation:bpop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards}
@keyframes bpop{0%{opacity:0;transform:scale(.15)}55%{opacity:1}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.js .msg-bubble{opacity:1;transform:none}.js .msg-bubble.pop{animation:none}}
.band{background:#e4eef5;margin:240px 0 130px}
.bw{position:absolute;left:0;width:100%;height:180px;pointer-events:none;overflow:hidden}
.bw-t{top:-179px}.bw-b{bottom:-179px}
.bw .l{animation:bw-sway 16s ease-in-out infinite alternate}
.bw .l2{animation-duration:21s;animation-delay:-6s}
.bw .l3{animation-duration:27s;animation-delay:-11s}
@keyframes bw-sway{from{transform:translate(-46px,-4px)}to{transform:translate(46px,5px)}}
@media(prefers-reduced-motion:reduce){.bw .l{animation:none}}
.link-h{display:inline-flex;align-items:center;gap:14px;font-size:14px;margin-top:14px;letter-spacing:.1em;position:relative;padding-bottom:20px}
.link-h svg.ul{position:absolute;left:0;bottom:0;width:150px;height:14px;overflow:visible}
.link-h svg.ul path{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round}
.link-h .go{width:26px;height:18px;border-radius:99px;background:var(--navy);color:#fff;display:grid;place-items:center}
.link-h .go .ico{width:11px;height:11px;stroke-width:2.2}
.birds{position:absolute;left:14%;bottom:36px;width:70px;height:60px}
.birds svg{position:absolute;fill:var(--navy)}
@media(max-width:900px){
  .msg{padding:70px 0 100px}
  .msg .msg-bubble{left:132px;bottom:72px;font-size:14px;padding:12px 24px}
  .msg-cat{left:-6px;top:calc(100% - 94px);width:210px}
  .msg-in{grid-template-columns:1fr;gap:32px}
  .msg-vt{writing-mode:horizontal-tb;height:auto;font-size:clamp(22px,6vw,30px);line-height:1.9}
  .msg-tx{padding-top:0}
  .msg-tx p br{display:none}
}

/* ---- 青い波形の章（Service／Contact） ---- */
.navy{position:relative;background:var(--navy);color:#fff;padding:170px 0 150px}
.navy::before,.navy::after{content:"";position:absolute;left:0;right:0;height:var(--wavew);background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.navy::before{top:-169px;height:170px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237fb2e0' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%237fb2e0' stop-opacity='0.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fc0e8' stop-opacity='0.42'/%3E%3Cstop offset='1' stop-color='%238fc0e8' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a6d0ee' stop-opacity='0.38'/%3E%3Cstop offset='1' stop-color='%23a6d0ee' stop-opacity='0.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0,170) scale(1,-1)'%3E%3Cpath fill='url(%23c)' d='M0 0V104C260 156 520 114 760 130S1180 160 1440 104V0Z'/%3E%3Cpath fill='url(%23b)' d='M0 0V80C240 124 480 72 780 100S1200 134 1440 86V0Z'/%3E%3Cpath fill='url(%23a)' d='M0 0V58C300 102 520 50 820 76S1220 110 1440 62V0Z'/%3E%3C/g%3E%3Cpath fill='%233a69a5' transform='translate(0,90)' d='M0 80V46C150 8 330 6 520 40S880 82 1070 44 1330 14 1440 36V80Z'/%3E%3C/svg%3E")}
.navy.bt::after{bottom:calc(var(--wavew)*-1 + 1px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%233a69a5' d='M0 0V34C150 72 330 74 520 40S880 -2 1070 36 1330 66 1440 44V0Z'/%3E%3C/svg%3E")}
.navy.bt{margin-bottom:var(--wavew)}
.big-en{margin:0;font:500 clamp(34px,3.4vw,50px)/1.1 Outfit,sans-serif;letter-spacing:.01em}
.big-en small{display:block;margin-top:10px;font:400 14px/1.4 "Noto Sans JP";letter-spacing:.14em}
.navy h3{margin:0 0 26px;font-size:clamp(18px,1.6vw,23px);font-weight:500;line-height:2;letter-spacing:.14em}
.navy .rule{display:block;width:34px;height:1px;background:rgba(255,255,255,.8);margin:0 0 22px}
.navy p{margin:0;font-size:16px;line-height:2.3;letter-spacing:.1em;opacity:.95}
.navy p.big-en,.navy h2.big-en{font:500 clamp(34px,3.4vw,50px)/1.1 Outfit,sans-serif;letter-spacing:.01em;opacity:1}
.navy p.big-en small,.navy h2.big-en small{font:400 14px/1.4 "Noto Sans JP";letter-spacing:.14em}
.svc3{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(30px,6vw,90px);max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,60px);align-items:stretch}
.svc3 h3{margin:26px 0 22px}
.svc3{position:relative;z-index:1}
.stabs{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.stab{width:100%;box-sizing:border-box;text-decoration:none;display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.stab:hover{background:rgba(255,255,255,.12)}
.stab .tile{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;transition:background .25s,color .25s}
.stab .tile .ico{width:24px;height:24px;stroke-width:1.6}
.stab .tt{display:flex;flex-direction:column;gap:2px;flex:1}.stab .tt b{font-size:17px;font-weight:500;letter-spacing:.1em}.stab .tt small{font-size:12px;opacity:.8;letter-spacing:.04em}
.stab .go{width:16px;height:16px;stroke-width:2;opacity:.8}
.stab.on{background:#fff;color:var(--navy);border-color:#fff}.stab.on .tile{background:var(--navy);color:#fff}
.scard{position:relative;min-height:0;border-radius:26px;overflow:hidden;background:#2f5788;display:flex;align-items:flex-end;transition:opacity .18s}
.scard.sw .scard-in{opacity:0;transform:translateY(8px)}
.scard-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.scard-bg.on{opacity:1}
.scard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,70,125,.94) 0%,rgba(40,80,140,.72) 45%,rgba(40,80,140,.18) 100%)}
.scard-in{position:relative;z-index:1;width:100%;padding:40px 44px 42px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:opacity .18s,transform .18s}
.scard-in h4{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:.1em}
.scard-in p{font-size:15px;line-height:2.1;max-width:560px}
.scard-in ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.scard-in li{font-size:13px;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.scard-in .pr{font:500 14px/1.6 "Noto Sans JP";background:rgba(255,255,255,.2);padding:.3em 1em;border-radius:99px}
.sc-btn{display:inline-flex;align-items:center;gap:12px;margin-top:10px;background:#fff;color:var(--navy);padding:15px 30px;border-radius:99px;font-size:15px;letter-spacing:.08em;transition:transform .25s var(--ease)}
.sc-btn:hover{transform:translateY(-2px)}
.sc-btn .go{width:16px;height:16px;stroke-width:2}
@media(max-width:900px){
  .navy{padding:120px 0 100px}
  .svc3{grid-template-columns:1fr;gap:34px}
  .scard{min-height:460px}
  .svc3{align-items:start}
  .scard-in{padding:28px 24px 30px}
}

/* ---- Works：左に見出し、右は中央から右端までのカルーセル（カードは右端まで流れる） ---- */
.works{position:relative;padding:130px 0 190px;overflow:hidden}
.wk{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;padding-left:max(clamp(20px,4vw,60px),calc((100% - 1180px)/2 + clamp(20px,4vw,60px)))}
.wk-l .big-en{color:var(--ink)}.wk-l .big-en small{color:var(--muted)}
.wk-ds{margin:26px 0 30px;font-size:16px;line-height:2.1;letter-spacing:.08em}
.wk-ctl{display:flex;align-items:center;gap:12px;margin-top:44px}
.wk-ar{width:48px;height:48px;border-radius:50%;border:1px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.wk-ar:hover:not(:disabled){background:var(--navy);color:#fff}.wk-ar:disabled{opacity:.35;cursor:default}
.wk-ar .ico{width:16px;height:16px;stroke-width:2}.wk-prev .ico{transform:scaleX(-1)}
.wk-no{margin-left:14px;font:400 14px/1 Outfit,sans-serif;letter-spacing:.12em;color:var(--muted)}.wk-no b{font-weight:500;color:var(--ink);font-size:18px}
.wk-rail{display:flex;gap:clamp(18px,2.2vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 60px 6px 0;outline:none}
.wk-rail::-webkit-scrollbar{display:none}
.wc{flex:0 0 clamp(280px,31vw,440px);scroll-snap-align:start;display:block;position:relative;border-radius:24px;overflow:hidden;color:#fff;aspect-ratio:4/3.3;background:#2f5788}
.wc .ph{position:absolute;inset:0}
.wc .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,40% 100%);display:block;transform:scale(var(--sc,1.5));transform-origin:var(--org,40% 100%);transition:transform .9s var(--ease)}
.wc:hover .ph img{transform:scale(calc(var(--sc,1.5) + .1))}
.wc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,70,125,.92),rgba(40,80,140,.1) 62%);pointer-events:none}
.wc .tx{position:absolute;left:22px;right:72px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.wc .cat{display:inline-block;font:500 12px/1 Outfit,sans-serif;letter-spacing:.14em;color:var(--navy);background:#fff;padding:6px 12px;border-radius:99px}
.wc .nm{display:block;max-width:100%;overflow:hidden;white-space:nowrap;font-size:17px;font-weight:500;letter-spacing:.08em;line-height:1.6}
.wc .nm.is-over{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.wc .nm-in{display:inline-block;transition:transform var(--t,0s) linear}
.wc:hover .nm.is-over,.wc:focus-visible .nm.is-over{-webkit-mask-image:none;mask-image:none}
.wc:hover .nm-in,.wc:focus-visible .nm-in{transform:translateX(calc(var(--ov,0px)*-1))}
.wc .go2{position:absolute;right:20px;bottom:22px;z-index:2;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;transition:transform .3s var(--ease)}
.wc:hover .go2{transform:translateX(3px)}.wc .go2 .ico{width:15px;height:15px;stroke-width:2.2}
@media(prefers-reduced-motion:reduce){.wc .nm-in{transition:none}.wc:hover .nm-in,.wc:focus-visible .nm-in{transform:none}}
.btn-navy{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:14px 28px;border-radius:99px;font-size:14px;font-weight:500;letter-spacing:.1em;transition:transform .25s var(--ease)}
.btn-navy:hover{transform:translateY(-2px)}
.btn-navy .ico{width:13px;height:13px;stroke-width:2.2}
@media(max-width:900px){.works{padding:90px 0 120px}.wk{grid-template-columns:1fr;gap:34px;padding-left:20px}.wk-l{padding-right:20px}.wk-ctl{margin-top:30px}.wc{flex-basis:78vw}.wk-rail{padding-right:20px}}

/* ---- Contact（青い波形の章・大きな白いボタン） ---- */
.contact{padding:150px 0 170px;text-align:left}
.ct-in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,60px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,6vw,90px);align-items:start}
.ct-in h3{font-size:clamp(20px,2vw,28px)}
.btn-wh{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--navy);padding:20px 40px;border-radius:99px;font-size:16px;font-weight:700;letter-spacing:.08em;box-shadow:0 14px 30px rgba(0,30,70,.25);transition:transform .25s var(--ease)}
.btn-wh:hover{transform:translateY(-3px)}
.btn-wh .ico-line{width:26px;height:26px}
.alt{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.alt a{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.6);padding:13px 24px;border-radius:99px;font-size:14px;font-weight:500;letter-spacing:.08em;transition:background .25s}
.alt a:hover{background:rgba(255,255,255,.14)}
.ct-act{display:grid;gap:18px;width:fit-content;max-width:100%;margin-top:30px}
.ct-act>p{margin:0}
.ct-act .btn-wh{display:flex;justify-content:center;width:100%;box-sizing:border-box}
.ct-act .alt{margin-top:0}

.hours{margin-top:22px;font-size:13px;opacity:.85}
.ct-act>p.hours{margin:-6px 0 0;text-align:center;font-size:13px}
@media(max-width:900px){.contact{padding:120px 0 100px}.ct-in{grid-template-columns:1fr;gap:30px}.ct-in p br{display:none}}

/* ---- footer ---- */
.ft{position:relative;background:var(--navy-d);color:#cfdbea;font-size:14px;padding:40px 0 120px;line-height:2}
.fw{position:absolute;left:0;right:0;top:-109px;width:100%;height:110px;display:block;pointer-events:none}
.ft .fb{left:auto;right:clamp(20px,4vw,60px);top:-52px;bottom:auto;width:70px;height:50px}.ft .fb svg{fill:#fff}
.ft .wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,60px);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
.ft img{height:36px;width:auto;margin-bottom:14px}
.ft h5{margin:0 0 10px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.18em;color:#fff}
.ft a{display:block;padding:3px 0;transition:color .2s}
.ft a:hover{color:#fff}
.copy{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:18px;margin-top:6px;font-size:12px}
.copy .lk{display:flex;gap:22px;flex-wrap:wrap}.copy .lk a{padding:0}
@media(max-width:700px){.ft .wrap{grid-template-columns:1fr}.copy .lk{flex-direction:column;gap:0}.copy .lk a{padding:3px 0}}

/* ---- mobile fixed bar ---- */
.fixbar{display:none}
@media(max-width:760px){
  .fixbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -4px 20px rgba(0,0,0,.14)}
  .fixbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:10px 4px calc(10px + env(safe-area-inset-bottom));text-align:center;font-size:14px;font-weight:700;color:#fff;letter-spacing:.08em;line-height:1}
  .fixbar .ico,.fixbar .ico-line{width:26px;height:26px;stroke-width:1.8}
  .fixbar a:nth-child(1){background:#06c755}
  .fixbar a:nth-child(2){background:var(--navy)}
  .fixbar a:nth-child(3){background:var(--navy-d)}
}

/* ---- reveal（ヒーロー以外）。JSが無ければ表示のまま ---- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)}
.js .rv.in{opacity:1;transform:none}
@keyframes bob{50%{transform:translateY(-8px)}}
.birds svg{animation:bob 6s ease-in-out infinite}
.birds svg:nth-child(2){animation-delay:-2.5s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
    html{scroll-behavior:auto}
}

/* サービスの章の下端：参考画像のように、半透明の水色の波を重ねる（紺 → 透ける水色の波3枚 → 背景色） */
#service.navy.bt::after,.pg-flow.navy.bt::after{height:170px;bottom:-169px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237fb2e0' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%237fb2e0' stop-opacity='.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fc0e8' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%238fc0e8' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a6d0ee' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23a6d0ee' stop-opacity='.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23c)' d='M0 0V104C260 156 520 114 760 130S1180 160 1440 104V0Z'/%3E%3Cpath fill='url(%23b)' d='M0 0V80C240 124 480 72 780 100S1200 134 1440 86V0Z'/%3E%3Cpath fill='url(%23a)' d='M0 0V58C300 102 520 50 820 76S1220 110 1440 62V0Z'/%3E%3Cpath fill='%233a69a5' d='M0 0V34C150 72 330 74 520 40S880 -2 1070 36 1330 66 1440 44V0Z'/%3E%3C/svg%3E")}
#service.navy.bt{margin-bottom:170px}

.navy .hbirds svg{fill:#fff}
.hbirds{left:calc(100% + 18px);top:-10px;bottom:auto;width:70px;height:50px}
.ct-in>.news-ttl{justify-self:start}

/* スマホ：波が縮まって急にならないよう、横を広げて中央を見せる */
@media(max-width:700px){
  .navy::before,.navy::after{background-size:240% 100%;background-position:50% 0}
  .bw{height:110px}.bw-t{top:-109px}.bw-b{bottom:-109px}
  .fw{height:70px;top:-69px}
  .ct-act{width:100%}
  .ct-act .alt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ct-act .alt a{justify-content:center;padding-left:8px;padding-right:8px}
}

.ft a.ext{display:inline-flex;align-items:center;gap:6px}.ft a.ext .ico{width:14px;height:14px;stroke-width:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 下層ページ（サービス詳細など） ---- */
.pg-in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}
.pg-narrow{max-width:900px}
.pg-hero{padding:150px 0 90px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:34px}
.crumb a:hover{color:var(--navy)}
.pg-hero-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.pg-hero h1{margin:10px 0 24px;font-size:clamp(26px,2.8vw,40px);font-weight:500;line-height:1.5;letter-spacing:.08em}
.pg-hero .lead{margin:0 0 34px;line-height:2.1;letter-spacing:.06em}
.pg-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pg-sub{display:inline-flex;align-items:center;border:1px solid var(--navy);color:var(--navy);padding:13px 28px;border-radius:99px;font-size:14px;font-weight:500;letter-spacing:.1em;transition:background .25s,color .25s}
.pg-sub:hover{background:var(--navy);color:#fff}
.pg-photo{border-radius:26px;overflow:hidden;aspect-ratio:4/3.4}
.pg-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pg-sec{padding:110px 0}
.pg-flow{padding:170px 0 150px}
.pg-lead{margin:18px 0 44px;line-height:2;letter-spacing:.06em}
.pg-cards,.pg-plans,.pg-steps,.pg-uses{list-style:none;margin:0;padding:0}
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-card{background:#fff;border-radius:24px;padding:34px 30px;box-shadow:0 10px 30px rgba(30,60,110,.07)}
.pg-tag{display:inline-block;font:500 12px/1 "Noto Sans JP";letter-spacing:.2em;color:var(--navy);background:#e4eef5;border-radius:99px;padding:7px 14px}
.pg-card h3{margin:18px 0 12px;font-size:18px;font-weight:500;letter-spacing:.08em;line-height:1.7}
.pg-card p{margin:0;font-size:15px;line-height:2;letter-spacing:.05em}
.pg-h4{margin:60px 0 18px;font-size:16px;font-weight:500;letter-spacing:.1em}
.pg-uses{display:flex;flex-wrap:wrap;gap:12px}
.pg-uses li{border:1px solid rgba(58,105,165,.4);border-radius:99px;padding:10px 22px;font-size:14px;letter-spacing:.06em}
.pg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-steps li{border:1px solid rgba(255,255,255,.35);border-radius:24px;padding:28px 26px;background:rgba(255,255,255,.06)}
.pg-steps b{font:500 14px/1 Outfit,sans-serif;letter-spacing:.2em;color:#a6d0ee}
.pg-steps h3{margin:12px 0 10px;font-size:18px;letter-spacing:.1em}
.pg-steps p{margin:0;font-size:15px;line-height:2;letter-spacing:.05em}
.pg-works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-works .wc{flex:none;width:auto}
.pg-more{margin:34px 0 0}
.pg-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pg-plan{position:relative;background:#fff;border-radius:26px;padding:36px 30px 30px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(30,60,110,.07)}
.pg-plan.rec{outline:2px solid var(--navy)}
.pg-plan .rc{position:absolute;top:-14px;left:26px;background:var(--navy);color:#fff;font-size:12px;letter-spacing:.14em;padding:6px 14px;border-radius:99px}
.pg-plan h3{margin:0 0 14px;font-size:17px;font-weight:500;letter-spacing:.1em}
.pg-plan .pr{margin:0;font-size:15px}
.pg-plan .pr b{font:500 30px/1.2 Outfit,"Noto Sans JP",sans-serif;letter-spacing:.02em;color:var(--navy)}
.pg-plan .pr small{font-size:13px;color:var(--muted);margin-left:4px}
.pg-plan .dl{margin:6px 0 18px;font-size:14px;color:var(--muted)}
.pg-plan ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.pg-plan li{font-size:15px;line-height:1.9;padding-left:18px;position:relative}
.pg-plan li::before{content:"";position:absolute;left:2px;top:.85em;width:7px;height:7px;border-radius:50%;background:#a6d0ee}
.pg-btn{display:flex;justify-content:center;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:99px;padding:14px;font-size:15px;letter-spacing:.1em}
.pg-btn .ico{width:16px;height:16px;stroke-width:2}
.pg-faq details{border-top:1px solid rgba(30,45,68,.2)}
.pg-faq details:last-child{border-bottom:1px solid rgba(30,45,68,.2)}
.pg-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font-size:16px;font-weight:500;letter-spacing:.06em;line-height:1.7}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq .pl{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:var(--navy)}
.pg-faq .pl::before,.pg-faq .pl::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;background:#fff;transition:transform .3s}
.pg-faq .pl::after{transform:rotate(90deg)}
.pg-faq details[open] .pl::after{transform:rotate(0)}
.pg-faq details p{margin:0;padding:0 4px 26px;font-size:15px;line-height:2.1;letter-spacing:.05em}
.pg-others{padding-top:30px}
.pg-oths{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pg-oth{display:flex;align-items:center;gap:18px;background:#fff;border-radius:24px;padding:26px 28px;box-shadow:0 10px 30px rgba(30,60,110,.07);transition:transform .3s}
.pg-oth:hover{transform:translateY(-3px)}
.pg-oth .si{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e4eef5;color:var(--navy)}
.pg-oth b{display:block;font-weight:500;font-size:17px;letter-spacing:.08em}
.pg-oth small{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.pg-oth>.ico{margin-left:auto;width:18px;height:18px;color:var(--navy)}
@media(max-width:900px){
  .pg-hero{padding:120px 0 60px}
  .pg-hero-g,.pg-cards,.pg-steps,.pg-works,.pg-plans,.pg-oths{grid-template-columns:1fr}
  .pg-sec{padding:80px 0}.pg-flow{padding:120px 0 100px}
}

/* 下層ページのヒーロー（トップと同じ形：大きな写真の左下に背景色の面が食い込む） */
.pg-hero{padding:148px 0 40px}
.pg-hw{position:relative;max-width:1360px;margin:0 auto;padding:0 clamp(14px,2.2vw,34px)}
.pg-pic{height:clamp(420px,42vw,560px);border-radius:30px;overflow:hidden}
.pg-pic img{width:100%;height:100%;object-fit:cover;display:block}
.pg-plate{position:absolute;left:clamp(14px,2.2vw,34px);bottom:0;width:min(660px,62%);background:var(--cream);border-top-right-radius:40px;padding:38px 48px 0 clamp(0px,3vw,50px)}
.pg-plate .crumb{margin-bottom:20px}
.pg-plate h1{margin:6px 0 16px;font-size:clamp(26px,2.8vw,40px);font-weight:500;line-height:1.5;letter-spacing:.08em}
.pg-plate .lead{margin:0 0 24px;font-size:15px;line-height:2;letter-spacing:.05em}
@media(max-width:900px){
  .pg-hero{padding:112px 0 20px}
  .pg-pic{height:300px}
  .pg-plate{position:static;width:auto;border-radius:0;padding:28px 6px 0}
}

/* Features：水色の帯＋左に見出し・右に縦の一覧 */
.pg-band{position:relative;background:#e4eef5;margin:170px 0 190px;padding:100px 0 110px}
.pg-f2{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,8vw,120px);align-items:start}
.pg-f2l{position:sticky;top:100px}
.pg-f2l .pg-lead{margin-bottom:34px}
.pg-f2l .pg-h4{margin-top:0}
.pg-f2l .pg-uses li{background:#fff;border-color:transparent}
.pg-f2r{list-style:none;margin:0;padding:0;border-top:1px solid rgba(30,45,68,.22)}
.pg-f2r li{display:grid;grid-template-columns:110px 1fr;gap:26px;align-items:baseline;padding:34px 4px;border-bottom:1px solid rgba(30,45,68,.22)}
.pg-f2r .k{font:500 26px/1.3 "Noto Sans JP";letter-spacing:.14em;color:var(--navy)}
.pg-f2r h3{margin:0 0 10px;font-size:18px;font-weight:500;letter-spacing:.08em;line-height:1.7}
.pg-f2r p{margin:0;font-size:15px;line-height:2;letter-spacing:.05em}
@media(max-width:900px){
  .pg-band{margin:120px 0 130px;padding:70px 0 80px}
  .pg-f2{grid-template-columns:1fr}.pg-f2l{position:static}
  .pg-f2r li{grid-template-columns:1fr;gap:8px}
}

/* 「こんな業種・用途に対応しています」を埋もれさせない：線で区切り、英字の小見出し＋大きめの文字 */
.pg-f2l .pg-h4{margin:50px 0 20px;padding-top:44px;border-top:1px solid rgba(30,45,68,.22);font-size:20px;font-weight:500;line-height:1.7;letter-spacing:.1em;color:var(--ink)}
.pg-f2l .pg-h4::before{content:var(--en,"Industries");display:block;margin-bottom:10px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--navy)}

/* 対応業種：2列の小さなタイル＋短い説明 */
.pg-f2l .pg-uses{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pg-f2l .pg-uses li{background:#fff;border:0;border-radius:20px;padding:18px 18px 20px;box-shadow:0 8px 22px rgba(30,60,110,.06);font-size:inherit;letter-spacing:normal}
.pg-uses b{display:block;margin-bottom:6px;font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--navy)}
.pg-uses small{display:block;font-size:13px;line-height:1.8;letter-spacing:.02em;color:var(--muted)}
@media(max-width:560px){.pg-f2l .pg-uses{grid-template-columns:1fr}}

/* Featuresの左右の高さをそろえる */
.pg-f2l{position:static}
.pg-f2r li{padding-top:52px;padding-bottom:52px}
.pg-f2l .pg-uses li{padding:16px 16px 18px}
.pg-f2l .pg-h4{margin-top:40px;padding-top:36px}
.pg-f2l .pg-lead{margin-bottom:28px}
.pg-f2{align-items:stretch}
.pg-f2r{display:flex;flex-direction:column}
.pg-f2r li{flex:1;align-content:center;padding-top:20px;padding-bottom:20px}
@media(max-width:900px){.pg-f2r li{flex:none;padding-top:30px;padding-bottom:30px}}

/* Flow：中央の線に沿って左右交互に並べる */
.pg-center{text-align:center}
.pg-center .news-ttl{display:inline-block}
.pg-flow .pg-lead{margin:18px 0 56px}
.pg-flow .pg-l4{position:relative;list-style:none;max-width:880px;margin:0 auto;padding:0}
.pg-l4::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.4)}
.pg-l4 li{position:relative;width:calc(50% - 44px);padding:0 0 44px}
.pg-l4 li:nth-child(odd){text-align:right}
.pg-l4 li:nth-child(even){margin-left:calc(50% + 44px)}
.pg-l4 li::before{content:attr(data-n);position:absolute;top:-6px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font:500 14px/1 Outfit,sans-serif;letter-spacing:.06em}
.pg-l4 li:nth-child(odd)::before{right:-64px}
.pg-l4 li:nth-child(even)::before{left:-64px}
.pg-l4 li:last-child{padding-bottom:0}
.pg-l4 h3{margin:0 0 6px;font-size:18px;letter-spacing:.1em;line-height:1.8}
.pg-l4 p{margin:0;font-size:15px;line-height:2;letter-spacing:.05em}
@media(max-width:900px){
  .pg-l4::before{left:20px}
  .pg-l4 li,.pg-l4 li:nth-child(even){width:auto;margin:0 0 0 64px;text-align:left}
  .pg-l4 li:nth-child(odd)::before,.pg-l4 li:nth-child(even)::before{left:-64px;right:auto}
}

/* Works：大1＋小2 */
.pg-works{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;height:560px}
.pg-works .wc{aspect-ratio:auto}
.pg-works .wc:first-child{grid-row:1/3}
@media(max-width:900px){.pg-works{grid-template-columns:1fr;grid-template-rows:none;height:auto}.pg-works .wc,.pg-works .wc:first-child{grid-row:auto;aspect-ratio:4/3}}

/* Price：水色の帯の上に、同じ幅の3プラン。おすすめだけ青く塗って少し高くする */
.pg-price{margin:130px 0 150px}
.pg-plans{grid-template-columns:repeat(3,1fr);align-items:center}
.pg-plan{padding:34px 28px 28px}
.pg-plan.rec{outline:0;background:var(--navy);color:#fff;padding:52px 28px 36px;box-shadow:0 24px 50px rgba(30,60,110,.28)}
.pg-plan.rec h3,.pg-plan.rec .pr b,.pg-plan.rec .pr small,.pg-plan.rec .dl,.pg-plan.rec li{color:#fff}
.pg-plan.rec .pr b{font-size:34px}
.pg-plan.rec li::before{background:#a6d0ee}
.pg-plan.rec .pg-btn{background:#fff;color:var(--navy)}
.pg-plan.rec .rc{background:#fff;color:var(--navy);left:50%;transform:translateX(-50%)}
@media(max-width:900px){.pg-plans{grid-template-columns:1fr}.pg-price{margin:90px 0 110px}}

/* Price：比較表（見出し列は別の色、3プランは同じ幅） */
.pg-price{margin:0}
.pg-tw{overflow-x:auto;border-radius:26px;box-shadow:0 10px 30px rgba(30,60,110,.08)}
.pg-tbl{width:100%;min-width:720px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff}
.pg-tbl th,.pg-tbl td{padding:22px 26px;text-align:left;vertical-align:top;font-size:15px;line-height:1.9;letter-spacing:.05em;border-bottom:1px solid rgba(30,45,68,.12)}
.pg-tbl th:first-child{width:150px;background:#eceee4;font-size:14px;font-weight:500;color:var(--muted)}
.pg-tbl thead th{font-size:17px;font-weight:500;letter-spacing:.1em;padding-top:34px;padding-bottom:26px;vertical-align:bottom}
.pg-tbl thead th:first-child{background:#eceee4}
.pg-tbl .rec{background:#e4eef5}
.pg-tbl thead th.rec{background:var(--navy);color:#fff}
.pg-tbl .rc{display:inline-block;margin-bottom:8px;background:#fff;color:var(--navy);font-size:12px;letter-spacing:.14em;padding:5px 12px;border-radius:99px}
.pg-tbl .pr{font:500 26px/1.3 Outfit,"Noto Sans JP",sans-serif;color:var(--navy)}
.pg-tbl .pr small{font-size:13px;color:var(--muted);margin-left:3px}
.pg-tbl tr:last-child th,.pg-tbl tr:last-child td{border-bottom:0}
.pg-tbl .pg-btn{padding:12px 16px;font-size:14px}

/* Price表の見直し：左の項目列は青、おすすめの見出しは濃くせず水色のまま */
.pg-tbl th:first-child,.pg-tbl thead th:first-child{background:var(--navy);color:#fff;font-weight:500;border-bottom-color:rgba(255,255,255,.25)}
.pg-tbl thead th.rec{background:#e4eef5;color:var(--ink);box-shadow:inset 0 4px 0 var(--navy)}
.pg-tbl .rc{background:var(--navy);color:#fff}

/* Price：同じ幅の3カード。おすすめはカード自体の色を変えて目立たせる */
.pg-price{margin:130px 0 150px}
.pg-t2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pg-t2 .pl{position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.62);border-radius:26px;padding:34px 28px 28px}
.pg-t2 .pl.rec{background:var(--navy);color:#fff;box-shadow:0 24px 50px rgba(30,60,110,.26)}
.pg-t2 h3{margin:0 0 18px;font-size:17px;font-weight:500;letter-spacing:.1em}
.pg-t2 .rc{align-self:flex-start;margin-bottom:12px;background:#fff;color:var(--navy);font-size:12px;letter-spacing:.14em;padding:5px 12px;border-radius:99px}
.pg-t2 .blk{padding:14px 0;border-top:1px solid rgba(30,45,68,.14)}
.pg-t2 .rec .blk{border-top-color:rgba(255,255,255,.3)}
.pg-t2 .blk small{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.14em;color:var(--muted)}
.pg-t2 .rec .blk small{color:#cfe0ee}
.pg-t2 .blk p{margin:0;font-size:15px;line-height:1.9;letter-spacing:.05em}
.pg-t2 .pp{font:500 28px/1.3 Outfit,"Noto Sans JP",sans-serif;color:var(--navy)}
.pg-t2 .rec .pp{color:#fff}
.pg-t2 .pp i{font-style:normal;font-size:13px;color:var(--muted);margin-left:3px}
.pg-t2 .rec .pp i{color:#cfe0ee}
.pg-t2 .blk:nth-of-type(3){flex:1}
.pg-t2 .pg-btn{margin-top:14px}
.pg-t2 .rec .pg-btn{background:#fff;color:var(--navy)}
/* 3列のときは、おすすめのバッジを上の余白に浮かせ、どのカードもプラン名が同じ高さから始まるようにする */
@media(min-width:901px){.pg-t2 .pl{padding-top:76px}.pg-t2 .rc{position:absolute;top:30px;left:28px;margin:0}}
@media(max-width:900px){.pg-t2{grid-template-columns:1fr}.pg-price{margin:90px 0 110px}}

/* 「相談する」ボタンのホバー */
.pg-btn{transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.pg-btn .ico{transition:transform .25s var(--ease)}
.pg-btn:hover,.pg-btn:focus-visible{transform:translateY(-2px);background:var(--navy-d);box-shadow:0 8px 18px rgba(30,60,110,.25)}
.pg-btn:hover .ico,.pg-btn:focus-visible .ico{transform:translateX(3px)}
.pg-t2 .rec .pg-btn:hover,.pg-t2 .rec .pg-btn:focus-visible{background:#e4eef5;color:var(--navy);box-shadow:0 8px 18px rgba(0,0,0,.18)}

/* FAQ：1問を1枚のカードにして、Q・Aの丸い印を付ける */
.pg-q3{display:grid;gap:14px;margin-top:40px}
.pg-q3 details{background:#fff;border-radius:22px;box-shadow:0 8px 24px rgba(30,60,110,.07)}
.pg-q3 summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 26px;font-size:16px;font-weight:500;letter-spacing:.06em;line-height:1.7}
.pg-q3 summary::-webkit-details-marker{display:none}
.pg-q3 .qb,.pg-q3 .ab{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font:500 15px/1 Outfit,sans-serif}
.pg-q3 .ab{background:#e4eef5;color:var(--navy)}
.pg-q3 .pl{margin-left:auto;flex:none;position:relative;width:26px;height:26px;border-radius:50%;border:1px solid var(--navy)}
.pg-q3 .pl::before,.pg-q3 .pl::after{content:"";position:absolute;left:6px;right:6px;top:12px;height:1.5px;background:var(--navy);transition:transform .3s}
.pg-q3 .pl::after{transform:rotate(90deg)}
.pg-q3 details[open] .pl::after{transform:rotate(0)}
.pg-q3 .an{display:flex;gap:18px;padding:0 26px 26px}
.pg-q3 .an p{margin:0;padding-top:6px;font-size:15px;line-height:2.1;letter-spacing:.05em}

/* 他のサービス：写真付きカード */
.pg-others{padding:0 0 20px}
.pg-o2s{margin-top:0}
.pg-o2{position:relative;display:block;aspect-ratio:16/8;border-radius:26px;overflow:hidden;color:#fff;background:#2f5788;box-shadow:none;padding:0}
.pg-o2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pg-o2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,87,136,.1) 20%,rgba(47,87,136,.88) 100%)}
.pg-o2:hover{transform:none}.pg-o2:hover img{transform:scale(1.06)}
.pg-o2 .tx{position:absolute;left:28px;right:80px;bottom:24px;z-index:2}
.pg-o2 b{display:block;margin-bottom:6px;font-weight:500;font-size:20px;letter-spacing:.1em}
.pg-o2 small{display:block;margin:0;font-size:14px;letter-spacing:.06em;color:#fff;opacity:.95}
.pg-o2 .go2{position:absolute;right:22px;bottom:22px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy)}
.pg-o2 .go2 .ico{width:16px;height:16px;stroke-width:2;color:var(--navy);margin:0}
.pg-others{padding:20px 0 190px}
@media(max-width:900px){.pg-others{padding-bottom:140px}}

/* ===== 下層ページの余白ルール =====
   中身（見出し・カード）から、色が切り替わる波の見える縁までの距離を、上下とも --g にそろえる。
   波の縁は、箱の上端・下端から次の分だけずれて見える（平均）。スマホは波の高さを下げているので、ずれも小さい。
                         PC     スマホ
     青い面の上（--n-t）   35px   35px
     青い面の下（--n-b）   40px   40px
     水色の帯の上（--b-t） 100px  60px
     水色の帯の下（--b-b） 80px   50px
   「必要な余白 ＝ --g − そのずれ」。余白を変えるときは --g だけを変える。 */
:root{--g:160px;--n-t:35px;--n-b:40px;--b-t:100px;--b-b:80px;--sec-pb:110px}
@media(max-width:900px){:root{--g:120px;--b-t:60px;--b-b:50px;--sec-pb:80px}}
.pg-hero{padding-bottom:40px}
.pg-hero+.pg-band{margin-top:calc(var(--g) + var(--b-t) - 40px)}   /* ヒーローの中身 → 水色の帯の縁 */
.pg-band{padding-top:calc(var(--g) - var(--b-t));padding-bottom:calc(var(--g) - var(--b-b))}
.pg-flow{padding-top:calc(var(--g) - var(--n-t));padding-bottom:calc(var(--g) - var(--n-b))}
.pg-flow+.pg-sec{padding-top:calc(var(--g) - var(--n-b))}          /* 青い面の縁 → 制作事例 */
.pg-sec+.pg-price{margin-top:calc(var(--g) + var(--b-t) - var(--sec-pb))}   /* 制作事例の中身 → 水色の帯の縁（下の余白込み） */
.pg-price{margin-bottom:calc(var(--b-b) + 50px)}
.pg-price+.pg-sec{padding-top:calc(var(--g) - 50px);padding-bottom:100px}
.pg-others{padding:20px 0 calc(var(--g) + var(--n-t))}             /* 他のサービス → お問い合わせの青い面の縁 */
.pg-others+.contact{padding-top:calc(var(--g) - var(--n-t))}
/* Flow：スマホは全部左寄せ（奇数番の右寄せを打ち消す） */
@media(max-width:900px){.pg-l4 li:nth-child(odd){text-align:left}}

/* ===== トップ（index）のスマホの余白：下層ページと同じルール =====
   中身から波の縁までを --g（スマホ 120px）にそろえる。ずれの値は上の「下層ページの余白ルール」を参照。
   「HAKONIWAとは」の帯は、下に張り出す猫の分（46px）を足してある。 */
@media(max-width:900px){
  #message{margin-top:calc(var(--g) + var(--b-t));padding-top:calc(var(--g) - var(--b-t));padding-bottom:calc(var(--g) - var(--b-b) + 46px);margin-bottom:calc(var(--g) + var(--b-b) - 70px)}
  #news{padding-bottom:calc(var(--g) + var(--n-t))}
  #service,#service.navy.bt{padding-top:calc(var(--g) - var(--n-t));padding-bottom:calc(var(--g) - var(--n-b))}
  #service.navy.bt{margin-bottom:80px}
  #works{padding-top:calc(var(--g) + var(--n-b) - 80px);padding-bottom:calc(var(--g) + var(--n-t))}
  .works+.contact{padding-top:calc(var(--g) - var(--n-t))}
}

/* Flow：下にも、サービスの章と同じ多重の波。上の水色の帯の波とぶつからないよう、間をあける */
.pg-band+.pg-flow{margin-top:65px}
@media(max-width:700px){.pg-flow.navy.bt::after{background-size:240% 100%;background-position:50% 0}}

/* Features（水色の帯）→ Flow（青い面）：帯の下の波をやめ、帯の水色の上に青い面の波を直接重ねる。
   （間に別の波があると、半透明の波が宙に浮いて見えるため） */
.pg-band:has(+.pg-flow){margin-bottom:0;padding-bottom:calc(var(--g) + var(--n-t))}
.pg-band:has(+.pg-flow) .bw-b{display:none}
.pg-band+.pg-flow{margin-top:0}

/* Price（水色の帯）の下：サービスの章の下と同じ、半透明の水色の波を重ねた多重の波（面の色だけ水色） */
.pg-price .bw-b{display:none}
.pg-price::after{content:"";position:absolute;left:0;right:0;bottom:-169px;height:170px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237fb2e0' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%237fb2e0' stop-opacity='.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fc0e8' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%238fc0e8' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a6d0ee' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23a6d0ee' stop-opacity='.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23c)' d='M0 0V104C260 156 520 114 760 130S1180 160 1440 104V0Z'/%3E%3Cpath fill='url(%23b)' d='M0 0V80C240 124 480 72 780 100S1200 134 1440 86V0Z'/%3E%3Cpath fill='url(%23a)' d='M0 0V58C300 102 520 50 820 76S1220 110 1440 62V0Z'/%3E%3Cpath fill='%23e4eef5' d='M0 0V34C150 72 330 74 520 40S880 -2 1070 36 1330 66 1440 44V0Z'/%3E%3C/svg%3E")}
@media(max-width:700px){.pg-price::after{background-size:240% 100%;background-position:50% 0}}
/* 余白：多重の波は箱の下 169px まで続くので、波の終わりから見て余白を取る。
   中身の位置 ＝ 箱の下 +（169 + --g − 50）。Flow の下の制作事例も、Price の下のFAQも同じ。 */
.pg-price{margin-bottom:169px;padding-bottom:calc(var(--g) - var(--n-b))}
.pg-flow+.pg-sec{padding-top:calc(var(--g) + 39px)}


/* スマホ：多重の波の下は、波の終わり（箱の下 169px）から約40px で中身を始める（PCは上の 169 + --g − 50）。
   波の縁からだと 120 → 約170px。大きく空きすぎないよう、スマホだけ詰める。 */
@media(max-width:900px){
  .pg-flow+.pg-sec,#works{padding-top:calc(var(--g) + 9px)}
  .pg-price{margin-bottom:calc(var(--g) + 19px)}
}

/* 制作事例：見出しとカードの間をあける（他の章の見出し下と同じ約44px）。カード同士は22px */
.pg-works{margin-top:44px;gap:22px}
@media(max-width:900px){.pg-works{margin-top:36px}}

/* トップのサービス：スマホは、タップで切り替えるタブをやめて、写真付きの3枚のリンクカードにする
   （タブは「タップしても切り替わるだけ」で、リンクの本体が下に離れていて分かりにくかったため） */
.svc-m{display:none}
@media(max-width:900px){
  .stabs,.scard{display:none}
  .svc-m{display:grid;gap:16px;margin-top:30px}
  .svc-m .pg-o2{aspect-ratio:16/8.4}
}

/* ===== HAKONIWAとは ===== */
/* 水色の帯の下が、青い面でなく普通の章のとき：Priceと同じ「波の縁 → 次の中身が --g」 */
.pg-b2{margin-bottom:calc(var(--b-b) + 50px)}
.pg-b2+.pg-sec{padding-top:calc(var(--g) - 50px)}
.pg-story{border-top:1px solid rgba(30,45,68,.22);padding-top:6px}
.pg-story p{margin:0;padding:26px 4px;border-bottom:1px solid rgba(30,45,68,.22);font-size:16px;line-height:2.2;letter-spacing:.06em}
.pg-cat{display:block;width:min(220px,70%);margin-top:6px}
.pg-info{padding-top:0}
.pg-dl{margin:44px 0 0;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(30,60,110,.07);overflow:hidden}
.pg-dl>div{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:24px 34px;border-bottom:1px solid rgba(30,45,68,.12)}
.pg-dl>div:last-child{border-bottom:0}
.pg-dl dt{font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--navy)}
.pg-dl dd{margin:0;font-size:16px;line-height:1.9;letter-spacing:.05em}
.pg-three{grid-template-columns:repeat(3,1fr)}
.pg-three .pg-o2{aspect-ratio:4/3.4}
@media(max-width:900px){
  .pg-dl>div{grid-template-columns:1fr;gap:4px;padding:20px 22px}
  .pg-three{grid-template-columns:1fr}.pg-three .pg-o2{aspect-ratio:16/8.4}
}
/* HAKONIWAとは：波のない章の間は、中身どうしの間を --g にそろえる */
.pg-phil{padding-bottom:var(--g)}
.pg-info{padding-bottom:calc(var(--g) - 20px)}

/* 代表プロフィール：経歴の流れ（縦のタイムライン）。言葉のまとまりで折り返す */
.pg-tl{list-style:none;margin:0;padding:0 0 0 64px;position:relative}
.pg-tl::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:rgba(58,105,165,.4)}
.pg-tl li{position:relative;padding:0 0 44px}
.pg-tl li:last-child{padding-bottom:0}
.pg-tl li::before{content:attr(data-n);position:absolute;left:-64px;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 13px/1 Outfit,sans-serif;letter-spacing:.06em}
.pg-tl h3{margin:0 0 10px;font-size:18px;font-weight:500;letter-spacing:.1em;line-height:1.8}
.pg-tl p{margin:0;font-size:16px;line-height:2.2;letter-spacing:.05em}
.pg-tl .ph{display:inline-block}
@supports (text-wrap:pretty){.pg-tl p{text-wrap:pretty}}
@media(max-width:700px){.pg-tl .pcbr{display:none}}
.pg-role{line-height:2;letter-spacing:.08em}

.pg-y4{list-style:none;margin:46px 0 0;padding:0;border-top:1px solid rgba(30,45,68,.22)}
.pg-y4 li{display:grid;grid-template-columns:70px 1.3fr 1fr;gap:30px;align-items:center;padding:34px 6px;border-bottom:1px solid rgba(30,45,68,.22)}
.pg-y4 .n{font:500 15px/1 Outfit,sans-serif;letter-spacing:.2em;color:var(--navy)}
.pg-y4 h3{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:.1em;line-height:1.7}
.pg-y4 p{margin:0;font-size:15px;line-height:2.1;letter-spacing:.05em;color:var(--muted)}
@media(max-width:900px){.pg-y4 li{grid-template-columns:1fr;gap:8px;padding:26px 4px}.pg-y4 h3{font-size:20px}}

/* Info：写真（右の情報と同じ高さ）＋情報カード。猫が写真の下に */
.pg-i4{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);margin-top:44px;align-items:stretch}
.pg-i4p{position:relative;min-height:320px}
.pg-i4p .pic{position:absolute;inset:0;border-radius:28px;overflow:hidden}
.pg-i4p .pic img{width:100%;height:100%;object-fit:cover;display:block}
.pg-i4p .cat{position:absolute;left:-12px;bottom:-34px;width:min(220px,48%);height:auto;z-index:2;pointer-events:none;user-select:none}
.pg-dl2{margin:0;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(30,60,110,.07);padding:8px 34px}
.pg-dl2>div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid rgba(30,45,68,.12)}
.pg-dl2>div:last-child{border-bottom:0}
.pg-dl2 dt{font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--navy);line-height:1.9}
.pg-dl2 dd{margin:0;font-size:16px;line-height:1.9;letter-spacing:.05em}
@media(max-width:900px){
  .pg-i4{grid-template-columns:1fr}
  .pg-i4p{min-height:0;aspect-ratio:16/11;margin-bottom:34px}
  .pg-dl2{padding:6px 22px}.pg-dl2>div{grid-template-columns:1fr;gap:4px;padding:18px 0}
}

/* サービスへの案内：青いパネル（左に一言、右に3つのボタン） */
.pg-s4{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:center;background:var(--navy);color:#fff;border-radius:34px;padding:56px clamp(28px,5vw,64px)}
.pg-s4 h3{margin:0 0 16px;font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:.1em;line-height:1.7}
.pg-s4 p{margin:0;font-size:16px;line-height:2.1;letter-spacing:.06em}
.pg-s4 .ph{display:inline-block}
.pg-s4 .btns{display:grid;gap:12px}
.pg-s4 .btns a{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:16px 24px;font-size:16px;letter-spacing:.1em;transition:background .25s,color .25s}
.pg-s4 .btns a:hover{background:#fff;color:var(--navy)}
.pg-s4 .btns .ico{width:20px;height:20px;flex:none}
.pg-s4 .btns small{margin-left:auto;font-size:13px;opacity:.85;white-space:nowrap}
.pg-s4 .btns .ar{width:16px;height:16px;stroke-width:2}
@media(max-width:900px){.pg-s4{grid-template-columns:1fr;padding:40px 24px;border-radius:28px}}
@media(max-width:560px){.pg-s4 .btns small{display:none}.pg-s4 .btns .ar{margin-left:auto}}
/* Info：写真の下に張り出す猫（34px）の分だけ、次の青いパネルまでをあける */
@media(min-width:901px){.pg-info{padding-bottom:calc(var(--g) - 20px + 34px)}}
.pg-y4 .ph{display:inline-block}

/* スマホ：ヒーローの2つのボタンを同じ長さにそろえる（横に半分ずつ） */
@media(max-width:560px){
  .pg-act{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pg-act a{display:flex;justify-content:center;align-items:center;text-align:center;padding-left:10px;padding-right:10px;white-space:nowrap}
}

/* ===== 制作実績（一覧・詳細） ===== */
.pg-hero+.pg-wlist{padding-top:calc(var(--g) - 40px)}
.pg-filter{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 34px}
.pg-filter button{font:500 14px/1 "Noto Sans JP",sans-serif;letter-spacing:.1em;color:var(--navy);background:transparent;border:1px solid var(--navy);border-radius:99px;padding:13px 26px;cursor:pointer;transition:background .25s,color .25s}
.pg-filter button:hover,.pg-filter button.on{background:var(--navy);color:#fff}
.pg-wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pg-wgrid .wc{flex:none;width:auto}
.pg-wgrid .wc[hidden]{display:none}
.pg-pager{display:flex;justify-content:center;gap:10px;margin-top:64px}
.pg-pager>*{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(58,105,165,.4);font:500 15px/1 Outfit,sans-serif;color:var(--navy)}
.pg-pager .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-pager a:hover{background:#e4eef5}
.pg-pager .ico{width:16px;height:16px;stroke-width:2}
.pg-wd{padding-bottom:var(--sec-pb)}
.pg-hero+.pg-wd{padding-top:calc(var(--g) - 40px)}
.pg-sec+.pg-b2{margin-top:calc(var(--g) + var(--b-t) - var(--sec-pb))}
.pg-wd2{padding-bottom:calc(var(--g) - 20px)}
.pg-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.pg-gal img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:24px;display:block;box-shadow:0 10px 30px rgba(30,60,110,.1)}
.pg-voice{margin-top:34px;background:#fff;border-radius:28px;padding:34px 38px;box-shadow:0 10px 30px rgba(30,60,110,.07)}
.pg-voice .v{margin:0;font-size:17px;line-height:2.2;letter-spacing:.06em}
.pg-voice .w{margin:14px 0 0;font-size:14px;letter-spacing:.1em;color:var(--navy)}
.pg-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.pg-pn a{display:flex;align-items:center;gap:14px;font-size:15px;letter-spacing:.06em;line-height:1.7}
.pg-pn small{display:block;font-size:12px;letter-spacing:.14em;color:var(--navy)}
.pg-pn .next{justify-content:flex-end;text-align:right}
.pg-pn .ico{flex:none;width:34px;height:22px;padding:4px 10px;box-sizing:border-box;border-radius:99px;background:var(--navy);color:#fff;stroke-width:2.2}
.pg-pn .prev .ico{transform:rotate(180deg)}
.pg-pn .all{border:1px solid var(--navy);border-radius:99px;padding:13px 28px;color:var(--navy);font-weight:500;letter-spacing:.1em;transition:background .25s,color .25s}
.pg-pn .all:hover{background:var(--navy);color:#fff}
@media(max-width:900px){
  .pg-wgrid{grid-template-columns:1fr}
  .pg-gal{grid-template-columns:1fr}
  .pg-pn{grid-template-columns:1fr 1fr;gap:18px}
  .pg-pn .all{grid-column:1/-1;order:3;justify-content:center}
  .pg-voice{padding:26px 24px}
}

/* 制作実績の詳細ヒーロー：画像を隠さない（上に文字、下に画像を全体で見せる） */
.pg-hero-d{padding:148px 0 40px}
.pg-dh{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:44px}
.pg-dh h1{margin:6px 0 0;font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1.5;letter-spacing:.08em}
.pg-dh .lead{margin:0 0 20px;line-height:2.1;letter-spacing:.06em}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pg-chips li{font-size:13px;letter-spacing:.08em;color:var(--navy);background:#e4eef5;border-radius:99px;padding:7px 14px}
.pg-shot{border-radius:30px;overflow:hidden;box-shadow:0 20px 50px rgba(30,60,110,.14);background:#fff}
.pg-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:900px){.pg-hero-d{padding:112px 0 20px}.pg-dh{grid-template-columns:1fr;gap:14px;margin-bottom:28px}.pg-shot{border-radius:22px}}
/* 詳細ヒーロー：事例名は幅を広くとり、言葉のまとまりで折り返す（強制の改行はしない） */
.pg-dh{grid-template-columns:1.5fr 1fr}
.pg-dh h1{font-size:clamp(26px,3vw,42px)}
.pg-dh h1 .ph{display:inline-block}
@media(max-width:900px){.pg-dh{grid-template-columns:1fr}}
/* 外部サイトへのリンク：アイコンは、URLのすぐ右（折り返さない） */
.pg-dl a.ext,.pg-dl2 a.ext{display:inline-flex;align-items:center;gap:8px;color:var(--navy)}
.pg-dl a.ext .u,.pg-dl2 a.ext .u{min-width:0;overflow-wrap:anywhere}
.pg-dl a.ext .ico,.pg-dl2 a.ext .ico{flex:none;width:15px;height:15px;stroke-width:2}
@media(max-width:900px){.pg-plate .lead:last-child{margin-bottom:0}}

/* スマホ：制作事例のカードの名前は、流れる動き（ホバー）が使えないので、2行まで折り返して全部見せる */
@media(max-width:900px){
  .wc .nm{white-space:normal;overflow:visible;-webkit-mask-image:none!important;mask-image:none!important}
  .wc .nm-in{display:block;transform:none!important;transition:none}
  .pg-filter{gap:8px}
  .pg-filter button{padding:12px 16px;font-size:13px}
}

/* 一覧：見出しをやめたので、絞り込みが先頭。1行に並べ、スマホで入りきらないときは横にスワイプ */
.pg-wlist .pg-filter{margin:0 0 34px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pg-wlist .pg-filter::-webkit-scrollbar{display:none}
.pg-wlist .pg-filter button{flex:none;scroll-snap-align:start;white-space:nowrap}
@media(max-width:900px){
  .pg-wlist .pg-filter{margin-left:calc(clamp(20px,4vw,60px) * -1);margin-right:calc(clamp(20px,4vw,60px) * -1);padding:2px clamp(20px,4vw,60px)}
}

/* サブページのヒーロー：面と写真がぶつかる直角の角を、トップと同じように丸くつなぐ（40px） */
.pg-plate::before,.pg-plate::after{content:"";position:absolute;width:40px;height:40px;background:radial-gradient(circle at 100% 0,transparent 40px,var(--cream) 40.5px);pointer-events:none}
.pg-plate::before{right:-40px;bottom:0}
.pg-plate::after{left:0;top:-40px}
@media(max-width:900px){.pg-plate::before,.pg-plate::after{display:none}}
@media(max-width:900px){.pg-hero-d{padding-bottom:40px}}

/* ===== お問い合わせ ===== */
.pg-hero+.pg-ch{padding-top:calc(var(--g) - 40px)}
.pg-chs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-chs li{display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:28px;padding:34px 30px 30px;box-shadow:0 10px 30px rgba(30,60,110,.07)}
.pg-chs .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#e4eef5;color:var(--navy)}
.pg-chs .ic .ico,.pg-chs .ic .ico-line{width:26px;height:26px}
.pg-chs h3{margin:6px 0 0;font-size:19px;font-weight:500;letter-spacing:.1em}
.pg-chs p{margin:0;flex:1;font-size:15px;line-height:2;letter-spacing:.05em;color:var(--muted)}
.pg-chs li:first-child{background:var(--navy);color:#fff}
.pg-chs li:first-child .ic{background:#fff}
.pg-chs li:first-child p{color:#e3eef8}
.pg-chs li:first-child .pg-btn{background:#fff;color:var(--navy)}
.pg-chs li:first-child .pg-btn:hover{background:#e4eef5}
.pg-chs .pg-btn{margin-top:10px}
/* フォーム */
.pg-form{background:#fff;border-radius:30px;box-shadow:0 14px 40px rgba(30,60,110,.1);padding:clamp(26px,4vw,46px);display:grid;gap:26px}
.pg-form .fld{margin:0;padding:0;border:0;min-width:0}
.pg-form label,.pg-form legend{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 10px;font-size:15px;font-weight:500;letter-spacing:.08em}
.pg-form b{font-size:11px;font-weight:500;letter-spacing:.12em;color:#fff;background:var(--navy);border-radius:99px;padding:3px 9px}
.pg-form i{font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.pg-form input[type=text],.pg-form input[type=email],.pg-form input[type=tel],.pg-form textarea{width:100%;box-sizing:border-box;font:400 16px/1.7 "Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--ink);background:#f4f8fb;border:1px solid rgba(58,105,165,.25);border-radius:16px;padding:14px 18px;transition:border-color .2s,box-shadow .2s,background .2s}
.pg-form textarea{resize:vertical;min-height:150px}
.pg-form input:focus,.pg-form textarea:focus{outline:0;background:#fff;border-color:var(--navy);box-shadow:0 0 0 4px rgba(58,105,165,.15)}
.pg-form .is-bad{border-color:#d4574a!important;background:#fff6f5!important}
.pg-form .chk{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pg-form .chk label{margin:0;font-weight:400;letter-spacing:.05em;cursor:pointer}
.pg-form .chk input,.pg-form .agree input{position:absolute;opacity:0;pointer-events:none}
.pg-form .chk span{display:block;width:100%;box-sizing:border-box;border:1px solid rgba(58,105,165,.3);border-radius:99px;padding:12px 18px;font-size:15px;text-align:center;transition:background .2s,color .2s}
.pg-form .chk label:hover span{background:#e4eef5}
.pg-form .chk input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-form .chk input:focus-visible+span,.pg-form .agree input:focus-visible+span::before{box-shadow:0 0 0 4px rgba(58,105,165,.25)}
.pg-form .agree{position:relative;display:flex;align-items:center;gap:0;margin:0;font-weight:400;cursor:pointer}
.pg-form .agree span{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-form .agree span::before{content:"";flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--navy);background:#fff;box-sizing:border-box}
.pg-form .agree input:checked+span::before{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat}
.pg-form .agree a{text-decoration:underline;text-underline-offset:3px;color:var(--navy)}
.pg-submit{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;border:0;cursor:pointer;background:var(--navy);color:#fff;font:500 16px/1 "Noto Sans JP",sans-serif;letter-spacing:.12em;border-radius:99px;padding:20px;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.pg-submit:hover{transform:translateY(-2px);background:var(--navy-d);box-shadow:0 10px 22px rgba(30,60,110,.28)}
.pg-submit .ico{width:16px;height:16px;stroke-width:2}
.pg-note{margin:0;font-size:13px;line-height:1.9;color:var(--muted);text-align:center}
.pg-thanks{margin:0;padding:28px 10px;font-size:17px;line-height:2.2;letter-spacing:.06em;text-align:center;color:var(--navy)}
.pg-form [hidden]{display:none!important}
/* 流れ（3行） */
.pg-y4s{margin-top:46px}
.pg-y4s li{grid-template-columns:70px 1fr 1.4fr}
.pg-y4s h3{margin:0}
.pg-last{padding-bottom:calc(var(--g) + 51px)}
@media(max-width:900px){
  .pg-chs{grid-template-columns:1fr}
  .pg-form .chk{grid-template-columns:1fr}
  .pg-y4s li{grid-template-columns:1fr}
  .pg-last{padding-bottom:calc(var(--g) + 32px)}
}
.ph{display:inline-block}
.pg-form .agree{align-items:flex-start}
.pg-form .agree span{display:block;line-height:1.9}
.pg-form .agree span::before{display:inline-block;vertical-align:-5px;margin-right:10px}
.pg-form .agree b{margin-left:8px;vertical-align:1px}

/* お問い合わせの窓口：飾りなしの3列（縦の線で区切る。電話番号は大きく） */
.pg-hero+.pg-ch .pg-c4{margin:0}
.pg-c4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.pg-c4 li{display:flex;flex-direction:column;gap:14px;padding:10px 40px 14px;border-left:1px solid rgba(58,105,165,.35)}
.pg-c4 li:first-child{border-left:0;padding-left:0}
.pg-c4 small{font:500 12px/1 Outfit,sans-serif;letter-spacing:.24em;color:var(--navy)}
.pg-c4 .main{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:.08em;line-height:1.5}
.pg-c4 .tel{margin:0;font:500 clamp(28px,3vw,42px)/1.3 Outfit,sans-serif;letter-spacing:.04em;color:var(--navy)}
.pg-c4 .d{margin:0;flex:1;font-size:15px;line-height:2.1;letter-spacing:.05em;color:var(--muted)}
.pg-c4 a.ln{display:inline-flex;align-items:center;gap:10px;width:fit-content;font-size:15px;letter-spacing:.1em;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:4px;transition:gap .25s,opacity .25s}
.pg-c4 a.ln:hover{gap:16px}
.pg-c4 a.ln .ico{width:15px;height:15px;stroke-width:2}
@media(max-width:900px){
  .pg-c4{grid-template-columns:1fr}
  .pg-c4 li{border-left:0;border-top:1px solid rgba(58,105,165,.35);padding:26px 0}
  .pg-c4 li:first-child{border-top:0;padding-top:0}
}
.pg-c4 .d,.pg-note,.pg-y4s p{text-wrap:pretty}
.pg-c4 .num{display:inline-block;margin-bottom:2px;font:500 clamp(22px,2.2vw,28px)/1.4 Outfit,sans-serif;letter-spacing:.04em;color:var(--navy)}
/* フォームの選択肢：2列。最後の「その他のお問い合わせ」は幅いっぱい（2＋2＋1でそろえる） */
.pg-form .chk label.wide{grid-column:1/-1}

/* お問い合わせの3つの窓口（スマホ）：見出しは1行、説明は自然に折り返し、リンクはタップしやすい全幅のボタンにする */
@media(max-width:900px){
  .pg-c4 li{gap:8px;padding:26px 0 28px}
  .pg-c4 li:first-child{padding-top:0}
  .pg-c4 .main br{display:none}
  .pg-c4 .main{font-size:24px;line-height:1.5}
  .pg-c4 .d br:nth-of-type(n+2){display:none}
  .pg-c4 .d{flex:none;margin-bottom:12px}
  .pg-c4 a.ln{width:100%;box-sizing:border-box;justify-content:center;border:1px solid var(--navy);border-radius:99px;padding:15px 20px;font-weight:500}
  .pg-c4 a.ln:hover{gap:10px}
  .pg-c4 li:first-child a.ln{background:var(--navy);color:#fff}
}
@media(max-width:900px){.pg-c4 li:last-child{padding-bottom:0}}

/* お問い合わせの3つの窓口（スマホ・コンパクト版）：1つが「1枚のタップできるカード」。縦に長くならない */
@media(max-width:900px){
  .pg-c4{gap:14px}
  .pg-c4 li,.pg-c4 li:first-child,.pg-c4 li:last-child{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;gap:2px 14px;padding:20px 20px 20px 24px;border:0;border-radius:26px;background:#fff;box-shadow:0 8px 24px rgba(30,60,110,.08)}
  .pg-c4 li:first-child{background:var(--navy);color:#fff}
  .pg-c4 li>*{grid-column:1}
  .pg-c4 small{margin-bottom:4px}
  .pg-c4 li:first-child small,.pg-c4 li:first-child .num{color:#cfe0ee}
  .pg-c4 li:first-child .main{color:#fff}
  .pg-c4 li:first-child .d{color:#e3eef8}
  .pg-c4 .main{font-size:21px}
  .pg-c4 .num{font-size:17px}
  .pg-c4 .d{margin:2px 0 0;font-size:13px;line-height:1.8}
  .pg-c4 a.ln,.pg-c4 li:first-child a.ln{grid-column:2;grid-row:1/5;width:46px;height:46px;padding:0;gap:0;font-size:0;border-radius:50%;background:var(--navy);color:#fff;border:0;justify-content:center;align-self:center}
  .pg-c4 li:first-child a.ln{background:#fff;color:var(--navy)}
  .pg-c4 a.ln .ico{width:18px;height:18px;stroke-width:2}
  .pg-c4 a.ln::after{content:"";position:absolute;inset:0;border-radius:26px}
}

/* お問い合わせのLINE：LINEのブランドカラー（緑）にする */
:root{--lgreen:#06c755;--lgreen-d:#05a847}
.pg-c4 li:first-child small,.pg-c4 li:first-child .num{color:var(--lgreen-d)}
.pg-c4 li:first-child a.ln{border:0;background:var(--lgreen);color:#fff;border-radius:99px;padding:12px 26px;font-weight:500;transition:background .25s,gap .25s}
.pg-c4 li:first-child a.ln:hover{background:var(--lgreen-d)}
@media(max-width:900px){
  .pg-c4 li:first-child{background:var(--lgreen);color:#fff}
  .pg-c4 li:first-child small,.pg-c4 li:first-child .num{color:#eafff2}
  .pg-c4 li:first-child .main{color:#fff}
  .pg-c4 li:first-child .d{color:#f1fff6}
  .pg-c4 a.ln,.pg-c4 li:first-child a.ln{padding:0}
  .pg-c4 li:first-child a.ln{background:#fff;color:var(--lgreen-d)}
  .pg-c4 li:first-child a.ln:hover{background:#fff}
}

/* ===== 規約・ポリシー（プライバシーポリシーなど） ===== */
.pg-hero-doc{padding:148px 0 40px}
.pg-hero-doc h1{margin:6px 0 18px;font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:.08em;line-height:1.5}
.pg-hero-doc .lead{margin:0 0 14px;line-height:2.1;letter-spacing:.06em}
.pg-upd{margin:0;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.pg-hero-doc+.pg-doc{padding-top:calc(var(--g) - 40px)}
.pg-doc{padding-bottom:calc(var(--g) + 51px)}
.pg-docg{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.pg-toc{position:sticky;top:110px;background:#fff;border-radius:24px;padding:26px 26px 22px;box-shadow:0 10px 30px rgba(30,60,110,.07)}
.pg-toc p{margin:0 0 12px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.24em;color:var(--navy);text-transform:uppercase}
.pg-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.pg-toc li{counter-increment:t}
.pg-toc a{display:flex;gap:10px;padding:7px 0;font-size:14px;line-height:1.7;letter-spacing:.04em;transition:color .2s}
.pg-toc a::before{content:counter(t,decimal-leading-zero);flex:none;font:500 12px/1.9 Outfit,sans-serif;letter-spacing:.1em;color:var(--navy)}
.pg-toc a:hover{color:var(--navy)}
.pg-docb{max-width:760px}
.pg-docs{padding:0 0 46px;margin:0 0 46px;border-bottom:1px solid rgba(30,45,68,.18)}
.pg-docs:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pg-docs h2{display:flex;align-items:baseline;gap:16px;margin:0 0 18px;font-size:20px;font-weight:500;letter-spacing:.1em;line-height:1.7}
.pg-docs h2 span{flex:none;font:500 14px/1 Outfit,sans-serif;letter-spacing:.14em;color:var(--navy)}
.pg-docs p{margin:0 0 14px;font-size:15px;line-height:2.2;letter-spacing:.05em}
.pg-docs ul{margin:0 0 14px;padding:0;list-style:none}
.pg-docs li{position:relative;padding-left:20px;font-size:15px;line-height:2.1;letter-spacing:.05em}
.pg-docs li::before{content:"";position:absolute;left:3px;top:.95em;width:7px;height:7px;border-radius:50%;background:#a6d0ee}
.pg-docs a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
html{scroll-padding-top:100px}
@media(max-width:900px){
  .pg-hero-doc{padding:112px 0 40px}
  .pg-docg{grid-template-columns:1fr;gap:34px}
  .pg-toc{position:static}
  .pg-doc{padding-bottom:calc(var(--g) + 32px)}
}

/* 特定商取引法に基づく表記：項目と内容の表 */
.pg-dlw{margin:0;max-width:980px}
.pg-dlw>div{grid-template-columns:240px 1fr;padding:26px 36px}
.pg-dlw dd{font-size:15px;line-height:2.1;letter-spacing:.05em}
.pg-dlw dd a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.pg-notes{list-style:none;margin:26px 0 0;padding:0;max-width:980px}
.pg-notes li{position:relative;padding-left:20px;font-size:14px;line-height:2;letter-spacing:.04em;color:var(--muted)}
.pg-notes li::before{content:"※";position:absolute;left:0}
@media(max-width:900px){.pg-dlw>div{grid-template-columns:1fr;gap:4px;padding:20px 22px}}

/* ===== お知らせ・ブログ ===== */
.pg-nl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(30,45,68,.22)}
.pg-nl li[hidden]{display:none}
.pg-nl a{display:grid;grid-template-columns:110px auto 1fr 34px;gap:22px;align-items:center;padding:28px 6px;border-bottom:1px solid rgba(30,45,68,.22);transition:background .3s,padding .3s}
.pg-nl a:hover{background:rgba(255,255,255,.6);padding-left:18px}
.pg-nl time{font:500 15px/1 Outfit,sans-serif;letter-spacing:.1em;color:var(--navy)}
.tag{display:inline-block;font:500 12px/1 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:var(--navy);background:#e4eef5;border-radius:99px;padding:7px 14px;white-space:nowrap}
.pg-nl .tt{font-size:16px;line-height:1.8;letter-spacing:.05em}
.pg-nl .plus{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid rgba(58,105,165,.35);font-size:18px;line-height:1;color:var(--navy)}
.pg-nl a:hover .plus{background:var(--navy);color:#fff}
.pg-nlist .pg-pager{margin-top:56px}
/* 記事 */
.pg-meta{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:500 15px/1 Outfit,sans-serif;letter-spacing:.1em;color:var(--navy)}
.pg-art-h1{margin:0;max-width:900px;font-size:clamp(24px,2.8vw,38px)!important;line-height:1.7!important}
.pg-art{padding-bottom:calc(var(--g) - 20px)}
.pg-artb{max-width:760px}
.pg-artb p{margin:0 0 24px;font-size:16px;line-height:2.3;letter-spacing:.06em}
.pg-artb h2{margin:56px 0 22px;padding-left:18px;border-left:4px solid var(--navy);font-size:22px;font-weight:500;line-height:1.7;letter-spacing:.08em}
.pg-artb h3{margin:40px 0 16px;font-size:18px;font-weight:500;line-height:1.7;letter-spacing:.08em;color:var(--navy)}
.pg-artb ul{margin:0 0 28px;padding:0;list-style:none}
.pg-artb li{position:relative;padding-left:22px;font-size:16px;line-height:2.2;letter-spacing:.05em}
.pg-artb li::before{content:"";position:absolute;left:4px;top:1em;width:8px;height:8px;border-radius:50%;background:#a6d0ee}
.pg-artb ol{margin:0 0 28px;padding:0;list-style:none;counter-reset:n}
.pg-artb ol>li{counter-increment:n;padding-left:28px}
.pg-artb ol>li::before{content:counter(n) ".";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--navy);font-weight:500}
.pg-artb blockquote{margin:0 0 28px;background:#e4eef5;border-radius:22px;padding:22px 28px}
.pg-artb blockquote p{margin:0;font-size:16px;line-height:2.1}
.pg-artb figure{margin:0 0 28px}
.pg-artb .ph-img{display:grid;place-items:center;aspect-ratio:16/9;border-radius:24px;background:linear-gradient(160deg,#cfe0ec,#a6c5df);color:#fff;font-size:14px;letter-spacing:.14em}
.pg-artb figcaption{margin-top:10px;font-size:13px;color:var(--muted);letter-spacing:.05em}
@media(max-width:900px){
  .pg-nl a{grid-template-columns:auto 1fr 34px;gap:8px 12px;padding:22px 4px}
  .pg-nl time{grid-column:1}
  .pg-nl .tag{grid-column:2;justify-self:start}
  .pg-nl .tt{grid-column:1/3;grid-row:2}
  .pg-nl .plus{grid-column:3;grid-row:1/3}
  .pg-nl a:hover{padding-left:4px}
}
.pg-artb>:last-child{margin-bottom:0}

/* 記事：アイキャッチ画像 */
.pg-eye{margin:0 0 56px;max-width:980px;border-radius:30px;overflow:hidden;box-shadow:0 20px 50px rgba(30,60,110,.14);background:#cfe0ec}
.pg-eye img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* 前後の記事：題名は折り返さず、1行におさめる（長いときは「…」。全文はホバーで表示） */
.pg-pn a:not(.all){min-width:0}
.pg-pn a span{min-width:0}
.pg-pn b{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag.info{background:var(--navy);color:#fff}
@media(max-width:900px){
  .pg-eye{margin-bottom:34px;border-radius:22px}
  .pg-pn{grid-template-columns:1fr;gap:12px}
  .pg-pn .prev,.pg-pn .next{justify-content:flex-start;text-align:left;background:#fff;border-radius:22px;padding:16px 18px;box-shadow:0 8px 24px rgba(30,60,110,.07)}
  .pg-pn .next{flex-direction:row-reverse}
  .pg-pn .next span{flex:1}
  .pg-pn .all{grid-column:auto;order:0}
  .pg-pn b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* 前後の記事を横いっぱいに（2列）。「一覧へ戻る」は下に中央。題名は14pxで1行におさめる */
@media(min-width:901px){
  .pg-pn{grid-template-columns:1fr 1fr;gap:20px 32px}
  .pg-pn .all{grid-column:1/-1;justify-self:center;order:3}
  .pg-pn a:not(.all){font-size:14px;padding:6px 0}
  .pg-pn b{font-size:14px;letter-spacing:.03em}
}
/* 記事：題名とアイキャッチは近くに置く */
.pg-hero-doc:has(+.pg-art){padding-bottom:0}
.pg-hero-doc+.pg-art{padding-top:44px}
@media(max-width:900px){.pg-hero-doc+.pg-art{padding-top:30px}}
/* サブページのヒーローの写真（スマホ）：高さを低くする（画面の幅の56%、190〜300px） */
@media(max-width:900px){.pg-pic{height:clamp(190px,56vw,300px)}}
/* トップのヒーローの見出し（スマホ）：幅360px前後でも、1行（nowrap）が横にはみ出さないよう、画面の幅に合わせて小さくする */
@media(max-width:600px){.plate .l2{font-size:clamp(19px,5.8vw,38px)}}
/* フォームの「必須」の札は、最小12px */
.pg-form b{font-size:12px}
@media(max-width:600px){.plate{padding-right:24px}}
/* トップのヒーロー（スマホ）：面がほぼ全幅になるので、右の丸いつなぎ目（画面の外に出る）は使わない */
@media(max-width:600px){.plate::before{width:22px;height:22px;right:-22px;background:radial-gradient(circle at 100% 0,transparent 22px,var(--cream) 22.5px)}}   /* 見出しの面の右に残る写真の、左下の角も、ほかの3つの角と同じ丸み（22px）にする */
/* お知らせ一覧（スマホ）：日付とカテゴリの札が、狭い幅（320px）でも収まるように */
@media(max-width:900px){
  .pg-nl a{grid-template-columns:auto minmax(0,1fr) 34px}
  .pg-nl .tag{white-space:normal;line-height:1.5;min-width:0}
}

/* ヘッダー：電話番号が消える幅（901〜1280px）では、電話・メール・LINEを、アイコンだけの丸いボタンにする */
@media(min-width:901px) and (max-width:1280px){
  .nav{gap:16px}
  .nav .tel,.nav .pill{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:46px;height:46px;padding:0;gap:0;font-size:0;line-height:0;margin:0;border-radius:50%}
  .nav .tel{color:#fff;border:1.5px solid rgba(255,255,255,.9);font-family:inherit;transition:background .25s,transform .25s var(--ease)}
  .nav .tel:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
  .nav .tel .ico,.nav .pill .ico{width:20px;height:20px}
  .nav .pill-line .ico-line{width:24px;height:24px}
}

/* ハンバーガーの中（スマホ）：電話番号も、メール・LINEと同じ「ボタン」の形にする（3つとも高さ54px、縁つきの丸いボタン） */
@media(max-width:900px){
  .nav .tel{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;height:54px;margin:18px 0 0;padding:0 22px;background:#fff;color:var(--navy);border:1.5px solid var(--navy);border-radius:99px;font:500 18px/1 Outfit,Inter,sans-serif;letter-spacing:.04em;transition:background .25s}
  .nav .tel:hover{background:#eef5fc}
  .nav .tel .ico{width:20px;height:20px;color:var(--navy)}
}

/* フッター前のお問い合わせ（タブレット幅 601〜900px）：1列になって左に寄るので、中央にそろえる */
@media(min-width:601px) and (max-width:900px){
  .contact .ct-in{justify-items:center;text-align:center}
  .contact .ct-in .news-ttl{justify-self:center}
  .contact .ct-in .rule{margin-left:auto;margin-right:auto}
  .contact .ct-act{width:min(440px,100%);margin-left:auto;margin-right:auto}
  .contact .hours{text-align:center}
}

/* お問い合わせ：メール・電話のボタンを、LINEボタンと同じ横幅（左右にぴったり）にそろえる */
.ct-act .alt{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.ct-act .alt a{justify-content:center;white-space:nowrap}

/* 前後の記事・事例（タブレット／スマホ）：前と次を左右に並べ、矢印を上に置く。「一覧へ戻る」は下に横いっぱい */
@media(max-width:900px){
  .pg-pn{grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
  .pg-pn .prev,.pg-pn .next{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;text-align:left;padding:16px 16px 18px;font-size:14px;letter-spacing:.03em;line-height:1.6}
  .pg-pn .next{flex-direction:column-reverse;align-items:flex-end;text-align:right}
  .pg-pn .next span,.pg-pn .prev span{flex:none;width:100%}
  .pg-pn .all{grid-column:1/-1;order:3;justify-content:center}
  .pg-pn small{margin-bottom:4px}
  .pg-pn b{font-size:14px}
}

/* HAKONIWAの紹介（901〜1180px）：3列だと文が細く、猫が文に重なるので、見出しを上に横書きにして2列にする */
@media(min-width:901px) and (max-width:1180px){
  .msg-in{grid-template-columns:1fr 1fr;gap:28px clamp(28px,4vw,48px)}
  .msg-vt{grid-column:1/-1;writing-mode:horizontal-tb;height:auto;font-size:clamp(28px,3.4vw,38px);line-height:1.7}
  .msg-tx{padding-top:0}
  .msg-cat{left:-60px;width:230px;top:calc(100% - 118px)}
  .msg .msg-bubble{left:36px;bottom:88px}
}

/* スマホ：トップのお知らせ一覧の、いちばん上の線は消す */
@media(max-width:860px){
  .nlist li:first-child{border-top:0}
}

/* サービスページ「こんな〇〇を」の項目：見出しは1行、説明は文節ごとに自然に折り返す。幅がせまいときは1列にする */
.pg-f2l .pg-uses{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.pg-uses b{white-space:nowrap}
.pg-uses small .ph{display:inline-block}

/* Flow の説明：「、」「。」の区切りごとにまとめて折り返し、「す。」だけが残らないようにする */
.pg-l4 p .ph{display:inline-block}
.pg-l4 p{text-wrap:pretty}

/* お知らせ：カテゴリ絞り込みをリンクに、ページ送りに「前へ」、記事なしの表示 */
.pg-filter a{font:500 14px/1 "Noto Sans JP",sans-serif;letter-spacing:.1em;color:var(--navy);background:transparent;border:1px solid var(--navy);border-radius:99px;padding:13px 26px;cursor:pointer;transition:background .25s,color .25s}
.pg-filter a:hover,.pg-filter a.on{background:var(--navy);color:#fff}
@media(max-width:700px){.pg-filter a{padding:12px 16px;font-size:13px}}
.pg-wlist .pg-filter a{flex:none;scroll-snap-align:start;white-space:nowrap}
.pg-pager .pv .ico{transform:rotate(180deg)}
.pg-empty{margin:40px 0;text-align:center;color:var(--muted)}
.pg-meta a.tag{text-decoration:none}
.pg-pn .none{visibility:hidden}

/* 記事の文字色（管理画面の「青・赤・マーカー」。決まった3種類だけ） */
.c-blue{color:#2c5183}
.c-red{color:#b3261e}
.c-mark{background:linear-gradient(transparent 58%,#ffe27a 58%)}

/* 制作実績：絞り込みをリンクに */
.pg-wlist .pg-filter a{flex:none;scroll-snap-align:start;white-space:nowrap}

/* お問い合わせフォーム：エラー表示・ロボット用の隠し欄 */
.pg-err{background:#fff3f1;border:1px solid #e3a59e;border-radius:16px;padding:16px 20px;color:#8f1d17;font-size:15px;line-height:1.8;outline:0}
.pg-err p{margin:0 0 6px;font-weight:700}
.pg-err ul{margin:0;padding-left:1.3em}
.pg-form .agree.is-bad-agree span::before{border-color:#d4574a;box-shadow:0 0 0 3px rgba(212,87,74,.2)}
.pg-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.pg-form .pg-submit:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.pg-back{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* カテゴリ・ページ送りの切り替え（読み込み直さず、ふわっと入れ替える） */
.pg-swap{transition:opacity .22s ease,transform .22s ease}
.pg-swap.is-out{opacity:0;transform:translateY(8px)}
.pg-in[aria-busy="true"] .pg-filter a{cursor:progress}
@media(prefers-reduced-motion:reduce){.pg-swap{transition:none}.pg-swap.is-out{transform:none}}

/* スマホ：縦書きの枠（約290px）と、下の見出しの面（約185px）が、ぶつからない最低の高さ。これ以上は、高くしない（最初の画面で、見出しが下の固定バーに隠れるため） */
@media(max-width:600px){.photo-wrap{min-height:520px}}

/* 青い面（流れ）の直下に、水色の帯（料金）が続くとき（更新代行・保守運用）：
   帯の上の波は消して、青い面の波の縁を、そのまま帯に重ねる（波が2つ重なって見えないように） */
.pg-flow:has(+.pg-band){margin-bottom:0;position:relative;z-index:2}
.pg-flow+.pg-band{margin-top:0;padding-top:calc(var(--g) - 20px)}
.pg-flow+.pg-band .bw-t{display:none}

/* 404：下のお問い合わせの面がないので、フッターの波が、本文にかぶらないよう、下に余白を取る（リンクも、隠れないように） */
.pg-hero-doc.pg-404{padding-bottom:calc(var(--g) + 130px)}
.pg-404 .pg-upd{margin-top:22px;font-size:15px}
.pg-404 .pg-upd a{color:var(--navy);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* お問い合わせ：ご相談の流れ。横に3つの面。ステップが進むほど、少しずつ濃くなり、面のつなぎ目に、進む向きの三角を付ける */
.pg-fl3{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);--c1:#f1f6fa;--c2:#e4eef5;--c3:#d4e4f0}
.pg-fl3 li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 38px}
.pg-fl3 li:nth-child(1){background:var(--c1);border-radius:10px 0 0 10px}
.pg-fl3 li:nth-child(2){background:var(--c2)}
.pg-fl3 li:nth-child(3){background:var(--c3);border-radius:0 10px 10px 0}
.pg-fl3 li:nth-child(-n+2)::after{content:"";position:absolute;top:50%;right:-14px;margin-top:-18px;z-index:2;width:0;height:0;border-style:solid;border-width:18px 0 18px 15px;border-color:transparent transparent transparent var(--c1)}
.pg-fl3 li:nth-child(2)::after{border-left-color:var(--c2)}
.pg-fl3 .stp{font:700 12px/1 Outfit,"Noto Sans JP",sans-serif;letter-spacing:.14em;color:var(--navy)}
.pg-fl3 .ico{width:46px;height:46px;margin:20px 0 16px;color:var(--navy);stroke-width:1.6}
.pg-fl3 h3{margin:0 0 12px;font-size:19px;font-weight:700;letter-spacing:.1em;line-height:1.6}
.pg-fl3 p{margin:0;font-size:14.5px;line-height:2;letter-spacing:.04em;text-wrap:pretty}
@media(max-width:800px){
  .pg-fl3{grid-template-columns:1fr}
  .pg-fl3 li:nth-child(1){border-radius:10px 10px 0 0}
  .pg-fl3 li:nth-child(3){border-radius:0 0 10px 10px}
  .pg-fl3 li:nth-child(-n+2)::after{top:auto;bottom:-14px;right:auto;left:50%;margin:0 0 0 -18px;border-width:15px 18px 0 18px;border-color:var(--c1) transparent transparent transparent}
  .pg-fl3 li:nth-child(2)::after{border-top-color:var(--c2)}
  .pg-fl3 li{padding:26px 20px 30px}
}

/* お問い合わせ：流れを、フォームの前に置く（連絡の方法 → 流れ → フォーム）。フォームの下は、水色の帯をフッターの波にそのままつなぐ */
.pg-ch+.pg-flowpre{padding-top:calc(var(--g) - 40px);padding-bottom:var(--sec-pb)}
.pg-b2.pg-b2-end{margin-bottom:0;padding-bottom:calc(var(--g) + 40px)}   /* 水色の帯が、そのままフッターの波につながる（帯の下の波は消す＝波が2つ並ばない） */
.pg-b2-end .bw-b{display:none}

/* 大切にしていること：面もアイコンも番号も使わず、3つの考えを、ひとつながりの文章として、大きく読ませる。要点にだけ、マーカー。説明は、その下に3列で、静かに */
.pg-lead3{margin:46px 0 56px;font-size:clamp(25px,3.6vw,42px);font-weight:500;line-height:2;letter-spacing:.08em}
.pg-lead3 .ph{display:inline-block}
.pg-lead3 mark{background:linear-gradient(transparent 64%,#cde2f3 64%);color:inherit;padding:0 .08em}
.pg-ph3{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.pg-ph3 p{margin:0;font-size:15.5px;line-height:2.1;letter-spacing:.04em}
.pg-ph3 b{display:block;margin-bottom:10px;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--navy)}
@media(max-width:900px){
  .pg-lead3{margin:34px 0 40px;line-height:1.95}
  .pg-ph3{grid-template-columns:1fr;gap:30px}
}


/* サービスページ：Features / Solution / Support（水色の帯の中の、3枚の札つきカードと紺の帯） */
.pg-ft .pg-lead{margin:0 0 70px}
.pg-fc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:64px 24px}
.pg-fc-4{grid-template-columns:repeat(2,1fr)}
.pg-fc li{position:relative;background:#fff;border-radius:28px;padding:60px 34px 38px;box-shadow:0 16px 40px rgba(30,60,110,.1)}
.pg-fc .k{position:absolute;left:30px;top:-26px;background:var(--navy);color:#fff;border-radius:18px;padding:16px 26px;font:700 32px/1 "Noto Sans JP",sans-serif;letter-spacing:.08em;box-shadow:0 12px 24px rgba(30,60,110,.28)}
.pg-fc h3{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:.06em;line-height:1.6}
.pg-fc p{margin:0;font-size:15px;line-height:2.05;letter-spacing:.04em}
.pg-fu{margin-top:30px;background:#2c5183;color:#fff;border-radius:30px;padding:40px 44px 44px}
.pg-ft .pg-fu .pg-h4{margin:0 0 26px;padding:0;border:0;font-size:19px;font-weight:500;letter-spacing:.1em;color:#fff}
.pg-ft .pg-fu .pg-h4::before{color:#bcd6ee}
.pg-ft .pg-fu .pg-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px}
.pg-ft .pg-fu .pg-uses li{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.pg-ft .pg-fu .pg-uses b{color:#fff;font-size:16px;margin-bottom:4px;white-space:normal}
.pg-ft .pg-fu .pg-uses small{color:#d3e4f4;font-size:14px;line-height:1.9}
@media(max-width:900px){
  .pg-ft .pg-lead{margin-bottom:56px}
  .pg-fc,.pg-fc-4{grid-template-columns:1fr;gap:56px}
  .pg-fu{padding:34px 28px 38px}
  .pg-ft .pg-fu .pg-uses{grid-template-columns:repeat(2,1fr);gap:20px 28px}
}
@media(max-width:560px){
  .pg-fc li{padding:56px 26px 32px}
  .pg-ft .pg-fu .pg-uses{grid-template-columns:1fr}
}
/* 上の続き：見出しと小見出しの温度差、スマホでの札の大きさ */
.pg-ft .pg-fu .pg-h4{margin-bottom:28px;font-size:14px;font-weight:500;letter-spacing:.18em;color:#9ec3e6}
.pg-ft .pg-fu .pg-uses b{font-size:17px;font-weight:700;letter-spacing:.05em;margin-bottom:6px}
.pg-ft .pg-fu .pg-uses small{font-size:13.5px;line-height:1.85;color:#b5d0ea}
@media(max-width:900px){
  .pg-fc,.pg-fc-4{gap:44px}
  .pg-fc li{padding:46px 28px 28px;border-radius:24px}
  .pg-fc .k{left:24px;top:-19px;padding:10px 18px;border-radius:14px;font-size:22px}
  .pg-fc h3{font-size:17px;margin-bottom:8px}
  .pg-fc p{font-size:14px;line-height:1.95}
}
@media(max-width:560px){
  .pg-fc li{padding:42px 22px 26px}
  .pg-ft .pg-fu .pg-uses small .ph{display:inline}
}
/* PC：札と見出しを一回り小さく */
.pg-fc li{padding:52px 30px 32px;border-radius:26px}
.pg-fc .k{left:26px;top:-21px;padding:12px 20px;border-radius:15px;font-size:25px}
.pg-fc h3{font-size:18px;margin-bottom:8px}
.pg-fc p{font-size:14.5px;line-height:2}
.pg-fu{padding:34px 40px 38px}
.pg-ft .pg-fu .pg-uses b{font-size:16px}
.pg-ft .pg-fu .pg-uses small{font-size:13px}
@media(max-width:900px){
  .pg-fc li{padding:46px 28px 28px;border-radius:24px}
  .pg-fc .k{left:24px;top:-19px;padding:10px 18px;border-radius:14px;font-size:22px}
  .pg-fc h3{font-size:17px}
  .pg-fc p{font-size:14px;line-height:1.95}
  .pg-fu{padding:34px 28px 38px}
  .pg-ft .pg-fu .pg-uses b{font-size:17px}
  .pg-ft .pg-fu .pg-uses small{font-size:13.5px}
}
@media(max-width:560px){.pg-fc li{padding:42px 22px 26px}}
/* 更新代行：スポット対応の一覧（名前は出さない） */
.pg-fo{margin-top:34px}
.pg-ft .pg-fo .pg-h4{margin:0 0 18px;padding:0;border:0;font-size:14px;font-weight:500;letter-spacing:.18em;color:var(--navy)}
.pg-ft .pg-fo .pg-h4::before{color:var(--navy)}
.pg-ft .pg-fo .pg-uses{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pg-ft .pg-fo .pg-uses li{background:#fff;border:0;border-radius:22px;padding:22px 26px 24px;box-shadow:0 10px 26px rgba(30,60,110,.08)}
.pg-ft .pg-fo .pg-uses b{font-size:16px;margin-bottom:4px;white-space:normal}
.pg-ft .pg-fo .pg-uses small{font-size:13.5px;line-height:1.9}
@media(max-width:560px){.pg-ft .pg-fo .pg-uses{grid-template-columns:1fr}.pg-ft .pg-fo .pg-uses li{padding:18px 20px 20px}}

/* 記事の幅：文章は760px、画像・アイキャッチ・題名は980pxでそろえる */
.pg-art-h1{max-width:980px}
.pg-artb{max-width:980px}
.pg-artb>:not(figure){max-width:760px}
.pg-artb figure{margin:12px 0 36px}
.pg-artb figure img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 14px 36px rgba(30,60,110,.1)}
@media(max-width:900px){.pg-artb figure{margin:6px 0 30px}.pg-artb figure img{border-radius:18px}}
/* 記事の本文のリンク：色と下線で、押せるとわかるように */
.pg-artb a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:#a6d0ee;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s}
.pg-artb a:hover,.pg-artb a:focus-visible{text-decoration-color:var(--navy)}
/* 記事：文章も、画像・題名と同じ980pxの幅に。リンクは、マーカー＋下線で、はっきり */
.pg-artb>:not(figure){max-width:none}
.pg-artb a{color:#2c5183;font-weight:700;text-decoration:none;padding:0 .12em;background:linear-gradient(transparent 60%,#cde2f3 60%);border-bottom:2px solid var(--navy);transition:background-color .2s,color .2s}
.pg-artb a:hover,.pg-artb a:focus-visible{background:#a6d0ee;color:#1e3a64}
.pg-artb a[target=_blank]::after{content:"↗";margin-left:.2em;font-size:.85em}
/* 記事の画像：クリックで拡大 */
.lb-t{cursor:zoom-in}
.lb-t:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:4vh 3vw;background:rgba(18,30,50,.86);opacity:0;transition:opacity .18s}
.lb[hidden]{display:none}
.lb.is-in{opacity:1}
.lb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35);cursor:zoom-out}
.lb-x{position:absolute;top:16px;right:16px;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.lb-x:hover,.lb-x:focus-visible{background:rgba(255,255,255,.32)}
@media(prefers-reduced-motion:reduce){.lb{transition:none}}
/* トップのNEWS：日付の横に、カテゴリのタグ */
.nlist .m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:4px}
.nlist .tag{font-size:11.5px;padding:5px 11px}
/* 記事：日本語の折り返しを、文節の切れ目で（対応していない環境では、禁則だけ効く） */
.pg-artb p,.pg-artb li,.pg-artb blockquote{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;text-wrap:pretty}
.pg-artb h2,.pg-artb h3{word-break:auto-phrase;line-break:strict;text-wrap:balance}