/* W / e 公式サイト — 共通のきまり（Task 1-191）
 *
 * **色も書体も間も、アプリの design/tokens.dart から写している。**
 * LPだけの色を足さない。差し色は #C8452E の1色だけで、グラデーションは使わない。
 *
 * **スマートフォンが基準。** 390px で組み、広い画面では最大幅を決めて中央に置く。
 */

:root {
  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --ink: #1A1A18;
  --ink2: #56534D;
  --ink3: #6E6B65;
  --line: #E2DED6;
  --accent: #C8452E;
  --accent-soft: #FBEFEB;

  /* 間。アプリと同じ段階（4 / 8 / 12 / 16 / 24 / 34）。 */
  --xs: 4px;  --sm: 8px;  --md: 12px;
  --lg: 16px; --xl: 24px; --xxl: 34px;

  /* 横の余白。**320px でも内容が潰れない値。** */
  --gutter: 16px;
  --max: 840px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont,
               'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  font-size: 16px;
  /* **横には絶対にはみ出させない。** 320px で確認している。 */
  overflow-x: hidden;
}

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

/* ---- ロゴ -------------------------------------------------------------
 * **画像を使わない。** アプリは3つの要素で描いていて（widgets/we_wordmark.dart）、
 * 寸法がコードに残っている。ここはその比率をそのまま写したものである。
 *   W 30px/w900 ・ 斜線 太さ3.4 長さ34 傾き0.30rad ・ e 27px/w700 を 2px 下げる
 * 大きさは --logo で変えられるようにしてある（比率は保たれる）。
 */
.wordmark {
  --logo: 30px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  user-select: none;
}
.wordmark .w {
  font-size: var(--logo);
  font-weight: 900;
  color: var(--ink);
}
.wordmark .e {
  font-size: calc(var(--logo) * 0.9);
  font-weight: 700;
  color: var(--ink);
  transform: translateY(calc(var(--logo) * 0.0667));
}
.wordmark .slash {
  width: calc(var(--logo) * 0.1133);
  height: calc(var(--logo) * 1.1333);
  margin: 0 calc(var(--logo) * 0.3);
  background: var(--accent);
  border-radius: 999px;
  transform: rotate(17.2deg);
}

/* ---- 骨組み ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-head {
  padding: var(--xl) 0 0;
}

section { padding: var(--xxl) 0; }

/* 節の区切りは、細い罫線と余白だけ。**飾りを足さない。** */
.ruled { border-top: 1px solid var(--line); }

h1, h2, h3 { line-height: 1.4; letter-spacing: -0.01em; margin: 0; }

h1 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }

p { margin: var(--lg) 0 0; }

.lead { font-size: 17px; color: var(--ink2); }
.note { font-size: 14px; color: var(--ink3); line-height: 1.7; }

.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink3);
  letter-spacing: 0.04em;
}

/* 節の見出しの上に置く小さな札。 */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: var(--lg);
}

/* ---- 面（カード） ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--xl);
}

/* ---- CTA -------------------------------------------------------------
 * **App Store のURLはまだ無い。** いまは押せない見た目で置いてあり、
 * URLが決まったら `.cta` を <a href> にするだけで両方が生きる。
 * **壊れたリンクは置かない。**
 */
.cta-block { margin-top: var(--xl); }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: var(--lg) var(--xl);
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: var(--accent);
  color: #FFFFFF;
  border: none;
}
/* 公開前の姿。**押せないことが見て分かるようにする。** */
.cta[aria-disabled='true'] {
  background: var(--surface);
  color: var(--ink3);
  border: 1px solid var(--line);
  cursor: default;
}
.cta-note {
  margin-top: var(--md);
  font-size: 14px;
  color: var(--ink3);
}

/* ---- スクロールの誘い ------------------------------------------------ */
.scroll-hint {
  margin-top: var(--xxl);
  font-size: 13px;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: var(--sm);
}
.scroll-hint::after {
  content: '';
  width: 1px;
  height: 28px;
  background: var(--line);
}

/* ---- 画面の写真 ------------------------------------------------------
 * **実機で撮ったものをそのまま使う。** 枠を付けるだけで、合成しない。
 */
.shot {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
}
.shot img { width: 100%; }

.shot-caption {
  margin-top: var(--md);
  font-size: 13px;
  color: var(--ink3);
  text-align: center;
}

/* 節の中で、文章と画面を縦に積む。広い画面では横に並べる。 */
.split { display: grid; gap: var(--xl); align-items: center; }

/* 画面を並べる棚（7節）。 */
.gallery {
  display: grid;
  gap: var(--xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery figure { margin: 0; }

/* ---- 体験の流れ ------------------------------------------------------ */
.flow { list-style: none; margin: var(--xl) 0 0; padding: 0; }
.flow li {
  position: relative;
  padding: var(--md) 0 var(--md) var(--xl);
  font-weight: 500;
}
.flow li::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}
/* 項目をつなぐ縦線。 */
.flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6.5px; top: 50%;
  width: 1px; height: 100%;
  background: var(--line);
}

/* ---- 箇条 ------------------------------------------------------------ */
.points { list-style: none; margin: var(--xl) 0 0; padding: 0; }
.points li {
  padding: var(--lg) 0;
  border-top: 1px solid var(--line);
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points strong { display: block; font-weight: 700; }
.points span { display: block; margin-top: var(--xs); color: var(--ink2); font-size: 15px; }

/* ---- 実際のテーマ文を見せるところ ------------------------------------ */
.theme-quote {
  margin: var(--xl) 0 0;
  padding: var(--xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.theme-quote .q {
  margin: var(--md) 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.theme-quote .rule {
  width: 44px; height: 3px;
  background: var(--accent);
  border-radius: 999px;
  margin-top: var(--lg);
}

/* ---- 運営者 ---------------------------------------------------------- */
.company dl { margin: var(--xl) 0 0; }
.company dt {
  font-size: 13px;
  color: var(--ink3);
  margin-top: var(--lg);
}
.company dt:first-child { margin-top: 0; }
.company dd { margin: var(--xs) 0 0; font-weight: 500; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* ---- Footer ---------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: var(--xxl) 0;
  margin-top: var(--xxl);
}
.foot-links { list-style: none; margin: var(--xl) 0 0; padding: 0; }
.foot-links li { padding: var(--md) 0; border-bottom: 1px solid var(--line); }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--accent); }
.copyright { margin-top: var(--xl); font-size: 13px; color: var(--ink3); }

/* ---- 法務ページ ------------------------------------------------------ */
.doc { max-width: 720px; }
.doc h1 { font-size: 28px; margin-bottom: var(--xl); }
.doc h2 {
  font-size: 20px;
  margin-top: var(--xxl);
  padding-top: var(--xl);
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 16px; margin-top: var(--xl); }
.doc p, .doc li { font-size: 15px; }
.doc ol, .doc ul { padding-left: 1.4em; margin: var(--md) 0 0; }
.doc li { margin-top: var(--sm); }
.doc pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--lg);
  overflow-x: auto;
  /* 長いURLも折り返す。`white-space: pre-wrap` だけでは、
     区切りの無い1語は折り返されず、狭い画面で横にはみ出す。 */
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.9;
  font-family: inherit;
  white-space: pre-wrap;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--lg) 0 0;
  font-size: 14px;
}
.doc th, .doc td {
  border: 1px solid var(--line);
  padding: var(--sm) var(--md);
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--surface); font-weight: 700; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: var(--xxl) 0; }
.back {
  display: inline-block;
  margin-top: var(--xxl);
  font-size: 15px;
  text-decoration: none;
}

/* ---- とくに狭い画面 ---------------------------------------------------
 * **320px で見出しが語の途中で折れないようにする。** 34px のままだと
 * 「何を投稿しようか、」が1行に収まらず、「しよう／か、」で切れてしまう。
 */
@media (max-width: 374px) {
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  .theme-quote .q { font-size: 21px; }
  .lead { font-size: 16px; }
}

/* ---- 広い画面 --------------------------------------------------------
 * **読みやすさのために幅を決める。** 行が長くなりすぎると文章が追いにくい。
 */
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  body { font-size: 17px; }
  h1 { font-size: 46px; }
  h2 { font-size: 30px; }
  .wrap { max-width: 640px; }
  .theme-quote .q { font-size: 30px; }
}

@media (min-width: 1024px) {
  .wrap { max-width: var(--max); }
  /* **左の段は約458px しかない。** 56px だと「何を投稿しようか、」が
     1行に収まらず、語の途中で折れる。 */
  h1 { font-size: 44px; }
  /* 文章と画面を左右に。**画面は小さくしすぎない。** */
  .split { grid-template-columns: 1fr 300px; gap: var(--xxl); }
  .split.reverse > .shot { order: -1; }
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--lg); }
  .doc { max-width: 720px; }
}

/* 動きを減らす設定の人には、動かさない。 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}