/* TOP v2 — desktop one-screen layout */
.tv1-side{display:none}
.tv1-hero{position:relative;isolation:isolate;overflow:hidden;min-height:620px;background:#03101D;border-bottom:1px solid rgba(123,196,255,.26)}
.tv2-approved-visual{position:absolute;z-index:-3;inset:0;display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.03) contrast(1.02)}
.tv2-hero-video{display:none}
.tv1-hero:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(3,16,29,.84) 0%,rgba(3,16,29,.76) 22%,rgba(3,16,29,.56) 36%,rgba(3,16,29,.2) 48%,transparent 58%)}
.tv1-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,8,17,.1),transparent 62%,rgba(1,10,20,.22))}
.tv1-hero-copy{position:relative;z-index:1;max-width:560px;padding:96px 0 40px 40px}
.tv1-hero h1{margin:0;font-size:1rem;line-height:1}
.tv1-hero h1 img{width:520px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.tv1-lead{margin:24px 0 0;font-size:1.05rem;line-height:1.9;font-weight:600;letter-spacing:.04em;color:#E6EDF6;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.tv1-cta{display:inline-flex;align-items:center;justify-content:space-between;min-width:228px;margin-top:28px;padding:10px 22px;border:2px solid var(--gold);background:rgba(3,16,29,.48);box-shadow:0 0 0 1px rgba(255,209,42,.08) inset;color:var(--gold);font-weight:700;letter-spacing:.08em;text-decoration:none;transition:background .2s,color .2s}
.tv1-cta:hover,.tv1-cta:focus-visible{background:var(--gold);color:var(--navy)}
.tv1-works{min-height:381px;padding:10px 0 38px;background:var(--deep);overflow:hidden}
.tv1-works-inner{width:calc(100% - 88px);margin:0 auto}
.tv1-works-head{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.tv1-works-head:before{content:"";width:44px;height:3px;background:var(--gold);flex:none}
.tv1-works-head h2{margin:0;font-size:2rem;letter-spacing:.04em}
.tv1-works-head h2 small{margin-left:16px;font-size:1rem;font-weight:500}
.tv1-works-all{margin-left:auto;color:var(--gold);font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap}
.tv1-works-all:hover,.tv1-works-all:focus-visible{text-decoration:underline}
.tv1-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.tv1-card a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:168px;padding:16px 16px 14px;border:1px solid rgba(151,190,225,.28);border-radius:4px;overflow:hidden;color:#fff;text-decoration:none;background:#09203A;transition:border-color .2s,transform .2s}
.tv1-card a:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none}
.tv1-card a:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(2,10,18,.02) 20%,rgba(2,10,18,.38) 55%,rgba(2,10,18,.96) 100%)}
.tv1-card-image{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.tv1-card a:hover,.tv1-card a:focus-visible{border-color:var(--gold);transform:translateY(-3px)}
.tv1-card.tone-production{--card-accent:#54E6FF}
.tv1-card.tone-production a:before{background:linear-gradient(125deg,rgba(0,70,190,.62),rgba(24,230,255,.46));mix-blend-mode:color}
.tv1-card.tone-production .tv1-card-image{filter:saturate(.92) contrast(1.08) brightness(.94)}
.tv1-card.tone-process{--card-accent:#FF9A3D}
.tv1-card.tone-process a:before{background:radial-gradient(circle at 42% 44%,rgba(255,119,25,.72),transparent 36%),linear-gradient(120deg,rgba(0,72,205,.42),rgba(255,115,25,.38));mix-blend-mode:color}
.tv1-card.tone-process .tv1-card-image{filter:saturate(1.18) contrast(1.1) brightness(.96)}
.tv1-card.tone-mikoshiya{--card-accent:#FFD12A}
.tv1-card.tone-mikoshiya a:before{background:linear-gradient(118deg,rgba(0,80,225,.24) 0 44%,rgba(255,255,255,.2) 62%,rgba(255,209,42,.42) 100%);mix-blend-mode:screen}
.tv1-card.tone-mikoshiya .tv1-card-image{filter:saturate(1.06) contrast(1.12) brightness(1.02)}
.tv1-card-meta,.tv1-card-sub{position:relative;z-index:2}
.tv1-card-meta{display:flex;align-items:flex-end;gap:18px}
.tv1-card-num{display:inline-block;width:fit-content;padding-bottom:5px;border-bottom:3px solid var(--card-accent,var(--gold));font-size:1rem;font-weight:700;letter-spacing:.08em}
.tv1-card-title{font-size:1.5rem;font-weight:900;line-height:1.2;letter-spacing:.015em}
.tv1-card-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 0 51px;color:#F2F6FB;font-size:.9rem}
/* 03 のサブコピーは 2 行になる幅がある。3 枚の見出しの高さをそろえるため、その幅では全カードで 2 行分を確保する */
.tv1-card.tone-mikoshiya .tv1-card-sub{word-break:keep-all}
@media(min-width:1024px) and (max-width:1700px){
 .tv1-card-sub{align-items:flex-start;min-height:2.8em;line-height:1.4}
}
@media(min-width:1024px) and (max-width:1279px){
 .tv1-card-sub{margin-left:0;font-size:.8rem}
}

/* MIKOSHIYAの強み — WORKS 直下の 3 カラム帯 */
.tv2-strength{padding:0 0 32px;background:var(--deep)}
.tv2-strength-inner{width:calc(100% - 88px);margin:0 auto;padding:0 0 16px;border:1px solid rgba(151,190,225,.28);border-radius:4px}
.tv2-strength-head{display:flex;align-items:center;gap:14px;padding:12px 24px 0}
.tv2-strength-head:before{content:"";width:44px;height:3px;background:var(--gold);flex:none}
.tv2-strength-head h2{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.tv2-strength-head:after{content:"";order:1;flex:1;height:1px;background:rgba(255,209,42,.7)}
.tv2-strength-head span{order:2;color:var(--slate);font-size:.72rem;letter-spacing:.14em;white-space:nowrap}
.tv2-strength-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.tv2-strength-list li{position:relative;overflow:hidden;padding:14px 24px 16px}
.tv2-strength-list li+li{border-left:1px solid rgba(151,190,225,.22)}
.tv2-strength-art{position:absolute;z-index:0;right:12px;top:8px;width:46%;max-width:220px;height:auto;color:#2F6DB8;opacity:.45}
.tv2-strength-label,.tv2-strength-list h3,.tv2-strength-list li>p{position:relative;z-index:1}
.tv2-strength-label{margin:0;color:var(--cyan);font-size:.76rem;font-weight:600;letter-spacing:.12em}
.tv2-strength-label:after{content:"";display:block;width:26px;height:3px;margin-top:8px;background:var(--gold)}
.tv2-strength-list h3{margin:10px 0 0;font-size:1.75rem;font-weight:900;line-height:1.25;letter-spacing:.02em}
.tv2-strength-list li>p:last-child{margin:6px 0 0;color:#E6EDF6;font-size:.9rem;line-height:1.6}
.tv2-strength-message{display:flex;align-items:center;gap:20px;margin:2px 24px 0;font-size:1.05rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.tv2-strength-message:before,.tv2-strength-message:after{content:"";flex:1;height:1px;background:rgba(151,190,225,.4)}
.tv2-strength-message .tv2-x{margin:0 .35em;color:var(--gold)}

@media(min-width:1024px){
  html{scroll-padding-top:0}
  body.top-v2 .site-header,body.top-v2 .footer{display:none}
  body.top-v2 main{margin-left:250px;display:grid;grid-template-rows:57.667vh auto auto;grid-template-rows:57.667dvh auto auto}
  .tv1-side{position:fixed;z-index:60;inset:0 auto 0 0;width:250px;display:flex;flex-direction:column;padding:68px 0 30px;overflow:hidden;background:linear-gradient(180deg,rgba(5,13,26,.94) 0%,rgba(5,13,26,.9) 45%,rgba(5,13,26,.74) 62%,rgba(5,13,26,.45) 76%,rgba(5,13,26,.45) 88%,rgba(5,13,26,.8) 100%),url(top-nav-bg.webp) center bottom/cover no-repeat #050D1A;border-right:1px solid var(--line)}
  .tv1-side-brand{display:flex;align-items:center;min-height:56px;padding:0 14px}
  .tv1-side-brand img{width:222px;height:auto}
  .tv1-side-nav{margin-top:48px}
  .tv1-side-nav a{position:relative;display:grid;grid-template-columns:53px 1fr;padding:10px 24px 10px 33px;color:#fff;text-decoration:none}
  .tv1-side-nav a span{grid-row:1/3;padding-top:4px;color:var(--slate);font-size:.82rem}
  .tv1-side-nav a b{font-size:1rem;font-weight:600;letter-spacing:.06em}
  .tv1-side-nav a small{color:var(--slate);font-size:.76rem;letter-spacing:.1em}
  .tv1-side-nav a[aria-current="page"] b,.tv1-side-nav a[aria-current="page"] small,.tv1-side-nav a:hover b,.tv1-side-nav a:focus-visible b{color:var(--gold)}
  .tv1-side-nav a[aria-current="page"]:before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:3px;background:var(--gold)}
  .tv1-side-foot{margin-top:auto;padding:28px 32px 0}
  .tv1-side-foot:before{content:"";display:block;width:40px;height:3px;margin-bottom:28px;background:var(--gold)}
  .tv1-side-sns{display:flex;gap:20px}
  .tv1-side-sns a{display:grid;place-items:center;width:44px;height:44px;color:#fff}
  .tv1-side-sns a:hover,.tv1-side-sns a:focus-visible{color:var(--gold)}
  .tv1-side-foot p{margin:20px 0 0;color:var(--slate);font-size:.8rem;line-height:1.8}
  .tv2-hero-video{position:absolute;z-index:-3;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 100%;filter:saturate(1.03) contrast(1.02)}
  .tv1-hero h1{transition:opacity .5s,visibility .5s}
  .tv1-hero:before{transition:opacity .5s}
  .tv1-hero.is-still h1{opacity:0;visibility:hidden}
  .tv1-hero-copy:before{content:"";position:absolute;z-index:-1;left:0;bottom:-20px;width:520px;height:340px;background:linear-gradient(90deg,rgba(3,16,29,.88) 0%,rgba(3,16,29,.78) 55%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 60px);mask-image:linear-gradient(180deg,transparent,#000 60px);opacity:0;transition:opacity .5s;pointer-events:none}
  .tv1-hero.is-still .tv1-hero-copy:before{opacity:1}
  .tv1-hero.is-still:before{opacity:0}
  .tv1-hero{height:auto;min-height:0}
  .tv1-works{height:auto;min-height:0}
  .tv1-card a{min-height:clamp(132px,18.67vh,168px)}
}

@media(min-width:1024px) and (max-height:800px){
  .tv1-side{padding:34px 0 20px}
  .tv1-side-nav{margin-top:20px}
  .tv1-side-nav a{padding-top:7px;padding-bottom:7px}
  .tv1-side-foot{padding-top:12px}
  .tv1-side-foot:before{margin-bottom:8px}
  .tv1-side-foot p{margin-top:6px}
  .tv1-hero-copy{padding-top:52px}
  .tv1-hero h1 img{width:430px}
  .tv1-lead{font-size:.92rem;line-height:1.7}
  .tv1-cta{margin-top:14px}
  .tv1-works-head h2{font-size:1.65rem}
}

@media(max-width:1023px){
  body.top-v2 .site-brand{flex:none;width:216px;min-width:0;height:54px;background:url(company-logo-480w.webp) left center/contain no-repeat}
  body.top-v2 .site-brand img{display:none}
  .tv1-hero{min-height:720px;padding-top:72px}
  .tv2-approved-visual{object-position:58% center}
  .tv1-hero:before{background:linear-gradient(180deg,rgba(3,16,29,.9) 0%,rgba(3,16,29,.6) 48%,rgba(3,16,29,.12) 100%)}
  .tv1-hero-copy{padding:78px 22px 40px}
  .tv1-hero h1 img{width:min(520px,74vw)}
  .tv1-works-inner{width:calc(100% - 44px)}
  .tv1-cards{grid-template-columns:1fr}
  .tv2-strength-inner{width:calc(100% - 44px)}
  .tv2-strength-list{grid-template-columns:1fr}
  .tv2-strength-list li+li{border-left:0;border-top:1px solid rgba(151,190,225,.22)}
  .tv2-strength-art{width:min(46%,220px)}
}

@media(max-width:650px){
  body.top-v2 .site-brand{width:200px;height:50px}
  .tv1-hero{min-height:640px;padding-top:66px}
  .tv1-hero-copy{padding:62px 18px 36px}
  .tv1-hero h1 img{width:260px}
  .tv1-lead{font-size:.95rem;line-height:1.8}
  .tv1-works{padding:28px 0 46px}
  .tv1-works-inner{width:calc(100% - 36px)}
  .tv1-works-head{flex-wrap:wrap;gap:12px}
  .tv1-works-head h2{font-size:1.6rem}
  .tv1-works-all{margin-left:0;width:100%}
  .tv1-card a{min-height:170px}
  .tv1-card-title{font-size:1.25rem}
  .tv1-card-sub{font-size:.82rem}
  .tv2-strength{padding-bottom:40px}
  .tv2-strength-inner{width:calc(100% - 36px)}
  .tv2-strength-head{flex-wrap:wrap;gap:10px;padding:12px 18px 0}
  .tv2-strength-head:after{display:none}
  .tv2-strength-list li{padding:14px 18px 16px}
  .tv2-strength-list h3{font-size:1.45rem}
  .tv2-strength-message{display:block;margin:4px 18px 0;font-size:.95rem;line-height:1.7;white-space:normal}
  /* スマホ HERO：主人公の顔を上、ロゴ・コピー・CTA をその下へ（PC の構図は再現しない） */
  .tv1-hero{min-height:0}
  .tv2-approved-visual{top:66px;right:auto;bottom:auto;left:50%;width:140%;height:auto;transform:translateX(-55%)}
  .tv1-hero:before{background:linear-gradient(180deg,rgba(3,16,29,.1) 0,rgba(3,16,29,.05) calc(66px + 42vw),rgba(3,16,29,.82) calc(66px + 62vw),#03101D calc(66px + 78vw))}
  .tv1-hero-copy{padding:54vw 18px 32px}
  /* 強み帯：日本語の文節で折り返す */
  .tv2-strength-list h3,.tv2-strength-list li>p:last-child,.tv2-strength-message{word-break:auto-phrase;line-break:strict;text-wrap:pretty}
}

@media(prefers-reduced-motion:reduce){
  .tv2-hero-video{display:none}
  .tv1-cta,.tv1-card a{transition:none}
  .tv1-card a:hover{transform:none}
}
/* HERO を横切る歩行演出。読み込みは JS から（幅 1024px 未満・動きを減らす設定では要素を出さず通信もしない）。背景動画の前・左側の暗い重ねの後ろを通るので、文字とボタンが読める */
.tv2-walk{display:none}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
 .tv2-walk{position:absolute;z-index:-3;left:0;bottom:0;display:block;width:clamp(380px,31vw,600px);height:auto;aspect-ratio:720/406;visibility:hidden;pointer-events:none;will-change:transform}
 .tv2-walk.is-walking{visibility:visible}
}
/* 幅 1023px 以下の HERO 動画。読み込みは JS から。再生できるまで静止画のままで、再生が始まってから重ねる */
.tv2-hero-sp{display:none}
@media(max-width:1023px) and (prefers-reduced-motion:no-preference){
 .tv2-hero-sp{position:absolute;z-index:-3;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:58% center;opacity:0;pointer-events:none;transition:opacity .5s}
 .is-sp-video .tv2-hero-sp{opacity:1}
}
@media(max-width:650px) and (prefers-reduced-motion:no-preference){
 .tv2-hero-sp{top:66px;right:auto;bottom:auto;left:50%;width:140%;height:auto;aspect-ratio:16/9;object-fit:fill;transform:translate(-55%,var(--y,0%));-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
 .is-sp-video .tv2-approved-visual{opacity:0;transition:opacity .5s .3s}
}