@import 'plan.css?20250503';
@import 'form.css';

#member main > header {
    background:url(../_img/member/mv_wall.png) top center / cover;
}
#member main > header picture {
    display:block;
}

main #benefits article {
    background:var(--color-white);
    border-radius:var(--radius);
    padding:calc(var(--padding) * 2);
    box-shadow:var(--shadow3);
    margin-top:100px;
}
main #benefits article + article {
    margin-top:60px;
}
main #benefits h2 {
    position:absolute;
    top:-20px;
    left:-10px;
}
main #benefits h2 img {
    width:100px;
}
main #benefits h2 + div {
    margin-top:0;
    padding-left:50px;
}
main #benefits h3 {
    font-size:2em;
}
main #benefits h3 strong {
    font-size:1.4em;
    color:var(--color-red);
    margin:0;
}
main #benefits picture {
    display:block;
}
main #benefits picture img {
    width:100%;
}

main #contact .tel {
    border:solid 2px var(--color-red);
    border-radius:100px;
    padding:var(--padding);
}
main #contact .tel span {
    display:inline-block;
}
main #contact .pink {
    margin-top:var(--section-space);
    padding-bottom:60px;
    border-bottom:dashed 1px var(--color-gray);
}
main #contact .pink h2 {
    color:var(--color-pink);
}
main #contact .purple h2 {
    color:#93278F;
}
main #contact ol {
    gap:60px;
    margin-top:60px;
}
main #contact ol li h3 {
    font-size:1.3em;
    display:flex;
    flex-direction: column;
    gap:5px;
}
main #contact ol li h3 span {
    background:var(--color-pink);
    font-weight:normal;
    font-size:0.8em;
    font-family: 'Roboto', sans-serif;
    color:var(--color-white);
    border-radius:100px;
    padding:5px 20px;
    width:fit-content;
}
main #contact .pink ol li h3 span {
    background:var(--color-pink);
}
main #contact .purple ol li h3 span {
    background:#93278F;
}
main #contact ol li h3 span strong {
    font-size:1.3em;
    font-weight:500;
}
main #contact ol li a {
    display:block;
}

main #contact ol li:not(:last-of-type)::after {
    content:'';
    width:15px;
    height:30px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position:absolute;
    right:-35px;
    top:calc(50% - 20px);
}
main #contact .pink ol li:not(:last-of-type)::after {
    background:var(--color-pink);
}
main #contact .purple ol li:not(:last-of-type)::after {
    background:#93278F;
}


@media (max-width : 920px) {

}
@media ( width <= 720px ) {

}
@media ( width <= 520px ) {
    #member main > header {
        background:url(../_img/member/mv_wall_sp.png) top center / cover;
    }
    main #benefits h1 {
        font-size:2em;
    }
    main #benefits h2 + div {
        margin-top:0;
        padding-left:0;
    }
    main #benefits article {
        padding:var(--padding);
    }
    main #benefits h3 {
        font-size:1.6em;
        margin-left:80px;
        flex-direction: column;
        align-items: flex-start;
        gap:0;
        line-height:1.2;
        padding-bottom:20px;
    }

    main #contact .tel {
        font-size:1.2em;
    }
    main #contact .tel span {
        display:block;
        text-align:center;
        font-size:1.3em;
    }

    main #contact h2 {
        font-size:2em;
    }

    main #contact ol {
        gap:60px;
        margin-top:30px;
    }
    main #contact ol li:not(:last-of-type)::after {
        content:'';
        width:15px;
        height:30px;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        position:absolute;
        right:auto;
        left:40px;
        top:calc(100% + 20px);
        rotate: 90deg;
    }
}