/* ===== Force left align in main content across all breakpoints (Ananke/Tachyons) ===== */

/* 本文領域は常に左寄せ */
main,
main article,
main .measure,
main .nested-copy-line-height,
main .nested-links {
  text-align: left !important;
}

/* Tachyons のセンタリング系クラスを “本文内だけ” 全部左寄せに上書き */
main .tc,
main .tc-ns,
main .tc-l,
main .center,
main .center-ns,
main .center-l {
  text-align: left !important;
}

/* 念のため：幅が広い時に付くクラスにも勝つ（-ns / -l） */
@media screen and (min-width: 30em) { /* ns */
  main .tc-ns, main .center-ns { text-align: left !important; }
}
@media screen and (min-width: 60em) { /* l */
  main .tc-l, main .center-l { text-align: left !important; }
}

.mw8 {
  max-width: 80rem !important;
}

.mw7 {
  max-width: 70rem !important;
}

.measure-wide {
  max-width: 70rem !important;
}

/* ===== Header（黒帯のタイトル）を左寄せ＆サイズ固定 ===== */

/* 黒帯（ヘッダー）内のテキストを大画面でも左寄せに固定 */
header .tc,
header .tc-l {
  text-align: left !important;
}

/* “ページタイトル”の文字サイズを固定（大画面で勝手に大きくならないように） */
header h1,
header .lh-title {
  font-size: 2.0rem !important;   /* 好みで 1.4〜1.8rem */
  line-height: 1.2 !important;
}

/* Tachyonsの large で付く巨大サイズ（f-subheadline-l 等）を無効化 */
@media screen and (min-width: 60em) {
  header .f-subheadline-l,
  header .f1-l,
  header .f2-l,
  header .f3-l {
    font-size: 1.6rem !important;
  }
}

/* ヘッダー文字の左位置を整える（余白を一定に） */
header .pv3,
header .pv4,
header .ph3,
header .ph4-ns {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

* header内の縦padding固定 */
header div[class*="pv"] {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* ===== ヘッダー（黒帯）の縦幅を large(>=60em)でも増やさない ===== */
@media screen and (min-width: 60em) {

  /* まず header 自体が pv*-l を持っている場合 */
  header.pv3-l, header.pv4-l, header.pv5-l {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* header内のどこか（div/nav/section等）に pv*-l が付いている場合 */
  header .pv3-l, 
  header .pv4-l, 
  header .pv5-l {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* ついでに、万一 min-height/line-height で膨らむケースも抑える */
  header {
    min-height: 0 !important;
  }
}

@media screen and (min-width: 60em) {
  header h1, header h2, header p {
    margin-top: 0.3rem !important;
    margin-bottom: 0.3rem !important;
  }
}


/* ===== Header（黒帯）の見た目を固定：幅が広くなっても太らない＆左寄せ ===== */

/* large(>=60em ≒ 960px) で黒帯が太る原因 pb6-l を抑制 */
@media screen and (min-width: 60em) {
  header .pb6-l {
    padding-bottom: 1rem !important; /* 好みで 0.8〜1.4rem */
  }

  /* ページタイトルの巨大化（f-subheadline-l）を止める */
  header .f-subheadline-l {
    font-size: 2rem !important;      /* 好みで 1.6〜2.2rem */
    line-height: 1.2 !important;
  }

  /* large時のセンタリング(tc-l)をやめて左寄せに固定 */
  header .tc-l {
    text-align: left !important;
  }
}