@charset "UTF-8";
/* =====================================================================
   LAYOUT — Phase 5 marketing landing page.

   This file replaces shell.css. The Phase 3/4 application shell is gone:
   no fixed rail, no collapsed icon rail, no drawer, no bottom bar, no
   `.app__main` left offset, no rail breakpoints. What remains is what an
   advertising LP actually needs — a compact header that scrolls away, and
   the footer.

   The desktop layout is the SAME single-column composition as mobile, just
   wider. There is deliberately no viewport at which the page turns back into
   a dashboard.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Campaign header

   Static, not fixed: it scrolls away with the page (Phase 5 §5A). Because
   nothing overlays the content, anchor targets need only a small clearance
   rather than a measured header offset — see base.css.
   --------------------------------------------------------------------- */
.td-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--td-bg-header);
  border-bottom: 1px solid var(--td-border-subtle);
}
.td-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--header-height);
  padding-top: 8px;
  padding-bottom: 8px;
}

.td-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
  color: var(--td-text-primary);
}
.td-brand__logo {
  width: 118px;
  height: auto;
  flex: none;
}
.td-brand__label {
  padding-left: 9px;
  border-left: 1px solid var(--td-border-subtle);
  font-size: .74rem;
  font-weight: 700;
  color: var(--td-text-secondary);
  white-space: nowrap;
}

.td-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.td-header__login { white-space: nowrap; }

/* Phase 5.8K — the ブログ link.
   Deliberately quieter than ログイン: no fill, no border, one step smaller,
   and 78% opacity at rest. It is a wayfinding link, not an action, so it must
   not read as a third button. Hidden below 768px (the phone header is already
   full) — the footer link covers narrow widths, and because this is
   `display: none` there it adds nothing to the 320px row and nothing to the
   200%-zoom reflow either. `min-height` keeps a usable target without changing
   the header's height, which is set by the 40px buttons beside it. */
.td-header__blog {
  display: none;
  align-items: center;
  min-height: 32px;
  padding: 0 6px;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  color: var(--td-text-primary);
  opacity: .78;
  transition: opacity .14s var(--ease);
}
@media (min-width: 768px) {
  .td-header__blog { display: inline-flex; }
}
.td-header__blog:hover,
.td-header__blog:focus-visible { opacity: 1; text-decoration: underline; }
.td-header__blog:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Current section: a small opacity/underline shift only. A filled or boxed
   "active tab" would out-shout the registration CTA on every blog page. */
.td-header__blog[aria-current="page"] { opacity: 1; text-decoration: underline; }

/* Below 600px the descriptive label is the first thing to go. Two full-size
   actions plus a wordmark plus a label do not fit on a phone, and squeezing
   them is what made the label collide with ログイン. The label is decorative
   context, so it is what yields — the actions keep their tap targets. */
.td-brand__label { display: none; }
@media (min-width: 600px) {
  .td-brand__label { display: block; }
}
@media (max-width: 359px) {
  .td-brand__logo { width: 100px; }
  .td-header__inner { gap: 6px; }
  .td-header__actions { gap: 6px; }
  .btn--sm { min-width: 0; padding: 0 12px; font-size: .78rem; }
}
@media (min-width: 768px) {
  .td-header__inner { min-height: 60px; }
  .td-brand__logo { width: 138px; }
  .td-brand__label { font-size: .8rem; }
  .td-header__actions { gap: 10px; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--td-bg-canvas);
  border-top: 1px solid var(--td-border-subtle);
  color: var(--td-text-secondary);
  font-size: .82rem;
}
.site-footer__inner {
  display: grid;
  /* Phase 5.8H density pass: was gap 22 / padding 30-20. The footer is the
     tallest single band on a phone, so it takes the same one-step compaction
     as every content section. */
  gap: 11px;
  padding: 15px 0 10px;
}
.site-footer__col { min-width: 0; }
.site-footer__logo { width: 132px; height: auto; opacity: .92; }
.site-footer__site {
  margin-top: 8px;
  font-size: .95rem;
  font-weight: 900;
  color: var(--td-brand-accent-2);
}
.site-footer__tagline { margin-top: 4px; font-size: .74rem; color: var(--td-text-secondary); }
.site-footer__heading {
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--td-border-subtle);
  font-size: .78rem;
  font-weight: 900;
  color: var(--td-text-primary);
}
.site-footer__list { display: flex; flex-direction: column; gap: 4px; }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { color: var(--td-brand-accent-2); text-decoration: underline; }

/* Phase 5.8: replaces the retired 運営情報 column's <dl> — one compact line,
   not another column, since the operator/company/licence facts it used to
   duplicate already live in the licence panel's <details>. */
.site-footer__contact { margin-top: 8px; font-size: .8rem; color: var(--td-text-primary); }
.site-footer__contact a { color: inherit; text-decoration: none; }
.site-footer__contact a:hover { color: var(--td-brand-accent-2); text-decoration: underline; }

.site-footer__ext { display: inline-grid; place-items: center; margin-left: 4px; opacity: .55; vertical-align: -2px; }
.site-footer__ext .icon { width: 12px; height: 12px; }

.site-footer__social { display: flex; gap: 9px; margin-top: 6px; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--td-border-subtle);
  background: var(--td-surface-1);
  color: var(--td-text-primary);
}
.site-footer__social a:hover { background: var(--td-surface-2); border-color: var(--td-brand-accent-2); }
.site-footer__social .icon { width: 19px; height: 19px; }

.site-footer__legal {
  display: grid;
  gap: 11px;
  padding: 12px 0 10px;
  border-top: 1px solid var(--td-border-subtle);
}
.site-footer__legal p { font-size: .72rem; line-height: 1.62; color: var(--td-text-secondary); }

.site-footer__bottom {
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--td-border-subtle);
}
.site-footer__copy { font-size: .74rem; }

/* Phase 5.5 — centre the whole footer presentation below 768px: logo,
   トラストダイス label, every column heading, every list (page links, official
   links, Discord/Instagram, contact), the legal blocks and the copyright.
   Desktop is untouched — this is a mobile-only readability pass, not a
   general footer redesign. */
@media (max-width: 767px) {
  .site-footer__inner { justify-items: center; text-align: center; }
  .site-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .site-footer__col { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .site-footer__heading { width: 100%; }
  .site-footer__list { align-items: center; width: 100%; }
  .site-footer__social { justify-content: center; width: 100%; }
  .site-footer__legal { justify-items: center; text-align: center; }
  .site-footer__legal-block { display: flex; flex-direction: column; align-items: center; }
  /* Long legal disclosures keep a constrained, readable measure even though
     the block around them is centred. */
  .site-footer__legal-block p { max-width: 46ch; margin-inline: auto; }
  .site-footer__bottom { text-align: center; }
}

@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .site-footer__legal { grid-template-columns: 1fr 1.4fr; gap: 22px; }
}
@media (min-width: 1024px) {
  /* Phase 6.5 — the four tracks now follow their CONTENT.
     1.35fr went to 公式SNS, the column with the least in it (two icon buttons
     and one contact line), so ~340px of the rail was reserved for ~180px of
     content and the footer's right-hand third read as dead space. The brand
     column, which carries the logo, the site name and the tagline, keeps the
     largest share; the two link lists are equal because their labels are; the
     social column takes what it actually needs. Same canonical rail, same
     edges — only the distribution inside it changed. */
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: clamp(22px, 2.6vw, 40px); }
}