@charset "UTF-8";

.interview_con h2{
background-color: #b82f1e;
color: #fff ;
display: inline;
line-height: 1.8em;
font-size: 2.1rem;
}

.interview_con p{
margin-top: 5px;
line-height: 1.9em;
}

h3{position: relative;
    line-height: 1.6em;
    padding-left: 2em;
    margin: 25px 0 5px;
    letter-spacing: 0.02em;
}

h3:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:1.5em;
	height:1.5em;
	background:url(../img/q_ico.png) no-repeat;
	background-size:contain;
}

.interview_wrap {
  padding: 50px 30px 0;
  margin: 0 auto;
}

.sp-about {display: block;}
.pc-about {display: none;}
.tb-about {display: none;}

@media screen and (min-width:750px) {
.interview_con p{
font-feature-settings: "palt";
letter-spacing: 0.03em;
}
h3{
font-feature-settings: "palt";
letter-spacing: 0.02em;
}

.sp-about {display: none;}
.pc-about {display: block;}
.tb-about {display: block;}

}

/*-------------------------------------------
　人々
-------------------------------------------*/
.people-area {
  text-align: center;
  margin-bottom: 50px;
}

.people-content {
  display: flex;
  flex-wrap: nowrap;
}

#int01,#int02,#int03 {
  margin-top: -40px;
  padding-top: 40px;
}

#int04 {
  margin-top: -60px;
  padding-top: 60px;
}

.people-item {
  flex: 22%;
  text-align: center;
  padding: 0 5px;
  /*margin: 5px;*/
  background-color: rgba(255, 255, 255, 0.32);
  /*border-radius: 10px;*/
}

.people-item img {
  margin-left: -20px;
}

.people-item p {
  font-size: 1rem;
  line-height: 1.3em;
  margin-top: 10px;
}

@media screen and (max-width:860px) {
  .people-item img {
  width: 100%;
}

.interview_wrap .people-area {
  width: 106%;
  margin-left: -3%;
  margin-top: 10px;
}
}

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

.people-area {
  margin-bottom: 90px;
}

.people-content {
    flex-wrap: nowrap;
    /*flex-wrap: wrap;*/ 
    max-width: 900px;
    margin: 0 auto;
}

#int01,#int02,#int03 {
  margin-top: -120px;
  padding-top: 120px;
}

#int04 {
  margin-top: -120px;
  padding-top: 190px;
}

.people-con { 
  width: 90px;
}

.people-item {
    flex: 20%;
    margin: 10px;
    /*flex: 1;*/
  }

.people-item img {
  margin-left: -60px;
}

.people-item p {
  font-size: 1.4rem;
  line-height: 1.3em;
  margin-top: 10px;
}

}

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

.interview_wrap {
  padding: 134px 30px 80px;
}

#int04 {
  margin-top: -190px;
  padding-top: 190px;
}

}

/*-------------------------------------------
　インタビュー
-------------------------------------------*/

.left img{
width: 35%;
min-width: 150px;
}

.box01 {
    padding: 0.1em 0.5em;
    font-weight: bold;
    border: solid 1px #b82f1e;
    display: inline-block;
    margin-top: 20px;
}
.box01 p {
	color: #b82f1e;
  margin: 0; 
  padding: 0 8px;
  width: 100% !important;
}

.left {
margin-left: -10px;
margin-bottom: 10px;
}

.left2{
  position: absolute;
  top: -98px;
  left: 14px;
}

.left2 img{
width: 35%;
min-width: 150px;
margin-right: 20px;
margin-bottom: 10px;
}

.left2 h2{
background-color: #423D39;
color: #fff;
display: block;
line-height: 1.3em;
font-size: 2rem;
padding: 5px 20px;
text-align: center;
}

.red {
color: #b82f1e;
}

.int_img{
width: 130%;
margin: 20px -50px 10px;
}

.interview_con{
width: 95%;
display: block;
margin: 10px auto 20px;
}

.interview_con2{
width:90%;
display:block;
margin: 80px auto 0;
position: relative;
}

.marker_yellow {
  background: linear-gradient(transparent 0%, #ffff98 0%);
  font-size: 1.5rem;
  color: #150f0b;
}

.marker_white {
  background: linear-gradient(transparent 0%, #ffffff 0%);
  font-size: 1.5rem;
  color: #150f0b;
}

.floated{
width: 30%;
float: right;
margin: 0 -5px 15px 20px;
}

.floated2{
width: 40%;
float: right;
margin: 0 -5px 15px 0;
}

.float_none {
clear: both;
}

.message{
  background-color: #f5ebe9;
  padding: 20px 20px 0;
  margin: 0 auto 60px;
  position: relative;
}
.message h3{margin: 0 0 10px;}
.messageflex{
  display: flex;
  flex-direction: column;
}
.messageimg img{
  width: 90%;
  margin: 10px auto 0;
}
.messagetxt p {line-height: 1.9em;}


.interview_part{
width:100%;
display:block;
background-image: url(../img/int_04_pcbg.jpg);
background-size:  cover;
background-position: center;
text-align:center;
padding: 80px 0;
position: relative;
}

.fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
}
 
.bg01 {
  background-image: url(../img/int_04_pcbg.jpg);
}

.voice{
  text-align: center;
  padding: 50px 0 80px;
}
.voice img{
  margin: 0 auto;
}
.miryoku{}
.miryoku img{
  width: 75%;
  margin-bottom: 25px;
}
.fukidashi img{
  width: 100%;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 0.8em;
  padding: 20px 35px;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #fff;
  border-radius: 20px;
}

.balloon1:before {
  content: url(../img/fukidashi_l.png);
  position: absolute;
  bottom: -20px;
  left: 52%;
  margin-left: -15px;
}
/*
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 52%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 15px solid #fff;
}
*/
.balloon1 p {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  font-weight: bold;
  text-align: center;
}

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 0.8em;
  padding: 20px 35px;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #fff;
  border-radius: 20px;
}

.balloon2:before {
  content: url(../img/fukidashi_r.png);
  position: absolute;
  bottom: -20px;
  left: 40%;
  margin-left: -15px;
}

.balloon2 p {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  font-weight: bold;
  text-align: center;
}

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

.interview_con{
max-width: 720px;
margin: 50px auto 30px;
}

.interview_con p{
line-height: 1.9em;
width: 650px;
margin: 5px auto 0;
}

.interview_con h2{font-size: 2.3rem;}

.imgsize1{width: 180px !important;}
.imgsize2{width: 270px !important; margin: 0 -15px 15px 10px !important;}
.imgsize3{width: 180px !important;}

.int_img{
width: 100%;
margin: 50px 0 0;
border-radius: 20px;
}

.floated{margin: 0 -5px 15px 40px;}

.left {
margin-left: -70px;
margin-bottom: 20px;
}

.left2{
margin-left: -5px;
top: -100px;
}

.left2 img{
margin-right: 20px;
margin-bottom: 0;
}

.left2 h2{
display: inline;
line-height: 2em;
font-size: 2.4rem;
padding: 15px 20px;
}

.message{
  max-width: 730px;
  padding: 40px 20px 40px 40px;
  margin: 0 auto 80px;
  position: relative;
}

.messageflex{flex-direction: row;}
.messagetxt{width: 65%;}
.messageimg{position: absolute;
    bottom: 0;
    right: 10px;}

.interview_con2{
  max-width: 720px;
  margin: 20px auto 0;
}

.interview_part{}

.miryoku img{
  width: 100%;
  max-width: 600px;
  margin-bottom: 50px;
}

.fukidashi img{
  width: 90%;
  max-width: 850px;
}

}

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

h3{
  position: relative;
  line-height: 1.6em;
  padding-left: 2em;
  margin: 40px 0 10px 2em;
}
.left img{margin-left: -70px;}
.int_midashi{
  margin-left: 35px;
  margin-top: 20px;
}

.left2{
margin-left: -35px;
top: -100px;
}

.fukidashi img{
  width: 100%;
  max-width: 850px;
}

}

/*-------------------------------------------
　もっと見るボタン
-------------------------------------------*/

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

.btn_more0 img,.btn_close0 img{width: 40%;}

}

.btn_more0 {margin-top: 20px;}
.btn_close0 {margin-top: 40px;}