/* watermark.css — セクション背景の透かし英字：SP共通レイアウト
   対象: clients / trusted-by / policy / case-study / hacks / books / articles / contact

   SPでは8セクションの透かしを「色を除いて共通」の見た目に揃える。
   ・サイズ・行間・字間・1行化・縦位置・画面左右中央寄せ  … このファイルで共通指定
   ・色（color / background / opacity / text-shadow）         … 各コンポーネントのCSSに残す

   ⚠ 読み込み順: 各コンポーネントCSSより「後」に enqueue すること（inc/enqueue.php 末尾）。
     各コンポーネントの PC 用 top/left はメディアクエリ外に書かれており、詰め合わせは
     セレクタ詳細度が同じ（0,1,0）ため、後勝ちで上書きする前提になっている。

   ⚠ 8セクションとも透かしの基準ブロック（position:relative の親）がSPで画面幅と一致する
     （left:0 / width:100vw）ことを実測で確認済み。そのため left:50% が画面左右中央になる。
     新しいセクションを足すときは、この前提が成り立つか確認すること。 */

@media (max-width: 767px) {
  .clients__watermark,
  .trusted-by__watermark,
  .policy__watermark,
  .case-study__watermark,
  .hacks__watermark,
  .books__watermark,
  .articles__watermark,
  .contact__watermark {
    top: var(--space-16);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    font-size: var(--font-size-en-title);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wider);
    white-space: nowrap;
  }

  /* PCで2行に割っている透かし（OUR/POLICY・WORKFLOW/HACKS・LITERARY/WORKS）を
     SPでは語間スペース区切りの1行にする。 */
  .policy__watermark span,
  .hacks__watermark span,
  .books__watermark span {
    display: inline;
  }

  .policy__watermark span + span::before,
  .hacks__watermark span + span::before,
  .books__watermark span + span::before {
    content: " ";
  }
}