/* ===== hero ===== */
.hero{padding:170px 0 130px;position:relative;overflow:hidden}
/* FV下部を右→左に流れる大きな薄文字 */
.marquee{
  position:absolute;left:0;right:0;bottom:66px;
  overflow:hidden;white-space:nowrap;pointer-events:none;
  padding-bottom:.18em;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:inline-flex;align-items:flex-end;will-change:transform;
  animation:marquee 26s linear infinite;
}
.marquee-track span{
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(56px,9vw,128px);
  font-weight:500;line-height:1.25;letter-spacing:.01em;
  white-space:nowrap;
  background:linear-gradient(90deg,#9FE3DD,#BFE6F2,#C9D7F0);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:.5;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero h1{
  font-size:clamp(44px,5vw,80px);
  font-weight:800;line-height:1.5;letter-spacing:.06em;
}
.stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:clamp(28px,6vw,90px);
  margin-top:74px;justify-content:start;position:relative;z-index:1;
}
.stat .label{font-size:16px;font-weight:700;letter-spacing:.05em;color:#444}
.stat .num{font-size:clamp(48px,5vw,64px);font-weight:800;line-height:1.15;letter-spacing:.01em;color:#444}
.stat .num .unit{font-size:.45em;font-weight:900;margin-left:2px;color:#444}
.stat .note{font-size:16px;color:#444}
@media(max-width:680px){.stats{grid-template-columns:1fr;gap:26px}}
/* ===== approach ===== */
.approach{padding:60px 0 110px}
.approach-card{
  padding:0;
  position:relative;
}
.eyebrow{font-size:16px;font-weight:700;letter-spacing:.22em;color:var(--main);margin-bottom:26px}
.approach h2{
  font-size:clamp(24px,3.2vw,40px);font-weight:800;line-height:1.7;letter-spacing:.05em;margin-bottom:24px;
  color:#444;
  position:relative;z-index:1;
}
.approach h2 em{font-style:normal;color:#444}
.approach h2 .en{font-size:clamp(26px,3.3vw,42px)}
.approach p{font-size:16px;color:#444;position:relative;z-index:1}
.approach p strong{color:#444}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px}
.pillar{display:flex;align-items:center;gap:16px;padding:8px 26px;border-left:1px solid #DDE6E5}
.pillar:first-child{border-left:none;padding-left:0}
.pillar .ic{flex:0 0 52px;width:52px;height:52px;border-radius:50%;border:2px solid var(--main);display:grid;place-items:center;color:var(--main)}
.pillar .ic svg{width:24px;height:24px}
.pillar b{font-size:16px;font-weight:700;line-height:1.6}
@media(max-width:820px){
  .pillars{grid-template-columns:1fr;gap:18px}
  .pillar{border-left:none;padding:0}
}
/* ===== section common ===== */
.section{padding:clamp(40px,9vw,120px) 0}
.section.gray{background:transparent}
.sec-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(36px,5vw,80px)}
@media(max-width:920px){.sec-grid{grid-template-columns:1fr}}
.sec-head{position:sticky;top:120px;align-self:start}
.sec-head h2{font-size:clamp(38px,4.6vw,56px);font-weight:800;line-height:1.05;letter-spacing:.01em}
.sec-head .jp{display:inline-block;font-size:16px;font-weight:500;color:var(--muted);margin-top:16px;padding-left:34px;position:relative}
.sec-head .jp::before{content:"";position:absolute;left:0;top:50%;width:24px;height:1px;background:var(--main)}
@media(max-width:920px){.sec-head{position:static}}
/* ===== service ===== */
.svc{display:grid;grid-template-columns:240px 1fr;gap:clamp(22px,3vw,48px);padding:40px 0;border-top:1px solid #D9E2E1}
.svc:last-child{border-bottom:1px solid #D9E2E1}
.svc .name small{display:block;font-size:16px;font-weight:700;color:var(--main);margin-bottom:6px}
.svc .name h3{font-size:clamp(20px,2.2vw,32px);font-weight:300;line-height:1.25;letter-spacing:.03em;color:#444}
.svc .body h4{font-size:18px;font-weight:700;margin-bottom:8px}
.svc .body p{font-size:16px;color:#444;max-width:42em}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:18px;font-size:16px;font-weight:500;color:var(--main);list-style:none;padding:0}
.tags li{display:inline-flex;align-items:center;padding:2px 0}
.tags li:not(:last-child)::after{content:"／";margin:0 4px;color:var(--main)}
@media(max-width:760px){.svc{grid-template-columns:1fr;gap:14px}}
/* ===== works ===== */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:920px){.works-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.works-grid{grid-template-columns:1fr}}
/* ===== work card (添付デザイン) ===== */
.wcard{
  position:relative;cursor:pointer;color:var(--text);
  border:1px solid var(--text);
  box-shadow:2px 2px 0 0 var(--text);   /* 右下の太枠を影で表現（レイアウトを動かさない） */
  border-radius:16px;
  padding:24px;
  background:transparent;
  display:flex;flex-direction:column;
  transition:box-shadow .4s ease;
}
.wcard:hover{box-shadow:0 0 0 0 var(--text)}
/* サムネ */
.wcard .thumb{
  position:relative;aspect-ratio:16/11;
}
.wcard .thumb-clip{
  position:absolute;inset:0;border-radius:8px;overflow:hidden;
  background:linear-gradient(150deg,#E2EEF4,#EFF4F2);
  display:grid;place-items:center;
}
.wcard .thumb .ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wcard:hover .thumb .ph{transform:scale(1.05)}
.wcard .tag{
  position:absolute;left:-8px;bottom:-8px;z-index:3;
  background:var(--ink);color:#fff;font-size:16px;font-weight:400;letter-spacing:.08em;
  padding:4px 8px;border-radius:8px;
    font-family: Outfit;
}
.wcard .ttl-w{
  font-size:16px;font-weight:600;line-height:1.75;letter-spacing:.02em;color:var(--text);
  margin:20px 0 0;flex:1;
}
.wcard .arrow{
  position:relative;
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--text);
  display:grid;place-items:center;
  color:var(--text);flex:0 0 auto;margin:20px 2px 0;align-self:flex-end;
  overflow:hidden;
  transition:border-color .35s,background .35s;
}
.wcard .arrow svg{width:15px;height:15px;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.wcard .arrow .line{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* ホバー：円（枠線）を消し、矢印が右へ伸びる */
.wcard:hover .arrow{border-color:transparent;background:transparent;color:var(--main)}
.wcard:hover .arrow svg{transform:translateX(3px)}
.wcard:hover .arrow .line{transform:scaleX(1.55);transform-origin:left center}
/* 中身ダミーサムネ（既存のCSS部品を流用） */
.work:hover .veil{opacity:1}
/* CSS製ダミーサムネ */
.ph{display:grid;place-items:center}
.ph .browser{width:150px;background:#fff;box-shadow:0 14px 30px rgba(21,33,31,.12)}
.ph .browser .bar{height:12px;background:#15211F;display:flex;align-items:center;gap:3px;padding:0 6px}
.ph .browser .bar i{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6}
.ph .browser .scr{height:120px;padding:10px;display:grid;gap:6px;align-content:start}
.ph .browser .scr .h{height:24px;background:var(--main)}
.ph .browser .scr .l{height:7px;background:#E3E8E8}
.ph .browser .scr .l.s{width:60%}
.ph .card2{width:130px;height:80px;background:#fff;box-shadow:0 12px 26px rgba(21,33,31,.14);transform:rotate(-6deg);display:grid;align-content:center;gap:6px;padding:14px}
.ph .card2 .dot{width:22px;height:22px;border-radius:50%;background:var(--main)}
.ph .card2 .l{height:6px;background:#E3E8E8}
.ph .card2 .l.s{width:55%}
.ph .phone{width:74px;height:148px;background:#fff;border-radius:14px;box-shadow:0 14px 30px rgba(21,33,31,.14);padding:8px;display:grid;gap:5px;align-content:start}
.ph .phone .h{height:40px;background:var(--main);border-radius:6px}
.ph .phone .l{height:6px;background:#E3E8E8;border-radius:3px}
.ph .poster{width:110px;height:150px;background:#fff;box-shadow:0 14px 30px rgba(21,33,31,.14);display:grid;align-content:end;gap:5px;padding:12px;position:relative}
.ph .poster::before{content:"";position:absolute;inset:12px 12px 56px;background:linear-gradient(135deg,var(--main),var(--main-soft))}
.ph .poster .l{height:6px;background:#E3E8E8}
.ph .poster .l.s{width:50%}
.ph .logo{width:120px;height:120px;background:#fff;box-shadow:0 14px 30px rgba(21,33,31,.12);display:grid;place-items:center}
.ph .logo .mk{width:46px;height:46px;background:conic-gradient(var(--main) 0 75%,var(--ink) 75% 100%);border-radius:50% 50% 0 50%}
.more-btn{
  display:inline-flex;align-items:center;gap:14px;margin-top:34px;
  border:1px solid var(--text);
  box-shadow:2px 2px 0 0 var(--text);
  border-radius:16px;
  padding:14px 30px;font-size:16px;font-weight:700;letter-spacing:.08em;
  background:transparent;color:var(--text);
  transition:color .3s,border-color .3s,box-shadow .3s ease;
}
.more-btn .m-arrow{
  display:inline-grid;place-items:center;width:16px;height:16px;color:var(--text);overflow:visible;
}
.more-btn .m-arrow svg{width:16px;height:16px;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.more-btn .m-arrow .line{transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-origin:left center}
.more-btn:hover{color:var(--main);border-color:var(--main);box-shadow:0 0 0 0 var(--main)}
.more-btn:hover .m-arrow{color:var(--main)}
.more-btn:hover .m-arrow svg{transform:translateX(3px)}
.more-btn:hover .m-arrow .line{transform:scaleX(1.55)}
/* ===== about ===== */
.about-lead{font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1;letter-spacing:.05em;margin-bottom:8px;color:var(--main);}
.about-sub{font-size:16px;color:#444;max-width:42em;margin-bottom:48px}
/* プロフィール：白背景なし・左テキスト＋右に丸囲み画像 */
.profile{display:grid;grid-template-columns:1fr 300px;gap:clamp(30px,5vw,40px);align-items:center}
@media(max-width:860px){.profile{grid-template-columns:1fr;gap:48px}}
.profile .role{font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--main);margin-bottom:10px}
.profile .pname{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:.04em;margin-bottom:6px}
.profile .pname .en-sub{display:block;font-size:16px;font-weight:500;letter-spacing:.1em;color:#777;margin-top:6px}
.profile .pquote{font-size:clamp(16px,1.6vw,18px);font-weight:700;line-height:1.7;margin:18px 0 20px}
.profile .pbio{font-size:16px;color:#444;line-height:1.9;max-width:40em}

/* 丸囲みポートレート */
.portrait-wrap{position:relative;width:100%;max-width:300px;margin:0 auto}
.portrait-wrap img{ width: 100%; height: auto;}

.portrait{
  position:relative;aspect-ratio:1/1.08;border-radius:50%;
  border:2px solid var(--text);overflow:hidden;
  background:linear-gradient(160deg,#D7E4EC,#EEF3F3);
  display:grid;place-items:center;color:#9DB0AE;font-size:16px;letter-spacing:.15em;font-weight:500;
}
/* 右側のはみ出す丸矢印 */
.portrait-wrap .pf-arrow{
  position:absolute;top:46%;right:-19px;z-index:3;
  width:38px;height:38px;border-radius:50%;background:#fff;
  border:2px solid var(--text);display:grid;place-items:center;color:var(--text);
}
.portrait-wrap .pf-arrow svg{width:14px;height:14px}
/* 右下のブランドタブ */
.portrait-wrap .pf-brand{
  position:absolute;right:-10px;bottom:6px;z-index:3;
  background:#fff;border:2px solid var(--text);border-radius:16px;
  padding:11px 18px;display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;letter-spacing:.05em;
}
.portrait-wrap .pf-brand .mk{
  width:22px;height:22px;border-radius:6px;background:var(--main);
  display:grid;place-items:center;color:#fff;font-size:16px;font-weight:900;
}
/* 大見出し：左から1文字ずつタイピング表示 */
.ttl .ch{opacity:0;transition:opacity 0s}
/* 遅延はJSで1文字ずつ指定 */
.ttl.in .ch{opacity:1}