/*SP → タブレット　→ PC*/
/* iPhone 縦 */

/*============ #recTitle ===============*/

#recTitle{ background-color:#D9E367; }



/*============ #voiceInterview ===============*/

#voiceInterview,
#voiceData{
    padding: 100px 7vw;
    text-align: center;
}
h2{ width: auto; height: 25px; }
.visual_title img,
.title_area img{ width: auto; height: 100%; }
.title_area{ text-align: center; }
p.lead{ font-size: 0.9em; }

.interview_area{
    display: block;
    padding: 60px 0;
}
.person{ padding:0px 0px 20px 0px; }
.person_img{ width: 80%; padding-bottom: 30px; margin: 0 auto;}
.person_img img{ width: 100%; }

.person_info span.memo {
    display: block;
    font-size: 0.9em;
}

.person_info span.name {
    font-weight: bold;
    font-size: 1.3em;
    letter-spacing: 0.2em;
}

/*============ #voiceData ===============*/

#voiceData{ background-color: #F7F9E1; }
#voiceData .title_area{ padding: 0 0 40px; }


#voiceData .message_contents p{
    font-size: 0.8em;
    letter-spacing: 0.1em;
    line-height: 4.0em;
}
#voiceData .message_contents p.message_name{
    font-size: 1.0em;
    letter-spacing: 0.1em;
    line-height: 4.0em;
}
#voiceData .key_message{
    height: 150px;
    padding: 0 0 40px;
}

/*============ #voiceDataInfo ===============*/
#voiceDataInfo {
    background-color: #FFF;
    padding: 7vw;
    max-width: 1020px;
    margin: 0 auto 7vw;
}

/*---- row 共通 ----*/
.row02, .row04, .row06, .row07, .row08{ display: block; margin: 0 auto; }

.column{ padding: 40px 20px; position: relative;}
.col1:after,
.col2:after{
    width: 100%;
    height: 5px;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    margin-top: 0px;
    background-color: #000;
    border-radius: 5px;
    vertical-align: middle;
}
.column_tit{
    font-weight: bold;
    padding-bottom: 30px;
    line-height: 1.3;
}
.row_line .col1,
.row_line .col2,
.row_line .column_img01,
.row_line .column_img02{display: block;}


.m0auto{ margin: 0 auto; }
.clock{ width: 60%; padding-bottom: 20px; }
.think{ width: 100%; }
.rate{ width: 60%; }
.sun img { height: 30vw; width: auto; }
.night img { height: 30vw; width: auto; }
.blood{ width: 90%; }
.origin{ width: 90%; }
.pet{ width: 70%; }
.career{ width: 70%;}
.brain{ width: 100%; }
.zodiac{ width: 100%; }
.tag { text-align: left;}
.tag img { height: 70px; width: auto; }


/*---- row01 ----*/
.row01 .col1 .column_img01,
.row01 .col1 .column_img02{
    display: table-cell;
    vertical-align: bottom;
}
.row01 .col1 .column_img01{ padding-right: 10px; display: block;}
.row01 .col2 .column_img01{ padding-right: 0px; display: block;}

.row01 .col1 .separate{ display: table; margin: 0 auto; }
.row01 .col2 .separate{ display: block; margin: 0 auto; }

/*---- row02 ----*/


/*---- row03 ----*/
.row03 .col1 .column_img01,
.row03 .col1 .column_img03{
    width: 40%;
    position: relative;
    vertical-align: bottom;
    display: table-cell;
}
.row03 .col1 .column_img02{
    position: relative;
    width: 10%;
    display: table-cell;
}

.row03 .col1 .column_img02:after{
    width: 80%;
    height: 5px;
    content: "";
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    background-color: #000;
    border-radius: 5px;
    vertical-align: bottom;
}

.row03 .col1 .separate{ display: table; margin: 0 auto; }
.row03 .col2 .separate{ display: block; margin: 0 auto; }

/*---- row04 ----*/


/*---- row05 ----*/
.row05 .green_wrap{
    background-color: #D9E367;
    padding: 0 0 40px;
    border-radius: 10px;
    padding: 40px;
}
.row05 .column{ padding: 40px 0px; }
.row05 .column_sub{ text-align: left; font-weight: bold; font-size: 0.85em; padding: 0 0 5px;}
.row05 .column_list{ padding: 40px 0px 0px; }
.row05 .column_list .column{ width: 100%; padding: 0px 0px 40px; display: block; }

/*---- row06 ----*/

/*---- row07 ----*/

/*---- row08 ----*/
.row08 .column_tit{ padding: 40px 0; }
.row08 .column{ padding: 20px; }
.row08 .tag{ padding-bottom: 20px; }
.row08 p.tag_list{ font-size:0.9em; font-weight: bold; text-align: left; }
.row08 .dashed{ border-bottom: dashed 2px #000; }



/*============ #interviewDetail ===============*/
#interviewArea{
    background-color: #F0F4C2;
    position: relative;
    padding: 300px 7vw 150px;
    z-index: 0;
}
#interviewArea .Breadcrumb{ display: none; }

.title_interview{
    width: 50%;
    padding: 150px 30px 30px;
    margin: 0 auto;
    background-color: #D9E367;
    border-radius: 10px;
    position: absolute;
    z-index: 20;
    top: 100px;
    left: 0;
    right: 0;
}
.title_img{ width: 150px; margin: 0 auto; }
.title_txt{ padding: 20px 0 0; font-weight: bold; }
.title_txt span.memo{
    display: block;
    letter-spacing: 0.1em;
    font-size: 0.8em;
}
.title_txt span.name{
    display: block;
    font-size: 1.5em;
    letter-spacing: 0.2em;
}

#interviewDetail {
    background-color: #FFF;
    padding: 300px 7vw 100px;
    max-width: 1020px;
    margin: 0 auto;
}

#interviewDetail .w_max{
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}
.bk_inter01,.bk_inter02,.bk_inter03,.bk_inter04,.bk_inter05{
    background-size: 150px;
    background-position-x: center;
    background-position-y: 10%;
    background-repeat: no-repeat;
}
.bk_inter01{ background-image: url(../images/tit_interview01.png); }
.bk_inter02{ background-image: url(../images/tit_interview02.png); }
.bk_inter03{ background-image: url(../images/tit_interview03.png); }
.bk_inter04{ background-image: url(../images/tit_interview04.png); }
.bk_inter05{ background-image: url(../images/tit_interview05.png); }


h2.question {
    height: auto;
    position: relative;
    padding: 0 0 10px;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    border-bottom: solid 4px #D9E367;
}

p.answer { padding: 30px 0 50px; }


@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.bk_inter01{ background-image: url(../images/tit_interview01@2x.png); }
.bk_inter02{ background-image: url(../images/tit_interview02@2x.png); }
.bk_inter03{ background-image: url(../images/tit_interview03@2x.png); }
.bk_inter04{ background-image: url(../images/tit_interview04@2x.png); }
.bk_inter05{ background-image: url(../images/tit_interview05@2x.png); }
}



@media screen and (min-width:768px){

/***************************
　for iPad 　
****************************/

.interview_area{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.person{ padding:0px 10vw 20px 0px; }
.person:nth-child(3),
.person:nth-child(5){ padding:0px 0px 20px 0px; }
.person_img{ width: 20vw; }


/*---- row 共通 ----*/
.column{ padding: 0; }
.col1:after, .col2:after{ display: none; }


.col1:after{
    width: 5px;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    margin-left: 10px;
    background-color: #000;
    border-radius: 5px;
    vertical-align: middle;
}
.row_line{
    display: table;
    position: relative;
    margin: 0 auto;
}
.row_line .column_img01,
.row_line .column_img02,
.row_line .column_img03,
.row_line .col1,
.row_line .col2{ display: table-cell; }

.row_line:after{
    width: 100%;
    height: 5px;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    margin-top: 0px;
    background-color: #000;
    border-radius: 5px;
    vertical-align: middle;
}

.column,
.column_img01,
.column_img02{
    position: relative;
    display: table-cell;
    vertical-align: bottom;
}
.separate{
    height: 100%;
    display: table;
    margin: 0 auto;
}

.column_tit{
    font-weight: bold;
    position: absolute;
    line-height: 1.3;
    top: 0;
    left: 0;
    right: 0;
}
.clock{ width: 100%; padding-bottom: 0; }
.think{ width: 80%; margin: 60px auto 0; }
.rate{ width: 60%; }
.sun{ width: 90%; }
.night{ width: 90%; }
.sun img { height: auto; width: 100%; }
.night img { height: auto; width: 100%; }
.blood{ width: 90%; }
.origin{ width: 90%; margin: 0;}
.pet{ width: 90%; }
.career{ width: 90%; margin: 50px auto 0;}
.brain{ width: 80%; }
.zodiac{ width: 90%; margin: 50px auto 0;}

.column_list{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
}

/*---- row01 ----*/
.row01{
    height: 110px;
    padding-bottom: 40px;
}

.row01 .col2 .column_img01,
.row01 .col2 .column_img02{
    display: table-cell;
}
.row01 .col1{ width: 40%; padding-right: 40px; }
.row01 .col2{ width: 60%; padding-left: 40px; }

.row01 .col1 .column_img01{ display: table-cell; }
.row01 .col2 .column_img01{ padding-right: 30px; }
.row01 .col2 .separate{ display: table; }

/*---- row02 ----*/
.row02{ height: 160px; padding: 40px 0; }
.row02 .col1,
.row02 .col2{ width: 50%; }

/*---- row03 ----*/
.row03{ width: 100%; height: 110px; padding: 40px 0; }
.row03 .col1{ width: 45%; padding-right: 20px; }
.row03 .col2{ width: 55%; padding-left: 40px; padding-top: 40px; }

.row03 .col2 .column_img01{ padding-right: 30px; }
.row03 .col2 .separate{ display: table; }


/*---- row04 ----*/
.row04{ width: 100%; padding: 40px 0; }
.row04 .col1 p{ text-align: left; }
.row04 .col1{ width: 70%; padding-right: 30px; }
.row04 .col2{ width: 30%; padding-left: 30px; vertical-align: middle;}

/*---- row05 ----*/
.row05{ width: 100%; padding: 40px 0; display: block;}
.row05 .col1{ padding: 0 0; }
.row05 .col1:after{ display: none; }

.row05 .column_tit{ position: initial; text-align: left; padding: 0 0 20px;}
.row05 .green_wrap{
    background-color: #D9E367;
    padding: 0 0 40px;
    border-radius: 10px;
    padding: 40px;
}
.row05 .column{ display: block; }
.row05 .column_list{ padding: 40px 0; justify-content: space-between;}
.row05 .column_list .green_wrap{ padding: 15px; }
.row05 .column_list .column{ width: 33%; padding: 0 20px 0; display: table-cell;}
.row05 .column_list .column img{ height: 15vw; width: auto; }
.row05 .column_list .column:nth-child(3){ padding-right: 0px;}

/*---- row06 ----*/
.row06{ width: 100%; padding: 40px 0; }
.row06 .col1{ width: 30%; padding-right: 30px; }
.row06 .col2{ width: 70%; padding-left: 30px; vertical-align: middle;}

/*---- row07 ----*/
.row07{ width: 100%; padding: 40px 0; }
.row07 .col1:after{ display: none; }

/*---- row08 ----*/
.row08{ width: 100%; padding: 40px 0 0; }
.row08 .column_tit{ position: initial; padding: 0 0 40px;}
.row08 p.tag_list{ font-size:1em; }

.row08 .column{ width: 100%; flex-grow: 1;}
.row08 .column:nth-child(1){ padding: 0 20px 0 0;}
.row08 .column:nth-child(2){ padding: 0 20px 0 20px;}
.row08 .column:nth-child(3){ padding: 0 0 0 20px;}
.row08 .dashed{ border-right: dashed 2px #000; border-bottom:none;}


/*============ #interviewDetail ===============*/

.title_interview{ width: 60%; padding: 40px; top: 150px; }
.title_interview:after{ content: ""; clear: both; }
.title_img{
    width: 200px;
    display: inline-block;
    float: left;
    padding-right: 50px;
}
.title_txt{
    padding: 90px 0 0;
    display: inline-block;
    float: left;
}
.title_txt span.memo{ letter-spacing: 0.2em; }
.title_txt span.name{ font-size: 1.8em; }

#interviewDetail { padding: 200px 7vw 100px; }

.bk_inter01,.bk_inter02,.bk_inter03,.bk_inter04,.bk_inter05{
    background-position-x: 95%;
    background-position-y: center;
}

h2.question { border-bottom: solid 4px #F5F5F5; }
h2.question:after {
    content: "";
    display: block;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 30%;
    border-bottom: 4px solid #D9E367;
}


h2.question:nth-child(1):after { width: 60%; }
h2.question:nth-child(3):after { width: 55%; }
h2.question:nth-child(5):after { width: 70%; }
h2.question:nth-child(7):after { width: 60%; }
h2.question:nth-child(9):after { width: 65%; }
h2.question:nth-child(11):after { width: 50%; }
h2.question:nth-child(13):after { width: 40%; }
h2.question:nth-child(15):after { width: 70%; }
h2.question:nth-child(17):after { width: 50%; }


}


@media screen and (min-width:1024px) {
/***************************
　for PC 　
****************************/


/*============ #voiceInterview ===============*/
#voiceInterview{ padding: 50px 150px; background-size: 110%; }
.w_max{ position: relative; }
.interview_area{ justify-content: center; }
.person{ padding:0px 60px 20px 0px; }
.person_img{ width: 18vw;}

.row01{ height: 160px; padding-bottom: 50px; }
.row03 .col1 .column_img02:after{ height: 6px; bottom: 15px;}
.row05 .column_list .column img{ height: 14vw; width: auto; }
.row05 .column_list .green_wrap{ padding: 20px; }


/*============ #interviewDetail ===============*/
#interviewDetail { padding: 250px 7vw 100px; }
.title_img{ width: 240px; }
.bk_inter01,
.bk_inter02,
.bk_inter03,
.bk_inter04,
.bk_inter05{ background-size: 200px; }


}

@media screen and (min-width:1300px) {
/***************************
　for PC 2
****************************/
.person{ padding:0px 120px 20px 0px; }
.person_img{ width: 17vw;}

}