@charset "utf-8";

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

  よくある質問

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

/*----------------------------------------------------------------------------------------------------



----------------------------------------------------------------------------------------------------*/
.voice-hdline{
  text-align: left;
}

.voice-contents{
  display: grid;
}

.voice-contents-item{
  background-color: #fff;
}
.img-txt{
	display: flex;
}
	.impressions dt{
	color: #fff;
	background-color: #d5b386;
	padding: 0.1em 0;
}

.impressions dd{
	text-align: left;
}

.impressions dd p.name{
	text-align: right;
	font-weight: 500;
}

.more-sentence{
	width: 100%;
	text-align: left;
	
}

.more-sentence .annotation span{
	color: #ff7387;
	font-weight: 500;
}

@media print,screen and (min-width:641px) {
  .voice{
    margin-bottom: 120px;
  }

  .voice-hdline{
    margin-bottom: 80px;
  }

  .voice-contents{
    grid-template-columns: repeat(2,1fr);
    /*grid-template-rows: repeat(2,300px);*/
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

	.voice-contents-item{
  padding: 40px;
   
}
	.img-txt{
  justify-content: space-between;
}

	.voice-contents-item .img-box{
	width: 180px;
		margin-right: 30px;
}
	
	.voice-contents-item .txt-box{
	width: 280px;
	
}
	
	.impressions dt{
	font-size:0.77em;
	margin-bottom: 30px;
}
.impressions dd p.name{
	font-size: 0.77em;
	padding-top: 10px;
}	
	.more-sentence{
margin-top: 30px;
}
	
					.more-sentence p:not(:last-of-type){
margin-bottom: 10px;
}

}

@media print,screen and (min-width:641px) and (max-width:1240px){
	.voice-contents-item .img-txt{
		display: block;
		text-align: center;
}
		.voice-contents-item .img-box{
	width: 280px;
	margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
}
			.voice-contents-item .txt-box{

	margin-left: auto;
		margin-right: auto;
}

	
	}

@media print,screen and (max-width:640px) {
  .voice{
    margin-bottom: 120px;
  }

  .voice-hdline{
    margin-bottom: 80px;
  }

  .voice-contents{
    grid-template-columns: repeat(1,1fr);
    /*grid-template-rows: repeat(4,300px);*/
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
		.voice-contents-item{
  padding: 20px;
}
	
			.voice-contents-item .img-txt{
		flex-wrap: wrap;
}
	
	.voice-contents-item .img-box{
	width: 100%;
		margin-bottom: 30px;
}
	
	.voice-contents-item .txt-box{
	width: 100%;
	
}
	
	.impressions dt{
	font-size:0.88em;
	margin-bottom: 10px;
}
.impressions dd p.name{
	font-size: 0.88em;
	padding-top: 5px;
}
	
		.more-sentence{
margin-top: 20px;
}
	
			.more-sentence p:not(:last-of-type){
margin-bottom: 5px;
}
	
}

/*----------------------------------------------------------------------------------------------------



----------------------------------------------------------------------------------------------------*/

.before-after-hdline{
  text-align: left;
}

#before-after-gallery {
  width: 100%;
  padding-top: 0px;
  padding-bottom:0px;
}

#before-after-gallery li{
  margin: 0;
}

.mypattern .slick-slide:not(.slick-center) {
  -webkit-filter: opacity(40%);
  -moz-filter: opacity(40%);
  -o-filter: opacity(40%);
  -ms-filter: opacity(40%);
  filter: opacity(40%);
  transition: 0.2s linear;
}

.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../image/icon/ar_pink_left.png")
}

#before-after-gallery li div{
  box-shadow: 0 10px 25px 0 rgba(255,115,135,0.1); 
} 

.next-arrow{
  transform: scale(-1, 1);
}

@media print,screen and (min-width:641px) {
  .before-after{
    padding-top: 100px;
    padding-bottom: 120px;	
  }

  .before-after-hdline{
    margin-bottom: 80px;
  }

  #before-after-gallery li div{
    margin: 0 80px;
  } 

  .slide-arrow{
    width: 52px;
    height: 52px;
  }

  .prev-arrow{
    left: calc(50% - 360px)
  }

  .next-arrow{
    right: calc(50% - 360px)
  }

}

@media print,screen and (max-width:640px) {
  #before-after-gallery {
    width: 100%;
    padding: 0 20px;
  }

  #before-after-gallery li{
    margin: 0;
  }

  .before-after{
    padding-top: 80px;
    padding-bottom: 100px;	
  }

  .before-after-hdline{
    margin-bottom: 60px;
  }

  #before-after-gallery li div{
    width: 100%;
  } 

  .slide-arrow{
    width: 24px;
    height: 24px;
  }

  .prev-arrow{
    left: -10px;
    z-index: 2;
  }

  .next-arrow{
    right: -10px;
    z-index: 2;
  }
}