/* Indy Cruise スタッフマニュアル */

:root {
  --navy: #0b2a3d;
  --blue: #2db3e9;
  --blue-text: #157fb0;
  --blue-soft: #e4f5fc;
  --orange: #ff7a45;

  --bg: #f2f5f7;
  --surface: #ffffff;
  --text: #0b2a3d;
  --text-sub: #5b6c78;
  --line: #e4e9ed;
  --fill: #eef2f5;
  --warn: #c7361f;
  --warn-bg: #fff0ec;
  --tbd: #7a5800;
  --tbd-bg: #fff6d9;
  --ok: #2b8a52;

  --radius: 18px;
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --header-h: 56px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}

/* 見出しや短い文は文節で改行して、1文字だけ次の行に残らないようにする */
h1,
h2,
h3,
summary,
.rule-main,
.rule-sub,
.tile-name,
.tile-desc,
.chapter-title,
.chapter-sub,
.task-title,
.manual-name,
.photo-step-text,
.shoot-ok-title,
.shoot-rule-title,
.shoot-rule-text,
.shoot-retake,
.warning-title,
.checklist label {
  word-break: auto-phrase;
}

a {
  color: var(--blue-text);
  font-weight: 700;
  text-underline-offset: 3px;
}

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

p {
  margin: 0 0 12px;
}

details {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* ---------- アプリバー ---------- */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 max(16px, calc((100% - 608px) / 2));
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 36px;
}

.back {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

.back::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- ページ共通 ---------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 16px 40px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 6px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.35;
}

.page-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.page-lead {
  margin: 0 0 20px;
  color: var(--text-sub);
  font-size: 15px;
}

/* ---------- トップ：日没カード ---------- */

.sunset {
  --sky: #8fdaf7;
  --sun: #ffd45c;
  --cloud: #ffffff;
  --bb: #5ec3eb;
  --bf: #2c9fd4;
  --win: #e3f7fe;
  --river: #1f9bd6;
  --wave: #bfeafb;
  --bridge: #ff8a5c;
  --boat: #ffffff;
  --ink: var(--navy);

  position: relative;
  overflow: hidden;
  margin-top: 4px;
  /* イラストは幅に合わせて縮むので、下の余白も幅の割合で取る */
  padding: 20px 20px 36%;
  border-radius: 24px;
  background: var(--sky);
  color: var(--ink);
  transition: background-color 0.4s ease;
}

.sunset[data-state="soon"] {
  --sky: #ffc68c;
  --sun: #fff0a8;
  --cloud: #fff4e6;
  --bb: #f4a275;
  --bf: #df7a52;
  --win: #ffe8cf;
  --river: #6f8fca;
  --wave: #c9d8f2;
  --bridge: #b85a3c;
}

.sunset[data-state="after"],
.sunset[data-state="error"] {
  --sky: #12344c;
  --bb: #1f4c69;
  --bf: #0d2f46;
  --win: #ffd45c;
  --river: #0a2537;
  --wave: #2c5a7a;
  --bridge: #e46a3f;
  --boat: #dce8ef;
  --ink: #ffffff;
}

.sunset-text {
  position: relative;
  z-index: 1;
}

.sunset-date {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.sunset-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sunset-time {
  margin: 2px 0 10px;
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sunset-status {
  display: inline-block;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.sunset[data-state="soon"] .sunset-status {
  color: var(--warn);
}

.sunset[data-state="after"] .sunset-status {
  background: #ffd45c;
}

.scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.scene .sun {
  fill: var(--sun);
  transition: transform 0.6s ease;
}
.sunset[data-state="soon"] .sun {
  transform: translateY(36px);
}
.scene .moon,
.scene .stars {
  display: none;
  fill: #ffe9a8;
}
.sunset[data-state="after"] .sun,
.sunset[data-state="after"] .cloud,
.sunset[data-state="error"] .sun,
.sunset[data-state="error"] .cloud {
  display: none;
}
.sunset[data-state="after"] .moon,
.sunset[data-state="after"] .stars,
.sunset[data-state="error"] .stars {
  display: inline;
}
.scene .cloud { fill: var(--cloud); }
.scene .bldg-back { fill: var(--bb); }
.scene .bldg-front { fill: var(--bf); }
.scene .win { fill: var(--win); }
.scene .sign { fill: var(--orange); }
.scene .sign-dot { fill: #ffe9a8; }
.scene .river { fill: var(--river); }
.scene .wave { stroke: var(--wave); stroke-width: 2.5; stroke-linecap: round; }
.scene .bridge { fill: var(--bridge); }
.scene .bridge-rail { fill: none; stroke: var(--bridge); stroke-width: 2.5; }
.scene .boat-hull { fill: var(--boat); }
.scene .boat-line { fill: var(--orange); }
.scene .boat-cabin { fill: var(--blue); }
.scene .boat-head { fill: var(--navy); }
.scene .boat-flag { fill: var(--orange); stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }

.sunset-note {
  margin: 10px 4px 0;
  color: var(--text-sub);
  font-size: 13px;
}

/* ---------- トップ：ルール ---------- */

.rules-card {
  margin-top: 20px;
  padding: 18px 18px 6px;
  border-radius: var(--radius);
  background: var(--surface);
}

.rules-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
}

.rules-icon {
  width: 24px;
  height: 24px;
}

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rules li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.rules li:first-child {
  border-top: 0;
}

.rule-tag {
  grid-row: span 2;
  align-self: start;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.rule-main {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.rule-sub {
  margin: 2px 0 0;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- メニューボタン（トップ・業務マニュアル） ---------- */

.section-label {
  margin: 28px 4px 10px;
  font-size: 15px;
  font-weight: 900;
}

.tiles {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 16px 60px 16px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  /* 下に厚みをつけて「押せるボタン」に見せる */
  box-shadow: 0 4px 0 #d3dde4;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 右の矢印：押すと次の画面へ進むことを示す */
.tile::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12.5 9.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat,
    var(--blue);
}

.tile:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d3dde4;
}

@media (hover: hover) {
  .tile:hover {
    background: #f9fcfe;
  }
}

.tile-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.tile-text {
  display: flex;
  flex-direction: column;
}

.tile-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}

.tile-desc {
  margin-top: 2px;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 詳細ページ：項目 ---------- */

.topics {
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.topics details + details {
  border-top: 1px solid var(--line);
}

.topics summary {
  position: relative;
  display: block;
  padding: 18px 48px 18px 18px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.topics summary::-webkit-details-marker {
  display: none;
}

.topics summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--blue-text);
  border-bottom: 2.5px solid var(--blue-text);
  transform: translateY(-75%) rotate(45deg);
}

.topics details[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.topics summary:active {
  background: var(--fill);
}

.topic-body {
  padding: 0 18px 22px;
}

.topic-body ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.topic-body li + li {
  margin-top: 6px;
}

.see {
  font-size: 15px;
}

.note {
  color: var(--text-sub);
  font-size: 14px;
}

/* 手順 */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
}

.steps li + li {
  margin-top: 12px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
}

.steps strong {
  display: block;
}

/* 設定表 */
.spec {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

.spec th,
.spec td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.spec th {
  width: 30%;
  color: var(--text-sub);
  font-weight: 500;
}

.spec td {
  font-size: 18px;
  font-weight: 900;
}

/* 写真（未設定の枠） */
.photo-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;
  padding: 8px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--text-sub);
  font-size: 13px;
  text-align: center;
}

.photo-slot.wide {
  aspect-ratio: 16 / 9;
}

/* 写真 */
figure {
  margin: 0 0 12px;
}

figure img {
  display: block;
  width: 100%;
  border-radius: 12px;
  cursor: zoom-in;
}

figcaption {
  margin-top: 6px;
  font-size: 14px;
}

.examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}

.examples .example:first-child {
  grid-column: 1 / -1;
}

.example,
.example .photo-slot,
.example img {
  margin: 0;
}

.mark {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.8;
}

.mark.ok {
  background: var(--ok);
}

.mark.ng {
  background: var(--warn);
}

/* 注意 */
.warning {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--warn-bg);
}

.warning p {
  margin: 0;
}

.warning p + p {
  margin-top: 6px;
}

.warning-title {
  color: var(--warn);
  font-weight: 900;
}

.caution {
  color: var(--warn);
  font-size: 15px;
}

/* 未確定の内容 */
.tbd {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tbd-bg);
  font-size: 14px;
}

.tbd b {
  margin-right: 0.6em;
  color: var(--tbd);
}

/* フォーマット前チェック */
.checklist-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.topic-body .checklist {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.checklist li + li {
  margin-top: 0;
}

.checklist label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill);
  cursor: pointer;
}

.checklist label:has(input:checked) {
  background: #e3f4ea;
}

.checklist input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ok);
}

.format-steps {
  padding-top: 4px;
}

/* ---------- 1日の流れ：章 ---------- */

.chapters {
  display: grid;
  gap: 14px;
}

.chapter {
  --c: #1a84d6;
  --c-soft: #e3f1fc;
  --c-bg: #f1f8fe;
  --c-edge: #cfe3f3;

  border-radius: 22px;
  background: var(--c-bg);
  box-shadow: 0 4px 0 var(--c-edge);
}

.chapter-orange {
  --c: #ec6a2a;
  --c-soft: #ffe6d8;
  --c-bg: #fff3ec;
  --c-edge: #f5d9c8;
}

.chapter-green {
  --c: #1f9a55;
  --c-soft: #d9f2e3;
  --c-bg: #eefaf2;
  --c-edge: #cde9d8;
}

.chapter-head {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas:
    "num title illust"
    "sub sub sub";
  align-items: center;
  column-gap: 12px;
  padding: 16px 16px 18px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chapter-head::-webkit-details-marker {
  display: none;
}

/* 右上の開閉マーク */
.chapter-head::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--c);
  border-bottom: 3px solid var(--c);
  transform: rotate(45deg);
}

.chapter[open] > .chapter-head::after {
  top: 28px;
  transform: rotate(-135deg);
}

.chapter-num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.chapter-title {
  grid-area: title;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
}

.chapter-sub {
  grid-area: sub;
  margin-top: 6px;
  color: var(--text-sub);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.chapter-illust {
  grid-area: illust;
  width: 120px;
  height: 72px;
  margin-right: 28px;
}

.chapter-body {
  padding: 0 10px 12px;
}

/* ---------- 1日の流れ：手順 ---------- */

.tasks {
  counter-reset: task;
  list-style: none;
  margin: 0 0 12px;
  padding: 4px 16px;
  border-radius: 18px;
  background: var(--surface);
}

.task {
  counter-increment: task;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "num title"
    ". desc"
    ". link"
    "photo photo";
  column-gap: 12px;
  padding: 18px 0;
}

.task + .task {
  border-top: 1px solid var(--line);
}

.task-num {
  grid-area: num;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-soft);
  color: var(--c);
  font-size: 20px;
  font-weight: 900;
}

.task-num::before {
  content: counter(task);
}

.task-title {
  grid-area: title;
  align-self: center;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.45;
}

.task-desc {
  grid-area: desc;
  margin: 6px 0 0;
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1.7;
}

.task-link {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.task-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.task-link:active {
  transform: scale(0.97);
}

.task-photo {
  grid-area: photo;
  margin: 14px 0 0;
}

.task-photo.photo-slot {
  aspect-ratio: 16 / 10;
}

.chapter-body > .tbd,
.chapter-body > .warning {
  margin: 0 6px 12px;
}

@media (min-width: 560px) {
  .chapter-head {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "num title illust"
      "num sub illust";
    column-gap: 16px;
    padding: 20px 20px 22px;
  }

  .chapter-num {
    width: 56px;
    height: 56px;
    font-size: 26px;
  }

  .chapter-title {
    font-size: 32px;
  }

  .chapter-sub {
    margin-top: 2px;
  }

  .chapter-illust {
    width: 150px;
    height: 90px;
    margin-right: 32px;
  }

  .chapter-head::after {
    top: 50%;
    margin-top: -8px;
  }

  .chapter[open] > .chapter-head::after {
    top: 50%;
    margin-top: -2px;
  }

  .task {
    grid-template-columns: 44px 1fr 44%;
    grid-template-areas:
      "num title photo"
      ". desc photo"
      ". link photo";
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
  }

  .task-num {
    width: 44px;
    height: 44px;
  }

  .task-photo {
    align-self: start;
    margin: 0 0 0 6px;
  }

  .task-link {
    align-self: start;
  }
}

/* ---------- 業務マニュアル：一覧 ---------- */

.manual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.manual-list li + li {
  border-top: 1px solid var(--line);
}

.manual-list a {
  position: relative;
  display: block;
  padding: 14px 48px 14px 18px;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.manual-list a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2.5px solid var(--blue-text);
  border-right: 2.5px solid var(--blue-text);
  transform: rotate(45deg);
}

.manual-list a:active {
  background: var(--fill);
}

.manual-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.manual-desc {
  display: block;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 業務マニュアル：写真つき手順 ---------- */

.manual > .page-title {
  margin-bottom: 16px;
}

.photo-steps {
  counter-reset: photo-step;
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.photo-steps li {
  counter-increment: photo-step;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
}

.photo-steps figure {
  order: 2;
  margin: 0;
}

.photo-steps img {
  border-radius: 10px;
}

.photo-step-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.photo-step-text::before {
  content: counter(photo-step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 18px;
  font-weight: 900;
}

.photo-step-note {
  display: block;
  margin-top: 6px;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
}

@media (min-width: 560px) {
  /* 手順の数に合わせて列を並べる（3つなら3列、2つなら2列） */
  .photo-steps {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .photo-steps li {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .photo-steps figure {
    order: 0;
  }
}

/* ---------- 業務マニュアル：補足 ---------- */

.manual-source {
  margin: 16px 4px 0;
  color: var(--text-sub);
  font-size: 12px;
}

/* ---------- 業務マニュアル：話す文言 ---------- */

.script-note {
  margin: 0 4px 10px;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 700;
}

.script {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--surface);
}

.script-line + .script-line {
  margin-top: 20px;
}

.script-en {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: pretty;
}

.script-ja {
  margin: 4px 0 0;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.script-key .script-en {
  color: var(--blue-text);
  font-size: 28px;
  font-weight: 900;
}

.script-em {
  color: var(--blue-text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.manual .warning + .script-note {
  margin-top: 20px;
}

/* 断り方：言う順番を上から下へつなぐ */
.script-flow {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.script-flow li {
  position: relative;
}

.script-flow li + li::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid #b9c4cc;
  border-bottom: 3px solid #b9c4cc;
  transform: translateX(-50%) rotate(45deg);
}

.script-when {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.script-action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 22px;
  font-weight: 900;
}

.script-action svg {
  width: 40px;
  height: 40px;
  flex: none;
}

.script-aside {
  margin-top: 10px;
}

.script-aside-label {
  margin: 0 0 8px;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 業務マニュアル：基本の撮影方法 ---------- */

.manual-band-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 4px 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
}

.manual-band-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #b9c4cc;
}

.shoot-ok {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.shoot-ok figure {
  margin: 0;
}

.shoot-ok img {
  border-radius: 0;
}

.shoot-ok-text {
  padding: 16px 18px 6px;
  background: #eef5f0;
}

.shoot-ok-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c9dccf;
  color: var(--ok);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
}

.shoot-ok-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.shoot-rules {
  counter-reset: shoot-rule;
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shoot-rules li {
  counter-increment: shoot-rule;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  grid-template-areas:
    "title photo"
    "text text";
  align-items: center;
  column-gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.shoot-rule-title {
  grid-area: title;
  align-self: center;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}

.shoot-rule-title::before {
  content: counter(shoot-rule);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
}

.shoot-rules figure {
  grid-area: photo;
  margin: 0;
}

.shoot-rules img {
  border-radius: 8px;
}

.shoot-rule-text {
  grid-area: text;
  align-self: start;
  margin: 12px 0 0;
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1.6;
}

.shoot-ng {
  margin-top: 28px;
  padding: 2px 14px 16px;
  border-radius: var(--radius);
  background: var(--warn-bg);
}

.shoot-ng .manual-band-title {
  margin: 16px 2px 12px;
}

.shoot-ng .manual-band-title::after {
  background: #e7b9ae;
}

.shoot-ng-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shoot-ng-list figure {
  margin: 0;
}

.shoot-ng-list img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.shoot-ng-list figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--warn);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.ng-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.shoot-retake {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--warn);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.shoot-retake-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

@media (min-width: 560px) {
  .shoot-ok {
    grid-template-columns: 58% 1fr;
  }

  .shoot-ok img {
    height: 100%;
    object-fit: cover;
  }

  .shoot-ok-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .shoot-rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shoot-rules li {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "text";
    align-content: start;
    row-gap: 12px;
  }

  .shoot-rule-title {
    font-size: 16px;
  }

  .shoot-rule-title::before {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .shoot-rule-text {
    margin: 0;
    font-size: 14px;
    text-align: center;
  }

  .shoot-ng-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shoot-ng-list figcaption {
    align-items: flex-start;
    font-size: 14px;
  }
}

/* ---------- マニュアルのモーダル ---------- */

/* 開いている間は後ろのページをスクロールさせない */
.is-modal-open,
.is-modal-open body {
  overflow: hidden;
}

.manual-modal {
  --modal-dim: 1;

  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}

.manual-modal[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.manual-modal::backdrop {
  background: transparent;
}

/* 背景の暗さはシートの動きに合わせて変える（スワイプ中は --modal-dim で薄くなる） */
.manual-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 42 61 / 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.manual-modal.is-open::before {
  opacity: var(--modal-dim);
}

.manual-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 90dvh;
  border-radius: 24px 24px 0 0;
  background: var(--bg);
  box-shadow: 0 -8px 32px rgb(11 42 61 / 0.18);
  transform: translateY(100%);
  /* 少し行き過ぎて戻る動きで「ぽんっ」と出す */
  transition: transform 0.42s cubic-bezier(0.22, 1.18, 0.36, 1);
  will-change: transform;
}

.manual-modal.is-open .manual-sheet {
  transform: translateY(0);
}

.manual-modal.is-closing .manual-sheet {
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}

.manual-modal.is-closing::before {
  transition-duration: 0.22s;
}

.manual-sheet-head {
  position: relative;
  flex-shrink: 0;
  height: 52px;
  touch-action: none;
}

.manual-sheet-grabber {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 999px;
  background: #c5d0d8;
}

.manual-sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M12.5 12.5l11 11M23.5 12.5l-11 11' fill='none' stroke='%230b2a3d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% no-repeat,
    #e1e8ed;
  cursor: pointer;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.manual-sheet-close:active {
  transform: scale(0.9);
}

.manual-sheet-body {
  flex: 1;
  min-height: 0;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.manual-sheet-body.is-loading {
  min-height: 40dvh;
  background:
    radial-gradient(circle, var(--blue) 0 5px, transparent 6px) center / 28px 28px no-repeat;
  animation: manual-loading 0.9s ease-in-out infinite;
}

@keyframes manual-loading {
  50% {
    opacity: 0.3;
  }
}

.manual-sheet-body .page-title {
  margin-top: 0;
  font-size: 22px;
}

.manual-sheet-body .page-icon {
  width: 36px;
  height: 36px;
}

.manual-sheet-error {
  padding: 24px 4px;
  text-align: center;
}

/* 広い画面では中央にカードとして浮かせる */
@media (min-width: 640px) {
  .manual-modal[open] {
    align-items: center;
    padding: 24px;
  }

  .manual-sheet {
    max-height: min(820px, calc(100dvh - 48px));
    border-radius: 24px;
    box-shadow: 0 16px 48px rgb(11 42 61 / 0.25);
    opacity: 0;
    transform: translateY(24px) scale(0.94);
    transition:
      transform 0.36s cubic-bezier(0.22, 1.3, 0.36, 1),
      opacity 0.2s ease;
  }

  .manual-modal.is-open .manual-sheet {
    opacity: 1;
    transform: none;
  }

  .manual-modal.is-closing .manual-sheet {
    transition:
      transform 0.18s ease-in,
      opacity 0.18s ease-in;
  }

  .manual-sheet-grabber {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manual-sheet,
  .manual-modal::before {
    transition: none;
  }
}

/* ---------- 文例 ---------- */

.phrase-title {
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 900;
}

.phrase-title:first-child {
  margin-top: 0;
}

.phrase {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill);
}

.phrase + .phrase {
  margin-top: 8px;
}

.phrase + .tbd,
.phrase + .phrase-title,
.phrase + .note {
  margin-top: 16px;
}

.phrase-lang {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
}

.phrase-text {
  margin: 0;
}

.copy {
  min-width: 6.5em;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--blue-text);
  color: #fff;
  font: 700 14px var(--font);
  cursor: pointer;
}

.copy:active {
  transform: scale(0.96);
}

/* よくある質問 */
.faq {
  margin: 0;
}

.faq dt {
  font-weight: 700;
}

.faq dd {
  margin: 2px 0 16px;
}

.faq dd.tbd {
  display: inline-block;
}

/* ---------- 前後のページ ---------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.pager a {
  grid-column: 2;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  text-decoration: none;
}

.pager a.prev {
  grid-column: 1;
  text-align: left;
}

.pager span {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

/* ---------- フッター ---------- */

.site-footer {
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
  color: var(--text-sub);
  font-size: 13px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- トースト ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
}

/* ---------- 画像の拡大表示 ---------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
}

.lightbox[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 80dvh;
  object-fit: contain;
}

.lightbox-caption {
  margin: 12px 20px 0;
  font-size: 14px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font: 700 15px var(--font);
  cursor: pointer;
}