body,html{  
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    font-size:10px;
}
@media screen and (max-width:1200px){
    body,html{
        font-size: 7px;
    }
}
@media screen and (max-width:850px){
    body,html{
        font-size: 5px;
    }
}

.layout_a{
    background-color: #ffffff;
}


/* top */
.top-section{
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:-100;
}
.background{
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('../img/prochalle_top-assets/PC_prochalle_top.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.banner1{
    position:absolute;
    left:0;
    width: 54%;
    height:100%;
    background-image: url('../img/prochalle_top-assets/PC_main_title_01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: transparent;
}
.banner2{
    position: absolute;
    right:0px;
    width: 4.5%;
    height: 100%;
    background-image: url('../img/prochalle_top-assets/PC_main_title_02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;

}

/* outline */

.outline-section {
    display: flex;
    width: 100%;
    height: auto;
    background-color: #010a3e;
    opacity: 0.95;
    padding-top: 200px;
    padding-bottom:197px;
    box-sizing: border-box;

}

.sidebar{
    width: 27%;
    padding-left: 11%;
    position: sticky;
    top:2rem;
    height: 10rem;
    top:15rem;
}


.sidebar.white-bg {
    background-color: #F5F9FF;
}

.sidebar.white-bg a {
    color: #010A3E !important;
}

.sidebar.white-bg .sidebar-str:before {
    border-top: 1.5px solid #010A3E;
}


.sidebar ul{
    list-style: none;
    padding-top: 0;
    text-align: left;
}

.sidebar ul li{
    margin: 0 0 2rem;
}

.sidebar ul li a{
    text-decoration: none;
    color: #ffffff;
    padding: 5px 0px;
    display: inline-block;
    transition: 0.3s;
    letter-spacing:1px;
    /* font-size: 2.24rem; */
    font-size:1.6rem;
    line-height: 1.5;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans";
    font-weight: bold;
}
.sidebar-str{
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.sidebar-str:before{
    border-top:1.5px solid white;
    content:"";
    height:1px;
    width:4.4rem;
    margin-right:1.6rem;
}

.sidebar ul li a:hover{
    text-decoration: underline;
    text-underline-offset: 8px;
}

.preface{
    width: 51%; 
    background-color: #010A3E;
    vertical-align: top;
}
.preface-title{
    padding-bottom:6rem;
    white-space: nowrap;
}

.preface h1{
/* font-size: 5.6rem; */
    font-size:4rem;
    margin-bottom: 1px;
    color:#010A3E;
    text-align: left;
    margin-top:0;
    font-family: 'Yu Gothic StdN';
}
.preface h1 span{
    width: 100%;
    max-width: 465px;
    background-color: #ffffff;
    padding-top:9px;
    padding-bottom: 3px;
    padding-left: 15px;
    padding-right: 15px;
}
.preface p {
    font-size: 1.8rem;
    line-height: 2.5;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    font-family: 'YuGothic';
    white-space: nowrap;
}
.outline-string-area{
    width: 9%;
    padding-top:9px;
}
.outline-string-area h2{
    background-color: #ffffff;
    color:#010A3E;
    writing-mode:vertical-lr;
    text-orientation: sideways;
    padding:7px 2.5px 8px 2.5px;    
    font-size: 2.4rem;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans";
    font-weight: bold;
    margin-left: auto;
}

.outline-banner-area {
    width: 23%; 
}

.outline-banner-area h2{
    color:#010A3E;
    font-size:10rem;
    writing-mode:vertical-lr;
    text-orientation: sideways;
    font-family: 'Helvetica';
    -webkit-text-stroke: #FFFFFF;
    -webkit-text-stroke-width: 1px;
    letter-spacing: 0px;
    font-weight: bold;
}

.outline-banner {
    width:45%;
    height: auto;
}


/* prize */
.prize-section{
    display: flex;
    padding-top:200px;
    padding-bottom:200px;
    width:100%;
    background-color: #F5F9FF;
    max-width: 100%;
    box-sizing: border-box;
}
.prize-banner-area{
    width:11%;
    
}
.prize-banner-area h2{
    color:#FFFFFF;
    font-size:10rem;
    writing-mode:vertical-lr;
    text-orientation: sideways;
    font-family: 'Helvetica';
    -webkit-text-stroke: #010A3E; 
    -webkit-text-fill-color:#FFFFFF;
    -webkit-text-stroke-width: 1px;
    letter-spacing: 0px;
    font-weight: bold;
    line-height: 1.2;
}

.prize-string-area{
    width: 5%;
    padding-top:9px;
    margin-right: 5rem;
}
.prize-string-area h2{
    background-color: #010A3E;
    color:#ffffff;
    writing-mode:vertical-rl;
    text-orientation: sideways;   
    padding:7px 2.5px 8px 2.5px;    
    font-size: 2.4rem;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans";
    font-weight: bold;

}

.quo-picture-area{
    width:70%;
    text-align: right;
    justify-content: right;
    position:relative;
    padding-right:13.5%;
    margin-top: 10px;
}
.quo-picture{
    width: 100%;
}

.relative-picture{
    position: relative;
}
.absolute-quo-str{
    position:absolute;
    bottom:-2.35rem;
    left:-4rem;
    width:34rem;
}
.quo-str-1000{
    vertical-align:0.2rem;
    font-size:4rem; 
    padding-right:1rem;
    padding-left:1.8rem;
}
.quo-str-en{
    font-size:3.2rem;
}

.absolute-quo-str p{
    white-space: nowrap;
    font-size:2.8rem;
    font-family: 'Yu Gothic StdN','YuGothic';
    color:#03155C;
    background-color: #ffffff;
    padding-right: 1.05rem;
    padding-left: 0.8rem;
}
.absolute-quo-str p span{
    line-height: 1.445;
    letter-spacing: -0.1rem;
}


/* flow */

.flow-section {
    display: flex;
    width: 100%;
    height: auto;
    background-color: #010A3E;
    opacity: 0.95;
    padding-top: 200px;
    padding-bottom:200px;
    box-sizing: border-box;
}

.flow-list-area{
    width:44.8%;
}
.flow-list{
    color:#ffffff;
}

.flow-step{
    display:flex;
    padding: 2rem 0rem 2rem 0;
    margin: 2rem 0rem 2rem 0;
}

.flow-step-no{
    margin-top:2.0rem;
    margin-right:5.3rem;
}

.flow-step-no span{
    font-size: 1.6rem;
    margin-right:0.5rem;
}

.flow-step-no h3{
    font-size: 2.4rem;
}

.flow-step h4{
    font-family: 'YuGothic';
    font-size:2.2rem;
    margin-bottom: 0;
    padding-top:1rem;
    letter-spacing: -1px;
    white-space: nowrap;
}
.flow-step h6{
    color:rgb(203, 138, 15);
    font-size: 1.2rem;
    margin-top:0.6rem;
}




.flow-string-area{
    width: 9%;
    padding-top:9px;
}
.flow-string-area h2{
    background-color: #ffffff;
    color:#010A3E;
    writing-mode:vertical-rl;
    text-orientation: sideways;
    padding:7px 2.5px 8px 2.5px;    
    font-size: 2.4rem;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans";
    font-weight: bold;
    margin-left: auto;
}

.flow-banner-area {
    width: 21%; 
    align-items: center;
}
.flow-banner-area h2{
    color:#010A3E;
    font-size:10rem;
    writing-mode:vertical-lr;
    text-orientation: sideways;
    font-family: 'Helvetica';
    -webkit-text-stroke: #FFFFFF;
    -webkit-text-stroke-width: 1px;
    letter-spacing: 0px;
    font-weight: bold;
}

.flow-banner {
    width:45%;
    height: auto;
}



/* confirm */

.confirm-section{
    width:100%;
    height: auto;
    padding:160px 0rem 188px;
    text-align: center;
    box-sizing: border-box !important;
    background-color: #F5F9FF;
    position: relative;
}
.confirm-section p{
    color:red;
    font-size: 1.2rem;
    margin-top:1rem;
    font-family: 'YuGothic';
}


.btn-try-practice{
    cursor: pointer;
    text-align: center;
    cursor: pointer;
    transition: 0.1s;
    text-decoration: none;
    padding: 3px;
    line-height: 4;
    font-size: 2.4rem;
    font-weight: bold;
    font-family: 'YuGothic';
    width: 43%;
    position: relative;
    background-color: #FFFFFF;
    color: #00125E;
    border: solid 0.1rem #eeeeee;
    box-shadow: 0px 20px 20px rgba(1,10,62,0.11);
}
.btn-try-practice a{
    text-decoration: none;
    color:#00125E
}

.btn-try-practice:hover{
    background-color: #686868;
    border:solid 0.1rem #686868;
}

.try-main-area{
    margin-top:5rem;
}

.btn-try-main{
    cursor: pointer;
    text-align: center;
    transition: 0.1s;
    text-decoration: none;
    padding: 3px;
    line-height: 4;
    font-size: 2.4rem;
    font-weight: bold;
    font-family: 'YuGothic';
    width: 43%;
    position: relative;
    background-color: #00125E;
    color: #FFF;
    border: solid 0.1rem #00125E;
    box-shadow: 0px 20px 20px rgba(1,10,62,0.1);
}
.btn-try-main a{
    text-decoration: none;
    color:#ffffff
}
.btn-try-main:hover{
    background-color: #4D5A8F;
    border:solid 0.1rem #4D5A8F;
}
.design-referer{
    color: #808080 !important;
    position: absolute;
    bottom:0;
    right:0;
    font-size: 1rem !important;
    margin-bottom:1.9px;
    margin-right: 3.1px;
}




/*  *//*  */
/*  *//*  */
/*  *//*  */
/*  *//*  */
/*  *//*  */
/*  *//*  */


@media screen and (max-width:600px){
    
    /* top SP */
    body,html{
        font-size: 10px;
    }

    .top-section{
        justify-content: center;
    }
    .background{
        background-image: url('../img/prochalle_top_sp-assets/SP_top.png');
    }
    .banner1{
        left:5%;
        bottom:11%;
        width: 90%;
        background-image: url('../img/prochalle_top_sp-assets/SP_main_title.png');
    }
    .banner2{
        background-image: none;
    }
    

    /* outline SP*/

    .outline-section {
        box-sizing: border-box;
        display: block !important;
        padding:152px 24px 250px 14px;

    }
    .sidebar{
        display: none;
    }
    
    .SP-outline-banner-area {
        align-items: left;
        width:100%;
        display:block !important;
        
    }
    .SP-outline-banner-area h2{
        color:#010A3E;
        font-size:6.4rem;
        font-family: 'Helvetica';
        -webkit-text-stroke: #FFFFFF;
        -webkit-text-stroke-width: 1px;
        letter-spacing: 0px;
        padding-top: 10%;
    }

    .SP-outline-banner {
        width:26%;
        height: auto;
    }

    .SP-outline-string-area{
        display:block !important;
        align-items: center;
        width:5.5rem;
        height: 3.4rem;
        box-sizing: border-box;
        margin-bottom: 6.3rem;
        font-weight: bold;
    }
    .SP-outline-string-area h2{
        background-color: #ffffff;
        color:#010A3E;
        padding: 5px 8px;
        text-align: center;
        font-size:1.8rem;
    }
    .preface{
        width: 100%;
    }
    .SP-preface-text{
        display: block !important;
    }
    .preface-text{
        display: none !important;
    }
    .preface-title{
        padding-bottom:3rem;
    }

    .preface h1{
        font-size: 2.8rem;
        font-family:"";
    }
    .preface p {
        font-size: 1.6rem;
        font-weight: bold;
        white-space: normal;
    }
    .outline-string-area{
        display: none;
    }
    .outline-banner-area {
        display: none;
    }


    /* SP Prize */
    .prize-section{
        display: block !important;
        align-items: left;
        padding:141px 24px  170px 14px;
    }
    .prize-banner-area{
        width:100%;
        text-align: left !important;
        padding-left:0% !important;

    }
    .prize-banner-area h2{
        writing-mode:initial;
        text-orientation:inherit;
        font-size:6.4rem;
    }
    .prize-banner{
        width:30%;
        padding-bottom:8rem;
    }
    .prize-string-area{
        width:5.5rem;
        height: 3.4rem;
        box-sizing: border-box;
        margin-bottom: 6.3rem;
        font-weight: bold;
        margin-left: 0;
        padding-top: 0;
    }
    .prize-string-area h2{
        writing-mode:horizontal-tb;
        margin-top:0;
        padding: 5px 8px;
        text-align: center;
        font-size:1.8rem;
    }
    .quo-picture-area{
        width: 100%;
        padding: 0;
    }
    .quo-picture{
        width: 87%;
    }
    .absolute-quo-str{
        bottom:-15.5px;
        left:-1px;
        width:240px;
    }
    
    .absolute-quo-str p{
        font-size:1.9rem;
        padding-right: 8.5px;
        padding-left: 6px;
    }
    .absolute-quo-str p span{
        line-height: 1.445;
        letter-spacing: -1px;
    }
    .quo-str-1000{
        font-size: 2.7rem;
    }
    .quo-str-en{
        font-size: 2.2rem;
    }
    

    /* SP flow */

    .flow-section {
        
        box-sizing: border-box;
        display: block !important;
        padding:151px 24px 150px 14px;
    }


    .SP-flow-banner-area {
        align-items: left;
        width:100%;
        display:block !important;
        /* transform: rotate(270deg) !important; */
    }
    .SP-flow-banner-area h2{
        color:#010A3E;
        font-size:6.4rem;
        font-family: 'Helvetica';
        -webkit-text-stroke: #FFFFFF;
        -webkit-text-stroke-width: 1px;
        letter-spacing: 0px;
    }

    .SP-flow-banner {
        width:26%;
        height: auto;
    }

    .SP-flow-string-area{
        display:block !important;
        align-items: center;
        width:11.8rem;
        height: 3.4rem;
        box-sizing: border-box;
        margin-bottom: 6.3rem;
        font-weight: bold;
    }
    .SP-flow-string-area h2{
        background-color: #ffffff;
        color:#010A3E;
        padding: 5px 8px;
        text-align: center;
        font-size:1.6rem;
    }
    .flow-list-area{
        width:100%;
        /* margin-left:10px; */
        margin: 0 auto 0;
        padding:0 0 0 10px;
    }
    .flow-list-area hr{
        margin: 0;
    }
    .flow-list{
        font-size: 16px;
        width: 100%;
    }
    
    .flow-step{
        display:block !important;
        padding: 0;
    }
    .flow-step-no span{
        font-size: 14px;
    }

    .flow-step h3{
        font-size: 20px;
    }
    
    .flow-step h4{
        font-size:16px;
        letter-spacing: 0;
        font-weight: bold;
    }
    .flow-step h6{
        font-size: 12px;
        margin-top: 8px;
    }
    
    
    .flow-string-area{
        display: none;
    }
    .flow-banner-area {
        display: none;
    }

    /* SP confirm */
    
    .confirm-section{
        padding-top: 15rem;
        padding-bottom: 8rem;
    }
    .confirm-section a{
        
        font-size:1.8rem;
        font-weight: bold;
    }
    
    .btn-try-practice{
        line-height: 4.1;
        font-size: 1.8rem;
        width: 88%;
    }
    .confirm-section p{
        font-size:1.2rem;
        margin-top:0.5rem;
        margin-bottom:3rem;
    }
    
    
    .try-main-area{
        margin-top:2rem;
    }
    
    .btn-try-main{
        line-height: 4.1;
        font-size: 1.8rem;
        width: 88%;
    }
    .design-referer{
        display: none;
    }

    .area_rsystemlink{
        /* display: none !important; */
    }
    .logo-white{
        display:none !important;
    }
    .logo-black{
        display: block !important;
        margin:0;
    }
    .hamburger span{
        background-color: black;
    }
    .active_hamburger span:nth-of-type(1) {
        -webkit-animation: active-menu-ber01 0.75s forwards;
        animation: active-menu-ber01 0.75s forwards;
        top: -0.5rem;
    }
    #ttl_hamburger{
        color:black !important;
    }
}