/* ==========================================================================
   Trample Studio – Site Styles (Brand Edition)
   --------------------------------------------------------------------------
   Source of Truth: 正式採用の X 用ロゴ（赤地 + オフホワイトの幾何学的 T）と
   X 用ヘッダー（赤地 / 左 T マーク / 右 Trample Studio）。

   BOLD / GRAPHIC / KINETIC / GAME STUDIO + TRAMPLE STUDIO RED

   - すべてのクラスは ts- プレフィックス
   - トークンは .ts-page（ローカル body）と .ts-embed（Google Sites 埋め込みルート）に定義
   - /* ts:section NAME * / 区切りは tools/build_google_sites.py が使用。削除・改名禁止
   - Motion は --motion-* / --ease-* に一元管理。transform / opacity のみ
   - ロゴは正式画像をそのまま使用（CSS で描かない・再解釈しない）。未配置時はワードマーク
   ========================================================================== */

/* ts:section core */
/* --------------------------------------------------------------------------
   Brand tokens
   -------------------------------------------------------------------------- */
.ts-page,
.ts-embed {
  /* Brand palette — Canonical Red #ED0709 は 1 色のみ（Red / Cream / Charcoal の 3 系統） */
  --ts-red: #ed0709;        /* Canonical Red（正式赤ヘッダーの背景色基準） */
  --ts-red-dark: #b80608;   /* クリーム地の小さな文字・リンク（6.4:1） */
  --ts-red-soft: #ff5c5e;   /* チャコール地の小さな赤文字・補助線（5.5:1） */
  --ts-white: #ffffff;      /* 赤地の上の小さな文字（4.5:1。クリームは 4.3:1 で不足） */
  --ts-cream: #fff8e8;
  --ts-off-white: #fbf1dd;
  --ts-charcoal: #1f1b18;
  --ts-black: #120f0d;
  --ts-text: #1f1b18;
  --ts-text-muted: #6b625a;
  --ts-text-muted-inverse: #cdbfa6;
  --ts-border: #e6d9c2;
  --ts-border-dark: #3a332e;
  --ts-bg: #fff8e8;
  --ts-bg-alt: #fbf1dd;

  /* Semantic aliases */
  --color-bg: var(--ts-bg);
  --color-bg-alt: var(--ts-bg-alt);
  --color-bg-dark: var(--ts-charcoal);
  --color-bg-deep: var(--ts-black);
  --color-red: var(--ts-red);
  --color-text: var(--ts-text);
  --color-text-inverse: var(--ts-cream);
  --color-muted: var(--ts-text-muted);
  --color-muted-inverse: var(--ts-text-muted-inverse);
  --color-border: var(--ts-border);
  --color-border-dark: var(--ts-border-dark);
  --color-accent: var(--ts-red);
  --color-accent-ink: var(--ts-red-dark);
  --color-focus: var(--ts-red);
  --color-pending: #7a5a0f;
  --color-pending-soft: #f6e4b8;
  --color-live: #1f6b3a;
  --color-live-soft: #dcefe1;
  --color-note: #8a3b12;
  --color-note-soft: #fbe3d6;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  --text-display: clamp(3.25rem, 1rem + 13vw, 12rem);      /* 2 段表示（Mobile / Tablet） */
  --text-display-line: clamp(3.25rem, 1rem + 8.6vw, 10rem); /* 1 行表示「TRAMPLE STUDIO」（1024px 以上。responsive.css でコンテナ幅の上限付き） */
  --leading-tight: 0.9;
  --leading-snug: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;
  --tracking-display: -0.04em;
  --tracking-caps: 0.14em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --section-y: clamp(4rem, 10vw, 8rem);
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --touch: 44px;

  /* Geometry — T マーク由来の「丸み + 直線 + 斜めカット」 */
  --radius-sm: 4px;
  --radius-lg: 20px;
  --cut: 14px;                      /* CTA / パネルの斜めカット量 */
  --cut-section: clamp(16px, 4vw, 56px); /* セクション境界の斜めカット */
  --bar: 10px;                      /* 太い水平バー */
  --border-w: 2px;

  /* Motion — Clean / Graphic / Crisp（「スッ、ピタッ」） */
  --motion-fast: 160ms;
  --motion-normal: 360ms;
  --motion-slow: 640ms;
  --motion-drift: 22s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasis: cubic-bezier(0.7, 0, 0.2, 1);

  /* Pointer（JS が更新） */
  --px: 0;
  --py: 0;
  --mouse-x: 50%;
  --mouse-y: 50%;

  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  .ts-page,
  .ts-embed {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-slow: 0ms;
  }
}

/* --------------------------------------------------------------------------
   Base (scoped)
   -------------------------------------------------------------------------- */
.ts-page a,
.ts-embed a {
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

.ts-page :focus-visible,
.ts-embed :focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.ts-theme-red :focus-visible {
  outline-color: var(--ts-white);
}

.ts-page h1,
.ts-page h2,
.ts-page h3,
.ts-page h4,
.ts-embed h1,
.ts-embed h2,
.ts-embed h3,
.ts-embed h4 {
  font-weight: 800;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

/* Theme surfaces — Red / Cream / Charcoal の 3 面で場面転換 */
.ts-theme-red {
  background: var(--ts-red);
  color: var(--ts-cream);
}

.ts-theme-cream {
  background: var(--ts-cream);
  color: var(--ts-text);
}

.ts-theme-cream-alt {
  background: var(--ts-off-white);
  color: var(--ts-text);
}

.ts-theme-charcoal {
  background: var(--ts-charcoal);
  color: var(--ts-cream);
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.ts-display {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.ts-headline {
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.ts-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ts-caps {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ts-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 36em;
}

.ts-muted {
  color: var(--color-muted);
}

.ts-theme-charcoal .ts-muted {
  color: var(--color-muted-inverse);
}

.ts-theme-red .ts-muted {
  color: var(--ts-white);
  opacity: 0.92;
}

.ts-prose {
  max-width: 42em;
}

.ts-prose > * + * {
  margin-top: var(--space-4);
}

.ts-prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 3px solid var(--ts-red);
}

.ts-prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
}

.ts-prose p,
.ts-prose li {
  line-height: var(--leading-relaxed);
}

.ts-prose ul,
.ts-prose ol {
  padding-left: 1.4em;
}

.ts-prose li + li {
  margin-top: var(--space-2);
}

.ts-prose a {
  color: var(--ts-red-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.ts-prose a:hover {
  color: var(--ts-text);
}

/* Section number — 「01 / GAMES」 */
.ts-section-no {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ts-section-no__num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--ts-red-dark);
}

.ts-theme-red .ts-section-no__num {
  color: var(--ts-white);
}

.ts-theme-charcoal .ts-section-no__num {
  color: var(--ts-red-soft);
}

/* 背景の巨大数字（装飾・aria-hidden） */
.ts-bg-num {
  position: absolute;
  right: -0.05em;
  top: -0.1em;
  font-size: clamp(8rem, 28vw, 24rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* TODO / 要確認 の可視マーク（公開前に除去） */
.ts-todo {
  display: inline-block;
  background: var(--color-note-soft);
  color: var(--color-note);
  border-left: 3px solid var(--color-note);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ts-section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.ts-section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.ts-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.ts-container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Geometry utilities — ロゴ由来の Shape Language
   -------------------------------------------------------------------------- */
.ts-cut-br {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

.ts-corner {
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
}

.ts-corner--alt {
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
}

.ts-section--cut-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-section)), 0 100%);
}

.ts-section--cut-top {
  clip-path: polygon(0 var(--cut-section), 100% 0, 100% 100%, 0 100%);
}

.ts-rule {
  display: block;
  height: var(--bar);
  width: clamp(64px, 12vw, 160px);
  background: currentColor;
  border-radius: 0 var(--bar) var(--bar) 0;
}

.ts-rule--red {
  color: var(--ts-red);
}

.ts-rule--cream {
  color: var(--ts-cream);
}

/* --------------------------------------------------------------------------
   Logo — 正式画像をそのまま使用。未配置時はワードマーク（CSS でロゴを描かない）
   -------------------------------------------------------------------------- */
.ts-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  min-height: var(--touch);
}

.ts-page .ts-logo__img,
.ts-embed .ts-logo__img {
  display: block;
  height: var(--logo-size, 40px); /* reset の img { height: auto } より優先 */
  width: auto;
  object-fit: contain; /* 変形禁止: 等倍のまま高さ基準で縮小 */
  transition: transform var(--motion-fast) var(--ease-out);
}

/* 横長ロゴ（ヘッダー）: 画像が読み込めない時は alt テキストがブランド名として表示される */
/* 横長 1 行ロゴ: width 指定 + height:auto（縦横比 3:1 を維持。両方固定・scaleX/Y は禁止） */
.ts-logo__img--wide {
  width: clamp(165px, 20vw, 288px);
  height: auto;
  max-width: 100%;
  font-weight: 900;
  color: var(--ts-white);
}

.ts-logo:hover .ts-logo__img {
  transform: translateY(-2px);
}

/* 画像スロットが空（未配置）なら非表示 */
.ts-logo__slot:empty {
  display: none;
}

.ts-wordmark {
  display: grid;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: var(--wordmark-size, 1rem);
}

.ts-wordmark span {
  display: block;
}

/* --------------------------------------------------------------------------
   Links & buttons — Arrow 移動 / Underline 走査 / 斜めカットの CTA
   -------------------------------------------------------------------------- */
.ts-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: inherit;
}

.ts-arrow-link__arrow {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-emphasis);
}

.ts-arrow-link:hover .ts-arrow-link__arrow,
.ts-arrow-link:focus-visible .ts-arrow-link__arrow {
  transform: translateX(8px);
}

.ts-arrow-link__text {
  position: relative;
}

.ts-arrow-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-normal) var(--ease-emphasis);
}

.ts-arrow-link:hover .ts-arrow-link__text::after,
.ts-arrow-link:focus-visible .ts-arrow-link__text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.ts-arrow-link--accent {
  color: var(--ts-red-dark);
}

.ts-theme-charcoal .ts-arrow-link--accent {
  color: var(--ts-red-soft);
}

.ts-theme-red .ts-arrow-link--accent {
  color: var(--ts-white);
}

/* CTA: 右下を斜めカット。背景が左からスライド
   （.ts-page a { color: inherit } より詳細度を上げるため .ts-page / .ts-embed を前置） */
.ts-page .ts-btn,
.ts-embed .ts-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-6) 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--btn-text, var(--ts-cream));
  background: var(--btn-bg, var(--ts-red));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--motion-fast) var(--ease-standard);
}

.ts-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-hover-bg, var(--ts-charcoal));
  transform: translateX(-101%);
  transition: transform var(--motion-normal) var(--ease-emphasis);
  z-index: -1;
}

.ts-btn__label {
  transition: transform var(--motion-fast) var(--ease-emphasis);
}

.ts-btn:hover::before,
.ts-btn:focus-visible::before {
  transform: translateX(0);
}

.ts-page .ts-btn:hover,
.ts-page .ts-btn:focus-visible,
.ts-embed .ts-btn:hover,
.ts-embed .ts-btn:focus-visible {
  color: var(--btn-hover-text, var(--ts-cream));
}

.ts-btn:hover .ts-btn__label {
  transform: translateX(4px);
}

/* Variants */
.ts-btn--red {
  --btn-bg: var(--ts-red);
  --btn-text: var(--ts-white);
  --btn-hover-bg: var(--ts-charcoal);
  --btn-hover-text: var(--ts-cream);
}

.ts-btn--cream {
  --btn-bg: var(--ts-cream);
  --btn-text: var(--ts-red-dark);
  --btn-hover-bg: var(--ts-charcoal);
  --btn-hover-text: var(--ts-cream);
}

.ts-btn--charcoal {
  --btn-bg: var(--ts-charcoal);
  --btn-text: var(--ts-cream);
  --btn-hover-bg: var(--ts-red);
  --btn-hover-text: var(--ts-white);
}

.ts-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ts-btn[aria-disabled="true"]::before {
  display: none;
}

.ts-page .ts-btn[aria-disabled="true"]:hover,
.ts-embed .ts-btn[aria-disabled="true"]:hover {
  color: var(--btn-text, var(--ts-cream));
}

/* Row of big text links（Support / Privacy 導線） */
.ts-rows {
  border-top: 3px solid var(--ts-red);
}

.ts-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-8);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem) var(--space-4);
  border-bottom: var(--border-w) solid var(--ts-border);
  color: inherit;
  isolation: isolate;
  overflow: hidden;
}

.ts-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ts-red);
  transform: translateX(-101%);
  transition: transform var(--motion-normal) var(--ease-emphasis);
  z-index: -1;
}

.ts-row:hover::before,
.ts-row:focus-visible::before {
  transform: translateX(0);
}

.ts-row:hover,
.ts-row:focus-visible {
  color: var(--ts-white);
}

.ts-row__title {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ts-row__arrow {
  display: inline-block;
  transition: transform var(--motion-normal) var(--ease-emphasis);
}

.ts-row:hover .ts-row__arrow {
  transform: translateX(12px);
}

.ts-row__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Badges / notices / tables / form controls
   -------------------------------------------------------------------------- */
.ts-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ts-charcoal);
  color: var(--ts-cream);
}

.ts-badge--pending {
  background: var(--color-pending-soft);
  color: var(--color-pending);
}

.ts-badge--live {
  background: var(--color-live-soft);
  color: var(--color-live);
}

.ts-notice {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--ts-red);
  background: var(--ts-off-white);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ts-notice--pending {
  background: var(--color-pending-soft);
  color: var(--color-pending);
  border-left-color: var(--color-pending);
}

.ts-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.ts-meta dt {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-muted);
  padding-top: 0.2em;
}

.ts-theme-charcoal .ts-meta dt {
  color: var(--color-muted-inverse);
}

.ts-table-wrap {
  overflow-x: auto;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ts-table th,
.ts-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--ts-border);
  line-height: var(--leading-normal);
}

.ts-table th {
  width: 36%;
  font-weight: 700;
  color: var(--color-muted);
}

.ts-theme-charcoal .ts-table th,
.ts-theme-charcoal .ts-table td {
  border-bottom-color: var(--ts-border-dark);
}

/* Process list（Support 不具合報告・Studio で共用） */
.ts-process {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--ts-border);
}

.ts-theme-charcoal .ts-process {
  border-top-color: var(--ts-border-dark);
}

.ts-process__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ts-border);
  transition: transform var(--motion-fast) var(--ease-emphasis);
}

.ts-theme-charcoal .ts-process__item {
  border-bottom-color: var(--ts-border-dark);
}

.ts-process__item:hover {
  transform: translateX(8px);
}

.ts-process__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}

.ts-theme-charcoal .ts-process__num {
  color: var(--color-muted-inverse);
}

.ts-process__item:hover .ts-process__num {
  color: var(--ts-red-dark);
}

.ts-theme-charcoal .ts-process__item:hover .ts-process__num {
  color: var(--ts-red-soft);
}

.ts-process__word {
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ts-process__word--plain {
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: 0;
}

.ts-process__desc {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--space-1);
}

.ts-theme-charcoal .ts-process__desc {
  color: var(--color-muted-inverse);
}

/* --------------------------------------------------------------------------
   Scroll Reveal — JS 起動時のみ待機状態へ（Progressive Enhancement）
   -------------------------------------------------------------------------- */
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-emphasis);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Geometric drift — 図形は少なく、線と面で動かす
   -------------------------------------------------------------------------- */
.ts-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ts-shape {
  position: absolute;
  will-change: transform;
}

.ts-shape__inner {
  position: absolute;
  inset: 0;
}

.ts-shape--ring {
  border: 3px solid currentColor;
  border-radius: 50%;
}

.ts-shape--ring-thick {
  border: clamp(14px, 2.6vw, 30px) solid currentColor;
  border-radius: 50%;
}

.ts-shape--block {
  background: currentColor;
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
}

.ts-shape--bar {
  background: currentColor;
  border-radius: 0 999px 999px 0;
}

.ts-shape--stem {
  background: currentColor;
  border-radius: 999px 999px 0 0;
}

.ts-shape--grid {
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.1;
}

@keyframes ts-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -18px, 0); }
}

@keyframes ts-drift-x {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(16px, -8px, 0); }
}

@keyframes ts-grid-move {
  from { background-position: 0 0, 0 0; }
  to { background-position: 72px 72px, 72px 72px; }
}

@keyframes ts-rise {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes ts-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ts-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.ts-anim-drift { animation: ts-drift var(--motion-drift) var(--ease-standard) infinite; }
.ts-anim-drift-x { animation: ts-drift-x calc(var(--motion-drift) * 1.25) var(--ease-standard) infinite; }
.ts-anim-grid { animation: ts-grid-move 34s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .ts-anim-drift,
  .ts-anim-drift-x,
  .ts-anim-grid,
  .js-enabled .ts-hero__line,
  .js-enabled .ts-hero__rule,
  .js-enabled .ts-hero__bottom > * {
    animation: none; /* Hero の起動 Reveal も省略し、遅延なしで通常位置に表示 */
  }
}

/* Pointer parallax: JS が --px / --py（-1〜1）を更新。Touch では 0 */
.ts-parallax {
  transform: translate3d(calc(var(--px) * var(--depth, 6px)), calc(var(--py) * var(--depth, 6px)), 0);
  transition: transform var(--motion-normal) var(--ease-out);
  will-change: transform;
}
/* ts:endsection */

/* ts:section page */
/* --------------------------------------------------------------------------
   Page shell（ローカル版のみ。Google Sites では Native ヘッダー / ナビ / フッター）
   -------------------------------------------------------------------------- */
.ts-page {
  display: flex;
  flex-direction: column;
}

.ts-page .ts-main {
  flex: 1 0 auto;
}

.ts-skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ts-charcoal);
  color: var(--ts-cream);
  font-weight: 800;
  transform: translateY(-200%);
}

.ts-skip-link:focus {
  transform: none;
}

/* Header — 正式 X ヘッダーの構成（赤地 / 左マーク / 右 Trample Studio） */
.ts-header {
  background: var(--ts-red);
  color: var(--ts-white);
}

.ts-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-1);
}

.ts-header .ts-logo {
  --wordmark-size: 1.0625rem;
  /* Clear Space: 画像自体に余白があるため上下の追加余白は最小。左右はコンテナの gutter */
  padding-block: 0;
}

/* 画像内の文字部分は幅の約 80%。1440px: 288px → 文字幅 約 230px */
.ts-page .ts-header .ts-logo__img--wide {
  width: 288px;
  height: auto;
  max-width: calc(100vw - 2 * var(--gutter));
}

.ts-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.ts-page .ts-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ts-white);
}

.ts-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 8px;
  height: 3px;
  background: var(--ts-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-normal) var(--ease-emphasis);
}

.ts-nav__link:hover::after,
.ts-nav__link:focus-visible::after,
.ts-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Page head（Games / Support / Privacy）: Red + Cream */
.ts-page-head {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}

.ts-page-head.ts-section--cut-bottom {
  padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + var(--cut-section));
}

.ts-footer.ts-section--cut-top .ts-footer__inner {
  padding-top: calc(clamp(3rem, 7vw, 6rem) + var(--cut-section));
}

.ts-page-head__title {
  margin-top: var(--space-4);
  color: var(--ts-cream);
}

.ts-page-head__lead {
  margin-top: var(--space-5);
  color: var(--ts-white);
  font-weight: 500;
}

.ts-page-head .ts-rule {
  margin-top: var(--space-6);
}

/* Footer — Charcoal + Red / 正式 T マーク（赤い正方形がチャコール地に映える） */
.ts-footer {
  position: relative;
  background: var(--ts-charcoal);
  color: var(--ts-cream);
  overflow: hidden;
}

.ts-footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-8);
  padding-block: clamp(3rem, 7vw, 6rem) var(--space-6);
}

.ts-footer .ts-logo {
  --logo-size: 72px;
  --wordmark-size: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  gap: var(--space-5);
}

.ts-footer .ts-logo__img {
  border-radius: 12px; /* マークの外周のみ。画像自体は変形しない */
}

.ts-footer__links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.ts-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ts-cream);
}

.ts-footer__links a:hover {
  color: var(--ts-red-soft);
}

.ts-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--ts-border-dark);
  font-size: var(--text-xs);
  color: var(--color-muted-inverse);
}

.ts-footer__ring {
  width: clamp(240px, 36vw, 560px);
  height: clamp(240px, 36vw, 560px);
  right: -10%;
  bottom: -40%;
  color: var(--ts-red);
  opacity: 0.9;
}

/* Native-equivalent sections on local pages */
.ts-intro {
  display: grid;
  gap: var(--space-5);
}

.ts-intro__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.5;
  max-width: 28em;
  letter-spacing: -0.01em;
}

.ts-two-col {
  display: grid;
  gap: var(--space-6);
}

.ts-panel {
  padding: var(--space-6);
  border: var(--border-w) solid var(--ts-charcoal);
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
  background: #fff;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.ts-panel--dark {
  background: #2a2520;
  border-color: var(--ts-border-dark);
  color: var(--ts-cream);
}

.ts-panel__title {
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* お問い合わせ — Form / Email の 2 方式（カード UI ではなく、太い赤罫線で区切った 2 列） */
.ts-contact {
  display: grid;
  gap: var(--space-6);
  border-top: 3px solid var(--ts-red);
  padding-top: var(--space-6);
}

.ts-contact__option {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.ts-contact__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--ts-red-dark);
}

.ts-contact__title {
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.ts-contact__desc {
  line-height: var(--leading-relaxed);
}

.ts-contact__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.ts-contact__cta {
  margin-top: var(--space-2);
}

/* Privacy TOC */
.ts-toc {
  padding: var(--space-5) var(--space-6);
  border-left: var(--bar) solid var(--ts-red);
  background: var(--ts-off-white);
}

.ts-toc__title {
  margin-bottom: var(--space-3);
}

.ts-toc ol {
  padding-left: 1.5em;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ts-toc li {
  padding-block: var(--space-1);
  break-inside: avoid;
}

.ts-toc a {
  color: var(--ts-text);
  font-weight: 600;
}

.ts-toc a:hover {
  color: var(--ts-red-dark);
}

/* ts:endsection */

/* ts:section hero */
/* --------------------------------------------------------------------------
   01-hero-motion  [data-ts-component="hero"]
   Red full-bleed / Logo / TRAMPLE STUDIO (cream) / Statement / CTA
   -------------------------------------------------------------------------- */
.ts-hero {
  position: relative;
  overflow: hidden;
  background: var(--ts-red);
  color: var(--ts-cream);
  padding-block: clamp(3rem, 8vw, 6rem) calc(clamp(3rem, 7vw, 5rem) + var(--cut-section));
  isolation: isolate;
  /* 下辺を斜めにカット（ロゴの斜めカット由来）。次のセクション（クリーム）へ流れる */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-section)), 0 100%);
}

.ts-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.ts-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}

.ts-hero .ts-logo {
  --logo-size: clamp(56px, 8vw, 96px);
  --wordmark-size: clamp(1.125rem, 0.8rem + 1.2vw, 1.5rem);
}

.ts-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ts-white);
}

.ts-hero__kicker::before {
  content: "";
  width: 40px;
  height: 4px;
  background: var(--ts-white);
  border-radius: 0 4px 4px 0;
}

.ts-hero__title {
  display: grid;
  margin: 0;
}

.ts-hero__line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.ts-hero__line {
  display: block;
  font-size: var(--text-display);
  white-space: nowrap; /* 1 行の途中で折り返さない（Mobile は <br> で 2 段） */
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ts-cream);
}

/* 起動時の Typography Reveal（JS 起動時のみ・下から「スッ」と入る）
   初期状態（隠れた位置）は要素に直接書かず keyframes の from + fill-mode: both に持たせる。
   アニメーションが動かない環境（Reduced Motion の animation: none、埋め込み iframe 等）でも通常位置で必ず表示される */
.js-enabled .ts-hero__line {
  animation: ts-rise var(--motion-slow) var(--ease-emphasis) both;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

.ts-hero__rule {
  color: var(--ts-charcoal);
  transform-origin: left;
}

.js-enabled .ts-hero__rule {
  animation: ts-grow-x var(--motion-slow) var(--ease-emphasis) both;
  animation-delay: 320ms;
}

.ts-hero__bottom {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.js-enabled .ts-hero__bottom > * {
  animation: ts-fade-in var(--motion-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms + 420ms);
}

.ts-hero__statement {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ts-charcoal);
  max-width: 10em;
}

.ts-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

/* 図形は少なく: 太いリング 1 つ、面 1 つ、縦のステム 1 本 */
.ts-hero__shapes {
  color: var(--ts-red-soft);
}

/* 図形はタイトル帯（1 行の TRAMPLE STUDIO）に重ねない。右上の帯（kicker の高さ）に収める */
.ts-hero__ring {
  width: clamp(220px, 30vw, 480px);
  height: clamp(220px, 30vw, 480px);
  right: -16%;
  top: -42%;
}

.ts-hero__block {
  width: clamp(72px, 7.5vw, 110px);
  height: clamp(72px, 7.5vw, 110px);
  right: 12%;
  top: 4%;
  color: var(--ts-cream);
  opacity: 0.9;
}

.ts-hero__stem {
  width: clamp(14px, 1.6vw, 22px);
  height: clamp(72px, 7vw, 100px);
  right: 22%;
  top: 2%;
  color: var(--ts-charcoal);
  opacity: 0.9;
}

.ts-hero__grid {
  inset: 0;
  color: var(--ts-cream);
}
/* ts:endsection */

/* ts:section showcase */
/* --------------------------------------------------------------------------
   03-app-showcase  [data-ts-component="showcase"]  Cream / Charcoal / Red
   -------------------------------------------------------------------------- */
.ts-showcase {
  position: relative;
}

.ts-showcase__list {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
}

.ts-game {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  perspective: 1400px;
}

.ts-game__info {
  display: grid;
  gap: var(--space-5);
  align-content: center;
}

.ts-game__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.ts-game__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ts-charcoal);
}

.ts-game__title span {
  display: block;
}

.ts-game__title span:last-child {
  color: var(--ts-red);
}

.ts-game__jp {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-muted);
}

.ts-game__desc {
  line-height: var(--leading-relaxed);
  max-width: 34em;
}

.ts-game__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

/* Visual — 実画像が無い間は Typography / Color Block / Geometry の Placeholder */
.ts-game__visual-wrap {
  position: relative;
}

.ts-game__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ts-charcoal);
  color: var(--ts-cream);
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
  transform: rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)) translateY(var(--lift, 0));
  transition:
    transform var(--motion-normal) var(--ease-out),
    box-shadow var(--motion-normal) var(--ease-out);
  box-shadow: 0 0 0 rgba(18, 15, 13, 0);
  transform-style: preserve-3d;
  isolation: isolate;
}

.ts-game:hover .ts-game__visual {
  --lift: -8px;
  box-shadow: 0 28px 48px -28px rgba(18, 15, 13, 0.5);
}

/* Pointer highlight（Red。Touch では無効） */
.ts-game__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mouse-x) var(--mouse-y),
    rgba(237, 7, 9, 0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-standard);
  pointer-events: none;
  z-index: 3;
}

.ts-game:hover .ts-game__visual::after {
  opacity: 1;
}

.ts-game__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.ts-game:hover .ts-game__visual img {
  transform: scale(1.03);
}

.ts-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1rem, 3vw, 2rem);
  transition: transform var(--motion-slow) var(--ease-out);
}

.ts-game:hover .ts-placeholder {
  transform: scale(1.03);
}

.ts-placeholder__grid {
  position: absolute;
  inset: 0;
  color: var(--ts-cream);
  opacity: 0.08;
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
}

.ts-placeholder__ring {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  right: -16%;
  top: 16%;
  border: clamp(12px, 2.6vw, 26px) solid var(--ts-red);
  border-radius: 50%;
}

.ts-placeholder__block {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  left: 10%;
  bottom: 22%;
  background: var(--ts-red);
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
  transition: transform var(--motion-slow) var(--ease-emphasis);
}

.ts-game:hover .ts-placeholder__block {
  transform: translate(10px, -14px);
}

.ts-placeholder__bar {
  position: absolute;
  left: 10%;
  right: 30%;
  top: 36%;
  height: var(--bar);
  background: var(--ts-cream);
  border-radius: 0 var(--bar) var(--bar) 0;
}

.ts-placeholder__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted-inverse);
  display: flex;
  justify-content: space-between;
}

.ts-placeholder__type {
  position: relative;
  z-index: 2;
  align-self: end;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.ts-placeholder__type span {
  display: block;
}

.ts-placeholder__type .is-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ts-cream);
}

/* 正式アプリアイコン — 画像は加工せず、表示だけ角丸（原画の角は白なので 22.5% で隠す） */
.ts-game__icon {
  display: block;
  flex: none;
  width: clamp(3rem, 2.4rem + 1.6vw, 4rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.5%;
  box-shadow: 0 8px 18px -10px rgba(18, 15, 13, 0.55);
}

/* 実ゲーム画像 — 縦長 9:16 のスクリーンショットを切り抜かず、チャコールの枠の中に「画面」として収める。
   画像の色・内容は変えない（赤の Pointer highlight は画像の後ろ = 枠の背景にだけ出す）。
   画像が無い場合（Google Sites 埋め込みで公開 URL 未設定）は直後の .ts-placeholder が Fallback として表示される */
.ts-game__visual:has(> .ts-shot)::after {
  z-index: 0;
}

.ts-game__visual .ts-shot {
  inset: auto;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: auto;
  height: 86%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: clamp(10px, 1.8vw, 20px);
  box-shadow:
    0 24px 44px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 248, 232, 0.16);
  transform: translate(-50%, -50%);
}

.ts-game:hover .ts-game__visual .ts-shot {
  transform: translate(-50%, -50%) scale(1.03);
}

.ts-shot ~ .ts-placeholder {
  display: none;
}

/* Games: 3 枚（左に大きく 1 枚、右に 2 枚）。重ねずに全体を見せる */
.ts-game__visual--gallery:has(> .ts-shot) {
  --shots-gap: clamp(0.5rem, 1.6vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--shots-gap);
  padding: clamp(0.75rem, 2.4vw, 1.75rem);
}

.ts-game__visual--gallery .ts-shot {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  height: 80%;
  transform: none;
}

.ts-game:hover .ts-game__visual--gallery .ts-shot {
  transform: scale(1.03);
}

.ts-game__shots-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--shots-gap);
  height: 80%;
}

.ts-game__visual--gallery .ts-game__shots-side .ts-shot {
  height: calc((100% - var(--shots-gap)) / 2);
}
/* ts:endsection */

/* ts:section faq */
/* --------------------------------------------------------------------------
   04-support-faq  [data-ts-component="faq"]  コンパクト構成（閉状態の高さを抑える）
   -------------------------------------------------------------------------- */

.ts-faq__list {
  list-style: none;
  padding: 0;
  border-top: 3px solid var(--ts-red);
}

.ts-faq__item {
  border-bottom: 1px solid var(--ts-border);
}

.ts-faq__heading {
  font-size: var(--text-base);
}

.ts-faq__q {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-3) var(--space-2);
  text-align: left;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ts-text);
  cursor: default;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-emphasis);
}

.js-enabled .ts-faq__q {
  cursor: pointer;
}

.js-enabled .ts-faq__q:hover {
  background: var(--ts-off-white);
  transform: translateX(4px);
}

.ts-faq__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ts-red-dark);
  padding-top: 0.3em;
}

.ts-faq__icon {
  position: relative;
  display: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.js-enabled .ts-faq__icon {
  display: inline-block;
}

.ts-faq__icon::before,
.ts-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 3px;
  background: var(--ts-red);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--motion-fast) var(--ease-emphasis);
}

.ts-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ts-faq__q[aria-expanded="true"] .ts-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.ts-faq__a {
  padding: 0 var(--space-2) var(--space-4) calc(2.25rem + var(--space-3) + var(--space-2));
  line-height: var(--leading-relaxed);
}

.ts-faq__a > * + * {
  margin-top: var(--space-3);
}

.ts-faq__a ul,
.ts-faq__a ol {
  padding-left: 1.4em;
}

.ts-faq__a a {
  color: var(--ts-red-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Mail composer（mailto: のみ）— JS 有効時は折りたたみ、閉状態の高さを抑える */

/* ts:endsection */

/* ts:section privacy */
/* --------------------------------------------------------------------------
   Privacy: Reading progress（本文は動かさない。進捗バーのみ）
   -------------------------------------------------------------------------- */
.ts-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  z-index: 90;
  pointer-events: none;
  display: none;
}

.js-enabled .ts-progress {
  display: block;
}

.ts-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--ts-red);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  will-change: transform;
}
/* ts:endsection */

/* ts:section embed */
/* --------------------------------------------------------------------------
   Google Sites 埋め込みルート — 高さは内容に追従（ビューポート高さ単位は使わない）
   -------------------------------------------------------------------------- */
.ts-embed {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ts-embed .ts-container {
  width: min(100% - var(--gutter) * 2, var(--container));
}
/* ts:endsection */