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

#interview{
padding-top: 5%;
padding-bottom: 15%;
}


.profile_section{
width: 100%;
border-bottom: #D9D0C6 1px solid;
padding-bottom: 4%;
margin-bottom: 5%;
display: flex;
}
.profile_section2{
width: 100%;
padding-bottom: 4%;
margin-bottom: 5%;
display: flex;
}


.profile_logo{
width: 30%;
float: left;
top:0;
vertical-align:top;
}

.profile_logo img{
width: 100%;
}	

.profile_logo2{
width: 30%;
float: left;
top:0;
}

.profile_logo2 img{
width: 90%;
}




.profile{
width: 70%;
float: right;
padding-left: 10px;
}
.profile_name{
font-size: 22px;
  font-size: 2.2rem;
letter-spacing: 0.2em;
font-weight: 400;
padding-top: 10%;
}
.profile_name a{
color: #111111;
}

.profile_link{
  color: #111111;
}
.profile_link:hover {
  color: #B59033;
}
.profile_name_en{
font-size: 14px;
  font-size: 1.4rem;
color: #B59033;
line-height: 1.2;
}
.profile_txt{
clear: both;
line-height: 1.8;
letter-spacing: 0.2em;
font-size: 15px;
  font-size: 1.5rem;
font-weight: 400;
}


.profile_name2{
font-size: 27px;
  font-size: 2.7rem;
letter-spacing: 0.2em;
font-weight: 400;
}
.profile_name_en2{
font-size: 15px;
  font-size: 1.5rem;
color: #B59033;

}
.profile_txt2{
clear: both;
line-height: 1.8;
letter-spacing: 0.2em;
font-size: 18px;
  font-size: 1.8rem;
font-weight: 400;
padding-top: 3%;
margin-top: 3%;
border-top: #D9D0C6 1px solid;	
}




@media screen and (max-width: 768px) {
	
.profile_section{
width: 100%;
border-bottom: #D9D0C6 1px solid;
padding-bottom: 6%;
margin-bottom: 7%;
display: flex;
}	
	
.profile_logo{
width: 30%;
float: left;
top:0;
}
	
.profile_logo img{
width: 90%;
}	
	
	
.profile_logo2{
width: 30%;
float: left;
top:0;
}
	
.profile_logo2 img{
}		
	
	
	
	
.profile{
width: 80%;
float: right;
padding-left: 2%;
}	
	
	
.profile_name{
font-size: 18px;
font-size: 1.8rem;
letter-spacing: 0.1em;
padding-top: 2%;
padding-bottom: 2%;
}
	
.profile_name a{
color: #111111;
}

.profile_link{
  color: #111111;
}
.profile_link:hover {
  color: #B59033;
}	
	
.profile_name_en{
font-size: 80%;
line-height: 1.3;
color: #B59033;
}	
	
.profile_txt{
clear: both;
line-height: 1.6;
letter-spacing: 0.08em;
font-size: 85%;
}	
	
	
.profile_name2{
font-size: 150%;
letter-spacing: 0.2em;
}
.profile_name_en2{
font-size: 90%;
color: #B59033;
}	
	
.profile_txt2{
clear: both;
line-height: 1.6;
letter-spacing: 0.1em;
font-size: 100%;
}		
	

}


.interviews {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 0%;
}

.interviews:after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}

.interview {
  width: 30%;
  margin-bottom: 5%;
}


.interview_copy{
z-index: 30;
top: 70px;
right: -70px;
position: relative;
text-align: right;
}



.interview_img {
  margin-bottom: 5%;
}

/*
.interview img {
  width: 100%;
}
*/

@media screen and (max-width: 768px) {
	
	
.interviews {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
.interviews:after {
    content: "";
    display: block;
    width: 49%;
    height: 0;
  }
.interview {
    width: 49%;
    margin-bottom: 10%;
  }
.interview_img {
    margin-bottom: 5%;
  }	
		
	
}











.main_plofile_img{
padding-top: 5%;
padding-bottom: 3%;
z-index: 20;	
}

.main_interview_copy{
    z-index: 30;
    top: -80px;
    position: relative;
	font-size: 45px;
  font-size: 4.5rem;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    color: #B59033;
    line-height: 2;
    letter-spacing: 0.2em;
/*	float: right;*/
}


.main_interview_copy_sp{

}



@media screen and (max-width: 768px) {
	
.main_plofile_img{
padding-top: 5%;
padding-bottom: 7%;
z-index: 20;	
}
	
	
	
.main_interview_copy{
display: none;
}	
	
	
.main_interview_copy_sp{
font-size: 135%;
color: #B59033;
letter-spacing: 0.3em;
line-height: 1.8;
padding-top: 5%;
padding-bottom: 8%;
}	
	
	
}	

.main_plofile_data{

}

.main_img_interview{
width: 100%;
background-color: #F2EDE7;
display: block;
padding-top: 5%;
padding-bottom: 5%;
margin-bottom: 5%;
}



.interview_box_L {
  width: 47%;
  float: left;
  display: block;
  padding-right: 1%;

}

.interview_box_R {
  width: 47%;
  float: right;
  display: block;
  padding-left: 1%;

}
@media screen and (max-width: 768px) {
	
.main_img_interview{
width: 100%;
background-color: #F2EDE7;
display: block;
padding-top: 25%;
padding-bottom: 5%;
margin-bottom: 15%;
}	
	
.interview_box_L {
    width: 100%;
    display: block;
    padding-bottom: 5%;
  }
.interview_box_R {
    width: 100%;
    padding-left: 1%;
    padding-bottom: 5%;
  }	
	
}	





.faq{
text-align: left;
padding-top: 0%;
margin-bottom: 10%;
}

.faq__q,
.faq__a {
  position: relative;
  padding-left: 30px;
}

.faq__q::before,
.faq__a::before {
  position: absolute;
  left: 0;
  top: 0;
}

/* 質問文 */
.faq__q {
font-size: 17px;
  font-size: 1.7rem;
font-weight: bold;
 margin-bottom: 3%; 
}

/* 回答文 */
.faq__a {
	line-height: 2.3;
    letter-spacing: 0.2em;
    font-size: 17px;
  font-size: 1.7rem;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 6%;
    padding-right: 6%;
    width: 100%;
   background-color: #F2EDE7;
	    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
	font-weight: 300;
}

.faq__q::before {
  content: 'Q.';
  color: #B59033;
	font-size: 17px;
  font-size: 1.7rem;
}

/*
.faq__a::before {
  content: 'A.';
  	width: 40px;
  height: 40px;
  color: #B59033;
font-size: 17px;
  font-size: 1.7rem;
padding-top: 3%;
padding-left: 6%;
padding-bottom: 6%;
font-weight: bold;
}
*/

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

.faq{
text-align: left;
margin-bottom: 10%;
}	

.faq__q,
.faq__a {
  position: relative;
  padding-left: 30px;
}

.faq__q::before,
.faq__a::before {
  position: absolute;
  left: 0;
  top: 0;
}

/* 質問文 */
.faq__q {
font-size: 15px;
  font-size: 1.5rem;
	color: #111111;
  margin-bottom: 10%; 
}

/* 回答文 */
.faq__a {
font-size: 15px;
  font-size: 1.5rem;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
    background-color: #F2EDE7;
}

.faq__q::before {
  content: 'Q.';
  color: #B59033;
	font-size: 15px;
  font-size: 1.5rem;
}

/*
.faq__a::before {
  content: 'A.';
  	width: 40px;
  height: 40px;
  color: #B59033;
font-size: 15px;
  font-size: 1.5rem;
padding-top: 5%;
padding-left: 10%;
}
*/

}





/* ==========================================================================
   
btn_style

========================================================================== */

.btnbox3 {
  display: block;
	margin-top: 10px;
}
.btnbox3 .btn {
  display: inline-block;
  padding: 0;
  font-size: 90%;
  text-decoration: none;
  padding: 0;
  line-height: 30px;
  position: relative;
  color: #B59033;
  margin-bottom: 1%;
  margin-right: 1%;
vertical-align: baseline;
}
.btnbox3 .btn:after {
  font-family: 'themify';
  content: "\e628";
  font-size: 80%;
  font-style: normal;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  z-index: 1;
  line-height: 60px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
padding-left: 10px;
}

.btnbox3 .btnSmall {
  line-height: 29px;
}

.btnbox3 .btnSmall:after {
  line-height: 29px;
}

.btnbox3 .btn:hover {
  color: #d3c4b6;
}

.btnbox3 .btn:hover:after {
  color: #d3c4b6;
padding-left: 15px;
}
@media screen and (max-width: 738px) {
  .btnbox3 {
    margin-top: 2%;
    padding-bottom: 2%;
    display: block;
	width: 100%!important;
	  
  }
  .btnbox3 .btn {
    display: inline-block;
    padding: 0;
    font-size: 12px;
    text-decoration: none;
    padding: 0;
    line-height: 1.8;
    position: relative;
    color: #B59033;
    font-weight: normal;
    margin-bottom: 1%;
    margin-right: 1%;
    margin-bottom: 0;
	width: 100%!important;
  }
  .btnbox3 .btn:after {
    font-family: 'themify';
    content: "\e628";
    font-size: 9px;
    font-style: normal;
     font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    right: 5%;
    z-index: 1;
    line-height: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .btnbox3 .btnSmall {
    line-height: 25px;
  }
  .btnbox3 .btnSmall:after {
    line-height: 25px;
  }
  .btnbox3 .btn:hover {
    color: #d3c4b6;
  }
  .btnbox3 .btn:hover:after {
    color: #d3c4b6;
    right: 10px;
  }
}




.lineText{
  position: relative;/*テキストの基点となる位置を定義*/
}

/*線の設定*/
.lineText span.mask{
  position: relative;
  display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
}

.lineText span.mask::before,
.lineText span.mask::after{
    position: absolute;
    top: 4%;
    right: 2.5%;
    bottom: 4%;
    left: 2.5%;
    z-index: 3;
    content:"";
    opacity: 0;
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.lineText span.mask::before {
    border-top: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-bottom: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    transform: scale(0,1);
}

.lineText span.mask::after{
    border-right: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-left: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    transform: scale(1,0);
}

.lineText:hover span.mask::before,
.lineText:hover span.mask::after{/*hoverした時の変化*/
  opacity: 1;
    transform: scale(1);
}



.zoomIn img{
  transform: scale(1);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
  transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}