@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300..600&family=Noto+Sans+JP:wght@400;500&display=swap");
/* 案 1 ロゴの文法でそろえる（案 4 の土台にもなるので、セレクタは data-tyb="1"）。名前の書体（P02 = Jost 430 の大文字、字の間 0.127em）を見出しとヘッダーにも広げる。
   大きな字は名前と日本語の見出しの 2 つだけ。書体は Jost、Noto Sans JP、Geist Mono（時刻と番号と札）の 3 つ */

html[data-tyb="1"]{
  --f-disp:"Jost","Noto Sans JP",sans-serif;
  --f-grot:"Jost","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-jpd:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  /* P02 を左右の余白の内側いっぱいに: インクの幅は大きさの 6.4253 倍（字の間を足したあと） */
  --fs-mega:calc((100vw - 2 * var(--pad)) / 6.4253);
  --p02-ls:.127em;
}
html[data-tyb="1"] body{letter-spacing:.04em;font-feature-settings:"palt"}

/* ---------- ヘッダー: 12 列の格子の列の頭に、名前・肩書き・ナビ・時刻。大きさは 15px にそろえ、役割は大文字と色で分ける ---------- */
html[data-tyb="1"] .top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:18px var(--pad) 0;min-height:72px}
html[data-tyb="1"] .top>*{line-height:36px;white-space:nowrap}
html[data-tyb="1"] .top__brand{grid-column:1/4;justify-self:start;font-family:"Jost",sans-serif;font-weight:430;font-size:15px;letter-spacing:var(--p02-ls);text-transform:uppercase}
html[data-tyb="1"] .top__studio{grid-column:4/7;font-family:"Jost",sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em;color:var(--mid)}
html[data-tyb="1"] .top__nav{grid-column:7/10;margin:0;gap:0;font-family:"Jost",sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em}
html[data-tyb="1"] .top__nav a:not(:last-child)::before{content:",";position:absolute;right:-.32em;bottom:0;left:auto;height:auto;background:none;transform:none}
html[data-tyb="1"] .top__nav a{margin-right:.55em}
html[data-tyb="1"] .top__clock{display:block;grid-column:10/12;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--mid)}
html[data-tyb="1"] .top__clock b{font-weight:500;color:var(--ink)}
html[data-tyb="1"] .menubtn-spacer{display:none}
html[data-tyb="1"] .menubtn{font-family:"Jost",sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em}
html[data-tyb="1"] .menu__close{font-family:"Jost",sans-serif;font-weight:400;font-size:15px;letter-spacing:.01em}
html[data-tyb="1"] .menu__top>span:first-child{font-family:"Jost",sans-serif;font-weight:430;font-size:15px;letter-spacing:var(--p02-ls);text-transform:uppercase}
@media (max-width:760px){
  /* スマホ: 四隅の十字（上の端から 10〜32px）に字がかからないよう、字の中心を 40px に下げ、Menu の箱も同じ中心にそろえる */
  html[data-tyb="1"] .top{grid-template-columns:auto 1fr;padding-top:22px}
  html[data-tyb="1"] .menubtn{top:18px}
  html[data-tyb="1"] .top__brand{grid-column:1}
  html[data-tyb="1"] .top__clock{grid-column:2;justify-self:end;margin-right:96px}
}

/* ---------- 最初の画面 ---------- */
/* 英語の大見出しは PC ではヘッダーにあるので見せない。スマホはヘッダーに肩書きがないので、小さく残す */
html[data-tyb="1"] .fv__studio{display:none}
html[data-tyb="1"] .fv__label,html[data-tyb="1"] .fv__meta{display:none}
html[data-tyb="1"] .fv__line{font-weight:500;font-size:clamp(40px,5.2vw,80px);line-height:1.5;letter-spacing:.02em}
html[data-tyb="1"] .fv__line>.mk+.mk{margin-right:0}
/* PC: 英語の大見出しを外した左上に本文を上げ、右上の縦の見出しと上の帯をつくる（下の名前と釣り合う） */
@media (min-width:761px){html[data-tyb="1"] .fv__info{grid-row:1;align-self:start;padding-top:22px}}
html[data-tyb="1"] .fv__copy{font-family:var(--f-grot);font-weight:400;font-size:15px;line-height:1.9;letter-spacing:.04em;max-width:31em}
html[data-tyb="1"] .fv__play{font-family:"Jost",sans-serif;font-weight:400;font-size:15px;letter-spacing:.04em}
/* アメーバの大きさを今のままに保つ（案 1 と、最初の画面を案 1 の組み方で使う案 1+2。案 4 は自分で舞台を決める）。blob.js は、舞台の中心から本文の右の端と見出しの左の端までの
   短いほうの距離で半径を決める。見出しの列の間を広げて見出しが左へ出た分、舞台を左へ寄せる（1440 幅で中心 x≈872、半径は今と同じ約 244px） */
@media (min-width:761px){html:is([data-ty="1"],[data-ty="5"]) .fv__stage{grid-column:6/11;margin-right:2.6vw}}
@media (max-width:760px){html:is([data-ty="1"],[data-ty="5"]) .fv__line{font-size:36px;line-height:1.15}}
/* 名前: P02。字の高さだけの箱にして、下に余白を取り、画面の下で切らない */
html[data-tyb="1"] .fv__name{padding-bottom:var(--pad)}
html[data-tyb="1"] .fv__word{font-family:"Jost",sans-serif;font-stretch:100%;font-weight:430;letter-spacing:var(--p02-ls);text-transform:uppercase;line-height:.74;margin-left:-.0793em;padding-top:.02em}
html[data-tyb="1"] .fv__reading{font-family:var(--f-grot);font-weight:400;font-size:15px;letter-spacing:.12em;color:var(--mid);bottom:calc(100% + 16px)}
@media (max-width:760px){
  html[data-tyb="1"] .fv__studio{display:block;grid-column:1/-1;font-family:"Jost",sans-serif;font-weight:400;font-size:15px;line-height:1.3;letter-spacing:.01em;color:var(--mid);max-width:none}
  html[data-tyb="1"] .fv__line{font-size:38px}
  html[data-tyb="1"] .fv__name{padding-bottom:28px}
  html[data-tyb="1"] .fv__word{padding-bottom:0}
  html[data-tyb="1"] .fv__reading{bottom:calc(100% + 10px)}
}

/* 下の帯のボタンは等幅 13px にそろえる（字の種類を減らす） */
html[data-tyb="1"] .dock,html[data-tyb="1"] .ring text{font-size:13px}

/* ---------- 大きな英字: ショーリールの題、章の見出し、マーキー、Team の題。P02 と同じ Jost の大文字 ---------- */
html[data-tyb="1"] .reel__w{font-family:"Jost",sans-serif;font-weight:400;letter-spacing:.04em;line-height:1.02;text-transform:uppercase}
html[data-tyb="1"] .opener__title,html[data-tyb="1"] .team__title{font-family:"Jost",sans-serif;font-stretch:100%;font-weight:400;letter-spacing:.04em;line-height:.95;text-transform:uppercase}
html[data-tyb="1"] .marq__track span{font-family:"Jost",sans-serif;font-stretch:100%;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
/* 英字の中くらいの見出しは 400〜500 に下げる */
html[data-tyb="1"] .about__brand,html[data-tyb="1"] .mv__t,html[data-tyb="1"] .cases__en,html[data-tyb="1"] .menu__t{font-weight:400;letter-spacing:-.01em}
html[data-tyb="1"] .wk__t,html[data-tyb="1"] .card__t,html[data-tyb="1"] .team__c h3,html[data-tyb="1"] .team__sign,html[data-tyb="1"] .foot__t,html[data-tyb="1"] .row__t{font-weight:500;letter-spacing:-.005em}
html[data-tyb="1"] .wk__n{font-weight:300;letter-spacing:-.02em}

/* ---------- 和文: 900 と 700 をやめ、500 に。字の間を少し空け、行を広げる ---------- */
/* About の章の名前も P02 の文法で（大文字、字の間 0.127em） */
html[data-tyb="1"] .about__brand>span:first-child{font-weight:430;letter-spacing:var(--p02-ls);text-transform:uppercase}
html[data-tyb="1"] .about__brand span+span{font-weight:500;font-size:15px;letter-spacing:.12em;color:var(--mid)}
html[data-tyb="1"] .about__line,html[data-tyb="1"] .how__ja,html[data-tyb="1"] .cases__ja{font-weight:500;letter-spacing:.02em;line-height:1.45}
html[data-tyb="1"] .what__ja{font-weight:500;letter-spacing:.02em;line-height:1.3}
html[data-tyb="1"] .mix{font-weight:500;letter-spacing:.01em;line-height:1.25}
html[data-tyb="1"] .quote__t,html[data-tyb="1"] .foot__lead{font-weight:500;letter-spacing:.01em;line-height:1.2}
html[data-tyb="1"] .philo__body{font-weight:500}
html[data-tyb="1"] .what__lead,html[data-tyb="1"] .work__end p{font-weight:400}

/* ---------- フッターの名前: P02。箱の作り（行の高さ 0.86 と下の 0.26em）は今のままにして、アメーバの座る場所の計算（1.12 × 大きさ）を保つ ---------- */
html[data-tyb="1"] .foot__word{font-family:"Jost",sans-serif;font-stretch:100%;font-weight:430;letter-spacing:var(--p02-ls);text-transform:uppercase;padding-left:var(--pad);padding-right:0}
html[data-tyb="1"] .foot__word{text-indent:-.0793em}