/* メインビジュアルの文字組み（style.css の後に読む）。
   PC・タブレット：キャッチコピーを縦組み 2 行で空に立て、本文も縦で添える。ロゴは左下にまとめる。
   スマホ：従来どおり横組みで下に積む。 */

/* ── スマホ：構造を 3 つの塊に分けたので、並び順だけ元の積み方に戻す ── */
@media(max-width:640px){
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
  .hero-catch,.hero-lockup{display:contents}
  .hero-eyebrow{order:1}
  .hero h1{order:2}
  .hero-logo{order:3}
  .hero-jp{order:4}
  .hero-description{order:5}
  .primary-button{order:6}
}

/* ── PC・タブレット ── */
@media(min-width:641px){
  /* --u＝画面に合わせて伸び縮みする 1 単位。幅と高さの小さいほうに従うので、横長でも縦が足りなくならない */
  .hero-copy{--u:min(1vw,1.6vh);left:6.2%;top:calc(84px + 5.2vh);bottom:calc(27px + 7.4vh);width:auto;max-width:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*1.2)}
  /* 左端の縦の英字は、コピーの横に立てた英字と役目が重なるので出さない */
  .hero-coordinate{display:none}

  /* 縦組みの塊：右から 英字の添え書き → 見出し 2 行 → 本文 2 行 */
  .hero-catch{writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.5);margin-left:calc(var(--u)*3)}
  .hero-eyebrow{gap:14px;letter-spacing:.34em}
  .hero-eyebrow>span{width:1px;height:38px}
  .hero h1{font-size:clamp(34px,calc(var(--u)*4.2),82px);line-height:1.62;letter-spacing:.1em;margin:0}
  /* 2 行目は 1 字半ぶん下げて、段差で読ませる */
  .hero h1 em{padding-left:0;padding-top:1.45em}
  .hero-description{align-self:flex-end;font-size:clamp(11px,calc(var(--u)*.86),14px);line-height:2.3;letter-spacing:.2em;margin:0 calc(var(--u)*.7) 0 0;max-width:none}

  /* ロゴの組：上に細い線を 1 本引き、その下に中央揃えでまとめる */
  .hero-lockup{text-align:center}
  .hero-lockup:before{content:"";display:block;height:1px;background:#223c5866;margin-bottom:calc(var(--u)*1.3)}
  .hero-logo{display:block;font-size:clamp(40px,calc(var(--u)*3.7),70px)}
  .hero-logo:before,.hero-logo:after{display:none}
  .hero-logo span{margin-top:calc(var(--u)*.9)}
  .hero-jp{width:auto;margin-top:calc(var(--u)*.95);padding:0}
  .primary-button{margin-top:0}
}

/* ── 題字を「絵」で出す ──
   ロゴ（html.logo-art）とキャッチコピー（html.copy-art）を、文字ではなく作り込んだ絵で置く。
   公式サイトの多くがこの作り（copy.png／catch_pc.png など）。元の文字は読み上げ・検索用に残し、見た目だけ隠す。
   どの絵を出すかは boot.js が毎回ランダムに決める。ロゴとコピーは雰囲気のそろった「組」で選ぶ（?set=名前 で固定、=text で文字に戻す）。
   ロゴは縦横比がまちまちなので、置く幅の目安（--lw。boot.js が html に付ける）を絵ごとに持つ。
   コピーの絵は、PC が縦組み（hero-catch-art）、スマホと「題字を中央に置く絵」が横組み（hero-catch-art-h）。どの書体にも縦横の 2 枚がある。 */
.hero-catch-art,.hero-catch-art-h,.hero-logo-art{display:none}
.logo-art .hero-logo-art{display:block;height:auto;width:100%}
.logo-art .hero-logo,.copy-art .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:641px){
  .copy-art .hero-catch-art{display:block;width:auto;height:calc(var(--u)*31)}
  /* 組の幅をロゴの幅で決める（絵の元の大きさに引っぱられて組が広がらないように）*/
  .logo-art .hero-lockup{width:calc(var(--u)*var(--lw,21))}
  .logo-art .hero-lockup:before{display:none}
}
@media(max-width:640px){
  .copy-art .hero-catch-art-h{display:block;order:2;height:auto;width:min(80vw,340px);margin:2px 0 4px -9px}
  .logo-art .hero-logo-art{order:3;width:min(88vw,calc(330px*var(--lw,21)/21));margin:4px 0 0 -6px}
}

/* ── 題字の置き場（メインビジュアルの絵ごと。boot.js の heroes の 4 つめ → html の data-hero-layout）──
   left   … 文字が左、人物が右（上の基本の組み）
   right  … 人物が左、文字が右（左右を入れ替える）
   center … 人物が中央。題字は下の中央に大きく、コピーは横組みで左下に添える（縦組みを立てる空きが無いため）
   スマホはどの絵も同じ積み方（下にまとめる）。切り出す横位置だけが絵ごとに違う（--hero-x） */
@media(min-width:641px){
  [data-hero-layout="right"] .hero-copy{left:auto;right:6.2%;align-items:flex-end}
  [data-hero-layout="right"] .hero-catch{margin-left:0;margin-right:calc(var(--u)*3)}
  [data-hero-layout="right"] .hero-wash{background:linear-gradient(270deg,#edf5f5b0 0%,#eaf3f348 27%,transparent 54%),linear-gradient(0deg,#091d38b3 0%,transparent 23%)}

  [data-hero-layout="center"] .hero-copy{left:0;right:0;top:auto;bottom:calc(27px + 6.4vh);align-items:center;justify-content:flex-end}
  [data-hero-layout="center"] .hero-catch{position:absolute;left:5.6%;bottom:0;writing-mode:horizontal-tb;margin:0;gap:0}
  [data-hero-layout="center"] :is(.hero-eyebrow,.hero-description){display:none}
  [data-hero-layout="center"] .hero h1{font-size:clamp(22px,calc(var(--u)*2.3),40px);line-height:1.5}
  [data-hero-layout="center"] .hero h1 em{padding:0 0 0 1em}
  [data-hero-layout="center"].copy-art .hero-catch-art{display:none}
  [data-hero-layout="center"].copy-art .hero-catch-art-h{display:block;height:auto;width:calc(var(--u)*17)}
  [data-hero-layout="center"].logo-art .hero-lockup{width:calc(var(--u)*var(--lw,21)*1.3)}
  [data-hero-layout="center"] .hero-logo{font-size:clamp(46px,calc(var(--u)*4.6),88px)}
  [data-hero-layout="center"] .hero-lockup:before{display:none}
  [data-hero-layout="center"] .hero-wash{background:linear-gradient(0deg,#f4f9fcf5 0%,#f1f7fbd1 14%,#eef5f970 27%,transparent 42%)}
  [data-hero-layout="center"] .hero-bottom{color:#1c3550}
}

/* スマホ：題字は人物の上に重なる。細い書体（ペン字・細明朝・細線のロゴ）でも読めるよう、うしろに白い光をにじませる */
@media(max-width:640px){
  .copy-art .hero-catch-art-h,.logo-art .hero-logo-art{filter:drop-shadow(0 0 4px #fffffff2) drop-shadow(0 0 14px #ffffffc7) drop-shadow(0 0 30px #ffffff8f)}
}