@charset "UTF-8";
/*===========================================
Registration
===========================================*/

/*-------------------------------------------
Registration
-------------------------------------------*/
.registration__guideline{
    color:#000;
}
.registerPreview{
    position:relative;
}
    .registerPreview > :is(h1, h2, h3, h4, h5, p){
        margin-bottom:.5em;
    }
    .registerPreview > ol,
    .registerPreview > ul{
        margin:0;
        padding-left:1.7em;
    }
    .reg__fees h4{
        color:var(--primary-color);
        font-size:1.125rem;
        margin-bottom:.5em;
    }
    .reg__fees .table__list > thead > tr > th:first-child{
        background-color:#F0F3F5;
        box-shadow:1px 0 0 0 rgba(var(--primary-rgb),.2), 2px 0 5px 0px rgba(0,0,0,.15);
        position:sticky; left:0; z-index:5;
    }
    .reg__fees .table__list > thead > tr > th:last-child{
        width:30%;
    }
        .reg__fees .table__list > thead div{
            white-space:nowrap;
        }
    .reg__fees .table__list > tbody > tr > th:first-child{
        background-color:#f7f7f7;
        box-shadow:1px 0 0 0 rgba(0,0,0,.1), 2px 0 5px 0px rgba(0,0,0,.15);
        position:sticky; left:0; z-index:5;
    }
    .reg__fees .table__list > tbody > tr > td{
        color:#111;
        font-size:1.125rem;
        text-align:center;
    }
    .reg__fees .table__list > tbody > tr > th:last-child{
        white-space:nowrap;
    }
.e-registration{
    background-color:#fff;
    margin-top:10px;
}
    .registration__index .part__title{
        margin-top:0;
    }
    .registration__index .buttons{
        padding:0;
    }
@media screen and (max-width:768px){
    .e-registration .buttons .btn{
        padding-left:15px; padding-right:15px;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .reg__fees .table__list > tbody > tr > td{
        font-size:1rem;
    }
}
@media screen and (max-width:576px){
    .fees__wrap{
        overflow-y:hidden;
        overflow-x:auto;
    }   
        .reg__fees h4{
            margin-bottom:0;
        }
        .fees__wrap::before{
            display:none;
            content:"* you can left or right swipe program.";
            color:Chocolate;
            font-size:.75rem;
            line-height:1;
            padding:5px 0;
            position:sticky; left:0;
        }
        .reg__fees .table__list{
            /* width:580px; */
        }
    .e-registration .buttons .btn{
        width:100%;
        margin:0 auto 15px;
    }
}

/*-------------------------------------------
Registration Form
-------------------------------------------*/
#registration .form__container{
    background-color:#fff;
    color:#111;
}
    .title__type,
    .degree__type,
    .category__type{
        margin-left:1em;
    }
    .title__type:first-of-type,
    .degree__type:first-of-type,
    .category__type:first-of-type{
        margin-left:0em;
    }
    [name*="_other"]{
        width:120px;
    }
    .category__other [name*="_other"]{
        width:200px;
    }
    .table__list thead .explanation{
        color:red;
    }
    .accompanying__data{
        border-collapse:separate;
        border-spacing:0;
    }
        .accompanying__data thead > tr > th:first-of-type{
            background-color:#F0F3F5;
            box-shadow:1px 0 0 0 rgba(var(--primary-rgb),.2), 2px 0 5px 0px rgba(0,0,0,.15);
            position:sticky; left:0; z-index:5;
            width:155px;
        }
        .accompanying__data tbody > tr > td{
            border-top:1px solid transparent
        }
        .accompanying__data tbody > tr > td:first-of-type{
            background-color:#f9f9f9;
            box-shadow:1px 0 0 0 rgba(0,0,0,.1), 2px 0 5px 0px rgba(0,0,0,.15);
            font-weight:700;
            position:sticky; left:0; z-index:5;
        }
    .registration__fees,
    .accompanying__fees{
        border-collapse:separate;
        border-spacing:0;
    }
        .registration__fees thead > tr > th:first-of-type,
        .accompanying__fees thead > tr > th:first-of-type{
            background-color:#F1F1F3;
            box-shadow:1px 0 0 0 rgba(var(--primary-rgb),.2), 2px 0 5px 0px rgba(0,0,0,.15);
            position:sticky; left:0; z-index:5;
        }
        .registration__fees tbody > tr > th,
        .accompanying__fees tbody > tr > th{
            border-top:none;
            box-shadow:1px 0 0 0 rgba(0,0,0,.1), 2px 0 5px 0px rgba(0,0,0,.15);
            position:sticky; left:0; z-index:5;
        }
        .registration__fees tbody > tr > td,
        .accompanying__fees tbody > tr > td{
            border-top:none;
            font-size:1rem;
        }
            [name^="fee_type_id"]{
                position:absolute;
            }
            [name^="fee_type_id"] + label{
                display:block;
                padding-left:30px; padding-right:0;
            }
            [name*="full_name_"]{
                width:100%;
                margin:0;
            }
            .attend__flag{
                position:relative;
                padding-left:30px;
            }
            .attend__flag:nth-of-type(n+2){
                margin-top:10px;
            }
                .attend__flag [type="radio"]{
                    position:absolute; left:0;
                }
                .attend__flag [type="radio"] + label{
                    padding-right:0;
                }
            .meal__type{
                position:relative;
                padding-left:30px;
            }
            .meal__type:nth-of-type(n+2){
                margin-top:10px;
            }
                .meal__type [type="radio"]{
                    position:absolute; left:0;
                }
                .meal__type [type="radio"] + label{
                    padding-right:0;
                }
            .privacy__policy__centent{
                background-color:#fffbe1;
                border:2px solid #ffdd00;
                color:#000;
                font-size:.875rem;
                max-height:15em;
                padding:20px;
                overflow-y:auto;
            }
                .privacy__policy__centent h3:first-of-type{
                    margin-top:0;
                }
            .privacy__policy__check{
                font-weight:700;
                margin:15px 0 0;
                position:relative;
                padding-left:30px;
            }
            #privacy_policy_flag{
                position:absolute; left:0;
            }
                #privacy_policy_flag [type='checkbox']{
                    
                }
@media screen and (max-width:1280px){/* Air Mac */
    .registration__fees thead > tr > th:first-of-type{
        width:300px;
    }
    .accompanying__fees thead > tr > th:first-of-type{
        width:200px;
    }
}
@media screen and (max-width:1024px){
    .category__type{
        display:block;
        margin-left:0; margin-top:8px;
    }
    .category__type:nth-last-of-type(2){
        display:inline-block;
    }
        .category__type [type=checkbox],
        .category__type [type=radio]{
            margin-top:0;
        }
}
@media screen and (max-width:992px){
    [name="password"] + .explanation{
        display:block;
    }
    .registration__fees__wrap,
    .accompanying__fees__wrap,
    .accompanying__data__wrap{
        margin-right:-15px;
        padding-right:15px;
    }
        .registration__fees{
            width:960px;
        }
        .accompanying__fees{
            width:960px;
        }
        .accompanying__data{
            width:980px;
        }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .registration__fees__wrap,
    .accompanying__fees__wrap,
    .accompanying__data__wrap{
        overflow-x:auto;
    }
        .registration__fees__wrap::before,
        .registration__fees__wrap::after,
        .accompanying__fees__wrap::before,
        .accompanying__fees__wrap::after,
        .accompanying__data__wrap::before,
        .accompanying__data__wrap::after{
            display:block;
            content:"* you can left or right swipe program.";
            color:brown;
            font-size:.75rem;
            line-height:1;
            padding:5px 0;
            position:sticky;
            left:0;
        }
        .registration__fees{
            width:620px;
        }
        .accompanying__fees{
            width:620px;
        }
        .accompanying__data{
            width:800px;
        }
            .registration__fees thead > tr > th:first-of-type{
                width:auto;
            }
            .accompanying__fees thead > tr > th:first-of-type{
                width:auto;
            }
            .registration__fees thead > tr > th:nth-child(n+2),
            .accompanying__fees thead > tr > th:nth-child(n+2){
                width:125px;
            }
            .accompanying__data thead > tr > th:nth-child(2){
                width:250px;
            }
}
@media screen and (max-width:768px){
    .title__type,
    .degree__type,
    .category__type{
        display:block;
        margin-left:0; margin-top:8px;
    }
    .title__type:nth-last-of-type(2),
    .degree__type:nth-last-of-type(2){
        display:inline-block;
    }
        .title__type [type=checkbox],
        .title__type [type=radio],
        .degree__type [type=checkbox],
        .degree__type [type=radio]{
            margin-top:0;
        }
        .category__type{
            position:relative;
            padding-left:30px;
        }
            .category__type [type=radio]{
                position:absolute; left:0;
            }
}
@media screen and (max-width:576px){
    #registration .form__container{
        margin:0 -15px;
        padding:30px 15px;
    }
        [name="mobile"] + .explanation{
            display:block;
        }
        .privacy__policy__centent{
            max-height:20em;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .category__other [name*="_other"]{
        margin-left:28px; margin-top:8px;
        width:calc(100% - 30px);
    }
    .registration__fees,
    .accompanying__fees{
        width:535px;
    }
        .table__list thead .explanation{
            font-size:.75rem;
        }
        .registration__fees thead > tr > th:nth-child(n+2),
        .accompanying__fees thead > tr > th:nth-child(n+2){
            width:115px;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    #registration .form__container{
        margin:0 -10px;
    }
        .registration__fees__wrap,
        .accompanying__fees__wrap,
        .accompanying__data__wrap{
            margin-right:-10px;
            padding-right:10px;
        }
}

/*-------------------------------------------
Credit Card
-------------------------------------------*/
#payment_response .table__content td{
    color:#000;
}