/*
 * 新宿間税会 追加スタイル（styles.min.css / styles.css は変更しない）
 * ヘッダーのナビの「入会案内」ボタン（li.kz-nav-join）
 * 色はサイトの緑（#0F4D2E / #1B6B42 / #0A3A22）だけを使う。
 */

/* PC：ボタンを1項目増やしても1行に収まるよう、項目の間隔を少し詰める */
@media (min-width: 769px) {
    .main-nav .nav-list > .nav-item {
        margin: 0 3px;
    }
    .main-nav .nav-list > .nav-item > a {
        padding-left: 12px;
        padding-right: 12px;
    }
    .main-nav .nav-list > .nav-item > a.dropdown-toggle {
        padding-right: 18px !important;
    }
    .main-nav .nav-list > .kz-nav-join {
        margin-left: 8px;
    }
    .main-nav .nav-list > .kz-nav-join > a {
        padding: 8px 16px;
        white-space: nowrap;
    }
}

/* タブレット幅：文字を少し小さくして折り返しを減らす */
@media (min-width: 769px) and (max-width: 1199px) {
    .main-nav .nav-list > .nav-item > a {
        font-size: 0.875rem;
        padding-left: 8px;
        padding-right: 8px;
    }
    .main-nav .nav-list > .nav-item > a.dropdown-toggle {
        padding-right: 14px !important;
    }
    .main-nav .nav-list > .nav-item {
        margin: 0 1px;
    }
    .main-nav .nav-list > .kz-nav-join {
        margin-left: 6px;
    }
    .main-nav .nav-list > .kz-nav-join > a {
        padding: 7px 12px;
    }
}

/* 狭いタブレット幅：項目名が2行に折り返さないよう、さらに文字を小さくする */
@media (min-width: 769px) and (max-width: 959px) {
    .main-nav .nav-list > .nav-item > a {
        font-size: 0.8rem;
        padding-left: 6px;
        padding-right: 6px;
        white-space: nowrap;
    }
    .main-nav .nav-list > .nav-item > a.dropdown-toggle {
        padding-right: 12px !important;
    }
    .main-nav .nav-list > .kz-nav-join > a {
        padding: 6px 10px;
    }
}

.main-nav .nav-list > .kz-nav-join > a {
    background-color: #0F4D2E;
    color: #FFFFFF;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.5;
}

.main-nav .nav-list > .kz-nav-join > a:hover,
.main-nav .nav-list > .kz-nav-join > a:focus-visible {
    background-color: #1B6B42;
    color: #FFFFFF;
}

.main-nav .nav-list > .kz-nav-join > a:focus-visible {
    outline: 2px solid #0A3A22;
    outline-offset: 2px;
}

.main-nav .nav-list > .kz-nav-join > a[aria-current="page"] {
    background-color: #0A3A22;
}

.main-nav .nav-list > .kz-nav-join > a::after {
    display: none;
}

/* スマートフォン：開閉メニューの中で、横幅いっぱいのボタンにする */
@media (max-width: 768px) {
    .main-nav .nav-list > .kz-nav-join {
        margin: 12px 20px 8px;
    }
    .main-nav .nav-list > .kz-nav-join > a {
        padding: 12px 16px;
        text-align: center;
    }
}