/* =========================================================================
   SIS for ドコモ光 トップバー(#js-navBott) 現在地表示＋赤枠
   ※スクロールで全タブが白背景になる #js-navBott.change の土台は既存(style_pc.css)にある。
     このファイルは head で style_pc/style_sp より後に読み込むこと（現在地ルールが
     詳細度同点時にソース順で勝てるようにするため）。
   ========================================================================= */

/* 各タブに赤枠
   ※.navBott / #js-navBott は SIS(.page_sis)・SIS光(.page_hikari) のヘッダーとも共通のため、
     ドコモ光のヘッダー(.page_docomo)配下に限定する。限定しないと他ブランドのトップバーにも赤枠が出る。 */
.page_docomo .navBott > li > a { border: 2px solid #cf0f31; box-sizing: border-box; }
.page_docomo .navBott > li.app > a { border-color: #f89829; }

/* 通常時：赤枠の並びの中で現在地だけ白背景＋赤文字（詳細度 1,1,2） */
#js-navBott > li.is-current > a {
    background-color: #fff;
    color: #cf0f31;
    font-weight: 700;
}
/* スクロール(.change)時：他タブが白背景＋赤文字になるので、現在地だけ赤背景＋白文字に反転（詳細度 1,2,2） */
#js-navBott.change > li.is-current > a {
    background-color: #cf0f31;
    color: #fff;
    font-weight: 700;
}

/* SP(ハンバーガー)側の現在地：navBottが非表示になる1000px以下は headerLsit を反転 */
@media screen and (max-width: 1000px) {
    .c-mainList.is-current {
        background-color: #cf0f31;
        color: #fff;
    }
    .c-mainList.is-current::before {
        background-image: url(/assets/docomoHikari/img/Icon-headerListArrow-f.svg);
    }
}

/* --- よくあるご質問 ホバー用ドロップダウン(PC) --- */
.navBott > li { position: relative; }
.faq-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #cf0f31;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    z-index: 1001;
}
.navBott > li:hover > .faq-dropdown { display: block; }
.faq-dropdown > li { border-bottom: 1px solid #f0d6dc; }
.faq-dropdown > li:last-child { border-bottom: none; }
.faq-dropdown > li > a {
    display: block;
    padding: 12px 18px;
    background: #fff;
    color: #cf0f31;
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
}
.faq-dropdown > li > a:hover {
    background: #cf0f31;
    color: #fff;
}
/* 親タブ「よくあるご質問」はホバーで子を開くだけでリンクを持たない(hrefなし)。I字カーソルにならないよう default を明示 */
#js-navBott > li > a:not([href]) { cursor: default; }

/* --- SP(ハンバーガー)内「よくあるご質問」アコーディオンの調整（器は既存CSS、ここは差分のみ） --- */
@media screen and (max-width: 1000px) {
    /* 既定の height は項目数の多い別リスト向けの決め打ちで、2件だと下に大きな空白ができる。中身2件分に合わせて上書き（transitionを効かせるため固定px、3クラスで確実に勝たせる） */
    .js-accoContent.js-faqAccoContent.open { height: 90px; }
    /* 開いている間の矢印反転（docomo側に .rotate-negative が無いため transform だけ上書き） */
    .c-mainList--accordion.open::before { transform: rotate(-90deg); }
    /* 親はリンクではない <span> なので押せることが分かるようカーソルを合わせる */
    .c-mainList--accordion > span { cursor: pointer; }
}