/* =========================================================================
   上のメニュー（7項目）と、スマホのメニュー
   2026-09-18 新設。styles.css / css/contact-energy.css は変更せず、
   このファイルを後ろから読み込んで上書きする。
   スマホは「1行に1項目・左にアイコン・右に山かっこ」の形（オーナー選定 案5）。
   7項目でも1画面に収まる高さ（約410px）にしている。
   ========================================================================= */

/* --- パソコン: 7項目でも1行に収まるよう間隔を詰める --- */
@media (max-width: 1280px) {
    .nav-menu {
        gap: 26px;
    }
}

@media (max-width: 1100px) {
    .nav-menu {
        gap: 16px;
    }

    .nav-menu li a {
        font-size: 13px;
    }

    .nav-menu li a span {
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .nav-menu {
        gap: 11px;
    }

    .nav-menu li a {
        font-size: 12px;
    }

    .nav-menu li a span {
        font-size: 10px;
    }
}

/* --- 今見ているページの項目は下線を出しておく --- */
.nav-menu li a[aria-current="page"]::after {
    width: 100%;
}

/* --- スマホ: 1行に1項目（左にアイコン・右に山かっこ） --- */
@media (max-width: 768px) {
    /* 上の帯はロゴとメニューボタンを左右に並べる。
       お問い合わせページだけ縦に積まれていた（古い指定が残っていた）ので、ここでそろえる */
    .header-container {
        flex-direction: row;
        align-items: center;
    }

    /* 開いたメニューが本文の下に隠れないようにする。
       お問い合わせページだけ上の帯が「固定」ではないため、重なり順を作り直す */
    .mobile-menu {
        z-index: 1001;
    }

    .page-contact-energy .site-header {
        position: relative;
        z-index: 1000;
    }

    .mobile-nav-menu {
        list-style: none;
        display: block;
        padding: 10px 16px 18px;
        margin: 0;
    }

    .mobile-nav-menu li {
        margin-bottom: 0;
    }

    .mobile-nav-menu li a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 54px; /* 指で押せる高さ */
        padding: 6px 22px 6px 4px;
        border: 0;
        border-bottom: 1px solid #eeeeee;
        border-radius: 0;
        color: #1d1d1d !important;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .05em;
        line-height: 1.2;
        box-sizing: border-box;
        position: relative;
    }

    /* 英語と日本語の間の改行は、横並びでは使わない */
    .mobile-nav-menu li a br {
        display: none;
    }

    .mobile-nav-menu li a span {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        opacity: 1;
    }

    /* 左のアイコン（項目ごとに絵を変える） */
    .mobile-nav-menu li a::before {
        content: '';
        flex: none;
        width: 22px;
        height: 22px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    /* 右の山かっこ */
    .mobile-nav-menu li a::after {
        content: '';
        position: absolute;
        right: 6px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid #c3ccd4;
        border-bottom: 2px solid #c3ccd4;
        transform: translateY(-50%) rotate(-45deg);
    }

    .mobile-nav-menu li:nth-child(1) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-4h6v4M9 11h1M14 11h1M9 14h1M14 14h1'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(2) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 20V9M12 20V6M17 20v-7M4 9h6M9 6h6M14 13h6'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(3) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h18M5 13V8l7-5 7 5v5M9 21v-8M15 21v-8M12 21v-4'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(4) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3zM4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(5) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5h10l6 6v8H4zM14 5v6h6M8 15h8M8 11h3'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(6) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM7 9h6M7 12h10M7 15h10'/%3E%3C/svg%3E"); }
    .mobile-nav-menu li:nth-child(7) a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }

    /* 今見ているページの項目は、うすい色を敷く */
    .mobile-nav-menu li a[aria-current="page"] {
        background: rgba(0, 123, 255, .07);
        border-radius: 8px;
        padding-left: 10px;
    }

    /* いちばん下の「お問い合わせ」はボタンにする */
    .mobile-nav-menu li:last-child {
        margin-top: 14px;
    }

    .mobile-nav-menu li:last-child a {
        justify-content: center;
        min-height: 54px;
        padding: 6px 16px;
        border: 0;
        border-radius: 27px;
        background: #007BFF;
        color: #ffffff !important;
    }

    .mobile-nav-menu li:last-child a span {
        font-size: 16px;
    }

    .mobile-nav-menu li:last-child a::after {
        display: none;
    }

    .mobile-nav-menu li:last-child a[aria-current="page"] {
        background: #0069d9;
        padding-left: 16px;
    }
}

/* --- とくに狭い画面では文字だけ少し小さく --- */
@media (max-width: 360px) {
    .mobile-nav-menu {
        padding: 8px 14px 16px;
    }

    .mobile-nav-menu li a {
        gap: 10px;
        font-size: 10px;
    }

    .mobile-nav-menu li a span {
        font-size: 14px;
    }
}