/* ==========================================================================
   Trample Studio – Responsive (Brand Edition)
   --------------------------------------------------------------------------
   Mobile first。基準: 360 / 390 / 430 / 768 / 1024 / 1440。
   セクション名は style.css と同じ（ビルドで同名セクションが結合される）。
   ========================================================================== */

/* ts:section core */
@media (max-width: 599px) {
  .ts-page,
  .ts-embed {
    --text-display: clamp(3rem, 18vw, 5.25rem);
    --text-3xl: clamp(2.25rem, 11vw, 3.5rem);
    --text-2xl: clamp(1.5rem, 7vw, 2.25rem);
    --section-y: clamp(3.5rem, 14vw, 5rem);
    --cut: 10px;
  }

  .ts-bg-num {
    font-size: 7rem;
    opacity: 0.1;
  }

  .ts-row__title {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }
}

@media (min-width: 768px) {
  .ts-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Touch / hover 不可端末: hover 依存の演出を無効化（機能は維持） */
@media (hover: none) {
  .ts-arrow-link__text::after,
  .ts-btn::before,
  .ts-row::before {
    display: none;
  }

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

  .ts-row:hover {
    color: inherit;
  }

  .ts-process__item:hover {
    transform: none;
  }
}
/* ts:endsection */

/* ts:section page */
@media (min-width: 768px) {
  .ts-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ts-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .ts-contact__option + .ts-contact__option {
    border-left: 1px solid var(--ts-border);
    padding-left: var(--space-8);
  }

  .ts-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .ts-toc ol {
    columns: 2;
    column-gap: var(--space-8);
  }

  .ts-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .ts-footer__meta {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .ts-page-head__title {
    max-width: 14ch;
  }
}

@media (max-width: 599px) {
  .ts-footer .ts-logo {
    --logo-size: 56px;
  }

  .ts-page .ts-header .ts-logo__img--wide {
    width: 165px; /* 文字幅 約 132px */
  }
}

/* Header ロゴ幅: 1024 / 768 */
@media (min-width: 600px) and (max-width: 1099px) {
  .ts-page .ts-header .ts-logo__img--wide {
    width: 250px; /* 文字幅 約 200px */
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .ts-page .ts-header .ts-logo__img--wide {
    width: 212px; /* 文字幅 約 170px */
  }
}
/* ts:endsection */

/* ts:section hero */
/* --------------------------------------------------------------------------
   Hero のレスポンシブ（Google Sites の iframe 埋め込み前提）
   - 高さは内容に追従（vh / 100vw を使わない）。横方向は .ts-hero の overflow:hidden のみ
   - Desktop ≥1024: TRAMPLE STUDIO を 1 行、下段 2 カラム（従来の Desktop デザイン）
   - Tablet / Fold 600〜1023: 2 段タイトル、下段は縦積み
   - Mobile ≤599: 2 段タイトル、装飾を簡略化、左右余白を縮小
   「TRAMPLE STUDIO」の幅 ≒ 文字サイズ × 7.63（Segoe UI 900）。安全率を見て 8.2 で上限を計算
   -------------------------------------------------------------------------- */

/* Desktop: 1 行タイトル。コンテナ幅に必ず収まる上限付き */
@media (min-width: 1024px) {
  .ts-hero__br {
    display: none;
  }

  .ts-hero__line {
    font-size: min(var(--text-display-line), calc((100vw - 2 * var(--gutter)) / 8.2));
    line-height: 0.9;
  }

  .ts-hero__inner {
    gap: clamp(1.5rem, 3vw, 2.5rem); /* 1 行化で空いた縦方向を詰める */
  }

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

  .ts-hero__bottom {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
  }

  .ts-hero__bottom-right {
    justify-self: end;
    display: grid;
    gap: var(--space-5);
  }
}

/* Tablet / Fold: 2 段タイトル（TRAMPLE / STUDIO）、下段は縦積み */
@media (min-width: 600px) and (max-width: 1023px) {
  .ts-hero {
    --gutter: clamp(2rem, 4vw, 2.5rem);
    padding-block: clamp(2.5rem, 6vw, 4rem) calc(clamp(2rem, 5vw, 3rem) + var(--cut-section));
  }

  .ts-hero__inner {
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
  }

  .ts-hero__line-wrap {
    overflow: visible; /* 2 段タイトルの下端を切らない */
    padding-bottom: 0.1em;
  }

  .ts-hero__line {
    font-size: clamp(48px, 9vw, 88px);
    line-height: 0.95;
  }

  .ts-hero__statement {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }

  .ts-hero__ring {
    width: clamp(180px, 28vw, 300px);
    height: clamp(180px, 28vw, 300px);
    right: -14%;
    top: -36%;
  }

  .ts-hero__block {
    width: clamp(56px, 8vw, 80px);
    height: clamp(56px, 8vw, 80px);
    right: 10%;
    top: 3%;
  }

  .ts-hero__stem {
    width: clamp(12px, 1.6vw, 16px);
    height: clamp(56px, 7vw, 72px);
    right: 20%;
    top: 2%;
  }
}

/* Mobile: 2 段タイトル、装飾を簡略化、余白を縮小。全要素を iframe 幅内に収める */
@media (max-width: 599px) {
  .ts-hero {
    --gutter: clamp(1.25rem, 5.5vw, 1.5rem);
    /* 高さは固定せず content + padding で決める。下端は斜めカット分を含めて十分に確保 */
    height: auto;
    min-height: 0;
    padding-block: clamp(2rem, 8vw, 2.75rem) calc(clamp(2.5rem, 9vw, 3.25rem) + var(--cut-section));
  }

  .ts-hero__inner,
  .ts-hero__bottom,
  .ts-hero__bottom-right {
    position: relative; /* 下段要素は absolute にせず通常フローで縦に積む */
  }

  .ts-hero__line-wrap {
    overflow: visible; /* 「STUDIO」の下端を切らない */
    padding-bottom: 0.1em;
  }

  .ts-hero__inner {
    gap: clamp(1.25rem, 5vw, 1.75rem);
  }

  .ts-hero__line {
    font-size: clamp(44px, 14vw, 68px);
    line-height: 0.95;
  }

  .ts-hero__rule {
    width: clamp(56px, 18vw, 96px);
  }

  .ts-hero__bottom {
    gap: var(--space-5);
  }

  .ts-hero__statement {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
  }

  .ts-hero__actions {
    gap: var(--space-3) var(--space-5); /* 狭い幅では折り返して縦に並ぶ */
  }

  .ts-hero__ring {
    width: 160px;
    height: 160px;
    right: -70px;
    top: -96px; /* 下の弧だけを kicker より上に見せ、タイトルに重ねない */
  }

  .ts-hero__block,
  .ts-hero__stem {
    display: none;
  }
}
/* ts:endsection */

/* ts:section showcase */
@media (min-width: 900px) {
  .ts-game {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ts-game:nth-child(even) .ts-game__visual-wrap {
    order: -1;
  }

  .ts-game__visual {
    aspect-ratio: 4 / 5;
    max-height: 640px;
  }
}

@media (max-width: 899px) {
  .ts-game__visual {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 599px) {
  .ts-game__visual {
    aspect-ratio: 1 / 1;
  }

  /* 実ゲーム画像（縦長）がある時は、画面を小さくしすぎないよう 4:5 */
  .ts-game__visual:has(> .ts-shot) {
    aspect-ratio: 4 / 5;
  }

  .ts-placeholder__type {
    font-size: clamp(1.75rem, 11vw, 2.5rem);
  }
}

@media (hover: none) {
  .ts-game__visual {
    transform: none;
  }

  .ts-game__visual::after {
    display: none;
  }
}
/* ts:endsection */

/* ts:section faq */
/* Desktop: App / Category / Search を 1 行に（閉状態の高さを抑える） */
@media (min-width: 768px) {

}

@media (max-width: 599px) {
  .ts-faq__q {
    grid-template-columns: 1.75rem 1fr auto;
    padding-block: var(--space-3);
  }

  .ts-faq__a {
    padding-left: var(--space-2);
  }

}
/* ts:endsection */

/* ts:section embed */
@media (max-width: 599px) {
  .ts-embed {
    --gutter: 1rem;
  }
}
/* ts:endsection */