@charset "UTF-8";

/* 共通部分 ここから
----------------------------*/

/* 追従バーの下にフォーカスが潜らないようにする */
/* 🔴 地の色は html が持つ。
   「入った瞬間のライン」を本文の後ろ（z-index:-1）に置くため。
   body が色を持っていると、その下にラインが隠れて見えなくなる */
html {
  background-color: #FFFFFF;
  scroll-padding-bottom: 72px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* 色は html 側。ここを塗るとラインが隠れる（写真のページだけ .is-photo が塗る） */
  background-color: transparent;
  color: #1A1A1A;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  /* 「質／問」のように語の途中で折らせない。非対応のブラウザでは従来どおり */
  word-break: auto-phrase;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 面の色に関係なく見えるように、文字色を使う。
   黒い面では白、白い面では黒の輪郭になる */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

/* レイアウト */

.wrapper {
  max-width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.search-block,
.posts,
.boys,
.photo,
.flow,
.recruit {
  padding: 84px 0;
  /* メニューから送られたとき、固定ヘッダーの下に潜らせない */
  scroll-margin-top: 64px;
}

/* 見出しの組 */

.section-japanese {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.15em;
}

/* 左右に伸びる罫線。色は節ごとに指定する */
.section-japanese::before,
.section-japanese::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #1A1A1A;
}

.section-title {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* line-height 0.82 のままだと字の上下が枠に切られる */
  padding: 0.08em 0;
  margin-top: 12px;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 15vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.title-track {
  display: flex;
  gap: 0.24em;
  width: max-content;
  /* 左端をあらかじめ画面の外へ出しておく */
  margin-left: -18vw;
}

/* 巨大な英字より前に立たせる。中身が見出しに負けないようにするため */
.card-list,
.photo-list,
.step-list,
.recruit-body {
  position: relative;
  z-index: 1;
  margin-top: -10px;
}

/* 画像の枠 */

.thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* 画像が届いていない枠は、この色の面になる */
  background-color: #EFEFEF;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ボタン */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.btn-dark {
  background-color: #1A1A1A;
  color: #FFFFFF;
}

/* 予約より弱く、でも常に見える。白＋枠線 */
.btn-line {
  background-color: #FFFFFF;
  color: #1A1A1A;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.22);
}

/* 白いピル。押せるものだが主役ではない場所に使う */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.pill::after {
  content: "→";
}

/* 記事がまだ無いとき */
.posts-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  color: #6B6B6B;
  text-align: center;
}

.more {
  margin-top: 40px;
  text-align: center;
}

.btn,
.pill,
.sns,
.card-link,
.contact-list a,
.menu-list a,
.footer-nav a,
.footer-info a,
.footer-sns a {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover,
.pill:hover,
.sns:hover,
.card-link:hover,
.contact-list a:hover,
.menu-list a:hover,
.footer-nav a:hover,
.footer-info a:hover,
.footer-sns a:hover {
  opacity: 0.7;
}

/* トップへ戻る */

.page-top {
  position: fixed;
  /* 🔴 左下は「使い方」が使う。こちらは右下に置く。
     重ねると、下にあるほうが押せなくなる */
  right: 14px;
  /* 追従バーの上に重ならない位置 */
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 2px 10px rgba(120, 120, 120, 0.35);
  font-size: 18px;
}

/* JSが動くときだけ隠す。動かない環境では最初から出しておく */
.motion .page-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.motion .page-top.is-shown {
  opacity: 1;
  visibility: visible;
}

/* スマホの追従ボタン */

/* 画面下に貼り付く帯。予約が主で、ボーイ一覧が副 */
.fixed-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: env(safe-area-inset-bottom);
  /* 端末の下端ぶんの余白が透けて、下の本文が見えていた */
  background-color: #F4C430;
  /* iOS で貼り付きが外れるのを防ぐ。自前の層として扱わせる */
  transform: translateZ(0);
  will-change: transform;
}

.fixed-boys,
.reserve-fixed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* 面積で差を付ける。予約のほうを広く取る */
.fixed-boys {
  flex: 0 0 38%;
  background-color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(26, 26, 26, 0.14);
}

.reserve-fixed {
  flex: 1;
  background-color: #F4C430;
}

/* トップ以外の受け皿 */

.page-main {
  padding-top: 108px;
  padding-bottom: 72px;
}

.page-heading {
  margin-bottom: 32px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
}

/* 読み上げにだけ残す */

/* 祖先に transform が付くと top:-100px は画面内に着地する。こちらは影響を受けない */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 60;
  padding: 12px 20px;
  background-color: #1A1A1A;
  color: #FFFFFF;
}

.skip-link:focus {
  top: 12px;
}

/* 共通部分 ここまで */

/* 動き ここから
----------------------------*/

/* Lenis が高さを測れるようにする土台 */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* motion は head の script が付ける。JS が止まっていれば付かず、最初から見えている */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

/* 出る前の姿で固まらないよう、出たあとの姿へ落とす */
@media (prefers-reduced-motion: reduce) {

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .title-track {
    transform: none !important;
  }

  /* シャッターは閉じたままにしない。開いた姿で見せる */
  .album-shutter,
  .album-lock {
    display: none !important;
  }

  .album-thumb img {
    transform: none !important;
  }

  /* 祝いは出すが、飛ばさない */
  .firstlike,
  .firstlike.on {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  /* 消えるときだけは、ぱっと消さず薄くする */
  .firstlike.out {
    opacity: 0;
    transition: opacity 0.5s linear;
    animation: none !important;
  }

  .firstlike-spark,
  .firstlike-ring,
  .rain,
  .hearts,
  .fireworks {
    display: none;
  }

  /* 吹き出しは出す。動かさない */
  .fav-pop {
    animation: none !important;
  }

  .zoom {
    transition: none !important;
  }

  /* 縮小は起きるが、滑らかには動かさない */
  .search-bar,
  .search-bar .search-form {
    transition: none !important;
  }

}

/* 動き ここまで */

/* ヘッダー ここから
----------------------------*/

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
  padding: 0 12px 0 20px;
  background-color: #FFFFFF;
}

.site-name {
  display: flex;
  align-items: center;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
}

/* ロゴは差し替える。どんな縦横比でも高さで揃え、はみ出す幅は contain で受ける */
.site-logo {
  width: auto;
  height: 36px;
  max-width: 46vw;
  object-fit: contain;
  object-position: left center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* スマホは下に追従ボタンがあるので、頭にはハンバーガーだけ残す */
.header-actions .sns,
.header-actions .btn {
  display: none;
}

.sns {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background-color: #F4C430;
  color: #1A1A1A;
  cursor: pointer;
}

.menu-mark {
  display: block;
  width: 20px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* メニュー */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #1A1A1A;
  color: #FFFFFF;
}

.menu-panel[hidden] {
  display: none;
}

/* 開いているあいだ、後ろの本文が動かないようにする */
.menu-open {
  overflow: hidden;
}

/* nav が max-content で決まると .menu-list の 100% が 125px になる */
.menu-panel nav {
  width: 100%;
}

.menu-list {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.menu-list a,
.menu-list button {
  display: block;
  width: 100%;
  border: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 17px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.menu-reserve {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  text-align: center;
}

.menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ヘッダー ここまで */

/* さがす ここから
----------------------------*/

.search-anchor {
  height: 1px;
}

/* main の直下に置いてあるので、ページの最後まで貼り付く */
.search-bar {
  position: sticky;
  top: 64px;
  z-index: 30;
  padding: 12px 0;
  /* 半透明にすると、下の記事カードが透けて描画不具合に見える */
  background-color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1);
}

.search-form {
  display: flex;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto;
}

.search-form input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  color: #1A1A1A;
  font-family: inherit;
  font-size: 15px;
}

.search-form button {
  min-height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* さがす ここまで */

/* 新着記事の帯 ここから
----------------------------*/

/* ボーイの X ここから
   既存の .pill をそのまま使う。新しいボタンの色は作らない
------------------------*/

.boy-x {
  margin-top: 10px;
  text-align: center;
}

/* 文字とアイコンを並べる。.pill の見た目は変えない。
   縦の余白は、幅の狭い画面で文字が2行になったときのため。
   1行のときは min-height 50px のほうが勝つので、見た目は変わらない */
.boy-x .pill,
.writer-actions .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 8px;
}

/* 🔴 サイトの外へ出るボタンなので「→」を出さない。
   「→」はサイトの中を移る印として使っている。
   記事の下では、すぐ上の「◯◯君の記事をぜんぶ見る」と
   見分けが付かなくなるのを防ぐ役目も持つ */
.pill-x::after {
  content: none;
}

/* 記事の下の「◯◯君の記事をぜんぶ見る」。

   🔴 flex をやめて block にする。
   flex だと「→」が文字とは別の項目になり、幅の狭い画面で文字が2行に
   折り返したとき、「→」だけが行から外れて右に浮く（実測 320px）。
   block にすると「→」が文字の流れに乗り、最後の文字のうしろに並ぶ。

   縦 12px は、1行のとき 25.2px（行の高さ）＋24px ＝ 約50px になる値。
   つまり1行のときの見た目は変わらない */
/* 🔴 セレクタは `.writer-actions` から書くこと。
   すぐ上の `.writer-actions .pill` のほうが強く、`.pill-posts` だけだと
   display が負けて flex のままになる（1度それで矢印が浮いたままだった） */
.writer-actions .pill-posts {
  display: block;
  padding-block: 12px;
  text-align: center;
}

/* block にすると .pill の gap が効かないので、ここで空ける */
.pill-posts::after {
  margin-left: 10px;
}

/* ボーイの X ここまで */

/* いいね履歴 ここから
   この端末で押したものだけを出す。サーバーには何も残さない
------------------------*/

.likes {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(10, 10, 10, 0.66);
}

.likes-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  padding: 24px 22px 22px;
  overflow-y: auto;
  border-radius: 14px;
  background-color: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.likes-head {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.likes-lead {
  margin-bottom: 16px;
  color: #6B6B6B;
  font-size: 13px;
}

.likes-sort {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.likes-sort button {
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background-color: #EFEFEF;
  color: #1A1A1A;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.likes-sort [aria-current] {
  background-color: #F4C430;
}

.likes-list {
  margin-bottom: 18px;
  list-style: none;
}

.likes-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid #EFEFEF;
}

.likes-list a {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
}

.likes-when {
  color: #6B6B6B;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.likes-none {
  margin-bottom: 18px;
  padding: 22px 4px;
  color: #6B6B6B;
  font-size: 14px;
  line-height: 1.8;
}

.likes-close {
  align-self: center;
  min-height: 44px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background-color: #1A1A1A;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* いいね履歴 ここまで */

/* 使い方ガイド ここから
   押すと画面が暗くなり、目印のところだけ光る。年配のお客さんのために
------------------------*/

/* 開く合図のボタン。追従バー（下）と「上へ」（右下）を避けて、左下に置く */
.guide-open {
  position: fixed;
  bottom: 72px;
  left: 16px;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: none;
  border-radius: 999px;
  background-color: #1A1A1A;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.guide-open span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-size: 13px;
  line-height: 1;
}

.guide {
  position: fixed;
  inset: 0;
  z-index: 75;
}

/* 目印のところだけ明るく残す。まわりは影で暗くする */
.guide-hole {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.66),
              0 0 0 3px #F4C430;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.guide-note {
  position: absolute;
  right: 16px;
  left: 16px;
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
  padding: 18px 20px 16px;
  border-radius: 12px;
  background-color: #FFFFFF;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.guide-text {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.75;
}

.guide-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-count {
  margin-right: auto;
  color: #6B6B6B;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.guide-close,
.guide-next {
  min-height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.guide-close {
  background-color: #EFEFEF;
  color: #1A1A1A;
}

.guide-next {
  background-color: #F4C430;
  color: #1A1A1A;
}

@media (prefers-reduced-motion: reduce) {

  .guide-hole {
    transition: none;
  }

}

/* 使い方ガイド ここまで */

/* 背景の粒 ここから
   細かい色の粒が、下からゆっくり上がっていく。

   🔴 粒ひとつずつを要素にすると数が作れない。
   1つの要素の box-shadow に位置と色を並べて、何十個ぶんかをまとめて描く。
   動く要素は層ごとに1つ、ぜんぶで3つだけ。

   層で速さを変えてある。細かい粒ほど遅い＝奥に見える。
   ::after は同じ粒を 1600px 下に置いた写し。
   1周ぶん上がりきったところで写しが入れ替わるので、切れ目なく続く
------------------------------------------*/

.motes {
  position: fixed;
  inset: 0;
  /* 本文の後ろ。地の色は html が持っているので、ここに置ける */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.motes span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  /* 本体は見せない。見えているのは box-shadow のほう */
  background-color: transparent;
  will-change: transform;
}

.motes span::after {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 50%;
}

@keyframes moteRise {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -1600px, 0);
  }

}

/* 1層目：2px の粒を 320個。150秒で一周。
   🔴 遠いほど小さく薄く、近いほど大きく濃く。逆にすると奥行きが消える */
.motes span:nth-child(1) {
  width: 2px;
  height: 2px;
  box-shadow:
    675px 856px 0 rgba(217,82,122, 0.4),
    1152px 981px 0 rgba(239,124,158, 0.52),
    1944px 1049px 0 rgba(239,124,158, 0.42),
    966px 6px 0 rgba(244,196,48, 0.39),
    2397px 876px 0 rgba(244,196,48, 0.35),
    951px 476px 0 rgba(217,82,122, 0.33),
    1666px 1261px 0 rgba(33,182,173, 0.33),
    1347px 1106px 0 rgba(33,182,173, 0.46),
    1509px 47px 0 rgba(239,124,158, 0.47),
    362px 255px 0 rgba(244,196,48, 0.41),
    2261px 1491px 0 rgba(79,163,209, 0.4),
    618px 382px 0 rgba(217,82,122, 0.33),
    962px 152px 0 rgba(239,124,158, 0.36),
    2378px 1494px 0 rgba(244,196,48, 0.34),
    1951px 1144px 0 rgba(33,182,173, 0.36),
    598px 1097px 0 rgba(33,182,173, 0.38),
    1848px 1026px 0 rgba(33,182,173, 0.38),
    1984px 791px 0 rgba(79,163,209, 0.33),
    382px 325px 0 rgba(217,82,122, 0.46),
    2031px 5px 0 rgba(33,182,173, 0.33),
    2138px 454px 0 rgba(242,96,60, 0.44),
    2279px 1275px 0 rgba(244,196,48, 0.36),
    696px 1283px 0 rgba(79,163,209, 0.49),
    1361px 709px 0 rgba(242,96,60, 0.51),
    1006px 211px 0 rgba(239,124,158, 0.33),
    712px 1591px 0 rgba(33,182,173, 0.39),
    150px 1384px 0 rgba(242,96,60, 0.5),
    989px 833px 0 rgba(239,124,158, 0.51),
    58px 709px 0 rgba(33,182,173, 0.42),
    1012px 503px 0 rgba(239,124,158, 0.43),
    1799px 834px 0 rgba(217,82,122, 0.42),
    1179px 106px 0 rgba(79,163,209, 0.45),
    142px 859px 0 rgba(239,124,158, 0.35),
    284px 692px 0 rgba(217,82,122, 0.5),
    619px 1527px 0 rgba(217,82,122, 0.42),
    1033px 285px 0 rgba(217,82,122, 0.43),
    1962px 57px 0 rgba(239,124,158, 0.5),
    1498px 315px 0 rgba(79,163,209, 0.44),
    1745px 992px 0 rgba(242,96,60, 0.5),
    1953px 630px 0 rgba(239,124,158, 0.43),
    1130px 285px 0 rgba(217,82,122, 0.32),
    515px 1465px 0 rgba(244,196,48, 0.37),
    1335px 1318px 0 rgba(239,124,158, 0.49),
    2393px 862px 0 rgba(79,163,209, 0.46),
    567px 273px 0 rgba(239,124,158, 0.34),
    384px 382px 0 rgba(244,196,48, 0.45),
    576px 147px 0 rgba(244,196,48, 0.45),
    518px 622px 0 rgba(242,96,60, 0.51),
    1623px 1011px 0 rgba(239,124,158, 0.44),
    743px 376px 0 rgba(33,182,173, 0.36),
    2252px 1550px 0 rgba(244,196,48, 0.44),
    2067px 1526px 0 rgba(244,196,48, 0.48),
    32px 793px 0 rgba(33,182,173, 0.49),
    1629px 1564px 0 rgba(242,96,60, 0.36),
    955px 517px 0 rgba(217,82,122, 0.44),
    171px 501px 0 rgba(33,182,173, 0.35),
    1208px 1030px 0 rgba(242,96,60, 0.42),
    2346px 201px 0 rgba(242,96,60, 0.44),
    2081px 1218px 0 rgba(217,82,122, 0.38),
    2117px 635px 0 rgba(79,163,209, 0.46),
    2153px 1552px 0 rgba(242,96,60, 0.36),
    1334px 412px 0 rgba(79,163,209, 0.33),
    1721px 220px 0 rgba(244,196,48, 0.45),
    1835px 1034px 0 rgba(242,96,60, 0.51),
    1813px 964px 0 rgba(242,96,60, 0.42),
    1644px 144px 0 rgba(239,124,158, 0.32),
    1777px 86px 0 rgba(239,124,158, 0.38),
    1657px 1482px 0 rgba(33,182,173, 0.41),
    968px 817px 0 rgba(33,182,173, 0.39),
    933px 1293px 0 rgba(217,82,122, 0.34),
    1964px 353px 0 rgba(33,182,173, 0.39),
    884px 1596px 0 rgba(33,182,173, 0.45),
    1073px 502px 0 rgba(33,182,173, 0.5),
    1580px 626px 0 rgba(242,96,60, 0.4),
    2147px 1456px 0 rgba(244,196,48, 0.35),
    827px 638px 0 rgba(33,182,173, 0.46),
    371px 1133px 0 rgba(239,124,158, 0.34),
    1239px 1269px 0 rgba(33,182,173, 0.47),
    1893px 221px 0 rgba(239,124,158, 0.46),
    843px 1389px 0 rgba(79,163,209, 0.39),
    2382px 1395px 0 rgba(239,124,158, 0.37),
    117px 659px 0 rgba(242,96,60, 0.37),
    628px 1395px 0 rgba(242,96,60, 0.36),
    1136px 1466px 0 rgba(33,182,173, 0.35),
    1608px 956px 0 rgba(33,182,173, 0.41),
    1149px 1371px 0 rgba(239,124,158, 0.45),
    1115px 202px 0 rgba(239,124,158, 0.52),
    881px 70px 0 rgba(79,163,209, 0.48),
    1506px 38px 0 rgba(244,196,48, 0.42),
    160px 815px 0 rgba(242,96,60, 0.41),
    1841px 491px 0 rgba(244,196,48, 0.51),
    605px 193px 0 rgba(79,163,209, 0.36),
    1517px 6px 0 rgba(79,163,209, 0.35),
    2337px 885px 0 rgba(242,96,60, 0.49),
    1264px 384px 0 rgba(33,182,173, 0.4),
    2260px 500px 0 rgba(239,124,158, 0.43),
    2394px 957px 0 rgba(244,196,48, 0.45),
    299px 164px 0 rgba(33,182,173, 0.5),
    771px 311px 0 rgba(244,196,48, 0.42),
    2156px 1242px 0 rgba(242,96,60, 0.44),
    1929px 1391px 0 rgba(217,82,122, 0.39),
    1104px 314px 0 rgba(79,163,209, 0.38),
    37px 145px 0 rgba(217,82,122, 0.33),
    2096px 201px 0 rgba(217,82,122, 0.49),
    1475px 552px 0 rgba(79,163,209, 0.33),
    152px 1198px 0 rgba(33,182,173, 0.38),
    1636px 323px 0 rgba(244,196,48, 0.34),
    1468px 1102px 0 rgba(79,163,209, 0.4),
    792px 1490px 0 rgba(242,96,60, 0.4),
    1329px 448px 0 rgba(239,124,158, 0.42),
    1442px 1242px 0 rgba(242,96,60, 0.45),
    713px 43px 0 rgba(217,82,122, 0.39),
    1959px 331px 0 rgba(33,182,173, 0.48),
    1145px 1391px 0 rgba(244,196,48, 0.36),
    2184px 1236px 0 rgba(244,196,48, 0.51),
    1598px 430px 0 rgba(33,182,173, 0.51),
    1503px 23px 0 rgba(79,163,209, 0.35),
    1086px 1243px 0 rgba(244,196,48, 0.47),
    661px 373px 0 rgba(242,96,60, 0.42),
    1689px 423px 0 rgba(239,124,158, 0.52),
    2272px 585px 0 rgba(33,182,173, 0.47),
    1484px 169px 0 rgba(239,124,158, 0.4),
    730px 720px 0 rgba(242,96,60, 0.45),
    1483px 1173px 0 rgba(239,124,158, 0.52),
    1732px 1188px 0 rgba(244,196,48, 0.52),
    863px 1519px 0 rgba(244,196,48, 0.36),
    2181px 1071px 0 rgba(79,163,209, 0.5),
    2105px 606px 0 rgba(244,196,48, 0.35),
    1737px 1256px 0 rgba(217,82,122, 0.41),
    2026px 1538px 0 rgba(239,124,158, 0.45),
    1036px 377px 0 rgba(33,182,173, 0.49),
    910px 1002px 0 rgba(33,182,173, 0.37),
    2202px 939px 0 rgba(239,124,158, 0.33),
    1376px 1201px 0 rgba(33,182,173, 0.48),
    570px 1496px 0 rgba(239,124,158, 0.52),
    1543px 291px 0 rgba(33,182,173, 0.33),
    2381px 607px 0 rgba(242,96,60, 0.49),
    1875px 403px 0 rgba(33,182,173, 0.37),
    2266px 1566px 0 rgba(33,182,173, 0.45),
    110px 758px 0 rgba(239,124,158, 0.42),
    1890px 725px 0 rgba(33,182,173, 0.43),
    1834px 1225px 0 rgba(217,82,122, 0.46),
    1050px 1538px 0 rgba(244,196,48, 0.39),
    1025px 1503px 0 rgba(33,182,173, 0.48),
    814px 1219px 0 rgba(79,163,209, 0.5),
    316px 1527px 0 rgba(79,163,209, 0.37),
    532px 299px 0 rgba(79,163,209, 0.34),
    1211px 1322px 0 rgba(239,124,158, 0.42),
    548px 1019px 0 rgba(217,82,122, 0.42),
    131px 1405px 0 rgba(79,163,209, 0.5),
    2140px 754px 0 rgba(244,196,48, 0.36),
    577px 581px 0 rgba(244,196,48, 0.37),
    1694px 123px 0 rgba(244,196,48, 0.47),
    2092px 43px 0 rgba(217,82,122, 0.37),
    1817px 999px 0 rgba(242,96,60, 0.43),
    2247px 765px 0 rgba(33,182,173, 0.45),
    1498px 292px 0 rgba(79,163,209, 0.4),
    1817px 1302px 0 rgba(217,82,122, 0.41),
    2104px 1200px 0 rgba(239,124,158, 0.41),
    952px 40px 0 rgba(217,82,122, 0.5),
    906px 1586px 0 rgba(242,96,60, 0.5),
    355px 706px 0 rgba(33,182,173, 0.35),
    55px 555px 0 rgba(79,163,209, 0.46),
    1225px 441px 0 rgba(244,196,48, 0.41),
    826px 310px 0 rgba(244,196,48, 0.44),
    627px 452px 0 rgba(242,96,60, 0.34),
    2189px 1317px 0 rgba(244,196,48, 0.45),
    500px 1558px 0 rgba(244,196,48, 0.36),
    852px 1103px 0 rgba(244,196,48, 0.34),
    993px 449px 0 rgba(242,96,60, 0.43),
    1002px 417px 0 rgba(33,182,173, 0.44),
    2131px 1430px 0 rgba(217,82,122, 0.48),
    1637px 619px 0 rgba(79,163,209, 0.48),
    1464px 855px 0 rgba(244,196,48, 0.44),
    190px 827px 0 rgba(242,96,60, 0.42),
    155px 1311px 0 rgba(244,196,48, 0.48),
    1052px 1589px 0 rgba(33,182,173, 0.46),
    2173px 335px 0 rgba(79,163,209, 0.39),
    2011px 1343px 0 rgba(79,163,209, 0.4),
    1200px 109px 0 rgba(244,196,48, 0.38),
    370px 996px 0 rgba(79,163,209, 0.48),
    565px 1543px 0 rgba(217,82,122, 0.35),
    1263px 799px 0 rgba(244,196,48, 0.37),
    1812px 474px 0 rgba(244,196,48, 0.39),
    1741px 1049px 0 rgba(217,82,122, 0.34),
    1939px 446px 0 rgba(242,96,60, 0.5),
    812px 95px 0 rgba(33,182,173, 0.45),
    1352px 890px 0 rgba(239,124,158, 0.47),
    76px 871px 0 rgba(242,96,60, 0.36),
    129px 445px 0 rgba(239,124,158, 0.35),
    1379px 26px 0 rgba(217,82,122, 0.47),
    1844px 509px 0 rgba(217,82,122, 0.39),
    1537px 388px 0 rgba(79,163,209, 0.46),
    743px 1416px 0 rgba(79,163,209, 0.42),
    1345px 753px 0 rgba(217,82,122, 0.35),
    321px 119px 0 rgba(239,124,158, 0.46),
    1245px 671px 0 rgba(242,96,60, 0.4),
    685px 1477px 0 rgba(33,182,173, 0.33),
    2367px 558px 0 rgba(79,163,209, 0.36),
    944px 248px 0 rgba(244,196,48, 0.5),
    1544px 388px 0 rgba(33,182,173, 0.45),
    2104px 433px 0 rgba(239,124,158, 0.45),
    1763px 779px 0 rgba(217,82,122, 0.51),
    530px 1063px 0 rgba(33,182,173, 0.33),
    16px 1544px 0 rgba(244,196,48, 0.35),
    454px 1563px 0 rgba(33,182,173, 0.33),
    1342px 227px 0 rgba(239,124,158, 0.42),
    1211px 1336px 0 rgba(33,182,173, 0.49),
    1193px 846px 0 rgba(33,182,173, 0.51),
    2269px 237px 0 rgba(79,163,209, 0.39),
    1676px 526px 0 rgba(33,182,173, 0.45),
    1280px 1437px 0 rgba(79,163,209, 0.49),
    553px 1085px 0 rgba(79,163,209, 0.45),
    1443px 419px 0 rgba(217,82,122, 0.35),
    375px 570px 0 rgba(239,124,158, 0.32),
    1394px 88px 0 rgba(239,124,158, 0.48),
    872px 1033px 0 rgba(244,196,48, 0.33),
    119px 355px 0 rgba(79,163,209, 0.43),
    2269px 474px 0 rgba(239,124,158, 0.49),
    691px 1243px 0 rgba(239,124,158, 0.34),
    1263px 844px 0 rgba(79,163,209, 0.39),
    1622px 786px 0 rgba(79,163,209, 0.47),
    168px 499px 0 rgba(79,163,209, 0.38),
    1246px 887px 0 rgba(239,124,158, 0.52),
    343px 1265px 0 rgba(33,182,173, 0.41),
    751px 382px 0 rgba(217,82,122, 0.44),
    205px 779px 0 rgba(33,182,173, 0.34),
    2275px 996px 0 rgba(239,124,158, 0.48),
    493px 1262px 0 rgba(244,196,48, 0.46),
    127px 634px 0 rgba(242,96,60, 0.35),
    7px 1290px 0 rgba(244,196,48, 0.49),
    1805px 184px 0 rgba(242,96,60, 0.4),
    1631px 902px 0 rgba(33,182,173, 0.47),
    763px 1158px 0 rgba(79,163,209, 0.45),
    921px 618px 0 rgba(244,196,48, 0.51),
    582px 326px 0 rgba(33,182,173, 0.45),
    2286px 535px 0 rgba(79,163,209, 0.4),
    475px 754px 0 rgba(242,96,60, 0.42),
    323px 1313px 0 rgba(239,124,158, 0.5),
    1884px 699px 0 rgba(33,182,173, 0.38),
    989px 1347px 0 rgba(242,96,60, 0.41),
    798px 1404px 0 rgba(242,96,60, 0.38),
    1979px 1094px 0 rgba(33,182,173, 0.47),
    1081px 416px 0 rgba(217,82,122, 0.36),
    2215px 1081px 0 rgba(239,124,158, 0.34),
    759px 543px 0 rgba(33,182,173, 0.4),
    2191px 553px 0 rgba(239,124,158, 0.42),
    356px 1239px 0 rgba(217,82,122, 0.48),
    474px 600px 0 rgba(242,96,60, 0.51),
    832px 1101px 0 rgba(239,124,158, 0.46),
    2090px 1576px 0 rgba(242,96,60, 0.42),
    970px 1311px 0 rgba(33,182,173, 0.46),
    1624px 534px 0 rgba(242,96,60, 0.46),
    1766px 393px 0 rgba(244,196,48, 0.46),
    1543px 855px 0 rgba(239,124,158, 0.5),
    1067px 1476px 0 rgba(217,82,122, 0.45),
    1627px 1006px 0 rgba(79,163,209, 0.44),
    946px 122px 0 rgba(217,82,122, 0.39),
    1532px 698px 0 rgba(242,96,60, 0.41),
    234px 540px 0 rgba(217,82,122, 0.35),
    959px 380px 0 rgba(244,196,48, 0.39),
    927px 350px 0 rgba(242,96,60, 0.35),
    2156px 1476px 0 rgba(217,82,122, 0.44),
    138px 105px 0 rgba(217,82,122, 0.42),
    2327px 1230px 0 rgba(239,124,158, 0.35),
    1625px 771px 0 rgba(79,163,209, 0.41),
    171px 339px 0 rgba(239,124,158, 0.36),
    2400px 778px 0 rgba(217,82,122, 0.45),
    672px 826px 0 rgba(33,182,173, 0.39),
    837px 1319px 0 rgba(242,96,60, 0.49),
    406px 232px 0 rgba(79,163,209, 0.33),
    1561px 1337px 0 rgba(79,163,209, 0.43),
    1954px 559px 0 rgba(244,196,48, 0.48),
    1646px 110px 0 rgba(242,96,60, 0.44),
    602px 732px 0 rgba(242,96,60, 0.42),
    1307px 207px 0 rgba(33,182,173, 0.4),
    1849px 981px 0 rgba(79,163,209, 0.5),
    233px 842px 0 rgba(239,124,158, 0.45),
    221px 1580px 0 rgba(217,82,122, 0.46),
    1086px 494px 0 rgba(33,182,173, 0.37),
    2351px 1145px 0 rgba(33,182,173, 0.37),
    1780px 778px 0 rgba(79,163,209, 0.5),
    776px 641px 0 rgba(79,163,209, 0.49),
    1164px 1549px 0 rgba(79,163,209, 0.46),
    107px 1291px 0 rgba(244,196,48, 0.52),
    285px 1360px 0 rgba(244,196,48, 0.5),
    1922px 654px 0 rgba(33,182,173, 0.39),
    931px 1077px 0 rgba(79,163,209, 0.34),
    571px 362px 0 rgba(242,96,60, 0.47),
    316px 411px 0 rgba(79,163,209, 0.45),
    2170px 1123px 0 rgba(242,96,60, 0.4),
    435px 1057px 0 rgba(239,124,158, 0.34),
    1634px 1465px 0 rgba(33,182,173, 0.36),
    929px 467px 0 rgba(79,163,209, 0.48),
    76px 344px 0 rgba(217,82,122, 0.47),
    210px 683px 0 rgba(242,96,60, 0.4),
    809px 1162px 0 rgba(244,196,48, 0.51),
    1152px 190px 0 rgba(242,96,60, 0.5),
    148px 1408px 0 rgba(239,124,158, 0.5),
    1568px 866px 0 rgba(79,163,209, 0.33),
    1956px 1521px 0 rgba(217,82,122, 0.37),
    80px 1104px 0 rgba(239,124,158, 0.33),
    1985px 1129px 0 rgba(242,96,60, 0.4),
    1900px 1454px 0 rgba(244,196,48, 0.44),
    1105px 1287px 0 rgba(217,82,122, 0.33),
    1300px 628px 0 rgba(239,124,158, 0.46),
    540px 1223px 0 rgba(239,124,158, 0.43),
    1080px 1047px 0 rgba(239,124,158, 0.4),
    2141px 461px 0 rgba(244,196,48, 0.52),
    1061px 885px 0 rgba(217,82,122, 0.45),
    357px 1073px 0 rgba(79,163,209, 0.4),
    1946px 513px 0 rgba(244,196,48, 0.42),
    1393px 499px 0 rgba(242,96,60, 0.45),
    889px 1px 0 rgba(239,124,158, 0.48),
    1617px 1188px 0 rgba(239,124,158, 0.32),
    61px 983px 0 rgba(79,163,209, 0.51),
    293px 294px 0 rgba(239,124,158, 0.37),
    165px 284px 0 rgba(217,82,122, 0.5),
    2357px 458px 0 rgba(33,182,173, 0.5),
    825px 414px 0 rgba(79,163,209, 0.49);
  animation: moteRise 150s linear infinite;
}

.motes span:nth-child(1)::after {
  top: 1600px;
  width: 2px;
  height: 2px;
  box-shadow: inherit;
}

/* 2層目：3px の粒を 150個。95秒で一周。
   🔴 遠いほど小さく薄く、近いほど大きく濃く。逆にすると奥行きが消える */
.motes span:nth-child(2) {
  width: 3px;
  height: 3px;
  box-shadow:
    1285px 104px 0 rgba(239,124,158, 0.48),
    1424px 579px 0 rgba(33,182,173, 0.58),
    1146px 611px 0 rgba(79,163,209, 0.53),
    848px 1229px 0 rgba(239,124,158, 0.62),
    1396px 1126px 0 rgba(244,196,48, 0.63),
    1092px 503px 0 rgba(242,96,60, 0.5),
    2220px 1183px 0 rgba(33,182,173, 0.49),
    1288px 694px 0 rgba(239,124,158, 0.56),
    198px 1175px 0 rgba(244,196,48, 0.61),
    642px 1010px 0 rgba(217,82,122, 0.53),
    2150px 316px 0 rgba(242,96,60, 0.54),
    933px 302px 0 rgba(242,96,60, 0.62),
    2119px 1113px 0 rgba(244,196,48, 0.52),
    487px 1143px 0 rgba(242,96,60, 0.54),
    1087px 873px 0 rgba(244,196,48, 0.51),
    73px 536px 0 rgba(239,124,158, 0.51),
    762px 137px 0 rgba(79,163,209, 0.52),
    1410px 907px 0 rgba(239,124,158, 0.65),
    1788px 732px 0 rgba(217,82,122, 0.61),
    910px 1334px 0 rgba(242,96,60, 0.49),
    999px 1477px 0 rgba(242,96,60, 0.55),
    325px 771px 0 rgba(239,124,158, 0.47),
    615px 912px 0 rgba(242,96,60, 0.62),
    2256px 969px 0 rgba(33,182,173, 0.65),
    330px 405px 0 rgba(33,182,173, 0.51),
    918px 1066px 0 rgba(244,196,48, 0.61),
    1530px 612px 0 rgba(217,82,122, 0.56),
    1322px 1229px 0 rgba(217,82,122, 0.45),
    0px 795px 0 rgba(79,163,209, 0.54),
    689px 1403px 0 rgba(217,82,122, 0.59),
    127px 423px 0 rgba(239,124,158, 0.59),
    1762px 146px 0 rgba(242,96,60, 0.59),
    650px 1273px 0 rgba(239,124,158, 0.47),
    68px 1164px 0 rgba(244,196,48, 0.61),
    2009px 832px 0 rgba(242,96,60, 0.46),
    1977px 1404px 0 rgba(33,182,173, 0.63),
    810px 282px 0 rgba(217,82,122, 0.62),
    238px 1158px 0 rgba(217,82,122, 0.58),
    1412px 263px 0 rgba(239,124,158, 0.51),
    2106px 196px 0 rgba(79,163,209, 0.49),
    1463px 1474px 0 rgba(33,182,173, 0.46),
    1063px 1570px 0 rgba(242,96,60, 0.56),
    1727px 625px 0 rgba(217,82,122, 0.46),
    910px 104px 0 rgba(239,124,158, 0.51),
    1978px 1304px 0 rgba(217,82,122, 0.54),
    318px 594px 0 rgba(217,82,122, 0.59),
    2195px 716px 0 rgba(33,182,173, 0.59),
    2177px 184px 0 rgba(242,96,60, 0.62),
    1277px 462px 0 rgba(33,182,173, 0.5),
    1738px 196px 0 rgba(79,163,209, 0.45),
    625px 694px 0 rgba(242,96,60, 0.64),
    67px 1479px 0 rgba(217,82,122, 0.58),
    1279px 711px 0 rgba(244,196,48, 0.54),
    421px 295px 0 rgba(79,163,209, 0.46),
    585px 1497px 0 rgba(239,124,158, 0.48),
    1827px 1042px 0 rgba(244,196,48, 0.5),
    2312px 1154px 0 rgba(239,124,158, 0.48),
    1478px 153px 0 rgba(33,182,173, 0.47),
    1528px 1321px 0 rgba(79,163,209, 0.63),
    293px 439px 0 rgba(79,163,209, 0.5),
    2050px 982px 0 rgba(79,163,209, 0.49),
    1163px 128px 0 rgba(79,163,209, 0.49),
    619px 881px 0 rgba(242,96,60, 0.53),
    1133px 1126px 0 rgba(79,163,209, 0.49),
    1575px 1104px 0 rgba(33,182,173, 0.58),
    955px 176px 0 rgba(33,182,173, 0.54),
    1863px 254px 0 rgba(242,96,60, 0.64),
    1233px 1271px 0 rgba(244,196,48, 0.5),
    792px 1376px 0 rgba(217,82,122, 0.59),
    268px 474px 0 rgba(244,196,48, 0.58),
    1383px 85px 0 rgba(33,182,173, 0.6),
    2257px 676px 0 rgba(242,96,60, 0.55),
    2080px 255px 0 rgba(239,124,158, 0.51),
    1795px 7px 0 rgba(79,163,209, 0.59),
    1867px 269px 0 rgba(33,182,173, 0.46),
    1012px 1055px 0 rgba(242,96,60, 0.62),
    803px 906px 0 rgba(239,124,158, 0.51),
    572px 505px 0 rgba(239,124,158, 0.48),
    1223px 761px 0 rgba(217,82,122, 0.49),
    1593px 1037px 0 rgba(33,182,173, 0.63),
    2284px 250px 0 rgba(239,124,158, 0.53),
    341px 914px 0 rgba(244,196,48, 0.52),
    1470px 933px 0 rgba(239,124,158, 0.64),
    2391px 1593px 0 rgba(242,96,60, 0.58),
    2011px 367px 0 rgba(244,196,48, 0.52),
    2376px 90px 0 rgba(33,182,173, 0.58),
    2169px 264px 0 rgba(244,196,48, 0.58),
    757px 592px 0 rgba(217,82,122, 0.5),
    1357px 1231px 0 rgba(242,96,60, 0.6),
    592px 1435px 0 rgba(239,124,158, 0.61),
    2211px 567px 0 rgba(79,163,209, 0.58),
    2140px 0px 0 rgba(79,163,209, 0.46),
    1696px 956px 0 rgba(79,163,209, 0.47),
    2158px 605px 0 rgba(244,196,48, 0.65),
    1325px 72px 0 rgba(242,96,60, 0.54),
    1165px 823px 0 rgba(239,124,158, 0.47),
    972px 57px 0 rgba(244,196,48, 0.48),
    297px 67px 0 rgba(33,182,173, 0.59),
    1867px 1341px 0 rgba(242,96,60, 0.64),
    1634px 852px 0 rgba(33,182,173, 0.62),
    640px 304px 0 rgba(242,96,60, 0.47),
    818px 1091px 0 rgba(242,96,60, 0.62),
    1020px 1019px 0 rgba(79,163,209, 0.5),
    350px 68px 0 rgba(217,82,122, 0.46),
    913px 1517px 0 rgba(33,182,173, 0.53),
    1000px 665px 0 rgba(242,96,60, 0.59),
    535px 318px 0 rgba(242,96,60, 0.46),
    1778px 1278px 0 rgba(239,124,158, 0.45),
    617px 210px 0 rgba(244,196,48, 0.64),
    1835px 184px 0 rgba(244,196,48, 0.57),
    194px 917px 0 rgba(244,196,48, 0.5),
    699px 1597px 0 rgba(244,196,48, 0.5),
    607px 204px 0 rgba(217,82,122, 0.55),
    1220px 620px 0 rgba(217,82,122, 0.6),
    1926px 469px 0 rgba(239,124,158, 0.63),
    24px 1189px 0 rgba(33,182,173, 0.51),
    1942px 939px 0 rgba(242,96,60, 0.49),
    2340px 1207px 0 rgba(79,163,209, 0.63),
    1387px 551px 0 rgba(242,96,60, 0.54),
    2312px 1132px 0 rgba(33,182,173, 0.62),
    599px 415px 0 rgba(242,96,60, 0.52),
    349px 686px 0 rgba(79,163,209, 0.48),
    1228px 1065px 0 rgba(242,96,60, 0.47),
    2291px 796px 0 rgba(239,124,158, 0.58),
    2025px 936px 0 rgba(79,163,209, 0.57),
    83px 371px 0 rgba(244,196,48, 0.49),
    1552px 46px 0 rgba(217,82,122, 0.63),
    763px 170px 0 rgba(217,82,122, 0.54),
    1752px 1174px 0 rgba(33,182,173, 0.49),
    239px 254px 0 rgba(79,163,209, 0.56),
    368px 814px 0 rgba(239,124,158, 0.52),
    1404px 1592px 0 rgba(244,196,48, 0.5),
    198px 375px 0 rgba(244,196,48, 0.45),
    1873px 1262px 0 rgba(79,163,209, 0.46),
    1032px 549px 0 rgba(217,82,122, 0.59),
    1460px 155px 0 rgba(239,124,158, 0.54),
    676px 1138px 0 rgba(244,196,48, 0.51),
    738px 767px 0 rgba(244,196,48, 0.6),
    1928px 1322px 0 rgba(244,196,48, 0.6),
    1851px 92px 0 rgba(239,124,158, 0.56),
    408px 584px 0 rgba(244,196,48, 0.6),
    2039px 463px 0 rgba(244,196,48, 0.59),
    642px 411px 0 rgba(33,182,173, 0.57),
    2312px 1547px 0 rgba(239,124,158, 0.52),
    1552px 547px 0 rgba(244,196,48, 0.62),
    260px 1029px 0 rgba(244,196,48, 0.46),
    1790px 598px 0 rgba(33,182,173, 0.56),
    690px 871px 0 rgba(242,96,60, 0.48),
    1822px 372px 0 rgba(217,82,122, 0.56),
    759px 1543px 0 rgba(79,163,209, 0.55);
  animation: moteRise 95s linear infinite;
}

.motes span:nth-child(2)::after {
  top: 1600px;
  width: 3px;
  height: 3px;
  box-shadow: inherit;
}

/* 3層目：5px の粒を 70個。58秒で一周。
   🔴 遠いほど小さく薄く、近いほど大きく濃く。逆にすると奥行きが消える */
.motes span:nth-child(3) {
  width: 5px;
  height: 5px;
  box-shadow:
    1906px 644px 0 rgba(217,82,122, 0.61),
    1914px 1285px 0 rgba(242,96,60, 0.68),
    451px 106px 0 rgba(244,196,48, 0.63),
    365px 1484px 0 rgba(242,96,60, 0.66),
    247px 1314px 0 rgba(242,96,60, 0.79),
    1109px 1577px 0 rgba(33,182,173, 0.81),
    333px 257px 0 rgba(239,124,158, 0.79),
    1411px 351px 0 rgba(239,124,158, 0.81),
    1317px 198px 0 rgba(242,96,60, 0.6),
    655px 1304px 0 rgba(242,96,60, 0.78),
    210px 1243px 0 rgba(239,124,158, 0.58),
    483px 767px 0 rgba(242,96,60, 0.73),
    499px 868px 0 rgba(33,182,173, 0.79),
    1032px 42px 0 rgba(239,124,158, 0.64),
    126px 1514px 0 rgba(217,82,122, 0.76),
    451px 339px 0 rgba(239,124,158, 0.66),
    774px 909px 0 rgba(239,124,158, 0.67),
    997px 808px 0 rgba(33,182,173, 0.64),
    1529px 270px 0 rgba(242,96,60, 0.68),
    554px 726px 0 rgba(242,96,60, 0.81),
    1465px 733px 0 rgba(33,182,173, 0.8),
    2376px 864px 0 rgba(242,96,60, 0.69),
    530px 452px 0 rgba(242,96,60, 0.75),
    780px 144px 0 rgba(79,163,209, 0.64),
    1859px 984px 0 rgba(217,82,122, 0.82),
    820px 473px 0 rgba(33,182,173, 0.76),
    303px 1213px 0 rgba(242,96,60, 0.73),
    288px 55px 0 rgba(239,124,158, 0.79),
    1843px 331px 0 rgba(239,124,158, 0.73),
    1726px 797px 0 rgba(239,124,158, 0.79),
    1624px 74px 0 rgba(239,124,158, 0.71),
    416px 1520px 0 rgba(79,163,209, 0.74),
    1681px 540px 0 rgba(79,163,209, 0.72),
    822px 593px 0 rgba(217,82,122, 0.79),
    611px 1215px 0 rgba(33,182,173, 0.61),
    459px 1180px 0 rgba(242,96,60, 0.8),
    717px 907px 0 rgba(242,96,60, 0.68),
    294px 1295px 0 rgba(244,196,48, 0.71),
    839px 1133px 0 rgba(79,163,209, 0.75),
    647px 985px 0 rgba(33,182,173, 0.81),
    2363px 549px 0 rgba(244,196,48, 0.8),
    2156px 1497px 0 rgba(79,163,209, 0.63),
    2159px 1535px 0 rgba(242,96,60, 0.75),
    2203px 1348px 0 rgba(244,196,48, 0.64),
    1206px 532px 0 rgba(244,196,48, 0.69),
    247px 1173px 0 rgba(239,124,158, 0.8),
    348px 1484px 0 rgba(217,82,122, 0.8),
    1857px 1596px 0 rgba(242,96,60, 0.71),
    1781px 328px 0 rgba(79,163,209, 0.68),
    219px 1454px 0 rgba(79,163,209, 0.74),
    2248px 330px 0 rgba(239,124,158, 0.62),
    350px 1489px 0 rgba(33,182,173, 0.76),
    2138px 916px 0 rgba(217,82,122, 0.77),
    1633px 1200px 0 rgba(242,96,60, 0.66),
    452px 345px 0 rgba(244,196,48, 0.65),
    1380px 396px 0 rgba(242,96,60, 0.67),
    1180px 691px 0 rgba(239,124,158, 0.77),
    1542px 1410px 0 rgba(217,82,122, 0.72),
    1277px 178px 0 rgba(242,96,60, 0.81),
    2112px 1248px 0 rgba(33,182,173, 0.71),
    692px 307px 0 rgba(79,163,209, 0.72),
    782px 638px 0 rgba(242,96,60, 0.6),
    1825px 662px 0 rgba(79,163,209, 0.74),
    250px 681px 0 rgba(79,163,209, 0.68),
    1543px 554px 0 rgba(239,124,158, 0.65),
    1177px 1553px 0 rgba(33,182,173, 0.61),
    748px 1137px 0 rgba(242,96,60, 0.82),
    830px 625px 0 rgba(239,124,158, 0.58),
    1915px 1445px 0 rgba(79,163,209, 0.73),
    294px 1565px 0 rgba(33,182,173, 0.81);
  animation: moteRise 58s linear infinite;
}

.motes span:nth-child(3)::after {
  top: 1600px;
  width: 5px;
  height: 5px;
  box-shadow: inherit;
}

/* 写真のページは暗い部屋。こちらは灯りが受け持つ */
.is-photo .motes {
  display: none;
}

/* 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) {

  .motes {
    display: none;
  }

}

/* 背景の粒 ここまで */

/* 入った瞬間のライン ここから
   右下から左上へ、色つきの線がまとめて抜けていく。
   JSは使わない。終わったら visibility で片づけて、以後は触れない
------------------------*/

.dash {
  position: fixed;
  /* 画面の外から入って外へ抜けるので、四方に余分を持たせる */
  inset: -30%;
  /* 本文の後ろ。カードや帯の下をくぐって抜けていく */
  z-index: -1;
  overflow: hidden;
  /* 見た目だけのもの。押せなくする */
  pointer-events: none;
  /* 終わったら消す。残しておくと、うっすら残像が乗る */
  animation: dashGone 0s linear 1.5s forwards;
}

@keyframes dashGone {

  to {
    visibility: hidden;
  }

}

.dash span {
  position: absolute;
  left: -30%;
  width: 160%;
  border-radius: 999px;
  opacity: 0;
  /* transform と opacity だけを動かす。ここに色や大きさを混ぜると重くなる */
  animation: dashRun 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 45度に倒した線を、その線の向きに沿って流す。
   回したあとの translateX は「右下 → 左上」の向きになる */
@keyframes dashRun {

  0% {
    opacity: 0;
    transform: rotate(45deg) translateX(85%);
  }

  /* 後ろで走らせるものなので、濃く出さない。本文の邪魔をしない濃さ */
  16% {
    opacity: 0.32;
  }

  68% {
    opacity: 0.32;
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) translateX(-85%);
  }

}

/* 1本ずつ、位置・太さ・色・出るタイミングを変える。
   そろえると機械が動いたように見える */
.dash span:nth-child(1) {
  top: 1.5%;
  height: 5px;
  background-color: #F4C430;
  animation-delay: 0.00s;
}

.dash span:nth-child(2) {
  top: 5.6%;
  height: 9px;
  background-color: #4FA3D1;
  animation-delay: 0.07s;
}

.dash span:nth-child(3) {
  top: 9.7%;
  height: 4px;
  background-color: #EF7C9E;
  animation-delay: 0.03s;
}

.dash span:nth-child(4) {
  top: 13.8%;
  height: 13px;
  background-color: #21B6AD;
  animation-delay: 0.12s;
}

.dash span:nth-child(5) {
  top: 17.9%;
  height: 6px;
  background-color: #F2603C;
  animation-delay: 0.05s;
}

.dash span:nth-child(6) {
  top: 22.0%;
  height: 11px;
  background-color: #D9527A;
  animation-delay: 0.16s;
}

.dash span:nth-child(7) {
  top: 26.1%;
  height: 4px;
  background-color: #F4C430;
  animation-delay: 0.09s;
}

.dash span:nth-child(8) {
  top: 30.2%;
  height: 8px;
  background-color: #4FA3D1;
  animation-delay: 0.20s;
}

.dash span:nth-child(9) {
  top: 34.3%;
  height: 14px;
  background-color: #EF7C9E;
  animation-delay: 0.02s;
}

.dash span:nth-child(10) {
  top: 38.4%;
  height: 5px;
  background-color: #21B6AD;
  animation-delay: 0.14s;
}

.dash span:nth-child(11) {
  top: 42.5%;
  height: 10px;
  background-color: #F2603C;
  animation-delay: 0.06s;
}

.dash span:nth-child(12) {
  top: 46.6%;
  height: 6px;
  background-color: #D9527A;
  animation-delay: 0.24s;
}

.dash span:nth-child(13) {
  top: 50.7%;
  height: 12px;
  background-color: #F4C430;
  animation-delay: 0.11s;
}

.dash span:nth-child(14) {
  top: 54.8%;
  height: 4px;
  background-color: #4FA3D1;
  animation-delay: 0.28s;
}

.dash span:nth-child(15) {
  top: 58.9%;
  height: 9px;
  background-color: #EF7C9E;
  animation-delay: 0.04s;
}

.dash span:nth-child(16) {
  top: 63.0%;
  height: 7px;
  background-color: #21B6AD;
  animation-delay: 0.18s;
}

.dash span:nth-child(17) {
  top: 67.1%;
  height: 13px;
  background-color: #F2603C;
  animation-delay: 0.22s;
}

.dash span:nth-child(18) {
  top: 71.2%;
  height: 5px;
  background-color: #D9527A;
  animation-delay: 0.08s;
}

.dash span:nth-child(19) {
  top: 75.3%;
  height: 11px;
  background-color: #F4C430;
  animation-delay: 0.26s;
}

.dash span:nth-child(20) {
  top: 79.4%;
  height: 4px;
  background-color: #4FA3D1;
  animation-delay: 0.13s;
}

.dash span:nth-child(21) {
  top: 83.5%;
  height: 8px;
  background-color: #EF7C9E;
  animation-delay: 0.30s;
}

.dash span:nth-child(22) {
  top: 87.6%;
  height: 12px;
  background-color: #21B6AD;
  animation-delay: 0.10s;
}

.dash span:nth-child(23) {
  top: 91.7%;
  height: 6px;
  background-color: #F2603C;
  animation-delay: 0.32s;
}

.dash span:nth-child(24) {
  top: 95.8%;
  height: 10px;
  background-color: #D9527A;
  animation-delay: 0.17s;
}

/* 写真のページは「ようこそ」の幕が入口を持っているので、こちらは出さない */
.is-photo .dash {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .dash {
    display: none;
  }

}

/* 入った瞬間のライン ここまで */

/* トップのバナー ここから
   外観 → カスタマイズ で入れた分だけ出る。入っていなければ節ごと出ない
------------------------*/

.banner {
  /* 固定ヘッダー64px の下に、8px だけ空ける。
     スマホは画面が狭いので、ここを空けるとバナーが見えなくなる */
  padding: 72px 20px 0;
}

.banner-frame {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  /* バナーの基準は 1600×500。縦横比がばらついても帯の高さは動かさない */
  aspect-ratio: 16 / 5;
  border-radius: 10px;
  background-color: #F2F0EB;
}

.banner-list {
  list-style: none;
}

.banner-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* ゆっくり重なりながら入れ替わる。ぱっと切り替わると忙しない */
  transition: opacity 1.8s ease-in-out;
  pointer-events: none;
}

.banner-item.is-on {
  opacity: 1;
  pointer-events: auto;
}

.banner-item a,
.banner-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-item img {
  object-fit: cover;
}

/* いま何枚目か。2枚以上のときだけ JS が作る */
.banner-dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
}

.banner-dots button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.banner-dots [aria-current] {
  width: 20px;
  background-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {

  .banner-item {
    transition: none;
  }

}

/* トップのバナー ここまで */

.latest {
  /* 固定ヘッダー64px の下に、48px の空きが残る高さ */
  padding: 112px 20px 0;
}

/* バナーがある日は、上の余白はバナーが持っているので詰める */
.banner + .latest {
  padding-top: 44px;
}

.latest-heading {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
}

/* 横に送って読む。ライブラリは使わない。
   画面の右端まではみ出すと切れ方が汚いので、枠の中で送る */
.latest-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* 版面と同じ位置に収める。1160px の版面から左右の余白20pxを引いた幅 */
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  border-radius: 12px;
  background-color: #FAFAF8;
  scroll-padding-left: 16px;
  /* 送れることが見て分かるように、細い帯を常に出す */
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.25) rgba(26, 26, 26, 0.06);
}

/* キーボードで入って矢印で送れる。入っていることが見えるように */
.latest-list:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.latest-list::-webkit-scrollbar {
  height: 6px;
}

.latest-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background-color: rgba(26, 26, 26, 0.06);
}

.latest-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: rgba(26, 26, 26, 0.25);
}

.latest-item {
  flex: 0 0 190px;
}

.latest-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #EFEFEF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
}

.latest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.latest-thumb .card-tag {
  position: absolute;
  top: 8px;
  left: 8px;
}

.latest-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
}

.latest .card-date {
  margin-top: 4px;
}

/* 新着記事の帯 ここまで */

/* 記事一覧 ここから
----------------------------*/

.posts .section-title {
  color: #F2603C;
}

.posts .section-japanese::before,
.posts .section-japanese::after {
  background-color: #F2603C;
}

.card-list {
  display: grid;
  gap: 16px;
}

/* 白い面と影で、後ろの巨大な英字より前に見せる */
.card-link {
  display: grid;
  /* 1fr の既定は min-width:auto。折れない語があると枠を押し広げる */
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 0 16px;
  padding: 10px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
}

.card-thumb {
  grid-row: 1 / span 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #EFEFEF;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 題名が長くてもカードの高さが暴れないように、3行で止める */
.card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

.card-date {
  color: #6B6B6B;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.card-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #F2603C;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* 記事一覧 ここまで */

/* 在籍ボーイ ここから
----------------------------*/

.boys .section-title {
  color: #EF7C9E;
}

.boys .section-japanese::before,
.boys .section-japanese::after {
  background-color: #EF7C9E;
}

/* 一覧は大元サイトが持っている。ここは案内だけ置く */
/* 白は敷かない。320〜1920 のどの幅でも巨大英字と重ならないので用がなく、
   背景の線画を隠していた */
.boys-body {
  padding: 28px 20px;
  text-align: center;
}

.boys-body p {
  max-width: 26em;
  margin: 0 auto 22px;
}

/* 在籍ボーイ ここまで */

/* フォトアルバム ここから
----------------------------*/

.photo .section-title {
  color: #4FA3D1;
}

.photo .section-japanese::before,
.photo .section-japanese::after {
  background-color: #4FA3D1;
}

/* 固定ページの中に出るときは、本文との間を空ける */
.entry + .album-list {
  margin-top: 40px;
}

.album-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
}

.album a {
  display: block;
  text-align: center;
}

/* シャッターの羽。JS が止まっていれば出さない（写真がそのまま見える） */
.album-shutter {
  display: none;
}

.motion .album-shutter {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
  height: 50%;
  background-color: #1A1A1A;
  transition: transform 1.5s 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 鍵があるときは、割れたのを見せてから開く */
.motion .album.has-lock .album-shutter,
.motion .album.has-lock .album-thumb img {
  transition-delay: 1.25s;
}

.motion .album-shutter-top {
  top: 0;
}

.motion .album-shutter-bottom {
  bottom: 0;
}

/* 上下へ開く */
.motion .album.is-open .album-shutter-top {
  transform: translateY(-100%);
}

.motion .album.is-open .album-shutter-bottom {
  transform: translateY(100%);
}

/* 開くのに合わせて、中の写真がわずかに寄る */
.motion .album-thumb img {
  transform: scale(1.06);
  transition: transform 1.5s 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion .album.is-open .album-thumb img {
  transform: none;
}

/* 鍵：あらわれる → ふるえる → 壊れる。そのあとシャッターが開く */
.album-lock {
  display: none;
}

.motion .has-lock .album-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 34%;
  max-width: 128px;
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.album-lock img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.motion .album.is-open .album-lock-whole {
  animation: lockshow 0.3s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             lockshake 0.5s 0.5s ease-in-out,
             lockgone 0.01s 1s forwards;
}

.motion .album.is-open .album-lock-broken {
  animation: lockbreak 0.55s 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes lockshow {
  from {
    opacity: 0;
    transform: scale(0.55);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* こらえきれずに震える */
@keyframes lockshake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  12% {
    transform: translateX(-5px) rotate(-4deg);
  }

  26% {
    transform: translateX(5px) rotate(4deg);
  }

  40% {
    transform: translateX(-6px) rotate(-5deg);
  }

  54% {
    transform: translateX(6px) rotate(5deg);
  }

  70% {
    transform: translateX(-4px) rotate(-3deg);
  }

  86% {
    transform: translateX(3px) rotate(2deg);
  }
}

@keyframes lockgone {
  to {
    opacity: 0;
  }
}

/* 壊れた鍵に切り替わり、落ちながら消える */
@keyframes lockbreak {
  0% {
    opacity: 1;
    transform: scale(1.14);
  }

  28% {
    opacity: 1;
    transform: scale(1) translateY(2px);
  }

  100% {
    opacity: 0;
    transform: scale(0.94) translateY(28px);
  }
}

.album-thumb {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #EFEFEF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
}

.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-name {
  margin-top: 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* 特設ページが受け持っている項目の吹き出し ここから
   🔴 見た目を足すだけ。行き先の差し替えは inc/special.php が別にやっている。
   特設ページを下書きにすると吹き出しも消える（'badge' が空になる） */

.album.is-special {
  position: relative;
}

.album.is-special .album-thumb {
  box-shadow: 0 0 0 3px #F4C430, 0 6px 16px rgba(170, 170, 170, 0.45);
}

/* 🔴 サムネの上に重ねる。場所を取らせると、隣の項目と高さがそろわなくなる */
.album-mark {
  position: absolute;
  top: -14px;
  left: -10px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
  /* 🔴 傾きは transform ではなく rotate で持つ。
     transform に入れると、下のふわふわ（translate）と取り合いになる */
  rotate: -6deg;
  box-shadow: 0 3px 10px rgba(170, 170, 170, 0.5);
}

/* ふわふわ浮かせる。位置も傾きも少しずつ戻る */
@keyframes markfloat {
  0% {
    translate: 0 0;
    rotate: -6deg;
  }

  50% {
    translate: 0 -7px;
    rotate: -2.5deg;
  }

  100% {
    translate: 0 0;
    rotate: -6deg;
  }
}

/* 🔴 .motion の中だけに書く。
   動きを減らす設定の人には .motion が付かないので、止まったまま出る */
.motion .album-mark {
  animation: markfloat 3.2s ease-in-out infinite;
}

/* 吹き出しのしっぽ。右下へ向ける */
.album-mark::after {
  position: absolute;
  right: 18px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-top: 10px solid #F4C430;
  border-right: 10px solid transparent;
  content: "";
}

/* 特設ページが受け持っている項目の吹き出し ここまで */

/* フォトアルバム ここまで */

/* ご予約の流れ ここから
----------------------------*/

.flow .section-title {
  color: #F4C430;
}

.flow .section-japanese::before,
.flow .section-japanese::after {
  background-color: #F4C430;
}

.step {
  padding: 22px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
}

.step + .step {
  margin-top: 16px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}

/* ここも中の絵は透過。面の色はこちらで持つ */
.step .thumb {
  aspect-ratio: 3 / 2;
  margin-top: 16px;
  padding: 6%;
  background-color: #FBEFCF;
}

.step .thumb img {
  object-fit: contain;
}

.step-body {
  margin-top: 18px;
}

.step-title {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
}

/* 連絡先 */

.contact {
  margin-top: 32px;
  padding: 26px 22px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  text-align: center;
}

.contact-heading {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15em;
}

.contact-list {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 10px 16px;
  margin-bottom: 24px;
  text-align: left;
}

.contact-list dt {
  color: #6B6B6B;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.contact-list a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-qr {
  margin-top: 26px;
}

/* どんな背景でも読み取れるよう、白の余白ごと置く */
.contact-qr img {
  width: 116px;
  height: 116px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #F4C430;
}

.contact-qr figcaption {
  margin-top: 10px;
  color: #6B6B6B;
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* ご予約の流れ ここまで */

/* アルバイト募集 ここから
----------------------------*/

.recruit {
  background-color: #1A1A1A;
  color: #FFFFFF;
}

.recruit .section-title {
  color: #F4C430;
}

.recruit .section-japanese::before,
.recruit .section-japanese::after {
  background-color: #F4C430;
}

/* 背後の巨大な黄色い字を隠す面。これが無いと白文字が字画に重なる */
.recruit-body {
  padding: 28px 20px;
  background-color: #1A1A1A;
  text-align: center;
}

.recruit-body p {
  max-width: 34em;
  margin: 0 auto;
}

.recruit-points {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: 12px 16px;
  max-width: 420px;
  margin: 26px auto 0;
  padding-top: 24px;
  border-top: 1px solid #F4C430;
  text-align: left;
}

.recruit-points dt {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.recruit-body .btn {
  margin-top: 30px;
}

/* アルバイト募集 ここまで */

/* 下層ページ ここから
----------------------------*/

/* トップより静かに。巨大な英字は使わず、日本語の見出しだけで立てる */
.page-head {
  padding: 112px 0 0;
  text-align: center;
}

.page-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* そのボーイの記事数と、もらったいいねの合計 */
.boy-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.boy-stats div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
}

.boy-stats dt {
  color: #6B6B6B;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.boy-stats dd {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.page-count {
  margin-top: 10px;
  color: #6B6B6B;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
}

.page-head + .search-anchor + .search-bar {
  margin-top: 28px;
}

.listing {
  padding: 40px 0 84px;
}

.listing .card-list {
  margin-top: 0;
}

.empty {
  padding: 24px 20px 0;
  text-align: center;
}

.empty p + p {
  margin-top: 8px;
}

.empty .pill,
.empty .btn {
  margin-top: 24px;
}

.empty-boys {
  margin-top: 28px;
}

.empty-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 24px;
}

.empty-names a {
  display: block;
  padding: 7px 16px;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.empty-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* 並び替え */

.sort {
  margin-bottom: 28px;
}

.sort ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sort a {
  display: block;
  padding: 9px 18px;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* いま選ばれている並び */
.sort [aria-current] {
  background-color: #F4C430;
  box-shadow: none;
}

/* ページ送り */

.pager {
  margin-top: 44px;
}

.pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pager a,
.pager span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 14px;
}

/* いま見ているページ */
.pager .current {
  background-color: #F4C430;
  box-shadow: none;
}

/* 見つからないとき */

.notfound-face {
  width: 168px;
  height: 168px;
  margin: 120px auto 0;
  padding: 12px;
  border-radius: 999px;
  background-color: #FBEFCF;
}

.notfound-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.notfound-face + .page-head {
  padding-top: 28px;
}

/* 下層ページ ここまで */

/* 節の背景の線画 ここから
----------------------------*/

/* 🔴 試し。やめるときは、この節と functions.php の「節の背景の線画」を消せば戻る。
   絵そのものは images/art-*.png があるときだけ head で当たる */

.posts,
.boys,
.photo,
.flow {
  position: relative;
  z-index: 0;
}

/* カメラだけは一覧そのものに付ける。項目が増えたら一緒に下がって、隠れない */
.photo .album-list {
  position: relative;
}

.photo .album-list::after {
  top: calc(100% + 32px);
  right: 0;
  bottom: auto;
}

/* その絵が入る余白を節に持たせる */
.photo {
  padding-bottom: calc(min(26vw, 330px) + 116px);
}

.posts::before,
.boys::before,
.flow::before,
.photo .album-list::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* 巨大英字は節の上、内容は中央。絵は節の下にある空き帯へ丸ごと置く */
  bottom: 5%;
  width: min(26vw, 330px);
  aspect-ratio: 1;
  /* 手描きの細い線なので、これくらい無いと見えない。本文の読みやすさは落とさない */
  opacity: 0.38;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* 左右交互に置いて、同じ位置の繰り返しに見せない */
.posts::before {
  right: 6vw;
}

.boys::before,
.flow::before {
  left: 6vw;
}

/* この節だけ下に空きがない（手順も連絡先も白いカード）。手順の左脇に寄せる。
   黄はいちばん弱く見えるので濃さも上げる */
.flow::before {
  top: 30%;
  bottom: auto;
  left: -2vw;
  opacity: 0.46;
}

/* 流れの下から、本体サイトの案内へ送る */
.flow-more {
  margin-top: 32px;
  text-align: center;
}

/* 節の背景の線画 ここまで */

/* 初いいね ここから
----------------------------*/

.firstlike {
  position: fixed;
  right: 0;
  bottom: 96px;
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 22px 30px;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 8px 30px rgba(26, 26, 26, 0.25);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.6);
}

/* ためてから、はじける */
.firstlike.on {
  animation: pop 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.6);
  }

  30% {
    opacity: 1;
    transform: translateY(0) scale(0.88);
  }

  /* ここで一度止めて、ためを作る */
  52% {
    transform: translateY(0) scale(0.86);
  }

  66% {
    transform: translateY(0) scale(1.09);
  }

  82% {
    transform: translateY(0) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.firstlike-title {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.1em;
}

.firstlike-text {
  margin-top: 6px;
  color: #6B6B6B;
  font-size: 13px;
}

.firstlike .pill {
  margin-top: 16px;
}

/* まわりへ飛ぶ粒 */
/* はじけた瞬間に広がる輪 */
.firstlike-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #F4C430;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.firstlike.on .firstlike-ring {
  animation: ring 0.5s 0.44s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes ring {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }

  100% {
    opacity: 0;
    transform: scale(7);
  }
}

.firstlike-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 10px);
  height: var(--size, 10px);
  margin: calc(var(--size, 10px) / -2) 0 0 calc(var(--size, 10px) / -2);
  border-radius: 999px;
  background-color: #F4C430;
  opacity: 0;
  pointer-events: none;
}

.firstlike-spark:nth-child(4n) {
  background-color: #EF7C9E;
}

.firstlike-spark:nth-child(4n + 1) {
  background-color: #F2603C;
}

.firstlike-spark:nth-child(4n + 2) {
  background-color: #4FA3D1;
}

/* ためが終わる 0.44 秒で、16粒が一斉に出る */
.firstlike.on .firstlike-spark {
  animation: spark 0.62s 0.44s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes spark {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(6px) scale(0.6);
  }

  30% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(calc(var(--far) * 0.7)) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--far)) scale(0.2);
  }
}

/* 一度外して付け直した人にだけ出る。祝いとは別の入りかたにする */
.firstlike.sad {
  transform: translateY(-16px) scale(0.94);
}

.firstlike.sad.on {
  animation: droop 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes droop {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.firstlike.sad .firstlike-title {
  color: #3B7FA8;
}

/* 雨 */
.rain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 59;
  overflow: hidden;
  pointer-events: none;
}

.rain.out,
.hearts.out {
  opacity: 0;
}

.rain,
.hearts {
  transition: opacity 0.8s ease;
}

.rain-drop {
  position: absolute;
  top: -70px;
  left: var(--x, 50%);
  width: 2px;
  height: var(--len, 20px);
  border-radius: 999px;
  background-color: #4FA3D1;
  opacity: 0;
  animation: fall var(--speed, 0.9s) var(--wait, 0ms) linear infinite;
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  12% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.5;
    transform: translateY(112vh);
  }
}

/* 終わりぎわの花火 */
.fireworks {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  overflow: hidden;
  pointer-events: none;
}

.firework {
  position: absolute;
  top: var(--top, 30%);
  left: var(--x, 50%);
  width: 0;
  height: 0;
  /* 開いたあと、ゆっくり下がる */
  animation: sink 0.95s calc(var(--wait, 0ms) + 0.6s) ease-in forwards;
}

/* 打ち上がる玉。上がりながら細く伸びる */
.firework-shell {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--color, #F4C430);
  opacity: 0;
  animation: shoot 0.6s var(--wait, 0ms) cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

/* はじけた火の粉 */
.firework-spark {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--color, #F4C430);
  opacity: 0;
  animation: burst 0.95s calc(var(--wait, 0ms) + 0.6s) cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
}

@keyframes shoot {
  0% {
    opacity: 1;
    transform: translateY(86vh) scaleY(2.6);
  }

  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes burst {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(0) scale(1.2);
  }

  68% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--far)) scale(0.3);
  }
}

@keyframes sink {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(20px);
  }
}

/* 消えるときは薄くしてから。祝い・泣き・礼のすべてに効かせる */
.firstlike.out {
  animation: fadeout 0.6s ease forwards;
}

@keyframes fadeout {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* 3回目からの礼。祝いより静かに、泣きより明るく入れる */
.firstlike.glad .firstlike-title {
  color: #D9527A;
}

.firstlike.glad.on {
  animation: pop 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ハートがゆっくり散る */
.hearts {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 59;
  overflow: hidden;
  pointer-events: none;
}

.heart {
  position: absolute;
  top: -70px;
  left: var(--x, 50%);
  color: #EF7C9E;
  font-size: var(--size, 24px);
  line-height: 1;
  opacity: 0;
  animation: drift var(--speed, 3s) var(--wait, 0ms) linear infinite;
}

/* 2色を混ぜて、同じ形の繰り返しに見せない */
.heart:nth-child(3n) {
  color: #F2603C;
}

.heart:nth-child(5n) {
  color: #D9527A;
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }

  12% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.92;
    transform: translate(var(--drift, 20px), 112vh) rotate(var(--spin, 20deg));
  }
}

/* 初いいね ここまで */

/* お気に入り ここから
----------------------------*/

.favs {
  padding: 40px 0 0;
}

.fav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* まだ誰も登録していないときの案内 */
.fav-hint {
  color: #6B6B6B;
  font-size: 14px;
}

/* 1人でも登録されたら案内は消す */
.fav-list:not(:empty) + .fav-hint {
  display: none;
}

/* 吹き出しが出るときだけ、その高さぶん空ける（見出しに掛からない量） */
.favs.has-pop .fav-list {
  margin-top: 56px;
}

.fav-item {
  position: relative;
}

/* 名前の上の吹き出し */
.fav-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  /* 白文字で読めるところまでコーラルを濃くした色。白／この色で 4.89 */
  background-color: #CC3F1C;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* 下向きの小さな三角 */
.fav-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #CC3F1C;
}

/* ぽんと出て、そのあとゆっくり上下する */
.motion .fav-pop {
  animation: popin 0.5s 0.4s backwards cubic-bezier(0.2, 0.8, 0.2, 1),
             bob 2.4s 0.9s ease-in-out infinite;
}

@keyframes popin {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(9px) scale(0.55);
  }

  62% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.12);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* 前に見たときより新しい記事があるとき */
.fav-new {
  padding: 3px 9px;
  border-radius: 999px;
  background-color: #F2603C;
  color: #1A1A1A;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.fav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.fav-mark {
  color: #D8D4CF;
  font-size: 15px;
}

/* 登録ずみ */
.fav.on {
  background-color: #FBEFCF;
}

.fav.on .fav-mark {
  color: #F4C430;
}

/* 名前とお気に入りをひとまとまりにする。近くに置いて、対象が「この人」だと伝える */
.writer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 20px;
}

/* 主役は名前。ボタンは小さくする */
.writer-head .fav {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
}

/* 🔴 横に並べない。2段にして、上に「記事をぜんぶ見る」、下に X。
   横並びだと、記事を読みたい人が隣の X を押してしまう。
   幅は中身なりにして、2つとも中央に置く */
.writer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.boy-fav {
  margin-top: 14px;
}

/* お気に入り ここまで */

/* フォトのページ ここから
----------------------------*/

/* ★ 背景の色はここだけ変えれば全部変わる。
   フッターの #1A1A1A とほぼ同じにして、サイト内で色を揃えている */
.is-photo {
  background-color: #1C1C1C;
}

.photo-page {
  padding-top: 108px;
  padding-bottom: 120px;
  background-color: inherit;
}

/* ヘッダーも暗くして、面をひと続きにする */
.is-photo .page-header {
  background-color: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 暗い面で見えるように、ボタンの色を組み替える */
.is-photo .page-header .pill {
  background-color: transparent;
  color: #F2EDE6;
  box-shadow: inset 0 0 0 1px rgba(242, 237, 230, 0.45);
}

.is-photo .page-header .btn-dark {
  background-color: #F2EDE6;
  color: #1A1A1A;
}

.is-photo .page-header .sns {
  color: #F2EDE6;
}

.photo-title {
  margin-bottom: 48px;
  color: #FFF3DC;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.32em;
  text-align: center;
  /* 灯りの中でも沈まないよう、後ろにうっすら光を回す */
  text-shadow: 0 0 26px rgba(0, 0, 0, 0.75),
               0 0 60px rgba(255, 226, 138, 0.28);
  /* ぼやけた文字に焦点が合っていく。写真を見に来た人の目を、まずここに置く */
  animation: titleFocus 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes titleFocus {

  0% {
    opacity: 0;
    letter-spacing: 0.62em;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    letter-spacing: 0.32em;
    filter: blur(0);
  }

}

/* 記事ページ用の上余白 150px が効いてしまうので、ここで打ち消す。
   幅を絞って、写真の周りに灯りの見える余白を作る */
.photo-page .entry {
  max-width: 1120px;
  padding-top: 0;
}

.photo-page .entry-body > p {
  max-width: 34em;
  margin: 0 auto 28px;
  color: #9A9186;
  text-align: center;
}

.photo-page .entry-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 18px;
  margin-top: 0;
}

/* アルバムのページは写真だけを見せる。本文を書いても表には出さない。
   🔴 「figure 以外を消す」にすると、写真の包み方が少し変わっただけで
   写真まで消える。消すのは文章の入れものだけにしておく */
.photo-page .entry-body > p,
.photo-page .entry-body > h1,
.photo-page .entry-body > h2,
.photo-page .entry-body > h3,
.photo-page .entry-body > h4,
.photo-page .entry-body > h5,
.photo-page .entry-body > h6,
.photo-page .entry-body > ul,
.photo-page .entry-body > ol,
.photo-page .entry-body > dl,
.photo-page .entry-body > table,
.photo-page .entry-body > blockquote,
.photo-page .entry-body > pre,
.photo-page .entry-body > hr,
.photo-page .entry-body .wp-block-gallery > figcaption {
  display: none;
}

/* ただし、写真が入っているものは消さない。文章に画像を混ぜても落とさない */
@supports selector(:has(img)) {

  .photo-page .entry-body > *:has(img) {
    display: block;
  }

}

.photo-page .entry-body .wp-block-gallery:not(#hakata) {
  display: contents;
}

/* WordPress 側が :not(#…) でID相当の強さを稼いでいるので、こちらも同じ手で並ぶ */
/* 🔴 WordPress は枚数に応じて figure に width: calc(50% - …) を当ててくる。
   しかも兄弟セレクタで :not(#…) を2つ使うので、強さ比べでは勝てない
   （2枚以上入れたギャラリーだけ、写真が半分の幅になっていた）。

   min-width は width より後に効く。強さに関係なく必ず勝つので、
   セレクタを長くする競争から降りて、こちらで止める */
.photo-page .entry-body .wp-block-gallery figure.wp-block-image:not(#hakata),
.photo-page .entry-body > figure.wp-block-image:not(#hakata) {
  position: relative;
  z-index: 1;
  display: block;
  /* ギャラリーの中の並び方（flex）を持ち込ませない */
  flex: none;
  width: 100%;
  min-width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-page .entry-body .wp-block-gallery figure.wp-block-image img:not(#hakata),
.photo-page .entry-body > figure img:not(#hakata) {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
  filter: brightness(0.78);
  transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 置いたところだけ明るくなって、少し手前に出る。
   わずかに傾けると、手に取って眺めている感じになる。
   向きは1枚ずつ変える。全部同じだと機械が動いたように見える */
.photo-page .entry-body figure.wp-block-image:hover {
  z-index: 2;
  transform: scale(1.06) rotate(-1.4deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.photo-page .entry-body figure.wp-block-image:nth-child(even):hover {
  transform: scale(1.06) rotate(1.6deg);
}

.photo-page .entry-body figure.wp-block-image:nth-child(3n):hover {
  transform: scale(1.07) rotate(-0.8deg);
}

.photo-page .entry-body figure.wp-block-image:nth-child(5n):hover {
  transform: scale(1.05) rotate(2deg);
}

.photo-page .entry-body figure.wp-block-image:hover img:not(#hakata) {
  filter: brightness(1.08);
}

/* 写真に付けた名前 */
.photo-page .entry-body figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 14px 14px;
  background-image: linear-gradient(to bottom, rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.85));
  color: #EADCC6;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: left;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.photo-page .entry-body figure.wp-block-image:hover figcaption,
.photo-page .entry-body figure.wp-block-image:focus-within figcaption {
  opacity: 1;
}

@media (hover: none) {

  .photo-page .entry-body figcaption {
    opacity: 1;
  }

  .photo-page .entry-body figure.wp-block-image img:not(#hakata) {
    filter: none;
  }

}

/* フォトの下のページに並ぶ「ボーイのカード」の名前。

   🔴 写真グリッドの figcaption と同じ見せ方に揃える。
   ふだんは写真だけを見せ、マウスを乗せた時だけ名前を出す。

   ふつうのページ（トップやフォトアルバム）では、これまでどおり
   写真の下に黒い文字で出る。ここで変えるのは .is-photo の中だけ。
   暗い背景では、下に出す黒い文字がそのままでは読めなくなるため
------------------------*/

.is-photo .album a {
  position: relative;
  display: block;
}

.is-photo .album-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin-top: 0;
  padding: 34px 14px 14px;
  background-image: linear-gradient(to bottom, rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.85));
  color: #EADCC6;
  font-size: 14px;
  text-align: left;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.is-photo .album a:hover .album-name,
.is-photo .album a:focus-visible .album-name {
  opacity: 1;
}

/* 🔴 指で触る画面にはホバーが無い。名前が一生出ないことになるので、
   そのときは最初から出しておく（写真グリッドの figcaption と同じ扱い） */
@media (hover: none) {

  .is-photo .album-name {
    opacity: 1;
  }

}

/* 後ろでゆっくりゆれる灯り。
   🔴 ぼかしと動きを同じ要素に持たせると、毎コマぼかし直しになって重い。
   ぼかしは内側にかけて動かさず、外側の箱だけを動かす。
   そうすると、ぼかした結果を使い回して位置だけ変えるので軽い */
.lantern {
  position: fixed;
  top: -4vh;
  right: -4vw;
  bottom: -4vh;
  left: -4vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
  animation: lanternDrift 38s linear infinite alternate;
}

/* ぼかしはこちら。動かさない。中身はただの絵なので、外側が拡大しても軽い */
.lantern canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 半径を大きくするほど重い。絵の側をやわらかく描いて、ぼかしは軽く済ませる */
  filter: blur(14px);
  opacity: 0.78;
}

/* ゆっくり行って、ゆっくり戻る */
@keyframes lanternDrift {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }

  50% {
    transform: translate3d(6%, 5%, 0) scale(1.12);
  }

  100% {
    transform: translate3d(2%, 8%, 0) scale(1.05);
  }
}

/* 写真より後ろに置く */
.photo-page .entry,
.photo-page .album-near,
.photo-page .entry-reserve,
.photo-page .photo-title {
  position: relative;
  z-index: 1;
}

/* 迎え入れの幕 ここから
   暗いところに入って、名前を呼ばれてから部屋が見える、という順番にする */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1C1C1C;
  /* 押せないようにはしない。急ぐ人の邪魔をしない */
  pointer-events: none;
  /* 直線で送る。緩急を付けると出だしが速すぎて「ふわっと」にならない */
  animation: welcomeVeil 2.8s linear forwards;
}

.welcome span {
  color: #FFF3DC;
  /* 明朝で置く。ゴシックより、迎えられている感じが出る */
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.5em;
  /* 字間の分だけ右にずれるので、最後の一文字ぶん戻す */
  text-indent: 0.5em;
  text-shadow: 0 0 40px rgba(255, 226, 138, 0.45);
  animation: welcomeWord 2.8s linear forwards;
}

/* 幕。最後は完全に消して、触れないところへ片づける */
@keyframes welcomeVeil {

  0%,
  66% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }

}

/* 文字。ぼやけた状態から浮かび上がって、幕より先に引く */
@keyframes welcomeWord {

  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(10px);
  }

  34%,
  62% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-8px);
  }

}

/* 迎え入れの幕 ここまで */

/* 🔴 灯りは position:fixed の z-index:0。
   位置を指定していない要素は、背景も文字もその下に潜る。
   フッターは持ち上げたうえで黒く塗りつぶし、読めるようにする */
.is-photo .page-footer {
  position: relative;
  z-index: 1;
  background-color: #111111;
}

@media (prefers-reduced-motion: reduce) {

  .lantern {
    display: none;
  }

  .photo-title {
    animation: none;
  }

  .welcome {
    display: none;
  }

}

/* 別の項目へ */
.album-near {
  margin-top: 72px;
  text-align: center;
}

.album-near-label {
  color: #8A8279;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.album-near-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.album-near-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  color: #F2EDE6;
  box-shadow: inset 0 0 0 1px rgba(242, 237, 230, 0.35);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.album-near-links a:hover {
  background-color: rgba(242, 237, 230, 0.12);
}

/* 押したときに広がる拡大表示 */
.zoom {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(10, 8, 6, 0.95);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom.on {
  opacity: 1;
}

/* 引く 120px は、下に続くボタン(48)と枚数(20)と、その間隔(26+14)の合計。
   🔴 上下中央で浮かせると、縦長の写真のときだけ下が大きく空いて間隔が揃わない。
   ボタンを流れの中に戻して、写真のすぐ下に付いてくるようにしてある */
.zoom img {
  max-width: 100%;
  max-height: calc(100% - 120px);
  border-radius: 4px;
  object-fit: contain;
}

.zoom-close,
.zoom-prev,
.zoom-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
}

.zoom-close {
  top: 16px;
  right: 16px;
}

.zoom-prev {
  top: 50%;
  left: 12px;
  margin-top: -24px;
}

.zoom-next {
  top: 50%;
  right: 12px;
  margin-top: -24px;
}

/* 拡大したときの指名ボタン */
.zoom-book {
  display: block;
  width: fit-content;
  /* 名前がどれだけ長くても折り返さない。入りきらないときだけ … で詰める */
  max-width: 100%;
  /* 写真とボタンの間 */
  margin-top: 26px;
  padding: 0 24px;
  overflow: hidden;
  border-radius: 999px;
  background-color: #F4C430;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 15px;
  line-height: 48px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 何枚目か */
.zoom-count {
  margin-top: 14px;
  color: #C9C9C9;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-align: center;
}

/* フォトのページ ここまで */

/* 記事ページ ここから
----------------------------*/

/* 記事の上のカテゴリとボーイ名。どちらも押して戻れる */
.entry-boy {
  padding: 3px 12px;
  border-radius: 999px;
  background-color: #EF7C9E;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* 前後の記事 */

.entry-nav {
  display: grid;
  gap: 12px;
  max-width: 700px;
  margin-top: 40px;
}

.entry-nav a {
  display: block;
  padding: 18px 20px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
}

.entry-nav span {
  display: block;
  margin-bottom: 6px;
  color: #6B6B6B;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.entry-nav-next {
  text-align: right;
}

/* 記事の末尾に置く検索窓。ここは貼り付かない */
.entry-search {
  padding: 0 0 84px;
}

.entry-search-lead {
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-align: center;
}

.search-bar.plain {
  position: static;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

/* 本文は1行37字前後に収める。760pxだと41字になって読みにくい */
.entry {
  max-width: 700px;
  padding-top: 104px;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entry-title {
  margin-top: 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.entry-thumb {
  aspect-ratio: 3 / 2;
  margin-top: 24px;
}

.entry-body {
  margin-top: 28px;
}

.entry-body > * + * {
  margin-top: 1.5em;
}

/* ここから下は、運営がブロックエディタで入れたものに当たる指定。
   見出し・箇条書き・引用・表・画像を入れても形が崩れないようにしておく */

.entry-body h2 {
  margin-top: 2.4em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #F4C430;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.entry-body h3 {
  margin-top: 2em;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.entry-body h4 {
  margin-top: 1.8em;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.entry-body ul,
.entry-body ol {
  padding-left: 1.4em;
}

.entry-body ul {
  list-style: disc;
}

.entry-body ol {
  list-style: decimal;
}

.entry-body li + li {
  margin-top: 0.5em;
}

.entry-body blockquote {
  padding: 16px 20px;
  border-left: 3px solid #EF7C9E;
  border-radius: 0 8px 8px 0;
  background-color: #F8F6F3;
}

.entry-body a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entry-body img {
  border-radius: 8px;
}

.entry-body figure {
  margin: 0;
  /* 表や横に長い画像は、この中だけで送れるようにする */
  overflow-x: auto;
}

.entry-body figcaption {
  margin-top: 8px;
  color: #6B6B6B;
  font-size: 13px;
  line-height: 1.7;
}

.entry-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.entry-body th,
.entry-body td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
  text-align: left;
}

.entry-body th {
  color: #6B6B6B;
  font-weight: 700;
}

.entry-body pre {
  overflow-x: auto;
  padding: 16px;
  border-radius: 8px;
  background-color: #F1EFEC;
  font-size: 14px;
}

.entry-body hr {
  border: 0;
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}

.entry-body iframe,
.entry-body video {
  max-width: 100%;
  border-radius: 8px;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}

.like {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.like-mark {
  color: #D8D4CF;
  font-size: 17px;
}

/* 一度押したら戻せない。押した相手はブラウザが覚えている */
.like.done {
  background-color: #F7DDE4;
  cursor: default;
}

.like.done .like-mark {
  color: #EF7C9E;
}

.like-count {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 書いた人 */

.writer {
  max-width: 700px;
  margin-top: 40px;
  padding: 32px 24px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(170, 170, 170, 0.3);
  text-align: center;
}

.writer-label {
  margin-top: 16px;
  color: #6B6B6B;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
}

.writer-name {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
}

/* 記事の下の予約 */

.entry-reserve {
  max-width: 700px;
  margin-top: 40px;
  padding: 36px 24px;
  border-radius: 8px;
  background-color: #F4C430;
  text-align: center;
}

/* 指名の言い方。予約は外部サイトなので、ここで名前を持っていってもらう */
.entry-reserve-name {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.entry-reserve-name strong {
  display: inline-block;
  margin: 0 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: #1A1A1A;
  color: #FFFFFF;
  font-size: 17px;
  letter-spacing: 0.1em;
}

.entry-reserve-lead {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.entry-reserve-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.entry-reserve .btn {
  background-color: #1A1A1A;
  color: #FFFFFF;
}

/* 予約と並ぶ副の導線。黄色い面の上なので白で立てる */
.entry-reserve .btn-line {
  gap: 8px;
  background-color: #FFFFFF;
  color: #1A1A1A;
}

.entry-reserve-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entry-reserve-note {
  margin-top: 18px;
  font-size: 13px;
}

/* ほかの記事 */

.others {
  padding: 84px 0;
}

.others .section-japanese {
  margin-bottom: 28px;
}

.others .card-list {
  margin-top: 0;
}

/* 記事ページ ここまで */

/* フッター ここから
----------------------------*/

.page-footer {
  /* 下の余白は、追従ボタンに隠れるぶんを空けている */
  padding: 56px 20px 104px;
  background-color: #1A1A1A;
  color: #FFFFFF;
  text-align: center;
}

.footer-name {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
}

.footer-logo {
  width: auto;
  height: 52px;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin-top: 28px;
}

.footer-nav a {
  display: block;
  padding: 8px 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.footer-info {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 8px 16px;
  max-width: 460px;
  margin: 32px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14px;
  text-align: left;
}

.footer-info dt {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.footer-follow {
  margin-top: 32px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
}

.footer-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.footer-sns a {
  display: block;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.notice {
  margin-top: 36px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.copyright {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* フッター ここまで */

/* デスクトップ版 ここから
----------------------------*/

@media (min-width: 769px) {

  /* 共通部分 */

  .wrapper {
    padding-right: 40px;
    padding-left: 40px;
  }

  .search-block,
  .posts,
  .boys,
  .photo,
  .flow,
  .recruit {
    padding: 130px 0;
    scroll-margin-top: 84px;
  }

  /* カメラの絵は一覧の下に付いているので、そのぶんの余白を戻す */
  .photo {
    padding-bottom: calc(min(26vw, 330px) + 130px);
  }

  /* 巨大な英字の下端に、中身をしっかり重ねる */
  .card-list,
    .photo-list,
  .step-list,
  .recruit-body {
    margin-top: -76px;
  }

  .more {
    margin-top: 56px;
  }

  html {
    scroll-padding-bottom: 0;
  }

  .fixed-bar {
    display: none;
  }

  .page-main {
    padding-top: 150px;
  }

  /* ヘッダー */

  /* 追従バーはPCでは出ないので、下に寄せる */
  .guide-open {
    bottom: 24px;
    left: 24px;
  }

  .guide-note {
    padding: 22px 24px 20px;
  }

  .guide-text {
    font-size: 16px;
  }

  /* PCはヘッダーが84px。スマホと同じ数字だとバナーが潜るので戻す */
  .banner {
    padding-top: 104px;
  }

  .page-header {
    height: 84px;
    padding: 0 24px 0 40px;
  }

  .page-header .btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: 13px;
  }

  .site-name {
    font-size: 22px;
  }

  .site-logo {
    height: 46px;
    max-width: 320px;
  }

  .header-actions {
    gap: 14px;
  }

  .header-actions .sns,
  .header-actions .btn {
    display: flex;
  }

  /* さがす */

  .search-bar {
    top: 84px;
    display: flex;
    justify-content: flex-end;
    padding: 14px 0;
    transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 幅と右余白だけを動かす。どちらも長さなので滑らかに変わる */
  .search-bar .search-form {
    width: 100%;
    max-width: 540px;
    margin-right: calc(50% - 270px);
    padding: 0;
    transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                margin-right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 🔴 小さくなっても、流れの中の高さは変えない。
     ここが縮むと、下の中身が1コマで8px飛び上がって「がくっ」となる。
     80px は、ふつうの状態のバーの高さ（上下の余白12px＋窓52px＋影） */
  .search-bar {
    min-height: 80px;
    /* 🔴 バーは flex。伸ばしたままだと、中の窓が 80px の高さに
       引き伸ばされて、小さくならない。真ん中に置くだけにする */
    align-items: center;
  }

  /* 貼り付いたら、面をなくして右上の小さな窓になる */
  .search-bar.is-small {
    background-color: transparent;
    box-shadow: none;
    /* 面が消えるので、下の本文を押さえない */
    pointer-events: none;
  }

  .search-bar.is-small .search-form {
    max-width: 268px;
    margin-right: 40px;
    pointer-events: auto;
  }

  .search-bar.is-small input {
    min-height: 44px;
    font-size: 14px;
  }

  .search-bar.is-small button {
    min-height: 44px;
    padding: 0 18px;
    font-size: 13px;
  }

  /* 追従バーが無いので右下へ戻す */
  .page-top {
    right: 24px;
    left: auto;
    bottom: 24px;
    width: 52px;
    height: 52px;
  }

  /* 新着記事 */

  .card-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .card-link {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0 20px;
    padding: 12px;
  }

  .card-title {
    font-size: 19px;
  }

  /* 新着記事の帯 */

  .latest {
    /* 固定ヘッダー84px の下に、64px の空きが残る高さ */
    padding-top: 148px;
  }

  .latest-list {
    padding: 20px;
    scroll-padding-left: 20px;
    gap: 20px;
  }

  .latest-item {
    flex: 0 0 260px;
  }

  .latest-title {
    font-size: 15px;
  }

  /* フォトのページ */

  .photo-page {
    padding-top: 132px;
    padding-bottom: 140px;
  }

  .photo-page .entry-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 44px;
  }

  /* フォトアルバム */

  .album-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
  }

  .album-name {
    font-size: 17px;
  }

  /* ご予約の流れ */

  .step {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 32px;
    padding: 32px;
  }

  .step + .step {
    margin-top: 20px;
  }

  .step-number {
    width: 84px;
    height: 84px;
    font-size: 34px;
  }

  .step .thumb {
    margin-top: 0;
  }

  .step-body {
    margin-top: 0;
  }

  .step-title {
    font-size: 22px;
  }

  .contact {
    margin-top: 48px;
    padding: 44px;
  }

  .contact-list {
    grid-template-columns: 7em minmax(0, 1fr);
    max-width: 460px;
    margin-right: auto;
    margin-left: auto;
  }

  /* アルバイト募集 */

  .recruit-body .btn {
    margin-top: 36px;
  }

  /* 下層ページ */

  .page-head {
    padding-top: 150px;
  }

  .notfound-face {
    width: 200px;
    height: 200px;
    margin-top: 160px;
  }

  .notfound-face + .page-head {
    padding-top: 32px;
  }

  .page-title {
    font-size: 30px;
  }

  .listing {
    padding: 56px 0 130px;
  }

  /* 記事ページ */

  .entry {
    padding-top: 150px;
  }

  .entry-title {
    font-size: 34px;
  }

  .entry-nav {
    grid-template-columns: 1fr 1fr;
  }

  .entry-reserve-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
  }

  .others {
    padding: 130px 0;
  }

  /* フッター */

  .page-footer {
    padding: 88px 40px 64px;
  }

  .footer-nav {
    gap: 6px 40px;
    margin-top: 40px;
  }

  .footer-info {
    margin-top: 44px;
  }

  .notice {
    margin-top: 48px;
  }


  /* さらに広い画面では4列。写真が主役なので、余白より枚数を優先する */
  @media (min-width: 1180px) {

    .photo-page .entry-body {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 56px 48px;
    }

  }

}

/* デスクトップ版 ここまで */