@charset "utf-8";

/*スポーツ用義足・車いす事前体験会 pre-trial*/
/* top画像 */
.mainPicture{
    display:flex;
    gap: 0 15px;
    margin-bottom:25px;
    & > div{
        width:calc((100% - 60px)/5);
        & img{
            display:block;
        }
    }
}
@media only screen and (max-width:999px) {
    .mainPicture{
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        & > div{
            width:calc((100% - 30px)/3);
        }
    }
}
/* 見出し */
.pre-trial .tagBox h2{
    border-left:5px solid var(--yc-sub-E5);
}
/* 開催日バナー */
.pre-trial .tagBox .jizentaikenBnr{
    display:flex;
    gap: 0 50px;
    margin-bottom:50px;
    & > div{
        width:50%;
        line-height:1.4;
        &[class^="prg"]{
            display:flex;
            gap:5px 0;
            flex-direction: column;
            padding:10px;
            background-color:rgba(255,255,255,0.8);
            border:1px solid var(--yc-sub-E4);
            & > div:nth-child(1){
                width:100%;
                display:flex;
                align-items: center;
                gap:0 15px;
                & .kai{
                    font-size:2.0rem;
                    padding:10px;
                    font-weight:bold;
                    background-color:var(--yc-sub-E1);
                }
                & .date{
                    & > span{
                        font-size: 1.4em;
                        display: inline-block;
                        margin-left: 3px;
                    }
                    & div.typeStart{
                        font-size:1em;
                        display:inline-block;
                        margin:0 0.3em 0 0em;
                        font-size:0.9em;
                    }
                    & > div.typeStart:first-child{margin-left:0}
                    & div.timeTxt{
                        display:inline-flex;
                        align-items: baseline;
                        & > span{
                            display:inline-block;
                            font-size:0.9em;
                            margin:0 0.1em;
                        }
                    }
                }
            }
            & .place{
                font-size:1.1em;
                text-align: center;
            }
        }
    }
  
}
@media only screen and (max-width:999px) {
    .pre-trial .tagBox .jizentaikenBnr{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px 0px;
        margin-bottom:15px;
        & > div{
            width:100%;
            &[class^="prg"]{
                gap:5px 0;
                & > div:nth-child(1){
                    width:100%;
                    display:flex;
                    align-items: center;
                    gap:0 15px;
                    & .kai{
                        font-size:1.8rem;
                    }
                }
                & .place{
                        font-size:1em;
                }
            }
        }   
    }
}
/* 概要テーブル */
.tagBox table.preTrial-table,
.tagBox table.preTrial-table td,
.tagBox table.preTrial-table th{
    border: 1px solid var(--yc-sub-E4);
}
.tagBox .preTrial-table{
    margin-bottom:40px;
    & th{
        background-color:var(--yc-sub-E1);
        color:var(--yc-sub-E5);
        font-weight:bold;
        white-space: nowrap;
        width:150px;
        padding-left:calc(10px + 0.5em);
        text-align: center;
        letter-spacing: 0.5em;
    }
    & td{
        background-color:#fff
    }
}
@media only screen and (max-width:999px) {
    .tagBox .preTrial-table{
        & th{
            width:100%;
        }
    }
}
/* ご参加の流れ */
.tagBox .preTrial-Flow-col{
    & ul{
        display:flex;
        flex-wrap:wrap;
        gap:50px 0;
        & > li{
            list-style-type:none;
            margin:0;
            width:100%;
            position: relative;
            background-color:var(--yc-sub-E1);
            display:flex;
            flex-direction: column;
            gap:0px;
            min-height:70px;
            padding:1em 0.5em 0.5em 0;
            &::after{
                content:"\f078";
                font-family:"Font Awesome 5 Free";
                font-weight:900;
                font-size:2em;
                display: inline-block;
                line-height:1;
                left:calc(50% - 1rem);
                bottom:calc(-25px - 0.3em) ; 
                position:absolute;
            }
            &:nth-child(4n)::after{
                display:none
            }
            & .num{
                height:auto;
                width:auto;
                display:inline-flex;
                gap:0 1em;
                align-items: center;
                border-top-right-radius: 40px;
                border-bottom-right-radius: 40px;
                background-color:var(--yc-sub-E5);
                color:#fff;
                padding:0.5em 2em;
                & > div:nth-child(1){
                    & span{
                        font-size:1.1em;
                        display:inline-block;
                        margin-left:3px;
                    }
                }
                & > div:nth-child(2){
                    white-space: nowrap;
                    font-size:2.5rem;
                    font-weight:bold;
                }
            }
            & > div:nth-child(2){
                padding:1em 0.5em 0.5em 1em;
                display:inline-block;
                font-size:1.8rem;
                color:var(--yc-sub-E5);
            }
        }
    }
}
@media only screen and (max-width:797px) {
    .tagBox .preTrial-Flow-col{
        & ul{
            & > li{
                & .num{
                    & > div:nth-child(2){
                        font-size:1.4em;
                    }
                }
                & > div:nth-child(2){
                    font-size:1.7rem;
                }
            }
        }
    }
}
.trial .buttonLink1 a{
    background-color:var(--yc-sub-E4);
    &:hover{
        background-color:var(--yc-sub-E5);
    }
}