@charset "UTF-8";


/*===============================================
●共通
===============================================*/

    

/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {

/* !タイトル */
    #sub-title {
        margin: 70px auto 0 auto;
        text-align: center;
    }
    
    #sub-title > p:nth-of-type(1) {
        font-size: 40px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #sub-title > p:nth-of-type(2) {
        margin: 15px auto 0 auto
    }
    
    #sub-title > p:nth-of-type(2) > img {
        width: 44px;
    }
    

/* box01 */
    #box01 {
        width: 960px;
        margin:30px auto 120px auto;
        text-align:center;
    }
    
    #box01 > p {
        width: 960px;
        padding: 0 0 10px 0;
        text-align: left;
        font-size: 30px;
        color: #21548c;
        border-bottom: #21548c 2px solid;
    }
    
    #box01 > div {
        width: 960px;
        margin: 0 auto;
    }
    
    #box01 > div > div {
        width: 470px;
        margin: 20px 20px 0 0;
        padding: 30px 5px 30px 30px;
        background-color: #eeeeee;
        text-align: left;
    }
    
    #box01 > div > div:nth-of-type(2n) {
        margin: 20px 0 0 0;
    }
    
    #box01 > div > div > p:nth-of-type(1) {
        margin: 0 0 10px 0;
        font-size: 20px;
        font-weight: bold;
    }
    
    #box01 > div > div > p:nth-of-type(4) > span:nth-of-type(1) {
        display: inline-block;
        width: 50px;
        margin: 10px 15px 0 0;
        padding: 7px 0 5px 0;
        font-size: 14px;
        color: #FFF;
        text-align: center;
        background-color: #243e79;
        line-height: 100%;
        vertical-align: top;
    }
    
    #box01 > div > div > p:nth-of-type(4) > span:nth-of-type(2) {
        display: inline-block;
        margin: 15px 0 0 0;
        width: 345px;
        line-height: 120%;
        vertical-align: top;
    }


    
}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {	

/* !タイトル */
    #sub-title {
        margin: 70px auto 0 auto;
        text-align: center;
    }
    
    #sub-title > p:nth-of-type(1) {
        font-size: 29px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #sub-title > p:nth-of-type(2) {
        margin: 10px auto 0 auto
    }
    
    #sub-title > p:nth-of-type(2) > img {
        width: 34px;
    }
    
    
/* box01 */
    #box01 {
        width: 95%;
        margin:30px auto 70px auto;
        text-align:center;
    }
    
    #box01 > p {
        padding: 0 0 8px 0;
        text-align: left;
        font-size: 24px;
        color: #21548c;
        border-bottom: #21548c 1px solid;
    }
    
    #box01 > div {
        width: 100%;
        margin: 0 auto;
    }
    
    #box01 > div > div {
        width: 100%;
        margin: 20px auto 0 auto;
        padding: 15px 0 15px 15px;
        background-color: #eeeeee;
        text-align: left;
    }
    
    #box01 > div > div:nth-of-type(2n) {
        margin: 20px 0 0 0;
    }
    
    #box01 > div > div > p:nth-of-type(1) {
        margin: 0 0 10px 0;
        font-size: 18px;
        font-weight: bold;
    }
    
    #box01 > div > div > p:nth-of-type(4) > span:nth-of-type(1) {
        display: inline-block;
        margin: 10px 10px 0 0;
        padding: 7px 7px 5px 7px;
        font-size: 12px;
        color: #FFF;
        text-align: center;
        background-color: #243e79;
        line-height: 100%;
        vertical-align: top;
    }
    
    #box01 > div > div > p:nth-of-type(4) > span:nth-of-type(2) {
        display: inline-block;
        width: 81%;
        margin: 14px 0 0 0;
        line-height: 120%;
        vertical-align: top;
    }
    
    
    
}