/* 一つの仕事の場面に視点を寄せ、画面の内側を次の章につなぐ。 */
.opening{background:var(--blue-dark)}
.opening-art{background:var(--paper);transform:none}
.opening-scenery{position:absolute;inset:-3%;background:url('assets/opening-ribbon.svg') center/cover no-repeat;pointer-events:none;transform-origin:80% 60%}
.opening-english{position:absolute;left:-.025em;bottom:4%;font-family:var(--font-site);font-weight:900;font-size:clamp(90px,16vw,250px);line-height:.96;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px #1f2c3a20;white-space:nowrap;user-select:none;pointer-events:none}
.opening-english span{display:block}
.studio-stage{position:absolute;width:min(52vw,820px);aspect-ratio:4/3;right:1vw;bottom:0;transform-origin:60% 37.5%}
.studio-scene{display:block;width:100%;height:100%;overflow:visible}
.studio-piece{transform-box:fill-box;transform-origin:center}
.studio-drawing{opacity:.28}
.studio-trace{stroke-dashoffset:0}
.portal-window{display:none;position:absolute;background:var(--blue-dark);transform-origin:center}
.editorial-leaf{display:none;position:absolute;width:clamp(300px,39vw,560px);aspect-ratio:330/425;top:17%;left:0;z-index:4;pointer-events:none}
.editorial-leaf svg{display:block;width:100%;height:100%}
.hero-copy>p.hero-statement{display:flex;font-family:var(--display);font-size:clamp(40px,7vw,112px);font-weight:700;letter-spacing:-.055em;line-height:1.35;text-align:left;color:var(--ink)}
.hero-copy>p.hero-statement .statement-ink{display:block;width:max-content}
.statement-result{color:inherit}
.statement-mask{padding-left:0}
.hero-copy>p.hero-equation{display:flex;align-items:center;gap:20px;width:max-content;max-width:100%;margin:-10px 0 34px;color:var(--ink);font-family:var(--font-site);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.16em;white-space:nowrap}
.hero-equation svg{width:58px;height:16px;flex-shrink:0;fill:none;stroke:var(--pink);stroke-width:1.5}
.hero-equation b{color:var(--brand-text);font-weight:700}
.opening-motion .hero-copy>p.hero-equation{position:absolute;left:6%;top:calc(var(--header-clearance,80px) + 94px);margin:0;opacity:0}
.hero-copy h1{padding:0;text-shadow:none}
.hero-copy h1:after{content:none}
.hero-target,.hero-from,.hero-company{font-family:var(--display);font-weight:900;letter-spacing:-.065em;color:var(--brand-text)}
.hero-target{display:block;font-size:clamp(38px,4.2vw,60px);line-height:1.5;font-weight:700}
.hero-from{display:block;font-size:clamp(76px,9.6vw,144px);line-height:1.2;margin:12px 0 24px;color:var(--brand-text)}
.hero-company{display:block;font-size:clamp(38px,4.2vw,60px);line-height:1.5;margin:0;font-weight:700}
.hero-intro-line{display:block}
.opening-motion .opening{height:380svh}
.opening-motion .opening-art{opacity:1;transform:none}
.opening-motion .hero-copy h1{top:30%;left:6%;right:auto;width:60%;opacity:0}
.opening-motion .hero-target,.opening-motion .hero-from,.opening-motion .hero-company{opacity:1;transform:none}
.opening-motion .studio-piece{opacity:0}
.opening-motion .portal-window,.opening-motion .editorial-leaf{display:block;opacity:0}
.opening-motion .studio-stage,.opening-motion .portal-window{will-change:transform}
.opening-motion .hero-copy{z-index:3}
.opening-motion .marketing-plane,.opening-motion .approach-copy{z-index:5}
.kinetic .studio-trace{animation:studio-outline 900ms ease-out both}
@keyframes studio-outline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
body:not(.opening-motion) .hero-copy{background:var(--paper) url('assets/opening-ribbon.svg') center/cover no-repeat}
body:not(.opening-motion) .opening-art{display:none}
body:not(.opening-motion) .hero-copy h1{width:100%}
.process-strip ol{list-style:none}
.process-number{font-variant-numeric:tabular-nums}
.motion .research-section:before{background:var(--blue-dark)}
.service-index a[aria-current="true"]{color:var(--brand-text);border-color:var(--brand-text)}
.motion .service-index a[aria-current="true"]{border-color:var(--brand-text)}
.research-illustration .scene{width:80%;margin-inline:auto}
.service-panel,.motion .service-panel{grid-template-columns:58% 42%}
.service-art,.motion .service-art{width:100%;height:320px;margin:0;padding:0}
.service-copy h3,.motion .service-copy h3{font-size:clamp(32px,3.5vw,54px);font-weight:900;letter-spacing:-.055em}
.research-copy h3,.motion .research-sheet h3{font-weight:900;letter-spacing:-.05em}
@media(min-width:601px) and (max-width:900px){
  .studio-stage{width:73vw;right:0;bottom:0}
  .opening-motion .hero-copy h1{top:27%;width:85%}
  .hero-target,.hero-company{font-size:42px}
  .hero-from{font-size:clamp(76px,12.5vw,110px)}
  .service-art,.motion .service-art{height:200px;max-height:22svh;margin:0 0 20px}
  .service-copy h3,.motion .service-copy h3{font-size:36px}
}
@media(max-width:600px){
  .hero-copy>p.hero-statement{display:flex;font-size:clamp(20px,7.2vw,44px);line-height:1.45;letter-spacing:-.06em}
  .statement-result,.statement-action{display:inline}
  .hero-copy>p.hero-equation{font-size:clamp(10px,3vw,12px);gap:12px;letter-spacing:.12em;margin:-16px 0 30px}
  .hero-equation svg{width:40px}
  .opening-motion .hero-copy>p.hero-equation{left:24px;top:calc(var(--header-clearance,70px) + 84px)}
  .opening-english{font-size:21vw;bottom:9%;left:-5%;line-height:1.1}
  .opening-scenery{background-position:80% center}
  .studio-stage{width:96%;left:2%;right:auto;bottom:3vh}
  .opening-motion .hero-copy h1{top:30%;left:24px;right:24px;width:auto}
  .hero-target{font-size:30px;letter-spacing:-.04em}
  .hero-from{font-size:clamp(54px,17vw,82px);margin:12px 0 22px;letter-spacing:-.07em}
  .hero-company{font-size:clamp(26px,8.3vw,36px);margin:0;letter-spacing:-.055em}
  .editorial-leaf{width:78vw;top:27%}
  .motion .research-note{font-size:13px;line-height:1.75}
  .service-label{font-size:13px}
  .service-art,.motion .service-art{height:18svh;max-height:150px;margin:0 0 16px}
  .service-copy h3,.motion .service-copy h3{font-size:33px;line-height:1.4;margin:8px 0 16px}
  .process-strip h2{font-size:23px;line-height:1.5}
}

/* 文字の背面を空け、端や図の周辺にだけ印刷物の細かな質感を残す。 */
.opening-art:before,.opening-world:after{content:none}
.research-stage{background-image:repeating-linear-gradient(90deg,transparent 0 23px,#2396ad12 24px 25px);background-size:100px 100%;background-position:right top;background-repeat:no-repeat}
.service-panel:before{background-size:9px 9px;mask-image:linear-gradient(110deg,transparent 35%,#000)}
.panel-web{background-image:repeating-linear-gradient(-35deg,transparent 0 120px,#ffffff09 121px 122px,transparent 123px 170px)}
.panel-field{background-color:var(--rose);color:#87354D;background-image:repeating-linear-gradient(0deg,transparent 0 40px,#b2416309 41px 42px)}
.panel-field .service-copy h3{color:var(--brand-text)}
.panel-ax{background-image:linear-gradient(#2396ad09 1px,transparent 1px),linear-gradient(90deg,#2396ad09 1px,transparent 1px);background-size:48px 48px}
.panel-training{background-image:repeating-linear-gradient(-45deg,transparent 0 8px,#ac8a3608 9px 10px)}
.panel-event{background-image:repeating-radial-gradient(ellipse at 100% 0,transparent 0 80px,#ffffff0a 81px 82px,transparent 83px 130px)}
.journal{background-image:radial-gradient(#2396ad22 .75px,transparent 1px);background-size:14px 14px}
.journal-heading,.journal-related{background:var(--paper)}
.company{background-image:repeating-linear-gradient(-30deg,transparent 0 80px,#2396ad0a 81px 82px,transparent 83px 120px)}
/* 会社情報とお知らせは、見出し・内容・末尾リンクの上下を共有する。 */
.company{grid-template-rows:auto 1fr;gap:20px 8%}
.company>.company-eyebrow{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5}
.company-main,.company-news{display:grid;grid-template-rows:auto 1fr auto;min-width:0;align-self:stretch}
.company .company-main h2,.company .company-news h3{font-size:clamp(30px,3vw,42px);font-weight:700;line-height:1.35;letter-spacing:-.04em;margin:0 0 24px}
.company dl{display:grid}
.company dl>div{align-content:center}
.company-news-list{display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}
.company-news-list>a{display:flex;flex-direction:column;justify-content:center;padding:12px 0;border-bottom:1px solid #1f2c3a33;font-size:14px;line-height:1.8}
.company-news-list time{font-size:12px;line-height:1.5;margin:0 0 6px}
.company .company-links,.company .company-news>.text-link{align-self:end;justify-self:start;min-height:44px;margin:24px 0 0}
.company .company-links{gap:12px 24px;align-items:end}
.company .text-link{display:inline-flex;align-items:center;font-size:14px;min-height:44px}
@media(min-width:901px){
  .company dl{grid-template-rows:repeat(4,minmax(0,1fr))}
  .company dl>div,.motion .company dl>div{padding:8px 0;line-height:1.65;border-bottom-color:#1f2c3a33}
  .company-news-list>a{padding:8px 0;line-height:1.65}
}
@media(max-width:900px){
  .company{display:block}
  .company>.company-eyebrow{margin-bottom:18px}
  .company-main,.company-news{display:block}
  .company .company-news{margin-top:56px}
  .company .company-main h2,.company .company-news h3{font-size:32px;margin:0 0 24px}
  .company-news-list{display:block}
  .company-news-list>a{padding:18px 0}
  .company .company-links{margin-top:20px}
  .company .text-link{font-size:13px}
}
.contact{background-image:repeating-radial-gradient(ellipse at 115% 110%,transparent 0 48px,#ffffff10 49px 50px,transparent 51px 84px)}
@media(max-width:600px){.research-stage{background-size:38px 100%}.journal{background-size:19px 19px}}

/* 図の前景だけに呼吸を付ける。画面外・演出停止中には再生しない。 */
.ambient-piece{transform-box:fill-box;transform-origin:center}
.kinetic .ambient-piece{animation:illustration-breathe 6.8s ease-in-out infinite;animation-play-state:paused}
.kinetic .art-awake .ambient-piece{animation-play-state:running}
.kinetic .sheet-analysis .ambient-piece,.kinetic .panel-ax .ambient-piece{animation-name:illustration-focus;animation-duration:5.6s}
.kinetic .sheet-voice .ambient-piece,.kinetic .panel-field .ambient-piece{animation-delay:-2.4s}
.motion .research-sheet[aria-hidden="true"] .ambient-piece,.motion .service-panel[aria-hidden="true"] .ambient-piece,.page-inactive .ambient-piece{animation-play-state:paused!important}
@keyframes illustration-breathe{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(2px,-6px) rotate(.8deg)}}
@keyframes illustration-focus{0%,55%,100%{transform:scale(1)}70%{transform:scale(1.035)}}

/* リンクは矢印を足さず、文字と下線でクリックできる場所を示す。 */
.round-link{min-height:44px;border-bottom-color:currentColor;text-underline-offset:.4em}
.round-link:hover,.round-link:focus-visible{text-decoration:underline;text-decoration-thickness:2px}
.article-open,.motion .article-open{font-family:var(--display);font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.text-link{text-underline-offset:.35em}
.contact-primary{justify-content:flex-start}
@media(prefers-reduced-motion:reduce){
  .studio-trace,.ambient-piece{animation:none!important}
  .portal-window,.editorial-leaf{display:none!important}
}

/* 動作軽減・横向きでも、ヘッダー背面はMVと同じ白にする。 */
body:not(.opening-motion) .opening-stage{background:var(--paper)}
body:not(.opening-motion) .marketing-plane,body:not(.opening-motion) .approach-copy{background:var(--blue-dark)}