* {
    box-sizing: border-box;
}

html,body {
    background: #fff;
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

/*全体のレイアウト設定*/

    #step1-wrapper,
    #step2-wrapper,
    #step3-wrapper{
        max-width:700px;
        background:#fff;
        margin:0 auto;
    }


    #logoarea{
        background:#3b5998;
        padding:10px 0;
    }

    .h1{
        color:#fff;
        text-align:center;
        margin:0;
    }

    .h1 a{
        color:#fff;
        text-decoration:none;
    }

    .h1 a:hover{
        color:#fff;
        text-decoration:none;
    }

    .site-description{
        color:#fff;
        text-align:center;
        margin:0;
    }

    #stepstatus{
        width:100%;
        margin:0 auto;
        background:#f5f5f5;
    }

    #stepstatus-container{
        max-width:700px;
        text-align:center;
        list-style-type:none;
        background:#f5f5f5;
        padding-left:0;
        margin:0 auto;
    }

    #stepstatus-container li{
        width:24%;
        font-size:15px;
        display:inline-block;
        background:#f5f5f5;
        padding:20px 0;
    }

    .active{
        color:#fff;
        background:#3498db !important;    
    }

    .step1link{
        text-decoration:none;
        color:black;
    }

#footer {
    width: 100%;
    background: #3b5998;
    padding: 20px 0;
    margin-top:auto;
}

    #footer-inner p{
        color:#fff;
        max-width:700px;
        text-align:center;
        margin:0 auto;
    }

    #msg{
        color:#FF0000;
        font-weight:bold;
        text-align:center;
    }

    /*試験日程ページのレイアウト（calender.php用）*/

    .step1-section{
        margin-top:40px;
    }

    .wrap-stepsection{
        margin-bottom:40px;
        background:#fff;
    }

    .h2-step{
       font-size:18px;
       border-bottom:3px solid #3b5998;
       padding-bottom:5px;
       text-align:left
    }

    .survey-flow{
        font-size:16px;
        text-align:center;
        border:2px solid #FF0000;
        background:#eee;
        padding:5px;
    }

    .survey-flow-content{
        background:#eee;
        padding:20px;
    }

    .topics{
        max-width:650px;
        margin:20px auto;
        border:3px solid #ff0000
    }

    .topics p.topics-caution{
        font-weight:bold;
        color:#FF0000;
    }
    
    .examlist-wrap ul{
        text-align:center;
        list-style-type:none;
        padding:0;
        margin:0;
    }
    
    .payment-list li{
        padding:5px 0;
    }

    .calendar-topmessage{
        text-align:left;
        font-size:18px;
        margin:30px 0
    }

    .calendar-message{
        text-align:center;
        font-size:18px;
    }

    .examlist-wrap{
        border:2px solid #d5d5d5;
        margin-top:30px;
    }

    .examlist{
        font-weight:bold;
        color:#ff0000;
    }

    /*---受験者情報入力ページのレイアウト---*/

    .h2-calendar{
        text-align: center;
        font-size: 20px;
    }

    .h2{
            font-size:18px;
            border-left:8px solid #3498db;
            padding:5px 10px;  
    }

    .tablewrap {
        max-width: 700px;
        margin: 30px auto;
}

    .inputform{
        width:700px;
        border-collapse:collapse;
        margin:10px auto;
    }

    .th_discount{
        height:100px;
    }

    .displayon{
        display:block;   
    }

    .displayoff{
        display:none;    
    }

    #check_discount{
        color:#333;
        font-weight:normal;
    }

    #workplace_name,
    #ticketlabel{
        margin-bottom:0;
        color:#000;
        font-weight:bold;
    }

    .discount_txt{
        font-size:14px;
        margin-bottom:0;
        color:#ff0000;
        font-weight:bold;
    }

    .require-comment{
        font-weight:bold;
        color:#ff0000;
        margin-bottom:0;
    }

    .agreement-area{
        max-width:700px;
        margin:20px auto;
    }

    .agreement-area ul{
        font-size:14px;
        padding-left:0;
        list-style-position: inside;
    }


    .agreement-area ul li{
        padding:10px 0;
    }

    .agreement-comment{
        font-size:15px;
        text-align:center;
    }

    .agreement-check{
        text-align:center;
        border:1px solid #d5d5d5;
        background:#EEFFFF;
        padding:10px 0;
    }

    .required{
        font-size: 12px;
        background: #ff0000;
        color: #fff;
        padding: 1px 2px;
        margin-right: 5px;
        float: right;
    }

    .required-left{
        font-size: 12px;
        background: #ff0000;
        color: #fff;
        padding: 1px 2px;
    }

    .tablenotice {
        display: block;
        border: 3px solid #d5d5d5;
        padding: 5px;
        margin-bottom: 10px
    }

    .exammenu a:hover{
        opacity:0.7;
    }

@media screen and (min-width: 841px) {
    .topics{
        text-align:center;
        max-width:670px;
        margin:20px auto;
        padding:0 15px;
        border:3px solid #ff0000
    }

    .inputform th{
        width:220px;
        text-align:left;
        font-size:14px;
        border:1px solid #d5d5d5;
        background:#EEFFFF;
        padding:10px;

    }

    .inputform td{
        width:480px;
        font-size:14px;
        border:1px solid #d5d5d5;
        padding:10px;
    }

    #stepstatus-container li {
        width: 24%;
        font-size: 15px;
        display: inline-block;
        background: #f5f5f5;
        padding: 10px 0;
    }

    textarea{
        width:470px;
        height:200px;
        margin:auto;
    }

}

/*---スマートフォン横向き・タブレット縦向き用レイアウト---*/
@media screen and (max-width: 840px) {

    #step1-wrapper,
    #step2-wrapper,
    #step3-wrapper{
        max-width:568px;
        background:#fff;
        padding:0 20px;
        margin:0 auto;
    }

    .h2 {
        font-size: 13px;
        border-left: 8px solid #3498db;
        padding: 2px 5px;
    }

    .topics{
        text-align:center;
        max-width: 550px;
        margin: 20px auto;
        padding: 0 15px;
        border: 3px solid #ff0000;
    }

    #stepstatus-container li {
        width: 24%;
        font-size: 15px;
        display: inline-block;
        background: #f5f5f5;
        padding: 10px 0;
    }

    .tablewrap{
        width:100%;
        margin-bottom:20px;
    }

    .inputform th{
        text-align:left;
        font-size:14px;
        border:1px solid #d5d5d5;
        background:#EEFFFF;
        padding:10px;
        display:block;
    
    }
    
    .inputform td{
        font-size:14px;
        border:1px solid #d5d5d5;
        padding:10px;
        display:block;
    }

    .inputform{
        width:100%;
        border-collapse:collapse;
        margin:10px auto;
    }

    .inputname-mb{
        width:100px;
        margin-right:15px;
    }

    #footer-inner p{
        color:#fff;
        text-align:center;
        font-size:15px;
    }

    textarea{
        width:340px;
        height:200px;
        display:block;
        margin:auto;

    }

}


/*---スマートフォン縦向き用レイアウト---*/
@media screen and (max-width: 480px) { 

    /*--STEP1～3共通レイアウト--*/

    #step1-wrapper,
    #step2-wrapper,
    #step3-wrapper{
        max-width:414px;
        background:#fff;
        padding:0 15px;
        margin:0 auto;
    }

    .h1 {
        color: #fff;
        text-align: center;
        font-size: 20px;
        margin: 0;
    }

    .h2 {
        font-size: 14px;
        border-left: 8px solid #3498db;
        padding: 2px 5px;
    }

    .topics{
        max-width:250px;
        padding:0 15px;
        margin:20px auto;
        border:3px solid #ff0000
    }

    #stepstatus-container li{
        width:30%;
        font-size:12px;
        display:inline-block;
        background:#f5f5f5;
        padding:5px 0;
    }
    
    .topics h2{
        font-size:16px;
    }

    .topics p{
        font-size:12px;
    }

    .topics p.topics-caution{
        font-size:10px;
    }

    /*--STEP1--*/
    .calendar-topmessage{
        text-align:center;
        font-size:14px;
        margin:30px 0
    }

    .fc-center h2{
        font-size:18px;
    }


    #gcaldate{
        font-size:14px;
    }


    /*--STEP2・3共通--*/
    .tablewrap{
        width:100%;
        margin-bottom:20px;
    }
    
    .inputform{
        width:100%;
        border-collapse:collapse;
        margin:10px auto;
    }
    
    .inputform th{
        text-align:left;
        font-size:14px;
        border:1px solid #d5d5d5;
        background:#EEFFFF;
        padding:10px;
        display:block;
    
    }
    
    .inputform td{
        font-size:14px;
        border:1px solid #d5d5d5;
        padding:10px;
        display:block;
    }

    .inputform input{
        padding:10px 0;
    }

    .inputname-mb{
        width:70px;
        margin-right:15px;
    }

    .th_discount{
        height:100px;
    }
    
    .formparts-postcode{
        width:100px;
    }

    textarea{
        width:300px;
        height:200px;
        display:block;
        margin:auto;

    }

    .displayon{
        display:block;   
    }
    
    .displayoff{
        display:none;    
    }
    
    #check_discount{
        color:#333;
        font-weight:normal;
    }
    
    #workplace_name,
    #ticketlabel{
        margin-bottom:0;
        color:#000;
        font-weight:bold;
    }
    
    .discount_txt{
        font-size:14px;
        margin-bottom:0;
        color:#ff0000;
        font-weight:bold;
    }
    
    .require-comment{
        font-weight:bold;
        color:#ff0000;
        margin-bottom:0;    
    }
    
    .agreement-area{
        max-width:700px;
        margin:20px auto;
    }
    
    .agreement-area ul{
        font-size:14px;
        padding-left:0;
        list-style-position: inside;
    }
    
    
    .agreement-area ul li{
        padding:10px 0;
    }
    
    .agreement-comment{
        font-size:15px;
        text-align:center;
    }
    
    .agreement-check{
        text-align:center;
        border:1px solid #d5d5d5;
        background:#EEFFFF;
        padding:10px 0;
    }
    
    .required{
        font-size: 12px;
        background: #ff0000;
        color: #fff;
        padding: 1px 2px;
        /*float:right;*/
    }
    
    .required-left{
        font-size: 12px;
        background: #ff0000;
        color: #fff;
        padding: 1px 2px;
    }
  
    #footer{
        margin-top:20px;
    }

    #footer-inner p{
        color:#fff;
        text-align:center;
        font-size:10px;
    }

}

@media screen and (max-width: 320px) {

    .h1 {
        color: #fff;
        text-align: center;
        font-size: 20px;
        margin: 0;
    }

    .h2 {
        font-size: 11px;
        border-left: 5px solid #3498db;
        padding: 2px 5px;
    }

    .inputname-mb{
        width: 70px;
        margin-right: 15px;
    }


    #stepstatus-container li {
        width: 24%;
        font-size: 12px;
        display: inline-block;
        background: #f5f5f5;
        padding: 5px 0;
    }

    textarea {
        width: 260px;
        height: 200px;
        margin:auto;
        display:block;
    }

    #footer-inner p{
        color: #fff;
        text-align: center;
        font-size: 10px;
    }

}