/* Voice */
#voice .page-header span + p {
	color: var(--color-text);
}
#voice .voice-list {
	position: relative;
	isolation: isolate;
    gap:calc( var(--margin) * 2) var(--gap);
}

#voice main section .grid::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -72%);
  width: 100vw;
  height: 100%;
  background: url(../_img/okawa_mark_bg.svg) no-repeat 50% 100%;
  background-size: clamp(375px, 201.7vw, 3227px) auto;
  pointer-events: none;
  z-index: -1;
}
#voice .voice-list a {
    border-bottom: 1px solid var(--color-darkgray);
    padding-bottom: calc( var(--padding) * 2);
    transition:none;
    max-width:300px;
}
#voice .voice-list a:hover {
	color: var(--color-text);
    border-bottom: 4px solid var(--color-blue);
    padding-bottom: calc( (var(--padding) * 2) - 3px);
}

#voice .voice-list a .img + .flex {
	margin-top: calc( var(--margin) / 2);
}

#voice .voice-list a .flex .number {
	padding: 2px calc(var(--padding) / 2);
	font-weight: 500;
	font-family: "Murecho", sans-serif;
	color: var(--color-white);
	background: var(--color-darkgray);
    transition:var(--transition);
}

#voice .voice-list a:hover .flex .number {
	background: var(--color-blue);
}

#voice .voice-list a .flex .category {
	padding: 2px calc(var(--padding) / 2);
	border-left: 1px solid var(--color-text);
	border-right: 1px solid var(--color-text);
}

#voice .voice-list a .title + .flex {
	margin-top: calc(( var(--margin) ) / 4);
	gap: calc( var(--gap) / 2);
}

#voice .voice-list a .title + .flex p {
	color: var(--color-darkgray);
}


@media (max-width: 920px) {
	#voice main section .width-limiter{
		overflow: hidden;
	}
	#voice main section .grid::before{
		background-size: clamp(375px, 270vw, 3227px) auto;
		top: 30%;
		transform: translate(-50%, -74%);
	}
}
@media (max-width: 520px) {

	#voice main section .grid {
		grid-template-columns: 1fr;
	}
	#voice main section .grid::before{
		background-size: clamp(375px, 270vw, 3227px) auto;
		top: 45%;
		transform: translate(-50%, -74%);
	}
	#voice .voice-list a .img + .flex {
		gap: calc(( var(--gap) ) / 2);
	}

}


/* Voice - ditails */
#voice .voice-details {
	position: relative;
	align-items: stretch;
}
#voice .voice-details::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  background: url(../_img/okawa_mark_bg.svg) no-repeat 50% 100%;
  background-size: clamp(375px, 201.7vw, 3227px) auto;
  pointer-events: none;
  z-index: -1;
}
#voice .voice-header > .flex {
	align-items: stretch;
}
#voice .voice-header > .flex > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
#voice .voice-header .flex > div:last-child{
	flex: 0 0 auto;
	width: min(960px, 60vw);
	margin-left: auto;
	margin-right: calc(50% - 50vw);
}
#voice .voice-header .flex div .number {
	width: max-content;
    padding: calc(var(--padding) / 4) var(--padding);
    font-weight: 500;
    font-size:1.4em;
    font-family: "Murecho", sans-serif;
    letter-spacing:0.1em;
    color: var(--color-white);
    background: var(--color-blue);
}
#voice .voice-header .flex div .category {
	margin-top: var(--margin);
	color: var(--color-text);
    font-weight:600;
}
#voice .voice-header .flex div h1 {
	margin-top: 10px;
	line-height: var(--line-height);
	font-size: 2.8em;
	color: var(--color-text);
}
#voice .voice-header .flex div h1 + div {
	color: var(--color-darkgray);
}
#voice .voice-header .flex div a {
	margin-top: auto;
}
#voice .voice-header > .flex > div:last-child img {
  display: block;
  width: 100%;
  height: auto;
}
#voice .voice-details .catch {
	text-align: center;
	padding: calc( var(--padding) * 2 ) var(--padding);
	margin-top: var(--section-space);
	font-size: 2.4em;
	color: var(--color-blue);
}
#voice .voice-details .catch::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width:  calc(118px * min(100vw, var(--width-limit)) / 1600px);
	height: calc(118px * min(100vw, var(--width-limit)) / 1600px);
	display: block;
	background: url('../_img/voice/quotation_mark.svg') no-repeat center center;
	background-size: contain;
}
#voice .voice-details .catch::after {
	transform: scale(-1, -1);
	transform-origin: center;
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	width:  calc(118px * min(100vw, var(--width-limit)) / 1600px);
	height: calc(118px * min(100vw, var(--width-limit)) / 1600px);
	display: block;
	background: url('../_img/voice/quotation_mark.svg') no-repeat center center;
	background-size: contain;
}
#voice .voice-details .interview {
	margin-top: var(--margin);
}
#voice .voice-details .interview > div {
	display: flex;
	gap: calc(var(--gap) * 3);
	align-items: stretch;
}
#voice .voice-details .interview dt, 
#voice .voice-details .interview dd {
	padding: var(--padding) 0;
	border-bottom: none;
}
#voice .voice-details .interview dt {
	flex: 0 0 32%;
	font-size: 1.6em;
	font-weight: 500;
	color: var(--color-blue);
	border-top: 2px solid var(--color-blue);
}
#voice .voice-details .interview dd {
	flex: 1 1 auto;
	border-top: 1px solid var(--color-text);
}
#voice .voice-details .comment {
	margin-top: var(--section-space);
	align-items: stretch;
}

#voice .voice-details .comment > div:first-child{
  flex: 0 0 clamp(0px, 32.7vw, 560px);
}
#voice .voice-details .comment > div:first-child img {
	width:  100%;
	height: auto;
}
#voice .voice-details .comment > div:last-child {
	padding: calc( var(--padding) * 2) calc( var(--padding) * 3);
	flex: 1 1 0%;
	background: var(--color-blue);
	color: var(--color-white);
}

#voice .voice-details .comment > div:last-child .title {
	font-size: 1.4em;
}

@media (max-width: 920px){
	#voice main section .voice-details::before{
		background-size: clamp(375px, 270vw, 3227px) auto;
		top: 30%;
		transform: translate(-50%, -74%);
	}
	#voice .voice-header > .flex {
		gap: var(--gap);
		flex-direction: column;
	}
	#voice .voice-header .flex > div:first-child{
		order: 2;
	}
	#voice .voice-header .flex > div:last-child{
		width: 100%;
		margin-right: 0;
		order: 1;
	}
	#voice .voice-header > .flex > div a {
		margin-top: var(--margin);
	}
	#voice .voice-details .catch {
		text-align: left;
	}
	#voice .voice-details .interview > div {
		flex-direction: column;
		gap: 0;
	}
	#voice .voice-details .comment {
		align-items: stretch;
	}
	#voice .voice-details .comment > div:first-child {
		width: 50%;
		overflow: hidden;
	}
	#voice .voice-details .comment > div:first-child img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}
	#voice .voice-details .comment > div:last-child {
		padding: calc(var(--padding) * 2);
		flex: 1 1 0%;
		min-width: 0;
	}
}

@media (max-width: 780px) {
	#voice .voice-details .comment {
		flex-wrap: wrap;
	}
	#voice .voice-details .comment > div:first-child {
		width: 100%;
		flex: 0 0 auto;
	}
	#voice .voice-details .catch {
		text-align: left;
		padding: calc( var(--padding) * 2 ) calc( var(--padding) * 2 );
	}
	#voice .voice-details .catch::before {
		width:  calc(118px * min(100vw, var(--width-limit)) / 920px);
		height: calc(118px * min(100vw, var(--width-limit)) / 920px);
	}
	#voice .voice-details .catch::after {
		width:  calc(118px * min(100vw, var(--width-limit)) / 920px);
		height: calc(118px * min(100vw, var(--width-limit)) / 920px);
	}
}

@media (max-width: 520px) {
	#voice main section .voice-details::before{
		background-size: clamp(375px, 270vw, 3227px) auto;
		top: 45%;
		transform: translate(-50%, -74%);
	}
	#voice .voice-details .catch {
		text-align: left;
		padding: calc( var(--padding) * 2 ) var(--padding);
	}
}