/* =========================================================
   BORDER-LINE
   外側のUIだけを担当

   記事本文の見た目は
   update.js が保存した「本家CSS」に任せる。
   ここでは本家記事の h3 / h4 / table / button 等を
   必要以上に上書きしない。
   ========================================================= */

:root {
  --bl-bg: #0d0f12;
  --bl-surface: #171a1f;
  --bl-surface-2: #21252c;
  --bl-border: #292d34;
  --bl-text: #e8e8e8;
  --bl-muted: #9198a1;
}

* {
  box-sizing: border-box;
}


/* =========================================================
   機種検索ページ
   ========================================================= */

.search-page {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 40px 20px 80px;

  background: var(--bl-bg);
  color: var(--bl-text);
}

.search-header {
  margin-bottom: 30px;
  text-align: center;
}

.search-logo {
  margin: 0;

  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
}

.search-subtitle {
  margin-top: 8px;

  color: var(--bl-muted);
}

.search-area {
  margin-bottom: 25px;
}

.search-main-input {
  width: 100%;

  padding: 15px 18px;

  border: 1px solid #3a3f47;
  border-radius: 10px;

  background: var(--bl-surface);
  color: #fff;

  font-size: 17px;

  outline: none;
}

.search-main-input:focus {
  border-color: #747d89;
}

.search-machine-list {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.search-machine-card {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 18px 20px;

  border: 1px solid #333840;
  border-radius: 10px;

  background: var(--bl-surface);
  color: #fff;

  cursor: pointer;

  text-align: left;
}

.search-machine-card:hover {
  background: var(--bl-surface-2);
}

.search-machine-name {
  font-size: 17px;
  font-weight: 600;
}

.search-machine-arrow {
  font-size: 28px;

  opacity: 0.6;
}

.search-empty {
  padding: 40px 20px;

  color: #888;

  text-align: center;
}


/* =========================================================
   機種詳細ページ
   ========================================================= */

.machine-page {
  width: min(1200px, 100%);
  min-height: 100vh;

  margin: 0 auto;

  padding: 20px;

  background: var(--bl-bg);
  color: #fff;
}

.machine-page-header {
  display: flex;

  align-items: center;

  gap: 25px;

  margin-bottom: 20px;

  background: var(--bl-bg);
  color: #fff;
}

.machine-page-title {
  margin: 0;

  color: #fff;

  font-size: 26px;
}

.updated {
  margin-top: 7px;

  color: #848b95;

  font-size: 12px;
}

.back-button {
  flex-shrink: 0;

  color: #aab0b8;

  text-decoration: none;
}

.back-button:hover {
  color: #fff;
}


/* =========================================================
   機種詳細タブ

   狙い目専用なので表示しない
   ========================================================= */

.machine-page .tabs {
  display: none !important;
}


/* =========================================================
   iframe
   ========================================================= */

.machine-page #content {
  width: 100%;

  margin: 0;

  padding: 0;

  background: var(--bl-bg);
}

.machine-frame {
  display: block;

  width: 100%;

  min-height: 800px;

  margin: 0;

  padding: 0;

  border: 0;

  background: #fff;
}


/* =========================================================
   iframe内部
   ========================================================= */

html:has(body.embed-page),
body.embed-page {
  width: 100%;
  max-width: 100%;
}

body.embed-page {
  margin: 0 !important;

  padding: 0 !important;

  overflow-x: hidden;
}

.borderline-mirror-content {
  width: 100%;
  max-width: none;

  margin: 0;

  padding: 0;
}


/* =========================================================
   親ページから追加する機種画像
   ========================================================= */

.machine-main-image {
  width: 100%;

  margin: 0 0 12px;

  padding: 0;
}

.machine-main-image img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  padding: 0;

  border: 0;
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 600px) {

  .search-page {
    padding: 20px 14px 50px;
  }


  .search-logo {
    font-size: 27px;
  }


  .machine-page {
    width: 100%;
    max-width: 100%;

    padding: 10px 0 0;
  }


  .machine-page-header {
    display: block;

    margin-bottom: 10px;

    padding: 0 12px;
  }


  .back-button {
    display: inline-block;

    margin-bottom: 10px;
  }


  .machine-page-title {
    font-size: 21px;
  }


  .updated {
    font-size: 10px;
  }


  .machine-frame {
    width: 100%;
    max-width: 100%;
  }

}


/* =========================================================
   本家と同じ小見出し

   データ画面
   各種モードによる影響
   アイテムアイコンによる影響
   など
   ========================================================= */

body.embed-page
.borderline-mirror-content
.contents h4,

body.embed-page
.borderline-mirror-content
.contents2 h4 {
  display: block !important;

  margin: 14px 0 10px !important;

  padding: 5px 0 5px 8px !important;

  background: transparent !important;

  color: #111 !important;

  border: 0 !important;

  border-left: 5px solid #10bec1 !important;

  border-bottom: 1px solid #10bec1 !important;

  border-radius: 0 !important;

  font-size: 18px !important;

  font-weight: 700 !important;

  line-height: 1.35 !important;
}


@media (max-width: 600px) {

  body.embed-page
  .borderline-mirror-content
  .contents h4,

  body.embed-page
  .borderline-mirror-content
  .contents2 h4 {
    margin: 12px 0 8px !important;

    padding: 5px 0 5px 7px !important;

    border-left-width: 5px !important;

    font-size: 17px !important;
  }

}


/* =========================================================
   狙い目① / 狙い目② …
   小アコーディオン
   全機種共通
   ========================================================= */

.embed-page
.js-menu2.borderline-target-accordion {
  position: relative;

  display: block;

  margin: 12px 0 0 !important;

  padding: 10px 44px 10px 12px !important;

  border: 1px solid #c9c9c9 !important;

  background: #ffffff !important;

  color: #111111 !important;

  cursor: pointer;

  box-sizing: border-box;
}


/* =========================================================
   本家側が追加する操作ボタン群を隠す

   ＋が二重に出るのを防止。

   開閉自体は server.js 側で
   js-menu2 全体のクリックを処理する。
   ========================================================= */

.embed-page
.js-menu2
> .acc-tools {
  display: none !important;
}


/* =========================================================
   開いている時は本文と繋げる
   ========================================================= */

.embed-page
.js-menu2.borderline-target-accordion.is-active {
  border-bottom: 0 !important;
}


/* =========================================================
   重要

   ここでは ::after で ＋ / − を追加しない。

   本家CSS側ですでに表示されるため、
   BORDER-LINE側でも追加すると
   「＋＋」になってしまう。
   ========================================================= */


/* =========================================================
   展開された中身
   ========================================================= */

.embed-page
.js-menu2.borderline-target-accordion
+ .contents2 {
  margin: 0 0 12px !important;

  padding: 12px 14px !important;

  border: 1px solid #c9c9c9 !important;

  border-top: 0 !important;

  background: #ffffff !important;

  box-sizing: border-box;
}


/* =========================================================
   中身の最初と最後の余白
   ========================================================= */

.embed-page
.js-menu2.borderline-target-accordion
+ .contents2
> :first-child {
  margin-top: 0 !important;
}


.embed-page
.js-menu2.borderline-target-accordion
+ .contents2
> :last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   小アコーディオン
   Smartphone
   ========================================================= */

@media (max-width: 600px) {

  .embed-page
  .js-menu2.borderline-target-accordion {
    margin-top: 8px !important;

    padding:
      9px
      38px
      9px
      9px !important;
  }


  .embed-page
  .js-menu2.borderline-target-accordion
  + .contents2 {
    margin-bottom: 9px !important;

    padding: 10px !important;
  }

}


/* =========================================================
   狙い目内の表

   セルを分ける線を復元
   全機種共通
   ========================================================= */

.embed-page #neraime2 table,
.embed-page .tab-contents table,
.embed-page .tab-contents2 table,
.embed-page .contents2 table {
  width: 100%;

  border-collapse: collapse !important;

  border-spacing: 0 !important;
}


/* =========================================================
   各セルの境界線
   ========================================================= */

.embed-page #neraime2 table th,
.embed-page #neraime2 table td,

.embed-page .tab-contents table th,
.embed-page .tab-contents table td,

.embed-page .tab-contents2 table th,
.embed-page .tab-contents2 table td,

.embed-page .contents2 table th,
.embed-page .contents2 table td {
  border: 1px solid #c9c9c9 !important;

  box-sizing: border-box;
}


/* =========================================================
   赤・濃いグレーなどの見出し部分

   セル区切りを白線にして見やすくする
   ========================================================= */

.embed-page #neraime2 table th,

.embed-page .tab-contents table th,

.embed-page .tab-contents2 table th,

.embed-page .contents2 table th {
  border-color: #ffffff !important;
}

/* =========================================
   データカウンター履歴について
   本文を左寄せ
========================================= */

body.embed-page .borderline-data-counter-history,
body.embed-page .borderline-data-counter-history-body {
  text-align: left !important;
}

body.embed-page .borderline-data-counter-history-body p,
body.embed-page .borderline-data-counter-history-body div,
body.embed-page .borderline-data-counter-history-body span,
body.embed-page .borderline-data-counter-history-body ul,
body.embed-page .borderline-data-counter-history-body ol,
body.embed-page .borderline-data-counter-history-body li,
body.embed-page .borderline-data-counter-history-body a,
body.embed-page .borderline-data-counter-history-body small,
body.embed-page .borderline-data-counter-history-body strong {
  text-align: left !important;
}

/* 見出し系も左寄せ */
body.embed-page .borderline-data-counter-history-body h1,
body.embed-page .borderline-data-counter-history-body h2,
body.embed-page .borderline-data-counter-history-body h3,
body.embed-page .borderline-data-counter-history-body h4,
body.embed-page .borderline-data-counter-history-body h5,
body.embed-page .borderline-data-counter-history-body h6 {
  text-align: left !important;
}

/* 表だけは見やすさ維持
   必要ならここは消して全部左寄せでもOK */
body.embed-page .borderline-data-counter-history-body table {
  text-align: left !important;
}

body.embed-page .borderline-data-counter-history-body th,
body.embed-page .borderline-data-counter-history-body td {
  text-align: left !important;
}

/* =========================================================
   データカウンター履歴の表
   区切り線を見えるようにする
   ========================================================= */

body.embed-page .borderline-mirror-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body.embed-page .borderline-mirror-content table th,
body.embed-page .borderline-mirror-content table td {
  border: 1px solid #c9c9c9 !important;
  box-sizing: border-box !important;
}

/* ヘッダー行 */
body.embed-page .borderline-mirror-content table th {
  border-color: #ffffff !important;
}

/* 念のため、行にも線を出す */
body.embed-page .borderline-mirror-content table tr {
  border: 0 !important;
}

/* セル背景が同化して見えない時の保険 */
body.embed-page .borderline-mirror-content table td {
  background-clip: padding-box !important;
}
/* =========================================================
   BORDER-LINE machine title linebreak
   本家タイトルの改行をそのまま表示
   ========================================================= */

.machine-page-title {
  white-space: pre-line;
  line-height: 1.2;
}