/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Bootstrapのmt-4(1.5rem)にさらに10px足した見出し用の余白 */
.section-heading-mt {
  margin-top: calc(1.5rem + 15px);
}

/* /generations のテーブル: table-responsiveはoverflow-xを持つため、
   sticky-topを機能させるには自前でoverflow-y:autoの高さを与える必要がある。
   また、theadへのposition: stickyはSafari等で効かないことがあるため、th単位で指定する。 */
.generations-table-wrap {
  max-height: 75vh;
  overflow-y: auto;
}

.generations-table-thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* /generations で、URLフラグメント（#year-1990等）で指定した年の行をハイライトする */
tr:target {
  background-color: #fff3cd;
  scroll-margin-top: 3rem; /* theadがsticky-topで常時表示されるため、その高さ分ずらす */
}

/* /generations のテーブル内の世代名リンク: 下線を消す */
.generations-table-wrap a {
  text-decoration: none;
}

/* 円形のホロスコープ（HoroscopeWheelSvg）。viewBoxは400x400固定なので、
   表示サイズだけ画面幅に応じて縮小させる。 */
.horoscope-wheel {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* ナビバーが折り畳まれる幅（lg未満＝コンテナが画面幅いっぱいになる範囲）では、
   .containerの左パディング12px分だけロゴの左に隙間ができてしまうため、これを消して
   画面左端にぴったり付ける。ロゴはナビバーの上下にもフィットさせているので、左だけ
   余白が残ると不揃いに見えるのを避ける狙い。右側（ハンバーガー側）の余白は残す。 */
@media (max-width: 991.98px) {
  .navbar > .container {
    padding-left: 0;
  }
}

/* トップページ「ご利用の流れ」: 3段階のカードの間に、進む向きを矢印で示す。
   縦積み（md未満）ではカードの下に↓、横並び（md以上）ではカードの右に→を、
   それぞれカード間の余白（g-4 = 1.5rem）の中央に置く。 */
.flow-steps > .col {
  position: relative;
}

.flow-steps > .col:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.75rem);
  transform: translate(-50%, -50%);
  color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
  .flow-steps > .col:not(:last-child)::after {
    content: "→";
    left: auto;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }
}

/* ダッシュボード一覧の「誕生日の人物」「起きた出来事」の表の列幅。
   PCでは日付の列を6emにして従来のバランスのまま表示する。スマホ幅（md未満）では人物名・出来事名が
   1〜2文字ずつ縦に折り返さないよう、日付の列を中身（"12/31"）の幅まで縮め、人物名の列に全角4文字分を確保する。
   （PCでも縮めると、余った幅がすべてグループ名の列に回り、人物名・出来事名が左に寄りすぎる） */
.anniversary-table-date {
  width: 6em;
}

@media (max-width: 767.98px) {
  .anniversary-table-date {
    width: 1%;
    white-space: nowrap;
  }

  .anniversary-table-person {
    width: 4.5em;
  }
}

/* 登録フォームの規約同意行。Bootstrap既定のチェックボックスは1em（約16px）で指で狙うには小さく、
   スマホで隣のリンクを誤タップしやすいため大きくする。行の高さもiOSの推奨する44px以上を確保し、
   ラベルを行いっぱいに広げてタップ領域を稼ぐ。
   .form-checkはpadding-leftとfloatでチェックボックスを左に寄せる作りなので、flexで並べるために両方打ち消す。
   .form-checkと併記して詳細度を上げているのは、bootstrap.min.cssがこのファイルより後に読み込まれており、
   クラス1つ分の詳細度では.form-checkの宣言に負けるため。 */
.form-check.terms-agreement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding-left: 0;
}

.form-check.terms-agreement .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
}

.form-check.terms-agreement .form-check-label {
  flex: 1;
}

/* 長い説明文の折りたたみ（read_more_controller）。8行分（line-height 1.5 × 8）で切り、下端を薄くして続きがあることを示す。 */
.read-more-content.is-collapsed {
  max-height: 12em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}