@charset "utf-8";
/* CSS Document */

/* sm list_interview */
#list_interview .interview_img{
width: 280px; /* 正方形の横幅 */
height: 280px;/* 正方形の高さ */
margin: 0 auto 10px;
}

#list_interview .interview_img img{
width: 100%;  /* 表示したい範囲(100%) */
height: 100%; /* 表示したい範囲(100%) */
object-fit: cover; /* 画像をトリミング */
border-radius: 0 0 0 20px;
}

#list_interview li:not(:last-child){
margin-bottom: 40px;
}

#list_interview h3{
position: relative;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,63,146,1.0);
font-size: 1.8rem;
line-height: 1.4;
}

#list_interview h3:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 15px;
background: url(../img/line_blue.svg)center center/cover no-repeat;
}

#list_interview h3:link,
#list_interview h3:visited{
color: rgba(0,63,146,1.0);
}

#list_interview .interview_text p{
font-weight: bold;
}

#list_interview .interview_text .interview_year{
margin-right: 10px;
}

#list_interview .interview_text .interview_year:before{
content: "";
display: inline-block;
margin: 0 5px 0 0;
width: 15px;
height: 15px;
border-radius: 100%;
background: rgba(255,240,30,1.0);
}

#list_interview a:link,
#list_interview a:visited{
color:rgba(60,60,60,1.0);
}


/* md list_interview */
@media screen and (min-width:768px) {
#list_interview ul{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-column-gap: 5%;
}

#list_interview li{
margin-bottom: 50px !important;
}

#list_interview .interview_img{
width: 200px; /* 正方形の横幅 */
height: 200px;/* 正方形の高さ */
margin: 0 auto 10px;
}
}


/* lg list_interview */
@media screen and (min-width:1024px) {
#list_interview .interview_img{
width: 250px; /* 正方形の横幅 */
height: 250px;/* 正方形の高さ */
overflow: hidden;
border-radius: 0 0 0 40px;
}

#list_interview .interview_img img{
transition: 0.5s;
}

#list_interview li:hover img{
transform: scale(1.15);
}

#list_interview h3{
padding-bottom: 15px;
font-size: 2.0rem;
}

#list_interview .interview_text p{
font-size: 1.8rem;
}
}


/* lg list_interview */
@media screen and (min-width:1280px) {
#list_interview .interview_img{
width: 300px; /* 正方形の横幅 */
height: 300px;/* 正方形の高さ */
}
}


/* sm detail_interview */
#detail_interview-top{
position: relative;
margin-top: -50px;/*マイナスマージンで調整*/
padding: 50px 0;
border-radius: 0 0 0 50px;
}

#detail_interview-top:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 29px;
background: url(../img/line_white.svg)center center/cover no-repeat;
}

#detail_interview-top h3{
margin-bottom: 20px;
font-size: 2.0rem;
line-height: 1.4;
}

#detail_interview-top .profile_photo{
margin-bottom: 20px;
text-align: center;
}

#detail_interview-top .profile_photo img{
border-radius: 0 20px 0 0;
}

#detail_interview-top .title_profile{
position: relative;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,63,146,1.0);
}

#detail_interview-top .title_profile:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
width: 75px;
height: 22px;
background: url(../img/line_blue.svg)center center/cover no-repeat;
}

#detail_interview-top .title_profile img{
height: 30px;
}

#detail_interview-top .interview_text span{
font-weight: bold;
}

#detail_interview-top .profile_year{
margin-right: 10px;
}

#detail_interview-top .profile_text{
line-height: 1.4;
}

#detail_interview-contents{
padding: 50px 0;
}

#detail_interview-contents li:not(:last-child){
position: relative;
margin-bottom: 90px;
}

#detail_interview-contents li:not(:last-child):after{
content: "";
display: inline-block;
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: url("../img/icon_microphone.svg")center center/cover no-repeat;
}

#detail_interview-contents h3{
margin-bottom: 20px;
font-size: 2.0rem;
line-height: 1.4;
}

#detail_interview-contents h3 span{
background:linear-gradient(transparent 30%, rgba(255,240,30,1.0) 30%);
}

#detail_interview-contents h4{
position: relative;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,63,146,1.0);
font-size: 1.8rem;
line-height: 1.4;
}

#detail_interview-contents .question:after{
content: "";
display: inline-block;
position: absolute;
bottom: -20px;
left: 10px;
width: 20px;
aspect-ratio: 1;
clip-path: polygon(0 0,100% 0,100% 100%);
background-color: rgba(0,63,146,1.0);
}

#detail_interview-contents .contents_photo{
margin-bottom: 15px;
text-align: center;
}

#detail_interview-contents .contents_photo img{
border-radius: 0 20px 0 0;
}

#detail_interview-message{
position: relative;
padding: 50px 0;
border-radius: 0 50px 0 0;
text-align: center;
}

#detail_interview-message:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 29px;
background: url(../img/line_white.svg)center center/cover no-repeat;
}

#detail_interview-message .message_photo{
width: 200px; /* 正方形の横幅 */
height: 200px;/* 正方形の高さ */
margin: 20px auto 15px;
}

#detail_interview-message .message_photo img{
width: 100%;  /* 表示したい範囲(100%) */
height: 100%; /* 表示したい範囲(100%) */
object-fit: cover; /* 画像をトリミング */
border-radius: 0 0 0 20px;
}

#detail_interview-message .message_text{
margin-bottom: 30px;
text-align: left;
}

#detail_interview-contents .contents_text,
#detail_interview-contents .contents_textonly,
#detail_interview-message .message_text{
overflow-wrap: break-word; 
}


/* md detail_interview */
@media screen and (min-width:768px) {
#detail_interview-top:after,
#detail_interview-message:after{
width: 150px;
height: 43px;
}

#detail_interview-top .profile_photo img,
#detail_interview-contents .contents_photo img{
width: 60%;
}

#detail_interview-message .message_photo{
width: 300px; /* 正方形の横幅 */
height: 300px;/* 正方形の高さ */
}
}


/* lg detail_interview */
@media screen and (min-width:1024px) {
#detail_interview-top{
margin-top: -100px;/*マイナスマージンで調整*/
padding: 100px 0;
border-radius: 0 0 0 200px;
}

#detail_interview-top:after{
width: 300px;
height: 86px;
}

#detail_interview-top .interview_frame{
display:flex;
justify-content: space-between;
align-items: flex-start;
}

#detail_interview-top .profile_photo{
width: 40%;
}

#detail_interview-top .profile_photo img{
width: 100%;/*mdでのデザインを解除*/
}

#detail_interview-top .interview_text{
width: 57%;
}

#detail_interview-top h3{
font-size: 3.0rem;
}

#detail_interview-top .profile_photo{
margin-bottom: 0;/*smmdでのデザインを解除*/
}

#detail_interview-top .profile_photo img{
border-radius: 0 40px 0 0;
}

#detail_interview-top .interview_text span{
font-size: 2.0rem;
}

#detail_interview-top .profile_year{
margin-right: 20px;
}

#detail_interview-contents{
padding: 100px 0;
}

#detail_interview-contents li:not(:last-child){
margin-bottom: 130px;
}

#detail_interview-contents li:not(:last-child):after{
bottom: -80px;
}

#detail_interview-contents h3{
margin-bottom: 50px;
text-align: center;
font-size: 2.4rem;
}

#detail_interview-contents h4{
font-size: 2.0rem;
}

#detail_interview-contents .photo-center .contents_photo{
margin:0 auto;
width: 50%;
}

#detail_interview-contents .photo-left,
#detail_interview-contents .photo-right{
display:flex;
justify-content: space-around;
align-items: flex-start;
}

#detail_interview-contents .photo-right{
flex-flow: row-reverse; 
}

#detail_interview-contents .photo-left .contents_photo,
#detail_interview-contents .photo-right .contents_photo{
width: 38%;
margin-bottom: 0;/*smmdでのデザインを解除*/
}

#detail_interview-contents .photo-left .contents_photo{
margin-right: 2%;
}

#detail_interview-contents .photo-right .contents_photo{
margin-left: 2%;
}

#detail_interview-contents .contents_photo img{
width: 100%;/*mdでのデザインを解除*/
}

#detail_interview-contents .contents_text{
width: 60%;
}

#detail_interview-contents .contents_textonly{
width: 100%;
}

#detail_interview-message{
padding: 100px 0;
border-radius: 0 200px 0 0;
}

#detail_interview-message:after{
width: 300px;
height: 86px;
}

#detail_interview-message .interview_frame{
display:flex;
justify-content: space-around;
align-items: flex-start;
margin: 50px 0;
}

#detail_interview-message .message_photo{
width: 200px; /* 正方形の横幅 */
height: 200px;/* 正方形の高さ */
margin: 0 20px 0 0;
}

#detail_interview-message .message_photo img{
border-radius: 0 0 0 40px;
}

#detail_interview-message .message_text{
width: 599px; /*819-200-20*/
margin-bottom: 0;/*mdでのデザインを解除*/
}
}


/* lg detail_interview */
@media screen and (min-width:1100px) {
#detail_interview-message .message_photo{
width: 220px; /* 正方形の横幅 */
height: 220px;/* 正方形の高さ */
}

#detail_interview-message .message_text{
width: 784px; /*1024-220-20*/
}
}


/* lg detail_interview */
@media screen and (min-width:1280px) {
#detail_interview-message .message_photo{
width: 250px; /* 正方形の横幅 */
height: 250px;/* 正方形の高さ */
}

#detail_interview-message .message_text{
width: 754px; /*1024-250-20*/
}
}