@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　interview
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/


.header .logo{
    display: block !important;
   	width: 220px;
		margin: 15px;	 
  }
.header .logo2{
   	display: none !important;	 
  }



.page-ttl{
  position: relative;
	background-image: url(../img/interview/mv.png);
  height: 35.41666666vw;
  margin-top: 0;
}
.page-ttl h1 {
    position: absolute;
    opacity: 1;
    width: 60vw;
    left: 0;
    bottom: 20%;
}
.page-ttl .caption {
    position: absolute;
    left: 15px;
    bottom: -20px;
    font-size: 1rem;
    color: #000;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/


/* interview
-----------------------------------------------------------------*/
.interview{
	padding: 80px 0 60px;
}
.interview .inner{
	max-width: 1320px;
	margin: auto;
}
.interview .txt-top{
	margin-bottom: 50px;
	font-size: 3.0rem;
	text-align: left;
}
.interview .sec-ttl{
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 20px;
  background-color: #bb9c62;
  font-size: 2rem;
  color: #fff;
}
.interview .movie {
    max-width: 800px;
    margin: 50px auto;
}
.interview .movie video {
    width: 100%;
    max-width: 800px;
}
.interview .movie video.culture {
    background-image: url(../img/interview/movie_bg.png);
    background-size: cover;
}

.interview .caption{
  font-size: 1rem;
  line-height: 1.2;
}
.interview .part1{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}
.interview .part1 .part1-left{
  width: 65%;
}
.interview .part1 .part1-right{
  width: 33%;
}
.interview .part1 .part1-right-inner{
  margin-bottom: 10px;
}
.interview .part2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}
.interview .part2 .part2-left{
  width: 34%;
}
.interview .part2 .part2-right{
  width: 64%;
}


.interview .point1{
  margin-bottom: 50px;
}
.interview .point1 .point1-block1{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
}
.interview .point1 .point1-block1-left{
  width: 38%;
}
.interview .point1 .point1-block1-right{
  width: 57%;
}
.interview .point1 .point1-block1-right .title{
  font-size: 2.2rem;
  margin-bottom: 20px;
}
.interview .point1 .point1-block2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.interview .point1 .point1-block2 .point1-block2-inner{
  width: 32%;
}

.interview .point2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 50px;
}
.interview .point2 .point2-left{
  width: 32%;
}
.interview .point2 .point2-right{
  width: 64%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.interview .point2 .point2-right .point2-right-inner{
  width: 47%;
}
.interview .point2 .point2-right .point2-right-inner:last-child{
  width: 100%;
}
.interview .point2 .point2-right .point2-right-inner:last-child .title{
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.interview .txt-catch{
	margin-bottom: 40px;
	font-size: 3.5rem;
	text-align: center;
  text-decoration:underline #9d8062 1px;
  text-underline-offset: 13px;
}
.interview .txt-lead{
	margin-bottom: 20px;
	font-size: 2.5rem;
	text-align: center;
}
.interview .txt-lead + .txt{
	margin-bottom: 50px;
	font-size: 1.8rem;
	line-height: 2.38;
}
.interview h4{
	margin-bottom: 20px;
	font-size: 2.8rem;
	line-height: 1.6;
}
.interview h4.txt-lead{
	margin-bottom: 50px;
	font-size: 2.8rem;
	line-height: 1.6;
    text-align: center;
}
.interview h4.txt-lead + .txt{
	font-size: 1.8rem;
	line-height: 2.5;
  text-align: left;
}
.interview .pic .caption,
.interview .pic-main .caption{
	display: block;
	margin-top: 3px;
	text-align: right;
	font-size: 1.6rem;
}


/* reason */
.reason{
  padding-bottom: 60px;
}
.position{
	padding-bottom: 80px;
}
.position .l_01{
	justify-content: flex-start;
	margin-bottom: 25px;
}
.position .l_01 .position-img{
	width: 30%;
	margin-right: 2vw;
	padding-left: 3vw;	
}
.position .l_01 .position-img img{
    width: 100%;
}
.position .l_01 .position-img span{
    bottom: 0;
    left: 3vw;
    color: #fff;
    font-size: 1.4rem;
    background: rgba(0,0,0,.3);
    padding: 0 5px;
}
.position .l_01 .pic-list{
	width: 62%; 
  padding-top: 30px;
}
.position .l_01 .pic-list h4{
    top: 25%;
    text-align: left;
}
.position .l_01 .pic-list p{
    font-size: 1.8rem;
    line-height: 2.5;
    text-align: left;
}
.position ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.position ul li{
  width: calc((100% - 30px) /3);
}

.position .pic{
    position: relative;
	max-width: 1280px;
	margin: 50px auto 0;
}
.position .pic img{
	width: 100%;
}
.position .caption,
.position2 .pic .caption,
.merit .caption{
	display: block;
	margin-top: 3px;
	text-align: right;
	font-size: 1.6rem;
}

.position2 .layout-box{
	margin-bottom: 35px;
}
.position2 .layout-box .pic-main{
	max-width: 600px;
	width: 46.9%;
}
.position2 .layout-box .txt-area{
	width: 49.2%;
}

.position2 .pic-list,
.position3 .pic-list{
	display: flex;
  flex-wrap: wrap;
	justify-content: space-between;
}
.position2 .pic-list li{
	width: calc((100% - 30px) /3) ;
}
.position2 .layout-box + .pic-list{
	margin-bottom: 70px;
}
.position2 .layout-box + .pic-list li{
	width: calc((100% - 36px)/3);
  margin-bottom: 10px;
}
.position2 .txt-area + .pic-list{
	margin-top: 35px;
}

.position2 .pic{
    position: relative;
	max-width: 800px;
	margin: 0px auto;
}
.position2 .pic img{
	width: 100%;
}


.position2 .pic-list,
.position3 .pic-list{
  margin-bottom: 80px;
}
.position3 .pic-list li{
	width: calc((50% - 20px) /3);
}
.position3 .pic-list li:first-child{
	width: 48%;
}
.position3 .txt{
	margin-bottom: 50px;
	font-size: 1.8rem;
	line-height: 2;
}


/* merit */
.merit .inner{
    margin-bottom: 100px;
}
.merit.pic-list2{
    text-align: right;
}
.merit .p-list02{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}
.merit .pic-list2{
	margin-top: 50px;
}

.merit .btn-point ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 80px;
}
.merit .btn-point ul li{
  width: calc((100% - 30px) /3);
  max-width: 320px;
  
  background-color: #a78862;
  text-align: center;
  font-weight: bold;
  line-height: 1.5em;
}
.merit .btn-point ul li a{
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}
.merit .btn-point ul li p:nth-child(1){
  font-size: 1.4rem;
}
.merit .btn-point ul li p:nth-child(1) span{
  font-size: 2.4rem;
}
.merit .btn-point ul li p:nth-child(2){
  font-size: 2.2rem;
}
.merit .btn-point ul li p:nth-child(3){
  font-size: 1.4rem;
}


.merit .point-no{
  color: #a78862;
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
  margin-bottom: 30px;
}
.merit .point-no p{
  font-size: 1.4rem;
}
.merit .point-no p:nth-child(1) span{
  font-size: 2.4rem;
}
.merit .point-no p:nth-child(2){
  font-size: 2.2rem;
}
.merit .pic-list{
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
}

.merit .quality,
.merit .ecology,
.merit .security{
  margin-bottom: 80px;
} 

.merit h5{
  font-size: 2.4rem;
  color: #a78862;
  border-left: solid 7px;
  padding-left: 5px;
  line-height: 1.2em;
}

.merit .quality .pic-list li:nth-child(1){
  width: 73.3828125%;
}
.merit .quality .pic-list li:nth-child(2){
  width: 26%;
}

.merit .ecology .pic-list li:nth-child(1){
  width: 29.5081967%;
}
.merit .ecology .pic-list li:nth-child(2){
  width: 54.6448087%;
}
.merit .ecology .pic-list li:nth-child(3){
  width: 15.8469945%;
}
.merit .security .pic-list li:nth-child(1){
  width: 30%;
}
.merit .security .pic-list li:nth-child(2){
  width: 70%;
}
.merit .security .sec_part{
  margin-top: 50px;
}
.merit .security .sec_part .pic-list{
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.merit .security .sec_part .pic-list li{
  width: calc((100% - 30px) /3);
}




















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

.header .btn-trigger{
  background-color: #bb9c62;
}

.page-ttl{
  margin-top: 68px;
}
.page-ttl h1 {
    width: 90vw;
    left: 5%;
    bottom: 3%;
}
.page-ttl .caption {
    position: absolute;
    left: 10px;
    bottom: 0;
    font-size: 1rem;
    line-height: 1.25;
}


.header .logo2{
    display: none;
  }
    
/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
  
/* interview
-----------------------------------------------------------------*/
  .interview{
    padding: 80px 0 50px;
  }
  .interview h3{
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
  .interview .txt-top{
    margin-bottom: 20px;
    font-size: 2.3rem;
  }
  .interview .sec-ttl{
    padding: 10px 20px;
    background-color: #bb9c62;
    font-size: 1.8rem;
    color: #fff;
  }
  .interview .part1 .part1-left,
  .interview .part2 .part2-left{
    width: 100%;
    margin-bottom: 10px;
  }
  .interview .part1 .part1-right,
  .interview .part2 .part2-right{
    width: 100%;
  }
  .interview .part1 .part1-right-inner,
  .interview .part2 .part2-right-inner{
    margin-bottom: 10px;
  }


  .interview .point1{
  margin-bottom: 50px;
}
.interview .point1 .point1-block1{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
}
.interview .point1 .point1-block1-left{
  width: 100%;
  margin-bottom: 20px;
}
.interview .point1 .point1-block1-right{
  width: 100%;
}
.interview .point1 .point1-block1-right .title{
  font-size: 2.0rem;
  margin-bottom: 20px;
}

.interview .point1 .point1-block2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.interview .point1 .point1-block2 .point1-block2-inner{
  width: 100%;
  margin-bottom: 20px;
}

.interview .point2 .point2-left{
  width: 100%;
  margin-bottom: 20px;
}
.interview .point2 .point2-right{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.interview .point2 .point2-right .point2-right-inner{
  width: 100%;
  margin-bottom: 20px;
}
.interview .point2 .point2-right .point2-right-inner:last-child{
  width: 100%;
}
.interview .point2 .point2-right .point2-right-inner:last-child .title{
  font-size: 2.0rem;
  margin-bottom: 20px;
}


  .interview .txt-catch{
    margin-bottom: 30px;
    font-size: 2.8rem;
  }
  .interview .txt-lead{
    margin-bottom: 20px;
    font-size: 2.3rem;
    text-align: left;
  }
  .interview .txt-lead + .txt{
    margin-bottom: 30px;
    font-size: 1.8rem;
    line-height: 2;
    text-align: left;
  }
  .interview h4{
    margin-bottom: 15px;
    font-size: 1.8rem;
  }
  .interview h4.txt-lead{
	margin-bottom: 20px;
	font-size: 2.3rem;
	line-height: 2;
    text-align: left;
  }
  .interview h4.txt-lead + .txt{
	font-size: 1.8rem;
	line-height: 2;
    text-align: left;
}
  .position .caption,
  .interview .pic .caption,
  .interview .pic-main .caption,
  .merit .caption{
    font-size: 1.1rem;
  }

/* reason */
  .reason{
    padding-bottom: 20px;
  }
  .reason .note{
    margin-bottom: 40px;
    font-size: 1rem;	
  }

  
  
    

/* position */
  .position{
    padding-bottom: 60px;
  }
  .position .l_01{
    justify-content: flex-start;
    margin-bottom: 25px;
  }
  .position .layout-box{
    display: block;
    margin-bottom: 35px;
  }
  .position .l_01 .pic-list{
    width: 100%; 
    padding-top: 0px;
  }
  .position ul li{
    width: calc((100% - 30px) /3);
  }
  .position .layout-box .pic-main{
    max-width: none;
    width: 100%;
    margin-bottom: 20px;
  }
  .position .layout-box .txt-area{
    width: 100%;
  }
  
  .position .pic-list{
    display: block;
  }
  .position .pic-list li{
    width: 100%;
	  margin-bottom: 30px;
  }
  .position .pic{
	  margin: 10px auto 0;
  }
    
  .position2 .pic-list,
  .position3 .pic-list{
    margin-bottom: 50px;
  }
  .position2 .pic-list li,
  .position3 .pic-list li{
    width: 100%;
    margin-bottom: 10px;
  } 
  .position2 .pic-list li,
  .position3 .pic-list li{
    width: 100%;
    margin-bottom: 10px;
  } 
    
  .position3 .pic-list li:first-child{
    width: 100%;
  }


  /* merit */
  .merit .btn-point ul li{
    width: 100%;
    margin: 0 auto 5px;
  }

  .merit .quality,
  .merit .ecology,
  .merit .security{
    margin-bottom: 50px;
  } 

  .merit .quality .pic-list li:nth-child(1),
  .merit .quality .pic-list li:nth-child(2){
    width: 100%;
    padding-bottom: 10px;
  }
  .merit .ecology .pic-list li:nth-child(1),
  .merit .ecology .pic-list li:nth-child(2),
  .merit .ecology .pic-list li:nth-child(3){
    width: 100%;
    padding-bottom: 10px;
  }

  .merit .security .pic-list li:nth-child(1),
  .merit .security .pic-list li:nth-child(2),
  .merit .security .pic-list li:nth-child(3){
    width: 100%;
    padding-bottom: 10px;
  }


    
}