/* チーム立釣魂 ハブ／情報ページ 共通スタイル
   ※ lp-tachitsuri.css は改変しないこと（入会LP・メンバー一覧が依存） */

.ts-page { padding: 4rem 0; background: #000; }

/* SP: common.css の .c_mv はモバイルファーストで 767px以下では overflow:hidden を
   持たない（.ovh 修飾クラスか min-width:768px のときだけクリップされる）。
   そのため縦長のSP画像（width:140%）がヒーロー領域の下・右へあふれ、
   z-index:-1 の .c_mv__imgs が後続セクションの裏に透けて見えてしまう。
   PC側は common.css 側で既に overflow:hidden 済みなので、SPでも同じ挙動に揃える。 */
.c_mv.--about-member { overflow: hidden; }

/* MV直後の本文をまとめて不透明な背景で覆い、万一のはみ出しでも
   ヒーロー画像が本文の裏に透けないようにする（.about-member の background:#000 に倣う）。
   ハブページ専用ラッパ。about/rule は既存の .ts-page がこの役割を兼ねる。 */
.ts-body { background: #000; }

.ts-heading { text-align: center; margin-bottom: 2.5rem; }
.ts-heading__en {
    font-size: .75rem; letter-spacing: .15em; color: #999;
    margin-bottom: .35rem; text-transform: uppercase;
}
.ts-heading__ja { font-size: 1.5rem; font-weight: 700; line-height: 1.4; }

.ts-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 240px; padding: .9rem 1.75rem;
    border-radius: 4px; text-decoration: none; font-weight: 700;
    background: #fff; color: #111; transition: opacity .2s;
}
.ts-btn:hover { opacity: .8; color: #111; }
.ts-btn.--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.ts-btn.--ghost:hover { color: #fff; }

.ts-page__back { margin-top: 3rem; text-align: center; }

@media (max-width: 767px) {
    .ts-page { padding: 2.5rem 0; }
    .ts-heading__ja { font-size: 1.25rem; }
    .ts-btn { min-width: 200px; width: 100%; }
}

/* ---- ハブ（/tachitsuri） ---- */
/* MVは共通 c_mv --about-member（lp-tachitsuri.css）を使用。旧 .ts-mv* は撤去済み。 */

.ts-intro { padding: 3.5rem 0; text-align: center; }
.ts-intro__badge {
    display: inline-block; padding: .3rem .9rem; margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
    font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.85);
}
.ts-intro__catch { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-bottom: 1.5rem; }
.ts-intro__text { text-align: center; line-height: 2; }
.ts-facts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    max-width: 900px; margin: 2.5rem auto 0;
}
.ts-facts__item { text-align: center; padding: 1.25rem .5rem; background: #1a1a1a; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
.ts-facts__item dt { font-size: .7rem; color: rgba(255,255,255,.65); margin-bottom: .4rem; }
.ts-facts__item dd { font-size: 1.15rem; font-weight: 700; color: #fff; }

.ts-nav-cards { padding: 0 0 3.5rem; }
.ts-nav-cards__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; }
.ts-nav-cards__item a {
    display: flex; flex-direction: column; gap: .35rem; height: 100%;
    padding: 1.5rem; background: #1a1a1a; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
    text-decoration: none; color: #fff; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.ts-nav-cards__item a:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); transform: translateY(-2px); border-color: rgba(255,255,255,.3); color: #fff; }
.ts-nav-cards__en { font-size: .7rem; letter-spacing: .12em; color: rgba(255,255,255,.5); }
.ts-nav-cards__ja { font-size: 1.05rem; font-weight: 700; color: #fff; }
.ts-nav-cards__desc { font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.6; }

.ts-schedule, .ts-notices, .ts-events, .ts-external, .ts-brand { padding: 3.5rem 0; }
.ts-schedule, .ts-events { background: #141414; }

.ts-schedule__list { list-style: none; max-width: 720px; margin: 0 auto; }
.ts-schedule__list li { display: flex; gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.ts-schedule__month { flex: 0 0 6rem; font-weight: 700; color: #fff; }
.ts-schedule__body { flex: 1; color: #fff; }

.ts-list { list-style: none; max-width: 720px; margin: 0 auto; }
.ts-list__item a {
    display: flex; gap: 1.5rem; padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; color: #fff;
}
.ts-list__item a:hover { color: #fff; }
.ts-list__item a:hover .ts-list__title { text-decoration: underline; }
.ts-list__date { flex: 0 0 6rem; color: rgba(255,255,255,.65); font-size: .85rem; }
.ts-list__title { flex: 1; }

.ts-external__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; max-width: 720px; margin: 0 auto; }
.ts-external__list a {
    display: flex; flex-direction: column; gap: .3rem; padding: 1.5rem;
    border: 1px solid rgba(255,255,255,.14); border-radius: 6px; text-decoration: none; color: #fff;
}
.ts-external__list a:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.ts-external__label { font-weight: 700; }
.ts-external__desc { font-size: .8rem; color: rgba(255,255,255,.65); }

.ts-brand__text { text-align: center; line-height: 2; }

.ts-cta { padding: 4rem 0; background: #1a1a1a; color: #fff; text-align: center; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.ts-cta__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.ts-cta__text { line-height: 2; margin-bottom: 2rem; }
.ts-cta .ts-btn { background: #fff; color: #111; }
.ts-cta .ts-btn:hover { color: #111; }

@media (max-width: 767px) {
    .ts-intro__catch { font-size: 1.4rem; }
    .ts-facts { grid-template-columns: repeat(2, 1fr); }
    .ts-nav-cards__list { grid-template-columns: 1fr; }
    .ts-external__list { grid-template-columns: 1fr; }
    .ts-schedule__list li, .ts-list__item a { flex-direction: column; gap: .3rem; }
    .ts-schedule__month, .ts-list__date { flex: none; }
}

/* ---- 情報ページ（/tachitsuri/about） ---- */

.ts-about__lead { max-width: 68ch; margin: 0 auto 3rem; text-align: center; line-height: 2; }

.ts-section { max-width: 820px; margin: 0 auto 3rem; }
/* 見出し下線・段落・表の右端を .ts-section の幅（＝表の幅）に統一する。
   68ch はラテン文字向けの尺度で日本語には合わないため外し、コンテナ幅に任せる。 */
.ts-section__title {
    font-size: 1.15rem; font-weight: 700; padding-bottom: .6rem; margin-bottom: 1.25rem;
    border-bottom: 2px solid #fff;
}
.ts-section__text { line-height: 2; }

.ts-table { width: 100%; border-collapse: collapse; }
.ts-table th, .ts-table td {
    padding: 1rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,.14); line-height: 1.8;
}
.ts-table th { width: 32%; font-weight: 700; background: #1a1a1a; color: #fff; white-space: nowrap; }

.ts-quote {
    margin: 0 0 1.25rem; padding: 1.25rem 1.5rem;
    background: #1a1a1a; border-left: 4px solid #fff;
    font-size: 1.1rem; font-weight: 700; color: #fff;
}

.ts-section--join { padding: 2rem; background: #1a1a1a; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
.ts-join-summary { list-style: none; }
.ts-join-summary li { padding: .6rem 0; line-height: 1.9; }
.ts-join-summary strong { display: inline-block; min-width: 6.5rem; }

@media (max-width: 767px) {
    .ts-table th, .ts-table td { display: block; width: 100%; }
    .ts-table th { border-bottom: none; white-space: normal; }
    .ts-join-summary strong { display: block; min-width: 0; }
}

/* ---- 会則（/tachitsuri/rule, /tachitsuri/join 共通パーツ .terms-scroll-box） ----
   HTML構造（templates/front/lp/tatituri_rule.html.twig）は変更不可。
   「第N条」は h3 に番号とタイトルが一体化しており分割できないため、
   h3 を条見出しとして立たせ、レール（左の縦ヘアライン）上に赤いマーカーを置く方式で
   「番号が構造として機能している」印象を作る。 */

.terms-scroll-box {
    max-width: 700px;
    margin: 0 auto;
    padding-left: 2rem;
    border-left: 1px solid rgba(255,255,255,.14);
}

.terms-scroll-box > h2 {
    color: rgba(255,255,255,.6);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .12em;
    margin: 0 0 2.5rem;
}

.terms-scroll-box h3 {
    position: relative;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    margin: 0 0 .75rem;
}

.terms-scroll-box h3:not(:first-of-type) {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
}

.terms-scroll-box h3::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: .3em;
    width: 3px;
    height: 1.1em;
    background: #b40000;
}

.terms-scroll-box p {
    margin: 0 0 .75em;
    font-size: .9375rem;
    line-height: 2;
    color: rgba(255,255,255,.78);
}

.terms-scroll-box ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0 0 1rem;
}

.terms-scroll-box ol li {
    margin-bottom: .5em;
    font-size: .9375rem;
    line-height: 2;
    color: rgba(255,255,255,.78);
}

.terms-scroll-box > p:last-child {
    margin-top: 3rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 767px) {
    .terms-scroll-box { padding-left: 1.4rem; }
    .terms-scroll-box h3::before { left: -1.4rem; }
    .terms-scroll-box p, .terms-scroll-box ol { max-width: none; }
}