/* サイト全体の見た目。色は作品のサムネイルに任せ、ここは無彩色だけ / Site styles; thumbnails bring the color, so everything here stays achromatic */

:root {
  color-scheme: dark;

  --color-bg: #0b0b0c;
  --color-surface: #18181a;
  --color-line: #44454a;
  --color-control: #7a7a7e;
  --color-control-hover: #242426;
  --color-text: #f2f2f0;
  --color-muted: #b9b9b5;
  --color-on-light: #0b0b0c;
  --color-scrim: rgb(11 11 12 / 0.7);
  --color-play-bg: rgb(11 11 12 / 0.72);

  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  --size-body: 1rem;
  --size-title: 1.125rem;
  --size-wordmark: 1.25rem;
  --size-heading: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --size-lead: clamp(1.25rem, 6.4vw, 3rem);

  --weight-regular: 400;
  --weight-medium: 500;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-s: 4px;
  --radius-m: 10px;

  --duration: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --tap-size: 44px;
  --gutter: clamp(16px, 4vw, 48px);
  --page-width: 1280px;
  /* 全幅の要素の左右をそろえる余白 / Side inset that lines up every full-width block */
  --page-inset: max(var(--gutter), (100% - var(--page-width)) / 2);
  --header-height: 64px;
  --cta-height: 56px;
  --cta-offset: 12px;
  --play-size: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 下部固定ボタンがページ末尾を隠さない余白 / Keeps the sticky button from covering the end of the page */
  padding-bottom: calc(var(--cta-height) + var(--cta-offset) * 2);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  line-break: strict;
  overflow-wrap: anywhere;
  /* 文末の 1 文字だけが次の行に落ちるのを防ぐ / Keeps a last line from holding a single stray character */
  text-wrap: pretty;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* 既定の青い押下色を消す。押下は各要素で示す / Removes the default blue tap flash; each control shows its own press */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* display を指定した要素でも hidden を優先する / Lets hidden win over elements that set display */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* ヘッダー / Header */

.site-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding-inline: var(--page-inset);
}

.wordmark {
  font-size: var(--size-wordmark);
  font-weight: var(--weight-medium);
}

.site-nav {
  display: flex;
  margin-right: calc(var(--space-2) * -1);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding-inline: var(--space-2);
  text-decoration: none;
}

/* サムネイルと再生 / Thumbnails and playback */

.player {
  aspect-ratio: 16 / 9;
}

.thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  border-radius: var(--radius-s);
}

.thumb img,
.thumb video,
.player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* hqdefault の上下の黒帯も切り落とす / Also crops the letterbox bars of hqdefault */
  object-fit: cover;
  border-radius: var(--radius-s);
}

.thumb.has-clip img {
  display: none;
}

.play {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  background: var(--color-play-bg);
  color: var(--color-text);
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.play svg {
  width: 60%;
  height: 60%;
}

@media (hover: hover) {
  .thumb:hover .play {
    background: var(--color-text);
    color: var(--color-on-light);
  }
}

/* 入口 / Hero */

.hero {
  /* 文字が重なる高さ。この範囲は地の色で塗り切る / Height the text overlaps; painted solid so text never sits on the image */
  --hero-text-overlap: var(--space-16);
  position: relative;
}

.hero-media {
  aspect-ratio: 4 / 5;
  max-height: 76svh;
}

.hero .thumb,
.hero .thumb img,
.hero .thumb video {
  border-radius: 0;
}

.hero .thumb:focus-visible {
  outline-offset: -4px;
}

/* 明るい画像でも文字の 4.5:1 を保ち、地へ溶け込ませる / Keeps 4.5:1 text over bright images and melts the image into the page */
.hero .thumb::after {
  content: "";
  position: absolute;
  /* 端数の高さで画像の最下行が線として残らないよう 1px 伸ばす / Extends 1px so fractional heights leave no image line at the bottom */
  inset: 0 0 -1px;
  background:
    linear-gradient(to bottom, var(--color-scrim) var(--header-height), transparent 30%),
    linear-gradient(to top, var(--color-bg) var(--hero-text-overlap), transparent calc(var(--hero-text-overlap) + 30%));
}

.hero .play {
  --play-size: 72px;
  left: 50%;
  top: 50%;
  bottom: auto;
  margin: calc(var(--play-size) / -2);
}

.hero-text {
  position: relative;
  margin-top: calc(var(--hero-text-overlap) * -1);
  padding-inline: var(--page-inset);
  /* 画像に重なる部分でも再生ボタンを押せるようにする / Lets taps on the overlap reach the play button */
  pointer-events: none;
}

.hero-role,
.hero-credit,
.work-meta,
.credit-role,
.site-footer {
  color: var(--color-muted);
}

.hero-lead {
  margin-top: var(--space-1);
  font-size: var(--size-lead);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  font-feature-settings: "palt";
  word-break: auto-phrase;
}

.hero-credit {
  /* 文言が入る前から 1 行分の高さを取り、下の内容を動かさない / Holds one line before the text arrives, so nothing below moves */
  min-height: 1.6em;
  margin-top: var(--space-2);
}

/* 再生中は映像に何も重ねない / While playing, nothing overlaps the video */
.hero:has(iframe) .hero-media {
  aspect-ratio: 16 / 9;
  width: min(100%, (100svh - var(--header-height)) * 16 / 9);
  max-height: none;
  margin: var(--header-height) auto 0;
}

.hero:has(iframe) .hero-text {
  position: static;
  margin-top: var(--space-6);
}

.hero:has(iframe) .player iframe {
  border-radius: 0;
}

/* 区画 / Sections */

.section {
  padding: var(--space-16) var(--page-inset) 0;
  scroll-margin-top: var(--space-4);
}

.section-title {
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  font-feature-settings: "palt";
}

/* 絞り込み / Filter */

.filter {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.filter button {
  min-width: var(--tap-size);
  min-height: var(--tap-size);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-m);
  background: transparent;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.filter button[aria-pressed="true"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-on-light);
  font-weight: var(--weight-medium);
}

/* 作品 / Works */

.load-error {
  margin-top: var(--space-6);
}

.work-list {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* 描画までの間、下の料金が画面に出て押し出されるのを防ぐ / Until the works render, keeps the price section off screen so it is not pushed away */
.load-error[hidden] + .work-list:empty {
  min-height: 100svh;
}

.work-title {
  margin-top: var(--space-3);
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin-top: var(--space-1);
}

/* 実績 / Credits */

.credits {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.credits-title {
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
}

.credit {
  margin-top: var(--space-3);
}

.credit-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
}

/* 料金と依頼表で共用する入力部品 / Input parts shared by the price section and the request form */

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

.field {
  /* 誤りへ移動したとき、ラベルが画面の上端に隠れない余白 / Keeps the label clear of the viewport top when jumping to an error */
  scroll-margin-top: var(--space-4);
}

.field > label:not(.check),
.field > legend {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
}

.required {
  margin-left: var(--space-1);
  color: var(--color-text);
  font-size: 0.875rem;
}

.hint,
.price-text {
  color: var(--color-muted);
}

.hint {
  margin-top: var(--space-2);
}

.input {
  display: block;
  width: 100%;
  /* iOS の date 入力が枠からはみ出すのを防ぐ / Stops the iOS date input from overflowing */
  min-width: 0;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--duration) var(--ease-out);
}

textarea.input {
  resize: vertical;
}

.input-short {
  width: 6em;
}

.input:disabled {
  border-color: var(--color-line);
  color: var(--color-muted);
  cursor: not-allowed;
}

.has-error > .input {
  border-color: var(--color-text);
}

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

/* 文字が長い組は幅に応じて折り返す / Groups with long labels wrap with the width */
.seg-wide,
.seg-wrap {
  grid-auto-flow: row;
  grid-auto-columns: auto;
}

.seg-wide {
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
}

.seg-wrap {
  grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));
}

.seg-item {
  position: relative;
  display: block;
}

/* 本物のラジオを全面に敷く。キーボードと読み上げはそのまま効く / The real radio covers the item, so keyboard and screen readers keep working */
.seg-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-size);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-s);
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.seg-item input:checked + span {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-on-light);
  font-weight: var(--weight-medium);
}

.seg-item input:focus-visible + span {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.seg-item input:disabled {
  cursor: not-allowed;
}

.seg-item input:disabled + span {
  border-color: var(--color-line);
  color: var(--color-muted);
  text-decoration: line-through;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-size);
  cursor: pointer;
}

.check input {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  margin: 0;
  accent-color: var(--color-text);
}

/* 色に頼らず、印と文言で誤りを示す / Errors show through a mark and wording, not color */
.field-error {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-weight: var(--weight-medium);
}

.field-error::before {
  content: "!";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-on-light);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
}

@media (hover: hover) {
  .input:hover:not(:disabled) {
    background: var(--color-control-hover);
  }

  .seg-item input:not(:checked, :disabled):hover + span {
    background: var(--color-control-hover);
  }
}

/* 料金 / Price */

.plan {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.plan-choices {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.price {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.price-amount {
  /* 読み込みの前後で高さを変えない / Keeps the height the same before and after the script runs */
  min-height: 1.3em;
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  font-feature-settings: "palt";
}

.price-text {
  margin-top: var(--space-3);
}

/* 依頼表 / Request form */

.request-form {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* 子要素の最小幅で列が広がらないようにする / Stops a child's minimum width from widening the column */
.request-form > * {
  min-width: 0;
}

.plan-summary {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

.plan-summary-price {
  margin-top: var(--space-1);
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
}

.plan-summary-notes {
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
}

.form-group {
  display: grid;
  gap: var(--space-6);
}

.form-group-title {
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
}

/* Turnstile が出るまでの高さを取っておく / Holds the height until Turnstile renders */
.turnstile {
  min-height: 65px;
}

.confirm {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}

.confirm-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.confirm-list dt {
  color: var(--color-muted);
}

.confirm-list dd {
  margin: 0;
}

.submit {
  width: 100%;
  min-height: var(--cta-height);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-text);
  color: var(--color-on-light);
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
}

/* 送信中の文言も読めるよう、薄くせず地の色を落とす / Dims the fill rather than the whole button so the sending label stays readable */
.submit:disabled {
  background: var(--color-muted);
  cursor: not-allowed;
}

.request-status,
.request-success,
.request-note {
  padding: var(--space-4);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-m);
  font-weight: var(--weight-medium);
}

.request-success,
.request-note {
  margin-top: var(--space-6);
}

.request-success {
  font-size: var(--size-title);
}

/* フッター / Footer */

.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-6) var(--page-inset);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
}

/* 依頼の前にと法定表示 / Terms and legal pages */

/* 下部固定ボタンが無いので、その余白を外す / These pages have no sticky button, so its reserved space goes */
.doc {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 入口の映像に重ねないので、流れの中に戻す / With no hero to overlay, the header returns to the normal flow */
.doc .site-header {
  position: static;
  padding-top: env(safe-area-inset-top);
}

.doc .wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  text-decoration: none;
}

.doc-main {
  padding-inline: var(--page-inset);
  line-height: 1.8;
}

/* 全角で 35 字ほど。半角換算で 70 字 / About 35 full-width characters, or 70 counted in half-width */
.doc-main > * {
  max-width: 65ch;
}

.doc-main > * + * {
  margin-top: var(--space-3);
}

.doc-main > h2 {
  margin-top: var(--space-12);
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  scroll-margin-top: var(--space-4);
}

.doc-main > .confirm-list {
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.doc-list {
  padding-left: 1.5em;
  list-style: disc;
}

.doc-main table {
  width: 100%;
  border-collapse: collapse;
}

.doc-main th,
.doc-main td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  font-weight: var(--weight-regular);
  text-align: left;
  vertical-align: top;
  /* body の anywhere は最小幅に単語を数えない。列が英単語より細くならないよう戻す / The body's anywhere leaves words out of min-content; this stops a column shrinking below a Latin word */
  overflow-wrap: break-word;
}

.doc-main th {
  color: var(--color-muted);
}

/* 行の高さを変えずに押せる範囲を 44px にする / Widens the tap area to 44px without changing the line height */
.inline-link {
  padding-block: var(--space-3);
}

/* 下部固定ボタン / Sticky request button */

.sticky-cta {
  position: fixed;
  z-index: 10;
  left: var(--cta-offset);
  right: var(--cta-offset);
  bottom: var(--cta-offset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--cta-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-m);
  /* 明るいサムネイルの上でも輪郭を保つ / Keeps the edge visible over bright thumbnails */
  box-shadow: 0 0 0 1px var(--color-bg);
  background: var(--color-text);
  color: var(--color-on-light);
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}

.sticky-cta span {
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
}

/* visibility でフォーカスも外す / visibility also removes it from the tab order */
.sticky-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.sticky-cta:focus-visible {
  outline-color: var(--color-on-light);
  outline-offset: -4px;
}

/* 料金の区画では次の一歩だけを見せる / Inside the price section it shows only the next step */
.sticky-cta-plan {
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .sticky-cta {
    transition-property: opacity, visibility, transform;
  }

  .sticky-cta.is-hidden {
    transform: translateY(var(--space-2));
  }

  .thumb:active,
  .filter button:active,
  .seg-item:active,
  .submit:active:not(:disabled),
  .sticky-cta:active {
    transform: scale(0.99);
  }
}

@media (min-width: 640px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }

  .work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-6);
  }
}

@media (min-width: 1024px) {
  .hero {
    --hero-text-overlap: 176px;
  }

  .hero-media {
    max-height: 92svh;
  }

  .hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-12);
    margin-top: 0;
  }

  .section {
    padding-top: var(--space-24);
  }

  /* 選択の横に金額を置く / Puts the estimate beside the choices */
  .plan {
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .price {
    align-self: start;
    padding-top: 0;
    padding-left: var(--space-8);
    border-top: 0;
    border-left: 1px solid var(--color-line);
  }

  /* 入力を進めても選択と金額が見えるよう横に留める / Keeps the plan and estimate in view while filling in the form */
  .request-form {
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    column-gap: var(--space-16);
  }

  .request-form > * {
    grid-column: 1;
  }

  .plan-summary {
    position: sticky;
    top: var(--space-6);
    grid-column: 2;
    grid-row: 1 / span 10;
    align-self: start;
  }

  /* 2 本と 3 本の段を交互に並べる / Alternates rows of two and three works */
  .work-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .work {
    grid-column: span 2;
  }

  .work:nth-child(5n + 1),
  .work:nth-child(5n + 2) {
    grid-column: span 3;
  }

  /* 最後の段が半端でも空きを残さない / Leaves no gap when the last row is short */
  .work:nth-child(5n + 1):last-child,
  .work:nth-child(5n + 3):last-child {
    grid-column: span 6;
  }

  .work:nth-child(5n + 3):nth-last-child(2),
  .work:nth-child(5n + 3):nth-last-child(2) + .work {
    grid-column: span 3;
  }

  .sticky-cta {
    left: auto;
    right: var(--page-inset);
    width: 320px;
  }
}