:is(section#plan, body#plan section.plan) .plan-lead picture {
    display:block;
    text-align:center;
}
:is(section#plan, body#plan section.plan) .plan-lead picture img {
    max-width:500px;
}
:is(section#plan, body#plan section.plan) .plan-lead picture + h2 {
    margin-top:0;
}

.plan-list a {
    display:flex;
    flex-direction: column;
    border-radius:var(--radius);
    background:var(--color-white);
    overflow: hidden;
    width:100%;
    max-width:520px;
    margin-inline:auto;
    container-type: inline-size;
}
.plan-list a:hover {
    color:inherit;
}
.plan-list a strong {
    font-family:"Roboto", sans-serif;
    font-size:1.4em;
    font-weight:500;
}
.plan-list hgroup {
    display:flex;
    flex-direction: column;
    align-items: center;
    color:var(--color-white);
}
.plan-list hgroup p {
    font-size:5cqw;
    text-align:center;
    line-height:1.3;
    color:var(--color-black);
}
.plan-list hgroup h3 {
    font-family:"Shippori Mincho", serif;
    font-size:12cqw;
    letter-spacing:5px;
    font-weight:500;
    padding-left:5px;
    margin-top:0;
}
.plan-list .plan-price {
    padding:20px 8cqw 5px 8cqw;
    margin:0;
}
.plan-list .plan-price ul {
    gap:10px;
    display:flex;
}
.plan-list .plan-price ul li {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding:10px 5px;
    line-height:1;
    border-radius:100px;
    flex:1;
}
.plan-list .plan-price ul li:first-of-type {
    border:solid 1px var(--color-black);
    font-size:3cqw;
}
.plan-list .plan-price ul li:last-of-type {
    color:var(--color-white);
    font-size:4cqw;
}
.plan-list .plan-price ul li:last-of-type strong {

}
.plan-list .plan-detail .plan-price dl {
    margin-top:0;
}
.plan-list .plan-price dl div {
    display:flex;
    align-items: center;
    justify-content:center;
    gap:5px;
    font-size:6cqw;
}
.plan-list .plan-price dl div dd {
    flex:1;
    gap:5px;
}
.plan-list .plan-price dl div dd strong {
    font-size:12.4cqw;
    line-height:1;
}
.plan-list .plan-price dl div dd div {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height:1;
    gap:2px;
}
.plan-list .plan-price dl div dd div span:first-of-type {
    order:2;
}
.plan-list .plan-price dl div dd div span:last-of-type {
    font-size:3cqw;
    order:1;
}
.plan-list .plan-price dl > dd {
    text-align:right;
    font-size:4cqw;
}

:is(section#plan, body#plan section.plan) .plan-1 {
    border:solid 2px var(--color-green);
}

.plan-list .plan-1 .plan-price ul li:last-of-type {
    background:var(--color-green);
}
.plan-list .plan-1 hgroup h3 ,
.plan-list .plan-1 .plan-price dl div dt ,
.plan-list .plan-1 .plan-price dl div dd strong {
    color:var(--color-green);
}

:is(section#plan, body#plan section.plan) .plan-2 {
    border:solid 2px var(--color-blue);
}
.plan-list .plan-2 .plan-price ul li:last-of-type {
    background:var(--color-blue);
}
.plan-list .plan-2 hgroup h3 ,
.plan-list .plan-2 .plan-price dl div dt ,
.plan-list .plan-2 .plan-price dl div dd strong {
    color:var(--color-blue);
}

:is(section#plan, body#plan section.plan) .plan-3 {
    border:solid 2px var(--color-purple);
}
.plan-list .plan-3 .plan-price ul li:last-of-type {
    background:var(--color-purple);
}
.plan-list .plan-3 hgroup h3 ,
.plan-list .plan-3 .plan-price dl div dt ,
.plan-list .plan-3 .plan-price dl div dd strong {
    color:var(--color-purple);
}

:is(section#plan, body#plan section.plan) .plan-4 {
    border:solid 2px var(--color-pink);
}
.plan-list .plan-4 .plan-price ul li:last-of-type {
    background:var(--color-pink);
}
.plan-list .plan-4 hgroup h3 ,
.plan-list .plan-4 .plan-price dl div dt ,
.plan-list .plan-4 .plan-price dl div dd strong {
    color:var(--color-pink);
}


.plan-list-mini li {
    display:flex;
    gap:5px;
    flex-direction: column;
    font-size:var(--font-size);
}
.plan-list-mini li figure {
    border-radius: var(--radius);
}
.plan-list-mini li h3 {
    font-family:"Shippori Mincho", serif;
    font-size:2em;
    letter-spacing:5px;
    font-weight:600;
    padding-left:5px;
    margin-top:15px;
    margin-left:0 !important;
    text-align:center;
}
.plan-list-mini li.plan-1 h3 { color:var(--color-green) !important; }
.plan-list-mini li.plan-2 h3 { color:var(--color-blue) !important; }
.plan-list-mini li.plan-3 h3 { color:var(--color-purple) !important; }
.plan-list-mini li.plan-4 h3 { color:var(--color-pink) !important; }


:is(section#plan, body#plan) .introduce-banner {
    background:var(--color-purple);
    border:solid 4px var(--color-purple);
    border-radius:var(--radius);
    overflow:hidden;
    margin-top:60px;
}
:is(section#plan, body#plan) .introduce-banner div {
    color:var(--color-white);
    font-size:clamp(24px, 3vw, 40px);
    font-weight:bold;
    margin:20px;
    padding:30px;
    border:solid 2px var(--color-white);
    border-radius:var(--radius-inner);
    flex:1;
    display:flex;
    align-items: center;
    justify-content: center;
}
:is(section#plan, body#plan) .introduce-banner div p span:last-of-type {
    font-size:0.7em;
    background:var(--color-red);
    line-height:1;
    padding:5px 30px;
    border-radius:100px;
    margin-left:10px;
    display:inline-block;
}
:is(section#plan, body#plan) .introduce-banner figure {
    overflow:hidden;
    aspect-ratio:4 / 2.6;
}
:is(section#plan, body#plan) .introduce-banner figure img {
    width:100%;
    height:100%;
    object-fit: cover;
}



body#plan header.plan {
    padding-block:calc(var(--section-space) / 2);
    color:var(--color-white);
}
body#plan header.plan > div > div {
    width:56%;
}
body#plan header.plan h1 {
    font-size:3em;
    font-family:"Shippori Mincho", serif;
    color:var(--color-white);
    font-weight:500;
}
body#plan header.plan p {
    font-size:1.2em;
}

body#plan .plan-detail {
    padding-top:calc(var(--section-space) / 2);
}
body#plan .plan-detail > div > figure {
    width:40%;
    position:absolute;
    bottom:0;
    right:var(--padding);
}

body#plan .plan-detail .plan-price {
    container-type: inline-size;
    display:flex;
    align-items: flex-start;
    gap:2cqw;
    padding:0;
    width:56%;
}
body#plan .plan-detail .plan-price ul {
    flex-direction: column;
    width:40cqw;
}
body#plan .plan-detail .plan-price ul li {
    min-height:50px;
}
body#plan .plan-detail .plan-price ul li:first-of-type strong {
    font-size:4cqw;
}
body#plan .plan-detail .plan-price ul li:last-of-type strong {
    translate: 0 -0.1em;
    font-size:6cqw;
}
body#plan .plan-detail .plan-price ul li:last-of-type::after {
    content:'';
    width:16px;
    height:20px;
    position:absolute;
    top:calc(50% - 10px);
    right:-10px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
body#plan .plan-detail .plan-price dl div {
    flex-direction: column;
    align-items: flex-start;
    gap:0;
    font-size:4cqw;
}
body#plan .plan-detail .plan-price dl div dd div {
    font-size:7cqw;
    font-weight:bold;
}
body#plan .plan-detail .plan-price dl > dd {
    margin-top:5px;
}
body#plan .plan-detail .plan-price dl > dd strong {
    font-size:1.2em;
}

body#plan header.plan-1 ,
body#plan .plan-detail .plan-1 .plan-price ul li:last-of-type::after {
    background:var(--color-green);
}

body#plan header.plan-2 ,
body#plan .plan-detail .plan-2 .plan-price ul li:last-of-type::after {
    background:var(--color-blue);
}

body#plan header.plan-3 ,
body#plan .plan-detail .plan-3 .plan-price ul li:last-of-type::after {
    background:var(--color-purple);
}

body#plan header.plan-4 ,
body#plan .plan-detail .plan-4 .plan-price ul li:last-of-type::after {
    background:var(--color-pink);
}

body#plan .plan-detail #point {
    margin-block:60px;
}
body#plan .plan-detail #point h2 {
    padding:10px 40px;
    color:var(--color-white);
    text-align:left;
    font-weight:500;
}
body#plan .plan-detail #point.plan-1 h2 {
    background:var(--color-green);
}
body#plan .plan-detail #point.plan-2 h2 {
    background:var(--color-blue);
}
body#plan .plan-detail #point.plan-3 h2 {
    background:var(--color-purple);
}
body#plan .plan-detail #point.plan-4 h2 {
    background:var(--color-pink);
}

body#plan .plan-detail #point ul {
    gap:0 40px;
    padding-top:20px;
}
body#plan .plan-detail #inc article {
    border-radius:var(--radius);
    padding:40px;
}
body#plan .plan-detail #inc article h2 {
    text-align:left;
}

body#plan .plan-detail #inc.plan-1 article {
    background:#E4ECD1;
}
body#plan .plan-detail #inc.plan-1 article h2 {
    color:var(--color-green);
}

body#plan .plan-detail #inc.plan-2 article {
    background:#DEE8F2;
}
body#plan .plan-detail #inc.plan-2 article h2 {
    color:var(--color-blue);
}

body#plan .plan-detail #inc.plan-3 article {
    background:#EBE3F6;
}
body#plan .plan-detail #inc.plan-3 article h2 {
    color:var(--color-purple);
}

body#plan .plan-detail #inc.plan-4 article {
    background:#F7E2EA;
}
body#plan .plan-detail #inc.plan-4 article h2 {
    color:var(--color-pink);
}

body#plan .plan-detail #inc article ul {
    margin-top:40px;
}
body#plan .plan-detail #inc article ul figcaption {
    text-align:center;
    margin-top:5px;
}
body#plan .plan-detail #inc article ul li p {
    width:100%;
    aspect-ratio: 1;
    border-radius:var(--radius);
    background:var(--color-darkgray);
    color:var(--color-white);
    display:flex;
    align-items: center;
    justify-content: center;
    text-align:center;
}
body#plan .plan-detail #flow {
    margin-top:var(--section-space);
}
body#plan .plan-detail #flow h2 {
    display:flex;
    align-items: center;
    gap:var(--gap);
}
body#plan .plan-detail #flow h2::before ,
body#plan .plan-detail #flow h2::after {
    content:'';
    height:1px;
    flex:1;
    background:var(--color-black);
}
body#plan .plan-detail #flow article {
    margin-top:40px;
}
body#plan .plan-detail #flow article h3 {
    color:var(--color-pink);
}
body#plan .plan-detail #flow article ul {
    font-size:1.3em;
    font-weight:bold;
    color:var(--color-pink);
    display:flex;
    flex-wrap: wrap;
    gap:5px 20px;
    line-height:1.1;
}
body#plan .plan-detail #flow article ul + ul {
    margin-top:0;
}
body#plan .plan-detail #flow article ul li::before {
    content:'●';
}
body#plan .plan-detail #flow article p {
    margin-top:40px;
}

body#plan .plan-detail #support {
    border:solid 3px var(--color-pink);
    border-radius:var(--radius);
    padding:3vw;
    padding-bottom:0;
    margin-top:var(--section-space);
}
body#plan .plan-detail #support > div {
    margin-top:20px;
}
body#plan .plan-detail #support div.image {
    width:30%;
    background:url(../_img/plan/goe.png) top center / 100% no-repeat;
}
body#plan .plan-detail #support article {
    flex:1;
    padding-bottom:3vw;
}
body#plan .plan-detail #support article h3 {
    font-size:1.4em;
}
body#plan .plan-detail #support article p {
    margin-top:5px;
}
body#plan .plan-detail #support article p + h3{
    margin-top:20px;
}



@media (max-width : 820px) {
    .plan-list {
        grid-template-columns: repeat(1, 1fr);
    }
    :is(section#plan, body#plan) .introduce-banner {
        flex-direction: column;
    }
    :is(section#plan, body#plan) .introduce-banner div {
        margin:10px;
        padding:10px;
        border:solid 1px var(--color-white);
        order:2;
    }
    :is(section#plan, body#plan) .introduce-banner figure {
        order:1;
    }


    body#plan header.plan {
        padding-bottom:30vw;
    }
    body#plan header.plan > div > div {
        width:100%;
    }
    body#plan header.plan h1 {
        text-align:center;
    }
    body#plan .plan-detail > div:first-of-type {
        flex-direction: column;
    }
    body#plan .plan-detail .plan-price {
        width:100%;
        margin-top:40px;
    }
    body#plan .plan-detail > div:first-of-type {
        margin-top:-30vw;
    }
    body#plan .plan-detail > div > figure {
        width:100%;
        max-width:600px;
        position:relative;
        bottom:auto;
        right:auto;
        margin-inline:auto;
    }

    body#plan .plan-detail #support h2 {
        padding-left:30%;
        font-size:clamp(24px, 6vw, 26px);
    }
    body#plan .plan-detail #support h2 br {
        display:block !important;
    }
    body#plan .plan-detail #support div.image {
        position:absolute;
        bottom:calc(100% + 20px);
        aspect-ratio: 1;
    }
}
@media ( width <= 720px ) {
    body#plan .plan-detail #inc article ul {
        grid-template-columns: repeat(4, 1fr);
        gap:15px;
    }


    .plan-list-mini {
        flex-direction: column;
        gap:calc(var(--gap) * 1.5);
    }
    .plan-list-mini li {
        flex-direction: row;
        gap:20px;
    }
    .plan-list-mini li h3 {
        margin-top:5px;
    }
    .plan-list-mini li > div {
        flex:1;
    }
    .plan-list-mini li > p {
        flex:1;
        margin:0;
    }


    body#plan .plan-detail #flow article {
        flex-direction: column;
        gap:0;
    }
    body#plan .plan-detail #flow article + article {
        margin-top: 60px;
    }
    body#plan .plan-detail #flow article > div {
        display:contents;
    }
    body#plan .plan-detail #flow article h3 {
        order:1;
        font-size:clamp(24px, 10vw, 28px);
    }
    body#plan .plan-detail #flow article ul {
        order:2;
    }
    body#plan .plan-detail #flow article figure {
        order:3;
        margin-top:20px;
    }
    body#plan .plan-detail #flow article p {
        order:4;
        margin-top:20px;
    }
}
@media ( width <= 520px ) {
    .plan-list hgroup p {
        font-size:7cqw;
    }
    .plan-list .plan-price ul {
        flex-direction: column;
    }
    .plan-list:not(.plan-detail) .plan-price ul li:first-of-type {
        font-size:7cqw;
    }
    .plan-list:not(.plan-detail) .plan-price ul li:last-of-type {
        font-size:8cqw;
    }
    .plan-list .plan-price dl div {
        flex-direction: column;
        align-items: flex-start;
        gap:0;
        padding-top:10px;
    }
    .plan-list .plan-price dl div dd {
        justify-content: flex-start;
    }
    .plan-list .plan-price dl div dd strong {
        font-size:18cqw;
    }
    .plan-list .plan-price dl div dd div {
        padding-top:0;
    }
    .plan-list:not(.plan-detail) .plan-price dl > dd {
        text-align:left;
    }


    .plan-list-mini {
        flex-direction: column;
        gap:var(--gap);
    }
    .plan-list-mini li h3 {
        font-size:1.4em;
    }


    body#plan .plan-detail .plan-price {
        flex-direction: column;
    }
    body#plan .plan-detail .plan-price ul {
        flex-direction: row;
        width:100%;
    }
    body#plan .plan-detail .plan-price ul li:last-of-type::after {
        display:none;
    }
    body#plan .plan-detail .plan-price dl {
        width:fit-content;
        margin-inline: auto;    
    }
    body#plan .plan-detail .plan-price dl div {
        font-size:7cqw;
    }
    body#plan .plan-detail .plan-price dl > dd {
        font-size:6cqw;
    }
    body#plan .plan-detail .plan-price dl > dd strong {
        font-size:1.4em;
    }
    body#plan .plan-detail .plan-price dl div dd {
        margin-top:0px;
    }
    body#plan .plan-detail .plan-price dl div dd div {
        font-size:11cqw;
    }
    .plan-list .plan-price dl div dd div span:last-of-type {
        font-size:4cqw;
        margin-inline:auto;
    }
    .plan-list .plan-price dl div dd div span:first-of-type {
        font-size:8cqw;
    }

    body#plan .plan-detail #point ul {
        gap:10px;
    }
    body#plan .plan-detail #point ul li {
        max-width:300px;
    }

    body#plan .plan-detail #inc article {
        padding:var(--padding);
    }
    body#plan .plan-detail #inc article h2 {
        font-size:2em;
    }
    body#plan .plan-detail #inc article ul {
        grid-template-columns: repeat(3, 1fr);
        gap:15px;
    }
    

}