/* Layout: 余白の多い編集型（UP Forwardの考え方）。浮いたピル型ヘッダー → FV → 取引先 → About（左に英字の大見出し、右に語り）→ Service（GRUSTの写真帯を2本）→ 代表 → 写真の帯 → Contact → フッター。色は紺1色＋青みの白 */
:root{
  --bg:#ffffff; --paper:#f4f6f9; --ink:#16263c; --text:#36465a; --muted:#6c7a8c; --line:#dfe4ea;
  --navy:#1b2e48; --navy-2:#24446b; --sky:#e8eef5; --white:#ffffff;
  --f-en:"Cormorant Garamond","Times New Roman",serif;
  --f-en-q:"Questrial","Helvetica Neue",Arial,sans-serif;
  --f-en-b:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-jp-h:"Shippori Mincho","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --f-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-jp);font-size:16px;line-height:1.9;margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1160px;margin:0 auto}
.pc-br{display:inline}
@media (max-width:767px){.pc-br{display:none}}

/* 見出しの型：英字の大文字＋日本語の小ラベル */
.eh{display:flex;flex-direction:column;gap:10px}
.eh .en{font-family:var(--f-en);font-weight:500;font-size:clamp(56px,9vw,120px);line-height:.95;letter-spacing:.01em;color:var(--navy)}
.eh .ja{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.14em;color:var(--muted)}
.eh .ja::before{content:"";width:28px;height:1px;background:var(--navy)}

/* Header（透明。スクロールすると白のすりガラスに） */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.92)}
.logo-img{display:block;height:36px;width:auto}
footer .logo-img{height:44px;filter:brightness(0) invert(1)}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:transparent;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.hd.on{background:rgba(246,247,249,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(27,46,72,.08)}
.hd-in{display:flex;align-items:center;gap:40px;height:76px;max-width:1360px;margin:0 auto}
.hd .logo{margin-right:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav a{position:relative;font-size:13.5px;letter-spacing:.14em;color:#252c36;padding:6px 0}
.nav a span{position:relative;display:inline-block}
.nav a span::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#252c36;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.nav a:hover span::after,.nav a:focus-visible span::after{transform:scaleX(1);transform-origin:left}
.cta-pill{display:inline-flex;align-items:center;gap:14px;background:#252c36;color:#fff;font-size:13.5px;letter-spacing:.1em;padding:0 8px 0 22px;height:46px;border-radius:999px;transition:background .25s,transform .25s}
.cta-pill i{width:30px;height:30px;border-radius:50%;background:#fff;position:relative;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.cta-pill i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-top:1.5px solid #252c36;border-right:1.5px solid #252c36;transform:translate(-65%,-50%) rotate(45deg)}
.cta-pill:hover{background:var(--navy)}
.cta-pill:hover i{transform:translateX(4px)}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(37,44,54,.15);background:rgba(255,255,255,.9);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:#252c36}
.drawer{position:fixed;inset:0;z-index:70;background:rgba(246,247,249,.98);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;font-size:18px;letter-spacing:.14em;color:#252c36}
.drawer .x{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:20px;cursor:pointer}
.drawer[hidden]{display:none}
@media (max-width:900px){.nav{display:none}.burger{display:flex}.hd-in{height:72px}}
@media (prefers-reduced-motion:reduce){.nav a span::after,.cta-pill,.cta-pill i,.hd{transition:none}}

/* FV（⑥ドリーム社の型：右に大きな写真を断ち落とし、左下に大きな英字を2行＋日本語。写真の左端はピクセル状にほどけるくりぬき） */
.hero{position:relative;overflow:hidden;margin-top:-76px;height:calc(84px + 58vw * .564 + 40px);min-height:460px;background:#ffffff;color:var(--ink)}
.hero .photo{position:absolute;z-index:1;top:84px;right:0;width:58vw;aspect-ratio:1000/564}
.hero .photo svg{display:block;width:100%;height:100%;overflow:visible}
.hero .cap{position:absolute;z-index:2;left:max(16px,env(safe-area-inset-left,0px),6vw);right:max(16px,env(safe-area-inset-right,0px));bottom:34px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hero .en{font-family:var(--f-en-q);font-weight:400;font-size:clamp(40px,6.4vw,112px);line-height:1.08;letter-spacing:-.01em;white-space:nowrap}
.hero h1{font-family:var(--f-jp);font-weight:700;font-size:clamp(20px,2.2vw,34px);line-height:1.6;letter-spacing:.08em;color:#252c36;margin-top:clamp(10px,1.4vw,22px)}
.hero p.sub{font-size:clamp(14px,1.1vw,16px);line-height:1.9;letter-spacing:.04em;color:var(--muted)}
@media (min-width:768px){.hero p.sub,.hero h1{max-width:calc(42vw - max(16px,6vw) - 8px)}}
@media (max-width:767px){
  .hero{height:auto;min-height:0;padding-top:88px;padding-bottom:36px;display:flex;flex-direction:column}
  .hero .cap{order:2}
  .hero .photo{position:relative;top:auto;width:calc(100% - max(16px,env(safe-area-inset-left,0px)));margin-left:auto}
  .hero .cap{position:relative;left:auto;right:auto;bottom:auto;margin-top:24px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .hero .en{font-size:11vw}
}

/* 取引先 */
.clients{padding-block:56px;border-bottom:1px solid var(--line)}
.clients .wrap{display:block}
.clients .lbl{display:flex;flex-direction:column;gap:2px}
.clients .lbl b{font-family:var(--f-en-q);font-weight:400;font-size:28px;color:#252c36;line-height:1}
.clients .lbl span{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.clients ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.clients li:first-child{border-left:0}
.clients li{height:72px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);padding-inline:14px}
.clients img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1000px){.clients ul{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}.clients li:nth-child(4n+1){border-left:0}}
@media (max-width:600px){.clients ul{grid-template-columns:repeat(2,minmax(0,1fr))}.clients li{height:56px}.clients li:nth-child(4n+1){border-left:1px solid var(--line)}.clients li:nth-child(odd){border-left:0}}

/* About（住宅ファミリー社の型：左に縦長の写真、右に細いゴシックの大きな英字見出しと本文、最後に「View more」） */
.about{padding-block:150px}
.about .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center;max-width:1080px}
.about .pic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.about .txt{display:flex;flex-direction:column;gap:28px;min-width:0}
.about .ttl{display:flex;flex-direction:column;gap:8px}
.about .ttl .en{font-family:var(--f-en-q);font-size:clamp(48px,6vw,80px);line-height:1;color:#252c36}
.about .ttl .ja{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.about h2{font-family:var(--f-jp);font-weight:500;font-size:clamp(19px,1.9vw,24px);line-height:1.7;letter-spacing:.05em;color:#252c36;margin-top:12px}
.about .body{display:flex;flex-direction:column;gap:1.2em}
.about .body p{font-size:15px;line-height:2.1;letter-spacing:.04em;color:var(--text)}
.about .more{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:40px;padding-bottom:12px;border-bottom:1px solid #252c36;font-family:var(--f-en-q);font-size:16px;color:#252c36}
.about .more i{width:30px;height:18px;border-radius:999px;background:#252c36;position:relative;transition:transform .3s}
.about .more i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}
.about .more:hover i{transform:translateX(4px)}
@media (max-width:900px){.about{padding-block:100px}.about .wrap{grid-template-columns:1fr;gap:40px}.about .pic{max-width:420px}}

/* Service（GRUSTの写真帯） */
.service{background:var(--paper);padding-block:150px}
.service .head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:72px}
.service .lead{font-family:var(--f-jp-h);font-weight:500;font-size:clamp(18px,1.9vw,24px);line-height:1.9;letter-spacing:.05em;color:var(--navy)}
.bands{display:flex;flex-direction:column;gap:28px}
.band{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:460px;background:var(--white);overflow:hidden;color:var(--ink)}
.band .pic{position:relative;overflow:hidden;background:linear-gradient(135deg,#1b2e48,#2c5379 60%,#6e93b6)}
.band .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.165,.84,.44,1)}
.band:hover .pic img{transform:scale(1.04)}
.band .pic .tbd{position:absolute;left:16px;bottom:14px;font-size:11px;color:#fff;opacity:.75;background:rgba(0,0,0,.3);padding:2px 8px;border-radius:3px}
.band .txt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:56px clamp(28px,4vw,64px);min-width:0;order:-1}
.band:nth-child(even) .txt{order:1}
.band .no{font-family:var(--f-en);font-size:15px;letter-spacing:.2em;color:var(--muted)}
.band .big{font-family:var(--f-en-b);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.01em;color:var(--navy);text-transform:uppercase}
.band .big small{display:block;font-family:var(--f-en);font-weight:500;font-style:italic;font-size:15px;letter-spacing:.14em;text-transform:none;color:var(--muted);margin-bottom:10px}
.band h3{font-family:var(--f-jp-h);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--ink)}
.band p{font-size:15px;color:var(--text)}
.band .go{margin-top:12px;display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;color:var(--navy)}
.band .go i{width:44px;height:44px;border-radius:50%;border:1px solid var(--navy);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.band .go i::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
.band:hover .go i,.band:focus-visible .go i{background:var(--navy);color:var(--white)}
@media (max-width:900px){.service{padding-block:100px}.service .head{grid-template-columns:1fr;gap:28px;margin-bottom:48px}.band{grid-template-columns:1fr;min-height:0}.band .pic{aspect-ratio:16/10}.band .txt,.band:nth-child(even) .txt{order:1;padding:32px 24px 36px}}

/* Service の文字をAboutに合わせる（英字はQuestrial、日本語はNoto Sans JPの中太） */
.service .eh .en{font-family:var(--f-en-q);font-weight:400;font-size:clamp(48px,6vw,80px);line-height:1;color:#252c36}
.service .eh .ja{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.service .eh .ja::before{display:none}
.service .lead{font-family:var(--f-jp);font-weight:500;font-size:clamp(17px,1.7vw,22px);line-height:1.8;letter-spacing:.05em;color:#252c36}
.band .no{font-family:var(--f-en-q);font-size:15px;letter-spacing:.12em}
.band .big{font-family:var(--f-en-q);font-weight:400;font-size:clamp(34px,4vw,56px);letter-spacing:0;text-transform:none;color:#252c36}
.band .big small{font-family:var(--f-en-q);font-style:normal;font-size:14px;letter-spacing:.08em}
.band h3{font-family:var(--f-jp);font-weight:500;font-size:clamp(24px,2.4vw,32px);letter-spacing:.06em;color:#252c36;line-height:1.5}
.band p{letter-spacing:.04em}
.band .go{font-family:var(--f-jp)}

/* 代表 */
.rep{padding-block:150px}
.rep .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px;align-items:center}
.rep .pic{position:relative}
.rep .pic::before{content:"";position:absolute;right:-22px;bottom:-22px;width:62%;height:62%;background:var(--sky);z-index:0}
.rep .pic img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.rep .txt{display:flex;flex-direction:column;gap:30px;min-width:0}
.rep .who{display:flex;flex-direction:column;gap:6px}
.rep .role{font-size:13px;letter-spacing:.14em;color:var(--muted)}
.rep .name{font-family:var(--f-jp-h);font-weight:700;font-size:clamp(28px,3vw,38px);letter-spacing:.14em;color:var(--navy);line-height:1.3}
.rep .bio{font-size:15px;line-height:2.1;color:var(--text);padding-top:26px;border-top:1px solid var(--line)}
@media (max-width:900px){.rep{padding-block:100px}.rep .wrap{grid-template-columns:1fr;gap:56px}.rep .pic::before{right:-10px;bottom:-10px}}

/* Our Style（仕事の進め方）と写真の帯 */
.style{padding-block:0 120px}
.style .head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:end;margin-bottom:56px}
.style .ttl{display:flex;flex-direction:column;gap:8px}
.style .ttl .en{font-family:var(--f-en-q);font-size:clamp(48px,6vw,80px);line-height:1;color:#252c36}
.style .ttl .ja{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.style .lead{font-family:var(--f-jp);font-weight:500;font-size:clamp(20px,2.2vw,30px);line-height:1.7;letter-spacing:.05em;color:#252c36}
.style .cards{list-style:none;margin:0 0 80px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #252c36}
.style .cards li{display:flex;flex-direction:column;gap:14px;padding:32px 28px 8px 0;min-width:0}
.style .cards li + li{padding-left:28px;border-left:1px solid var(--line)}
.style .cards .no{font-family:var(--f-en-q);font-size:14px;letter-spacing:.12em;color:var(--muted)}
.style .cards .key{font-family:var(--f-en-q);font-size:clamp(28px,2.8vw,40px);line-height:1.1;color:#252c36}
.style .cards .txt{font-size:15px;line-height:1.95;letter-spacing:.04em;color:var(--text)}
.style .strip{overflow:hidden}
.style .track{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content;animation:strip 60s linear infinite}
.style .strip:hover .track{animation-play-state:paused}
.style .track li{flex:none;width:clamp(240px,24vw,360px);aspect-ratio:4/3;margin:0}
.style .track img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
@keyframes strip{to{transform:translateX(calc(-50% - 6px))}}
@media (max-width:900px){.style{padding-block:100px}.style .head{grid-template-columns:1fr;gap:24px;margin-bottom:36px}.style .cards{grid-template-columns:1fr;margin-bottom:48px}.style .cards li,.style .cards li + li{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.style .track{animation:none}.style .strip{overflow-x:auto}.style .track li[aria-hidden]{display:none}}

/* Contact */
.contact{background:var(--navy);color:var(--white);padding-block:130px}
.contact .eh .en{color:var(--white);font-family:var(--f-en-q);font-weight:400;font-size:clamp(48px,6vw,80px);line-height:1}
.contact .eh .ja::before{display:none}
.contact .c .k{font-family:var(--f-en-q)!important}
.contact .c h3{font-family:var(--f-jp)!important;font-weight:500!important}
.contact .eh .ja{color:rgba(255,255,255,.7)}
.contact .eh .ja::before{background:rgba(255,255,255,.7)}
.contact .head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:56px}
.contact .head p{font-size:15px;line-height:2;color:rgba(255,255,255,.85)}
.contact .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}
.contact .c{display:flex;flex-direction:column;gap:14px;padding:36px 32px;background:var(--navy);min-width:0;transition:background .3s}
.contact .c:hover,.contact .c:focus-visible{background:var(--navy-2)}
.contact .c .k{font-family:var(--f-en);font-size:15px;letter-spacing:.2em;opacity:.65}
.contact .c h3{font-family:var(--f-jp-h);font-weight:700;font-size:20px;letter-spacing:.06em}
.contact .c p{font-size:14px;line-height:1.9;color:rgba(255,255,255,.82)}
.contact .c .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500}
.contact .c .go i{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.contact .c .go i::after{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
.contact .c:hover .go i{background:var(--white);color:var(--navy)}
@media (max-width:900px){.contact{padding-block:100px}.contact .head{grid-template-columns:1fr;gap:24px}.contact .cards{grid-template-columns:1fr}}

/* About Us（私たち） */
.us{padding-block:150px 110px}
.us .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1160px}
.us .pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.us .txt{display:flex;flex-direction:column;gap:26px;min-width:0}
.us .ttl{display:flex;flex-direction:column;gap:8px}
.us .ttl .en{font-family:var(--f-en-q);font-size:clamp(48px,6vw,80px);line-height:1;color:#252c36}
.us .ttl .ja{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.us h2{font-family:var(--f-jp);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.7;letter-spacing:.06em;color:#252c36;margin-top:8px}
.us .body{display:flex;flex-direction:column;gap:1.2em}
.us .body p{font-size:15px;line-height:2.1;letter-spacing:.04em;color:var(--text)}
@media (max-width:900px){.us{padding-block:100px 70px}.us .wrap{grid-template-columns:1fr;gap:36px}}

/* Footer（法人情報つき） */
footer{padding-block:80px 32px;background:#1b2e48;color:#e6ebf2}
footer .wrap{display:flex;flex-direction:column;gap:36px}
footer .corp{display:flex;flex-direction:column;gap:14px}
footer .tag{font-family:var(--f-jp);font-weight:500;font-size:17px;letter-spacing:.06em;color:#ffffff;margin-top:6px}
footer .addr{font-size:13px;line-height:1.9;letter-spacing:.04em;color:rgba(230,235,242,.7)}
footer dl{margin:0;display:grid;grid-template-columns:6em minmax(0,1fr);gap:8px 20px;font-size:14px;line-height:1.9;max-width:720px}
footer dl div{display:contents}
footer dt{color:var(--muted);letter-spacing:.06em}
footer dd{margin:0;color:var(--text)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);color:rgba(230,235,242,.85)}
footer nav a:hover{color:#ffffff}
footer .copy{font-size:12px;color:rgba(230,235,242,.5)}
@media (max-width:600px){footer dl{grid-template-columns:1fr;gap:2px 0}footer dt{margin-top:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.strip .track{animation:none}.strip{overflow-x:auto}.strip li[aria-hidden]{display:none}.band .pic img{transition:none}}

/* 配色：Traitロゴのグラデーション（シアン→ブルー→インディゴ→バイオレット）。本文と日本語見出しは濃いグレーのまま */
:root{--c1:#25e8f9;--c2:#3da6ef;--c3:#6665f1;--c4:#9759f6;--grad:linear-gradient(90deg,#22d3ee 0%,#3da6ef 32%,#6665f1 66%,#9759f6 100%);--indigo:#6665f1;--deep:#1e1b4b;--paper:#f3f3fb}
:focus-visible{outline-color:var(--indigo)}
.hd.on{background:rgba(246,246,253,.82);box-shadow:0 1px 0 rgba(102,101,241,.12)}
.nav a span::after{background:var(--grad)}
.hero .en,.about .ttl .en,.service .eh .en,.us .ttl .en{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content;max-width:100%;padding-bottom:.08em}
@media (max-width:767px){.hero .en{width:auto}}
.about .more{border-bottom-color:var(--indigo)}
.about .more i{background:var(--grad)}
.band .pic{background:linear-gradient(135deg,var(--c2),var(--c3) 60%,var(--c4))}
.band .no{color:var(--indigo)}
.band .go{color:var(--indigo)}
.band .go i{border-color:var(--indigo)}
.band:hover .go i,.band:focus-visible .go i{background:var(--grad);border-color:transparent;color:#fff}
footer{background:#6665f1}
footer .addr,footer nav,footer .copy{color:rgba(255,255,255,.82)}
footer nav{border-top-color:rgba(255,255,255,.28)}
/* ヘッダー：ロゴの左端をFVの英字の左端に、メニューの右端を左右対称の位置にそろえる */
@media (min-width:768px){.hd{padding-left:max(16px,env(safe-area-inset-left,0px),6vw);padding-right:max(16px,env(safe-area-inset-right,0px),6vw)}.hd-in{max-width:none}}

/* FVの動き（⑥の型）：1文字ずつ、下から押し上がるように出る。写真は斜めの辺に沿って右から現れる */
.hero .en .ln,.hero .wl{display:flex;flex-wrap:wrap;overflow:hidden}
.hero .en .ln{padding-bottom:.04em}
.hero .en .ln>span{display:flex;width:max-content;max-width:none;background:none!important;animation:none!important}
.hero .en .c{background:var(--grad);background-size:calc(var(--w) * 1px) 100%;background-position:calc(var(--x) * -1px) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero .en{background:none!important}
.hero .c{display:block;white-space:pre}
.js .hero .c{transform:translateY(100%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .hero.in .c{transform:none}
.js .hero .photo svg{clip-path:inset(0 0 0 100%);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1)}
.js .hero.in .photo svg{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.js .hero .c,.js .hero .photo svg{transition:none}}

/* 取引先：FVに合わせる（左右の余白をFVの英字の線にそろえる／区切り線をFVの写真と同じ斜めに／見えたら1社ずつ下から出る） */
.clients{border-bottom:0;padding-block:64px 72px}
@media (min-width:768px){.clients{padding-left:max(16px,env(safe-area-inset-left,0px),6vw);padding-right:max(16px,env(safe-area-inset-right,0px),6vw)}.clients .wrap{max-width:none}}
.clients li{position:relative;border-left:0!important;overflow:hidden}
.clients li+li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);opacity:.55;transform:skewX(-14.9deg) scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.33,1,.68,1)}
.clients.in li+li::before,html:not(.js) .clients li+li::before{transform:skewX(-14.9deg) scaleY(1)}
.clients li{height:58px;padding-inline:clamp(18px,2.4vw,36px)}
@media (max-width:600px){.clients li{height:44px}}
@media (max-width:1000px){.clients li:nth-child(4n+1)::before{display:none}}
@media (max-width:600px){.clients li:nth-child(4n+1)::before{display:block}.clients li:nth-child(odd)::before{display:none}}
.clients img{transition:transform .7s cubic-bezier(.33,1,.68,1),opacity .7s ease}
.js .clients:not(.in) img{transform:translateY(110%);opacity:0}
@media (prefers-reduced-motion:reduce){.clients img{transition:none}.js .clients:not(.in) img{transform:none;opacity:1}}

/* ヘッダー（⑥の型）：ロゴの横に事業の一文、メニューは右上に寄せた濃紺のブロック。左の辺はFVと同じ斜め */
.hd .logo{margin-right:0}
.hd-tag{margin:0 auto 0 28px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#252c36;white-space:nowrap}
@media (max-width:1100px){.hd-tag{display:none}.hd .logo{margin-right:auto}}
@media (min-width:768px){.hd{padding-right:0}}
.nav{align-self:stretch;gap:0;background:#6665f1;padding:0 max(16px,env(safe-area-inset-right,0px),3vw) 0 calc(20px + 2.4vw);clip-path:polygon(20px 0,100% 0,100% 100%,0 100%)}
.nav a{color:#fff;font-weight:700;font-size:14px;letter-spacing:.1em;padding:0 clamp(16px,2vw,30px);height:100%;display:flex;align-items:center}
.nav a span::after{background:#fff}
.hd.on{background:rgba(255,255,255,.86)}
@media (max-width:900px){
  .hd{padding-right:0}
  .burger{align-self:stretch;width:72px;height:auto;border:0;border-radius:0;background:#6665f1;clip-path:polygon(19px 0,100% 0,100% 100%,0 100%);padding-left:12px}
  .burger span{background:#fff;width:20px}
}

/* FVの仕上げ：ロゴの横の一文はロゴに寄せ、間に斜めの細線。左の余白にSCROLLの縦書きと流れる線 */
.hd-in{gap:0}
.hd-tag{display:flex;align-items:center;gap:16px;margin-left:18px!important}
@media (max-width:1100px){.hd-tag{display:none!important}}
.hd-tag::before{content:"";width:1.5px;height:22px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.hero .scroll{position:absolute;z-index:2;left:calc(max(16px,6vw) / 2 - 6px);bottom:40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero .scroll span{writing-mode:vertical-rl;font-family:"Barlow Condensed",var(--f-en-q);font-size:12px;letter-spacing:.28em;color:#6665f1}
.hero .scroll i{position:relative;display:block;width:1px;height:72px;background:#dcdcf3;overflow:hidden}
.hero .scroll i::after{content:"";position:absolute;inset:0;background:#6665f1;transform:translateY(-100%);animation:scrollLine 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:767px){.hero .scroll{display:none}}
@media (prefers-reduced-motion:reduce){.hero .scroll i::after{animation:none;transform:none}}

/* Concept（LITSの配置をFVの言葉で：英字はFVと同じ縦長の大文字＋グラデーション、写真3枚は角を丸めず、1辺をロゴと同じ斜めに切る） */
.cpt{padding-block:140px 110px;padding-left:max(16px,env(safe-area-inset-left,0px),6vw);padding-right:max(16px,env(safe-area-inset-right,0px),6vw)}
.cpt-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);grid-template-areas:
 "t t t t t . x x x x x x"
 "a a a a a . x x x x x x"
 "a a a a a b b . c c c c"
 ". . . . . b b . c c c c"}
.cpt .ttl{grid-area:t;display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.cpt .ttl .en{font-family:var(--f-en-q);font-weight:400;font-size:clamp(48px,6vw,80px);line-height:1.05;letter-spacing:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content;display:flex;overflow:hidden;padding-bottom:.04em}
.cpt .ttl .ja{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.14em;color:#252c36}
.cpt .ttl .ja::before{content:"";width:1.5px;height:20px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.cpt .txt{grid-area:x;align-self:start;display:flex;flex-direction:column;gap:30px;padding-top:clamp(8px,2.4vw,40px)}
.cpt h2{font-family:var(--f-jp);font-weight:700;font-size:clamp(21px,2.1vw,30px);line-height:1.65;letter-spacing:.06em;color:#252c36}
.cpt .body{display:flex;flex-direction:column;gap:1.4em}
.cpt .body p{font-size:15px;line-height:2.2;letter-spacing:.05em;color:var(--text)}
.cpt .ph{margin:0;position:relative}
.cpt .ph img{display:block;width:100%;height:100%;object-fit:cover}
.cpt .pa{grid-area:a;aspect-ratio:1/1;align-self:start}
.cpt .pa img{clip-path:polygon(0 0,100% 0,calc(100% - 26.6%) 100%,0 100%)}
.cpt .pb{grid-area:b;aspect-ratio:4/5;align-self:start;margin-top:clamp(40px,6vw,110px)}
.cpt .pb img{clip-path:polygon(0 0,100% 0,66.75% 100%,0 100%)}
.cpt .pc{grid-area:c;aspect-ratio:1000/705;align-self:start;margin-top:clamp(24px,3vw,56px)}
.cpt .pc img{clip-path:polygon(18.75% 0,100% 0,100% 100%,0 100%)}
.cpt .more{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:40px;padding-bottom:12px;border-bottom:1px solid var(--indigo);font-family:var(--f-en-q);font-size:16px;color:#252c36}
.cpt .more i{width:30px;height:18px;border-radius:999px;background:var(--grad);position:relative;transition:transform .3s}
.cpt .more i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}
.cpt .more:hover i{transform:translateX(4px)}
@media (max-width:900px){
  .cpt{padding-block:96px 100px}
  .cpt-in{grid-template-areas:"t t t t t t t t t t t t" "a a a a a a a a a a a ." "x x x x x x x x x x x x" "b b b b b . c c c c c c";row-gap:40px}
  .cpt .ttl{margin-bottom:0}
  .cpt .pb,.cpt .pc{margin-top:0}
  .cpt .pc{align-self:end}
}
/* Concept の動き：画面に入ると、英字が1文字ずつ下から出て、写真が斜めの辺の側から順に現れる */
.cpt .en .c{display:block}
.js .cpt .en .c{transform:translateY(100%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .cpt.in .en .c{transform:none}
.js .cpt .ph{clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.js .cpt.in .ph{clip-path:inset(0)}
.js .cpt .pb{transition-delay:.25s}.js .cpt .pc{transition-delay:.45s}
.js .cpt h2,.js .cpt .body,.js .cpt .more{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.js .cpt.in h2{transition-delay:.3s}.js .cpt.in .body{transition-delay:.45s}.js .cpt.in .more{transition-delay:.6s}
.js .cpt.in h2,.js .cpt.in .body,.js .cpt.in .more{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .cpt .en .c,.js .cpt .ph,.js .cpt h2,.js .cpt .body,.js .cpt .more{transition:none}}

/* Service（2つの事業を横に並べる。写真はFVと同じ斜めで切り、2枚の間に斜めの帯ができるよう左右対にする。背景にゆっくり流れる大きな英字） */
.svc{position:relative;overflow:hidden;background:#f6f6fc;padding-block:140px 150px;padding-left:max(16px,env(safe-area-inset-left,0px),6vw);padding-right:max(16px,env(safe-area-inset-right,0px),6vw)}
.svc-in{position:relative;z-index:1}
.svc-mq{position:absolute;left:0;right:0;top:50%;z-index:0;pointer-events:none;white-space:nowrap}
.svc-mq .tr{display:flex;width:max-content;animation:svcmq 70s linear infinite}
.svc-mq span{font-family:var(--f-en-q);font-size:clamp(90px,13vw,220px);line-height:1;color:rgba(102,101,241,.07);padding-right:.4em}
.svc-mq i{font-style:normal;margin:0 .35em;color:rgba(34,211,238,.10)}
@keyframes svcmq{to{transform:translateX(-50%)}}
.svc-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:64px}
.svc .ttl{display:flex;flex-direction:column;gap:14px}
.svc .ttl .en{font-family:var(--f-en-q);font-weight:400;font-size:clamp(48px,6vw,80px);line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content;display:flex;overflow:hidden;padding-bottom:.06em}
.svc .ttl .ja{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.14em;color:#252c36}
.svc .ttl .ja::before{content:"";width:1.5px;height:20px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.svc .lead{font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.8;letter-spacing:.06em;color:#252c36;padding-bottom:4px}
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.card{display:flex;flex-direction:column;color:inherit;min-width:0}
.card .ph{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.c1 .ph img{clip-path:polygon(0 0,100% 0,83.4% 100%,0 100%)}
.card.c2 .ph img{clip-path:polygon(16.6% 0,100% 0,100% 100%,0 100%)}
.card .meta{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:12px;padding:34px 8px 0 0;align-items:baseline}
.card.c2 .meta{padding-left:clamp(0px,4vw,64px)}
.card .no{grid-row:1/4;font-family:var(--f-en-q);font-size:clamp(40px,4.4vw,68px);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.card h3{font-weight:700;font-size:clamp(20px,1.9vw,27px);line-height:1.5;letter-spacing:.06em;color:#252c36}
.card p{font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--text)}
.card .go{justify-self:start;margin-top:12px;display:inline-flex;align-items:center;gap:18px;padding-bottom:10px;font-size:14px;font-weight:700;letter-spacing:.06em;color:#252c36;background:linear-gradient(90deg,#22d3ee,#6665f1,#9759f6) left bottom/100% 1px no-repeat}
.card .go i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--grad);transition:transform .35s cubic-bezier(.33,1,.68,1)}
.card .go i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}
.card:hover .go i,.card:focus-visible .go i{transform:translateX(6px)}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,211,238,.0),rgba(102,101,241,.0));transition:background .4s}
@media (max-width:900px){.svc{padding-block:96px 100px}.svc-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}}
@media (max-width:700px){.svc-cards{grid-template-columns:1fr;row-gap:56px}.card.c2 .meta{padding-left:0}}
/* Service の動き：英字が1文字ずつ、写真は斜めの側から現れ、文字は浮かび上がる */
.svc .en .c{display:block}
.js .svc .en .c{transform:translateY(100%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .svc.in .en .c{transform:none}
.js .svc .card .ph{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.js .svc .card.c2 .ph{clip-path:inset(0 0 0 100%);transition-delay:.15s}
.js .svc.in .card .ph{clip-path:inset(0)}
.js .svc .lead,.js .svc .card .meta{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.js .svc.in .lead{transition-delay:.25s}.js .svc.in .c1 .meta{transition-delay:.55s}.js .svc.in .c2 .meta{transition-delay:.7s}
.js .svc.in .lead,.js .svc.in .card .meta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.svc-mq .tr{animation:none}.js .svc .en .c,.js .svc .card .ph,.js .svc .lead,.js .svc .card .meta{transition:none}}

/* Service のリード：細めの書体でゆったり。2つの事業名だけロゴのグラデーション。左に斜めの細線。FVと同じく1文字ずつ下から出る */
.svc .lead{position:relative;font-weight:400!important;font-size:clamp(16px,1.45vw,20px)!important;line-height:2!important;letter-spacing:.12em!important;color:#4a5466!important;padding:4px 0 4px 34px!important;opacity:1!important;transform:none!important}
.svc .lead::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1.5px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.svc .lead .ln{display:flex;flex-wrap:wrap;overflow:hidden}
.svc .lead b{display:contents;font-weight:500}
.svc .lead .k{font-weight:500;background:var(--grad);background-size:calc(var(--w) * 1px) 100%;background-position:calc(var(--x) * -1px) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.svc .lead .c{display:block;white-space:pre}
.js .svc .lead .c{transform:translateY(105%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .svc.in .lead .c{transform:none}
@media (prefers-reduced-motion:reduce){.js .svc .lead .c{transition:none}}

/* Service の色を落ち着かせる：グラデーションは英字見出しと細線だけに。番号・矢印はロゴのインディゴ1色、下線は濃いグレー。リードは1行目を濃く */
.svc .lead .ln:first-child .c{color:#252c36;font-weight:500}
.svc .lead .k{background:none!important;-webkit-text-fill-color:#252c36!important;color:#252c36!important}

/* About Us（FVを左右反転：写真は画面の左端まで断ち落とし、右の辺をFVと同じ斜めに。切った側にロゴの縦線のような帯を2本） */
.us2{padding-block:150px 120px;padding-right:max(16px,env(safe-area-inset-right,0px),6vw)}
.us2-in{display:grid;grid-template-columns:46vw minmax(0,1fr);gap:clamp(48px,8vw,140px);align-items:center}
.us2 .ph{margin:0}
.us2 .ph svg{display:block;width:100%;height:auto;overflow:visible}
.us2 .txt{display:flex;flex-direction:column;gap:28px;min-width:0}
.us2 .ttl{display:flex;flex-direction:column;gap:14px;margin-bottom:6px}
.us2 .ttl .en{font-family:var(--f-en-q);font-weight:400;font-size:clamp(48px,6vw,80px);line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content;display:flex;overflow:hidden;padding-bottom:.06em}
.us2 .ttl .ja{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.14em;color:#252c36}
.us2 .ttl .ja::before{content:"";width:1.5px;height:20px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.us2 h2{font-weight:700;font-size:clamp(21px,2.1vw,30px);line-height:1.65;letter-spacing:.06em;color:#252c36}
.us2 .body{display:flex;flex-direction:column;gap:1.4em}
.us2 .body p{font-size:15px;line-height:2.2;letter-spacing:.05em;color:var(--text)}
@media (max-width:900px){.us2{padding-block:96px 80px;padding-left:0}.us2-in{grid-template-columns:1fr;gap:44px}.us2 .ph{margin-right:max(16px,env(safe-area-inset-right,0px))}.us2 .txt{padding-left:max(16px,env(safe-area-inset-left,0px))}}
.us2 .en .c{display:block}
.js .us2 .en .c{transform:translateY(100%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .us2.in .en .c{transform:none}
.js .us2 .ph svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1)}
.js .us2.in .ph svg{clip-path:inset(0 -10% 0 0)}
.js .us2 h2,.js .us2 .body{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.js .us2.in h2{transition-delay:.35s}.js .us2.in .body{transition-delay:.5s}
.js .us2.in h2,.js .us2.in .body{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .us2 .en .c,.js .us2 .ph svg,.js .us2 h2,.js .us2 .body{transition:none}}

/* 写真の帯：1枚ずつFVと同じ角度の平行四辺形に切り、斜めの辺どうしを噛み合わせて並べる（ロゴの縦線が続いていくイメージ）。カーソルを合わせた1枚だけ色が残る */
.style .strip{padding-block:24px}
.style .track{gap:0!important;align-items:center;animation:strip2 80s linear infinite!important}
.style .track li{--w:clamp(260px,25vw,400px);width:var(--w)!important;aspect-ratio:4/3;margin-right:12px!important}
@keyframes strip2{to{transform:translateX(-50%)}}
@media (max-width:767px){.style .track li{--w:62vw}}

/* ヘッダー（A案）：色のブロックをなくし、白地に濃いグレーの文字だけ。カーソルを合わせるとロゴのグラデーションの下線。下端にごく薄い線 */
.nav{background:none!important;clip-path:none!important;padding:0!important;gap:6px!important}
.nav a{color:#252c36!important;font-weight:500!important;font-size:13.5px!important;letter-spacing:.14em!important;padding:0 18px!important}
.nav a span::after{background:linear-gradient(90deg,#22d3ee,#6665f1,#9759f6)!important;height:2px!important}
@media (min-width:768px){.hd{padding-right:max(16px,env(safe-area-inset-right,0px),6vw)!important}}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d6d7ec 20%,#d6d7ec 80%,transparent);pointer-events:none}
@media (max-width:900px){.hd{padding-right:max(16px,env(safe-area-inset-right,0px))!important}.burger{background:none!important;clip-path:none!important;width:46px!important;padding:0!important;align-self:center!important;height:46px!important}.burger span{background:#252c36!important}}

/* 背景の飾り：①FVと同じ角度の薄いグラデーションの帯を、セクションの境目に置く ②About Usの角にロゴの縦線4本 ③ConceptとAbout Usの後ろにも英字を流す（Serviceと向きを交互に） */
.clients,.cpt,.us2{position:relative;overflow:hidden}
.cpt-in,.us2-in,.clients .wrap{position:relative;z-index:1}
.rbw{position:absolute;pointer-events:none;z-index:0;width:clamp(28px,3vw,48px);background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(102,101,241,.20),rgba(151,89,246,.14));transform:skewX(-14.9deg)}
.bgmq{position:absolute;left:0;right:0;z-index:0;pointer-events:none;white-space:nowrap}
.bgmq .tr{display:flex;width:max-content}
.bgmq span{font-family:var(--f-en-q);font-size:clamp(90px,12vw,200px);line-height:1;color:rgba(102,101,241,.06);padding-right:.4em}
.bgmq i{font-style:normal;margin:0 .35em;color:rgba(34,211,238,.10)}
.bgmq.r .tr{animation:bgmqR 80s linear infinite}
.bgmq.l .tr{animation:svcmq 80s linear infinite}
@keyframes bgmqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mk{position:absolute;pointer-events:none;z-index:0;display:flex;gap:clamp(8px,1vw,16px);align-items:flex-end}
.mk i{display:block;width:clamp(10px,1.1vw,18px);transform:skewX(-14.9deg) scaleY(0);transform-origin:bottom;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);opacity:.16;transition:transform .8s cubic-bezier(.33,1,.68,1)}
.mk i:nth-child(2){transition-delay:.12s}.mk i:nth-child(3){transition-delay:.24s}.mk i:nth-child(4){transition-delay:.36s}
.us2.in .mk i,html:not(.js) .mk i{transform:skewX(-14.9deg) scaleY(1)}
@media (max-width:767px){.rbw{opacity:.6}.mk{transform:scale(.6);transform-origin:bottom right}}
@media (prefers-reduced-motion:reduce){.bgmq .tr{animation:none}.mk i{transition:none;transform:skewX(-14.9deg)}}

/* ①の帯を差し替え：太い帯をやめ、FVと同じ角度の細い線を2本。線の中を光が上から下へゆっくり流れる（データが通るイメージ） */
.rbw{width:1px!important;background:linear-gradient(180deg,transparent,rgba(102,101,241,.35) 25%,rgba(34,211,238,.35) 75%,transparent)!important;overflow:visible;opacity:1!important}
.rbw::before{content:"";position:absolute;left:18px;top:18%;bottom:-8%;width:1px;background:linear-gradient(180deg,transparent,rgba(151,89,246,.28) 30%,rgba(102,101,241,.28) 70%,transparent)}
.rbw::after{content:"";position:absolute;left:-1px;width:3px;height:70px;top:0;border-radius:2px;background:linear-gradient(180deg,transparent,#6665f1 60%,#22d3ee);opacity:.75;animation:rbwGlint 5.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes rbwGlint{0%{transform:translateY(-80px);opacity:0}15%{opacity:.75}85%{opacity:.75}100%{transform:translateY(var(--h,300px));opacity:0}}
@media (prefers-reduced-motion:reduce){.rbw::after{animation:none;opacity:0}}

/* FVの文字：写真の上下の中央にそろえて、左上の空きをなくす（PCのみ） */
@media (min-width:768px){.hero .cap{top:calc(84px + 6vw)!important;bottom:40px!important;justify-content:center}}

/* 文字サイズの底上げ（雰囲気は保ったまま、本文・小見出し・リンクを読みやすく） */
.hero p.sub{font-size:clamp(16px,1.4vw,20px)!important;color:#4a5466!important}
.cpt h2,.us2 h2{font-size:clamp(23px,2.25vw,32px)!important}
.cpt .body p,.us2 .body p{font-size:18px!important;line-height:2.1!important;letter-spacing:.02em!important;color:#3a4352!important}
.cpt .txt{grid-column:7/13!important;padding-left:clamp(0px,2vw,32px)}
.cpt .body p{text-wrap:pretty}
.cpt .ttl .ja,.svc .ttl .ja,.us2 .ttl .ja{font-size:14.5px!important}
.svc .lead{font-size:clamp(17px,1.6vw,22px)!important}
.card p{font-size:16px!important}
.card .go{font-size:15px!important}
.cpt .more{font-size:17px!important}
.hd-tag{font-size:14px!important}
.nav a{font-size:14.5px!important}
@media (max-width:1200px){.cpt .body .pc-br,.us2 .body .pc-br{display:none}}
@media (max-width:767px){.cpt .body p,.us2 .body p{font-size:16px!important}}

.hero .brk{flex-basis:100%;height:0;display:block}
.hd-tag{font-size:15.5px!important;letter-spacing:.06em!important}
.hd-tag::before{height:24px!important}

.us2 .txt{padding-left:clamp(0px,4.5vw,72px)}
@media (max-width:900px){.us2 .txt{padding-left:max(16px,env(safe-area-inset-left,0px))}}

/* ヘッダーの文字を大きく */
.nav a{font-size:16px!important;letter-spacing:.12em!important;padding:0 22px!important}
.hd-tag{font-size:17px!important}
.hd-tag::before{height:26px!important}
.logo-img{height:40px!important}
.drawer{font-size:20px!important}

/* フッターの文字を大きく */
footer .logo-img{height:50px!important}
footer .tag{font-size:20px!important}
footer .addr{font-size:15px!important}
footer nav{font-size:15px!important;gap:10px 34px!important}
footer .copy{font-size:13px!important}
@media (min-width:768px){footer{padding-left:max(16px,env(safe-area-inset-left,0px),6vw)!important;padding-right:max(16px,env(safe-area-inset-right,0px),6vw)!important}footer .wrap{max-width:none!important}}


/* 会社情報：上に写真の帯（インディゴのグラデーションを重ね、左下をFVと同じ斜めに切る）、その下に幅を絞った表 */
.ph{position:relative;overflow:hidden;height:clamp(240px,24vw,340px);margin-top:-76px;margin-top:0;clip-path:polygon(0 0,100% 0,100% 100%,7vw 100%,0 calc(100% - 7vw * 3.75 / 1))}
.ph{clip-path:polygon(0 0,100% 0,100% 100%,clamp(40px,6vw,90px) 100%,0 calc(100% - clamp(40px,6vw,90px) * 3.76))}
.ph .bg{position:absolute;inset:0}
.ph .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block;transform:scale(1.06);transition:transform 2.4s cubic-bezier(.19,1,.22,1)}
.ph.in .bg img{transform:none}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,27,75,.78) 0%,rgba(66,64,180,.6) 50%,rgba(102,101,241,.38) 100%)}
.ph .cap{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:20px}
.ph .en{display:flex;font-family:var(--f-en-q);font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:1.05;color:#fff;overflow:hidden;padding-bottom:.04em;letter-spacing:.02em}
.ph .ja{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:15px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.92)}
.ph .ja::before{content:"";width:1.5px;height:20px;background:linear-gradient(180deg,#22d3ee,#a5b4fc);transform:skewX(-14.9deg)}
.ph .lines{position:absolute;z-index:2;right:max(16px,6vw);bottom:28px;height:clamp(90px,10vw,150px);display:flex;gap:clamp(6px,.8vw,12px);align-items:flex-end;pointer-events:none}
.ph .lines i{display:block;width:clamp(8px,.9vw,14px);transform:skewX(-14.9deg);background:linear-gradient(180deg,#22d3ee,#a5b4fc 55%,#c4b5fd);opacity:.5}
.ph .c{display:block;white-space:pre}
.js .ph .c{transform:translateY(100%);transition:transform .7s cubic-bezier(.33,1,.68,1)}
.js .ph.in .c{transform:none}
.js .ph .lines i{transform:skewX(-14.9deg) scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.33,1,.68,1)}
.js .ph.in .lines i{transform:skewX(-14.9deg) scaleY(1)}
.ph .lines i:nth-child(2){transition-delay:.1s}.ph .lines i:nth-child(3){transition-delay:.2s}.ph .lines i:nth-child(4){transition-delay:.3s}
.crumb{max-width:880px;margin:22px auto 0;padding-inline:16px;display:flex;gap:10px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.crumb a:hover{color:#6665f1}

.info{max-width:880px;margin:0 auto;padding:64px 16px 130px}
.info dl{margin:0;border-top:1px solid #dcdcef}
.info .row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:20px;padding:22px 8px;border-bottom:1px solid #e6e6f2}
.info dt{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:700;letter-spacing:.1em;color:#252c36;line-height:1.9}
.info dt::before{content:"";flex:none;width:1.5px;height:16px;margin-top:6px;background:linear-gradient(180deg,#22d3ee,#6665f1 55%,#9759f6);transform:skewX(-14.9deg)}
.info dd{margin:0;font-size:15.5px;line-height:1.9;letter-spacing:.04em;color:#3a4352}
.info dd a{color:#6665f1;border-bottom:1px solid currentColor}
.biz{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.biz li{display:flex;align-items:baseline;gap:12px}
.biz .no{font-family:var(--f-en-q);font-size:15px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;min-width:1.6em}
.js .info .row{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.js .info .row.on{opacity:1;transform:none}
@media (max-width:767px){.ph .lines{display:none}.info .row{grid-template-columns:1fr;gap:4px;padding:18px 4px}.info{padding:44px 16px 96px}}
@media (prefers-reduced-motion:reduce){.js .ph .c,.js .ph .lines i,.js .info .row,.ph .bg img{transition:none;transform:none;opacity:1}}


/* 会社情報の文字はすべて18px */
.info dt,.info dd,.biz li,.biz .no{font-size:18px!important}
.info .row{grid-template-columns:minmax(0,200px) minmax(0,1fr)!important}
@media (max-width:767px){.info .row{grid-template-columns:1fr!important}}

/* SPメニュー：背景を不透明に、項目の下にロゴの色の細線 */
.drawer{background:#fff!important;gap:6px!important}
.drawer>a{position:relative;display:block;min-width:220px;text-align:center;padding:18px 0;letter-spacing:.14em;color:#252c36}
.drawer>a::after{content:"";position:absolute;left:50%;bottom:6px;width:28px;height:1.5px;transform:translateX(-50%);background:linear-gradient(90deg,#22d3ee,#6665f1,#9759f6);opacity:.6}
.drawer>a[aria-current],.drawer>a:hover{color:#6665f1}

/* ① 読み進めのライン：ヘッダーの下端に、読んだ分だけ伸びるグラデーションの細線 */
.hd .prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#22d3ee,#6665f1 55%,#9759f6);transform-origin:left;transform:scaleX(var(--p,0));will-change:transform}
/* ② リンクとボタンの動きをそろえる：下線が左から右へグラデーションで引かれ、矢印は少し伸びる */
footer nav a,.crumb a,.info dd a,.cf .agree a{border-bottom:0!important;background:linear-gradient(90deg,#22d3ee,#6665f1 55%,#9759f6) left bottom/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .45s cubic-bezier(.65,0,.35,1),color .3s}
footer nav a{background-image:linear-gradient(90deg,#a5f3fc,#fff)}
.info dd a,.cf .agree a{background-size:100% 1px;background-image:linear-gradient(90deg,#c7c8f5,#c7c8f5)}
footer nav a:hover,.crumb a:hover,footer nav a:focus-visible,.crumb a:focus-visible{background-size:100% 1.5px}
.info dd a:hover,.cf .agree a:hover{background-image:linear-gradient(90deg,#22d3ee,#6665f1 55%,#9759f6);background-size:100% 1.5px}
.card .go{background:linear-gradient(90deg,#22d3ee,#6665f1,#9759f6,#22d3ee) left bottom/200% 1px no-repeat!important;transition:background-position .8s cubic-bezier(.65,0,.35,1)}
.card:hover .go,.card:focus-visible .go{background-position:100% 100%!important;background-size:200% 2px!important}
.card .go i,.cf .btn i,.cpt .more i{transition:transform .35s cubic-bezier(.33,1,.68,1),width .35s cubic-bezier(.33,1,.68,1)!important}
.card:hover .go i,.card:focus-visible .go i{width:54px!important;transform:translateX(4px)!important}
.cf .btn:hover i,.cf .btn:focus-visible i{width:40px!important;transform:translateX(4px)!important}
@media (prefers-reduced-motion:reduce){.hd .prog{display:none}}

/* プライバシーポリシー：会社情報と同じ幅。番号はロゴのグラデーション、見出しの左に斜めの細線 */
.pp .lead{font-size:18px;line-height:2;letter-spacing:.03em;color:#3a4352;margin-bottom:40px;text-wrap:pretty}
.pp-list{list-style:none;margin:0;padding:0;border-top:1px solid #dcdcef;counter-reset:pp}
.pp-list .row{counter-increment:pp;display:grid!important;grid-template-columns:minmax(0,220px) minmax(0,1fr)!important;gap:20px;padding:28px 8px;border-bottom:1px solid #e6e6f2}
.pp-list h2{display:flex;align-items:flex-start;gap:12px;font-size:18px;font-weight:700;letter-spacing:.08em;color:#252c36;line-height:1.9}
.pp-list h2::before{content:counter(pp,decimal-leading-zero);font-family:var(--f-en-q);font-weight:400;font-size:17px;line-height:1.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;min-width:1.8em}
.pp-list div{display:flex;flex-direction:column;gap:12px;min-width:0}
.pp-list p{font-size:17px;line-height:2;letter-spacing:.03em;color:#3a4352;text-wrap:pretty}
.pp-list ul{margin:0;padding-left:1.3em;font-size:17px;line-height:2;letter-spacing:.03em;color:#3a4352}
.pp-list ul li{padding-left:.2em}
.pp-list a{color:#6665f1;background:linear-gradient(90deg,#c7c8f5,#c7c8f5) left bottom/100% 1px no-repeat;padding-bottom:3px;transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.pp-list a:hover{background-image:linear-gradient(90deg,#22d3ee,#6665f1 55%,#9759f6);background-size:100% 1.5px}
.pp .date{margin-top:36px;font-size:15px;letter-spacing:.06em;color:#6c7a8c;text-align:right}
@media (max-width:767px){.pp-list .row{grid-template-columns:1fr!important;gap:10px;padding:22px 4px}.pp .lead,.pp-list p,.pp-list ul{font-size:16px}}