.menu-trigger summary {
    letter-spacing: 3px;
    margin-left:auto;
}

.menu-trigger nav {
   background:var(--color-lightgray);
}
.menu-trigger nav > ul {
    margin-inline:auto;
}
.menu-trigger nav > ul > li {
    flex-grow: 1;
}
.menu-trigger nav > ul > li:nth-of-type(-n+4){
    display:none;
}
.menu-trigger nav > ul > li > a {
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:1em;
    font-weight:500;
    border-left:solid 1px var(--color-gray);
    padding: calc(var(--padding) / 2);
    width:100%;
    min-height:52px;
}
.menu-trigger nav > ul > li > a:hover {
    color:var(--color-pink);
}
.menu-trigger nav > ul > li.plan > a::after {
    content:'▼';
    width:18px;
    aspect-ratio: 1;
    background:var(--color-gray);
    color:var(--color-black);
    font-size:8px;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius:18px;
    margin-left:5px;
    padding-left:1px;
    padding-top:1px;
}
.menu-trigger nav > ul > li:nth-of-type(5) > a img {
    width:1.8em;
}
.menu-trigger nav > ul > li:nth-of-type(5) > a img:last-of-type {
    display:none;
}
.menu-trigger nav > ul > li:nth-of-type(5) > a:hover img:first-of-type {
    display:none;
}
.menu-trigger nav > ul > li:nth-of-type(5) > a:hover img:last-of-type {
    display:inline-block;
}
.menu-trigger nav > ul > li:last-of-type > a {
    background:#c00;
    color:var(--color-white);
    gap:5px;
}
.menu-trigger nav > ul > li:last-of-type > a:hover {
    background:#a00000;
}
.menu-trigger nav > ul > li:last-of-type > a img {
    width:1.1em;
}

.menu-trigger nav > ul > li ul {
    display:none !important;
}

.sub-menu {
    position:absolute;
    top:-100px;
    left:0;
    background:var(--color-white);
    width:100%;
    box-shadow:var(--shadow) inset, var(--shadow);
    transition: top var(--transition);
}
.sub-menu ul {
    margin-inline:auto;
}
.sub-menu li {
    padding-block:20px 10px;
}
.sub-menu li a {
    display:block;
    height:100%;
    padding:0 20px;
    border-right:solid 1px var(--color-lightgray);
}
.sub-menu li:first-of-type a {
    border-left:solid 1px var(--color-lightgray);
}
.sub-menu li span {
    display:block;
    font-size:0.6em;
}
.sub-menu li strong {
    display:block;
    font-size:1.2em;
    font-family:"Shippori Mincho", serif;
}
.sub-menu li figure {
    border-radius:var(--radius-inner);
}
.sub-menu li a figure img {
    transition:var(--transition);
}
.sub-menu li a:hover figure img {
    scale:1.05;
}
.sub-menu li:nth-of-type(1) a {
    color:var(--color-green);
}
.sub-menu li:nth-of-type(2) a {
    color:var(--color-blue);
}
.sub-menu li:nth-of-type(3) a {
    color:var(--color-purple);
}
.sub-menu li:nth-of-type(4) a {
    color:var(--color-pink);
}

.sp-menu {
    display:none;
}

#nav-cover {
    background:var(--color-dark-glass);
}

@media (max-width: 920px) {
    .menu-trigger {
        background:var(--color-lightgray);
    }
    .menu-trigger nav {
        margin-top:0;
        width:100vw;
        height:calc(100dvh - 160px);
        border-radius:0;
        position:absolute;
        top:100%;
        box-shadow:var(--shadow) inset;
        background:var(--color-white);
    }
    html .menu-trigger summary {
        width:calc(100vw / 4);
        height:80px;
        letter-spacing: 0;
        color:var(--color-black);
        font-size:12px;
        border-radius:0;
    }
    html .menu-trigger summary div {
        height:20px;
        flex:none;
        margin-bottom:5px;
    }
    html .menu-trigger summary :is(div, span){
        width:30px;
    }
    .menu-trigger[open]:not(.close) summary  {
        background:var(--color-pink);
        color: var(--color-white);
    }
    .menu-trigger[open]:not(.close) summary ::before ,
    .menu-trigger[open]:not(.close) summary ::after {
        background: var(--color-white);
    }

    .menu-trigger nav > ul {
        padding-top:20px;
        padding-bottom:20px;
    }
    .menu-trigger nav > ul > li {
        border-bottom:solid 1px var(--color-gray);
    }

    .menu-trigger nav > ul > li:nth-of-type(-n+4){
        display:block;
    }
    .menu-trigger nav > ul li > a {
        display:block;
        border-left:none;
        padding: 15px 0;
        min-height:auto;
        background:url(../_img/nav/button_arrow.svg) right 10px center / 22px no-repeat;
        font-size:1.2em;
        font-weight:500;
    }
    .menu-trigger nav > ul > li.plan > a::after {
        display:none;
    }
    .menu-trigger nav > ul > li ul {
        display:block !important;
    }
    .menu-trigger nav > ul > li ul li {
        border-top:solid 1px var(--color-gray);
    }
    .menu-trigger nav > ul > li ul li a::before {
        content:'＞';
        color:var(--color-gray);
        margin-right:5px;
    }
    .menu-trigger nav > ul > li ul li:nth-of-type(1) a {
        color:var(--color-green)
    }
    .menu-trigger nav > ul > li ul li:nth-of-type(2) a {
        color:var(--color-blue)
    }
    .menu-trigger nav > ul > li ul li:nth-of-type(3) a {
        color:var(--color-purple)
    }
    .menu-trigger nav > ul > li ul li:nth-of-type(4) a {
        color:var(--color-pink)
    }

    .menu-trigger nav > ul > li:nth-of-type(-n+4) {
        border:none;
    }
    .menu-trigger nav > ul > li:nth-of-type(-n+4) a {
        padding:10px 0;
    }
    .menu-trigger nav > ul > li:is(:nth-of-type(5), :last-of-type) {
        display:none;
    }

    .sp-menu {
        padding-right:calc(100vw / 4);
        position:absolute;
        bottom:0;
        width:100%;
        display:flex;
    }
    .sp-menu li:not(:last-of-type) {
        flex:1;
        height:80px;
        border-right:solid 1px var(--color-gray);
    }
    .sp-menu li:not(:last-of-type) a {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        font-size:12px;
        line-height:1.2;
        text-align:center;
        height:100%;
        padding-top:16px;
    }
    .sp-menu li:not(:last-of-type) a img {
        height:24px;
        margin-bottom:5px;
    }

    .sp-menu li:last-of-type {
        position:fixed;
        top:var(--padding);
        right:calc(var(--padding) / 2);
        transition:top var(--transition);
    }
    body.scrolled .sp-menu li:last-of-type {
        top:calc(-80px - var(--padding));
    }
    .sp-menu li:last-of-type a {
        border-radius:var(--radius-inner);
        background:#c00;
        color:var(--color-white);
        gap:5px;
        padding:10px 5px;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .sp-menu li:last-of-type a:hover {
        background:#a00000;
    }
    .sp-menu li:last-of-type a img {
        width:1.1em;
    }

    .sub-menu {
        display:none !important;
    }
}