/*!
 * abi-bridge.css … アビリブ制作の共通ヘッダー・フッターと、
 * 旧テーマの下層ページCSSを共存させるための調整。
 * 下層ページでのみ読み込みます（トップページでは不要）。
 */

/* ------------------------------------------------------------------
 * 旧テーマのリセットがヘッダー・フッターに及ばないようにする
 * ---------------------------------------------------------------- */
/* 旧テーマは body の文字サイズを 16px に固定しているため、下層ページだけ
   ヘッダー・フッターの文字が 14px → 16px（約 +14%）に膨らみ、
   それに引きずられてバーの高さや余白がトップページと変わってしまう。
   アビリブ側の基準（html の文字サイズ＝1rem）に戻す。 */
.l-header,
.l-footer,
.l-menu,
.l-spnav {
  font-size: 1rem;
  line-height: 1.5;
}

.l-header img,
.l-footer img,
.l-menu img,
.l-spnav img {
  vertical-align: top;
  font-size: inherit;
  line-height: inherit;
  max-width: 100%;
  height: auto;
}

/* 旧テーマは button に font-size:16px と line-height:2 を指定している。
   Menuボタンがこれを受けて縦に伸びるため、周囲から受け継ぐ値に戻す。
   （色や背景はアビリブ側の指定が勝つのでそのまま） */
.l-header button,
.l-footer button,
.l-menu button,
.l-spnav button {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-feature-settings: inherit;
}

/* 旧テーマの a { color: #000 } を打ち消し、アビリブ側の文字色に合わせる */
.l-header a,
.l-footer a,
.l-menu a,
.l-spnav a {
  text-decoration: none;
  color: inherit;
}

/* 旧テーマの「段落が続いたら上に余白を空ける」ルール（p + p { margin-top: 1.5em }）が
   Menuボタンの中（アイコンの<p>とテキストの<p>）にまで効き、
   ボタンとヘッダーバーが縦に伸びてしまうため打ち消す。 */
.l-header p,
.l-header p + p,
.l-footer p,
.l-footer p + p,
.l-menu p,
.l-menu p + p,
.l-spnav p,
.l-spnav p + p {
  margin-top: 0;
}

/* 見出しタグを使っている箇所（トップページのロゴは h1）も同様に揃える */
.l-header h1,
.l-header h1 + p {
  margin-top: 0;
}

/* ------------------------------------------------------------------
 * 下層ページのヘッダーまわり
 * ---------------------------------------------------------------- */
#contents.l-contents {
  min-width: 0;
}

/* 下層ページのロゴ
   トップページではメインビジュアルの上に大きく置くデザインだが、
   下層ページは背景が無地のため、そのままだと間延びして見える。
   ナビゲーションバーとの高さのバランスに合わせて上限を設ける。 */
@media (768px <= width) {
  html.lower .l-header__logo {
    width: min(8.3333333333%, 110px);
  }
}

/* スマホは画面下部に固定ナビが出るので、その分だけ下に余白を足す */
@media (width < 768px) {
  #stage {
    padding-bottom: calc(140 / var(--spSize) * 100vw);
  }
}

/* フッターと本文の間隔 */
body:not(.home) .l-footer {
  margin-top: 80px;
}
@media (width < 768px) {
  body:not(.home) .l-footer {
    margin-top: calc(80 / var(--spSize) * 100vw);
  }}

/* パンくずはヘッダーの下に来るように */
body:not(.home) .breadcrumbs {
  top: 170px;
}
@media (width < 768px) {
  body:not(.home) .breadcrumbs {
    top: calc(200 / var(--spSize) * 100vw);
  }}