@charset "UTF-8";
/*!
 * 株式会社モバリー 会社サイト スタイルシート
 * ------------------------------------------------------------------
 * 同梱している第三者リソースのライセンス
 *   - Noto Sans JP（assets/font/NotoSansJP-subset.woff2）
 *     SIL Open Font License 1.1 ／ 全文は assets/font/OFL.txt
 *   - destyle.css v3.0.2（assets/css/destyle.min.css）
 *     MIT License ／ https://github.com/nicolas-cusan/destyle.css
 * ------------------------------------------------------------------
 * 記述順（仕様書 §10-2）
 *   1. @charset / ライセンス   2. :root   3. base   4. utility
 *   5. components   6. layout   7. page-top   8. page-legal / page-404
 *   10. prefers-reduced-motion
 *
 * ・メディアクエリは各ブロックの直後に書く（末尾にまとめない）。
 * ・ブレークポイントは PC ≥1024px / TB 768–1023px / SP ≤767px。
 *   PCの値を基準に max-width で上書きしていく。
 * ・色・サイズ・余白は必ず CSS変数か §7-3 のスペーシングスケールを使う。
 */

/* ==================================================================
   2. :root ／ デザイントークン（§7-1）
   §7-1 の定義をそのまま書き写している。値を変えるときは仕様書から直す。
   ================================================================== */

:root {
  /* ---- 暗い面（FV・S4 のカード・フッター） ---- */
  --c-navy:       #0F172A;  /* 暗い面のベタ。白文字 17.85:1 */
  --c-navy-2:     #1E3A5F;  /* FV のグラデーションの2色目 */

  /* ---- ブランド・操作（コントラスト検証済み） ---- */
  --c-main:       #2563EB;  /* リンク・強調・ラベル。対 --c-bg 5.17:1 / 対 --c-bg-soft 4.94:1 / 対 --c-bg-blue 4.75:1 */
  --c-main-deep:  #1D4ED8;  /* hover の文字・フォーカスリング。対 --c-bg 6.70:1 */
  --c-teal:       #0E7490;  /* CTA グラデーションの終点。白文字 5.36:1 */
  --c-cyan:       #06B6D4;  /* 装飾専用（光・線）。文字・ボタンの地に使わない（対白 2.43:1） */
  --c-purple:     #7C3AED;  /* 装飾専用（FV のグラデーションの終点・光） */

  /* ---- 文字 ---- */
  --c-heading:    #1E293B;  /* 見出し。対 --c-bg 14.63:1 */
  --c-ink:        #334155;  /* 本文。対 --c-bg 10.35:1 / 対 --c-bg-soft 9.90:1 */
  --c-ink-2:      #64748B;  /* 副次テキスト。対 --c-bg 4.76:1 / 対 --c-bg-soft 4.55:1（--c-bg-blue の上では使わない：4.37:1） */
  --c-on-dark:    #FFFFFF;  /* 暗い面の文字 */
  --c-on-dark-2:  #CBD5E1;  /* --c-navy のベタの上の副次テキスト（12.02:1）。FV・S4 のグラデーションの上では使わない */

  /* ---- 背景・面 ---- */
  --c-bg:         #FFFFFF;
  --c-bg-soft:    #F8FAFC;  /* セクションの地（S2・S4） */
  --c-bg-blue:    #EFF6FF;  /* ラベル（ピル）の地 */
  --c-surface:    #FFFFFF;  /* カード */
  --c-line:       #E2E8F0;  /* 罫線・カードの枠 */
  --c-line-dark:  rgba(255,255,255,.14);  /* 暗い面の罫線 */

  /* ---- グラデーション ---- */
  --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E3A5F 30%, #2563EB 65%, #7C3AED 100%);
  --gradient-cta:  linear-gradient(90deg, #2563EB 0%, #0E7490 100%);
  --gradient-line: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);  /* 装飾の線（見出しの左右・ナビの下線） */

  /* ---- 影（紺ベース） ---- */
  --sh-1:   0 2px 8px rgba(15,23,42,.06);
  --sh-2:   0 12px 32px rgba(15,23,42,.10);
  --sh-3:   0 24px 60px rgba(15,23,42,.16);
  --sh-cta: 0 8px 20px rgba(37,99,235,.28);

  /* ---- 角丸 ---- */
  --r-s:    12px;
  --r-m:    20px;
  --r-l:    24px;
  --r-pill: 999px;

  /* ---- モーション ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 700ms;

  /* ---- フォント（§7-2・§10-4） ---- */
  --font-body:   "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;  /* 法務ページ・404（確定事項14） */
}

/* ==================================================================
   3. base
   要素セレクタへのスタイル指定は、このセクションでのみ行う（§10-2）。
   ================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* 追従ヘッダー分（§5-9-1） */
  -webkit-text-size-adjust: 100%;
}

/* §7-2「body」：16px（SP 15px）・行送り 1.9・字間 .01em */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--c-ink);
  background: var(--c-bg);
}

@media (max-width: 767px) {
  body { font-size: 15px; }
}

/* 法務4ページと 404 は Web フォントを読み込まず、端末の文字で表示する（§7-2・確定事項14） */
body.legal-page { font-family: var(--font-system); }

/* 日本語固有の組版指定はここに閉じ込める（§7-2）。
   英語の法務ページ・英字の見出しに約物詰めがかからないようにするため。 */
:lang(ja) {
  font-feature-settings: "palt";
  line-break: strict;
}

h1,
h2,
h3 {
  color: var(--c-heading);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
}

a {
  color: var(--c-main);
  transition: color var(--dur-fast) var(--ease);
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

/* フォーカス可視化（§11-3）
   :focus-visible 未対応ブラウザ（対応範囲に含まれる iOS Safari 14 など）で
   フォーカスリングが消えてしまうのを避けるため、outline:none の側を
   @supports で条件付きにしている。値そのものは §11-3 のとおり。
   🔴 順番を入れ替えない。:focus と :focus-visible は詳細度が同じなので、
      :focus を後に書くとキーボード操作でもリングが消える（towaly.jp はこの順で消えている）。 */
@supports selector(:focus-visible) {
  :focus { outline: none; }
}

:focus-visible {
  outline: 2px solid var(--c-main-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 暗い面（FV・S4 のカード・フッター）の上では白いリング（§11-3・§7-5-1）。
   .hero と .contact-card の本体は 7. page-top（§5-2・§5-5）。 */
.hero :focus-visible,
.contact-card :focus-visible,
.footer :focus-visible { outline-color: #FFFFFF; }

/* ==================================================================
   4. utility
   ================================================================== */

/* §7-3：最大 1080px・左右 24px（SP 20px） */
.container {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 視覚的に隠し、支援技術にだけ読ませる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* スクロールリビール（§7-6）。移動量は 24px を超えない。
   JSが読み込まれなかった場合に本文が消えないよう、
   各ページの <head> に <noscript> の打ち消しスタイルを置くこと（§5-9-5 A）。 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 連鎖遅延。80ms 刻み・1グループで最大6要素まで（§7-6） */
.reveal--d1 { transition-delay:  80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
.reveal--d4 { transition-delay: 320ms; }
.reveal--d5 { transition-delay: 400ms; }
.reveal--d6 { transition-delay: 480ms; }

/* モーダル表示中の背面スクロールを止める（<body> に付与） */
.is-modal-open { overflow: hidden; }

/* ==================================================================
   5. components
   CSS の content で文字を出す部品は無い（§10-4。外部リンクの印は SVG）。
   ================================================================== */

/* ---- 5-1. ボタン（§7-5-1） ---------------------------------------- */
/* 幅を指定しない。padding で組み、長い文言でも崩れないようにする。
   hover で地の色を変えない（コントラストを検証した色のまま）。 */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* 白文字 5.17〜5.38:1（--gradient-cta の全区間。§7-1） */
.btn--primary {
  background: var(--gradient-cta);
  color: #FFFFFF;
  box-shadow: var(--sh-cta);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37,99,235,.36);
}

/* active の影は §7-5-1 に無いので、default の --sh-cta に戻す（Mimori は押すと影を小さくしている） */
.btn--primary:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--sh-cta);
  transition-duration: var(--dur-fast);
}

/* 暗い面（FV）の上だけで使う */
.btn--ghost {
  border: 1.5px solid rgba(255,255,255,.6);
  background: transparent;
  color: #FFFFFF;
}

.btn--ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,.08);
}

.btn--ghost:active {
  transform: scale(.985);
  transition-duration: var(--dur-fast);
}

.btn--ghost:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* ヘッダーCTA用。見た目は確定値のまま、当たり判定だけ 44px に広げる（§7-5-1） */
.btn--sm {
  padding: 11px 22px;
  font-size: 14px;
}

.btn--sm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* §7-2「button」：TB・SP は 15px。.btn--sm はどの幅でも 14px */
@media (max-width: 1023px) {
  .btn { font-size: 15px; }
  .btn--sm { font-size: 14px; }
}

/* ---- 5-2. セクション見出し（§7-5-3） ------------------------------- */
/* 1つの <h2> の中に、日本語のラベル（ピル）と英字の大見出しを入れる。
   読み上げは「事業内容 Service」の1つの見出しになる。 */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* §7-2「セクションのラベル」：14px（SP 13px）・w700・行送り 1・字間 .12em */
.section-head__label {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--r-pill);
  background: var(--c-bg-blue);
  color: var(--c-main);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .12em;
}

/* §7-2「セクションの英字見出し」：48 / 40 / 32px・行送り 1.2・字間 .01em */
.section-head__title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--c-heading);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: .01em;
}

/* 左右の 32×2px の線。左は向きを反転し、どちらも文字に近い側が青になる */
.section-head__title::before,
.section-head__title::after {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  background: var(--gradient-line);
}

.section-head__title::before { transform: scaleX(-1); }

/* 暗い面（S4 のカード）の上。グラデーションの上の文字は白だけ（§7-1） */
.section-head--on-dark .section-head__label {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #FFFFFF;
}

.section-head--on-dark .section-head__title { color: #FFFFFF; }

@media (max-width: 1023px) {
  .section-head__title { font-size: 40px; }
}

@media (max-width: 767px) {
  .section-head__label { font-size: 13px; }
  .section-head__title { font-size: 32px; }
}

/* ---- 5-3. サービスカード（§7-5-2） --------------------------------- */
/* 箱（面・枠線・角丸・影・余白）と、中の部品（アイコン・名前・説明の一行・説明・リンク。§5-3-3）。
   hover で動かさない（カード全体はリンクではないため）。transition も付けない
   （.reveal と同じ要素に付けるので、付けるとフェードインの transition を上書きする）。 */

.service-card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

/* §7-3「カード内 padding」 */
@media (max-width: 1023px) {
  .service-card { padding: 32px 28px; }
}

@media (max-width: 767px) {
  .service-card { padding: 24px 20px; }
}

/* アプリのアイコン。両アプリとも白地なので、枠線が無いと形が見えない */
.service-card__icon {
  width: 64px;
  height: 64px;
  border: 1px solid var(--c-line);
  border-radius: 22%;
}

/* §7-2「h3」：24 / 22 / 20px */
.service-card__name {
  margin-top: 20px;
  font-size: 24px;
}

/* 公式の表記の一行（R2）。行送りは仕様に無いので、Mimori の .hero__title（アイコンの下の一行の説明）と同じ 1.6 */
.service-card__tagline {
  margin-top: 4px;
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/* §7-2「body-s」：15px（SP 14px）・行送り 1.9 */
.service-card__text {
  margin-top: 16px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
}

/* margin-top: auto でカードの下端にそろえ、説明との間は padding-top で最低 24px あける。
   align-self で文字の幅にとどめる（カードは縦の flex なので、指定しないと横いっぱいに伸びて押せる範囲が広がる）。
   行送りは body のまま（Mimori の .link-text と同じ） */
.service-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--c-main);
  font-size: 15px;
  font-weight: 700;
}

.service-card__link:hover {
  color: var(--c-main-deep);
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .service-card__name { font-size: 22px; }
}

@media (max-width: 767px) {
  .service-card__icon {
    width: 56px;
    height: 56px;
  }
  .service-card__name { font-size: 20px; }
  .service-card__text { font-size: 14px; }
}

/* ---- 5-4. 会社概要の表（§7-5-4） ---------------------------------- */
/* <dl class="company-table"> の中で、dt と dd の1組ずつを <div class="company-table__item"> で包む。
   文字は §7-2「body-s」（15px・SP 14px・行送り 1.9）。 */

.company-table {
  padding: 8px 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

.company-table__item {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 24px;
  padding: 20px 0;
}

/* 行の間の罫線。最初の行には引かない */
.company-table__item + .company-table__item { border-top: 1px solid var(--c-line); }

.company-table__term {
  color: var(--c-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.company-table__desc {
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
}

/* SP は1列（dt の下に dd、間 4px） */
@media (max-width: 767px) {
  .company-table { padding: 4px 20px; }
  .company-table__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .company-table__term,
  .company-table__desc { font-size: 14px; }
}

/* ---- 5-5. お問い合わせモーダル（§5-9-3） --------------------------- */
/* 本サイトのモーダルはお問い合わせの1つだけ（トップだけに置く）。他の用途で増やさない。
   <dialog> は使わない（§10-7）。ダイアログの中の値は Mimori の実装値と同じ。 */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease);
}

.modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15,23,42,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  border-radius: var(--r-l);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease);
}

.modal.is-open .modal__dialog { transform: none; }

.modal__title {
  font-size: 20px;
  line-height: 1.6;
}

.modal__text {
  margin-top: 12px;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.9;
}

.modal__mail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  background: var(--c-bg-soft);
}

.modal__address {
  color: var(--c-heading);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  word-break: break-all;
}

/* 幅を固定しない。「コピーしました」に変わると横に伸びる */
.modal__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: auto;
  padding: 11px 22px;
  border: 1.5px solid var(--c-main);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-main-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.modal__copy:hover { background: var(--c-bg-blue); }

/* コピー完了。--c-main の地に白文字（5.17:1。§7-1「白文字を載せてよい面」） */
.modal__copy.is-copied {
  border-color: var(--c-main);
  background: var(--c-main);
  color: #FFFFFF;
}

.modal__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  color: var(--c-main);
  font-size: 14px;
  font-weight: 700;
}

.modal__link:hover { text-decoration: underline; }

/* ×ボタンはダイアログ内の先頭に置く（開いたときのフォーカス先。§5-9-5 E） */
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.modal__close:hover {
  background: var(--c-bg-soft);
  color: var(--c-heading);
}

@media (max-width: 767px) {
  .modal { padding: 20px; }
  .modal__dialog { padding: 28px 20px 24px; }
  .modal__copy { margin-left: 0; }
}

/* ---- 5-6. 外部リンクの印（§5-3-3） -------------------------------- */
/* 14px のインライン SVG（aria-hidden="true" focusable="false"）。
   線は stroke="currentColor" なので、リンクの文字色（hover を含む）に合わせて変わる。 */

.ext-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* ==================================================================
   6. layout
   ================================================================== */

/* ---- 6-1. スキップリンク（§11-2） ---------------------------------- */

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-main-deep);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* ---- 6-2. ヘッダー（§5-9-1）・簡易ヘッダー（§5-9-4） ----------------- */
/* FV の上でも透明にしない（ロゴの文字が黒いため。§7-0）。
   下線は常に1pxぶん確保しておき、スクロールしたら色を付ける（付け外しで高さが変わって本文が動かないように）。
   簡易ヘッダー（.site-header--simple）は見た目が同じで、ロゴだけを置く。追加のスタイルは無い。 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 72px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

/* マーク＋ロゴタイプの画像（§8-1）。高さで決め、幅は比率なり（PC 約133px / SP 約108px） */
.site-header__logo-img {
  width: auto;
  height: 32px;
}

.site-header__nav { margin-left: auto; }

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* §7-2「ナビ」：14px・w700・行送り 1・字間 .12em・大文字。
   padding 14px 16px と行送り 1 では高さが 42px なので、min-height で 44px にそろえる（§5-9-1「高さ44px以上」） */
.site-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 16px;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* hover で文字の下に 24×2px の線を中央から伸ばす。
   位置は Flutter 版どおり文字の中央の下（Flutter は文字の6px下。6px はスペーシングの段に無いので bottom 8px） */
.site-header__link::after {
  content: "";
  position: absolute;
  left: calc(50% - 12px);
  bottom: 8px;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--gradient-line);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.site-header__link:hover { color: var(--c-main-deep); }

.site-header__link:hover::after { transform: scaleX(1); }

.site-header__cta { margin-left: 16px; }

/* 768px 未満はナビを出さず、ロゴとお問い合わせのボタンだけにする（§7-5-6） */
@media (max-width: 767px) {
  .site-header__inner { height: 56px; }
  .site-header__logo-img { height: 26px; }
  .site-header__nav { display: none; }
  .site-header__cta { margin-left: auto; }
}

/* ---- 6-3. フッター（§5-9-2）・簡易フッター（§5-9-4） ----------------- */
/* ロゴタイプの画像（黒い文字）は置かない。紺の上で読めないため。マークだけを置き、社名は文字で書く。
   フォーカスリングは白（3. base の「暗い面」）。 */

.footer {
  padding: 72px 0 40px;
  background: var(--c-navy);
  color: var(--c-on-dark);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

/* オレンジの M（§8-1）。高さで決め、幅は比率なり */
.footer__mark {
  width: auto;
  height: 40px;
}

/* 社名2行の行送りは仕様に無いので、日本語は 1.6、英字は caption の 1.7（§7-2） */
.footer__name {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.footer__name-en {
  color: var(--c-on-dark-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .12em;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  gap: 56px;
}

/* <p> で組む（<h2> にするとページ本文の見出し階層に混ざるため） */
.footer__heading {
  margin-bottom: 12px;
  color: var(--c-on-dark-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
}

/* <a> と、お問い合わせの <button> の両方に付ける。タップ領域 44px（§11-7） */
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

.footer__link:hover { text-decoration: underline; }

.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line-dark);
}

/* §7-2「caption」 */
.footer__copyright {
  color: var(--c-on-dark-2);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
}

@media (max-width: 767px) {
  .footer { padding: 56px 0 32px; }
  .footer__brand { margin-bottom: 40px; }
  .footer__mark { height: 36px; }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* 簡易フッター（法務4ページ・404）。明るい面にコピーライトだけ。--c-ink-2 は --c-bg-soft の上で 4.55:1 */
.footer--simple {
  padding: 24px 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}

.footer--simple .footer__copyright { color: var(--c-ink-2); }

/* ==================================================================
   7. page-top（S1〜S4）
   セクションID順（§5-1-1）に書く。値はすべて §5・§7 の確定値。
   仕様に無い値は Mimori の実装値で埋め、仕様書に書き足した（R4）。
   ================================================================== */

/* ---- 7-0. セクション共通（§5-1-3） -------------------------------- */

.section { padding: 120px 0; }

@media (max-width: 1023px) {
  .section { padding: 96px 0; }
}

@media (max-width: 767px) {
  .section { padding: 72px 0; }
}

/* ---- 7-1. S1 ファーストビュー（§5-2） ------------------------------ */
/* 背景は Flutter 版の _MeshGradientPainter を CSS の4層で再現する（§7-4。要素も filter も足さない）。
   この4層のまま白文字が 4.67:1 以上。光の濃さ（15%・12%）を上げない。
   文字はすべて白（グラデーションの上の文字は白だけ。§7-1）。
   100vh にしない（1440×900 で下に S2 の見出しが少し見えるように。§5-2-2）。 */

.hero {
  position: relative;
  overflow: hidden;
  padding: 144px 0 152px;
  background:
    radial-gradient(rgba(255,255,255,.04) 1.5px, transparent 1.6px) 0 0 / 60px 60px,  /* ドット（60px 間隔） */
    radial-gradient(60% 60% at 25% 35%, rgba(6,182,212,.15), transparent 70%),         /* シアンの光（左上） */
    radial-gradient(55% 55% at 80% 70%, rgba(124,58,237,.12), transparent 70%),        /* 紫の光（右下） */
    var(--gradient-hero);
  color: #FFFFFF;
}

/* 中央揃えの1カラム・中身の最大幅 880px */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 登場（§5-2-5）。JS を待たずに CSS の animation だけで再生する（JS が動かなくても FV が出る）。
   h1 → キャッチ → リード → ボタンの順に 0 / 80 / 160 / 240ms 遅らせる */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* h1（T-02・T-01）。会社名のピル。Flutter 版の「革新的なITソリューション」のピルと同じ形 */
.hero__name {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  color: #FFFFFF;
  animation: hero-in var(--dur-slow) var(--ease) both;
}

/* §7-2「FV の会社名」：15 / 14 / 13px・w700・行送り 1.6・字間 .08em */
.hero__name-ja {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .08em;
}

/* §7-2「FV の英字」：13 / 13 / 12px・w700・行送り 1.4・字間 .2em・大文字 */
.hero__name-en {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* T-02 との間の 1×12px の縦線（左右 12px） */
.hero__name-en::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  background: rgba(255,255,255,.4);
}

/* T-03。§7-2「display」：48 / 40 / 30px（≤374px は 26px）・w700・行送り 1.45・字間 .02em。
   すべての幅で2行（「、」の後の <br>） */
.hero__catch {
  margin-top: 32px;
  color: #FFFFFF;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  animation: hero-in var(--dur-slow) var(--ease) 80ms both;
}

/* T-04。§7-2「body-lead」：17 / 16 / 15px・行送り 2.0 */
.hero__lead {
  max-width: 640px;
  margin-top: 24px;
  color: #FFFFFF;
  font-size: 17px;
  line-height: 2.0;
  animation: hero-in var(--dur-slow) var(--ease) 160ms both;
}

/* T-05（primary）・T-06（ghost）。折り返したら縦 12px */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 40px;
  animation: hero-in var(--dur-slow) var(--ease) 240ms both;
}

@media (max-width: 1023px) {
  .hero { padding: 120px 0 128px; }
  .hero__name-ja { font-size: 14px; }
  .hero__catch {
    margin-top: 28px;
    font-size: 40px;
  }
  .hero__lead { font-size: 16px; }
}

@media (max-width: 767px) {
  .hero { padding: 88px 0 96px; }
  .hero__name-ja { font-size: 13px; }
  .hero__name-en { font-size: 12px; }
  .hero__catch {
    margin-top: 24px;
    font-size: 30px;
  }
  .hero__lead {
    margin-top: 20px;
    font-size: 15px;
  }
  .hero__actions { margin-top: 32px; }
}

/* ≤374px：キャッチを 26px に。ピルは 293px あり、320px の画面（使える幅 280px）で右の余白に
   食い込むので、左右の padding と縦線の左右を詰める（文字の大きさは変えない。2026-10-05 依頼者了承） */
@media (max-width: 374px) {
  .hero__name { padding: 8px 12px; }
  .hero__name-en::before { margin: 0 8px; }
  .hero__catch { font-size: 26px; }
}

/* ---- 7-2. S2 事業内容（§5-3） -------------------------------------- */
/* カードは 5-3 の .service-card。並び順は Towaly → Mimori（リリースの順） */

.service { background: var(--c-bg-soft); }

/* §7-2「body-lead」・中央・最大 720px。見出しとの間は §7-3 の 32 / 24 / 20px */
.service__lead {
  max-width: 720px;
  margin: 32px auto 0;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
  text-align: center;
}

/* リードとの間は §7-3 の 56 / 48 / 40px。PC・TB は2列、SP は1列 */
.service__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
}

@media (max-width: 1023px) {
  .service__lead {
    margin-top: 24px;
    font-size: 16px;
  }
  .service__list {
    gap: 24px;
    margin-top: 48px;
  }
}

@media (max-width: 767px) {
  .service__lead {
    margin-top: 20px;
    font-size: 15px;
  }
  .service__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
}

/* ---- 7-3. S3 会社概要（§5-4） -------------------------------------- */
/* 表は 5-4 の .company-table。
   見出しとの間は仕様に無いので、S2 の「リード → コンテンツ」と同じ 56 / 48 / 40px（§7-3） */

.company__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: start;
  margin-top: 56px;
}

/* T-31。§7-2「h3」：24 / 22 / 20px。すべての幅で2行（「、」の後の <br>） */
.company__catch { font-size: 24px; }

/* T-32。§7-2「body」（16 / 16 / 15px・行送り 1.9）は body の値のまま。
   本文の最大幅 720px（§7-2）。TB は1列になり、指定しないと1行が60字近くまで伸びる */
.company__text {
  max-width: 720px;
  margin-top: 20px;
  color: var(--c-ink);
}

@media (max-width: 1023px) {
  .company__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 48px;
  }
  .company__catch { font-size: 22px; }
}

@media (max-width: 767px) {
  .company__body { margin-top: 40px; }
  .company__catch { font-size: 20px; }
}

/* ---- 7-4. S4 お問い合わせ（§5-5） ---------------------------------- */
/* カードは FV と同じ背景（ドットだけ 40px 間隔。§7-4）。文字は白だけ。
   中のボタンのフォーカスリングは 3. base の「暗い面」で白になる */

.contact { background: var(--c-bg-soft); }

.contact-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 56px;
  border-radius: var(--r-l);
  background:
    radial-gradient(rgba(255,255,255,.04) 1.5px, transparent 1.6px) 0 0 / 40px 40px,  /* ドット（40px 間隔） */
    radial-gradient(60% 60% at 25% 35%, rgba(6,182,212,.15), transparent 70%),
    radial-gradient(55% 55% at 80% 70%, rgba(124,58,237,.12), transparent 70%),
    var(--gradient-hero);
  box-shadow: var(--sh-3);
  color: #FFFFFF;
  text-align: center;
}

/* T-41。§7-2「body-lead」・白。見出しとの間 24px（SP 20px） */
.contact-card__lead {
  margin-top: 24px;
  color: #FFFFFF;
  font-size: 17px;
  line-height: 2.0;
}

/* T-42。リードとの間 32px（SP 28px） */
.contact-card__btn { margin-top: 32px; }

@media (max-width: 1023px) {
  .contact-card { padding: 56px 40px; }
  .contact-card__lead { font-size: 16px; }
}

@media (max-width: 767px) {
  .contact-card { padding: 48px 24px; }
  .contact-card__lead {
    margin-top: 20px;
    font-size: 15px;
  }
  .contact-card__btn { margin-top: 28px; }
}

/* ==================================================================
   8. page-legal（.legal。§6-2）・page-404（.notfound。§6-4）
   どちらも <body class="legal-page">（Web フォントを読み込まず、端末の文字。確定事項14）。
   値はすべて §6-2・§6-4 の確定値。仕様に無い値は Mimori の実装値で埋め、仕様書に書き足した（R4）。
   ================================================================== */

/* ---- 8-1. Mimori の法務4ページ（§6-2） ------------------------------ */
/* h1 〜 LEGAL:END は legal_tool.py が Dart から生成した HTML のまま（§6-3）。
   行頭の全角スペース（「　(1)」など）は文字のまま残している。字下げを CSS で作らない。 */

.legal { padding: 48px 0 96px; }

.legal__body {
  max-width: 760px;
  margin: 0 auto;
}

/* 英語のページだけ、長い単語で横スクロールを出さない（§6-2） */
.legal__body:lang(en) { overflow-wrap: break-word; }

/* 本文の上の1行：左にアプリ名、右に言語の切り替え */
.legal__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.legal__app {
  color: var(--c-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* タップ領域 44px（§11-7）。hover の色は仕様に無いので Mimori の .link-text と同じ --c-main-deep */
.legal__lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-main);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

.legal__lang:hover { color: var(--c-main-deep); }

/* §7-2「法務：h1」：32 / 28 / 24px・w700・行送り 1.5・字間 .01em */
.legal__title {
  margin-top: 16px;
  color: var(--c-heading);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: left;
}

/* §7-2「法務：本文」：15px・w400・行送り 1.9・字間 0 */
.legal__read {
  margin-top: 32px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}

/* 条ごとの区切り */
.legal__item {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
}

/* §7-2「法務：条の見出し」：17 / 17 / 16px・w700・行送り 1.6・字間 0 */
.legal__heading {
  color: var(--c-heading);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* §7-2「法務：本文」 */
.legal__text {
  margin-top: 12px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}

/* 原文の空行（\n\n）で分けた段落の間 */
.legal__text + .legal__text { margin-top: 16px; }

/* 制定・改定の日付。最初の1つは本文から 48px、2つめ以降は 4px */
.legal__date {
  margin-top: 48px;
  color: var(--c-ink-2);
  font-size: 14px;
  text-align: right;
}

.legal__date + .legal__date { margin-top: 4px; }

@media (max-width: 1023px) {
  .legal__title { font-size: 28px; }
}

@media (max-width: 767px) {
  .legal { padding: 32px 0 72px; }
  .legal__title { font-size: 24px; }
  .legal__heading { font-size: 16px; }
}

/* ---- 8-2. 404（§6-4） ---------------------------------------------- */
/* 存在しない深いURLでも表示されるので、HTML のパスはすべてルート相対（/assets/…） */

.notfound {
  padding: 120px 0;
  text-align: center;
}

/* §7-2「法務：h1」 */
.notfound__title {
  color: var(--c-heading);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: .01em;
}

/* L-11 */
.notfound__text {
  margin-top: 24px;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 2.0;
}

/* L-12 */
.notfound__cta { margin-top: 40px; }

/* L-13。行送りは仕様に無いので body の 1.9 のまま */
.notfound__note {
  margin-top: 56px;
  color: var(--c-ink-2);
  font-size: 14px;
}

/* L-14・L-15。L-13 の 8px 下に、2本を間をあけずに縦に並べる（1本ずつ高さ 44px が当たり判定。§11-7） */
.notfound__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}

/* hover の色は仕様に無いので Mimori の .link-text と同じ --c-main-deep */
.notfound__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-main);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

.notfound__link:hover { color: var(--c-main-deep); }

@media (max-width: 1023px) {
  .notfound__title { font-size: 28px; }
}

@media (max-width: 767px) {
  .notfound { padding: 72px 0; }
  .notfound__title { font-size: 24px; }
}

/* ==================================================================
   10. prefers-reduced-motion（§7-6）
   ここが最後。以降にスタイルを足さない。
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* FV の登場の遅れ（80〜240ms）の間、文字が消えたままにならないよう、animation ごと止める（§7-6） */
  .hero__name, .hero__catch, .hero__lead, .hero__actions { animation: none; }
}