.section-voice-hero-section {
    background-image: url('/wp-content/uploads/2025/10/voice_background_desktop.png');
    height: 260px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.section-voice-hero-section h1 {
    text-shadow: 0 5px 15px rgba(253, 253, 253, 0.5);
}

#section-voice{
  width:100vw;
  padding:100px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.section-voice-main-container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:35px;
}
.section-voice-main-container .section-voice-box-container{
  box-shadow: 2px 5px 10px 0px #2828281A;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.section-voice-details-header{
	display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
}

.section-voice-details-header .section-voice-details-prefecture{
  max-width:222px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.section-voice-details-header .section-voice-details-prefecture > p:first-of-type{
  border: 1px solid rgba(40, 40, 40, 0.25);;
  padding: 4px 10px !important;
  width:fit-content
}
.section-voice-details-header .section-voice-details-prefecture > p:last-of-type{
  width: 223px;               /* fixed width */
  display: -webkit-box;       /* required for line clamping */
  -webkit-line-clamp: 3;      /* number of lines to show before ... */
  -webkit-box-orient: vertical; 
  overflow: hidden;           /* hide overflowing text */
  text-overflow: ellipsis;    /* show ... */
  line-height: 1.4;    
}
.section-voice-details-header img{
  width:79.37px; 
  height:80px;
}
.section-voice-details-header .section-voice-details-prefecture > div{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:8px;
	flex:1;
}
.section-voice-details-header .section-voice-details-prefecture .voice-circle{
   width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: var(--base-black);
  margin-top:8px;
}
.section-voice-details-content{
  display:flex;
  flex-direction:row !important;
  gap:10px;
  height:87px;
  width:100%;
}
.section-voice-details-content img{
    width: 100%;
    max-width:auto;
    height: auto;
    object-fit: cover;
    flex: 1;
}

 .voice-table {
  width:100%;
  height:100%;
  border-collapse: collapse;

}
.voice-table tr,
.voice-table td {
  padding: 4px 5px;
  border: 0.05em solid gray !important;
  text-align: center;
}

.voice-table td:first-child {
  min-width: 79px;
  width: 79px;
  max-width: 300px;
  background-color: var(--base-4);
}
.voice-table td:last-child {
 
  background-color:var(--base-2);
}




/*SINGLE VOICE PAGE*/
#section-voice-slug {
  width: 100vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding:100px 16px;
}
.section-voice-slug-container {
  width: 100%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.section-voice-voice-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}
.section-voice-voice-text div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}
.section-voice-voice-text div img {
  width: 148px;
  height: 150px;
}
.section-voice-voice-text .section-voice-prefecture {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  min-width: 245px;
  max-width:300px;
  width:245px;
  flex-wrap: nowrap; 
  white-space: nowrap;
 
}
.section-voice-voice-text .section-voice-prefecture p:first-of-type {
  border: 1px solid rgba(40, 40, 40, 0.25);;
  padding: 4px 10px !important;
  line-height:1 !important;
}

.section-voice-voice-text div .circle {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: var(--base-black);
  margin-top:5px;
}

.section-voice-image {
  display: flex;
  flex-direction: row;
  align-items: center; 
  gap: 20px;
  width: 100%;
  height: 100%;
}
.section-voice-image img {
    width: 400px;
    max-width: 400px !important;
    height: 280px;
    object-fit: cover;
    flex: 1;
  }

.section-voice-image .voice-table {
  width: 100%;
  border-collapse: collapse;
  height: auto;
  vertical-align: top; 
  margin: 0; 
  padding: 0; 
}
.section-voice-image .voice-table tr,
.section-voice-image .voice-table td {
  border: 1px solid #ccc;
  padding: 10px 14px;
  text-align: center;
}
.section-voice-image .voice-table tr > *:first-child {
  min-width: 120px;
  width: 120px;
  max-width: 300px;
  background-color: var(--base-4);
}
.section-voice-nav-button{
	margin-top:30px
}
/*END SINGLE VOICE PAGE*/


/*VOICE CUSTOMER FEEDBACK*/
#section-voice-customer-feedback{
	width:100vw;
	display:flex;
	align-content:center;
	justify-content:center;
	padding:100px 15px;
	background-color:var(--base-4)
}
.section-voice-customer-feedback-main-container{
	width:100%;
	max-width:1200px;
	box-shadow: 0px 8px 25px 0px rgba(40, 40, 40, 0.1);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:50px;
	padding:50px 40px;
	background-color:var(--base-white)
}
/*END VOICE CUSTOMER FEEDBACK*/




@media screen and (max-width:1200px){
  .section-voice-main-container{
  grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width:800px){
  .section-voice-main-container{
  grid-template-columns: repeat(1, 1fr);
  }
  /*SINGLE VOICE PAGE*/
  #section-voice-slug {
    padding: 60px 16px !important;
  }
  .section-voice-slug-container {
    gap: 25px;
  }
  .section-voice-voice-text {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .section-voice-voice-text div {
    gap: 10px;
  }
  .section-voice-voice-text div .section-voice-prefecture {
    justify-content: center; 
    text-align: center; 
    width: 100%; 
  }
  .section-voice-image {
  }
  .section-voice-voice-text div img {
    width: 79.37px;
    height: 80px;
  }
  .section-voice-prefecture p:first-of-type {
    font-size: 13px;
  }
.section-voice-prefecture p:last-of-type {
    font-size: 22px;
  }

  .voice_text {
    font-size: 16px;
  }
  .section-voice-image {
    gap: 10px;
  }
  .section-voice-image .voice-table tr,
  .section-voice-image .voice-table td {
    padding: 5.5px 5px;
    font-size: 15px;
  }
  .section-voice-image .voice-table tr > *:first-child {
    min-width: 80px;
    width: 80px;
    max-width: 100px;
  }
  .section-voice-slug-container div:last-of-type button {
    margin-top: -10px !important;
  }
  /*END SINGLE VOICE PAGE*/
}


@media screen and (max-width:600px){
	#section-voice{
 		padding:70px 16px;
	}
	 .section-voice-main-container .section-voice-box-container{
	  padding:20px 8px;
	  }
	.section-voice-hero-section {
    	background-image: url('/wp-content/uploads/2025/10/voice_background_mobile.jpg');
		height:200px !important;
	}
	/*SINGLE VOICE PAGE*/
  .section-voice-image img {
    width: 100%;
    max-width: 140px !important;
    height: 100px;
	flex:1
	/*object-fit: cover; */
  }
	.section-voice-main-container .section-voice-box-container{
  	padding:20px 8px;
	}
	.section-voice-details-prefecture{
		width:167px
	}
	.section-voice-details-header .section-voice-details-prefecture > p:last-of-type{
		width:167.63px
	}

	/*END SINGLE VOICE PAGE*/
  	/*VOICE CUSTOMER FEEDBACK*/
	#section-voice-customer-feedback{
		padding:70px 16px;
	}
	.section-voice-customer-feedback-main-container{
		padding:30px 16px;
	}
	
	.section-voice-details-content img{
	  max-width: 120px;
	  height:90px;
	}
}

@media screen and (max-width:350px){
  .section-voice-details-content, .section-voice-image{
    flex-direction:column !important;
	height:auto;
  }
}