/* 全ページ共通の見た目（2026-10-27）。トップは theme-v2.css、他ページは theme-pages.css を重ねる。
   参考：ポケモン公式・ナイキ・フェンリル。白地・普通のゴシック体・平らな色・水色基調・余白を広く */

:root {
  --ink: #111;
  --muted: #6b6b6b;
  --line: #e3e3e3;
  --surface: #fff;
  --surface-soft: #f5f5f5;
  --navy: #0b2a4a;
  --sky: #eef8fd;
  --sky-strong: #9bd9f5;
  --blue: #0a7bb8;
  --brand: #0b2a4a;
  --brand-dark: #06304d;
  --brand-soft: #eef8fd;
  --accent: #0a7bb8;
  --shadow: none;
  --radius-lg: 0;
  --radius-md: 0;
  --content: 1344px;
  --en: "Barlow Condensed", "Arial Narrow", sans-serif;
  --head: "Barlow Condensed", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body {
  background: #fff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.8;
}
h1, h2, h3, .brand { font-family: var(--head); font-weight: 800; letter-spacing: 0.03em; }
h3 { font-weight: 700; }

/* ---- 上のバー・ヘッダー ---- */
.topbar { background: var(--surface-soft); height: 36px; display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 0 48px; font-size: 12px; font-weight: 500; }
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { opacity: .7; }
body .site-header { background: #fff; border-bottom: 0; box-shadow: none; backdrop-filter: none; position: static; }
body .header-inner { width: auto; padding: 0 48px; max-width: none; }
body .brand { font-family: var(--en); font-weight: 800; font-size: 28px; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
body .brand-mark { display: none; }
body .brand-logo { width: 32px; height: 32px; border-radius: 8px; display: block; }
body .site-nav a { font-weight: 500; font-size: 15px; color: var(--ink); }
body .site-nav a[aria-current="page"] { border-bottom: 0; box-shadow: none; font-weight: 700; }
body .site-nav a::after { display: none; }


/* ---- ボタン・リンク ---- */
body .text-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body .text-link:hover { color: var(--blue); }

/* ---- フッター ---- */
body .site-footer { background: #0b2a3f; }
body .site-footer .brand, body .site-footer .footer-brand { color: #fff; }
body .site-footer .footer-brand .brand-logo { width: 32px; height: 32px; }
body .site-footer .container { width: auto; max-width: none; padding: 0 48px; }


@media (max-width: 700px) {
  .topbar { padding: 0 16px; gap: 14px; justify-content: flex-start; overflow-x: auto; }
  body .header-inner { padding: 0 16px; }
  body .site-footer .container { padding: 0 16px; }
}


/* ---- ボタン：矢印の丸つき。押そうとすると矢印が動く ---- */
body .button { --arrow: 40px; display: inline-flex; align-items: center; gap: 16px; background: var(--navy); color: #fff; border: 2px solid var(--navy); border-radius: 999px; box-shadow: none; font-weight: 700; font-size: 15px; letter-spacing: .06em; line-height: 1.2; padding: 6px 6px 6px 30px; min-height: 0; text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
body .button::after { content: ""; flex: none; width: var(--arrow); height: var(--arrow); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230b2a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 40% no-repeat; transition: transform .25s, background-color .25s; }
body .button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
body .button:hover::after { transform: translateX(4px); }
body .button.secondary, body .hero-actions .button { background: transparent; color: var(--navy); border-color: var(--navy); }
body .button.secondary::after, body .hero-actions .button::after { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
body .button.secondary:hover, body .hero-actions .button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
body .button.secondary:hover::after, body .hero-actions .button:hover::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230b2a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }

/* 矢印は付けない */
body .button::after { display: none; }
body .button { gap: 0; padding: 12px 32px; }

/* ボタンの動き：乗せると、左から色が走る */
body .button.button { --sweep: var(--blue); background-color: var(--navy); background-image: linear-gradient(var(--sweep), var(--sweep)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; color: #fff; border-color: var(--navy); transition: background-size .4s cubic-bezier(.2, .7, .2, 1), color .3s, border-color .3s; }
body .button.button:hover { background-image: linear-gradient(var(--sweep), var(--sweep)); background-size: 100% 100%; background-color: var(--navy); border-color: var(--blue); color: #fff; }
body .button.secondary.button, body .hero-actions .button.button { --sweep: var(--navy); background-image: linear-gradient(var(--sweep), var(--sweep)); background-size: 0% 100%; background-color: transparent; color: var(--navy); border-color: var(--navy); }
body .button.secondary.button:hover, body .hero-actions .button.button:hover { background-image: linear-gradient(var(--sweep), var(--sweep)); background-size: 100% 100%; background-color: transparent; border-color: var(--navy); color: #fff; }
body .banner .button.button { --sweep: #fff; }
body .banner .button.button:hover { border-color: #fff; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { body .button.button { transition: none; } }