:root{
  --paper:#EEF0F3; --ink:#0E1A2E; --navy:#17263C; --navy-mid:#2D4D80; --grey:#1E3556; --hl:#FFE24A; --red:#2F63B5; --sky:#3E78C8;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif; --latin:"Inter",system-ui,sans-serif;
  --gut:clamp(20px,4.4vw,72px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.22;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.label{font:800 11px/1 var(--latin);letter-spacing:.2em;text-transform:uppercase}
.mk{background:linear-gradient(transparent 58%,var(--hl) 58% 94%,transparent 94%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .9s cubic-bezier(.7,0,.2,1) .25s;padding:0 .1em}
.mk.on,.in .mk{background-size:100% 100%}
.mk.red{background-image:linear-gradient(transparent 58%,var(--red) 58% 94%,transparent 94%);color:#fff}
.mk.sky{background-image:linear-gradient(transparent 58%,var(--sky) 58% 94%,transparent 94%)}

header{position:fixed;inset:0 0 auto;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:12px var(--gut);background:rgba(238,240,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(14,26,46,.12)}
.logo{display:flex;text-decoration:none}
.logo img{height:20px;width:auto}
.menu{display:flex;gap:6px;background:var(--navy-mid);border-radius:999px;padding:6px;font-size:13px;font-weight:500}
.menu a{color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;transition:background .25s,color .25s}
.menu a:hover{background:#fff;color:var(--navy-mid)}
.menu a.cta{background:var(--hl);color:var(--ink)}
.menu a.cta:hover{background:#fff}

/* HERO */
.hero{height:100svh;min-height:600px;position:relative;display:grid;place-items:center;overflow:hidden}
.ghost{position:absolute;left:50%;top:52%;translate:-50% -50%;font:900 clamp(120px,27vw,520px)/.8 var(--latin);letter-spacing:-.07em;color:#fff;white-space:nowrap;user-select:none;pointer-events:none;opacity:.9}
.fl{position:absolute;width:clamp(90px,12vw,210px);filter:drop-shadow(0 22px 26px rgba(14,26,46,.28));will-change:transform}
.fl img{width:100%;animation:bob 7s ease-in-out infinite}
.fl:nth-of-type(odd) img{animation-duration:9s;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-12px) rotate(1.2deg)}}
.hero .copy{position:relative;text-align:center;padding:0 var(--gut)}
.hero h1{font:900 clamp(22px,6.6vw,96px)/1.35 var(--sans);letter-spacing:-.02em}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.05em}
.hero h1 .l>span{display:inline-block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.8,.2,1) .2s forwards}
.hero h1 .l:nth-child(2)>span{animation-delay:.35s}
@keyframes rise{to{transform:none}}
.hero .en{margin-top:22px;font:300 clamp(15px,1.7vw,24px) var(--latin);letter-spacing:.01em}
.hero .en b{font-weight:800;color:var(--sky)}
.hero .meta{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;display:flex;justify-content:space-between;align-items:end}
.hero .meta p{font-size:12px;max-width:26em;line-height:1.8}
.scr{display:flex;gap:12px;align-items:center}
.scr::after{content:"";width:1px;height:48px;background:var(--ink);transform-origin:top;animation:drop 2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* MANIFESTO (pinned) */
.manifesto{height:480vh;position:relative}
.manifesto .pin{position:sticky;top:0;height:100svh;display:grid;align-content:center;padding:0 var(--gut);max-width:1200px;margin:auto}
.manifesto .ln{font:900 clamp(22px,3.6vw,52px)/1.6 var(--sans);color:var(--sky);letter-spacing:-.01em;min-height:1.6em;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.manifesto .ln.show{opacity:1;transform:none}
.manifesto .ln.k{color:var(--ink)}
.manifesto .bar{position:absolute;right:var(--gut);top:50%;width:2px;height:30vh;translate:0 -50%;background:rgba(14,26,46,.15)}
.manifesto .bar i{display:block;width:100%;height:0;background:var(--ink)}

/* SERVICES */
.services{background:var(--grey);color:#fff;position:relative}
.services .head{padding:clamp(40px,7vw,96px) var(--gut) 0;display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,96px);max-width:1480px;margin:auto}
.vt{font:900 clamp(64px,17vw,300px)/1 var(--sans);letter-spacing:-.04em;color:#fff}
.services .head p{max-width:34em;font-size:16px;font-weight:500;color:#dbe4f0}
.stack{padding:clamp(40px,6vw,96px) var(--gut) clamp(80px,10vw,160px);max-width:1480px;margin:auto}
.card{position:sticky;top:90px;background:var(--paper);color:var(--ink);border-radius:6px;padding:clamp(24px,4vw,56px);margin-bottom:28px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);min-height:min(66vh,560px);box-shadow:0 -18px 40px -26px rgba(0,0,0,.5)}
.card .no{font:900 clamp(70px,11vw,170px)/.9 var(--latin);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.card h3{font:900 clamp(22px,3.1vw,48px)/1.3 var(--sans);white-space:nowrap;margin:10px 0 18px}
.card p.d{font-size:15px;max-width:34em}
.card ul{list-style:none;padding:0;margin-top:22px;border-top:2px solid var(--ink)}
.card li{padding:14px 0;border-bottom:1px solid rgba(14,26,46,.18);font-size:14px;font-weight:500;display:flex;gap:12px}
.card li::before{content:"Q";font:800 11px/2.4 var(--latin);color:var(--red)}
.card .pic{position:relative;border-radius:4px;overflow:hidden;min-height:300px;background:var(--navy)}
.card .pic>img,.card .pic>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover .pic>img{transform:scale(1.05)}
.card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,38,60,.12),rgba(23,38,60,.55));mix-blend-mode:multiply;pointer-events:none}
.card .pic .tag{position:absolute;left:18px;bottom:16px;font:800 11px var(--latin);letter-spacing:.2em;color:#fff;z-index:3}

/* WORKS (compact, secondary) */
.chips{list-style:none;padding:0;margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chips a{display:inline-block;text-decoration:none;font:900 14px var(--sans);padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;transition:.25s}
.chips a:hover{background:var(--hl);color:var(--ink);transform:translateY(-3px)}
.works{padding:clamp(64px,8vw,120px) var(--gut);background:var(--paper)}
.wrap-s{max-width:1200px;margin:auto}
.wk-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:baseline;border-top:2px solid var(--ink);padding-top:20px;margin-bottom:28px}
.wk-head .label{grid-column:1/-1}
.wk-head h2{font:900 clamp(22px,2.4vw,32px) var(--sans)}
.wk-head p:last-child{font-size:13px;color:#4a5258}
.wk-g{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.wk-g figure{margin:0}
.wk-g img{width:100%;aspect-ratio:3/4.2;object-fit:cover;filter:grayscale(1);opacity:.8;transition:.5s}
.wk-g figure:hover img{filter:none;opacity:1}
.wk-g figcaption{font:700 11px/1.5 var(--sans);margin-top:8px}
.wk-g small{font-weight:400;color:#5a6268;font-size:10px}
@media (max-width:860px){.wk-g{grid-template-columns:repeat(2,1fr)}}
/* DATA */
.data{background:var(--ink);color:#fff;padding:clamp(80px,12vw,180px) var(--gut);position:relative;overflow:hidden}
.data .dw{max-width:1480px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end}
.data .num{font:900 clamp(110px,19vw,320px)/.8 var(--latin);letter-spacing:-.08em;color:var(--hl)}
.data .num small{font:900 .18em/1 var(--sans);letter-spacing:0;margin-left:.2em;color:#fff}
.data h2{font:900 clamp(26px,3.6vw,52px)/1.5 var(--sans)}
.data p{margin-top:20px;font-size:15px;opacity:.78;max-width:30em}
.data dl{margin-top:28px;border-top:1px solid rgba(255,255,255,.3)}
.data dl div{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid rgba(255,255,255,.16);padding:14px 0;font-size:15px}
.data dt{font:800 11px/2.4 var(--latin);letter-spacing:.16em;opacity:.6}

/* FLOW */
.flow{padding:clamp(80px,12vw,180px) var(--gut);max-width:1480px;margin:auto}
.flow h2{font:900 clamp(32px,6vw,92px)/1.25 var(--sans);letter-spacing:-.02em;margin:18px 0 clamp(36px,5vw,72px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink)}
.step{padding:28px clamp(16px,2.4vw,40px) 8px 0}
.step+.step{border-left:1px solid rgba(14,26,46,.2);padding-left:clamp(16px,2.4vw,40px)}
.step .b{font:900 clamp(80px,12vw,200px)/.9 var(--latin);letter-spacing:-.06em;color:var(--red)}
.step h3{font:900 24px/1.4 var(--sans);margin:18px 0 8px}
.step p{font-size:14px}
.fee{margin-top:clamp(36px,5vw,64px);padding:26px 0;border-top:1px solid rgba(14,26,46,.2);display:grid;grid-template-columns:1fr 2fr;gap:32px;font-size:14px}
.fee h3{font:900 20px var(--sans)}

/* CONTACT */
.contact{background:var(--navy);color:#fff;padding:clamp(80px,12vw,180px) var(--gut) 0;position:relative;overflow:hidden}
.contact .cw{max-width:1100px;margin:auto}
.contact h2{font:900 clamp(44px,10vw,160px)/1.15 var(--sans);letter-spacing:-.03em;margin:22px 0 clamp(32px,5vw,64px)}
form{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
form .full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
label small{font:800 10px var(--latin);letter-spacing:.1em;margin-left:10px;padding:3px 7px;border:1px solid rgba(255,255,255,.4)}
label small.req{background:var(--hl);border-color:var(--hl);color:var(--ink)}
input,select,textarea{width:100%;font:400 16px var(--sans);background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.5);padding:12px 2px;color:#fff;border-radius:0;transition:.25s}
select option{color:var(--ink)}
input::placeholder{color:rgba(255,255,255,.4)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--hl);background:rgba(255,226,74,.08)}
textarea{min-height:150px;resize:vertical}
.agree{display:flex;gap:12px;font-size:13px;opacity:.85}
.agree input{width:20px;height:20px;margin-top:4px;accent-color:var(--hl)}
.send{font:900 17px var(--sans);background:var(--hl);color:var(--ink);border:0;padding:22px 44px;border-radius:999px;cursor:pointer;display:inline-flex;gap:14px;transition:.3s}
.send:hover{background:#fff;gap:24px}
.note{font-size:12px;opacity:.65;margin-top:12px}
.bigmark{font:900 clamp(80px,22vw,360px)/.8 var(--latin);letter-spacing:-.07em;color:rgba(255,255,255,.08);white-space:nowrap;margin-top:clamp(56px,8vw,120px);text-align:center;translate:0 12%}
footer{background:var(--navy);color:#fff;padding:20px var(--gut);display:flex;justify-content:space-between;font-size:12px;border-top:1px solid rgba(255,255,255,.14);position:relative}

.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero .meta p{display:none}
  .fl{opacity:.9}
  .services .head{grid-template-columns:1fr}
  .card{grid-template-columns:1fr;position:relative;top:0}
  .card .pic{min-height:220px}
  .data .dw{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step+.step{border-left:0;border-top:1px solid rgba(14,26,46,.2);padding-left:0;margin-top:20px}
  .fee{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .manifesto{height:420vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1 .l>span{transform:none}.rv{opacity:1;transform:none}.mk{background-size:100% 100%}
  .manifesto{height:auto}.manifesto .pin{position:static;height:auto;padding-block:80px}.manifesto .ln{opacity:1;transform:none}
}

.cta-band{padding:clamp(80px,12vw,180px) var(--gut);text-align:center;background:var(--paper)}
.cta-band h2{font:900 clamp(40px,9vw,140px)/1.2 var(--sans);letter-spacing:-.03em;margin:20px 0 28px}
.cta-band p{max-width:34em;margin:0 auto 36px;font-size:15px}
.cta-band .send{text-decoration:none}
.cta-band .send{background:var(--navy-mid);color:#fff}
.cta-band .send:hover{background:var(--hl);color:var(--ink)}
footer{background:var(--ink)!important}
footer a{text-decoration:none;margin-left:20px}
.page-contact .contact{padding-top:clamp(120px,14vw,200px);min-height:100svh}
.page-contact .contact h2{font-size:clamp(40px,8vw,120px)}

.page-privacy main{padding:clamp(120px,14vw,200px) var(--gut) clamp(80px,10vw,140px);max-width:900px;margin:auto}
.page-privacy h1{font:900 clamp(32px,6vw,72px)/1.3 var(--sans);letter-spacing:-.02em;margin:18px 0 24px}
.page-privacy .lead{font-size:15px;margin-bottom:48px}
.page-privacy h2{font:900 20px/1.5 var(--sans);margin:44px 0 12px;padding-top:20px;border-top:2px solid var(--ink)}
.page-privacy p,.page-privacy li{font-size:15px}
.page-privacy ul{padding-left:1.4em;margin-top:8px}
.page-privacy .date{margin-top:56px;font-size:13px;color:#4a5a70}
.agree a{color:#fff;text-underline-offset:3px}
.agree a:hover{color:var(--hl)}

/* ===== WordPress additions ===== */
:root{--hh:72px}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy-mid);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,opacity .2s,top .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}
body.menu-open{overflow:hidden}
@media (max-width:860px){
  .burger{display:block}
  header .menu{position:fixed;left:0;right:0;top:var(--hh);height:calc(100dvh - var(--hh));flex-direction:column;justify-content:flex-start;gap:0;border-radius:0;padding:12px var(--gut) 32px;background:var(--navy);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
  header .menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  header .menu a{display:block;font-size:20px;font-weight:900;padding:20px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.18);color:#fff}
  header .menu a:hover{background:transparent;color:var(--hl)}
  header .menu a.cta{margin-top:20px;border:0;border-radius:999px;text-align:center;background:var(--hl);color:var(--ink)}
  header .menu a.cta:hover{background:#fff;color:var(--ink)}
}
/* back to top */
.totop{position:fixed;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);z-index:70;width:54px;height:54px;border-radius:50%;border:0;background:var(--navy-mid);color:var(--hl);font:900 20px/1 var(--latin);cursor:pointer;box-shadow:0 10px 24px -10px rgba(14,26,46,.6);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .4s,visibility 0s .3s,background .25s}
.totop.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop:hover{background:var(--hl);color:var(--ink)}
.totop svg{width:20px;height:20px;display:block;margin:auto}
/* works: top compact */
.wk-g a{display:block;text-decoration:none;color:inherit}
.wk-more{margin-top:28px;text-align:right}
.wk-more a{font:800 13px var(--sans);letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:4px;transition:.25s}
.wk-more a:hover{color:var(--red);border-color:var(--red)}
/* works archive / single */
.page-works main,.single-works main{padding:clamp(120px,14vw,200px) var(--gut) clamp(80px,10vw,140px);max-width:1280px;margin:auto}
.page-works h1,.single-works h1{font:900 clamp(32px,6vw,84px)/1.25 var(--sans);letter-spacing:-.02em;margin:18px 0 20px}
.page-works .lead{max-width:34em;font-size:15px;margin-bottom:clamp(36px,5vw,64px)}
.wa-g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px) clamp(14px,2vw,28px)}
.wa-g a{text-decoration:none;color:inherit;display:block}
.wa-g .cv{aspect-ratio:3/4.2;background:#d8dce3;overflow:hidden}
.wa-g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wa-g a:hover img{transform:scale(1.05)}
.wa-g h2{font:900 15px/1.5 var(--sans);margin-top:12px}
.wa-g p{font-size:12px;color:#4a5a70;line-height:1.7}
.pager{margin-top:48px;display:flex;gap:10px;justify-content:center}
.pager a,.pager span{padding:10px 16px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font:800 13px var(--latin)}
.pager .current{background:var(--ink);color:#fff}
.sw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start;margin-top:32px}
.sw .cv img{width:100%;height:auto;box-shadow:0 30px 60px -28px rgba(14,26,46,.5)}
.sw dl{margin:28px 0;border-top:2px solid var(--ink)}
.sw dl div{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid rgba(14,26,46,.18);padding:14px 0;font-size:15px}
.sw dt{font:800 11px/2.4 var(--latin);letter-spacing:.14em;color:#4a5a70}
.sw .body{font-size:15px}
.back{display:inline-block;margin-top:36px;font:800 13px var(--sans);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:4px}
.notice{padding:18px 22px;border-radius:6px;margin-bottom:32px;font-size:15px;font-weight:500}
.notice.ok{background:var(--hl);color:var(--ink)}
.notice.ng{background:#fff;color:#8a1f11}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.page-default main{padding:clamp(120px,14vw,200px) var(--gut) clamp(80px,10vw,140px);max-width:900px;margin:auto}
@media (max-width:860px){
  .wa-g{grid-template-columns:repeat(2,1fr)}
  .sw{grid-template-columns:1fr}
  .manifesto .ln{font-size:clamp(20px,5.4vw,30px)}
}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
section[id],main[id]{scroll-margin-top:var(--hh)}
/* ログイン中の管理バーとヘッダーの重なりを避ける */
body.admin-bar header{top:32px}
body.admin-bar{--hh:104px}
@media (max-width:782px){body.admin-bar header{top:46px}body.admin-bar{--hh:118px}}
/* ヒーローの余白：画面の高さいっぱいにせず、内容に合わせて上限を設ける */
.hero{height:auto;min-height:min(80svh,760px);padding:calc(var(--hh) + 72px) 0 120px}
.hero .copy{margin:auto}
@media (max-width:860px){
  .hero{min-height:0;padding:calc(var(--hh) + 36px) 0 96px}
  .hero .meta{bottom:18px}
  .hero .chips{margin-top:20px}
}
/* トップ：最初は公式ロゴを大きく、スクロールで通常サイズに縮小 */
body.home header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:26px;padding-bottom:14px;transition:background .35s,border-color .35s,padding .45s cubic-bezier(.2,.8,.2,1)}
body.home header .logo img{height:clamp(34px,3.2vw,46px);transition:height .45s cubic-bezier(.2,.8,.2,1)}
body.home header.scrolled{background:rgba(238,240,243,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:rgba(14,26,46,.12);padding-top:12px;padding-bottom:12px}
body.home header.scrolled .logo img{height:20px}
body.home.admin-bar header{top:32px}
@media (max-width:860px){
  body.home header{padding-top:12px;padding-bottom:12px}
  body.home header .logo img{height:30px}
  body.home header.scrolled .logo img{height:20px}
  body.home.menu-open header{background:rgba(238,240,243,.94)}
}
@media (prefers-reduced-motion:reduce){body.home header,body.home header .logo img{transition:none}}
/* ナビの境界線：線はやめて、背景色の違いとごく薄い影で区切る */
header,body.home header,body.home header.scrolled{border-bottom:0}
body:not(.home) header,body.home header.scrolled{box-shadow:0 12px 28px -24px rgba(14,26,46,.5)}
body.home header{box-shadow:none}
/* ヒーロー下の説明文・SCROLL表示を外した分、余白を詰める */
.hero{min-height:min(66svh,620px);padding:calc(var(--hh) + 56px) 0 56px}
@media (max-width:860px){.hero{min-height:0;padding:calc(var(--hh) + 32px) 0 48px}}
/* 超ワイド画面（1920px以上）でも見出しが折り返さないよう、幅と文字サイズの上限を調整 */
.manifesto .pin{max-width:1400px}
.vt{font-size:clamp(64px,13vw,200px)}
.data .num{white-space:nowrap;font-size:clamp(110px,17vw,280px)}
.data .num small{white-space:nowrap}
/* 見出しの折り返し調整：会社案内の見出しと、個人情報ページの見出し */
.data h2{font-size:clamp(22px,2.6vw,40px);line-height:1.6}
.page-privacy h1{font-size:clamp(26px,4.2vw,52px)}
/* メインキャッチ：行数に応じたスクロール長、小さめの補足行 */
.manifesto{height:calc(var(--n,7) * 62vh)}
.manifesto .ln{font-size:clamp(22px,3.2vw,46px);line-height:1.5;min-height:1.5em}
.manifesto .ln.s{font-size:clamp(14px,1.35vw,20px);font-weight:500;line-height:1.9;min-height:0;color:var(--ink)}
.manifesto .ln.s1{margin-top:clamp(18px,2.6vw,36px)}
@media (max-width:860px){
  .manifesto{height:calc(var(--n,7) * 52vh)}
  .manifesto .ln{font-size:clamp(20px,5.4vw,30px)}
  .manifesto .ln.s{font-size:clamp(13px,3.6vw,16px)}
}
@media (prefers-reduced-motion:reduce){.manifesto{height:auto}}
/* メインキャッチを大胆に：画面の幅と高さの両方に合わせて、1画面に収まる最大の大きさにする */
.manifesto .pin{max-width:1600px}
.manifesto .ln{font-size:clamp(24px,min(5vw,6.4svh),84px);line-height:1.45;min-height:1.45em}
.manifesto .ln.s{font-size:clamp(15px,min(1.7vw,2.4svh),26px);line-height:1.9;min-height:0}
.manifesto .ln.s1{margin-top:clamp(20px,3svh,44px)}
@media (max-width:860px){
  .manifesto .ln{font-size:clamp(22px,6.2vw,34px)}
  .manifesto .ln.s{font-size:clamp(13px,3.7vw,17px)}
}

/* よくあるご相談：クリックで答えが開くアコーディオン */
.card{position:relative;top:auto}
.faq{margin-top:24px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid rgba(14,26,46,.18)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 28px;gap:12px;align-items:center;padding:16px 4px 16px 0;font-size:clamp(15px,1.15vw,17px);font-weight:700;line-height:1.6;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq .q,.faq .a b{width:30px;height:30px;border-radius:50%;font:800 15px/30px var(--latin);text-align:center;display:block}
.faq .q{background:var(--navy-mid);color:#fff}
.faq .pm{position:relative;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;transition:background .25s,transform .35s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s,opacity .3s}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq summary:hover .pm{background:var(--hl)}
.faq details[open] .pm{background:var(--hl);transform:rotate(180deg)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.faq .a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:2px 28px 22px 0;animation:faqIn .45s cubic-bezier(.2,.8,.2,1)}
.faq .a b{background:var(--hl);color:var(--ink)}
.faq .a p{font-size:14.5px;line-height:1.95;color:#2a3649;margin:0}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq .a{animation:none}}

/* ヒーロー見出し：文字が集まるアニメーション */
.hero h1 .l{overflow:visible}
.hero h1 .l>span{transform:none;animation:none}
.hero h1.sc .ch{display:inline-block;opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));filter:blur(6px);transition:transform 1.25s cubic-bezier(.16,1,.3,1) var(--d),opacity .6s ease var(--d),filter 1s ease var(--d);will-change:transform}
.hero h1.sc.go .ch{opacity:1;transform:none;filter:none}
.hero h1.sc .mk,.hero h1.sc .mk.on{background-size:0 100%}
.hero h1.sc.done .mk,.hero h1.sc.done .mk.on{background-size:100% 100%}
.hero h1.sc ~ .en,.hero h1.sc ~ .chips{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.hero h1.sc.done ~ .en,.hero h1.sc.done ~ .chips{opacity:1;transform:none}
.hero h1.sc.done ~ .chips{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){.hero h1.sc .ch{transition:none}}

/* ヒーロー下のリード文を早く見せる／スクロールを短く */
.hero{min-height:min(58svh,540px);padding-bottom:24px}
@media (max-width:860px){.hero{min-height:0;padding-bottom:24px}}
.manifesto{height:calc(var(--n,7) * 30vh)}
.manifesto .pin{align-content:start;padding-top:calc(var(--hh) + 20px)}
@media (max-width:860px){.manifesto{height:calc(var(--n,7) * 27vh)}}
/* キャッチの焼き付け：マーカーが引かれたあと、ワンテンポ置いてサブコピーとボタンを出す */
.hero h1.sc.done ~ .en{transition-delay:1.3s}
.hero h1.sc.done ~ .chips{transition-delay:1.55s}
/* キャッチのスクロール区間をさらに短縮：固定される区間は70vh（スマホ85vh）。全文はその約65%、約45vhで出し切る */
.manifesto{height:calc(100svh + 70vh)}
@media (max-width:860px){.manifesto{height:calc(100svh + 85vh)}}
@media (prefers-reduced-motion:reduce){.manifesto{height:auto}}
/* メインキャッチ：まとまり（グループ）ごとに表示、間に区切り線、色もまとまりごとに変える */
.manifesto .ln{opacity:0;transform:translateY(14px)}
.manifesto .grp.show .ln{opacity:1;transform:none}
.manifesto .grp{margin:0}
.manifesto .grp.g1{color:#3E78C8}
.manifesto .grp.g2{color:#0E1A2E}
.manifesto .grp.g3{color:#6C9BD8}
.manifesto .grp.g4{color:#2D4D80}
.manifesto .grp .ln{color:inherit}
.manifesto .grp.gs .ln{color:var(--ink)}
.manifesto .rule{display:block;height:2px;margin:clamp(8px,1.4svh,18px) 0;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.7,0,.2,1) .45s}
.manifesto .grp.show .rule{transform:scaleX(1)}
.manifesto .ln{font-size:clamp(24px,min(5vw,5.6svh),80px)}
.manifesto .ln.s{font-size:clamp(15px,min(1.7vw,2.3svh),26px)}
.manifesto .grp.gs{margin-top:clamp(14px,2.4svh,32px)}
@media (max-width:860px){.manifesto .ln{font-size:clamp(22px,6.2vw,34px)}.manifesto .ln.s{font-size:clamp(13px,3.7vw,17px)}}
@media (prefers-reduced-motion:reduce){.manifesto .ln{opacity:1;transform:none}.manifesto .rule{transform:none;transition:none}}

/* 区切り線は画面に出さない（意図を示す目印だったため）。まとまりの間は余白だけで分ける */
.manifesto .rule{display:none}
.manifesto .grp:not(.gs){margin-bottom:clamp(12px,2.2svh,28px)}
.manifesto .grp.g3{color:#3E78C8}
/* まとまりは表示の順番だけの単位。見た目の行間はすべて同じにする（まとまり間の余白をなくす） */
.manifesto .grp:not(.gs){margin-bottom:0}

/* キャッチは固定表示をやめ、普通に流れる配置にする（表示は時間で順番に出る） */
.manifesto{height:auto}
.manifesto .pin{position:static;height:auto;padding:clamp(32px,6svh,72px) var(--gut) clamp(56px,9svh,110px)}
.manifesto .bar{display:none}
@media (max-width:860px){.manifesto{height:auto}}
/* キャッチの行間を半分に：1.45 → 1.22（文字のすき間 0.45em → 0.22em） */
.manifesto .ln{line-height:1.22;min-height:1.22em}
.manifesto .ln.s{line-height:1.9;min-height:0}

/* ===== ヒーローのロゴ：メインキャッチの下に時間差で表示。スクロールで左上のナビ位置へ移動 ===== */
.hero-logo{margin:clamp(34px,6svh,64px) auto clamp(34px,6svh,64px);display:flex;justify-content:center}
.hero-logo img{width:clamp(240px,30vw,460px);height:auto;display:block}
.hero-logo.gone img{visibility:hidden}
.hero h1.sc ~ .hero-logo{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.hero h1.sc.done ~ .hero-logo{opacity:1;transform:none;transition-delay:1.3s}
.hero h1.sc.done ~ .chips{transition-delay:2.0s}
/* 左上のロゴ：トップでは出さず、スクロールが始まると表示（JSが動いているときだけ） */
body.home header{padding-top:14px;padding-bottom:14px}
body.home header .logo img{height:20px;transition:opacity .3s}
body.home header.scrolled .logo img{height:20px}
html.aw-hl body.home header:not(.scrolled) .logo img{opacity:0}
html.aw-hl body.home header.flying .logo img{opacity:0 !important;transition:none}
.fly-logo{position:fixed;z-index:95;pointer-events:none;margin:0;max-width:none;transition:left .75s cubic-bezier(.7,0,.2,1),top .75s cubic-bezier(.7,0,.2,1),width .75s cubic-bezier(.7,0,.2,1),height .75s cubic-bezier(.7,0,.2,1)}
@media (max-width:860px){body.home header{padding-top:12px;padding-bottom:12px}body.home header .logo img{height:20px}.hero-logo img{width:clamp(200px,58vw,300px)}}
@media (prefers-reduced-motion:reduce){.fly-logo{transition:none}}

/* リード全体をメインキャッチの中央にそろえる：ブロックの幅は最も長い行に合わせ、行頭は左揃えのまま */
.manifesto .pin{display:flex;justify-content:center}
.manifesto #lines{width:max-content;max-width:100%}
.manifesto .ln{position:relative;text-align:left}
.manifesto .ln .ph{display:block;color:transparent}
.manifesto .ln .vis{position:absolute;left:0;right:0;top:0}

/* ヒーロー：Edit & Design ／ ロゴ ／ we shape… の3段。表示の順番は ロゴ → Edit & Design → we shape… → ボタン */
.hero .en1{margin:clamp(18px,3svh,34px) 0 0;font-size:clamp(15px,1.7vw,24px);letter-spacing:.04em}
.hero .en1 b{font-weight:800;color:var(--sky)}
.hero .en2{margin:0;font-size:clamp(14px,1.5vw,21px);font-weight:300;letter-spacing:.02em}
.hero-logo{margin:clamp(12px,2.2svh,26px) auto clamp(12px,2.2svh,26px)}
.hero h1.sc.done ~ .en1{transition-delay:1.9s}
.hero h1.sc.done ~ .en2{transition-delay:2.5s}
.hero h1.sc.done ~ .chips{transition-delay:3.1s}

/* 補足の3行は演出なし：短いフェードで、すっと表示 */
.manifesto .grp.gs .ln{transform:none;transition:opacity .45s ease}

/* 追加：できること見出しの小さな英文／会社案内の SINCE */
.vt .eyebrow{display:block;font:800 clamp(13px,1.3vw,19px)/1.2 var(--latin);letter-spacing:.22em;color:var(--hl);margin:0 0 clamp(10px,1.6vw,20px)}
.data .since{font:800 clamp(13px,1.3vw,19px)/1 var(--latin);letter-spacing:.3em;color:#fff;opacity:.8;margin-bottom:clamp(8px,1.4vw,18px)}
.services .head p br+*{}

/* ===== 濃い背景の上のマーカー：文字を濃い色にして、黄色の帯を文字の裏全体に敷く（白抜き＋黄色は読みにくいため） ===== */
.data .mk,.contact .mk{background-image:linear-gradient(var(--hl),var(--hl));color:var(--ink);padding:.02em .14em;margin:0 -.02em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== 会社案内：「26 YEARS」を見出しの右の空きスペースに置く ===== */
.data .dw{align-items:start;gap:clamp(20px,4vw,64px)}
.data .dw>.stat{order:2;align-self:start}
.data .dw>div:not(.stat){order:1}
.data .stat .since{margin-bottom:clamp(6px,1vw,14px)}
.data .num{line-height:.82}
.data h2{margin-top:0}
.data dl{margin-top:20px}
@media (max-width:860px){.data .dw>.stat{order:0}.data .dw>div:not(.stat){order:1}}

/* ===== 余白の見直し：セクション上下の余白をおよそ半分に ===== */
.data{padding:clamp(48px,6vw,96px) var(--gut)}
.flow{padding:clamp(48px,6vw,96px) var(--gut)}
.flow h2{margin:14px 0 clamp(24px,3vw,44px)}
.cta-band{padding:clamp(56px,7vw,104px) var(--gut)}
.cta-band h2{margin:14px 0 20px}
.cta-band p{margin-bottom:28px}
.contact{padding-top:clamp(56px,7vw,104px)}
.page-contact .contact{padding-top:clamp(104px,10vw,148px)}
.works{padding:clamp(40px,5vw,72px) var(--gut)}
.services .stack{padding-bottom:clamp(48px,6vw,96px)}
.manifesto .pin{padding-bottom:clamp(40px,6svh,72px)}
@media (max-width:860px){.data{padding:48px var(--gut)}.flow{padding:48px var(--gut)}.cta-band{padding:56px var(--gut)}}

/* ===== ナビ：英語＋日本語の併記 ===== */
header .menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;gap:2px}
header .menu a .en{font-weight:800;font-size:13px;letter-spacing:.02em}
header .menu a .ja{font-weight:500;font-size:10px;opacity:.78;letter-spacing:.04em}
header .menu a.cta .ja{opacity:.85}
@media (max-width:860px){
  header .menu a{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px}
  header .menu a .en{font-size:20px;font-weight:900}
  header .menu a .ja{font-size:13px;opacity:.8}
  header .menu a.cta{justify-content:center;gap:14px;padding:18px 20px}
  header .menu a.cta .en{font-size:20px}
  header .menu a.cta .ja{font-size:13px;opacity:.85}
}

/* ===== 濃い背景のマーカー：帯の高さを「文字の大きさ(1em)」に固定し、上下の行にはみ出さないようにする ===== */
.data .mk,.contact .mk{
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;
  background-position:0 60%;
  background-size:0 1em;
  padding:0 .14em;
  margin:0;
  border-radius:0;
}
.data .mk.on,.contact .mk.on,.data .in .mk,.contact .in .mk{background-size:100% 1em}
@media (prefers-reduced-motion:reduce){.data .mk,.contact .mk{background-size:100% 1em}}

/* ===== 制作実績カード（種類タグ・Amazonボタン）／絞り込み・並び替え ===== */
.wk{margin:0}
.wk-img{position:relative;aspect-ratio:3/4.2;background:#d8dce3;overflow:hidden}
.wk-img img{width:100%;height:100%;object-fit:cover;display:block}
.wk-ph{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font:700 12px/1.6 var(--sans);color:#4a5a70}
.wk-tag{position:absolute;left:0;top:0;background:var(--navy);color:#fff;font:700 10px/1 var(--sans);letter-spacing:.06em;padding:5px 8px}
.wk figcaption{display:flex;flex-direction:column;gap:3px;margin-top:10px;font:inherit}
.wk-title{font:900 13px/1.5 var(--sans)}
.wk figcaption small{font:500 11px/1.5 var(--sans);color:#5a6a80}
.az{align-self:flex-start;margin-top:6px;font:700 11px/1 var(--sans);text-decoration:none;color:var(--navy-mid);border:1.5px solid var(--navy-mid);border-radius:999px;padding:7px 12px;transition:background .25s,color .25s,border-color .25s}
.az:hover{background:var(--hl);border-color:var(--ink);color:var(--ink)}
.az-note{margin-top:28px;font-size:11px;color:#5a6a80}
.wk[hidden]{display:none}

.wk-tools{display:flex;gap:14px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 clamp(20px,3vw,32px)}
.wk-filter{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:700 13px/1 var(--sans);padding:10px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip span{margin-left:8px;font:600 11px var(--latin);opacity:.6}
.chip:hover{background:var(--hl)}
.chip.on{background:var(--navy-mid);border-color:var(--navy-mid);color:#fff}
.chip.on span{opacity:.85}
.wk-sort{display:flex;align-items:center;gap:10px;font:700 12px var(--sans)}
.wk-sort select{font:500 14px var(--sans);padding:9px 12px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.wk-empty{padding:40px 0;font-size:15px;color:#4a5a70}
.page-works .wa-g{gap:clamp(22px,2.6vw,40px) clamp(14px,2vw,28px)}
@media (max-width:860px){.wk-title{font-size:12px}.wk-tools{align-items:flex-start}}

/* ===== スマホ：表紙を切らずに全体表示。高さ（天地）をそろえ、幅は表紙ごとに変わる ===== */
@media (max-width:860px){
  .wk-g,.wa-g{display:flex;flex-wrap:wrap;gap:22px 16px;align-items:flex-start}
  .wk{flex:0 0 auto;max-width:100%}
  .wk-img{aspect-ratio:auto;height:210px;width:auto;background:transparent;overflow:visible;display:block}
  .wk-img img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
  .wk-ph{position:static;width:150px;height:210px;background:#d8dce3}
  .wk-tag{left:0;top:0}
  /* 説明文の長さで、カードの幅が広がらないようにする（幅は表紙の幅に合わせる） */
  .wk figcaption{width:0;min-width:100%}
}

/* ===== PC：トップの制作実績。表紙を少し重ねて、左から配るように登場 ===== */
@media (min-width:861px){
  .works .wk-g{display:flex;justify-content:center;gap:0;position:relative;padding:18px 0 6px;--ov:26px}
  .works .wk{flex:0 0 auto;margin-left:calc(var(--ov) * -1);position:relative;z-index:1;transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px));transition:transform .35s cubic-bezier(.2,.9,.25,1.05),box-shadow .35s}
  .works .wk:first-child{margin-left:0}
  .works .wk:nth-child(1){--rot:-2deg;--ty:2px}
  .works .wk:nth-child(2){--rot:1.5deg;--ty:12px}
  .works .wk:nth-child(3){--rot:-1deg;--ty:-4px}
  .works .wk:nth-child(4){--rot:2deg;--ty:10px}
  .works .wk:nth-child(5){--rot:-1.6deg;--ty:-2px}
  .works .wk:nth-child(6){--rot:1deg;--ty:12px}
  .works .wk:nth-child(7){--rot:-2.2deg;--ty:0px}
  .works .wk-img{aspect-ratio:auto;height:clamp(200px,17.5vw,270px);width:auto;background:transparent;overflow:visible;display:block}
  .works .wk-img img{height:100%;width:auto;object-fit:contain;display:block;box-shadow:-10px 10px 22px -12px rgba(14,26,46,.55);outline:2px solid rgba(255,255,255,.75)}
  .works .wk figcaption{width:0;min-width:calc(100% - var(--ov));padding-left:2px}
  .works .wk:hover{z-index:10;transform:rotate(0deg) translateY(-12px) scale(1.03)}
  .works .wk:hover img{filter:none;opacity:1}

  /* 登場：山札のように左端に積まれた状態から、1枚ずつ素早く配る */
  .works .wk-g.deal .wk{opacity:0;transform:translate(var(--dx,-300px),0) rotate(-14deg) scale(.94);transition:transform .55s cubic-bezier(.2,.9,.25,1.06) var(--dl,0s),opacity .18s ease var(--dl,0s)}
  .works .wk-g.deal.go .wk{opacity:1;transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px))}
  .works .wk-g.deal.go.done .wk{transition:transform .35s cubic-bezier(.2,.9,.25,1.05),box-shadow .35s;transition-delay:0s}
  .works .wk-g.deal.go.done .wk:hover{transform:rotate(0deg) translateY(-12px) scale(1.03)}
}

/* トップの重なり表示：重なった部分が透けないよう、画像の透明度は使わない */
@media (min-width:861px){.works .wk-img img{opacity:1}.works .wk:hover img{opacity:1}}

/* ===== PC：制作実績一覧。表紙は切らずに全体表示。天地をそろえ、左右は表紙ごとに変わる ===== */
@media (min-width:861px){
  .page-works .wa-g{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(26px,3vw,44px) clamp(18px,2vw,28px);--wh:clamp(230px,19vw,300px)}
  .page-works .wk{flex:0 0 auto;max-width:100%}
  .page-works .wk-img{aspect-ratio:auto;height:var(--wh);width:auto;background:transparent;overflow:visible;display:block}
  .page-works .wk-img img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
  .page-works .wk-ph{position:static;width:calc(var(--wh) * .71);height:var(--wh);background:#d8dce3}
  .page-works .wk-tag{left:0;top:0}
  .page-works .wk figcaption{width:0;min-width:100%}
  .page-works .wa-g .wk-title{font-size:13px}
}

/* ===== PC：制作実績一覧。列をそろえ、最大5列（狭くなると列数は自動で減る） ===== */
@media (min-width:861px){
  .page-works .wa-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(190px,calc((100% - 4 * clamp(18px,2vw,28px)) / 5)),1fr));align-items:start;--wh:clamp(200px,16vw,260px)}
  .page-works .wk{max-width:none;min-width:0}
  .page-works .wk figcaption{width:auto;min-width:0}
}

/* トップの表紙：画像の縦横比をそのまま使い、左右に余白（枠）ができないようにする */
.wk-g .wk-img img,.wa-g .wk-img img{aspect-ratio:auto}

/* ログイン中の管理者にだけ出る「編集」ボタン（実績カードの右上） */
.wk-edit{position:absolute;left:0;top:21px;z-index:5;background:#fff;color:var(--navy);font:700 11px/1 var(--sans);letter-spacing:.04em;padding:6px 9px;text-decoration:none;border:1.5px solid var(--navy);opacity:.92;transition:background .2s,color .2s}
.wk-edit:hover{background:var(--hl);color:var(--ink);opacity:1}