@charset "UTF-8";

/* このページは body class="--maintenance"（旧テンプレの流用）だが、
   .--maintenance のスタイルは .table__maintenance 配下のみで本ページには影響しない。
   下記の打ち消し・再宣言はこの CSS が本ページ専用で読み込まれる前提でスコープしている。 */

/* 旧 app.css の body { background-color:#F1F1F1 } を打ち消し、背景は白・heroを最前面に */
body.--maintenance {
  background-color: #fff;
}

/* 旧 app.css の main { padding-top:7rem/9rem } を打ち消す。
   共通ヘッダー分の余白は .global-header-reserve が確保するため main 側は不要 */
body.--maintenance main {
  padding-top: 0;
}

/* hero 下の余白は必ず 40px（SP/PC 共通）。
   共通 app.css（/assets/css/app.css）が .--pages に padding-top を持たせているが、
   PC=40px / SP=32px と SP だけ 40px 未満になる。さらにこのページ独自に margin-top を足すと
   二重加算になるため、margin は使わず padding-top を 40px に固定して常に 40px にする。
   （この非メディアルールは specificity で共通 app.css の SP メディアルールにも勝つ） */
body.--maintenance .section__contents--block.--pages {
  margin-top: 0;
  padding-top: 40px;
}

/* 旧 app.css: .contents__block の padding: 8rem 0 0 （上80px）が hero 直下に加算されるのを打ち消す。
   hero 下の 40px は .--pages ブロックの margin-top で確保済み。
   先頭の 1 つのみ対象（.contents__block + .contents__block のブロック間間隔は残す） */
body.--maintenance .section__contents--block.--pages > .contents__block:first-child {
  padding-top: 0;
}

/*----------------------------------------------------
 パンくずリスト（DESIGN.md 準拠 / 新デザイン）
 共通定義は assets/css/app.css にあるが、このページはその後に src/styles/app.css を読み込むため、
 旧デザイン（グレー背景・6rem高・オレンジリンク・">"区切り）が後勝ちしてしまう。
 ここで再宣言して新デザインを取り戻す。本家 app.css を変更したらここも追従すること。
----------------------------------------------------*/
.breadcrumbs__nav {
  align-items: center;
  background-color: var(--ta-color-primary-light);
  display: flex;
  min-height: 0;
  padding: 12px 20px;
  position: relative;
  /* SP でも1行を保ち、長い場合だけ横スクロールへ逃がす（ページ全体には横スクロールを出さない） */
  overflow-x: auto;
  scrollbar-width: none;
}

/* 旧デザインの上部境界線を打ち消す */
.breadcrumbs__nav::before {
  content: none;
}

.breadcrumbs__nav::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 940px) {
  .breadcrumbs__nav {
    margin: 0 auto;
    padding: 12px 0;
    width: 100%;
  }
}

.breadcrumbs__nav .breadcrumbs__nav--list {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 940px) {
  .breadcrumbs__nav .breadcrumbs__nav--list {
    margin: 0 auto;
    max-width: var(--content-width);
    width: 100%;
  }
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item {
  color: #fff;
  font: 500 12px/1.4 var(--ta-font-family-ja);
  letter-spacing: var(--ta-letter-spacing-ja);
  white-space: nowrap;
  /* 旧CSSの display: flex を戻す。シェブロン(::before)を vertical-align で揃えるため */
  display: block;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item a:hover {
  text-decoration: none;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item:last-child,
.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item:last-child a {
  color: var(--ta-color-primary-pale);
  font: 700 12px/1.4 var(--ta-font-family-ja);
}

/* 区切りは画像を使わず CSS シェブロンで描画 */
.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item + .breadcrumbs__nav--list-item::before {
  border: solid #e3e3e3;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 8px;
  transform: rotate(-45deg);
  vertical-align: middle;
  width: 7px;
}