.menu-trigger summary {
    padding:0 5px;
    
}
.menu-trigger summary > ::after {
    width:80%;
}
.menu-trigger[open]:not(.close) summary ::after {
    width:100%;
}

.menu-trigger nav {
    width:100vw;
    left:0;
}

.menu-trigger[open]:not(.close) summary ::before {
    transform: translateY(-50%) rotate(135deg);
}
.menu-trigger[open]:not(.close) summary ::after {
    transform: translateY(50%) rotate(-135deg);
}


/* メインナビ */
:is(.menu-trigger, footer) .main-nav a {
    display:block;
    padding:2px 0;
}
:is(.menu-trigger, footer) .main-nav a:hover {
    color:var(--color-blue);
}
:is(.menu-trigger, footer) .main-nav > ul > li > a {
    font-size:1.1em;
    font-weight:bold;
    margin-bottom:25px;
    padding-bottom:5px;
}
:is(.menu-trigger, footer) .main-nav > ul > li > a::after {
    content:'';
    width:1.2em;
    height:0.4em;
    background:var(--color-orange);
    position:absolute;
    bottom:0;
    left:0;
}
:is(.menu-trigger, footer) .buttons {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width:250px;
}
:is(.menu-trigger, footer) .buttons li {
    width:100%;
}
:is(.menu-trigger, footer) .buttons .button {
    width:100%;
    padding:calc(var(--padding) / 1.5) var(--padding);
    display:flex;
    font-size:1.2em;
}

:is(.menu-trigger, footer) .sns {
    display:flex;
}
:is(.menu-trigger, footer) .sns img {
    width:20px;
}


/* Hamburger only */
.main-menu > div:not(.group) {
    background:var(--color-lightgray);
    padding:120px 0 0 0;
}

.menu-trigger .main-menu > div > div {
    margin-left:auto;
    margin-right:auto;
}
.menu-trigger .main-menu .sns {
    margin-top:var(--gap);
}
.menu-trigger .main-menu .sns a {
    padding:0;
}
.menu-trigger .main-menu :is(.sub, .group) ul {
    display:flex;
}
.menu-trigger .main-menu .sub {
    margin-top:calc(var(--section-space) / 2);
    padding-bottom:calc(var(--section-space) / 2);
}
.menu-trigger .main-menu .sub a {
    padding:0;
}
.menu-trigger .main-menu .sub a:hover {
    color:var(--color-blue);
}
.menu-trigger .main-menu .sub address {
    padding-top:10px;
    border-top:solid 1px var(--color-black);
    margin-top:10px;
}

.menu-trigger .main-menu .group {
    padding-top:calc(var(--section-space) / 2);
    padding-bottom:calc(var(--section-space) / 2);
}
.menu-trigger .main-menu .group h3 {
    text-align:center;
    color:var(--color-lightblue);
    padding-bottom:calc(var(--section-space) / 2);
}
.menu-trigger .main-menu .group li a {
    font-weight:bold;
    color:var(--color-white);
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:5px;
}
.menu-trigger .main-menu .group li a::after {
    content:'';
    width:1.4em;
    aspect-ratio: 1;
    background:url(../_img/icon/new_tab_white.svg) right center / contain no-repeat;
}

.menu-trigger .main-menu::after {
    content:'';
    width:100%;
    height:100px;
    position:fixed;
    top:0;
    background-image:linear-gradient(to bottom, rgb(255 255 255 / 1) 0, rgb(255 255 255 / 1) 60%, rgb(255 255 255 / 0) 100%);
}


@media (max-width: 920px) {

}
@media (max-width: 780px) {
    :is(.menu-trigger, footer) .main-nav a {
        padding:5px 0;
    }
}
@media (max-width: 520px) {
    :is(.menu-trigger, footer) .main-nav > ul > li li a {
        padding:10px 0;
    }
    .menu-trigger .main-menu > div > div ,
    .menu-trigger .main-menu .sub {
        display:block;
        padding-left:var(--padding);
        padding-right:var(--padding);
    }
    .menu-trigger .main-menu .sub p:has(img) {
        margin-top:var(--padding);
        max-width:200px;
        margin-inline:auto;
    }
    :is(.menu-trigger, footer) .buttons {
        margin-top:40px;
    }
    :is(.menu-trigger, footer) .buttons .button {
        padding-block:var(--padding);
    }
    .menu-trigger .main-menu .sns {
        justify-content: center;
        gap:60px;
    }
    .menu-trigger .main-menu .sns img {
        width:40px;
    }
    .menu-trigger .main-menu .group li a {
        padding:calc(var(--padding) / 2);
    }
}
