/* kazeyoke（風除け）。値の正典は ai_docs/design-system.md。サイトは浅葱と墨だけでまとめ、アプリの色はアイコン・状態・ボタンにだけ出す */
:root {
  --bg: #f1f5f4; --fg: #142026; --muted: #4d6066; --line: #d5dfdd; --soft: #fbfdfc;
  --tide: #2a77b3; --minai: #5d4fc0; --nama: #c95a17; --matte: #2a8553; --on: #ffffff;
  --link: #1d6c77; --sumi: #142026; --shield: #2a8794; --wind: #4b9299;
  --mark: "Lexend", "Helvetica Neue", Arial, sans-serif;
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color-scheme: light;
}
/* ふだんはライト。上の帯のボタンでダーク（深い浅葱）にし、選んだ方を覚える（Base.astro） */
:root[data-theme="dark"] {
  --bg: #0c2a30; --fg: #eaf4f3; --muted: #a6c4c6; --line: #1d4750; --soft: #113640;
  --tide: #2f7fbd; --minai: #6a5ccf; --nama: #c45f20; --matte: #2f8a58; --on: #ffffff;
  --link: #8fdae1; --sumi: #eaf4f3; --shield: #7fd1d9; --wind: #4c9fa8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.75; }
/* 和文を文節で折り返す（語の途中で割らない）。対応していないブラウザではふだんの折り返し */
p, li, dd { word-break: auto-phrase; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.page {
  max-width: 980px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: max(24px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-bottom, 0px));
}

.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mark); font-weight: 500; font-size: 20px; letter-spacing: .02em; color: var(--fg); text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.nav-r { display: flex; align-items: center; gap: 16px; }
.theme { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 999px; }
.theme:hover { color: var(--fg); }
.theme:focus-visible { outline: 2px solid var(--fg); outline-offset: -6px; }
.theme svg { width: 20px; height: 20px; }
.theme .moon, :root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
.nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav nav a { color: var(--muted); }

/* トップ: 最初の画面 → お知らせ → 事業（アプリ → Web・AI）→ 理念 → 発信 → お問い合わせ。段の間は区切り線1本 */
.ink { fill: var(--sumi); } .sh { fill: var(--shield); }
.top-page, .about-page { display: grid; }
.fv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; min-height: 560px; }
.fv-text { min-width: 0; }
.name { font-family: var(--mark); font-weight: 600; font-size: clamp(22px, 3vw, 28px); letter-spacing: .01em; margin: 0 0 16px; }
.name small { font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: .1em; color: var(--muted); margin-left: 10px; }
/* 見出しは語の途中で折らず、<wbr> の位置だけで折る（auto-phrase は Safari で効かないため） */
.lead { margin: 0; font-size: clamp(28px, 4.2vw, 42px); font-weight: 900; line-height: 1.45; text-wrap: balance; word-break: keep-all; }

/* 向かい風の絵: 右から来る乱れた風が板の前で上下に分かれ、点のまわりは静か。点の後ろに進んできた跡 */
.fv-wind { width: 100%; height: auto; min-width: 0; }
.flow { fill: none; stroke: var(--wind); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 18 150; animation: flow 3.6s linear infinite; }
.flow.d1 { animation-delay: -.9s; } .flow.d2 { animation-delay: -1.8s; } .flow.d3 { animation-delay: -2.7s; }
@keyframes flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -168; } }
.trail { fill: none; stroke: var(--sumi); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; animation: trail 1.1s linear infinite; }
@keyframes trail { to { stroke-dashoffset: 11; } }
/* 画面の外・裏のタブでは止める（index.astro） */
.fv-wind.paused .flow, .fv-wind.paused .trail { animation-play-state: paused; }
/* 動きを減らす設定では、風の線を実線で止めた絵にする */
@media (prefers-reduced-motion: reduce) { .flow, .trail { animation: none; } .flow { stroke-dasharray: none; } }

.part { display: grid; gap: 18px; align-content: start; border-top: 1px solid var(--line); padding-block: 48px; scroll-margin-top: 16px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: .16em; color: var(--link); }
.part .desc { margin: 0; font-size: 14px; color: var(--muted); max-width: 40em; }
.teaser { margin: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 900; line-height: 1.5; text-wrap: balance; }
.more { font-size: 14px; font-weight: 500; justify-self: start; }

/* お知らせ: 日付・種別・1行の見出し */
.news { list-style: none; margin: 0; padding: 0; display: grid; max-width: 720px; }
.news li { display: grid; grid-template-columns: 6.5em 4.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.news time { font-family: var(--mark); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news .kind { font-size: 12px; color: var(--link); border: 1px solid var(--line); border-radius: 999px; text-align: center; }
.news a { color: var(--fg); text-decoration: none; }
.news a:hover { text-decoration: underline; }
@media (max-width: 680px) { .news li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .news .kind { padding: 0 8px; } .news li > :last-child { flex-basis: 100%; } }

/* 事業: 区切り線を引かず、小見出しで「アプリの制作・運営」→「Web・AI」 */
#biz > .sub + .sub { margin-top: 22px; }
.sub { display: grid; gap: 16px; scroll-margin-top: 16px; }
.sub h3 { margin: 0; font-size: 20px; }
/* アプリの色はアイコン・状態の点・ボタンだけ。カードの地と枠はサイトのまま */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.app { display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px; transition: transform .16s ease, border-color .16s ease; }
.app:hover { transform: translateY(-2px); border-color: var(--shield); }
.app img, .app .noicon { width: 64px; height: 64px; border-radius: 15px; }
.app .noicon { border: 2px dashed var(--muted); }
.app h4 { margin: 0; font-family: var(--mark); font-weight: 600; font-size: 19px; }
.app h4 small { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted); }
.app p { margin: 0; font-size: 14px; color: var(--muted); }
.headwind { font-size: 13px; font-weight: 700; color: var(--link); }
.st { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); align-self: flex-start; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* 白い文字を載せるので、アプリの色を1段濃くして 4.5:1 を保つ（ナマムギャの色は白字で 4.2:1） */
.go { align-self: flex-start; background: color-mix(in srgb, var(--c) 85%, #000); color: var(--on); text-decoration: none; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.go:hover { text-decoration: underline; }
.lk { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }

.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
@media (max-width: 700px) { .svcs { grid-template-columns: 1fr; } }
.svc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc .ic { display: block; width: 56px; height: 56px; color: var(--fg); }
.svc .ic svg { width: 100%; height: 100%; }
.svc h4 { margin: 0; font-size: 17px; line-height: 1.5; }
.svc p { margin: 0; font-size: 14px; color: var(--muted); }

.contact { display: grid; gap: 14px; max-width: 560px; }
.contact label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.contact input, .contact select, .contact textarea { font: inherit; font-size: 16px; color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.contact input:focus-visible, .contact select:focus-visible, .contact textarea:focus-visible, .contact button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.contact button { justify-self: start; font: inherit; font-weight: 700; color: var(--bg); background: var(--link); border: 0; border-radius: 999px; padding: 10px 28px; cursor: pointer; }
.contact button:disabled { opacity: .6; cursor: wait; }
.contact .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact .status { margin: 0; color: var(--link); font-weight: 500; }
.contact .status:empty { display: none; }
.contact .note { margin: 0; font-size: 13px; color: var(--muted); }

.who { display: grid; grid-template-columns: 5em 1fr; gap: 6px 12px; margin: 0; }
.who dt { color: var(--muted); }
.who dd { margin: 0; }

.send { display: flex; gap: 32px; flex-wrap: wrap; }
.send a { color: var(--fg); text-decoration: none; display: grid; }
.send a span { font-family: var(--mark); font-size: 20px; }
.send a:hover span { text-decoration: underline; }
.send a small { color: var(--muted); font-size: 13px; }

/* お問い合わせへの浮いたボタン。最初の画面とお問い合わせの段が見えている間は隠す（index.astro） */
.fab { position: fixed; z-index: 10; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); background: var(--link); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.5; padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; transition: opacity .2s ease, visibility .2s; }
.fab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.fab.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* 考え方のページ */
.ahead { margin: 0; padding-block: 48px 32px; font-size: clamp(26px, 4vw, 36px); font-weight: 900; }
.about-page .body { margin: 0; max-width: 40em; }
.motto { margin: 0; font-family: var(--mark); font-weight: 500; font-size: 22px; }
.rules { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; max-width: 40em; }
.rules b { margin-right: .5em; }

.c-tide { background: var(--tide); } .c-minai { background: var(--minai); } .c-nama { background: var(--nama); } .c-matte { background: var(--matte); }
.band .pf { font-size: 12px; }

/* アプリごとのページ */
.band { color: var(--on); border-radius: 12px; padding: 18px 20px; margin-top: 28px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.band .nm { font-weight: 900; font-size: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tabs a { font-size: 14px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.doc { max-width: 720px; padding-top: 8px; }
.doc > * { min-width: 0; }
.doc h1 { font-weight: 900; font-size: 28px; line-height: 1.4; margin: 28px 0 8px; text-wrap: balance; }
.doc h2 { font-weight: 900; font-size: 22px; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.doc h3 { font-weight: 700; font-size: 18px; margin: 28px 0 4px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc code { font-size: .9em; background: var(--soft); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.doc table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; margin: 0 0 16px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; min-width: 8em; }
.doc th { background: var(--soft); }

.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.foot a { color: var(--muted); }
.top-page + .foot, .about-page + .foot { margin-top: 0; }

/* 動きを減らす設定では、ホバーで浮く動きとボタンの出入りも切る */
@media (prefers-reduced-motion: reduce) {
  .app, .fab { transition: none; }
  .app:hover { transform: none; }
}

@media (max-width: 680px) {
  .fv { grid-template-columns: 1fr; min-height: 0; padding-block: 24px 48px; }
  .fv-wind { max-width: 420px; justify-self: center; }
  .part { padding-block: 40px; }
  /* スマホ幅ではナビの項目を隠し、ロゴと配色のボタンだけ残す */
  .nav nav { display: none; }
}