/* 管理画面で指定した改行の、出し分け。

   ・br.br-pc … パソコンのときだけ改行する（狭い画面では改行しない）
   ・br.br-sp … スマートフォンのときだけ改行する

   切り替えの幅（640px）は、カレンダーの出し分け（css/calendar.css）と同じにしている。
   ここを変えるときは、そちらも一緒に見ること。

   ※ <br> は display:none にすると改行しなくなる（これで出し分けている）。 */

br.br-pc {
  display: inline;
}

br.br-sp {
  display: none;
}

@media (max-width: 640px) {
  br.br-pc {
    display: none;
  }

  br.br-sp {
    display: inline;
  }
}

/* --------------------------- 文章の位置 ---------------------------

   管理画面で選んだ「左寄せ・中央・右寄せ」。
   もとの指定（見出しは中央など）を上書きするため !important を付けている。
   何も選んでいないときはクラスが付かず、これまでどおりの見え方になる。 */

/* ⚠️ 中の <p> にも効かせる。
   「私たちについて」の本文は、囲みの中に段落が並ぶ形で、
   その段落自身が `text-align: justify` を持っている。
   囲みだけに指定しても、段落側の指定に負けて変わらない（実際に変わらなかった）。 */

.tf-left,
.tf-left p {
  text-align: left !important;
}

.tf-center,
.tf-center p {
  text-align: center !important;
}

.tf-right,
.tf-right p {
  text-align: right !important;
}

/* --------------------------- 文字の色 ---------------------------

   管理画面で選べるのは、ここに並べた色だけ。**自由な色は入れない。**
   背景（濃紺）との明暗差が足りない色を選べてしまうと、お客様の画面で読めなくなるため。

   ここに並んでいるのは、次の条件を測って**合格したものだけ**（2026-08-01 実測）:

     基準  ふつうの文字で 4.5:1 以上（WCAG AA）
     背景  全画面のお知らせは、写真の上に rgba(8,11,20,0.78) の暗幕を重ねている。
           **写真が真っ白の画素だった場合**＝ rgb(62,65,72) が最悪の背景。
           そこでも 4.5:1 を満たすことを条件にした（お知らせページの #0a0e1a より厳しい）。

     標準（サイトの金色）#F5A623 … 5.0:1  ＝クラスを付けないときの色
     これまでのアンバー   #d4a574 … 4.6:1  （ぎりぎり合格）
     明るいアンバー      #ffb627 … 5.8:1
     白               #ffffff … 10.2:1
     明るいグレー       #dfe3e9 … 7.9:1

   ⚠️ 落とした色: #e8952c（濃いめの琥珀）は 4.3:1 で基準に届かず**不採用**。
   ⚠️ 2026-08-01 に**サイトの基調色（--gold）を #d4a574 → #F5A623 に変えた**
      （bar-price-manager と同じ色に揃えるため・PM 指示）。
      それに伴い、以前あった「山吹 #f5a623」は標準と同じ色になったので選択肢から外した。
   ⚠️ 色を足すときは、必ず上の「最悪の背景」で測ってから並べること。
      計算は scratchpad の contrast.mjs と同じ式（WCAG の相対輝度）。
   ⚠️ もとの色指定を上書きするため !important を付けている（位置と同じ理由）。 */

.tf-c-amber {
  color: #d4a574 !important;
}

.tf-c-amber-vivid {
  color: #ffb627 !important;
}

.tf-c-white {
  color: #ffffff !important;
}

.tf-c-light {
  color: #dfe3e9 !important;
}

/* --------------- スマートフォンのときだけ違う位置にする ---------------

   .tf-sp-左右中央 は **640px 以下のときだけ** 効く。
   付けなければ、スマートフォンでもパソコンと同じ位置になる。
   ⚠️ 切り替えの幅（640px）は、このファイルの改行の出し分けと同じ値。
      片方だけ変えると「改行はスマホ用・位置はPC用」という食い違いが出る。
   ⚠️ 上の位置指定（.tf-left など）より**後ろに書くこと**。
      同じ強さなので、後ろにあるほうが勝つ＝スマホ指定が上書きできる。 */

@media (max-width: 640px) {

  .tf-sp-left,
  .tf-sp-left p {
    text-align: left !important;
  }

  .tf-sp-center,
  .tf-sp-center p {
    text-align: center !important;
  }

  .tf-sp-right,
  .tf-sp-right p {
    text-align: right !important;
  }
}

/* 管理画面のプレビューでは、画面幅ではなく指定で出し分ける
   （パソコンのままスマートフォンの見え方を確かめるため） */

.cal-force-phone br.br-pc,
.tf-force-phone br.br-pc {
  display: none;
}

.cal-force-phone br.br-sp,
.tf-force-phone br.br-sp {
  display: inline;
}

.cal-force-pc br.br-pc,
.tf-force-pc br.br-pc {
  display: inline;
}

.cal-force-pc br.br-sp,
.tf-force-pc br.br-sp {
  display: none;
}