@charset "UTF-8";


@media screen and (max-width: 1080px){
.pc-br { display: none;}
}

@media screen and (min-width: 720px) { .br-sp { display: none; } }

.titleBox{ margin-bottom: 0;}
.titleBox h2{ font-size: 44px;}
@media screen and (max-width: 1080px) {
.titleBox h2{ font-size: 30px;}
}


.bg01{ padding-bottom: 100px; padding-top: 100px;}
@media screen and (max-width: 1080px) {
.bg01{ padding-bottom: 30px; padding-top: 30px;}
}




@media screen and (min-width: 1080px) {
  .sp-br {
    display: none;
  }
}

.titleBox figure img{ border-radius: 20px;border: 12px solid #FDE202;}





/* Message */

.InterviewMessageBox{ width: 100%; max-width: 720px; margin: 0 auto; padding-top: 100px;margin-bottom: 80px;}
.Interviewmessagetitle{ font-size: 37px; margin-bottom: 60px; position: relative; z-index: 100;}
@media screen and (max-width: 1080px) {
.InterviewMessageBox{padding-top: 50px;margin-bottom: 70px;}
.Interviewmessagetitle{font-size: 20px; width: 100%; margin: 10px 0; }
}



/* Member */

#sect01{}
.worksBox{ position: relative; margin-bottom: 100px;}
.worksBox p{ font-size: 20px; line-height: 2.4; font-weight: bold;}
@media screen and (max-width: 1080px) {
.worksBox{ overflow: hidden; margin: 0; padding: 40px 0 0; padding: 25px;}
.worksBox p{ font-size: 12px; line-height: 2;}
.ew{ width: 100%; max-width: 102px;
position: absolute;
z-index: 1;
}
}

.note{ width: 100%; max-width: 900px; padding: 40px 90px; border: 2px solid #FDE202; border-radius: 10px; position: relative;margin-bottom: 150px;}
.note .flex{ display: flex; align-items: center;}
.note .flex .txtBox{ margin-left: 50px;}
.note h2{font-size: 20px; margin-bottom: 1em;}
.note p{ font-size: 15px; margin-bottom: 0; line-height: 1.7;}

@media screen and (max-width: 1080px) {
.note{  margin: 0; padding: 0;}
.note .flex{ display: block; text-align: center;}
.note .flex .txtBox{ margin: 0;}
.note .flex p{ text-align: left;}
.note img{ margin-bottom: 20px;}
.note p{ font-size: 12px; margin: 0; padding: 0; line-height: 2;}
}

.blnTitle{
padding: 10px 2em;
display: inline-block;
background: #FDE202;
border-radius: 20px 20px 0 20px ;
position: absolute;
top: -20px;
left: -20px;
}
@media screen and (max-width: 1080px) {
h2.blnTitle{
font-size: 15px;
}
}

.memberflexBox{ width: 680px; display: flex; justify-content: center;flex-wrap: wrap; gap: 40px;}
.memberflexBox img { width: 140px;height: 140px;object-fit: cover;border-radius: 50%;margin-bottom: 10px;}
.memberflexBox p{ font-size: 17px; font-weight: bold; text-align: center}
@media screen and (max-width: 1080px) {
.memberflexBox{ width: 335px; display: flex; flex-wrap: wrap; gap: 10px;}
.memberflexBox img { width: 85px; height: 85px; object-fit: cover;border-radius: 50%; margin-bottom: 10px;}
.memberflexBox p{ font-size: 12px; font-weight: bold; text-align: center}
}



/* interview */

.InterviewcontainerInterview{ margin: 0px 25px; }
.InterviewcontentInterview{ margin-bottom: 150px; }
@media screen and (max-width: 1080px) {
.InterviewcontentInterview{ margin-bottom: 50px; }}

.mainImg{ margin: 0 0 70px; padding: 0; }
.mainImg{ width: 100%; max-width: 1080px;}
.mainImg img{ width: 100%; border-radius: 30px;border: 15px solid #FDE202;}
@media screen and (max-width: 1080px) {
.mainImg{ margin: 0 0 30px; padding: 0; }
.mainImg img{ width: 100%; padding: 0;}
.mainImg img{ width: 100%;border-radius: 30px;border: 10px solid #FDE202;}}

.interviewtitleBox{margin-bottom: 50px;}
.interviewtitleBox h2{font-size: 30px; width: 100%;}
@media screen and (max-width: 1080px) {
.interviewtitleBox h2{font-size: 20px; width: 100%;}
}

.interviewtitleBox p{
font-weight: bold;
padding: 10px 2em;
display: inline-block;
background: #FDE202;
border-radius: 20px 20px 0 20px ;
}
@media screen and (max-width: 1080px) {
.interviewtitleBox p{
font-size: 15px;
}
}

/* interview comment */

.interviewflexBox{ display: flex; justify-content: space-between;}

.interviewflexBox img { width: 120px;height: 120px;object-fit: cover;border-radius: 50%;margin-bottom: 10px;border: 4px solid #FDE202;}
.interviewflexBox p{ font-size: 17px; font-weight: bold; text-align: center; margin-bottom: 0px;}

@media screen and (max-width: 1080px) {
.interviewflexBox img{border: 4px solid #FDE202;}
}

.interviewcommentBox { margin: 0 0 0 50px;
display: flex;
    align-items: center;
    position: relative;
    width: 860px;
    padding: 40px 60px;
    border-radius: 20px;
    background-color: #ffffff;}

.interviewcommentBox p{ font-size: 15px; font-weight: normal; line-height: 2.3; text-align: left;}

.interviewcommentBox::before {
    position: absolute;
    top: 50px;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #ffffff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

@media screen and (max-width: 1080px) {
.interviewflexBox img{width: 70px;height: 70px;}
.interviewflexBox p{ font-size: 12px;}
.interviewcommentBox p{ font-size: 12px;line-height: 2.1;}
.interviewcommentBox { margin: 0 0 0 20px;
display: flex;
    align-items: center;
    position: relative;
    padding: 20px 25px;
    border-radius: 20px;
    background-color: #ffffff;}

.interviewcommentBox p{ font-size: 12px; font-weight: normal; line-height: 2.1; text-align: left;}

.interviewcommentBox::before {
    position: absolute;
    top: 30px;
    left: -8px;
    width: 8px;
    height: 18px;
    background-color: #ffffff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}
}