/*
 * トップの動画直下に置く縦書きの所信。
 *
 * 縦書きでいちばん壊れやすいのは折り返しの位置。横書きと違って
 * 折り返しを決めるのは「高さ」なので、高さを決めずに置くと
 * 画面の縦幅しだいで文の途中から次の列に落ちる。読点の前で
 * 切れたり、1文が2列にまたがったりする。
 *
 * そこで高さを em で持つ。--lh-soul-max は本文でいちばん長い行
 * （問い合わせが鳴る。スタッフの手が、止まらなくなる。= 24字）に
 * 余裕を足した字数。字送りぶんを掛けた高さを確保しておけば、
 * 文字サイズを変えても行が折れない。
 *
 * トンマナの「避けたい印象」に《ふわっとしたマーケ会社》
 * 《意識高いだけ》がある。字を大きくするほどポエムに寄るので、
 * 大きさではなく余白と字間で見せる。
 */

.lh-soul {
  --lh-soul-max: 26;       /* 折り返させない字数 */
  --lh-soul-space: 0.34em; /* 字送り */
  --lh-soul-gap: 6.5;      /* 列の間隔。縦書きでは line-height が横の広がりになる */
  --lh-soul-fit: 1.77vw;   /* 幅から決まる文字サイズの上限 = 92vw / (8 × 6.5) */

  position: relative;
  overflow: hidden;

  /* 親の max-width を無視して画面幅いっぱいに抜く */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  align-items: center;
  justify-content: center;

  /* PC では画面をほぼ占める。左右は広く使いたいので padding を抑える */
  min-height: 100vh;
  padding: clamp(1.25rem, 2.5vh, 2.25rem) clamp(0.75rem, 2vw, 2rem);

  background: #eef1f5;
}

/* 紙のざらつき。画像を足すとリクエストが増えるので SVG を直に敷く */
.lh-soul::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

.lh-soul__inner {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.lh-soul__text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  /*
   * 明朝（Zen Old Mincho）。旧字形寄りで、縦組みに強い。
   *
   * 手書き系を3つ試して全部外れた。毛筆（Yuji Syuku）は重く、
   * ペン書き（Zen Kurenaido）は整いすぎ、行書（Yuji Mai）は
   * 縦に組むとかなが崩れて書道教室のプリントに見えた。
   * 日本語の手書きフォントは縦組みで品が出にくい。
   *
   * 縦組みで格を出しているサイトはたいてい明朝を広い字間で組んでいる。
   * 情緒は書体の崩しではなく、字間・行間・余白から出す。
   */
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

  /*
   * 文字サイズは高さと幅の両方で抑える。
   *
   * 列の長さ（縦）は 字数 × 文字サイズ なので vh で持つと上下の
   * 余りが画面によらず一定になる。ただし列の総幅（横）は
   * 行数 × 列の間隔 × 文字サイズ で決まるため、高さだけで
   * 決めると iPad の縦持ちのような「縦に長く横が狭い」画面で
   * 横にはみ出す。--lh-soul-fit がその幅側の上限。
   *
   *   上限 = 画面幅の92% ÷ (8行 × 列の間隔)
   */
  font-size: clamp(0.95rem, min(2.4vh, var(--lh-soul-fit)), 2rem);
  line-height: var(--lh-soul-gap);
  letter-spacing: var(--lh-soul-space);

  /*
   * 背景 #eef1f5 とのコントラスト比 5.95。細い書体なので落としすぎると
   * 線が飛ぶが、この値なら本文として読める水準（AA）を保つ。
   * これ以上薄くすると 4.5 を切り、明るい場所で読めなくなる。
   * 傍点は currentColor なので、この色に自動で揃う。
   */
  color: #565c65;
  margin: 0;

  /* いちばん長い行が1列に収まる高さ。ここが折り返しの制御 */
  height: calc(var(--lh-soul-max) * (1em + var(--lh-soul-space)));
  max-height: 100%;
}

.lh-soul__line {
  display: block;
}

/* 1文字ずつ */
.lh-soul__char {
  display: inline-block;
}

/*
 * 隠すのは JS が .lh-soul--ready を付けてから。
 * CSS だけで隠すと、JS が落ちた瞬間に本文が永久に消える。
 */
.lh-soul--ready .lh-soul__char {
  opacity: 0;
  transform: translateY(-0.35em);
}

/*
 * 1文字あたりは短く。長くすると滲んで見え、
 * 「文字が出ている」ではなく「ぼやけている」になる。
 * 順番の遅延は JS が1文字ずつ付ける。
 */
.lh-soul--ready.is-in .lh-soul__char {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.62s ease,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * 強調は傍点で打つ。
 *
 * Yuji Syuku は 400 しか無いので font-weight を上げると
 * ブラウザが太らせた偽物のボールドになり、筆の線が潰れる。
 * 縦書きの日本語で文字を強めるときの本来のやり方は傍点なので、
 * そちらに寄せる。縦組みでは自動で文字の右側に並ぶ。
 */
.lh-soul__em {
  font-weight: inherit;
  text-emphasis: filled dot currentColor;
  -webkit-text-emphasis: filled dot currentColor;
  text-emphasis-position: over right;
  -webkit-text-emphasis-position: over right;
}

/*
 * 横幅が足りない画面では列の間隔を戻す。
 * 列の総幅は 行数 × 間隔 × 文字サイズ で決まるので、
 * 6.5 のままだと 1200px を切ったあたりで画面からはみ出す。
 */
@media (max-width: 1199px) {
  .lh-soul {
    --lh-soul-gap: 4.6;
    --lh-soul-fit: 2.5vw; /* 92vw / (8 × 4.6) */
  }
}

/* ---------- スマホ ---------- */

@media (max-width: 767px) {
  .lh-soul {
    --lh-soul-space: 0.16em; /* 画面が狭いぶん字送りを詰める */
    --lh-soul-gap: 2.9;      /* 列も詰める。広いと画面からはみ出す */
    --lh-soul-fit: 3.9vw;    /* 92vw / (8 × 2.9) */

    /* 100vh はアドレスバーの分だけはみ出す。実際の表示領域で取る */
    min-height: 100svh;
    padding: 3rem 0.75rem;
  }

  .lh-soul__text {
    font-size: clamp(0.8rem, min(1.85vh, var(--lh-soul-fit)), 1.05rem);
  }
}

/* 縦に短い画面（横向きのスマホなど）では、はみ出す前に字を縮める */
@media (max-height: 620px) {
  .lh-soul {
    --lh-soul-gap: 2.4;
    --lh-soul-fit: 4.7vw; /* 92vw / (8 × 2.4) */
  }
  .lh-soul__text {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lh-soul--ready .lh-soul__char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}