@charset "UTF-8";

/*******************************
共通CSS
********************************/

p {
    font-family: "Noto Sans JP", serif;
}


/***********************************************************************
「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
  **********************************************************************/
@media all and (min-width: 751px) {

    .column_wrapper {
        background: url(../images/column_bg.png) no-repeat top;
        width: 1920px;
        height: 1081px;
        position: relative;
        padding: 71px 0 0;
        background-size: cover;
    }

    .column_tit {
        background: url(../images/column_tit.svg) no-repeat center;
        background-size: cover;
        width: 418px;
        height: 87px;
        margin: 0px auto;
    }

    /* column_area
------------------------------------------------------------*/

    .column_area {
        background: url(../images/column_area_bg.png) no-repeat center;
        background-size: cover;
        width: 1310px;
        height: 870px;
        margin: 0px auto 0px;
        padding: 0px 16px;
        position: relative;
    }

    .column_lead p {
        font-size: 14px;
        font-weight: bold;
        width: 608px;
        position: relative;
        margin: 0px auto;
        color: #000;
        text-align: center;
        top: 171px;
    }

    .column_interview {
        width: 1020px;
        padding: 0px 145px;
        z-index: 1;
        top: 213px;
        position: relative;
    }

    .question {
        font-size: 15px;
        font-weight: 800;
        color: #D035FF;
        margin: 19px 0px 3px;
        text-align: justify;
    }

    p.question::before {
        content: "──";
    }

    p.answer {
        font-size: 18px;
        font-weight: 500;
        color: #000;
        line-height: 29px;
        text-align: justify;
        margin: 0;
        text-indent: -54px;
        margin-left: 54px;
    }

    div.column_interview p.answer span.name {
        font-weight: 500;
        display: inline-block;
        background: #584EF0;
        width: 2.4em;
        text-align: center;
        margin-right: 0.6em;
        color: #fff;
        text-indent: 0;
    }
}

/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
  **********************************************************************/
@media only all and (max-width: 750px) {

    /* tenbo_wrapper
------------------------------------------------------------*/

    .column_wrapper {
        background: url(../images/column_bg_sp.png) no-repeat top;
        width: 750px;
        height: 2784px;
        position: relative;
        padding: 111px 0 0;
        background-size: cover;
        margin-bottom: 177px;
    }

    .column_tit {
        background: url(../images/column_tit.svg) no-repeat center;
        background-size: cover;
        width: 728px;
        height: 109px;
        margin: 0px auto;
    }

    /* column_area
------------------------------------------------------------*/

    .column_area {
        background: url(../images/column_area_bg_sp.png) no-repeat center;
        background-size: cover;
        /* width: 744px; */
        height: 2549px;
        margin: 0px auto 0px;
        padding: 0px;
        position: relative;
    }

    .column_lead p {
        font-size: 25px;
        font-weight: bold;
        width: 700px;
        position: relative;
        margin: 28px auto 37px;
        color: #0E008F;
        text-align: center;
        top: 580px;
    }

    .column_interview {
        width: 685px;
        padding: 80px 38px 0px 26px;
        top: 480px;
        position: relative;
    }

    p.question {
        font-size: 26px;
        font-weight: 800;
        color: #D035FF;
        margin: 40px 0 24px;
        text-align: justify;
    }

    p.question::before {
        content: "──";
    }

    p.answer {
        font-size: 30px;
        font-weight: 500;
        color: #000;
        line-height: 46px;
        text-align: justify;
        margin: 0;
        text-indent: -97px;
        margin-left: 97px;
    }

    div.column_interview p.answer span.name {
        font-weight: 500;
        display: inline-block;
        background: #584EF0;
        width: 2.7em;
        text-align: center;
        margin-right: 0.6em;
        color: #fff;
        text-indent: 0;
    }

}