@import url('/r/css/parts.e82d6bf166.css');
/* 母艦トップ（2026-09-26 合意版）: 黒地・全画面映像・看板→実物→できること→世界観→頼む理由→相談 */
body.vb{background:#0b0b0b;color:var(--paper)}
/* ヘッダー: 看板（クリーム地）の上は墨色、看板を過ぎたら黒地に */
body.vb .header.over{position:fixed;left:0;right:0;top:0;background:linear-gradient(#f4f3ef,rgba(244,243,239,0));border-bottom:0;color:var(--ink);transition:background .35s,color .35s}
body.vb .header.over.solid{background:rgba(11,11,11,.94);backdrop-filter:blur(10px);color:#fff;border-bottom:1px solid rgba(255,255,255,.16)}
body.vb .header nav .nav-contact{background:var(--red);color:#fff}
body.vb .header nav .nav-contact:hover{background:var(--ink);color:#fff}
body.vb .menu-toggle{color:inherit}
@media(max-width:760px){body.vb .header nav{background:#0b0b0b;border-bottom-color:#333;box-shadow:0 15px 25px #000a}body.vb .header nav>a{border-bottom-color:#333;color:#fff}}

/* 看板＝現行トップの型（クリーム地・スピード線・ロゴ中央） */
.hero-live{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px var(--pad) 70px;overflow:hidden;background:#f4f3ef;color:#17140f}
.speed{position:absolute;inset:0;pointer-events:none;opacity:.6;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(216,0,24,.06) 6px 7px)}
.hero-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--red);margin-bottom:26px;position:relative}
.hero-logo{width:min(50vw,470px);height:auto;position:relative;animation:logoIn 1.1s cubic-bezier(.2,.7,0,1) both .15s}
@keyframes logoIn{from{opacity:0;transform:translateX(-40px) skewX(-6deg)}to{opacity:1;transform:none}}
.hero-ttl{font-weight:900;font-size:clamp(22px,3.3vw,40px);line-height:1.4;margin-top:34px;letter-spacing:.01em;position:relative;max-width:24em}
.hero-ttl em{font-style:normal;color:var(--red);display:block;margin-top:4px}
.hero-ctas{margin-top:32px;display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;position:relative}
.b-cta{background:var(--red);color:#fff;gap:44px}
.b-cta:hover{background:var(--ink);color:#fff}
.hero-ghost{color:var(--ink)}
.hero-cue{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(23,20,15,.4);position:relative}
.hero-cue span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.24em}
.hero-cue .l{width:1px;height:28px;background:linear-gradient(var(--red),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}
.strip-cue{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#8f8c86;margin-left:16px}

/* 01 実物 */
body.vb .works{background:#0b0b0b}
body.vb .works .section-index{color:#a9a6a0}
body.vb .works .display-heading{font-size:clamp(52px,8vw,125px)}
.works-grid{margin-top:10px}
/* サイトのサムネは 1600x1000 の実画面。枠を同じ 16:10 にして左右を切らない（スマホで左の見出しが切れていた） */
body.vb .work-image{aspect-ratio:16/10}

/* 02 できること（紙色で一段落とす） */
.svc{background:var(--paper);color:var(--ink);position:relative;z-index:5}
.svc-block{display:grid;grid-template-columns:.9fr 1.4fr;gap:5vw;border-top:1px solid var(--ink);padding:44px 0 50px}
.svc-block:last-child{border-bottom:1px solid var(--ink)}
.svc-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.svc-en{font-family:var(--display);font-size:clamp(40px,5.6vw,88px);letter-spacing:-.05em;line-height:.96;margin:0}
.svc-jp{font-size:15px;font-weight:900}
.svc-body p{font-size:14px;line-height:2}
.svc-body p strong{font-weight:900;color:var(--ink)}
.svc-lede{font-size:clamp(20px,2.3vw,32px)!important;font-weight:900;line-height:1.55!important;letter-spacing:-.03em;margin-bottom:18px}
.svc-tags{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px}
.svc-tags li{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.svc-tags li::before{content:'/ ';color:var(--red)}
.svc-links{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:26px}
.svc-links .text-link{gap:24px}
.svc-ai .svc-en{color:var(--red)}
.proof{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;margin-top:28px;align-items:start}
.proof-list{list-style:none;margin:0;padding:0}
.proof-list li{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding:16px 0}
.proof-list li:last-child{border-bottom:1px solid var(--line)}
.proof-list b{font-size:15px;font-weight:900}
.proof-list span{font-size:12px;color:var(--muted);line-height:1.8}
.proof-list a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--red);border-bottom:1px solid var(--red);align-self:flex-start;padding-bottom:2px}

/* 03 世界観 */
.worlds{background:#0b0b0b;color:var(--paper);position:relative;z-index:5}
.worlds .section-index{color:#a9a6a0}
.worlds-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 18px}
.world{display:block;color:#fff;grid-column:span 2}
.world:nth-child(1),.world:nth-child(2){grid-column:span 3}
.world-img{aspect-ratio:4/3;overflow:hidden;background:#000}
.world:nth-child(1) .world-img,.world:nth-child(2) .world-img{aspect-ratio:16/10}
.world-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.world:hover .world-img img{transform:scale(1.04)}
.world-body{padding-top:16px}
.world-body .eyebrow{color:#a9a6a0;font-size:9px}
.world-body h3{font-family:var(--display);font-size:clamp(20px,2.3vw,32px);letter-spacing:-.04em;margin:8px 0 6px;display:flex;justify-content:space-between;gap:10px;transition:color .3s}
.world:hover h3{color:var(--red)}
.world-body p{font-size:12px;color:#bcbab3}

/* 04 頼む理由（写真なし・一段組） */
.about--text{grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.18)}
.about--text .about-copy{max-width:1100px;width:100%;margin:0 auto;padding:90px var(--pad)}
.about--text .about-copy h2{font-size:clamp(30px,3.6vw,56px);line-height:1.4}
.about--text .about-copy>p:not(.section-index){max-width:720px}
.why{list-style:none;margin:26px 0 24px;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.why li{display:flex;flex-direction:column;gap:8px;border-top:1px solid #55524c;padding:18px 0}
.why b{font-size:15px;font-weight:900;color:#fff}
.why span{font-size:12px;color:#cbc8c0;line-height:1.8}
.about--text .about-sign{max-width:720px}

@media(max-width:1100px){.worlds-grid{grid-template-columns:repeat(2,1fr)}.world,.world:nth-child(1),.world:nth-child(2){grid-column:span 1}.world-img,.world:nth-child(1) .world-img,.world:nth-child(2) .world-img{aspect-ratio:4/3}.proof{grid-template-columns:1fr}}
@media(max-width:760px){
  .hero-live{padding:96px var(--pad) 56px;min-height:100svh}
  .hero-logo{width:74vw}
  .hero-ttl{font-size:21px;line-height:1.5;margin-top:26px}
  .hero-ctas{gap:14px;margin-top:24px;flex-direction:column;align-items:stretch;width:100%}
  .b-cta{width:100%;justify-content:space-between}
  .hero-ghost{align-self:center}
  .strip-cue{display:block;margin:8px 0 0}
  body.vb .works .display-heading{font-size:64px}
  .svc-block{grid-template-columns:1fr;gap:18px;padding:34px 0}
  .svc-en{font-size:13vw}
  .svc-body p{font-size:13px}
  .svc-lede{font-size:20px!important}
  .svc-links{gap:10px 26px}
  .worlds-grid{grid-template-columns:1fr;gap:26px}
  .world-body h3{font-size:24px}
  .about--text .about-copy{padding:60px var(--pad)}
  .why{grid-template-columns:1fr;margin:18px 0 20px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero-logo{animation:none}.hero-cue .l{animation:none}}
html.flat .hero-logo{animation:none}

/* 2026-10-08 D-003: 署名「對馬」を途中で折らない */
.about-sign strong{white-space:nowrap;flex:none}
.about-sign>span{min-width:0}