@charset "utf-8";

/* ==========================================
  リセット & ベーススタイル
========================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Hiragino Sans";
}
img {
	width: 100%;
	height: 100%;
}
@font-face {
	font-family: "Copperplate";
	src: url("../fonts/OPTICopperplate-Light.otf") format("opentype");
	font-style: normal;
}
/*ガイドライン*/
/* #page_service::before,
#page_service::after {
	content: "";
	position: fixed;
	top: 0;
	margin: auto;
	display: block;
	width: 1px;
	height: 100vh;
	background: red;
	z-index: 100;
}
#page_service::before {
	left: -1280px;
	right: 0;
}
#page_service::after {
	left: 0;
	right: -1280px;
} */

/*Tracer*/
.tracer {
	display: none;
	position: absolute;
	top: 15vw;
	width: 100%;
	height: 7000px;
	opacity: 0;
	opacity: 0.8;
	background: url(../img/voice/trace_sp_voice.png) top center no-repeat;
	background-size: 100% auto;
	z-index: 100;
	z-index: -100;
}

/* ==========================================
  レスポンシブ対応 
  スマホ（ ~ 640px）
========================================== */
#reverberation_area {
	display: block;
	width: 100%;
}
/*=== メインビジュアル ===*/
#reverberation_area .voice-mv {
	width: 100%;
	height: 140vw;
	position: relative;
}
#reverberation_area .voice-mv-inner {
	width: 100%;
	height: 100%;
	padding: 0;
	position: relative;
}
/*テキスト画像*/
#reverberation_area .voice-mv-contents {
	position: absolute;
	top: 28.1vw;
	left: 0;
	width: 100%;
}
#reverberation_area .voice-mv-contents .mv-title-bg {
	width: 100%;
	margin: 0 0 0 -2vw;
}
#reverberation_area .voice-mv-contents .mv-title-bg .mv-title {
	width: 100%;
	height: auto;
}
#reverberation_area .voice-mv-contents .mv-subtitle-bg {
	width: 34.5vw;
	height: 34.5vw;
	margin: -9.1vw 4vw 0 auto;
}
/*MV画像*/
#reverberation_area .voice-mv-bg {
	width: auto;
	height: 140vw;
}
#reverberation_area .voice-mv-bg .voice-mv-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*=== コンテンツ ===*/
#reverberation_area .voice-content {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 22.5vw;
}
#reverberation_area .voice-content-bg {
	padding-top: 28.593vw;
}
#reverberation_area .voice-content-inner {
	width: 100%;
	height: 100%;
	padding: 0 5vw;
	/* margin-bottom: 21.718vw; */
	display: flex;
	flex-direction: column-reverse;
	/* align-items: center; del? */
}
#reverberation_area .voice-content-inner .contents-area {
	width: 100%;
	padding-top: 9.6vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#reverberation_area .contents-area .tag-bg {
	margin-bottom: 2.5vw;
	letter-spacing: 0.36vw;
	border-bottom: 0.4vw solid #e0e0e0;
	color: #333;
	font-family: "Copperplate";
	font-size: 2.5vw;
	padding-bottom: 1vw;
}
#reverberation_area .contents-area .content-text {
	width: 100%;
	margin: 0;
}
#reverberation_area .content-text .content-text-lead {
	font-size: 4vw;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 6.4vw;
	letter-spacing: 0vw;
}
#reverberation_area .content-text .text-line {
	background-image: linear-gradient(to right, #cfa7cd, #a59aca, #a3bce2, #a5d4ad, #fff9b1, #fcd7a1, #f59090);
	background-repeat: no-repeat;
	background-size: 100% 1.5625vw;
	background-position: left bottom;
}
#reverberation_area .content-text .text-highlight {
	font-size: 6.15vw;
	font-weight: 700;
}
#reverberation_area .content-text .content-text-description {
	font-size: 3.438vw;
	line-height: 1.7;
	margin-bottom: 14vw;
	font-weight: 400;
	letter-spacing: 0.1vw;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
#reverberation_area .content-text .content-text-description-two {
	display: none;
}
#reverberation_area .detail-btn {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#reverberation_area .detail-btn .detail-btn-bg {
	width: 67.5vw;
	height: 15vw;
	background-color: #333333;
	border-radius: 15vw;
	line-height: 15vw;
	text-align: center;
}
#reverberation_area .detail-btn .detail-btn-bg.two {
	margin-top: 5vw;
}
#reverberation_area .detail-btn-text {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0.15625vw 0;
	color: #ffffff;
	text-decoration: none;
}
/* arrow */
#reverberation_area .cut-bar {
	position: absolute;
	top: 51%;
	right: 5vw;
	transform: translate(0, -50%);
	width: 9.843vw;
	height: 0.3125vw;
	background-color: #ffffff;
}
#reverberation_area .cut-bar::after {
	content: "";
	position: absolute;
	width: 30%;
	height: 0.3125vw;
	bottom: 0;
	right: 0;
	transform: rotate(34deg);
	transform-origin: right bottom;
	background-color: #ffffff;
}
/******/

#reverberation_area .voice-content-inner .img-area {
	width: 83.75vw;
	height: 57.499vw;
	position: relative;
	/* box-shadow: 0 0.3vw 1.17vw rgba(0, 0, 0, 0.2);  ?? del? */
}
#reverberation_area .img-area .img-area-bg {
	width: 107%;
	height: 100%;
}
#reverberation_area .interview-img {
	width: 100%;
	object-fit: cover;
}
#reverberation_area .img-area-title-bg {
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: left;
}
#reverberation_area .img-area-title-bg .tag-one {
	height: 6.25vw;
	line-height: 6.25vw;
	display: inline-block;
	font-size: 3.125vw;
	background-color: #41c7f1;
	text-align: center;
	padding: 0 2.5vw;
	padding-left: 4.062vw;
	margin-bottom: 2.5vw;
	color: #ffffff;
	font-weight: 500;
}
#reverberation_area .tag-one.jetcms {
	background-color: #41c7f1;
}
#reverberation_area .tag-one.uchino-ai {
	background-color: #0693e3;
}
#reverberation_area .tag-one.uchino-writer {
	background-color: #1ab1af;
}
#reverberation_area .tag-one.our-ai-mensetsu {
	background-color: #9b51e0;
}
#reverberation_area .tag-one.ai-switch {
	/* background-color: #41C7F1; */
}
#reverberation_area .img-area-title-bg .title-text {
	width: 85.468vw;
	height: 14.8vw;
	font-size: 3.125vw;
	font-weight: 500;
	background-color: rgba(0, 0, 0, 0.45);
	text-align: left;
	color: #ffffff;
	padding: 2.6vw 5vw 0;
	line-height: 1.5;
	margin: 0;
}
#reverberation_area .img-area-title-bg .title-text-two {
	display: none;
}

/* === modal === */
#reverberation_area .modal.voice-interview {
	display: none;
}
#reverberation_area .modal.voice-interview.active {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10000;

	display: flex;
	justify-content: center;
	align-items: center;
}
#reverberation_area .modal-container {
	width: 90%;
	margin-top: 0;
	box-shadow: 0 0.6vw 2.343vw rgba(0, 0, 0, 0.2);
	border-radius: 1.562vw;
	position: relative;

	opacity: 0;
	transform: scale(0.95);
}
#reverberation_area .modal-container .modal-close {
	width: 7vw;
	height: 7vw;
	min-width: 32px;
	min-height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: #ffffff;
	position: absolute;
	top: -13vw;
	right: 0;
	font-size: 3.75vw;
	cursor: pointer;
	color: #555;
	font-weight: bold;
}
#reverberation_area .modal-close:hover {
	color: #000000;
}

/*modal-container*/
#reverberation_area .youtube-bg {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}
#reverberation_area .youtube-bg iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	border-radius: 1.562vw;
}
/* modal animation*/
@keyframes modalFadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
#reverberation_area .modal.voice-interview.active .modal-container {
	animation: modalFadeInScale 0.4s ease-out forwards;
}
/*メールアンケート*/
#reverberation_area .modal-container.mail_survey {
	width: fit-content;
	max-width: 88%;
}
.mail_survey_box {
	width: 100%;
	height: auto;
	max-height: 88vh;
	overflow: hidden;
}
.mail_survey_box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================
  タブレット表示 (641px ~ 1279px)
========================================== */
@media only screen and (min-width: 641px) and (max-width: 1279px) {
	/*Tracer*/
	.tracer {
		display: none;
		position: absolute;
		top: 18.046875vw;
		width: 100%;
		height: 7000px;
		opacity: 0;
		opacity: 0.8;
		background: url(../img/voice/trace_tab_voice.png) top center no-repeat;
		background-size: calc(100% - 10vw) auto;
		z-index: 100;
		z-index: -100;
	}

	#reverberation_area .skew-angle-1 {
		transform-origin: left top;
	}
	/*=== メインビジュアル ===*/
	#reverberation_area .voice-mv {
		width: 100%;
		height: 30vw;
		position: relative;
	}
	#reverberation_area .voice-mv-bg {
		height: 100%;
		object-fit: contain;
	}
	#reverberation_area .voice-mv-contents {
		position: absolute;
		top: 0;
		left: 0;
		/* padding: 5.208vw 13.333vw 8.9vw 10.333vw; */
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#reverberation_area .voice-mv-contents .mv-title-bg {
		width: 43.75vw;
		margin: 1.719vw 0 0 -4.6875vw;
	}
	#reverberation_area .voice-mv-contents .mv-title-bg .mv-title {
		width: 100%;
		height: auto;
	}
	#reverberation_area .voice-mv-contents .mv-subtitle-bg {
		position: absolute;
		top: 17.734375vw;
		left: 52.34375vw;
		right: 0px;
		margin: auto;
		width: 10.15625vw;
		height: 10.15625vw;
	}

	/* === コンテンツ === */
	#reverberation_area .voice-content {
		margin-bottom: 7.6vw;
		padding: 0 5vw;
	}
	#reverberation_area .voice-content-bg {
		padding-top: 11.562vw;
	}
	#reverberation_area .voice-content-inner {
		width: 100%;
		height: 100%;
		padding: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
	#reverberation_area .voice-content-inner .contents-area {
		width: 35.7vw;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-top: 2.3vw;
	}
	#reverberation_area .contents-area .tag-bg {
		padding-bottom: 0.3vw;
		margin-bottom: 0.4vw;
		font-size: 0.75vw;
		letter-spacing: 0.1vw;
		border-bottom: 0.078vw solid #e0e0e0;
	}
	#reverberation_area .contents-area .content-text {
		width: 95%;
		font-size: 3.75vw;
		margin: 0;
	}
	#reverberation_area .content-text .content-text-lead {
		min-height: 10.234vw;
		font-size: 1.575vw;
		line-height: 2;
		margin-bottom: 1.184vw;
	}
	#reverberation_area .content-text .text-line {
		background-image: linear-gradient(to right, #cfa7cd, #a59aca, #a3bce2, #a5d4ad, #fff9b1, #fcd7a1, #f59090);
		background-repeat: no-repeat;
		background-size: 100% 0.8vw;
		padding: 0 1.016vw 0.5vw 0;
	}
	#reverberation_area .content-text .text-highlight {
		font-size: 2.5vw;
		line-height: 1.3;
	}
	#reverberation_area .content-text .content-text-description {
		display: none;
	}
	#reverberation_area .content-text .content-text-description-two {
		display: block;
		min-height: 5vw;
		font-size: 1.25vw;
		margin-bottom: 3.531vw;
		line-height: 2;
		font-weight: 800;
	}
	#reverberation_area .detail-btn {
		justify-content: space-between;
	}
	#reverberation_area .detail-btn .detail-btn-bg {
		width: 16.7vw;
		height: 4.5vw;
		border-radius: 15vw;
		line-height: 4.922vw;
		text-align: center;
		margin-top: 0;
	}
	#reverberation_area .detail-btn .detail-btn-bg.two {
		margin-top: 0;
	}
	#reverberation_area .detail-btn-text {
		justify-content: flex-end;
		padding: 0 1.95vw 0 0;
		color: #ffffff;
		font-size: 1vw;
		text-decoration: none;
	}
	/* arrow */
	#reverberation_area .cut-bar {
		position: static;
		width: 2.7vw;
		height: 0.0781vw;
		margin-left: 1.172vw;
	}
	#reverberation_area .cut-bar.top {
		margin-left: 1.406vw;
	}
	#reverberation_area .cut-bar::after {
		height: 0.101vw;
	}
	#reverberation_area .detail-btn .detail-btn-bg.two .cut-bar {
		margin-left: 1.25vw;
	}
	/******/

	#reverberation_area .voice-content-inner .img-area {
		/* width: 50vw;
		height: 35vw; */
		width: 44.4vw;
		height: 31vw;
		position: relative;
		box-shadow: 0px 8px 29.44px 2.56px rgba(51, 51, 51, 0.08);
	}
	#reverberation_area .img-area .img-area-bg {
		width: 107%;
		height: 100%;
	}
	#reverberation_area .interview-img {
		width: 100%;
		object-fit: cover;
	}
	#reverberation_area .img-area-title-bg {
		color: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: left;
	}
	#reverberation_area .img-area-title-bg .tag-one {
		height: 1.8vw;
		line-height: 1.8vw;
		font-size: 0.938vw;
		text-align: left;
		padding: 0 1.172vw 0 0.772vw;
		margin-bottom: 0.45vw;
	}
	#reverberation_area .img-area-title-bg .title-text {
		display: none;
	}
	#reverberation_area .img-area-title-bg .title-text-two {
		display: block;
		width: 100%;
		height: 9vw;
		font-size: 1.016vw;
		background-color: rgba(0, 0, 0, 0.45);
		text-align: left;
		padding: 0;
		line-height: 1.875vw;
		margin: 0;
		padding: 1.5vw 2.188vw 1.563vw 1.8vw;
	}
	#reverberation_area .title-text-two .title-name {
		font-size: 1.5vw;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 1vw;
	}
	#reverberation_area .title-text-two .message {
		letter-spacing: 0.039vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding-left: 0.3vw;
		color: #ffffff;
		font-size: 1.016vw;
		line-height: 1.5;
	}

	/* === modal === */
	#reverberation_area .modal-container {
		width: 80%;
		box-shadow: 0 0.3vw 1.17vw rgba(0, 0, 0, 0.2);
		border-radius: 1vw;
	}
	#reverberation_area .modal-container .modal-close {
		width: 3.125vw;
		height: 3.125vw;
		top: -3.125vw;
		right: -3.75vw;
		font-size: 1.875vw;
	}
	/*modal-container*/
	#reverberation_area .youtube-bg iframe {
		border-radius: 0.781vw;
	}
}

/* ==========================================
  PC表示 (1280px ~)
========================================== */
@media only screen and (min-width: 1280px) {
	/*Tracer*/
	.tracer {
		display: none;
		position: absolute;
		top: 0;
		width: 100%;
		height: 7000px;
		opacity: 0;
		opacity: 0.8;
		background: url(../img/voice/trace_voice.jpg) top center no-repeat;
		z-index: 100;
		z-index: -100;
	}
	#reverberation_area .skew-angle-1 {
		transform-origin: left top;
	}
	/*=== メインビジュアル ===*/
	#reverberation_area .voice-mv {
		width: 100%;
		height: 384px;
		position: relative;
	}
	#reverberation_area .voice-mv-bg {
		height: 100%;
		object-fit: contain;
	}
	#reverberation_area .voice-mv-contents {
		position: absolute;
		top: 0;
		left: 0;
		/* padding: 33px 200px 0px 280px; */
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#reverberation_area .voice-mv-contents .mv-title-bg {
		width: 560px;
		margin: 22px 0 0 -60px;
	}
	#reverberation_area .voice-mv-contents .mv-title-bg .mv-title {
		width: 100%;
		height: auto;
	}
	#reverberation_area .voice-mv-contents .mv-subtitle-bg {
		position: absolute;
		top: 227px;
		left: 670px;
		right: 0px;
		margin: auto;
		width: 130px;
		height: 130px;
	}

	/* === コンテンツ === */
	#reverberation_area .voice-content {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 112px;
	}
	#reverberation_area .voice-content-bg {
		padding-top: 112px;
	}
	#reverberation_area .voice-content.five {
		margin-top: 140px;
	}
	#reverberation_area .voice-content-inner {
		max-width: 1280px;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
	#reverberation_area .voice-content-inner .contents-area {
		/* width: 598px; del? */
		width: 512px;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-top: 35px;
	}
	#reverberation_area .contents-area .tag-bg {
		margin-bottom: 10px;
		font-size: 10px;
		letter-spacing: 1.4px;
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 3px;
	}
	#reverberation_area .contents-area .content-text {
		/* width: 90%; del? */
		width: 95%;
		font-size: 48px;
		margin: 0;
	}
	#reverberation_area .content-text .content-text-lead {
		min-height: 131px;
		font-size: 24px;
		/* line-height: 47px; del? */
		line-height: 2;
		margin-bottom: 19px;
	}
	#reverberation_area .content-text .text-line {
		background-image: linear-gradient(to right, #cfa7cd, #a59aca, #a3bce2, #a5d4ad, #fff9b1, #fcd7a1, #f59090);
		background-repeat: no-repeat;
		background-size: 100% 8px;
		padding: 0 8px 4px 0;
	}
	#reverberation_area .content-text .text-highlight {
		font-size: 32px;
		line-height: 1.3;
	}
	#reverberation_area .content-text .content-text-description {
		display: none;
	}
	#reverberation_area .content-text .content-text-description-two {
		display: block;
		min-height: 64px;
		font-size: 16px;
		margin-bottom: 58px;
		/* line-height: 30px; del? */
		line-height: 2;
		font-weight: 800;
	}
	#reverberation_area .detail-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#reverberation_area .detail-btn .detail-btn-bg {
		width: 240px;
		height: 64px;
		border-radius: 64px;
		line-height: 1;
		margin-top: 0;
	}
	#reverberation_area .detail-btn .detail-btn-bg.two {
		margin-top: 0;
	}
	#reverberation_area .detail-btn-text {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		padding: 0 25px 0 0;
		color: #ffffff;
		font-size: 14px;
		text-decoration: none;
	}
	/* arrow */
	#reverberation_area .cut-bar {
		position: static;
		width: 40px;
		height: 1px;
		margin-left: 26px;
	}
	#reverberation_area .cut-bar::after {
		height: 1px;
	}
	#reverberation_area .detail-btn .detail-btn-bg.two .cut-bar {
		margin-left: 16px;
	}
	/******/
	#reverberation_area .voice-content-inner .img-area {
		width: 640px;
		height: 448px;
		position: relative;
		box-shadow: 0px 8px 29.44px 2.56px rgba(51, 51, 51, 0.08);
	}
	#reverberation_area .img-area .img-area-bg {
		width: 107%;
		height: 100%;
	}
	#reverberation_area .interview-img {
		width: 100%;
		object-fit: cover;
	}
	#reverberation_area .img-area-title-bg {
		color: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: left;
	}
	#reverberation_area .img-area-title-bg .tag-one {
		/* width: 130px; del?  */
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		text-align: left;
		/* padding: 6px 15px 6px 25px; del?*/
		padding: 0px 15px;
		padding-left: 15px;
		margin-bottom: 8px;
	}
	#reverberation_area .img-area-title-bg .title-text {
		display: none;
	}
	#reverberation_area .img-area-title-bg .title-text-two {
		display: block;
		width: 100%;
		font-size: 13px;
		background-color: #000000;
		/* opacity: 63%; del? */
		background-color: rgba(0, 0, 0, 0.45);
		text-align: left;
		padding: 0;
		line-height: 24px;
		margin: 0;
		padding: 21px 28px 20px 25px;
	}
	#reverberation_area .title-text-two .title-name {
		height: 28px;
		font-size: 23px;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 11px;
	}
	#reverberation_area .title-text-two .message {
		color: #ffffff;
		font-size: 14px;
		letter-spacing: 0.5px;
		font-weight: 400;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding-left: 7px;
		margin: 0;
	}

	/* === modal === */
	#reverberation_area .modal-container {
		width: 70%;
		max-width: 750px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}
	#reverberation_area .modal-container .modal-close {
		width: 40px;
		height: 40px;
		top: -40px;
		right: -48px;
		font-size: 24px;
	}
	#reverberation_area .youtube-bg iframe {
		border-radius: 10px;
	}
	/*メールアンケート*/
	#reverberation_area .modal-container.mail_survey {
		width: fit-content;
		max-width: 88%;
	}
	.mail_survey_box {
		width: 100%;
		height: auto;
		max-height: 88vh;
		overflow: hidden;
	}
	.mail_survey_box img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}