main .plan-list article + article {
    margin-top:var(--section-space) !important;
}
main .plan-list article figure {
    aspect-ratio: 43 / 50;
    overflow: hidden;
    min-width:360px;
}
main .plan-list article figure img {
    width:100%;
    height:100%;
    object-fit: cover;
    margin:0;
}
main .plan-list article h2 {
    margin:0;
    padding:0;
    border:none;
}
/*
main .plan-list article .campaign {
    margin:0;
    background:var(--color-white);
    font-size:0.6em;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
    position:absolute;
    top:0;
    right:10px;
    padding:10px 10px 20px 10px;
    z-index:2;
}
main .plan-list article .campaign strong {
    font-size:4em;
    font-weight:normal;
    line-height:1;
}
*/
main .plan-list article .campaign {
    margin:0;
    position:absolute;
    top:0;
    right:10px;
    z-index:2;
    width:120px;
}
main .plan-list article li + li {
    margin-top:10px;
}
main .plan-list article .heads {
    width:fit-content;
    padding:0 10px;
    background:var(--color-lightgray-60);
}
main .plan-list article p {
    padding-top:var(--padding);
    margin-top:var(--padding);
    border-top:solid 1px var(--color-black);
}

main .plan-detail h1 {
    font-size:2.2em;
    font-weight:bold;
    letter-spacing:0.2em;
    line-height:1.2;
}

main .main-image .width-limiter {
    margin-top:0;
    position:absolute;
    top:0;
    left:50%;
    translate:-50% 0;
    z-index:2;
    width:100%;
}
main .main-image .campaign {
    width:120px;
}
main .main-image > figure {
    margin:0;
    width:100%;
    overflow:hidden;
}

main .plan-detail article {
    flex:1;
    min-width:300px;
}
main .plan-detail dl div {
    margin-top:10px;
    font-size:0.9em;
}
main .plan-detail dl div dt {
    padding:2px 5px;
    width:8em;
    font-size:1em;
    font-weight:normal;
    background:var(--color-lightgray-60);
    display:flex;
    align-items: center;
}
main .plan-detail dl div dd {
    padding:2px 5px;
    flex:1;
}

main .plan-detail aside {
    border:solid 1px var(--color-black);
    padding:var(--padding);
}
main .plan-detail .images {
    width:100%;
    max-width:260px;
}


/* for index */
#index main .plan-wrapper {
    margin: var(--margin) 0 0 0;
    overflow: visible;
    width:100%;
}
#index main .plan-list {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-left: calc((100vw - var(--width-limit)) / 2);
    padding-bottom:var(--padding);
    margin:0 var(--padding);
    width: calc(100% - (var(--padding) * 2));
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}
#index main .plan-list:active {
    cursor: grabbing;
}
#index main .plan-list::-webkit-scrollbar {
    height: 6px;
}
#index main .plan-list::-webkit-scrollbar-thumb {
    background: var(--color-lightgray-60);
    border-radius: 3px;
}
#index main .plan-list article {
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
    width:380px;
    margin: 0;
}
#index main .plan-list article > * {
    margin-top:0;
    width:100%;
}
#index main .plan-list article h2 {
    font-size:1.4em;
    font-weight:bold;
}
main .plan-list article figure {
    min-width:auto;
}
main .plan-list article figure img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
}
#index main .plan-list article + article {
    margin-top:0 !important;
}
#index main .plan-list article > div > div:last-of-type {
    text-align:center;
}
#index main .plan-list article ul {
    font-size:0.9em;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
#index main .plan-list article ul li {
    margin:0;
}
#index main .plan-list article .button {
    min-width:200px;
    font-size:0.8em;
}
#index main .plan-list article .button::after {
    right:20px;
}

@media (max-width: 720px) {
    main .main-image picture {
        display:block;
        margin:0;
        overflow:hidden;
        width:100%;
        aspect-ratio: 5 / 4;
    }
    main .main-image picture img {
        width:100%;
        height: 100%;
        object-fit: cover;
    }
    main .plan-detail > div.flex {
        flex-direction: column;
    }
    main .plan-detail .images {
        max-width:none;
        margin-top:var(--margin);
    }
    main .main-image .campaign {
        margin-left:auto;
    }
}
@media (max-width: 520px) {
    main .plan-list article .campaign ,
    main .main-image .campaign {
        width:80px;
    }

    #index main .plan-list article {
        width:280px;
    }
}