/* ==========================================================================
   MuChat LP  —  styles
   Design tokens follow the Nocturne design system.
   ========================================================================== */

:root {
  --color-bg: #161826;
  --color-text: #e9e9ed;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-900: #292b31;

  --accent: #e1a0ee;
  --accent-soft: rgba(225, 160, 238, 0.42);
  --accent-line: rgba(225, 160, 238, 0.5);

  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 明朝はKVのキャッチコピー(.kv__copy)だけに使う。見出しは本文と同じゴシック */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --radius: 8px;
  --radius-lg: 12px;

  /* the shared "no background → thick glowing border" treatment */
  --glow-border: 2px solid var(--accent-soft);
  --glow-shadow: 0 0 20px rgba(225, 160, 238, 0.22), 0 0 52px rgba(225, 160, 238, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.9;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

img { border-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #eec4f6; text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(225, 160, 238, 0.28); }

/* --------------------------------------------------------------- header --- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px clamp(16px, 3vw, 34px);
  background: transparent;
  pointer-events: none;
}

.site-header__logo {
  display: block;
  width: auto;
  height: clamp(22px, 2.6vw, 30px);
  filter: drop-shadow(0 0 14px rgba(225, 160, 238, 0.35)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* ------------------------------------------------------------------- kv --- */

.kv {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/*
 * 2枚を重ねて交互に使う。表に出ているほうにだけ .is-active が付く。
 * フェードの秒数は script.js の KV_FADE と揃えること(切り替えの間合いの計算に使っている)。
 *
 * 画像は横長(3840x2160)の1枚だけ。cover なので、縦長の画面では
 * 【高さが画面ぴったりになるまで拡大して、はみ出した左右を均等に切る】。
 * スマホ用の縦長画像を別に持たないのはこのため。
 */
.kv__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.kv__image.is-active { opacity: 1; }

/*
 * KVには覆いを一切かけない(画像本来の明るさで見せるため)。
 * 以前は上半分の暗幕と、下端を背景色へ繋ぐグラデーションがあったが、どちらも外した。
 * 下端はページの背景色とくっきり分かれる。コピーの可読性は .kv__copy / .kv__sub の
 * text-shadow だけが受け持つ。
 */

/*
 * KVに出ている作品のパッケージ。右下に白枠で小さく置く。
 * Scroll ↓ は中央なので、狭い画面でもぶつからない。
 *
 * padding はこのボタンの見た目には出ない(背景も枠も無い)。
 * .kv は overflow:hidden なので、傾き・ホバーの拡大・影がそのまま端に届くと切れてしまう。
 * ボタンを一回り大きく取って、画像がその余白の中で伸びるようにしている。
 * 見かけの位置は right/bottom + padding で決まる。
 */
.kv__pkg {
  position: absolute;
  right: clamp(0px, 1vw, 14px);
  bottom: clamp(0px, 1.2vh, 14px);
  z-index: 2;
  padding: 16px;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  /* KVの入れ替えに合わせて、いったん消してから差し替える */
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.kv__pkg.is-shown { opacity: 1; }

.kv__pkg img {
  width: clamp(54px, 6.4vw, 88px);
  height: auto;
  border: 3px solid #fff;
  border-radius: 2px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  transform: rotate(-4.5deg);
  transition: transform 0.22s ease;
}

.kv__pkg:hover img,
.kv__pkg:focus-visible img {
  transform: rotate(-4.5deg) scale(1.07);
}

/* 枠線は画像側に出す。ボタンに出すと、上の余白のぶん遠くに浮いて見えるため */
.kv__pkg:focus-visible { outline: none; }

.kv__pkg:focus-visible img {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.kv__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3.2vh, 34px);
  transform: translateX(-50%);
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #ffffff;
  white-space: nowrap;
  animation: kv-scroll 2.6s ease-in-out infinite;
}

.kv__body {
  position: relative;
  z-index: 2;
  padding: clamp(62px, 9.5vh, 150px) 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 2.1vh, 26px);
  animation: kv-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kv__copy {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(23px, min(4.6vw, 5.2vh), 50px);
  line-height: 1.55;
  letter-spacing: 0.13em;
  color: #fdfbff;
  animation: kv-pulse 6.5s ease-in-out infinite;
}

.kv__sub {
  margin: 0;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.95);
  /*
   * 影の色は上のメインコピー(kv-pulse)と揃える。白のにじみ＋アクセントの光＋黒の落ち影。
   * 以前はここだけ紺(11,9,20)の暗い縁取りで、上下で光り方が違って見えていた。
   * 半径はこちらが小さい文字なので、比率を保ったまま縮めてある。
   */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.50), 0 0 26px rgba(225, 160, 238, 0.45), 0 2px 5px rgba(0, 0, 0, 0.55);
}

.kv__pill {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--accent-line);
  border-radius: 999px;
  padding: clamp(7px, 1.2vh, 11px) 30px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #f3d9fa;
  box-shadow: 0 0 18px rgba(225, 160, 238, 0.30), 0 0 44px rgba(225, 160, 238, 0.14);
  backdrop-filter: blur(2px);
}

/* 押すと WEB版へ進むリンク(2026-10-16 に「配信準備中」の表示から変えた) */
a.kv__pill {
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}
a.kv__pill:hover {
  background-color: rgba(225, 160, 238, 0.16);
  box-shadow: 0 0 22px rgba(225, 160, 238, 0.45), 0 0 52px rgba(225, 160, 238, 0.22);
}

@keyframes kv-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 明滅。白文字＋黒影のまま、消えきらせずに濃さだけ振る */
@keyframes kv-scroll {
  0%, 100% {
    opacity: 0.40;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.95);
  }
}

/* 「視差効果を減らす」設定のとき用。薄くなる幅を浅くしてある */
@keyframes kv-scroll-soft {
  0%, 100% {
    opacity: 0.55;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.95);
  }
}

@keyframes kv-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(255,255,255,0.50), 0 0 54px rgba(225,160,238,0.42), 0 2px 6px rgba(0,0,0,0.55); }
  50%      { text-shadow: 0 0 30px rgba(255,255,255,0.72), 0 0 78px rgba(225,160,238,0.60), 0 2px 6px rgba(0,0,0,0.55); }
}

/* -------------------------------------------------------------- section --- */

.section {
  padding: clamp(56px, 8vw, 104px) 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.5vw, 40px);
}

.section--flush { padding-left: 0; padding-right: 0; }

.section--filled {
  background: var(--color-neutral-900);
  gap: 18px;
  padding: clamp(56px, 8vw, 96px) 22px;
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
}

.section__step {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--accent);
}

.section__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-shadow: 0 0 26px rgba(225, 160, 238, 0.26);
}

/*
 * スマホでだけ効く改行。PC幅では無かったことにする。
 * 見出しは自然に折り返すと変な位置で切れるので、切れてほしい場所に置いておく。
 * ※打ち消しは860pxのメディアクエリ側にある。詳細度が同じなので、
 *   この基本ルールより【後ろ】に書くこと(前に書くと効かない)
 */
.br-sp { display: none; }

.section__title--lg { font-size: clamp(21px, 3.2vw, 34px); }
.section__title--sm { font-size: clamp(19px, 2.8vw, 28px); text-shadow: none; }

.section__lead {
  margin: 0;
  max-width: 32em;
  font-size: 14px;
  color: var(--color-neutral-300);
}

.section__note {
  margin: 0;
  font-size: 13px;
  color: var(--color-neutral-400);
}

/* ------------------------------------------------------------- marquee --- */

.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/*
 * 秒数は script.js が幅を測って上書きする(枚数が変わっても速さを一定に保つため)。
 * ここの値はJSが動かなかったときの控えで、現在の58枚ぶんに合わせてある。
 * 速さそのものを変えたいときは script.js の SPEEDS を直すこと。
 */
.marquee__track {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  width: max-content;
  animation: marquee-left 377s linear infinite;
}

.marquee--reverse .marquee__track {
  animation-name: marquee-right;
  animation-duration: 445s;
}

.marquee__track img {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: clamp(132px, 19vw, 244px);
  border-radius: var(--radius);
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ----------------------------------------------------------- shot pair --- */

.shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 44px);
}

/* 画面幅にかかわらず縦に積む。並べる順序そのものに意味があるセクション用 */
.shots--stack {
  flex-direction: column;
  align-items: center;
}

.shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.shot__frame {
  width: clamp(210px, 22vw, 300px);
  border: var(--glow-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--glow-shadow);
}

.shot__frame img,
.shot__frame video { display: block; width: 100%; height: auto; }

/*
 * 「この画面はこの作品です」を示す注釈。パッケージを少し傾けた白枠で小さく置き、
 * 押すと拡大する(拡大の実装は script.js の .zoom)。
 * 傾きは、スクリーンショットの角ばった枠に対して手で置いた紙のように見せるため。
 */
.work {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(300px, 78vw);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-neutral-400);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.work__pkg {
  flex: 0 0 auto;
  width: 42px;
  height: auto;
  border: 3px solid #fff;
  border-radius: 2px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  transform: rotate(-4.5deg);
  transition: transform 0.22s ease;
}

.work:hover .work__pkg,
.work:focus-visible .work__pkg {
  transform: rotate(-4.5deg) scale(1.09);
}

.work:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.work__title {
  font-size: 11px;
  line-height: 1.65;
  /* 作品名は長いものがあるので2行で打ち切る。全文は拡大したときに出す */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shot__caption {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-neutral-400);
}

/* ------------------------------------------------------------------ faq --- */

.faq {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.faq__item {
  background: var(--color-neutral-900);
  border-radius: 10px;
  padding: 20px 22px;
}

.faq__q {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
}

.faq__a {
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-300);
}

/* ---------------------------------------------------------------- store --- */

.store {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.store__pill {
  border: var(--glow-border);
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #f0d4f8;
  box-shadow: 0 0 16px rgba(225, 160, 238, 0.22);
}

/* 配信中のストアと WEB版へのリンク。まだ出ていないものは薄くする(2026-10-16) */
.store__pill--link {
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.store__pill--link:hover {
  background-color: rgba(225, 160, 238, 0.16);
  box-shadow: 0 0 22px rgba(225, 160, 238, 0.4);
}
.store__pill--soon {
  opacity: 0.5;
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
  padding: 40px 22px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.site-footer__logo { display: block; width: auto; height: 22px; opacity: 0.8; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  font-size: 13px;
}

.site-footer__fine {
  margin: 0;
  max-width: 34em;
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-neutral-500);
}

.site-footer__copy {
  margin: 0;
  font-size: 11px;
  color: var(--color-neutral-600);
}

/* ------------------------------------------------------------- 拡大表示 --- */

/*
 * パッケージの拡大。script.js が必要になった時点で1つだけ作り、使い回す。
 * [hidden] は display:flex に負けるので、打ち消しを明示する。
 */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 7, 14, 0.93);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.zoom[hidden] { display: none; }

/*
 * 読み込みが終わるまで出さない(script.js が .is-loaded を付ける)。
 * 閉じたときに src ごと捨てているので、次に開いた瞬間は空。
 * そこを透明にしておくことで、前の作品が一瞬映るのも、空の枠が出るのも防げる。
 */
.zoom__img {
  max-width: min(400px, 84vw);
  max-height: 68vh;
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.zoom__img.is-loaded { opacity: 1; }

.zoom__title {
  margin: 0;
  max-width: min(460px, 86vw);
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-neutral-300);
}

.zoom__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.zoom__close:hover { background: rgba(255, 255, 255, 0.18); }

.zoom__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- お問い合わせ --- */

/* フッターの他のリンクと見た目を合わせる(中身はボタン) */
.site-footer__contact {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.site-footer__contact:hover { color: #eec4f6; text-decoration: underline; }

.site-footer__contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.contact {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 7, 14, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.contact[hidden] { display: none; }

.contact__panel {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px);
  border: var(--glow-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--glow-shadow);
  text-align: left;
}

.contact__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-neutral-300);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.contact__close:hover { background: rgba(255, 255, 255, 0.16); }

.contact__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.08em;
}

.contact__lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-neutral-400);
}

.contact__form { display: flex; flex-direction: column; }

.contact__label {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-neutral-300);
}

.contact__input {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(225, 160, 238, 0.34);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-family: inherit;
  /* 16px。これを下回ると、iOSのSafariが入力欄を選んだ瞬間にページを勝手に拡大する */
  font-size: 16px;
  line-height: 1.7;
}

.contact__input--area { resize: vertical; min-height: 118px; }

.contact__input::placeholder { color: var(--color-neutral-600); }

.contact__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 160, 238, 0.18);
}

.contact__send {
  align-self: stretch;
  padding: 13px 20px;
  border: 2px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(225, 160, 238, 0.10);
  color: #f3d9fa;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.contact__send:hover:not(:disabled) { background: rgba(225, 160, 238, 0.2); }

.contact__send:disabled { opacity: 0.5; cursor: default; }

/* 送信の結果。空のときは行ごと畳んで、余白が空きっぱなしにならないようにする */
.contact__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-neutral-300);
}

.contact__status:empty { display: none; }

.contact__status--error { color: #f6a8b8; }
.contact__status--done { color: #a8e6c0; }

/* 矢印を画像に重ねるための土台。script.js が .shots--pair を包んで作る */
.shots-slider {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * 左右の矢印。画像の端に重ねる。縦位置は script.js が画像の中心に合わせる
 * (キャプションと注釈のぶん、枠の中心と土台の中心はずれるため)。
 */
.shots-arrow {
  display: none;
  position: absolute;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(12, 10, 20, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.shots-arrow--prev { left: 2px; }
.shots-arrow--next { right: 2px; }

.shots-arrow:hover { background: rgba(12, 10, 20, 0.8); }

.shots-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 送りのドット。スライダーになる幅でだけ出す */
.shots-dots {
  display: none;
  gap: 9px;
  justify-content: center;
  margin-top: 14px;
}

.shots-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.shots-dots button[aria-current="true"] {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}

.shots-dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------- responsive --- */

/*
 * スマホでは男女2枚を横に並べられないので、矢印ボタンで切り替えるスライダーにする。
 * 以前は読み込みごとにどちらか一方を抽選して出していたが、それだと来た人によって
 * 片方の作品しか見えず、「両方あります」という説明と食い違っていた。
 *
 * 【スワイプにしない理由】
 * 画像が横スワイプを拾うと、その上で始めた縦スクロールまで持っていかれて、
 * ページが下に送れなくなることがある。指の動きは縦スクロールに任せて、
 * 切り替えは矢印のタップだけで行う。だから overflow-x は auto ではなく hidden
 * (それでも scrollTo による移動はできる)。
 */
@media (max-width: 860px) {
  /* 見出しの中に置いた改行を有効にする */
  .br-sp { display: inline; }

  /* ロゴはPC用の式だと下限(22px)に張り付いて小さいので、スマホ用に組み直す */
  .site-header__logo { height: clamp(26px, 7vw, 32px); }

  /*
   * メインコピーはスマホでもしっかり見せたいので、PC用の式とは別に組む。
   * 8.4vw が基本。横向きにしたときに画面の高さを食い潰さないよう 8vh で頭を押さえ、
   * 幅の狭い端末で潰れないよう 28px を下限にする。
   */
  .kv__copy { font-size: clamp(28px, min(8.4vw, 8vh), 40px); }

  .shots--pair {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    /*
     * 縦も明示して hidden にする。overflow-x だけを指定すると、CSSの規定で
     * overflow-y が visible から auto に変わり、ブロックが数pxだけ縦スクロール
     * できる状態になる。すると画像の上から始めたページのスクロールが
     * そこで一度引っかかる(2026-08-26に実機で確認)。
     */
    overflow: hidden;
  }

  .shots--pair .shot { flex: 0 0 100%; }

  .shots-arrow { display: flex; }

  .shots-dots { display: flex; }

  .shot__frame {
    width: min(300px, 78vw);
    /* 光は横幅いっぱいのスライダーに収まらず端で切れてしまうので、スマホでは出さない */
    box-shadow: none;
  }

  /*
   * スマホでは注釈のパッケージを大きくしない(傾きはそのまま)。
   * スライダーは overflow:hidden で切り抜いているうえ、注釈は .shot の一番下にあるので、
   * 拡大すると左端と下端が枠の外に出て切れてしまう。
   * 指で触る画面ではホバーの拡大そのものが効きにくいので、無くしても失うものがない。
   */
  .work:hover .work__pkg,
  .work:focus-visible .work__pkg {
    transform: rotate(-4.5deg);
  }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kv__copy { animation: none; text-shadow: 0 0 24px rgba(255,255,255,0.6), 0 0 60px rgba(225,160,238,0.45), 0 2px 6px rgba(0,0,0,0.55); }
  .kv__body { animation: none; }
  /*
   * ここだけは止めない。スクロールを促す役割があるうえ、この明滅は位置が動かないので
   * 「視差効果を減らす」が避けたい類の動きではない(点滅は毎秒0.38回で、WCAGの上限3回より十分遅い)。
   * ただし振れ幅は浅くして、動きに敏感な人にも刺さりにくくする。
   */
  .kv__scroll { animation-name: kv-scroll-soft; animation-duration: 3.4s; }
}