@charset "utf-8";

    /* .item--align-stretch {align-items: stretch;}  base.css 190 */

    .header-sup-navi {
        margin-block: 0;
    }

    .header-sup-navi li {
        font-size: unset;
        line-height: 1.5;
    }


    .nav-has-submenu .nav-submenu-wrap {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        height: fit-content;
        padding-block: 3rem;
        box-sizing: content-box;
        margin-top: 0;
        border-top:8px solid rgba(42, 68, 94, 1);
        visibility: hidden;
        opacity: 0;
        transition: all 0.1s;
        background-color: #C0D5E0;
    }

    .nav-has-submenu:hover::after {
        content: "";
        position: absolute;
        transform: translate(80px, 0);
        background-color: transparent;
        width: px;
        height: 8px;
        border-bottom: 8px solid #C0D5E0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }

    .nav-has-submenu:hover .nav-submenu-wrap {
        visibility: visible;
        opacity: 1;
    }
    /* .nav-has-submenu:hover .nav-submenu-wrap::before {
        content: "";
        position: absolute;
        transform: translateY(-8px);
        background-color: transparent;
        width: 100%;
        height: 8px;
    } */
    .nav-submenu-ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        column-gap: 5vw;
        max-width: 1024px;
        margin-inline: auto;
        padding-inline: 10px;
    }
    .nav-submenu-li {
        position: relative;
        display: grid;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        list-style-type: none;
        border: 1px solid #fff;
        transition: all 0.2s;
    }

    .nav-submenu-li:hover {
        box-shadow: 2px 2px 4px #999;
        /* background-color: rgba(0, 0, 0, 0.05); */
        filter: brightness(1.1);
    }
     .nav-submenu-li img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
     }

    .header-sup-navi .nav-submenu-link {
        display: grid;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem 2rem !important;
        text-decoration: none;
    }
     .nav-submenu-title {
        color: #333;
        font-size: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
        font-weight: 600;
        text-align: center;
     }

     .nav-submenu-text {
        padding: 0.2em 1em;
        border-radius: 5px;
        background-color: #fff;
        font-size: clamp(0.8rem, 0.583rem + 0.87vw, 1rem);
     }

     .nav-submenu-img {
        width: 90%;
        margin-inline: auto;
        margin-bottom: 1rem;
     }

    .nav-submenu-li .nav-submenu-text {
        position: absolute;
        top: -1.7rem;
        left: -1.5rem;
    }

    .nav-submenu-btn.el_btn {
        width: fit-content;
        padding: 10px max(24px, 13%);
        margin-inline: auto;
        font-size: 1rem;
        letter-spacing: 0.05em;
        color: #fff;
        background-color: #35AFD6;
        text-decoration: none;
        transition: all 0.2s;
    }
    .nav-submenu-li:hover .nav-submenu-btn.el_btn {
        filter: brightness(1.1);
    }


    @media only screen and (max-width: 960px) {
        .header-sup-navi {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-left: none;
        }

        /* 打ち消し */
        .header-sup-navi .header-sup-navi__link  {
            width: 85%;
            padding: .3rem 1rem;
            font-size: .875rem;
        }

        .nav-has-submenu:hover::after{
            content: none;
        }

        .nav-submenu-li .nav-submenu-text {
            left: -0.5rem;
        }

    }


    @media only screen and (max-width: 768px) {

        .nav-submenu-img {
            width: 100%;
        }
        .nav-submenu-btn.el_btn {
            font-size: 0.8rem;
        }
    }

    @media only screen and (max-width: 640px) {

        .header-sup-navi li span {
            font-size: 0.7em;
        }
    }