/* ══════════════════════════════════════════════════════════
   セクション・アンカーメニュー（画面右サイドの「MENU」タブ）

   ⚠ なぜ CSS を別に持つのか
     .drawr の CSS は assets/css/styles.css にもあるが、pr_page / brand は
     header-staffs_choice / footer-staffs_choice という独立レイアウトを使い、
     styles.css を読み込まない。そのため同じ定義をここに持つ必要がある。
     （styles.css:1359〜 の .drawr 定義を踏襲。変更するときは両方を見ること）
   ══════════════════════════════════════════════════════════ */

.drawr_btn {
    display: block;
    padding: 1rem 0.5rem;
    position: fixed;
    top: 50%;
    right: 0;
    cursor: pointer;
    z-index: 999;
    color: #fff;
    width: 40px;
    /* ⚠ pr_page は別レイアウト（*-staffs_choice）で継承元が違うため、
       /prs_full_line_dealer/ の実測値をすべて明示する。省くとズレる。 */
    font-family: var(--bb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    background: #053769;
}

/* 閉じているとき＝三点（縦）、開いているとき＝×。
   ⚠ 読み込まれている Font Awesome は 6 系だが、styles.css 側の既存定義は
      "Font Awesome 5 Free" のままなので、どちらでも出るよう両方を指定する。 */
.drawr_btn::before {
    padding: 0 0.5rem;
    font-size: 24px;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f142';
}

.drawr_btn.drawr_btn_open::before {
    content: '\f00d';
    margin-left: -5px;
}

.drawr_btn span {
    display: block;
    padding: 0;
    line-height: 1;
    /* styles.css 側には .text-center が無いレイアウトなのでここで中央寄せする */
    text-align: center;
}

.drawr_btn a {
    color: #fff;
    text-decoration: none;
}

.drawr_btn:hover {
    background: #1a51aa;
}

.drawr.drawr_close {
    display: none;
    transition: 0.1s;
    cursor: pointer;
}

.drawr {
    display: none;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0px;
    right: 0;
    padding: 30px 0;
    box-sizing: border-box;
    /* ⚠ .drawr_btn（999）より下にすること。
       上げると開いたときにメニューがボタンを覆い、閉じられなくなる。 */
    z-index: 100;
    overflow: auto;
    margin: 0;
    height: 100% !important;
}

#drawr_menu,
#drawr_menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#drawr_menu li {
    width: auto;
    text-align: left;
}

#drawr_menu li a {
    color: #fff;
    display: block;
    padding: 0.75rem;
    font-family: var(--bb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-decoration: none;
}

#drawr_menu li a:hover {
    color: var(--bb-accent);
}

.drawr_box {
    display: flex;
    align-items: flex-start;
    height: 100%;
    margin-top: 1rem;
}

.drawr_box_items {
    margin: 0;
    padding: 1rem;
    min-width: 200px;
    font-family: var(--bb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.drawr_box_items > li {
    padding: 0.3rem;
    border-bottom: 1px solid #999;
}

/* メニュー上部のブランドロゴ（/prs_full_line_dealer/ を踏襲：max-width 200px）*/
.drawr_box_items > li.drawr_logo {
    padding: 1rem;
    border-bottom: 1px solid #999;
}

.drawr_box_items > li.drawr_logo a {
    padding: 0;
}

.drawr_box_items > li.drawr_logo img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}

/* ロゴが無い記事は、キービジュアルを帯状に出してタイトルを重ねる。
   ⚠ KV は横長で縦に長い写真もあるため、aspect-ratio で高さを固定して
      object-fit: cover で切り抜く。そのままだとメニューが縦に伸びる。 */
#drawr_menu li.drawr_logo--visual a {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 4px;
}

#drawr_menu li.drawr_logo--visual img {
    display: block;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* 切り抜きは下端を残す。KV は上部が空や余白のことが多く、
       中央basisだと被写体が切れるため。 */
    object-position: center bottom;
}

/* タイトルは画像の上に重ねる。写真の明暗に負けないよう下から暗いグラデを敷く。 */
#drawr_menu li.drawr_logo--visual .drawr_logo__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 8px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
    /* 長いタイトルは2行までにして、それ以上は省略する */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ロゴもKVも無い記事は、記事タイトルだけを出す（ロゴ行と同じ扱い）。
   ⚠ セレクタは #drawr_menu から書くこと。
      `#drawr_menu li a { padding: .75rem }` が ID セレクタで強く、
      クラスだけの指定では負ける。 */
#drawr_menu li.drawr_logo--text a {
    padding: 0;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

#drawr_menu li.drawr_logo--text a:hover {
    color: var(--bb-accent);
}

/* リスト項目のアイコン。styles.css の定義を踏襲する。
     .icon_left_before  … styles.css:1197  \f053（左向き）  セクションへのリンク
     .icon_up_before    … styles.css:1183  \f077（上向き）  PAGETOP
     .icon_right_after  … styles.css:1267  \f054（右向き）  外部リンク
   ⚠ styles.css は pr_page / brand では読み込まれないため、ここに持つ必要がある。 */
.drawr_box_items .icon_left_before::before,
.drawr_box_items .icon_up_before::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-size: 14px;
    font-weight: 900;
    margin-right: 3px;
}

.drawr_box_items .icon_left_before::before { content: '\f053'; }
.drawr_box_items .icon_up_before::before   { content: '\f077'; }

.drawr_box_items .icon_right_after::after {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-size: 14px;
    font-weight: 900;
    content: '\f054';
    margin-left: 3px;
}

/* SNS シェア（Sassy Social Share）。旧ページ /prs_full_line_dealer/ の実測値に合わせる。
   ⚠ セレクタは #drawr_menu から書くこと。`#drawr_menu li { padding: 0 }` が
      ID セレクタで強く、クラスだけの指定では負けて効かない（実測）。 */
#drawr_menu li.drawr_share {
    padding: 10px 0;
    border-bottom: none;
}

#drawr_menu li.drawr_share a {
    display: inline-block;
    padding: 0;
}

/* ⚠ 以下は assets/css/styles.css:5868 の定義をそのまま持ってきたもの。
   styles.css は pr_page / brand では読み込まれないため、無いと
   左寄せ・SVG色が既定のままになり旧ページと見た目が変わる（実測）。
   変更するときは styles.css 側と両方合わせること。 */
.heateor_sss_sharing_ul {
    display: grid;
    place-content: center;
    place-items: center;
    grid-auto-flow: column;
    padding: 1rem 0;
}

.heateor_sss_sharing_ul a span svg {
    background-color: #053769;
}

/* アンカー着地位置：固定ヘッダー（.sc-topbar 57px）に見出しが隠れないようにする */
.pr-block {
    scroll-margin-top: 72px;
}