/*
 * 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;
  }
}

/* 長い説明文の折りたたみ（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);
}