@charset "utf-8";

#contents{
	width: 100%;
}
@media screen and (max-width: 768px) {
  #contents {
    padding: 0;
  }
}
.inner{
	width: 1024px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.inner{
		width: 100%;
	}
}
.mv{
  width: 100%;
  /*height: calc(100vh - 50px);*/
	height: 70vh;
  overflow: hidden;
  background: url(../img/voice/mv.jpg);
  background-position: center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
	.mv{
		height: 80vw;
	}
}
.voice_lead{
	padding: 60px 0;
	background: #d6c3a3;
	color: #333333;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.voice_lead{
		padding: 7.8125vw 0;
	}
}
#contents .voice_lead p{
	margin-bottom: 0;
	font-size: 42px;
}
@media screen and (max-width: 768px) {
	#contents .voice_lead p{
		font-size: 6.25vw;
	}
}
.voice_lead p span{
	display: block;
	font-size: 0.66666666666em;
}
@media screen and (max-width: 768px) {
	.voice_lead p span{
		margin-bottom: 0.4em;
	}
}
.voice_nav{
	display: flex;
	z-index: 1;
	position: relative;
	margin: 60px auto;
	padding-top: 105px;
	margin-top: -45px;
}
@media screen and (max-width: 768px) {
	.voice_nav{
		flex-wrap: wrap;
		row-gap: 15px;
		margin: 7.8125vw auto;
		padding-top: 50px;
		margin-top: calc(-50px + 7.8125vw);
	}
}
.voice_nav li{
	width:calc(100% / 6);
	border-left:1px solid #d6c3a3;
	font-size: 18px;
	text-align: center;
}
.voice_nav li:last-child{
	border-right: 1px solid #d6c3a3;
}
@media screen and (max-width: 768px) {
	.voice_nav li{
		width: calc(100% / 3);
		font-size: 3.6458333333vw;
		}
	.voice_nav li:nth-child(3n){
		border-right: 1px solid #d6c3a3;
	}
}
.voice_nav li a{
	display: grid;
	height: 100%;
	align-content: space-between;
	padding: 20px 0 15px;
}
.arrow {
  position: relative;
  display: block;
  height: 10.2px;
  margin-top: 15px;
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 14px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: 50% calc(100% - 0.5px);
}
.arrow::before {
  transform: rotate(45deg);
}
.arrow::after {
  transform: rotate(-45deg);
}
#link_shopping,
#link_location,
#link_quality,
#link_plan,
#link_design,
#link_other{
	padding-top: 105px;
	margin-top: -105px;
}
@media screen and (max-width: 768px) {
	#link_shopping,
	#link_location,
	#link_quality,
	#link_plan,
	#link_design,
	#link_other{
		padding-top: 50px;
		margin-top: -50px;
	}
}
.voice_wrap{
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
	.voice_wrap{
		gap:20px;
	}
}
.voice_wrap li{
	width: calc((100% - 40px) / 2);
}
@media screen and (max-width: 768px) {
	.voice_wrap li{
		width: 100%;
	}
}
.voice_inner{
	padding: 30px;
	height: 100%;
	box-shadow: 3px 3px 5px 0px rgba(76, 74, 74, 0.3); 
}
@media screen and (max-width: 768px) {
	.voice_inner{
		padding: 20px;
	}
}
.voice_ttl{
	width: 180px;
	padding: 0.4em;
	border-radius: 30px;
	background: #ece9e4;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
/*色変更*/
.shopping .voice_ttl{background-color: #e7c9a9;}
.location .voice_ttl{background-color: #dbe6dc;}
.quality .voice_ttl{background-color: #e1e7ef;}
.plan .voice_ttl{background-color: #f0e4d2;}
.design .voice_ttl{background-color: #dcd6cf;}

@media screen and (max-width: 768px) {
	#contents p.voice_ttl{
		font-size: clamp(12px, 3.125vw, 14px);	
	}
}
.text-box{
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-top: 20px;
}
@media screen and (max-width: 768px) {
	.text-box{
		gap: 20px;
	}
	.text-box img{
		width: 90px;
	}
}
#contents .text-box p{
	margin-bottom: 0;
}
.age{
	font-size: 0.8em;
}
.caption{
	font-size: 12px;
}
@media screen and (max-width: 768px) {
	#contents p.caption{
		font-size: 3.125vw;	
	}
}
.float-btn{
	position: fixed;
	bottom: 10px;
	right: 10px;
	display: none;
	z-index: 1;
}
@media screen and (max-width: 768px) {
	.float-btn{
		bottom: calc(12.5vw + 10px);
	}
}
.float-btn img{
	max-width: 120px;
}
@media screen and (max-width: 768px) {
	.float-btn img{
		width: 25vw;
	}
}
#fix-bnr{
	display: none !important;
}