@charset "UTF-8";
.p-voice {
	--color-grn1: #008b6c;
	--color-bl1: #40a1c5;
	--color-gb1: #008999;
	--color-yw: rgba(255, 242, 0,0.4);
}
.p-voice-mv {
	position: relative;
}
.p-voice-mv h2 {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 100%;
	background-color: rgba(79, 154, 178, 0.8);
	font-size: clamp(28px, 24.6px + 1.0625vw, 45px);
	color: #fff;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 400;
	text-align: center;
	padding-block: 25px;
}
@media screen and (max-width: 767px) {
	.p-voice-mv h2 {
		top: 30%;
		line-height: 1.5;
	}
}
.p-voice-mv h2:before {
	content: "";
	display: block;
	margin-inline: auto;
	background-image: url(../img/voice/mv-mark.webp);
	background-size: cover;
	width: 330px;
	height: 106px;
}
@media screen and (max-width: 1000px) {
	.p-voice-mv h2:before {
		height: auto;
		width: 200px;
		aspect-ratio: 165/53;
	}
}
@media screen and (max-width: 1000px) {
	.p-voice-mv figure {
		aspect-ratio: 12/7;
	}
	.p-voice-mv figure img {
		object-fit: cover;
		height: 100%;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.p-voice-mv figure {
		aspect-ratio: 1/1;
	}
}
.p-voice-mv nav {
	position: absolute;
	z-index: 2;
	bottom: 0;
	width: 100%;
}
@media screen and (max-width: 767px) {
	.p-voice-mv nav {
		position: static;
	}
}
.p-voice-mv nav ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	width: 90%;
	max-width: 1100px;
	margin-inline: auto;
}
@media screen and (max-width: 767px) {
	.p-voice-mv nav ul {
		width: 100%;
		grid-template-columns: 1fr;
	}
}
.p-voice-mv nav ul li {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: clamp(14px, 13.2px + 0.25vw, 18px);
	line-height: 1.5;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	color: #fff;
	cursor: pointer;
	transition: 0.3s;
}
@media screen and (max-width: 767px) {
	.p-voice-mv nav ul li {
		font-size: 1.6rem;
	}
}
.p-voice-mv nav ul li br {
	display: none;
}
@media screen and (max-width: 1000px) {
	.p-voice-mv nav ul li br {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	.p-voice-mv nav ul li br {
		display: none;
	}
}
.p-voice-mv nav ul li:nth-of-type(1) {
	background-color: var(--color-grn1);
}
.p-voice-mv nav ul li:nth-of-type(2) {
	background-color: var(--color-bl1);
}
.p-voice-mv nav ul li:nth-of-type(3) {
	background-color: var(--color-gb1);
}
.p-voice-mv nav ul li:hover {
	background-color: #fff;
	border: 1px solid;
}
.p-voice-mv nav ul li:hover:nth-of-type(1) {
	color: var(--color-grn1);
	border-color: var(--color-grn1);
}
.p-voice-mv nav ul li:hover:nth-of-type(2) {
	color: var(--color-bl1);
	border-color: var(--color-bl1);
}
.p-voice-mv nav ul li:hover:nth-of-type(3) {
	color: var(--color-gb1);
	border-color: var(--color-gb1);
}
.p-voice-wrap {
	position: relative;
	padding-block: clamp(60px, 48px + 3.75vw, 120px);
}
@media screen and (max-width: 767px) {
	.p-voice-wrap {
		padding-block-start: 0;
	}
}
.p-voice-wrap .tab-content {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
	.p-voice-wrap .tab-content {
		padding-block-start: 60px;
	}
}
.p-voice-wrap .tab-content.active {
	display: block;
	position: relative; /* 高さを持たせるため、表示中のものだけrelativeに */
}
.p-voice-wrap #tab1 {
	--place-col: #008b6c;
}
.p-voice-wrap #tab2 {
	--place-col: #40a1c5;
}
.p-voice-wrap #tab3 {
	--place-col: #008999;
}
@media screen and (max-width: 767px) {
	.p-voice-wrap #tab3 .p-voice-wrap__area1 figure img {
		object-position: 75%;
	}
}
.p-voice-wrap__inner {
	width: 90%;
	max-width: 1500px;
	margin-inline: auto;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: clamp(25px, 20px + 1.5625vw, 50px);
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__inner {
		flex-direction: column-reverse;
	}
}
.p-voice-wrap__inner.-rev {
	flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__inner.-rev {
		flex-direction: column-reverse;
	}
}
.p-voice-wrap__area1 {
	position: relative;
}
.p-voice-wrap__area1 h3 {
	color: #fff;
	position: absolute;
	bottom: 5%;
	width: 100%;
	text-align: center;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 400;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.7);
	font-size: clamp(22px, 18px + 1.25vw, 42px);
	z-index: 2;
}
@media screen and (max-width: 1000px) {
	.p-voice-wrap__area1 h3 {
		text-align: right;
	}
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__area1 h3 {
		text-align: center;
		line-height: 1.5;
	}
}
.p-voice-wrap__area1 h3 br {
	display: none;
}
@media screen and (max-width: 1000px) {
	.p-voice-wrap__area1 h3 br {
		display: block;
	}
}
.p-voice-wrap__area1 p {
	background-color: var(--place-col);
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	position: absolute;
	left: 20px;
	bottom: -100px;
	font-size: clamp(15px, 13.2px + 0.5625vw, 24px);
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	border-radius: 50%;
	line-height: 1.3;
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__area1 p {
		width: 120px;
		height: 120px;
		left: -10px;
		bottom: auto;
		top: -50px;
	}
}
.p-voice-wrap__area1 p span {
	display: block;
	font-size: clamp(13px, 12px + 0.3125vw, 18px);
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__area1 figure {
		aspect-ratio: 1/1;
	}
	.p-voice-wrap__area1 figure img {
		object-fit: cover;
		height: 100%;
	}
}
.p-voice-wrap__area1:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(181, 181, 182) 50%, rgb(255, 255, 255) 100%);
	margin-block: clamp(20px, 15px + 1.5625vw, 45px) clamp(60px, 48px + 3.75vw, 120px);
}
.p-voice-wrap__box:last-of-type:after {
	display: none;
}
.p-voice-wrap__box:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(181, 181, 182) 50%, rgb(255, 255, 255) 100%);
	margin-block: clamp(30px, 24px + 1.875vw, 60px);
}
.p-voice-wrap__box dl {
	flex: 1;
}
@media screen and (max-width: 767px) {
	.p-voice-wrap__box dl {
		line-height: 1.5;
	}
}
.p-voice-wrap__box dl dt {
	color: var(--place-col);
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: clamp(18px, 16.8px + 0.375vw, 24px);
	margin-block-end: clamp(10px, 8px + 0.625vw, 20px);
}
.p-voice-wrap__box dl dd {
	font-size: clamp(14px, 13.2px + 0.25vw, 18px);
}
.p-voice-wrap__box dl dd span {
	background-color: var(--color-yw);
}
.p-voice-wrap__box figure {
	flex: 1;
	display: flex;
	gap: 10px;
}
.p-voice-wrap__box figure.-nof {
	display: block;
}
.p-voice-wrap__box figure img {
	flex: 1;
	min-width: 0;
	object-fit: cover;
}/*# sourceMappingURL=voice.css.map */