@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");

/* ==========================================================================
   base.css — reset, typography, buttons, container, form controls.
   All values come from tokens.css. No raw colour values here.
   ========================================================================== */

/* ---- reset --------------------------------------------------------------- */

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

/* The browser's own rule for [hidden] is a plain `display: none`, and any
   display in a stylesheet beats it. .btn sets display:inline-flex, so a button
   with hidden on it stayed on screen — S2 hit this in /g/ with 「もう一度作る」,
   which kept inviting the visitor to press something that could not work
   (2026-09-05). The rule belongs here rather than in one screen's stylesheet:
   /g/ and /admin/ both load base.css, and the next person to write
   `display` on something hideable should not have to rediscover it.
   !important is right for exactly this — nothing should outrank [hidden]. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; border-spacing: 0; }

/* ---- page ---------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* ---- typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: var(--w-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { font-size: var(--t-md); }

p + p { margin-top: var(--s-5); }

small { font-size: var(--t-sm); }

strong, b { font-weight: var(--w-bold); }

.num {
  font-family: var(--f-num);
  font-weight: var(--w-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.lead {
  font-size: var(--t-lg);
  color: var(--c-ink-2);
}

.note {
  font-size: var(--t-sm);
  color: var(--c-mut);
  line-height: var(--lh-head);
}

.muted { color: var(--c-ink-2); }

/* ---- links --------------------------------------------------------------- */

/* Links carry no colour of their own — see CLAUDE.md 共通のきまり. */
a {
  color: var(--c-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: opacity var(--d-fast) var(--e-out);
}

a:hover { opacity: .7; }

/* text link with a trailing arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  /* the top padding lifts the tap area to the 44px minimum */
  padding-top: var(--s-3);
  padding-bottom: 2px;
}

.link-more::after {
  content: "→";
  transition: transform var(--d-base) var(--e-out);
}

.link-more:hover { border-bottom-color: var(--c-ink); opacity: 1; }

/* A link sitting inside a sentence cannot be made 44px tall without wrecking
   the line spacing. Vertical padding on an inline box grows the clickable
   area but is ignored for layout, so the text stays where it is. */
main a:not([class]) {
  padding-block: var(--s-4);
}
.link-more:hover::after { transform: translateX(3px); }

/* ---- focus --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: var(--z-menu);
  transform: translateY(-200%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--c-deep);
  color: var(--c-on-deep);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-sm);
}

.skip-link:focus { transform: translateY(0); color: var(--c-on-deep); opacity: 1; }

/* ---- layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--w-narrow); }
.container--text   { max-width: var(--w-text); }

.section { padding-block: var(--s-section); }

.section--tint { background: var(--c-bg-2); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.measure { max-width: var(--w-text); }

/* ---- section heading ------------------------------------------------------ */

.section-head { margin-bottom: var(--s-7); }

.section-head h2 { margin-bottom: var(--s-4); }

/* ---- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.btn:active { transform: translateY(1px); }

/* Deep navy is reserved for things you press. */
.btn--primary {
  background: var(--c-deep);
  border-color: var(--c-deep);
  color: var(--c-on-deep);
  box-shadow: var(--sh-press);
}

.btn--primary:hover {
  background: var(--c-deep);
  border-color: var(--c-deep);
  color: var(--c-on-deep);
  opacity: .88;
}

.btn--ghost {
  background: var(--c-bg);
  border-color: var(--c-line);
  color: var(--c-ink);
}

.btn--ghost:hover {
  border-color: var(--c-deep);
  color: var(--c-ink);
  opacity: 1;
}

.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.btn--lg { min-height: 56px; padding: var(--s-4) var(--s-8); font-size: var(--t-md); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* ---- cards ---------------------------------------------------------------- */

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.card--raised { box-shadow: var(--sh-md); }

/* ---- forms ---------------------------------------------------------------- */

.field { display: block; }

.field + .field { margin-top: var(--s-5); }

.label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  color: var(--c-ink);
}

/* the required badge also appears inside a checkbox label, not only in .label */
.req {
  margin-left: var(--s-2);
  font-size: var(--t-xs);
  color: var(--c-ink);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

.textarea { min-height: 8rem; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--c-mut); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-deep); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-deep);
  box-shadow: 0 0 0 3px var(--c-gold-soft);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--c-bg-2);
  color: var(--c-mut);
  cursor: not-allowed;
}

.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right calc(var(--s-5) + 4px) center,
                       right var(--s-5) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.help {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-mut);
}

/* checkbox / radio */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  /* the whole label toggles the box, so the label carries the 44px minimum */
  min-height: 44px;
  padding-block: var(--s-2);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  cursor: pointer;
}

.choice + .choice { margin-top: var(--s-3); }

.choice input[type="checkbox"],
.choice input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-gold);
  cursor: pointer;
}

/* ---- details / summary (FAQ) --------------------------------------------- */

.faq-item {
  border-bottom: 1px solid var(--c-line);
}

.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  line-height: var(--lh-head);
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "＋";
  margin-left: auto;
  flex: none;
  color: var(--c-ink);
  font-family: var(--f-num);
  transition: transform var(--d-base) var(--e-out);
}

.faq-item[open] > summary::after { content: "－"; }

.faq-item > summary:hover { opacity: .7; }

.faq-body {
  padding: 0 0 var(--s-5) var(--s-6);
  color: var(--c-ink-2);
  font-size: var(--t-base);
}

/* ---- utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }

.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* ===== パスワードの表示切り替え =====
   見えない文字をスマホで打つのは、いちばん諦めが出るところです。
   /signup/（site.css）と管理画面（admin/style.css）の両方が使うので、
   共有する base.css に置きます。持ち主は S1 です。
   アイコンにしないのは、目のマークが「いま見えている」のか「押すと
   見える」のか読みが割れるためと、このサイトに文字のないアイコンの
   ボタンが1つも無いためです（オーナー判断 2026-09-13）。 */

.pw { display: flex; gap: var(--s-2); align-items: stretch; }

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

.pw__toggle {
  flex: none;
  min-width: 64px;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-ink-2);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  cursor: pointer;
}

.pw__toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }