@charset "utf-8";
/* --------------------------------------------------
message.css
-------------------------------------------------- */

/*
MESSAGE
-------------------------------------------------- */
/*TITLEBOX
------------------------------ */
.vol1 .titleBox {
    background:#5ea5dc url(../img/message/vol1/hd_im_01_pc.jpg) no-repeat left 20%;
    background-size:50% auto;
}

.vol2 .titleBox {
    background:#5ea5dc url(../img/message/vol2/hd_im_01_pc.jpg) no-repeat left 50%;
    background-size:50% auto;
}

.titleBox {
    height:250px;
}

.titleBox .txt {
    float:right;
    width:50%;
    position:relative;
    height:250px;
}

.mainSec .titleBox h2 {
    padding-top:20px;
}

.titleBox .txt p {
    position:absolute;
    right:20px;
    bottom:20px;
    line-height:0;
}

.titleBox .thumb {
    line-height:0;
    width:50%;
}

@media ( max-width: 1000px ) {
    .mainSec .titleBox h2 {
        text-align:left;
        padding:30px 0 0 30px;
    }
    .mainSec .titleBox h2 img {
        width:230px;
        height:auto;
    }
}

@media ( max-width: 768px ) {
    .vol1 .titleBox,.vol2 .titleBox {
        background:#5ea5dc;
        height:200px;
        background-size:auto 50%;
    }

    .titleBox .txt {
        float:none;
        width:100%;
        height:200px;
    }

    .mainSec .titleBox h2 {
        text-align:center;
        display:block;
        width:100%;
        padding:20px 0;
    }

    .mainSec .titleBox h2 img {
        width:200px;
        height:auto;
    }

    .titleBox .txt p img {
        width:230px;
    }
}

.mainSec .titleBox h2 {
    margin:0;
}

@media ( max-width: 500px ) {
    .mainSec .titleBox {
        height:170px;
    }

    .titleBox .txt {
        height:170px;
    }

    .mainSec .titleBox h2 {
        text-align:left;
        padding:15px 0 0 40px;
    }

    .mainSec .titleBox h2 img {
        width:180px;
    }

    .titleBox .txt p img {
        width:180px;
    }
}

/*INTRO
------------------------------ */
.introBox {
    text-align:center;
    margin-bottom:50px;
}

.intro {
    display:inline-block;
    padding:10px 0;
    background:url(../img/message/co_bg_01.gif) repeat left top;
}

.intro span {
    background:#fff;
    display:block;
    padding:20px 20px;
    font-size:1.6rem;
}

.introduceBox {
    margin-bottom:50px;
}

.introduceBox p {
    font-size:2.2rem;
    font-weight:bold;
    color:#5ea5dc;
    text-align:center;
    padding-bottom:40px;
    margin-bottom:30px;
    background:url(../img/message/co_ln_01.gif) no-repeat center bottom;
}


@media ( max-width: 768px ) {
    .intro span {
        font-size:1.5rem;
    }

    .introduceBox {
        margin-bottom:30px;
    }

    .introduceBox p {
        font-size: 1.9rem;
    }
}

@media ( max-width: 400px ) {
    .intro span {
        font-size:1.4rem;
        padding:10px 0;
    }
}


.faqArea {
    background:url(../img/message/co_bg_02.gif) repeat left top;
    padding:50px 0 0;
    margin-bottom:50px;
}

.faqBox {
    background:url(../img/message/co_bg_03.png) no-repeat bottom right;
    padding-bottom:30px;
    margin-bottom:50px;
}

.faqBox .inner {
    padding:20px 40px 0;
    text-align:center;
    background:#fff;
    position:relative;
}


@media ( max-width: 768px ) {
    .faqBox {
        margin-bottom:30px;
    }
    .faqBox .inner {
        padding:20px 30px 0;
    }
}

@media ( max-width: 600px ) {
    .faqBox .inner {
        padding:20px 20px 0;
    }
}

@media ( max-width: 400px ) {
    .faqBox .inner {
        padding:20px 15px 0;
    }
}

p.arrowLink {
    text-align:left;
}

p.arrowLink i {
    color:#5ea5dc;
    margin-right:7px;
}

p.arrowLink a {
    color:#333;
    font-size:1.4rem;
    text-decoration:none;
}

.mainSec p.question {
    font-size:2.2rem;
    color:#5ea5dc;
    padding:30px 0 30px 60px;
    position:relative;
    display:inline-block;
}

/*.mainSec {*/
    /*counter-increment: question;*/
/*}*/

.faqArea p.question em {
    font-size:2rem;
    width:50px;
    height:50px;
    line-height:50px;
    border-radius:25px;
    display:inline-block;
    text-align:center;
    background:#5ea5dc;
    color:#fff;
    font-style:italic;
    margin-right:20px;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-25px;
    /*content: "Q"counter(question);*/
}

.mainSec .answerBox {
    display:inline-block;
}

.vol1.mainSec .answerBox p {
    padding-left:45px;
    display:block;
}

.vol1.mainSec .answerBox p.question {
    padding:30px 0 30px 60px;
}

.mainSec .answerBox p {
    position:relative;
    margin-bottom:20px;
    text-align:left;
    display:block;
}

.mainSec .answerBox p span {
    position:absolute;
    left:0;
    color:#5ea5dc;
    text-align:left;
}

@media ( max-width: 768px ) {
    .mainSec p.question {
        padding:20px 0;
    }
    .mainSec p.question em {
        position:relative;
        display:block;
        text-align:center;
        margin:0 auto 15px;
    }
    .mainSec .answerBox p {
        margin-bottom:15px;
    }


    .vol1.mainSec .answerBox p.question {
        padding:30px 0 30px;
    }
}

/* SUB VISUAL
------------------------------ */
.subVisual {
    line-height:0;
    margin-bottom:50px;
}

.subVisual img {
    width:100%;
    height:auto;
}

@media ( max-width: 768px ) {
    .subVisual {
        margin-bottom:30px;
    }
}


/* NEXT ARTICLE
------------------------------ */
.nextArticleBox {
    text-align:center;
}

.nextArticleBox .container {
    padding-top:70px;
    background:url(../img/message/co_ln_02.gif) no-repeat top center;
}

.nextArticleBox p {
    color:#5ea5dc;
    font-size:2rem;
    margin-bottom:20px;
}

@media ( max-width: 768px ) {
    .nextArticleBox p {
        font-size:1.7rem;
    }
}