@charset "UTF-8";
/* PROOF. サイト（HTML 試作）
   - 1rem = 10px（幅 1440px のとき）。幅に合わせて 901px まで縮み、1440px を超えたら中央寄せ
   - 900px 以下はスマホ用（幅 390px のとき 1rem = 10px）
   - 接頭辞: l- レイアウト / c- 部品 / p- ページ固有 / u- ユーティリティ / js- スクリプト用 / is- 状態 */

/* ===== トークン ===== */
:root{
  --black:#111111;
  --ink:#000000;
  --white:#FFFFFF;
  --red:#EE2B1F;
  --g1:#D9D9D9;
  --g2:#A6A6A6;
  --g3:#E1E1E1;
  --soft:#F7F7F7;
  --line:#8C8C8C;
  --sub:#6B6B6B;
  --mute:#BDBDBD;
  --en:'Inter','Helvetica Neue',Arial,sans-serif;
  --jp:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.77,0,.18,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
  --gx:calc((100vw - 144rem) / 2);   /* 1440px より広い画面で、中身を中央に寄せる余白 */
}

/* ===== 基本 ===== */
*,*::before,*::after{box-sizing:border-box}
html{font-size:min(10px,calc(100vw / 144));-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--jp);font-weight:500;font-size:max(14px,2rem);line-height:2;color:var(--black);background:var(--white);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{padding:0;border:0;background:none;cursor:pointer}
[hidden]{display:none !important}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.u-nb{display:inline-block}   /* 文節のかたまり。狭い画面では、かたまりの境目でだけ折り返す */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* 事例のタイトルは、文節で折り返す（未対応のブラウザでは、ふつうの折り返し） */
.p-pj-card__title,.p-project__cap,.p-dt-h1,.p-dt-nav__title{word-break:auto-phrase}

/* ページの出入り */
body{animation:page-in .6s var(--e-out) backwards}
body.is-leaving{opacity:0;transition:opacity .28s ease}
@keyframes page-in{from{opacity:0}to{opacity:1}}

/* ===== レイアウト ===== */
.l-main{position:relative}
.l-wide{position:relative}                       /* 全幅の帯（背景は画面いっぱい） */
.l-inner{position:relative;max-width:144rem;margin:0 auto}

/* ヘッダー（ロゴ。MENU ボタンは別に固定） */
.l-header{position:absolute;top:0;left:50%;z-index:20;width:100%;max-width:144rem;height:16rem;transform:translateX(-50%);pointer-events:none}
.l-header__logo{position:absolute;left:8rem;top:6rem;display:block;width:14rem;height:10rem;pointer-events:auto}
.l-header__logo svg{width:100%;height:100%}
.l-header__logo .dot{transform-box:fill-box;transform-origin:center;transition:transform .55s var(--e-back)}
.l-header__logo:hover .dot{transform:scale(1.4)}

/* MENU / CLOSE ボタン（画面の右上に固定。暗い帯の上では白に切り替え） */
.c-menu-btn{position:fixed;z-index:60;top:7.1rem;right:calc((100vw - 144rem) / 2 + 7.6rem);display:flex;flex-direction:column;align-items:center;gap:.9rem;width:4.4rem;height:4.4rem;color:var(--black);transition:color .35s ease}
.c-menu-btn.is-light{color:var(--white)}
.c-menu-btn__dot{width:2rem;height:2rem;border-radius:50%;background:currentColor;transition:transform .5s var(--e-back),background-color .3s ease}
.c-menu-btn__label{font-family:var(--en);font-size:max(10px,1.1rem);font-weight:700;line-height:1.2;letter-spacing:.02em}
.c-menu-btn:hover .c-menu-btn__dot{transform:scale(1.45)}
.is-menu-open .c-menu-btn{color:var(--white)}
.is-menu-open .c-menu-btn:hover .c-menu-btn__dot{background:var(--red)}

/* ページ名の縦書き */
.c-vlabel{position:absolute;z-index:2;left:calc(var(--gx) + 12.7rem);top:22.1rem;margin:0;font-family:var(--en);font-size:4.8rem;font-weight:700;line-height:1;letter-spacing:.1em;writing-mode:vertical-rl;white-space:nowrap}

/* ===== 部品 ===== */
/* 大きな英字見出し */
.c-label{font-family:var(--en);font-size:8.2rem;font-weight:700;line-height:1.1;letter-spacing:0}
.c-label--m{font-size:7.2rem}

/* CONTACT バー */
.c-cta{padding:19.2rem 0 30.5rem;background:var(--white)}
.is-project .c-cta,.is-detail .c-cta{padding-top:18.2rem}
.is-top .c-cta{padding-bottom:30.6rem}
.c-cta__bar{display:flex;align-items:center;justify-content:space-between;max-width:101.6rem;height:15.3rem;margin:0 auto;padding:0 8.4rem;background:var(--black);color:var(--white);overflow:hidden;position:relative}
.c-cta__bar::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .55s var(--e-io)}
.c-cta__bar:hover::before{transform:translateY(0)}
.c-cta__text,.c-cta__circle{position:relative}
.c-cta__text{font-family:var(--en);font-size:4.8rem;font-weight:700;line-height:1.2;letter-spacing:0;transition:transform .5s var(--e-out)}
.c-cta__bar:hover .c-cta__text{transform:translateX(1.2rem)}
.c-cta__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.c-cta__lead{font-size:max(12px,1.6rem);font-weight:500;line-height:1.6;letter-spacing:.04em;transition:transform .5s var(--e-out)}
.c-cta__bar:hover .c-cta__lead{transform:translateX(1.2rem)}
.c-cta__circle{display:flex;align-items:center;justify-content:center;flex:none;width:8.4rem;height:8.4rem;border-radius:50%;background:var(--white);transition:transform .5s var(--e-back)}
.c-cta__circle svg{width:2.8rem;height:2.8rem;transition:transform .5s var(--e-out)}
.c-cta__bar:hover .c-cta__circle{transform:scale(1.1)}
.c-cta__bar:hover .c-cta__circle svg{transform:translateX(.3rem)}

/* グレーの仮置き画像 */
.c-ph{background:var(--g1)}

/* ===== フッター ===== */
.l-footer{background:var(--ink);color:var(--white)}
.l-footer__inner{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:end;max-width:144rem;height:58.7rem;margin:0 auto;padding:11.5rem 9rem 0}
.l-footer__brand{grid-column:1 / -1}
.l-footer__logo{display:block;width:43.8rem}
.l-footer__logo svg{width:100%;height:auto}
.l-footer__sub{margin-top:1.2rem;font-size:max(11px,1.6rem);font-weight:500;line-height:1.3;letter-spacing:.55em}
.l-footer__nav{align-self:start;margin-top:5.4rem}
.l-footer__nav a{display:block;font-family:var(--en);font-size:4.8rem;font-weight:700;line-height:1.46;letter-spacing:0;transition:transform .45s var(--e-out),color .3s ease}
.l-footer__nav a:hover{transform:translateX(1.4rem);color:var(--red)}
.l-footer__meta{align-self:end;padding-bottom:11.4rem;text-align:right;font-size:max(11px,1.55rem);font-weight:700;line-height:1;letter-spacing:.03em}
.l-footer__meta a{display:inline-block;margin-bottom:3.4rem;transition:opacity .3s}
.l-footer__meta a:hover{opacity:.6}
.l-footer__meta small{display:block;font-family:var(--en);font-size:inherit;font-weight:700;letter-spacing:.02em}

/* ===== メニュー（全画面） ===== */
.c-menu{--mh:min(102.4rem,100vh);position:fixed;inset:0;z-index:50;background:var(--black);color:var(--white);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e-io),visibility 0s linear .75s}
@supports (height:100svh){.c-menu{--mh:min(102.4rem,100svh)}}
.is-menu-open .c-menu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .75s var(--e-io),visibility 0s}
.c-menu__inner{position:relative;max-width:144rem;height:100%;margin:0 auto}
.c-menu__nav{position:absolute;left:15.7rem;top:11.7rem}
.c-menu__nav li{overflow:hidden;line-height:1}
.c-menu__nav a{display:block;padding:1.6rem 0 1.5rem;font-family:var(--en);font-size:8.8rem;font-weight:700;line-height:1;letter-spacing:0;transform:translateY(105%);transition:transform .8s var(--e-out),color .3s ease}
.is-menu-open .c-menu__nav a{transform:translateY(0);transition-delay:calc(.28s + var(--i) * .09s)}
.c-menu__nav a:hover{color:var(--red)}
.c-menu__privacy{position:absolute;left:15.8rem;bottom:8rem;font-size:max(11px,1.6rem);font-weight:500;line-height:1;opacity:0;transition:opacity .5s ease .6s}
.is-menu-open .c-menu__privacy{opacity:1}
/* ポスター（白い線だけの版。台はなし）は --mh（画面の高さ。デザインの 102.4rem が上限）に比例して縮み、必ず画面に収まる。--mh が 102.4rem のとき left 78.2 / top 12.3 / 47.1 × 82.9rem（デザインどおり） */
.c-menu__poster{position:absolute;top:calc(var(--mh) * .1201);left:calc(101.75rem - var(--mh) * .23);width:calc(var(--mh) * .46);height:calc(var(--mh) * .8096);opacity:0;transform:translateY(3rem) scale(.98);transition:opacity .6s ease,transform .8s var(--e-out)}
.is-menu-open .c-menu__poster{opacity:1;transform:none;transition-delay:.35s}
.c-menu__poster img{position:absolute;left:2.25%;top:.68%;width:94.69%;height:auto}

/* ===== 出現の動き ===== */
.js [data-reveal]{opacity:0;transform:translateY(2.4rem);transition:opacity .9s var(--e-out),transform .9s var(--e-out);transition-delay:var(--d,0s)}
/* 見出し: 下から文字がせり上がる */
.js [data-reveal="mask"]{opacity:1;transform:none;overflow:hidden;padding:.08em 0;margin:-.08em 0}
.js [data-reveal="mask"] > .u-line{display:block;transform:translateY(110%);transition:transform 1.05s var(--e-io);transition-delay:var(--d,0s)}
.js [data-reveal="mask"].is-in > .u-line{transform:none}
/* 画像の仮置き: 覆いが左から右へ引いていく（覆いの色は --cover で、背景に合わせる） */
.js [data-reveal="wipe"]{opacity:1;transform:none;overflow:hidden}
.js [data-reveal="wipe"]::after{content:"";position:absolute;inset:-1px;z-index:3;background:var(--cover,#fff);transform-origin:100% 50%;transition:transform 1.15s var(--e-io);transition-delay:var(--d,0s)}
.js [data-reveal="wipe"].is-in::after{transform:scaleX(0)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}
.p-project{--cover:var(--black)}

/* ===== TOP ===== */
/* ヒーロー: 高さは画面に合わせる（デザインの 99.2rem が上限）。ポスターは --fh（画面の高さ）に比例して縮み、必ず画面に収まる */
.p-hero{--fh:min(99.2rem,100vh);position:relative;max-width:144rem;height:max(var(--fh),74rem);margin:0 auto}
@supports (height:100svh){.p-hero{--fh:min(99.2rem,100svh)}}
.p-hero__title{position:absolute;left:12.8rem;top:41.3rem;font-size:5.8rem;font-weight:700;line-height:1.21;letter-spacing:0}
.p-hero__lead{position:absolute;left:12.8rem;top:61.4rem;font-size:3.4rem;font-weight:700;line-height:1.5;letter-spacing:0}
.p-hero__poster{position:absolute;top:calc(var(--fh) * .1296);left:calc(101.56rem - var(--fh) * .2248);width:calc(var(--fh) * .4496);height:calc(var(--fh) * .8206);cursor:pointer}   /* --fh が 99.2rem のとき left 79.26 / top 12.86 / 44.6 × 81.4rem（デザインどおり）。中心の位置は変えない */
.p-hero__poster img{width:100%;height:100%}

.p-layers{background:var(--black);color:var(--white);height:163.7rem}
.p-layers__head{padding-top:37.4rem;text-align:center}
.p-layers__title{font-size:5.6rem;font-weight:800;line-height:1.35;letter-spacing:.02em}
.p-layers__sub{margin-top:1.8rem;font-size:max(14px,2rem);font-weight:500;line-height:1.8;color:#D6D6D6}
.p-layers__stage{margin-top:8.9rem}
.p-layers__sym{width:42.4rem;height:auto;margin:0 auto}
.p-layers__caption{margin-top:3.2rem;text-align:center;font-size:max(12px,1.9rem);font-weight:500;line-height:1.4;letter-spacing:.1em}
.p-layers__list{display:grid;grid-template-columns:repeat(3,22.65rem);gap:2.4rem;justify-content:center;margin-top:5.3rem}
.p-layers__item{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.p-layers__glyph{width:4rem;height:4rem;margin-bottom:.3rem}
.p-layers__kanji{font-size:4rem;font-weight:700;line-height:1}
.p-layers__stage-name{font-size:max(12px,1.8rem);font-weight:700;line-height:1.4}
.p-layers__tag{display:inline-flex;align-items:center;height:2.4rem;padding:0 1rem;border:1px solid var(--line);font-size:max(10px,1.2rem);font-weight:700;letter-spacing:.08em;line-height:1}
.p-layers__note{margin-top:7.3rem;text-align:center;font-size:max(12px,1.6rem);font-weight:500;line-height:1.9;color:#D6D6D6}

/* VISION（3つの層と SERVICE のあいだ。スポーツが、街の真ん中にある日本へ） */
.p-vision{padding:11.8rem 0 5.6rem;background:var(--white)}
.p-vision__inner{max-width:144rem;margin:0 auto;padding:0 12.7rem}
.p-vision__main{display:grid;grid-template-columns:minmax(0,1fr) 54rem;column-gap:6rem;align-items:center;margin-top:6.4rem}
.p-vision__title{font-size:6rem;font-weight:800;line-height:1.35;letter-spacing:.01em}
.p-vision__lead{margin-top:3.6rem;font-size:max(14px,2rem);font-weight:500;line-height:1.9;color:#3E3E3E}
.p-vision__map svg{width:100%;height:auto;overflow:visible}
.p-vision__cap{margin-top:1.6rem;text-align:right;font-size:max(11px,1.4rem);font-weight:500;line-height:1.6;letter-spacing:.06em;color:#555}
/* 地図の動き: 街が現れる → エリアの枠が引かれる → コートの赤い点がぽんと出る → 波紋が外へ */
.js .p-vision__map .blocks{opacity:0;transition:opacity 1s var(--e-out)}
.js .p-vision__map.is-in .blocks{opacity:1}
.js .p-vision__map .area{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--e-io) .5s}
.js .p-vision__map.is-in .area{stroke-dashoffset:0}
.js .p-vision__map .tab{opacity:0;transition:opacity .5s ease 1.8s}
.js .p-vision__map.is-in .tab{opacity:1}
.js .p-vision__map .hub{opacity:0;transition:opacity .6s ease .9s}
.js .p-vision__map.is-in .hub{opacity:1}
.p-vision__map .ball{transform-box:fill-box;transform-origin:center}
.js .p-vision__map .ball{transform:scale(0);transition:transform .6s var(--e-back) 1.5s}
.js .p-vision__map.is-in .ball{transform:none}
.p-vision__map .ring{transform-box:fill-box;transform-origin:center;opacity:.45}
.p-vision__map .ring2{opacity:.22}
.js .p-vision__map .ring{opacity:0;transform:scale(.9);transition:opacity .9s ease,transform 1.3s var(--e-out)}
.js .p-vision__map.is-in .ring1{opacity:.45;transform:none;transition-delay:2s}
.js .p-vision__map.is-in .ring2{opacity:.22;transform:none;transition-delay:2.4s}

.p-service{padding:11.8rem 0 12.4rem}
.p-service__inner{max-width:144rem;margin:0 auto;padding:0 12.7rem}
.p-service__lead{margin-top:4.3rem;font-size:4.8rem;font-weight:700;line-height:1.2;letter-spacing:0}

/* SERVICE の流れ: PLANNING → MARKETING → PR・PROMOTION（並んで進む）→ ACTION。パネルの間は、線と丸い矢印でつなぐ */
.p-flow{--gap:7.2rem;--bd:4.4rem;--rg:.2rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(19.4rem,1fr));column-gap:var(--gap);row-gap:var(--rg);margin-top:7.2rem}
.p-flow__step{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;padding:2.4rem 2.4rem 2.8rem;background:var(--g1)}
.p-flow__step--plan{grid-column:1;grid-row:1 / span 2}
.p-flow__step--mkt{grid-column:2;grid-row:1 / span 2}
.p-flow__step--pr{grid-column:3;grid-row:1}
.p-flow__step--promo{grid-column:3;grid-row:2}
.p-flow__step--act{grid-column:4;grid-row:1 / span 2;background:var(--black);color:var(--white)}
.p-flow__num{font-family:var(--en);font-size:max(11px,1.5rem);font-weight:500;line-height:1.2;letter-spacing:.04em;color:#555}
.p-flow__step--act .p-flow__num{color:var(--red)}
.p-flow__en{font-family:var(--en);font-size:max(15px,3rem);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.p-flow__ja{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-top:1rem;font-size:max(11px,1.4rem);font-weight:500;line-height:1.5;color:#3E3E3E}
.p-flow__step--act .p-flow__ja{color:#D6D6D6}
.p-flow__tag{display:inline-flex;align-items:center;height:2.4rem;padding:0 1rem;border:1px solid currentColor;font-size:max(10px,1.2rem);font-weight:700;letter-spacing:.06em;line-height:1;color:var(--black)}
.p-flow__step--act .p-flow__tag{color:var(--white)}
.p-flow__text{margin-top:1.8rem;font-size:max(12px,1.7rem);font-weight:700;line-height:1.6;word-break:auto-phrase;text-wrap:balance}
.p-flow__qs{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.6rem;margin-top:1.8rem}
.p-flow__step--plan .p-flow__text,.p-flow__step--act .p-flow__text,.p-flow__qs{min-height:10.8rem}   /* 背の高い3枚は、英字の名前の高さがそろうように、下の文の欄を同じ高さにする。MARKETING の4つの枠は3段に折り返すので、その高さ（3.2rem × 3 + すきま）に合わせる */
.p-flow__qs li{display:inline-flex;align-items:center;height:3.2rem;padding:0 1.2rem;background:var(--white);font-size:max(11px,1.4rem);font-weight:700;line-height:1}
.p-flow__go{position:absolute;top:50%;left:100%;display:block;width:var(--gap);height:var(--bd);margin-top:calc(var(--bd) / -2);pointer-events:none}
.p-flow__go::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--black)}
.p-flow__go::after{content:"";position:absolute;left:50%;top:0;width:var(--bd);height:var(--bd);margin-left:calc(var(--bd) / -2);border-radius:50%;background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5 L18 12 L9 17.5 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
/* 矢印は、パネル（li の .is-in）が現れたあとに、線が引かれ、丸い矢印がぽんと出る。--gd は、はじまるまでの秒数 */
.js .p-flow__go::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e-io) var(--gd,.4s)}
.js .p-flow__go::after{transform:scale(0);transition:transform .5s var(--e-back) calc(var(--gd,.4s) + .3s)}
.js .p-flow__step.is-in > .p-flow__go::before,.js .p-flow__step.is-in > .p-flow__go::after{transform:none}
.p-flow__go--a{top:calc((100% - var(--rg)) / 4)}
.p-flow__go--b{top:calc(100% - (100% - var(--rg)) / 4)}
@media (min-width:901px) and (max-width:1130px){   /* この幅は、文字の大きさが下限で止まる。補足の枠が名前の横に入るか下に落ちるかが、パネルごとにばらつくので、いつも下に置いて、英字の高さをそろえる */
  .p-flow__ja{flex-direction:column;align-items:flex-start}
}

.p-project{background:var(--black);color:var(--white);height:97rem;overflow:hidden}
.p-project__head{display:flex;align-items:flex-start;justify-content:space-between;padding:12.3rem 12.8rem 0}
.p-project__all{display:inline-flex;align-items:center;gap:1.9rem;margin-top:2.4rem;padding:0 1.9rem 1.7rem 2.4rem;border-bottom:2px solid var(--white);font-family:var(--en);font-size:max(12px,2.4rem);font-weight:600;line-height:1.3;letter-spacing:0}
.p-project__all svg{width:1.5rem;height:1.6rem;transition:transform .4s var(--e-out)}
.p-project__all:hover svg{transform:translateX(.6rem)}
.p-project__stage{position:relative;margin-top:6.9rem;height:54.8rem}
.p-project__ctrl{position:absolute;left:12.8rem;top:11.8rem;z-index:2;display:flex;flex-direction:column;gap:4rem}
.p-project__btn{display:flex;align-items:center;justify-content:center;width:6rem;height:13.6rem;background:var(--white);color:var(--black);transition:background-color .3s ease,transform .3s var(--e-out)}
.p-project__btn svg{width:2.4rem;height:2.4rem}
.p-project__btn:hover{background:var(--red);color:var(--white)}
.p-project__btn:active{transform:scale(.96)}
/* 2 列。左の列は上へ、右の列は下へ、同時に 1 枚ぶん動く（--y は JS が入れる位置: 0 = 見えている / ±1 = 画面の外の上下） */
.p-project__view{position:absolute;left:21.2rem;top:0;width:calc(100% - 21.2rem);height:100%;overflow:hidden}
.p-project__view.is-dragging,.p-project__view.is-dragging a{cursor:grabbing;user-select:none}
.p-project__slide{position:absolute;top:0;left:0;display:block;width:50%;height:100%;overflow:hidden;transform:translateY(calc(var(--y,0) * 100% + var(--drag,0px) * var(--m,1)));transition:transform .85s var(--e-io);will-change:transform}
.p-project__slide:nth-child(odd){--m:1}
.p-project__slide:nth-child(even){--m:-1;left:50%}
.p-project__view.is-dragging .p-project__slide{transition:none}
/* 仮置きの色（写真が入るまで）。1 組目はデザインどおり、2・3 組目は動きが見えるよう少し変える */
.p-project__slide:nth-child(1){background:var(--g1)}
.p-project__slide:nth-child(2){background:var(--g2)}
.p-project__slide:nth-child(3){background:#BEBEBE}
.p-project__slide:nth-child(4){background:#8C8C8C}
.p-project__slide:nth-child(5){background:#E9E9E9}
.p-project__slide:nth-child(6){background:#BABABA}
.p-project__slide:nth-child(n+7){background:var(--g1)}
html:not(.js) .p-project__slide:nth-child(n+3){display:none}
.p-project__cap{position:absolute;left:3rem;bottom:2.8rem;right:3rem;color:var(--black);font-size:max(13px,1.8rem);font-weight:700;line-height:1.6;opacity:0;transform:translateY(1rem);transition:opacity .4s ease,transform .4s var(--e-out)}
.p-project__slide:hover .p-project__cap,.p-project__slide:focus-visible .p-project__cap{opacity:1;transform:none}
/* 事例を公開するまでは COMING SOON */
.p-project--soon{height:62rem}
.p-project__soon{margin-top:10.8rem;padding:0 12.8rem;font-family:var(--en);font-size:12.8rem;font-weight:700;line-height:1;letter-spacing:-.01em}

/* CLIENTS: ロゴを並べるだけ（枠や台はなし。ロゴの画像は白い背景のまま、白いページに置く）。
   PC は 5 列・スマホは 3 列（--cols）。ロゴが列の数に満たない行は、左右中央に寄る。
   高さは中身しだい。ロゴの下の余白（23.6rem）は、元のデザイン（高さ 92.7rem・2 行）と同じ */
.p-clients{padding:19.4rem 0 23.6rem}
.p-clients__inner{max-width:144rem;margin:0 auto;padding:0 12.8rem}
.p-clients__grid{--cols:5;--gap:3.2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin-top:6.9rem}
.p-clients__item{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));aspect-ratio:360 / 232}
.p-clients__item img{width:100%;height:100%;object-fit:contain}   /* contain: 比率の違うロゴを足しても、欠けずに全体が収まる */

.p-weare{position:relative;display:grid;grid-template-columns:calc(var(--gx) + 57.3rem) 1fr;height:103.1rem}
.p-weare__lead{display:flex;align-items:center;padding-left:calc(var(--gx) + 12.8rem);background:var(--red);color:var(--white)}
.p-weare__body{padding:19.7rem calc(var(--gx) + 12rem) 0 10.7rem}
.p-weare__title{font-size:4.8rem;font-weight:700;line-height:1.2;letter-spacing:0}
.p-weare__title:lang(en){font-family:var(--en);letter-spacing:-.02em}   /* 見出しが英語の一文のときは、英字の書体（SERVICE などの英字名と同じ） */
.p-weare__text{margin-top:7.9rem;max-width:64rem;font-size:max(13px,2rem);font-weight:700;line-height:2.02;letter-spacing:0}
.p-weare__text p + p{margin-top:4rem}
.p-weare__sign{margin-top:4.2rem;margin-right:.3rem;text-align:right;font-family:var(--en);font-size:max(13px,2.4rem);font-weight:700}

/* ===== PROJECT 一覧 ===== */
.p-pj-head{display:grid;grid-template-columns:1fr 51.5rem;align-items:end;padding:51rem calc(var(--gx) + 9.8rem) 10.9rem calc(var(--gx) + 9.7rem)}
.p-pj-head__h1{font-size:5.8rem;font-weight:700;line-height:1.2}
.p-pj-head__text{margin-bottom:-.5rem}
.p-pj-head__lead{margin-top:2.4rem;max-width:64rem;font-size:max(14px,2rem);font-weight:500;line-height:2}
.p-pj-stage{margin-bottom:1.1rem}
.p-pj-stage__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;line-height:1}
.p-pj-stage__en{font-family:var(--en);font-size:1.4rem;font-weight:700;letter-spacing:.14em;color:#444}
.p-pj-stage__ja{font-size:1.4rem;font-weight:500;letter-spacing:.04em;color:#222}
.p-pj-stage__item{background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4px 1px;background-repeat:repeat-x;background-position:0 100%}
.p-pj-stage__item:first-child{background-image:none}
.p-pj-stage__btn{display:grid;grid-template-columns:5.6rem 1fr 1.5rem;align-items:center;column-gap:2.5rem;width:100%;height:8.4rem;padding:0 2rem 0 2rem;text-align:left;background:transparent;color:var(--black);transition:background-color .3s ease,color .3s ease}
.p-pj-stage__btn:hover{background-color:#F3F3F3}
.p-pj-stage__btn[aria-pressed="true"]{background:var(--black);color:var(--white)}
.p-pj-stage__glyph{display:flex;align-items:center;justify-content:center;height:4.8rem;transition:transform .5s var(--e-back)}
.p-pj-stage__btn:hover .p-pj-stage__glyph{transform:scale(1.12)}
.p-pj-stage__glyph svg{fill:currentColor}
.p-pj-stage__glyph--all svg{position:relative;top:.6rem}
.p-pj-stage__btn > span:nth-child(2){position:relative;top:.2rem}
.p-pj-stage__name{display:block;font-size:2.2rem;font-weight:700;line-height:1.3;letter-spacing:.02em}
.p-pj-stage__sub{display:block;margin-top:.4rem;font-size:1.4rem;font-weight:500;line-height:1.3;color:#444}
.p-pj-stage__btn[aria-pressed="true"] .p-pj-stage__sub{color:var(--mute)}
.p-pj-stage__arrow{width:1rem;height:1.3rem;fill:currentColor;opacity:0;transform:translateX(-.6rem);transition:opacity .3s,transform .4s var(--e-out)}
.p-pj-stage__btn[aria-pressed="true"] .p-pj-stage__arrow{opacity:1;transform:none}

.p-pj-list{padding:0 calc(var(--gx) + 4.9rem) 0 calc(var(--gx) + 8.1rem)}
.p-pj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.2rem;row-gap:3.2rem;max-width:131rem}
.p-pj-card{display:block;transition:opacity .35s ease,transform .45s var(--e-out)}
.p-pj-card.is-out{opacity:0;transform:scale(.96)}
.p-pj-card__link{display:block}
.p-pj-card__img{position:relative;height:48.7rem;overflow:hidden;background:var(--g1)}
.p-pj-card__img::after{content:"";position:absolute;inset:0;background:var(--g2);opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform .9s var(--e-out)}
.p-pj-card__link:hover .p-pj-card__img::after{opacity:.35;transform:none}
.p-pj-card__tags{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:3.2rem}
.p-pj-chip{display:inline-flex;align-items:center;height:4.6rem;padding:0 2rem;border:2px solid var(--black);font-family:var(--en);font-size:1.6rem;font-weight:600;line-height:1;white-space:nowrap}
.p-pj-chip--stage{gap:1.1rem;padding:0 2.2rem 0 2rem;border:0;background:var(--black);color:var(--white);font-family:var(--jp);font-size:1.5rem;font-weight:700;letter-spacing:0}
.p-pj-chip--stage svg{width:2.2rem;height:2.2rem}
.p-pj-card__title{margin-top:3rem;font-size:2.8rem;font-weight:700;line-height:1.3;text-wrap:balance;background:linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;transition:background-size .6s var(--e-out)}
.p-pj-card__link:hover .p-pj-card__title{background-size:100% 2px}
.p-pj-empty{padding:6rem 0;font-size:max(14px,2rem);font-weight:500;color:var(--sub)}
.p-pj-head--soon{padding-bottom:12rem}
.p-pj-soon{padding:0 calc(var(--gx) + 9.7rem) 6rem}
.p-pj-soon__text{font-family:var(--en);font-size:12.8rem;font-weight:700;line-height:1;letter-spacing:-.01em}

/* ===== PROJECT 詳細 ===== */
.p-dt-head{padding:22.1rem calc(var(--gx) + 8.1rem) 0}
.p-dt-back{display:inline-flex;align-items:center;gap:1.6rem;font-family:var(--en);font-size:2rem;font-weight:500;line-height:1;letter-spacing:.01em;color:var(--line);transition:color .3s}
.p-dt-back svg{width:1.8rem;height:2rem;fill:currentColor;transition:transform .45s var(--e-out)}
.p-dt-back:hover{color:var(--black)}
.p-dt-back:hover svg{transform:translateX(-.6rem)}
.p-dt-tags{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:8.9rem}
.p-dt-h1{margin-top:3.2rem;font-size:5.8rem;font-weight:700;line-height:1.2}
.p-dt-lead{margin-top:2.4rem;max-width:64rem;font-size:max(14px,2rem);font-weight:500;line-height:2}
.p-dt-hero{position:relative;height:63.6rem;margin:5.6rem calc(var(--gx) + 8.1rem) 0;background:var(--g1)}
.p-dt-body{max-width:89.2rem;margin-left:calc(var(--gx) + 29rem);padding-top:8.7rem}
.p-dt-meta{display:grid;grid-template-columns:23.7rem 52.1rem 1fr;line-height:1}
.p-dt-meta dt{font-family:var(--en);font-size:1.1rem;font-weight:500;letter-spacing:.08em;color:var(--line)}
.p-dt-meta dd{margin-top:1.6rem;font-size:2rem;font-weight:500;line-height:1.3}
.p-dt-block{padding:3.9rem 0 3.9rem;border-bottom:2px solid #C6C6C6}
.p-dt-block:first-of-type{padding-top:14.1rem}
.p-dt-block--last{border-bottom:0}
.p-dt-block__en{font-family:var(--en);font-size:6rem;font-weight:700;line-height:1;letter-spacing:0}
.p-dt-block__ja{margin-top:.5rem;font-size:max(13px,2rem);font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--line)}
.p-dt-block__p{margin-top:3.1rem;max-width:86rem;font-size:max(13px,1.6rem);font-weight:500;line-height:2}
.p-dt-works{display:grid;grid-template-columns:repeat(2,1fr);gap:3.2rem;margin-top:3.9rem}
.p-dt-works__item{position:relative;height:48.7rem;background:var(--g1)}
.p-dt-credit{display:grid;grid-template-columns:21rem 1fr;align-items:start;padding:13.7rem 0 0}
.p-dt-credit__en{font-family:var(--en);font-size:4rem;font-weight:700;line-height:1}
.p-dt-credit__ja{margin-top:1.2rem;font-size:max(12px,1.6rem);font-weight:500;line-height:1.4;color:var(--line)}
.p-dt-credit dl{display:grid;grid-template-columns:17.8rem 1fr;row-gap:2rem}
.p-dt-credit dt{font-family:var(--en);font-size:1.4rem;font-weight:500;letter-spacing:.08em;line-height:2.2rem;color:var(--line)}
.p-dt-credit dd{font-family:var(--en);font-size:2rem;font-weight:500;line-height:2.2rem}
.p-dt-nav{display:grid;grid-template-columns:1fr 1fr;height:20.2rem;margin-top:13.6rem;background:var(--black);color:var(--white)}
.p-dt-nav__side{position:relative;display:flex;align-items:center;padding:.7rem 0 0 14.9rem;overflow:hidden}
.p-dt-nav__side--next{background:#8D8D8D;padding:.7rem 0 0 14rem}
.p-dt-nav__side::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .5s var(--e-io)}
.p-dt-nav__side:hover::before{transform:translateY(0)}
.p-dt-nav__side > *{position:relative}
.p-dt-nav__dir{display:inline-flex;align-items:center;gap:2.4rem;min-width:8.1rem;font-family:var(--en);font-size:1.6rem;font-weight:500;letter-spacing:.04em}
.p-dt-nav__side:not(.p-dt-nav__side--next) .p-dt-nav__dir{gap:1.9rem}
.p-dt-nav__dir svg{width:1.2rem;height:1.2rem;fill:currentColor;transition:transform .45s var(--e-out)}
.p-dt-nav__side:hover .p-dt-nav__dir svg{transform:translateX(-.4rem)}
.p-dt-nav__side--next:hover .p-dt-nav__dir svg{transform:translateX(.4rem)}
.p-dt-nav__rule{flex:none;width:2px;height:5.9rem;background:rgba(255,255,255,.75)}
.p-dt-nav__side:not(.p-dt-nav__side--next) .p-dt-nav__rule{margin:0 2.1rem 0 3.7rem}
.p-dt-nav__side--next .p-dt-nav__rule{margin:0 4.1rem 0 2rem}
.p-dt-nav__side--next .p-dt-nav__dir{min-width:0}
.p-dt-nav__title{flex:none;width:29rem;font-size:max(12px,1.6rem);font-weight:600;line-height:1.5}
.p-dt-nav__all{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:10.6rem;height:10.6rem;border:1px solid var(--black);border-radius:50%;background:var(--white);color:var(--black);transform:translate(-50%,-50%);font-family:var(--en);font-size:1.3rem;font-weight:700;line-height:1.3;text-align:center;transition:transform .5s var(--e-back),background-color .3s,color .3s}
.p-dt-nav__all:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--black);color:var(--white)}
.p-dt-nav{position:relative}
.p-dt-after{background:var(--white)}

/* ===== CONTACT ===== */
.p-ct{padding:61rem calc(var(--gx) + 9.7rem) 14.8rem}
.p-ct__h1{margin-left:.15rem;font-size:5.7rem;font-weight:700;line-height:1.21}
.p-ct__sub{margin-top:3.1rem;font-size:max(14px,2rem);font-weight:500;line-height:1.4}
.p-steps{display:flex;align-items:center;justify-content:center;margin-top:10.6rem}
.p-steps__item{display:flex;align-items:center;justify-content:center;flex:none;width:8rem;height:8rem;border:2px solid var(--black);border-radius:50%;background:var(--white);color:var(--black);font-size:1.5rem;font-weight:700;letter-spacing:0;transition:background-color .45s var(--e-out),color .45s var(--e-out)}
.p-steps__item.is-current{background:var(--black);color:var(--white)}
.p-steps__item.is-done{position:relative;font-size:0}
.p-steps__item.is-done::after{content:"";width:2.2rem;height:1.2rem;border-left:3px solid var(--black);border-bottom:3px solid var(--black);transform:translate(0,-.3rem) rotate(-45deg)}
.p-steps__line{flex:none;width:5.8rem;height:2px;margin:0 2.1rem;background:var(--black)}
/* フォームは幅 80rem の 1 列を、中央に */
.p-form{max-width:80rem;margin:5.6rem auto 0}
.p-form__view{opacity:0;transform:translateY(1.6rem);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.p-form__view.is-in{opacity:1;transform:none}
.p-form__field{position:relative;display:block}
.p-form__field + .p-form__field{margin-top:4.9rem}
.p-form__label{display:block;margin-bottom:.7rem;font-size:max(14px,2rem);font-weight:500;line-height:1.4;font-kerning:none}
.p-form__req{position:relative;top:.2rem;color:var(--red);font-weight:800}
.p-form__hint{color:#BABABA}
.p-form__field input,.p-form__field textarea{display:block;width:100%;height:9.6rem;padding:0 2rem;border:2px solid var(--black);border-radius:0;background:var(--white);font-size:max(14px,2rem);font-weight:500;line-height:1.5;outline:none;appearance:none;transition:box-shadow .25s ease,border-color .25s ease}
.p-form__field textarea{height:44.6rem;padding:2rem;resize:none}
.p-form__field input:focus,.p-form__field textarea:focus{box-shadow:inset 0 0 0 2px var(--black)}
.p-form__field.is-error input,.p-form__field.is-error textarea{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.p-form__err{position:absolute;left:0;top:calc(100% + .7rem);font-size:max(12px,1.4rem);font-weight:700;line-height:1.4;color:var(--red)}
.p-form__agree{position:relative;display:flex;align-items:center;width:fit-content;gap:1.2rem;margin:6.6rem auto 0;font-size:max(14px,2rem);font-weight:500;line-height:1.4;cursor:pointer}
.p-form__agree input{position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;margin:0;opacity:0;cursor:pointer}
.p-form__box{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border:2px solid var(--black);background:var(--white);transition:background-color .25s ease}
.p-form__box::after{content:"";width:1.2rem;height:.6rem;margin-top:-.2rem;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg) scale(0);transition:transform .3s var(--e-back)}
.p-form__agree input:checked + .p-form__box{background:var(--black)}
.p-form__agree input:checked + .p-form__box::after{transform:rotate(-45deg) scale(1)}
.p-form__agree input:focus-visible + .p-form__box{outline:2px solid var(--red);outline-offset:3px}
.p-form__agree .p-form__err{left:50%;top:calc(100% + .4rem);white-space:nowrap;transform:translateX(-50%)}
.p-form__agree.is-error .p-form__box{border-color:var(--red)}
.p-form__center{display:flex;justify-content:center}
.p-form__actions{display:flex;justify-content:center;gap:2rem;margin-top:3.6rem}
.p-form__btn{display:inline-flex;align-items:center;justify-content:center;width:26rem;height:6rem;border:2px solid var(--black);background:var(--black);color:var(--white);font-size:max(14px,1.9rem);font-weight:500;letter-spacing:.04em;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.p-form__btn:hover{background:var(--red);border-color:var(--red)}
.p-form__btn--ghost{background:var(--white);color:var(--black)}
.p-form__btn--ghost:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.p-form__actions .p-form__btn{margin-top:0}
.p-form__view[data-view="input"] .p-form__btn{margin-top:3.4rem}
.p-confirm{display:block}
.p-confirm__row{padding:2rem 0 2.4rem;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4px 1px;background-repeat:repeat-x;background-position:0 100%}
.p-confirm__row:first-child{background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4px 1px,4px 1px;background-repeat:repeat-x,repeat-x;background-position:0 0,0 100%}
.p-confirm dt{font-size:max(12px,1.4rem);font-weight:500;line-height:1.4;color:var(--line)}
.p-confirm dd{margin-top:.8rem;font-size:max(14px,2rem);font-weight:500;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.p-confirm__note{margin-top:3.2rem;font-size:max(12px,1.4rem);font-weight:500;line-height:1.8;color:var(--sub);text-align:center}
.p-done{text-align:center}
.p-done__h{font-size:4.4rem;font-weight:700;line-height:1.3}
.p-done__p{margin-top:2.8rem;font-size:max(14px,2rem);font-weight:500;line-height:2}
.p-done__note{margin-top:2rem;font-size:max(12px,1.4rem);font-weight:500;line-height:1.8;color:var(--sub)}
.p-done .p-form__btn{margin-top:4.8rem}
html:not(.js) .p-form__view{opacity:1;transform:none}
.p-form__link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .3s ease}
.p-form__link:hover{color:var(--red)}
.p-ct--nosub .p-steps{margin-top:16.5rem}                 /* 確認・完了のページには、見出しの下の一文がないので、丸の位置が入力のページとそろうように */

/* ===== 404 ===== */
.p-nf{padding:61rem calc(var(--gx) + 9.7rem) 24rem}
.p-nf__h1{margin-left:.15rem;font-size:5.7rem;font-weight:700;line-height:1.21;text-wrap:balance;word-break:auto-phrase}
.p-nf__btn{margin-top:6.4rem}

/* ===== プライバシーポリシー ===== */
.p-pv{padding:61rem calc(var(--gx) + 9.7rem) 14.8rem}
.p-pv__h1{margin-left:.15rem;font-size:5.7rem;font-weight:700;line-height:1.21}
.p-pv__meta{display:flex;flex-wrap:wrap;gap:.6rem 3.2rem;margin:3.1rem 0 0 .15rem;font-size:max(12px,1.4rem);font-weight:500;line-height:1.4;color:var(--sub)}
.p-pv__body{margin-top:8rem}
.p-pv__block{display:grid;grid-template-columns:36rem minmax(0,64rem);gap:4rem;padding:4.4rem 0 4.8rem;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4px 1px;background-repeat:repeat-x;background-position:0 100%}
.p-pv__block:first-child{background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:4px 1px,4px 1px;background-repeat:repeat-x,repeat-x;background-position:0 0,0 100%}
.p-pv__no{display:block;font-family:var(--en);font-size:max(12px,1.4rem);font-weight:700;line-height:1;letter-spacing:.08em;color:var(--line)}
.p-pv__h2{margin-top:1.2rem;font-size:2.4rem;font-weight:700;line-height:1.5;word-break:auto-phrase}
.p-pv__text p,.p-pv__text li{font-size:max(14px,1.6rem);font-weight:500;line-height:2;word-break:auto-phrase;text-wrap:pretty}
.p-pv__text p + p{margin-top:1.4rem}
.p-pv__block--facts .p-pv__text p + p{margin-top:.2rem}
.p-pv__text ul{margin-top:1.2rem}
.p-pv__text li{position:relative;padding-left:1.8rem}
.p-pv__text li::before{content:"";position:absolute;left:.2rem;top:calc(1em - .25rem);width:.5rem;height:.5rem;border-radius:50%;background:var(--black)}
.p-pv__text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .3s ease}
.p-pv__text a:hover{color:var(--red)}

/* ===== WordPress で、投稿した画像を入れる所（HTML の試作では、灰色の仮置き） ===== */
.p-project__slide img,.p-pj-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-dt-hero img,.p-dt-works__item img{display:block;width:100%;height:100%;object-fit:cover}
/* 人には見えない欄（迷惑な自動送信よけ） */
.u-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 送信に失敗したときの文（WordPress のテーマだけ） */
.p-confirm__fail{margin-top:2.4rem;font-size:max(12px,1.4rem);font-weight:700;line-height:1.6;text-align:center;color:var(--red)}

/* ヒーローの文字（読み込み時に下から） */
.js [data-hero-line]{opacity:0;transform:translateY(2.4rem);animation:hero-in 1.1s var(--e-out) var(--d,0s) both}
@keyframes hero-in{to{opacity:1;transform:none}}

/* 3つの層: 見えたら、点 → 線 → 面 の順に P. が組み上がる */
/* P.（点・線・面）は、手書き風の SVG（assets/img/layers-hand.svg）を、見えたときに読み込んで再生する（約7秒）。
   赤い点を打つ(〜2.4秒) → 点と点を結んで線にする(〜4.6秒) → 線をたくさん重ねて面にする(〜6.4秒)。下の項目と説明は、この時刻に合わせて点く。
   SVG の時刻（各要素の style の animation の遅れ）を変えたら、下の秒数もそろえる */
.js .p-layers__sym{visibility:hidden}
.js .p-layers__sym.is-ready{visibility:visible}
.js .p-layers:not(.is-in) .sy-item1,.js .p-layers:not(.is-in) .sy-item2,.js .p-layers:not(.is-in) .sy-item3{opacity:.5}
.js .p-layers:not(.is-in) .sy-caption{opacity:0}
.js .p-layers.is-in .sy-item1{animation:sy-item .5s ease 2.3s both}
.js .p-layers.is-in .sy-item2{animation:sy-item .5s ease 4.6s both}
.js .p-layers.is-in .sy-item3{animation:sy-item .5s ease 6.3s both}
.js .p-layers.is-in .sy-caption{animation:sy-cap .7s var(--e-out) 7s both}
@keyframes sy-item{from{opacity:.5}to{opacity:1}}
@keyframes sy-cap{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}

/* ===== スマホ ===== */
@media (max-width:900px){
  html{font-size:min(calc(100vw / 39),12px)}
  body{font-size:1.5rem;line-height:1.9}
  .l-main,.l-inner,.l-header{max-width:64rem}
  .l-header{height:11rem}
  .l-header__logo{left:2rem;top:2rem;width:8.4rem;height:6rem}
  .c-menu-btn{top:2rem;right:calc((100vw - 39rem) / 2 * 0 + 1.6rem);width:4.4rem}
  .c-vlabel{position:static;writing-mode:horizontal-tb;margin:0 0 1.6rem;font-size:3.6rem;letter-spacing:-.01em}
  .c-label{font-size:4.8rem}
  .c-cta{padding:7.2rem 2rem 9rem}
  .c-cta__bar{height:10rem;padding:0 2.4rem}
  .c-cta__text{font-size:3.2rem}
  .c-cta__body{gap:.6rem}
  .c-cta__lead{font-size:1.2rem}
  .c-cta__circle{width:5.6rem;height:5.6rem}
  .c-cta__circle svg{width:2rem;height:2rem}
  .l-footer__inner{display:block;height:auto;padding:6.4rem 2rem 4rem}
  .l-footer__logo{width:100%;max-width:30rem}
  .l-footer__sub{font-size:1.1rem}
  .l-footer__nav{margin-top:4rem}
  .l-footer__nav a{font-size:3.2rem}
  .l-footer__meta{margin-top:4rem;padding:0;text-align:left;font-size:1.2rem}
  .l-footer__meta a{margin-bottom:1.6rem}
  .c-menu__nav{left:2.4rem;top:11rem}
  .c-menu__nav a{font-size:5.4rem;padding:1.2rem 0 1rem}
  .c-menu__privacy{left:2.4rem;bottom:3rem;font-size:1.2rem}
  .c-menu__poster{left:auto;right:2.4rem;top:auto;bottom:8rem;width:15rem;height:26.4rem}
  .c-menu__poster img{left:.4rem;top:.56rem;width:13.6rem}

  .p-hero{height:auto;padding:13rem 2rem 6rem}
  .p-hero__title,.p-hero__lead,.p-hero__poster{position:static}
  .p-hero__title{font-size:3.2rem;line-height:1.4}
  .p-hero__lead{margin-top:2rem;font-size:1.8rem}
  .p-hero__poster{width:min(32rem,calc((100vh - 18rem) * .5479));height:auto;margin:4rem auto 0}   /* 縦が短い画面でも、ポスターが画面の高さを超えない */
  .p-layers{height:auto;padding:8rem 0 6.4rem}
  .p-layers__head{padding:0 2rem}
  .p-layers__title{font-size:3.2rem;text-wrap:balance}
  .p-layers__sub{font-size:1.5rem}
  .p-layers__stage{margin-top:5.6rem}
  .p-layers__sym{width:calc(100% - 4rem);max-width:34rem}
  .p-layers__caption{font-size:1.4rem}
  .p-layers__list{grid-template-columns:repeat(3,1fr);gap:.8rem;margin:3.6rem 2rem 0}
  .p-layers__kanji{font-size:3.2rem}
  .p-layers__stage-name{font-size:1.4rem}
  .p-layers__note{margin-top:4.8rem;padding:0 2rem;font-size:1.4rem}
  .p-vision{padding:7.2rem 0 3.2rem}
  .p-vision__inner{padding:0 2rem}
  .p-vision__main{display:block;margin-top:3.2rem}
  .p-vision__title{font-size:3.6rem;line-height:1.4}
  .p-vision__lead{margin-top:2.4rem;font-size:1.5rem}
  .p-vision__map{margin-top:4rem}
  .p-vision__cap{font-size:1.2rem}
  .p-service{padding:7.2rem 0 8rem}
  .p-service__inner{padding:0 2rem}
  .c-label{font-size:4.8rem}
  .p-service__lead{font-size:2.4rem}
  /* 流れ: 上から下へ。PR と PROMOTION は、横に並べたまま */
  .p-flow{--gap:5.6rem;--bd:3.6rem;--cg:1.2rem;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;column-gap:var(--cg);row-gap:var(--gap);margin-top:4rem}
  .p-flow__step{justify-content:flex-start;gap:2rem;padding:1.8rem 1.6rem 2rem}
  .p-flow__step--plan,.p-flow__step--mkt,.p-flow__step--act{grid-column:1 / -1;grid-row:auto}
  .p-flow__step--pr{grid-column:1;grid-row:auto}
  .p-flow__step--promo{grid-column:2;grid-row:auto}
  .p-flow__en{font-size:2.8rem}
  .p-flow__step--pr .p-flow__en,.p-flow__step--promo .p-flow__en{font-size:2.1rem}
  .p-flow__ja{margin-top:.8rem;font-size:1.3rem}
  .p-flow__text{margin-top:1.4rem;font-size:1.5rem}
  .p-flow__qs{margin-top:1.4rem}
  .p-flow__step--plan .p-flow__text,.p-flow__step--act .p-flow__text,.p-flow__qs{min-height:0}
  .p-flow__go{top:100%;left:50%;width:var(--bd);height:var(--gap);margin:0 0 0 calc(var(--bd) / -2)}
  .p-flow__go::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}
  .p-flow__go::after{left:0;top:50%;margin:calc(var(--bd) / -2) 0 0;transform:rotate(90deg)}
  .p-flow__go--a{top:100%;left:calc((100% - var(--cg)) / 4)}
  .p-flow__go--b{top:100%;left:calc(100% - (100% - var(--cg)) / 4)}
  .js .p-flow__go::before{transform:scaleY(0);transform-origin:50% 0}
  .js .p-flow__go::after{transform:scale(0) rotate(90deg)}
  .js .p-flow__step.is-in > .p-flow__go::after{transform:rotate(90deg)}
  .p-project{height:auto;padding-bottom:6.4rem}
  .p-project__head{padding:7.2rem 2rem 0}
  .p-project__all{margin-top:.8rem;font-size:1.3rem}
  .p-project__stage{height:auto;margin-top:3.6rem;padding:0 0 0 2rem}
  .p-project--soon{height:auto}
  .p-project__soon{margin-top:3.6rem;padding:0 2rem;font-size:4.4rem}
  .p-project__ctrl{position:static;flex-direction:row;gap:1.2rem;margin-bottom:1.6rem}
  .p-project__btn{width:5.6rem;height:5.6rem}
  .p-project__btn svg{transform:rotate(-90deg)}                       /* ▲ → ◀、▼ → ▶ */
  /* スマホは上下 2 段。上の段は左へ、下の段は右へ動く（--y は JS が入れる位置: 0 = 見えている / ±1 = 画面の外の左右） */
  .p-project__view{position:relative;left:auto;top:auto;width:100%;height:40rem;touch-action:pan-y}
  .p-project__slide{width:100%;height:50%;transform:translateX(calc(var(--y,0) * 100% + var(--drag,0px) * var(--m,1)))}
  .p-project__slide:nth-child(odd){top:0;left:0}
  .p-project__slide:nth-child(even){top:50%;left:0}
  .p-project__cap{left:1.6rem;right:1.6rem;bottom:1.6rem;font-size:1.4rem;opacity:1;transform:none}
  .p-clients{padding:7.2rem 0 8rem}
  .p-clients__inner{padding:0 2rem}
  .p-clients__grid{--cols:3;--gap:1.2rem;margin-top:3.2rem}
  .p-weare{display:block;height:auto}
  .p-weare__lead{padding:5.6rem 2rem}
  .p-weare__body{padding:5.6rem 2rem 6.4rem}
  .p-weare__title{font-size:2.6rem}
  .p-weare__text{margin-top:3.2rem;font-size:1.5rem}
  .p-weare__text p + p{margin-top:2.4rem}
  .p-weare__sign{margin-top:3.2rem;font-size:1.5rem}
}

/* ===== スマホ（下層ページ） ===== */
@media (max-width:900px){
  :root{--gx:0px}
  .c-vlabel{display:block;padding:11.6rem 2rem 0;font-size:2.4rem;letter-spacing:.12em}
  .p-service__lead{font-size:2.2rem}
  .p-project__head{align-items:center}
  .p-project__head .c-label{font-size:4rem}
  .p-project__all{margin-top:0;padding:0 1rem .6rem 1.2rem;font-size:1.4rem;white-space:nowrap}
  .p-project__all svg{width:1rem;height:1.1rem}

  /* PROJECT 一覧 */
  .p-pj-head{display:block;padding:2.8rem 2rem 4.8rem}
  .p-pj-head__text{margin-bottom:0}
  .p-pj-head__h1{font-size:3rem;line-height:1.35}
  .p-pj-head__lead{margin-top:2rem;font-size:1.5rem}
  .p-pj-stage{margin:4rem 0 0}
  .p-pj-stage__btn{grid-template-columns:4.8rem 1fr 1.5rem;column-gap:1.6rem;height:7.2rem;padding:0 1.6rem}
  .p-pj-stage__name{font-size:1.9rem}
  .p-pj-stage__glyph svg{transform:scale(.8)}
  .p-pj-list{padding:0 2rem}
  .p-pj-grid{grid-template-columns:1fr;row-gap:4.8rem}
  .p-pj-head--soon{padding-bottom:6.4rem}
  .p-pj-soon{padding:0 2rem 2rem}
  .p-pj-soon__text{font-size:4.4rem}
  .p-pj-card__img{height:auto;aspect-ratio:639 / 487}
  .p-pj-card__tags{gap:.8rem;margin-top:1.8rem}
  .p-pj-chip{height:3.4rem;padding:0 1.2rem;border-width:1.5px;font-size:1.2rem}
  .p-pj-chip--stage{gap:.8rem;padding:0 1.4rem 0 1.2rem;font-size:1.2rem}
  .p-pj-chip--stage svg{width:1.6rem;height:1.6rem}
  .p-pj-card__title{margin-top:1.6rem;font-size:2rem;text-wrap:balance}
  .is-project .c-cta,.is-detail .c-cta{padding-top:7.2rem}

  /* PROJECT 詳細 */
  .p-dt-head{padding:11.2rem 2rem 0}
  .p-dt-back{font-size:1.5rem;gap:1rem}
  .p-dt-back svg{width:1.2rem;height:1.4rem}
  .p-dt-tags{gap:.8rem;margin-top:3.2rem}
  .p-dt-h1{margin-top:2rem;font-size:2.8rem;line-height:1.35;text-wrap:balance}
  .p-dt-lead{margin-top:1.6rem;font-size:1.5rem}
  .p-dt-hero{height:auto;aspect-ratio:1278 / 636;margin:3.2rem 2rem 0}
  .p-dt-body{max-width:none;margin:0 2rem;padding-top:4.8rem}
  .p-dt-meta{grid-template-columns:1fr;row-gap:2rem}
  .p-dt-meta dd{margin-top:.8rem;font-size:1.6rem}
  .p-dt-block{padding:3.6rem 0}
  .p-dt-block:first-of-type{padding-top:6rem}
  .p-dt-block__en{font-size:4.4rem}
  .p-dt-block__ja{margin-top:.6rem;font-size:1.5rem}
  .p-dt-block__p{margin-top:2rem;font-size:1.5rem}
  .p-dt-works{gap:1.2rem;margin-top:2.4rem}
  .p-dt-works__item{height:auto;aspect-ratio:430 / 487}
  .p-dt-credit{grid-template-columns:1fr;row-gap:2.4rem;padding-top:6rem}
  .p-dt-credit__en{font-size:3.2rem}
  .p-dt-credit dl{grid-template-columns:11rem 1fr}
  .p-dt-credit dd{font-size:1.6rem}
  .p-dt-nav{grid-template-columns:1fr;height:auto;margin-top:7.2rem}
  .p-dt-nav__side,.p-dt-nav__side--next{padding:3.6rem 2rem;min-height:12.4rem}
  .p-dt-nav__side--next{flex-direction:row-reverse;justify-content:flex-end}
  .p-dt-nav__dir{min-width:0}
  .p-dt-nav__side:not(.p-dt-nav__side--next) .p-dt-nav__rule{margin:0 1.6rem 0 1.6rem}
  .p-dt-nav__side--next .p-dt-nav__rule{margin:0 1.6rem}
  .p-dt-nav__title{width:auto;flex:1;max-width:none;font-size:1.3rem}
  .p-dt-nav__all{width:8.4rem;height:8.4rem;font-size:1.1rem}

  /* CONTACT */
  .p-ct{padding:2.8rem 2rem 8rem}
  .p-ct__h1{font-size:3rem;line-height:1.35}
  .p-ct__sub{margin-top:1.6rem;font-size:1.5rem}
  .p-steps{margin-top:3.2rem}
  .p-steps__item{width:5.6rem;height:5.6rem;font-size:1.3rem}
  .p-steps__line{width:3.2rem;margin:0 1.2rem}
  .p-form{margin-top:3.6rem}
  .p-form__field + .p-form__field{margin-top:3.6rem}
  .p-form__label{font-size:1.5rem}
  .p-form__field input,.p-form__field textarea{height:6.4rem;padding:0 1.4rem;font-size:1.6rem}
  .p-form__field textarea{height:22rem;padding:1.4rem}
  .p-form__agree{margin-top:5.2rem;font-size:1.5rem}
  .p-form__view[data-view="input"] .p-form__btn{margin-top:3.2rem}
  .p-form__btn{width:100%;height:5.6rem;font-size:1.6rem}
  .p-form__actions{flex-direction:column;gap:1.2rem}
  .p-confirm__row{padding:1.6rem 0 2rem}
  .p-done__h{font-size:3rem}
  .p-done__p{font-size:1.5rem}
  .p-done .p-form__btn{width:100%}
  .p-ct--nosub .p-steps{margin-top:6.9rem}

  /* 404・プライバシーポリシー */
  .p-nf{padding:2.8rem 2rem 10rem}
  .p-nf__h1{font-size:3rem;line-height:1.35}
  .p-nf__btn{margin-top:4rem}
  .p-pv{padding:2.8rem 2rem 8rem}
  .p-pv__h1{font-size:3rem;line-height:1.35}
  .p-pv__meta{gap:.4rem 2rem;margin-top:1.6rem;font-size:1.3rem}
  .p-pv__body{margin-top:4rem}
  .p-pv__block{display:block;padding:3.2rem 0 3.6rem}
  .p-pv__h2{margin-top:.8rem;font-size:2rem}
  .p-pv__text{margin-top:1.6rem}
  .p-pv__text p,.p-pv__text li{font-size:1.5rem}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js [data-reveal="mask"] > .u-line{transform:none;transition:none}
  .js [data-reveal="wipe"]::after{display:none}
  .js [data-hero-line]{opacity:1;transform:none;animation:none}
  .js .p-layers .sy-item1,.js .p-layers .sy-item2,.js .p-layers .sy-item3,.js .p-layers .sy-caption{opacity:1;transform:none;animation:none}
  .js .p-flow__go::before,.js .p-flow__go::after{transition:none}
  .js .p-vision__map .blocks,.js .p-vision__map .area,.js .p-vision__map .tab,.js .p-vision__map .hub,.js .p-vision__map .ball,.js .p-vision__map .ring{transition:none}
  .p-project__slide,.c-menu,.c-menu__nav a,.c-menu__poster{transition:none}
}