/*
  共通スタイルシート（フレームワーク不使用）v2
  参照: docs/08_lp-design-brief.md §2（トークン）／ ~/.claude/skills/web-design.md（幅・余白・文字サイズ・文字色）
  コントラスト比は sRGB 相対輝度から計算（WCAG 2.1 の算出式、白地 = 1.0）。
  - 本文色 --ink #1f1f1f と白地 #ffffff: 16.48:1
  - --blue #0b5fb0 と白地 #ffffff: 6.41:1（白地の小さな強調・リンクに使用可、AA適合）
  - 琥珀ボタン --amber #ffb03a の地に文字 #1f1f1f: 9.05:1
  - ホバー時の琥珀 --amber-hover #f0a12a の地に文字 #1f1f1f: 7.72:1
  角丸は使わない（border-radius: 0、親サイトの --mv_btn_radius: 0px を継承）。
*/
/* Icons: Lucide (ISC) https://lucide.dev/license */

:root {
  --paper: #ffffff;
  --sky: #eef4f9;
  --ink: #1f1f1f;
  --line: #d6dde4;
  --amber: #ffb03a;
  --amber-hover: #f0a12a;
  --blue: #0b5fb0;

  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 64px;   /* セクション間のみに使う */
  --space-xl: 96px;  /* 写真回り込みと本文のすき間 */

  --font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

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

a {
  color: var(--blue);
}

a:hover,
a:focus {
  color: var(--ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 幅の基準：画面の80%、1000pxで頭打ち。ヘッダー・フッター・セクション帯すべて共通 */
.wrap {
  width: min(80%, 1000px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 767px) {
  .wrap {
    width: 100%;
    padding-inline: 2rem;
  }
}

/* ---------- ヘッダー / ナビ ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-s);
  gap: var(--space-s);
}

.site-logo {
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
}

/* displayをここで一律指定すると、detailsが閉じていてもulが見えてしまう
   （ブラウザ既定の非表示ルールより author スタイルの方が優先されるため）。
   ここでは flex 等の display 指定をせず、幅768px以上／details[open] のときだけ個別に付与する */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--blue);
}

/* 768px以上：summaryを隠し、ulは常に横並びで見せる（openに依存しない） */
.site-nav summary {
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  .site-nav summary {
    display: none;
  }
  /* Chromeは閉じた<details>の中身を「::details-content」という擬似要素で
     ブロックサイズ0に固定しており、detailsやul自体にdisplay:flexを!important指定しても
     0幅・0高さのまま解除できない（実機検証で確認）。
     ::details-content 自体を直接上書きしないと、open属性の有無に関わらず常時展開の見た目にできない */
  .site-nav details::details-content {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--space-s);
    block-size: auto !important;
    inline-size: auto !important;
    overflow: visible !important;
    content-visibility: visible !important;
  }
  .site-nav details > ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}

/* 767px以下：detailsで折りたたみ。開いた(open)ときだけ縦並びで表示する。
   閉じているときは明示的にdisplay:noneを指定する
   （.site-header .wrapのflexレイアウト内だとdetailsのネイティブな非表示だけでは
   uiの高さが残ってしまう実機不具合があるため） */
@media (max-width: 767px) {
  .site-header .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-nav {
    width: 100%;
  }
  .site-nav details:not([open]) > ul {
    display: none;
  }
  .site-nav details[open] > ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    margin-top: var(--space-xs);
  }
}

/* ---------- ヒーロー：全幅写真＋白いパネル ---------- */
/* section共通のpadding-block(64px)を上だけ打ち消し、写真をヘッダー下罫線に直接接させる。
   下方向は「セクション間64px」のルールどおり、既存のpadding-bottomをそのまま活かす */
.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0; /* 事実の帯（.facts）を写真の下端に食い込ませるため、写真の直後に隙間を作らない */
}

.hero-photo {
  width: 100%;
  height: min(72vh, 720px);
  object-fit: cover;
  display: block;
}

.hero-panel-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.hero-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: var(--space-m);
  width: 100%;
  max-width: 560px;
}

.hero-panel h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-s) 0;
}

.hero-panel p {
  font-size: 1rem;
  margin: 0 0 var(--space-m) 0;
  text-align: left;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

/* CTA の直下に置く予約受付の一文（.hero-panel p の下余白を打ち消し、上だけ空ける） */
.hero-panel .hero-booking {
  margin: var(--space-s) 0 0 0;
  font-weight: 500;
}

@media (max-width: 767px) {
  /* スマホは写真の上にパネルを重ねず、写真の下にパネルを縦積みにする */
  .hero-photo {
    height: 240px;
    object-fit: cover;
  }
  .hero-panel-row {
    position: static;
    inset: auto;
    display: block;
  }
  .hero-panel {
    background: var(--paper);
    box-shadow: none;
    padding: 24px 2rem;
    max-width: none;
  }
}

/* ---------- ボタン・テキストリンク ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
  border: 2px solid var(--amber);
  background: var(--amber);
  color: var(--ink);
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
  color: var(--ink);
}

.link-text {
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- セクション共通 ---------- */
section {
  padding-block: var(--space-l);
}

section.on-sky {
  background: var(--sky);
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-s) 0;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-xs) 0;
}

p {
  margin: 0 0 var(--space-s) 0;
  text-align: left;
}

.section-lead {
  font-size: 1.05rem;
  max-width: 70ch;
  margin-bottom: var(--space-m);
}

/* ---------- FACTS 帯（ヒーロー写真に食い込む白い資格パネル） ---------- */
/* docs/persona-202609/facts-strip-proposals.md 案A。
   ヒーローの白パネルと同じ「もう一枚の紙」として、写真の下端に56pxだけ重ねる。
   セクション既定の上余白(64px)は打ち消し、下余白の64pxだけ残す（次章との間隔）。 */
.facts {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

.facts .wrap {
  position: relative;
}

.facts-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  box-shadow: none; /* ヒーローパネルの影と重ねて影を二重にしない */
  margin-top: -56px; /* 写真の下端に食い込ませる */
  position: relative;
  z-index: 1;
}

/* minmax(180px, 1fr) の auto-fit にしておくと、10月に許可番号が5項目目として
   増えたときも grid-template-columns を書き換えずに自動で列が増える */
.facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.fact {
  padding: 20px var(--space-m);
}

.fact + .fact {
  border-left: 1px solid var(--line);
}

@media (max-width: 767px) {
  .facts-panel {
    margin-top: 0; /* スマホは写真に重ねず、ヒーローの白パネルと隙間0で連結する */
    border-left: 0;
    border-right: 0;
  }

  .facts-row {
    grid-template-columns: 1fr;
  }

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

/* ---------- do/don't ---------- */
.do-dont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-m);
}

.do-dont > div {
  border: 1px solid var(--line);
  padding: var(--space-m);
}

.do-dont ul {
  margin: 0;
  padding-left: 1.2rem;
}

.do-dont li {
  margin-bottom: var(--space-xs);
}

/* ---------- 表（横スクロール容器） ---------- */
.table-scroll-hint {
  display: none;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0 0 var(--space-xs) 0;
}

@media (max-width: 767px) {
  .table-scroll-hint {
    display: block;
  }
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.95rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-s);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--sky);
  font-weight: 700;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.small-print {
  font-size: 0.9rem;
  margin-top: var(--space-m);
}

/* ---------- 表のカード化（.pricing-table）：スマホは横スクロールをやめて縦積みブロックにする ----------
   料金表のほか、Feasibility（index・permits）と Vendor pack の表にも使う（2026-09-20） */
@media (max-width: 767px) {
  .pricing-table-hint {
    display: none;
  }

  .pricing-table {
    min-width: 0;
  }

  .pricing-table,
  .pricing-table thead,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table th,
  .pricing-table td {
    display: block;
  }

  .pricing-table thead {
    display: none;
  }

  .pricing-table tr {
    border-bottom: 1px solid var(--line);
    padding: var(--space-s);
  }

  .pricing-table tr:last-child {
    border-bottom: none;
  }

  .pricing-table td {
    border-bottom: none;
    padding: var(--space-xs) 0;
  }

  .pricing-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .pricing-table td[data-label="From"] {
    font-weight: 700;
  }

  /* 料金ページの Add-ons（2列・ラベルなし）：縦積みにしたとき価格だけ太字にする */
  .pricing-table td.price-cell,
  .pricing-table td.lead-cell {
    font-weight: 700;
  }

  .pricing-table .num {
    text-align: left;
    white-space: normal;
  }
}

/* ---------- 許可の流れ（順序のあるステップだけ番号可） ---------- */
.permit-flow {
  list-style: none;
  margin: var(--space-m) 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  counter-reset: step;
}

.permit-flow li {
  flex: 1 1 160px;
  border-top: 3px solid var(--amber);
  padding-top: var(--space-xs);
  counter-increment: step;
}

.permit-flow li::before {
  content: counter(step) ". ";
  font-weight: 700;
}

.permit-flow .step-when {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 納品物の再現：飛行記録カード ---------- */
.flight-record {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  padding: var(--space-m);
  max-width: 640px;
}

.flight-record dl {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--space-xs) var(--space-m);
  margin: 0;
}

.flight-record dt {
  font-weight: 700;
  color: var(--ink);
}

.flight-record dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .flight-record dl {
    grid-template-columns: 1fr;
  }
  .flight-record dt {
    margin-top: var(--space-xs);
  }
}

/* ---------- OM コンタクトシート：2行×3列タイル ---------- */
.contact-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.tile img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 0;
}

.tile figcaption {
  font-size: 0.9rem;
  margin-top: var(--space-xs);
  text-align: left;
}

@media (max-width: 767px) {
  .contact-sheet {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .contact-sheet {
    grid-template-columns: 1fr;
  }
}

/* ---------- 中盤の写真帯 ---------- */
.photo-band {
  height: 320px;
}

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

@media (max-width: 767px) {
  .photo-band {
    height: 200px;
  }
}

/* ---------- 進捗比較シート ---------- */
/* tdに display:flex を当てるとブラウザの表レイアウトからセルが外れ、
   同じ列の2セルが縦に結合されてしまう（実機検証で再現）。
   tdは通常のtable-cellのまま、中の画像とキャプションをブロック要素で縦積みにする */
.progress-photo {
  position: relative;
  max-width: 180px;
}

.progress-photo img {
  width: 100%;
  border: 1px solid var(--line);
  display: block;
}

.progress-cell .progress-caption {
  font-size: 0.9rem;
  display: block;
  margin-top: var(--space-xs);
}

/* 進捗比較：同じ写真に注記の枠を重ねて差分を示す（Month1=破線の枠、Month2=枠なし+ラベルのみ） */
.progress-annot {
  position: absolute;
  top: 22%;
  left: 15%;
  width: 55%;
  height: 45%;
  border: 2px dashed var(--amber);
  background: rgba(255, 176, 58, .1);
}

.progress-annot-label {
  position: absolute;
  top: -1.5em;
  left: 0;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--amber);
  color: var(--ink);
  padding: 1px 6px;
}

.progress-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1px 6px;
}

/* ---------- 実績 ---------- */
.case-note {
  border-top: 1px solid var(--line);
  padding-block: var(--space-m);
}

.case-note:first-of-type {
  border-top: none;
}

.case-note h3 {
  font-size: 1.05rem;
}

/* ---------- 誰が飛ぶか ---------- */
.who-flies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: flex-start;
}

.who-flies img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%; /* 元画像が白地の円形ポートレートのため、白い角を切る */
  flex: 0 0 auto;
}

.who-flies-text {
  flex: 1 1 400px;
}

/* ---------- 書類・権利 ---------- */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-m);
}

.rights-grid ul {
  margin: 0;
  padding-left: 1.2rem;
}

.rights-grid li {
  margin-bottom: var(--space-xs);
}

/* ---------- FAQ ---------- */
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-s);
}

.faq-list summary {
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}

.faq-list p {
  margin-top: var(--space-s);
}

/* ---------- フォーム ---------- */
form {
  display: grid;
  gap: var(--space-s);
  max-width: 640px;
}

.field {
  display: grid;
  gap: 4px;
}

/* 欄の下に添える補足説明（NDA と住所、Delivery deadline の意味など） */
.field-hint {
  font-size: 0.9rem;
  color: var(--ink);
}

label {
  font-size: 0.95rem;
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0;
  width: 100%;
  color: var(--ink);
  background: var(--paper);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.95rem;
  font-weight: 400;
}

.checkbox-row input {
  width: auto;
}

.form-note {
  font-size: 0.9rem;
}

/* ハニーポット欄（company_website）：人間には見えないが、DOM 上には存在させて bot を釣る */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-columns {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-l);
}

.contact-side {
  border: 1px solid var(--line);
  padding: var(--space-m);
  align-self: start;
}

.contact-side p {
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .contact-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--sky);
  border-top: 1px solid var(--line);
}

.site-footer .wrap {
  padding-block: var(--space-l);
}

.site-footer p {
  font-size: 0.9rem;
  margin: 0 0 var(--space-xs) 0;
}

.site-footer a {
  color: var(--blue);
}

.footer-nav {
  margin-top: var(--space-m) !important;
}

/* ---------- ページ見出し（下層ページ用） ---------- */
.page-header {
  background: var(--sky);
}

.page-header .wrap {
  padding-block: var(--space-l);
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 var(--space-xs) 0;
}

.page-header p {
  font-size: 1.05rem;
  max-width: 70ch;
}

.left {
  text-align: left;
}

/* 顧客の声（ケースノート内）：罫線 1本、装飾なし */
.quote { margin: 16px 0 0; padding: 12px 0 12px 16px; border-left: 2px solid var(--amber); }
.quote p { margin: 0 0 8px; }
.quote footer { font-size: .95rem; }

/* できる／できない：短い見出し＋一句の罫線一覧（文章の壁にしない） */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rules h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--amber); }
.rules dl { margin: 0; }
.rules dt { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; padding-top: 10px; }
.rules dd { margin: 2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rules dd:last-child { border-bottom: 0; }
@media (max-width: 767px) { .rules { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- ピクトグラム（Lucide、線画・単色・22px統一） ---------- */

/* FACTS 帯のセル内：ラベル（小）／値（大）／但し書き（中）の3階層。
   文字色はすべて --ink（補助テキストも本文と同じ濃さにする） */
.fact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
}

.fact-icon {
  flex: 0 0 18px;
  color: var(--ink);
}

.fact-value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.fact-caption {
  font-size: .95rem;
  font-weight: 400;
  margin-top: 6px;
}

/* 許可番号（公文書の表記のまま）と日付を途中で折り返さない */
.nowrap {
  white-space: nowrap;
}

/* できる／できない一覧：Possibleは琥珀、Not possibleは本文色 */
.rules dt svg {
  flex: 0 0 22px;
  margin-top: 2px;
}

.rule-icon--possible {
  color: var(--amber);
}

.rule-icon--not {
  color: var(--ink);
}

.rule-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 料金表（Services）：アイコン＋サービス名を1行にまとめ、スマホの縦積みでも崩れないようにする */
.service-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.service-icon {
  flex: 0 0 22px;
  margin-top: 1px;
  color: var(--amber);
}

.service-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 許可の流れ：番号の横にアイコン、続けて日付・説明を縦に並べる */
.permit-flow li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.permit-flow li::before {
  flex: 0 0 auto;
}

.step-icon {
  flex: 0 0 22px;
  margin-top: 2px;
  color: var(--ink);
}

.step-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.step-label {
  min-width: 0;
}

/* 納品物の3見出し：琥珀色 */
.deliverable-h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deliverable-icon {
  flex: 0 0 22px;
  color: var(--amber);
}

.deliverable-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Contact 右パネル：本文色 */
.contact-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-line a {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-icon {
  flex: 0 0 22px;
  color: var(--ink);
}

/* あいさつ文：本文と同じ濃さ・少し大きめ・行長を抑える */
.who-flies-text .greeting { font-size: 1.1rem; max-width: 62ch; }
.who-flies-text p + p { margin-top: 12px; }