@charset "utf-8";
.moushikomi .tagBox .moushikomiWrap{
    display:flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom:50px;
    & > div{
        width:calc((100% - 25px)/2);
        padding:1em;
        & ul{
            margin: 1em 0;
            & li{
                margin: 0 0 0.5rem 2.3rem;
            }
        }
        &.taikenkaiBox{
            border:2px solid var(--yc-sub-A3);
            & h2{
                background-color:var(--yc-sub-A1);
                border-left: 5px solid var(--yc-sub-A4);
            }
            & .comingSoonBox{background-color:var(--yc-sub-A4);}
            & ul li::marker{
                    color: var(--yc-sub-A4);
            }
        }
        &.sokuteikaiBox{
            border:2px solid var(--yc-sub-F2);
             & h2{
                background-color:var(--yc-sub-F1);
                border-left: 5px solid var(--yc-sub-F4);
            }
            & .comingSoonBox{background-color:var(--yc-sub-F4);}
            & ul li::marker{
                    color: var(--yc-sub-F4);
            }
        }
        &.minisokuteikaiBox{
            border:2px solid var(--yc-sub-B3);
            & h2{
                background-color:var(--yc-sub-B1);
                border-left: 5px solid var(--yc-sub-B4);
            }
            & .comingSoonBox{background-color:var(--yc-sub-B4);}
            & ul li::marker{
                    color: var(--yc-sub-B4);
            }
        }
        &.trainingBox{
            border:2px solid var(--yc-sub-D2);
            & h2{
                background-color:var(--yc-sub-D1);
                border-left: 5px solid var(--yc-sub-D4);
            }
            & .comingSoonBox{background-color:var(--yc-sub-D4);}
            & ul li::marker{
                    color: var(--yc-sub-D4);
            }
        }
        &.jizentaikenBox{
            border:2px solid var(--yc-sub-E3);
            & h2{
                background-color:var(--yc-sub-E1);
                border-left: 5px solid var(--yc-sub-E4);
            }
            & .comingSoonBox{background-color:var(--yc-sub-E4);}
            & ul li::marker{
                    color: var(--yc-sub-E4);
            }
        }
    }
}
@media only screen and (max-width:999px) {
    .moushikomi .tagBox .moushikomiWrap{
        flex-direction: column;
        flex-wrap:nowrap;
        gap:15px 0;
        margin-bottom:30px;
        & > div{
            width:100%;
            padding:1em 1.5em;
            & h2{
                font-size:1.9rem;
            }
        }
    }
}
.moushikomi .tagBox .moushikomiFlow{
    & ul{
        display:flex;
        gap:0;
        & > li{
            list-style-type: none;
            margin:0;
            width:calc(100%/6);
            padding: 1em 1em 1em;
            position:relative;
            color:#fff;
            display:flex;
            flex-direction: column;
            align-items: center;
            &::after{
                content:"";
                display: inline-block;
                width: 39px;
                height: 45px;
                clip-path: polygon(0 0, 0 100%, 100% 50%);
                position:absolute;
                top:1em;
                right:-38px;
                z-index:1;
            }
            & > div:nth-child(1){
                display:flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width:70px;
                height:70px;
                border-radius: 50%;
                line-height:1;                
                background-color:#fff;
                margin-bottom:0.5em;
                font-weight:bold;
                & span{
                    display:block;
                    font-size:1.7em;                
                }
            }
            & > div:nth-child(2){
                writing-mode: vertical-rl;
                text-orientation: upright;
                display:flex;
                flex-direction: column;
                width:100%;
                font-size:2rem;
                padding:1em 0;
                justify-content: center;
                letter-spacing:0.06em;
                & span{
                    font-size:0.75em;
                    display:inline-block;
                    padding:0.2em 0;
                }
                & span.fusoku {
                    font-size:0.8em;
                    display:inline-block;
                    margin-right:5px;
                    & ol{
                        margin-bottom:0;
                        & > li{
                            margin:2em 0 0.5em;
                            list-style-type: cjk-ideographic;
                            &::marker{
                                color:#fff;
                            }
                        }
                    }
                }
            }
            &:nth-child(2n-1){
                background-color:var(--years-color4);
                &::after{
                    background-color:var(--years-color4);
                }
                & > div:nth-child(1){
                    color:var(--years-color5)
                }
            }
            &:nth-child(2n){
                background-color:var(--years-color5);
                &::after{
                    background-color:var(--years-color5);
                }
                & > div:nth-child(1){
                    color:var(--years-color4)
                }
            }
            &:last-child{
                &::after{display:none}
            }
        }
    }
}
@media only screen and (max-width:999px) {
    .moushikomi .tagBox .moushikomiFlow{
        & ul{
            flex-direction: column;
            & > li{
                width:100%;
                padding: 2em 1em;
                display:flex;
                flex-direction:row;
                align-items: center;
                &::after{
                    width: 22px;
                    height: 19.1px;
                    clip-path: polygon(0 0, 100% 0%, 50% 100%);
                    top:auto;
                    bottom:-18px;
                    right:auto;
                    left:2.3em;
                }
                & > div:nth-child(1){
                    margin-bottom:0;
                    & span{
                        font-size:1.5em;                
                    }
                }
                & > div:nth-child(2){
                    width:calc(100% - 70px);
                    writing-mode: horizontal-tb;
                    display:flex;
                    align-items: flex-start;
                    font-size:1.9rem;
                    padding:0 1em;
                    & span{
                        padding:0 0.2rem;
                    }
                    & span.fusoku {
                        margin-top:5px;
                        margin-right:0;
                        & ol{
                            & > li{
                                margin:0em 0 0em 1.5em;
                                list-style-type:decimal;
                                &::marker{
                                    color:#fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.moushikomi .tagBox .notice{
    & dt{
        font-weight:bold;
        margin-bottom:15px;
        &::before,
        &::after{
            content:"●";
            display:inline-block;
            color:var(--years-color3);
        }
        &::before{margin-right:5px;}
        &::after{margin-left:5px;}
    }
}