@charset "utf-8";
@import url("root.css");
/***************************************
-------------- staff --------------
***************************************/

#interview {
background-color: var(--sub-color01);
padding: 0 0;
}

#interview .box{
background-color: var(--base-color03);
margin: 30px auto;
padding: 50px;
border-radius: 20px;
width: 1000px;
}

#interview h3{
background-color: var(--base-color01);
color: var(--base-color03);
border-radius: 5px;
font-size: 30px;
font-weight: 700;
padding: 10px 0;
text-align: center;
margin: 0 auto;
}


#interview .staff_box{
margin:0 auto;
display: flex;
flex-wrap: wrap;
}


#interview .staff_box_col{
width: 360px;
border:5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 40px 20px;
margin: 0 30px 30px 0;
}

#interview .staff_box_col:nth-child(3n){margin: 0 0 30px 0;}

#interview .staff_img {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 0;
  
}
#interview .staff_img img{
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius:50%;
  border: 10px solid var(--sub-color01);
}

#interview h4{
font-size: 20px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
}

#interview h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#interview .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#interview .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:150px;
	position: relative;
}

#interview .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#interview .link a:hover{
color: #f9fa8f;
transition: .3s;
}

.balloon-009 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-009 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #f2f2f2;
    border-radius: 50%;
}

.balloon-009 .txt_box {
    position: relative;
    width: 100%;
    margin: 3px 0 0;
    padding:20px;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}

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


@media screen and (max-width: 768px) {
#interview {
background-color: var(--sub-color01);
padding: 30px 0 0 0;
margin: 0 auto;
}

#interview .box{
background-color: var(--base-color03);
margin: 0 auto 30px;
padding: 20px;
border-radius: 10px;
width:100%;
}

#interview h3{
background-color: var(--base-color01);
color: var(--base-color03);
border-radius: 5px;
font-size: 20px;
font-weight: 700;
padding: 5px 0;
text-align: center;
margin: 0 auto;
}


#interview .staff_box{
margin:0 auto;
display: flex;
flex-wrap: wrap;
}


#interview .staff_box_col{
width: 100%;
border:5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 20px 20px;
margin: 0 auto 20px;
}

#interview .staff_box_col:nth-child(3n){margin: 0 auto 20px;}

#interview h4{
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
}

#interview h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#interview p{
font-size: 14px;
}

#interview .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#interview .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:100%;
	position: relative;
}

#interview .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#interview .link a:hover{
color: #f9fa8f;
transition: .3s;
}

}





/***************************************
-------------- staff --------------
***************************************/

#STAFF {
background: url(../img/staff_bg.png) top center no-repeat var(--base-color01);
background-size:cover;
padding: 50px 0;
}

#STAFF p{
margin: 20px auto 20px;
text-align: left;
}

#STAFF .title{
margin: 0 auto;
text-align: center;
}

#STAFF .title h3{
margin: 0 auto 20px;
font-size: 70px;
font-weight: 900;
color: var(--base-color01);	
width: 400px;
border-bottom:3px solid var(--base-color01);
text-align: center;
padding: 0 0 20px 0;
line-height: 1;
}

#STAFF .title span{
margin: 0 auto;
text-align: center;
font-size: 16px;
}

#STAFF .staff_box{
margin: 60px auto 0;
}


#STAFF .staff_box_col{
width: 410px;
border:5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 40px 20px;
margin: 0 20px;
}

#STAFF .staff_img {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 0;
  
}
#STAFF .staff_img img{
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius:50%;
  border: 10px solid var(--sub-color01);
}

.staff_box_col p{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行まで表示 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em; /* 1行の高さ × 2（行数） */
  line-height: 1.5em; /* 1行の高さを設定 */
}

#STAFF h4{
font-size: 20px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
width: 100%;
}

#STAFF h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#STAFF .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#STAFF .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:150px;
	position: relative;
}

#STAFF .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#STAFF .link a:hover{
color: #f9fa8f;
transition: .3s;
}



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

#STAFF {
background: url(../img/staff_bg.png) top right no-repeat var(--base-color01);
background-size:cover;
padding: 20px 0 20px 0;

}

#STAFF .title{
margin: 0 auto;
text-align: center;
width: 90%;
}

#STAFF .title h3{
margin: 0 auto 20px;
font-size: 50px;
font-weight: 900;
color: var(--base-color01);	
width: 100%;
border-bottom:3px solid var(--base-color01);
text-align: center;
padding: 0 0 20px 0;
line-height: 1;
}

#STAFF .title span{
margin: 0 auto;
text-align: center;
font-size: 14px;
}

#STAFF .staff_box{
margin: 30px auto 0;
}


#STAFF .staff_box_col{
width: 250px;
border:3px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 20px 20px;
margin: 0 10px;
}

#STAFF .staff_img {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 0;
  
}
#STAFF .staff_img img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius:50%;
  border: 10px solid var(--sub-color01);
}

#STAFF h4{
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
}

#STAFF h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#STAFF p{
font-size: 14px;
}

#STAFF .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#STAFF .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:100%;
	position: relative;
}

#STAFF .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#STAFF .link a:hover{
color: #f9fa8f;
transition: .3s;
}

}