/*
 * 株式会社ビーグルサイエンス サイト共通スタイル
 *
 * Bootstrap 5.3.8 の上に、旧サイト (Bootstrap 3.3.4) から踏襲する見た目だけを足す。
 * 色・寸法の値は旧サイトの bootstrap.css の実値による。
 */

/* 日本語本文は OS 内蔵フォントを使い、Web フォントはダウンロードしない */
:root {
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif;
}

/* ヘッダー (狭い画面ではロゴと横に並べ、上の余白を詰める) */
.site-name {
  margin-top: .5rem;
  margin-bottom: .25rem;
}

/* 英名は和名に従う大きさにする */
.site-name-en {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .site-name {
    margin-top: 30px;
  }

  .site-name-en {
    font-size: 1.25rem;
  }
}

/* 上部ナビ (Bootstrap 3 の .navbar-inverse + .nav-pills)。768px 未満では「メニュー」のボタンで縦に開く */
.site-navbar {
  min-height: 50px;
  margin-bottom: 20px;
  padding: 0 5px;
  background-color: #222;
  border: 1px solid #080808;
  border-radius: 4px;
}

.site-navbar .navbar-toggler {
  margin: 7px 0;
  font-size: 1rem;
  color: #9d9d9d;
}

.site-navbar .nav {
  --bs-nav-link-color: #9d9d9d;
  --bs-nav-link-hover-color: #fff;
  --bs-nav-pills-border-radius: 4px;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #080808;
}

@media (max-width: 767.98px) {
  .site-navbar .nav {
    padding-bottom: 7px;
  }

  .site-navbar-label {
    margin-left: .25rem;
  }
}

/* 768px 以上ではアイコンだけを見せ、名前は読み上げにだけ渡す (Bootstrap の .visually-hidden と同じ) */
@media (min-width: 768px) {
  .site-navbar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ページ名 (本文の頭の h1) */
.page-title {
  margin-bottom: 20px;
}

/* .well (Bootstrap 5 で廃止されたため再定義) */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* サイドバー */
.site-sidebar .nav-link {
  --bs-nav-link-padding-x: 15px;
}

/* サイドバーの区切りの見出し (「メニュー」「製品紹介」「事例紹介」)。リンクと見分けられるようにする */
.site-sidebar-heading {
  padding: .5rem 15px 0;
  font-size: .8125rem;
  font-weight: 700;
  color: #6c757d;
}

/* パンくず (Bootstrap 3 の背景付きの帯) */
.breadcrumb {
  --bs-breadcrumb-bg: #f5f5f5;
  --bs-breadcrumb-padding-x: 15px;
  --bs-breadcrumb-padding-y: 8px;
  --bs-breadcrumb-margin-bottom: 20px;
  --bs-breadcrumb-border-radius: 4px;
}

/* 画像の枠 (Bootstrap 3 の .thumbnail。Bootstrap 5 で廃止されたため再定義) */
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

/* 枠の比率 (.ratio) にそろえて切る画像は、上の height: auto を打ち消して枠いっぱいにする */
.thumbnail .ratio > img {
  height: 100%;
}

/* 作例の「デザイン → 展開図 → 仕上がり」の矢印 (狭い画面では下向き) */
.sample-arrow {
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #6c757d;
  text-align: center;
}

/* 日付と本文を横に並べる一覧 (Bootstrap 3 の .dl-horizontal) */
.dl-horizontal {
  margin-bottom: 20px;
}

.dl-horizontal dd {
  margin-left: 0;
}

/* お知らせ・事業実績のように 1 件が長い一覧は、件と件の間を空ける (以前は <br> を重ねていた) */
.dl-spaced dd {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  /* 旧サイトは 1 行に収めて省略記号で切っていたが、長い項目名が読めなくなるので折り返す */
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
  }

  .dl-horizontal dd {
    margin-left: 180px;
  }

  .dl-horizontal dd::after {
    display: table;
    clear: both;
    content: "";
  }
}

/* 球体の3Dプレビュー (ドラッグで回す) */
.sphere-preview canvas {
  max-width: 100%;
  cursor: grab;
}

/* お問い合わせフォームの罠の入力欄 (人には見えない) */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}