/* ============================================================
   RORZE Sustainability — Redesign Stylesheet
   - ロゴガイドライン（2019/06）準拠カラー
   - rorzerobotech.com の動き・トーンを参照
   - body.redesigned スコープで既存スタイルを上書き
   ============================================================ */



:root {
    /* ロゴガイドライン公式色 */
    --rorze-red:        #A71E41;   /* C40 M100 Y70 K0  / R167 G30 B65 */
    --rorze-red-dark:   #7A1530;
    --rorze-red-deep:   #941132;
    --rorze-black:      #000000;
    --rorze-white:      #FFFFFF;

    /* 補助グレースケール */
    --ink-900: #1d1d1d;
    --ink-800: #333333;
    --ink-600: #595959;
    --ink-400: #9d9d9d;
    --ink-300: #cfcfcf;
    --ink-200: #e6e6e6;
    --ink-100: #f4f4f4;

    /* タイポ */
    --font-sans-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    --font-sans-en: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

    /* モーション */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.86, 0, 0.07, 1);
    --t-fast:       0.2s;
    --t-mid:        0.5s;
    --t-slow:       0.7s;

    /* レイアウト */
    --container:    1120px;
    --gutter:       24px;
}

/* ============================================================
   ベース：body.redesigned 配下に限ってリセット・上書き
   既存WordPress生成スタイルを残しつつ、視覚層だけ差し替える方針
   ============================================================ */

body.redesigned {
    /* background は theme.css に任せる。
       不透明な white を指定すると z-index:-1 の section :before が body 背景の後ろに沈み、
       PC幅でサステナ/環境/社会/ガバナンスの背景画像が見えなくなる */
    color: var(--ink-900);
    font-family: var(--font-sans-ja);
    font-feature-settings: "palt" 1;
    line-height: 1.75;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.redesigned[lang="en"],
body.redesigned[dir="ltr"][lang="en"] {
    font-family: var(--font-sans-en);
}

/* リンク全般：滑らかな色変化 */
body.redesigned a {
    color: var(--ink-900);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out),
                opacity var(--t-fast) var(--ease-out);
}

body.redesigned a:hover {
    color: var(--rorze-red);
}

/* ============================================================
   ヘッダー / ナビゲーション
   ============================================================ */

body.redesigned .header,
body.redesigned header.header,
body.redesigned #header {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    /* ナビ（左サイド固定）と本文の境界に RORZE RED 50%透明の縦ライン */
    border-right: 1px solid rgba(167, 30, 65, 0.5);
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}

body.redesigned .main-navigation a,
body.redesigned nav a {
    position: relative;
    padding: 0.5em 0.25em;
    color: var(--ink-900) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ナビメニューの「+」マーカー（theme.css 本来の仕様を踏襲、色のみ白→RORZE REDに変更）
   theme.css 側で a::before（横9px×1px）, a::after（1px×9px）を組み合わせて「+」を構成し、
   ホバーで180deg回転させる。色だけ赤化する。 */
body.redesigned .nav--header .nav__item a::before,
body.redesigned .nav--header .nav__item a::after {
    background: var(--rorze-red) !important;
}

/* 4項目目と5項目目（コーポレートサイト）の間の区切り線
   theme.css の :last-child:before で実装されている横ラインを白→RORZE RED半透明に */
body.redesigned .nav--header .nav__item:last-child::before {
    background: rgba(167, 30, 65, 0.5) !important;
}

/* ナビメニューの下線アニメ（ホバーで赤線が左→右へ伸びる）
   - 各メニューのテキスト幅に合わせて伸びる（inline-block + content-box）
   - 線の太さ 1px
   - theme.css が a::before/::after を「+」マーカーで使い切っているため、
     疑似要素ではなく background-image + background-size の transition で実装 */
body.redesigned .nav--header .nav__item a {
    display: inline-block;                  /* 幅をテキストにフィットさせる */
    background-image: linear-gradient(to right, var(--rorze-red), var(--rorze-red));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    background-origin: content-box;         /* padding を除外、テキスト領域のみ */
    transition: background-size var(--t-mid) var(--ease-in-out),
                color var(--t-fast) var(--ease-out),
                opacity var(--t-fast) var(--ease-out);
}

body.redesigned .nav--header .nav__item a:hover {
    background-size: 100% 1px;
}

/* ホバー時の文字色 */
body.redesigned .nav--header .nav__item a:hover,
body.redesigned .main-navigation a:hover,
body.redesigned nav a:hover {
    color: var(--rorze-red) !important;
}

/* ========================================================================
   ナビゲーション各項目をテーマカラーに（PC・スマホ共通）
   - スマホ展開時のハンバーガーメニュー背景は theme.css で赤になるので白に上書き
   - 各リンクの「文字色 / +マーカー / 下線アニメ色」を該当ページカラーに統一
     1. RORZEのCSR → 黒    #000
     2. 環境への取り組み → 濃紺 #033260
     3. 社会への取り組み → 緑   #407907
     4. コーポレート・ガバナンス → グレー #4a4a4a
     5. コーポレートサイト → 既定色（ink-900）のまま
   ======================================================================== */

/* ハンバーガーメニュー展開時の赤背景 → 白に */
body.redesigned .header__nav {
    background: var(--rorze-white) !important;
}

/* 1. RORZEのCSR → 黒 */
body.redesigned .nav--header .nav__item:nth-child(1) a {
    color: #000 !important;
    background-image: linear-gradient(to right, #000, #000) !important;
}
body.redesigned .nav--header .nav__item:nth-child(1) a::before,
body.redesigned .nav--header .nav__item:nth-child(1) a::after {
    background: #000 !important;
}
body.redesigned .nav--header .nav__item:nth-child(1) a:hover {
    color: #000 !important;
}

/* 2. 環境への取り組み → 濃紺 */
body.redesigned .nav--header .nav__item:nth-child(2) a {
    color: #033260 !important;
    background-image: linear-gradient(to right, #033260, #033260) !important;
}
body.redesigned .nav--header .nav__item:nth-child(2) a::before,
body.redesigned .nav--header .nav__item:nth-child(2) a::after {
    background: #033260 !important;
}
body.redesigned .nav--header .nav__item:nth-child(2) a:hover {
    color: #033260 !important;
}

/* 3. 社会への取り組み → 緑 */
body.redesigned .nav--header .nav__item:nth-child(3) a {
    color: #407907 !important;
    background-image: linear-gradient(to right, #407907, #407907) !important;
}
body.redesigned .nav--header .nav__item:nth-child(3) a::before,
body.redesigned .nav--header .nav__item:nth-child(3) a::after {
    background: #407907 !important;
}
body.redesigned .nav--header .nav__item:nth-child(3) a:hover {
    color: #407907 !important;
}

/* 4. コーポレート・ガバナンス → グレー */
body.redesigned .nav--header .nav__item:nth-child(4) a {
    color: #4a4a4a !important;
    background-image: linear-gradient(to right, #4a4a4a, #4a4a4a) !important;
}
body.redesigned .nav--header .nav__item:nth-child(4) a::before,
body.redesigned .nav--header .nav__item:nth-child(4) a::after {
    background: #4a4a4a !important;
}
body.redesigned .nav--header .nav__item:nth-child(4) a:hover {
    color: #4a4a4a !important;
}

/* ヘッダー下部：言語スイッチャー（JP / EN） */
body.redesigned .header__language li a {
    color: var(--ink-600) !important;
}
body.redesigned .header__language li.current-lang a {
    color: var(--rorze-red) !important;
    font-weight: 700;
}

/* ヘッダー下部のコンテナ：JP/EN（ul.header__language）と時計（div.header__time）を
   grid layout で「同じ仕組み」で中央配置する。
   - 子要素を 1 カラムに並べる
   - justify-items: center で各子要素を grid トラック内の水平中央に
   - これにより JP/EN と時計の中央線が確実に一致する（block の margin auto と
     flex の justify-content では別計算で微妙にズレることがあるため統一） */
body.redesigned .header__foot {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    position: relative !important;
}

/* ヘッダー下部：時計
   - theme.css は白文字＋白枠だが、リデザインの白背景では見えないので赤系に変更
   - 親 .header__foot は grid + justify-items: center。
     時計は grid item として自動的に水平中央配置される（margin/width 指定不要）
   - JP/EN との視覚的なズレ（数px左寄り）が CSS の計算上は対称なのに残るため、
     transform: translateX(7px) で視覚補正（レイアウトには影響しない）
   - 中身（time--top / time--bottom）もテキスト中央寄せ */
body.redesigned .header__time {
    padding: 6px 14px;
    transform: translateX(7px);
    color: var(--rorze-red) !important;
    border: 1px solid rgba(167, 30, 65, 0.5) !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ============================================================
   セクション見出し
   （見出し左の赤いバーはユーザー要望で削除済み。padding-left も除去）
   ============================================================ */

body.redesigned h1,
body.redesigned h2,
body.redesigned h3,
body.redesigned h4 {
    color: var(--ink-900);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

body.redesigned h1 {
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 0.8em;
}

body.redesigned .section h2,
body.redesigned section h2,
body.redesigned h2 {
    font-size: clamp(22px, 2.4vw, 32px);
    position: relative;
    margin-top: 2.4em;
    margin-bottom: 1.2em;
}

body.redesigned h3 {
    font-size: clamp(18px, 1.8vw, 22px);
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    color: var(--ink-800);
}

/* ============================================================
   本文・リスト
   ============================================================ */

body.redesigned p {
    margin: 0 0 1.25em;
    color: var(--ink-800);
}

/* Top Message セクション：海の青背景の上に載るため、本文を白に戻す
   theme.css は本来 .section--message { color: #fff } だが、
   body.redesigned p { color: ink-800 } の方が specific で打ち消されてしまうので明示的に上書き */
body.redesigned .section--message,
body.redesigned .section--message p,
body.redesigned .section--message h1,
body.redesigned .section--message h2,
body.redesigned .section--message h3,
body.redesigned .section--message h4,
body.redesigned .section--message li,
body.redesigned .section--message .title__main,
body.redesigned .section--message .title__sub {
    color: var(--rorze-white) !important;
}

body.redesigned ul,
body.redesigned ol {
    margin: 0 0 1.5em;
    padding-left: 1.4em;
}

body.redesigned li {
    margin-bottom: 0.5em;
    color: var(--ink-800);
}

body.redesigned strong,
body.redesigned b {
    color: var(--rorze-red-deep);
}

body.redesigned blockquote {
    border-left: 4px solid var(--rorze-red);
    padding: 0.8em 1.2em;
    margin: 1.5em 0;
    background: var(--ink-100);
    color: var(--ink-800);
}

/* PDFリンクのアイコン強調 */
body.redesigned a[href$=".pdf"] {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--rorze-red);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

body.redesigned a[href$=".pdf"]::after {
    content: "↓";
    display: inline-block;
    font-weight: 700;
    transition: transform var(--t-fast) var(--ease-out);
}

body.redesigned a[href$=".pdf"]:hover::after {
    transform: translateY(2px);
}

/* ============================================================
   カード／一覧アイテム（環境ページのデータ群を想定）
   ============================================================ */

body.redesigned .card,
body.redesigned article > section,
body.redesigned figure {
    transition: transform var(--t-mid) var(--ease-out),
                box-shadow var(--t-mid) var(--ease-out);
}

body.redesigned figure {
    margin: 1.5em 0;
}

body.redesigned figure:hover {
    transform: translateY(-2px);
}

body.redesigned img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   ボタン（仮想）
   既存のCTA要素にクラスがあれば適用、なくとも .btn 等の汎用に効く
   ============================================================ */

body.redesigned .btn,
body.redesigned a.button,
body.redesigned button {
    display: inline-flex;
    align-items: center;
    justify-content: center;       /* テキストを横中央寄せ */
    text-align: center;            /* inline-flex でない場合のフォールバック */
    gap: 0.5em;
    padding: 0.8em 1.6em;
    background: var(--rorze-red);
    color: var(--rorze-white) !important;
    border: none;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

body.redesigned .btn:hover,
body.redesigned a.button:hover,
body.redesigned button:hover {
    background: var(--rorze-red-deep);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(167, 30, 65, 0.25);
}

/* ボタンを各ページのテーマカラーに合わせる
   theme.css 既定のページ別カラー：
   - .btn--main : 黒 #000      （CSR）
   - .btn--env  : 濃紺 #033260  （Environment）
   - .btn--soc  : 緑 #407907    （Social）
   - .btn--gov  : グレー #4a4a4a（Corporate Governance） */
body.redesigned .btn.btn--main {
    background: #000;
}
body.redesigned .btn.btn--main:hover {
    background: #333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

body.redesigned .btn.btn--env {
    background: #033260;
}
body.redesigned .btn.btn--env:hover {
    background: #022547;
    box-shadow: 0 6px 18px rgba(3, 50, 96, 0.25);
}

body.redesigned .btn.btn--soc {
    background: #407907;
}
body.redesigned .btn.btn--soc:hover {
    background: #2f5905;
    box-shadow: 0 6px 18px rgba(64, 121, 7, 0.25);
}

body.redesigned .btn.btn--gov {
    background: #4a4a4a;
}
body.redesigned .btn.btn--gov:hover {
    background: #2e2e2e;
    box-shadow: 0 6px 18px rgba(74, 74, 74, 0.25);
}

/* ============================================================
   フッター
   - 上部（footer__head）：白背景。3つのカラーボタン（環境/社会/ガバナンス）が並ぶ
   - 下部（footer__body）：RORZE RED 背景。4項目ナビ + コーポレートサイト + SNS + ©
   ============================================================ */

body.redesigned .footer,
body.redesigned footer,
body.redesigned #footer {
    background: transparent !important;   /* 全体の赤背景指定を解除し、子要素で分担 */
    color: inherit !important;
    padding: 0;
    margin-top: 4em;
}

/* 上部：白背景 */
body.redesigned .footer__head {
    background: var(--rorze-white);
    padding: 3em var(--gutter);
}

/* 下部：RORZE RED 背景＋白文字
   4項目ナビを非表示にしたぶん、上下のpaddingを詰めてコンパクトに */
body.redesigned .footer__body {
    background: var(--rorze-red);
    color: var(--rorze-white);
    padding: 2em var(--gutter);
}

body.redesigned .footer__body,
body.redesigned .footer__body a,
body.redesigned .footer__body .footer__copyright {
    color: var(--rorze-white) !important;
}

/* 下部ナビ（4項目）— ユーザー要望により非表示。HTMLは残置（display:none を外せば復活）
   theme.css のスマホ用ルール `html.valikko-active .footer__nav .nav--footer { display: block }`
   が specificity で勝ってしまうため、!important で打ち消す */
body.redesigned .nav--footer {
    display: none !important;
}

body.redesigned .nav--footer .nav__item {
    margin: 0;
    padding: 0;
}

/* 下部ナビ：通常は白文字（透明枠で予約）、ホバーで色反転（白背景＋赤文字＋白枠）
   赤背景の上で見えなくならないよう、ホバー時の文字色を !important で固定 */
body.redesigned .nav--footer .nav__item a {
    position: relative;
    display: inline-block;
    padding: 0.5em 1.2em;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--rorze-white) !important;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    opacity: 1;
}

body.redesigned .nav--footer .nav__item a:hover {
    background: var(--rorze-white);
    color: var(--rorze-red) !important;
    border-color: var(--rorze-white);
    transform: translateY(-2px);
    opacity: 1;
}

/* コーポレートサイトリンクも同じく反転スタイル */
body.redesigned .footer__corporate {
    position: relative;
    display: inline-block;
    padding: 0.5em 1.2em;
    border: 1px solid var(--rorze-white);
    border-radius: 2px;
    color: var(--rorze-white) !important;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}

body.redesigned .footer__corporate:hover {
    background: var(--rorze-white);
    color: var(--rorze-red) !important;
    transform: translateY(-2px);
}

/* SNSアイコンを白100%に
   元のSVGはグレー or 黒なので、filter で白化（brightness(0)で完全黒 → invert(1)で反転 → 白） */
body.redesigned .footer__sns {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

/* theme.css の `.footer__sns .sns__item { margin-left: 15px }` を打ち消し。
   gap で隙間を管理する設計に変えたため、各アイテムの margin は不要 */
body.redesigned .footer__sns .sns__item {
    margin-left: 0;
}

body.redesigned .footer__sns .sns__item img {
    filter: brightness(0) invert(1);
    transition: transform var(--t-fast) var(--ease-out),
                opacity var(--t-fast) var(--ease-out);
    opacity: 0.95;
}

body.redesigned .footer__sns .sns__item a:hover img {
    transform: translateY(-2px) scale(1.08);
    opacity: 1;
}

/* 著作権表記 */
body.redesigned .footer__copyright {
    text-align: center;
    opacity: 0.75;
    margin-top: 1em;
    font-size: 0.85em;
}

/* ============================================================
   リビールアニメーション（reveal.js から data-reveal 属性で発火）
   ============================================================ */

body.redesigned [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--t-slow) var(--ease-in-out),
                transform var(--t-slow) var(--ease-in-out);
}

body.redesigned [data-reveal].is-in-view {
    opacity: 1;
    transform: translateY(0);
}

body.redesigned [data-reveal-delay="1"].is-in-view { transition-delay: 0.1s; }
body.redesigned [data-reveal-delay="2"].is-in-view { transition-delay: 0.2s; }
body.redesigned [data-reveal-delay="3"].is-in-view { transition-delay: 0.3s; }
body.redesigned [data-reveal-delay="4"].is-in-view { transition-delay: 0.4s; }

/* 帯（obi）アニメーション：見出しの左から赤い帯が走る */
body.redesigned [data-reveal-obi] {
    position: relative;
    overflow: hidden;
}

body.redesigned [data-reveal-obi]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rorze-red);
    transform: translateX(-101%);
    z-index: 2;
    pointer-events: none;
}

body.redesigned [data-reveal-obi].is-in-view::before {
    animation: obi 1s var(--ease-in-out) forwards;
}

@keyframes obi {
    0%   { transform: translateX(-101%); }
    50%  { transform: translateX(0%); }
    100% { transform: translateX(101%); }
}

/* ============================================================
   レスポンシブ最低限
   ============================================================ */

@media (max-width: 768px) {
    body.redesigned h1 { font-size: 26px; }
    body.redesigned h2 { font-size: 20px; }
    body.redesigned h3 { font-size: 17px; }

    body.redesigned p,
    body.redesigned li {
        line-height: 1.7;
    }

    /* Top Message セクション（スマホ表示時のみ）：
       背景写真の人物の顔とテキストが被るため、本文を下方向にオフセットする。
       PC幅では theme.css のレイアウトに任せる */
    body.redesigned .page--frontpage .section--message .section__body {
        padding-top: 25vh;
    }
}

/* ============================================================
   prefers-reduced-motion 配慮（アクセシビリティ）
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body.redesigned *,
    body.redesigned *::before,
    body.redesigned *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body.redesigned [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* セクション h2::before の左赤バーは sustainability 等の background と干渉しないように
   page--frontpage の section--xxx 直下 h2 では非表示にする（背景画像と被るため） */
body.redesigned .page--frontpage .section--sustainability h2::before,
body.redesigned .page--frontpage .section--message h2::before,
body.redesigned .page--frontpage .section--environment h2::before,
body.redesigned .page--frontpage .section--social h2::before,
body.redesigned .page--frontpage .section--governance h2::before {
    display: none;
}

/* ============================================================
   サイドメニュー（左カラム header）を上詰めに（2026-06-03）
   原因：theme.css の .header__nav が flex-grow:1 + justify-content:space-between で
   サイドバーの空き高さいっぱいに広がり、中身を上下に散らしていた
   （→ ロゴとメニューの間に大きな余白＋わずかなはみ出しで内部スクロールバー）。
   対策：広がり/散らしを止めて上詰めにし、各余白も縮めて1画面に収める。

   ※ PC幅（min-width:591px）限定。スマホ（max-width:590px）はテーマ既定の
     ハンバーガー drawer なので、この調整を効かせるとロゴが切れる/重なるため除外する。
   ============================================================ */
@media screen and (min-width: 591px) {
    body.redesigned .header__nav {
        flex-grow: 0 !important;                 /* 余白いっぱいに広がらない */
        justify-content: flex-start !important;  /* 上詰め（space-between を解除） */
        margin-top: -35px !important;            /* メニュー以下の塊を上へ（基準位置） */
    }
    body.redesigned .header            { padding-top: 16px !important; }   /* theme: 40px（ロゴ上の余白） */
    body.redesigned .nav--header       {
        padding-top: 8px !important;                   /* theme: 74px（ロゴ↔メニュー間） */
        transform: translate(15px, -20px) !important;  /* メニュー(ul)だけ右15px・上20px。JP/EN・時計は動かない */
    }
    body.redesigned .nav--header .nav__item { margin-top: 10px !important; }    /* theme: 30px（項目間隔） */
    body.redesigned .nav--header .nav__item:last-child {
        margin-top: 14px !important;   /* theme: 33px */
        padding-top: 12px !important;  /* theme: 28px */
    }
    body.redesigned .header__foot      { margin-top: 59px !important; }    /* JP/EN・時計ブロック（さらに15px下げ） */
}

/* ============================================================
   スマホ（ハンバーガー drawer / max-width:590px）：
   メニューブロックを中央寄せして JP/EN（既に中央）と中心を揃える。
   動かすのはメニュー(.nav--header)のみ。JP/EN・時計(.header__foot)は不変。
   ============================================================ */
@media screen and (max-width: 590px) {
    body.redesigned .nav--header {
        align-items: center !important;   /* flex項目（li）を中央へ */
        text-align: center !important;    /* li/aが全幅でもテキストを中央化 */
    }
    body.redesigned .nav--header .nav__item,
    body.redesigned .nav--header .nav__item a {
        text-align: center !important;
    }
    /* 区切り線（last-child の ::before, theme は left:0 固定）も中央へ */
    body.redesigned .nav--header .nav__item:last-child::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}