/*--------------------------------------------------------------
# ファーストビュー
--------------------------------------------------------------*/
.first_view {
	position: relative;
	width: 100%;
	padding: var(--vw64) 0;
	overflow: hidden;
}

.first_view__inner {
	display: grid;
	row-gap: var(--vw40);
	filter: var(--shadow-outer);
}

.first_view .logo {
	margin-bottom: var(--vw32);
}

.main_visual {
	position: relative;
	width: 110%;
	max-width: none;
	right: -5%;
}

.first_view .title__radiovision {
	font-size: var(--vw48);
}

.copy {
	font-size: var(--vw16);
	font-weight: 700;
	line-height: 2em;
}

.copy > span {
	display: inline-block;
}

.copy .copy__strong {
	font-size: var(--vw24);
	font-weight: 900;
	color: var(--color-green-dark);
	line-height: 1.75em;
}

.copy .copy__strong__extra {
	font-size: var(--vw32);
	line-height: 1.25em;
}

@media (max-width: 767px) {
	.first_view__container {
		width: var(--container-width);
		margin-right: auto;
		margin-left: auto;
	}
}

@media (min-width: 768px) {
	.first_view {
		height: 100vh;
		min-height: 100vh;
	}
	
	.first_view__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 5%;
		width: var(--container-width);
		height: 100%;
		margin-right: auto;
		margin-left: auto;
	}

	.first_view__main_visual__wrapper {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.main_visual {
		position: absolute;
		width: 60vw;
		left: 0;
	}
}

/*--------------------------------------------------------------
# #about
--------------------------------------------------------------*/
#about .text__intro {
	color: #5062ac;
	line-height: 2.5em;
	margin: 0 auto var(--vw48);
}

#about .text__intro .color__pink {
	color: var(--color-pink-dark);
}

@media (min-width: 768px) {
	#about .card__wrapper .card__primary:first-child {
		grid-column: span 2;
	}

	#about .text__intro {
		text-align: center;
		width: 80%;
		margin: 0 auto var(--vw80);
	}
}

/*--------------------------------------------------------------
# #issues
--------------------------------------------------------------*/
#issues h3.title__h3.card__title {
	font-size: var(--vw20);
	line-height: 1.75em;
}

/*--------------------------------------------------------------
# #costs
--------------------------------------------------------------*/
#costs h3.title__h3.card__title {
	font-size: var(--vw20);
	line-height: 1.75em;
}

@media (min-width: 768px) {
	#costs .card__wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*--------------------------------------------------------------
# 課題
--------------------------------------------------------------*/
.improve__wrapper.card__secondary__inner {
	padding: 0;
	border-radius: var(--vw8);
}

.improve__item {
	font-size: var(--vw16);
	font-weight: 500;
	line-height: 2em;
}

.improve__item > * {
	padding: var(--vw24);
}

.improve__item > *:first-child {
	background: #3a7ec133;
}

.improve__item > *:last-child {
	padding-top: var(--vw16);
}

.improve__arrow {
	aspect-ratio: 3 / 1;
	background: #3a7ec133;
	width: 15%;
	height: 100%;
	margin: auto;
	padding: 0;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/*--------------------------------------------------------------
# 比較
--------------------------------------------------------------*/
.comparison__wrapper {
	display: grid;
	gap: var(--vw24);
}

h3.title__comparison {
	font-size: var(--vw24);
	text-align: center;
	margin: var(--vw40) auto var(--vw24);
}

h3.title__comparison > *:first-child {
	opacity: .5;
}

h4.title__comparison__item {
	color: #fff;
	text-align: center;
	margin-bottom: var(--vw16);
}

.comparison__item__text {
	font-size: var(--vw14);
	font-weight: 500;
	color: #fff;
	line-height: 2em;
	text-align: center;
}

.comparison__item:first-child {
	background: #8e99c7;
}

.comparison__item:nth-child(2) {
	background: var(--color-pink-light);
}


.table__comparison {
	text-align: center;
}

.comparison__row:not(:last-child) {
	margin-bottom: var(--vw24);
	padding-bottom: var(--vw24);
	border-bottom: 1px solid var(--border-color);
}

.comparison__row__title {
	font-size: var(--vw16);
	font-weight: 500;
	line-height: 2em;
	margin-bottom: var(--vw8);
}

.comparison__row__title::before {
	content: '\e5d6';
	font-family: var(--fontawesome);
	font-weight: 700;
	color: var(--color-yellow-light);
	padding-right: .5em;
}

.comparison__row:last-child .comparison__row__title {
	color: var(--color-pink-dark);
}

.comparison__row__detail {
	font-size: var(--vw14);
	font-weight: 500;
	line-height: 2em;
	margin-bottom: var(--vw20);
	opacity: .5;
}

.comparison__row__cost {
	font-size: var(--vw20);
	font-weight: 700;
	line-height: 1.5em;
}

@media (min-width: 768px) {
	.comparison__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

	h3.title__comparison {
		text-align: center;
		margin: var(--vw56) auto var(--vw32);
	}
}

/*--------------------------------------------------------------
# プラン
--------------------------------------------------------------*/
.table__pricing {
	font-size: var(--vw14);
	font-weight: 500;
	table-layout: fixed;
	text-align: center;
	margin: 0;
	border-spacing: var(--vw8);
	line-height: 1.75em;
	filter: var(--shadow-outer);
}

.table__pricing th,
.table__pricing td {
	position: relative;
	background: #ffffffe6;
	min-height: 8em;
	padding: var(--vw16);
	border-radius: calc(var(--vw8) / 2) var(--vw8);
}

.pricing__row__tips th {
	background: transparent;
	min-height: auto;
	padding: 0;
	vertical-align: bottom;
}

.pricing__row__tips th > div {
	background: #3a7ec133;
	padding: calc(var(--vw8) / 2);
	border-radius: var(--vw16);
}

.pricing__row__tips th:not(.th__blank)::after {
	content: '';
	display: block;
	aspect-ratio: 3 / 2;
	background: #3a7ec133;
	width: 10%;
	height: 100%;
	margin: auto;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.pricing__row__name th {
	background: var(--color-green-dark);
	color: #fff;
}

.pricing__row__name .th__basic {
	background: var(--color-yellow-dark);
}

.pricing__row__name .th__standard {
	background: var(--color-pink-light);
}

.table__pricing tbody th {
	background: var(--color-blue-dark);
	color: #fff;
}

th.th__blank {
	background: transparent;
}

.table__pricing th > div,
.table__pricing td > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 3em;
}

.table__tip {
	font-size: calc(var(--vw14) * .75);
	font-weight: 500;
	line-height: 1.75em;
}

.table__tip .color__pink {
	font-weight: 900;
	color: var(--color-pink-dark);
}

.th__sub {
	font-size: calc(var(--vw14) * .75);
	font-weight: 700;
	line-height: 1.75em;
}

.pricing__name {
	font-size: var(--vw16);
	font-weight: 700;
	line-height: 1.75em;
}

.pricing__sub {
	font-size: calc(var(--vw14) * .75);
	line-height: 1.75em;
}

.pricing__price {
	font-size: var(--vw20);
	font-weight: 700;
	line-height: 1.75em;
}

.pricing__symbol {
	font-size: var(--vw20);
	font-weight: 700;
	line-height: 1.75em;
}

@media (max-width: 767px) {
	.table__pricing {
		min-width: 1040px;
	}
}

@media (max-width: 991px) {
	.container:has(>.table__wrapper) {
		width: 100%;
	}

	.table__wrapper {
		padding: 0 calc((100% - var(--container-width)) / 2);
		overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.table__wrapper::-webkit-scrollbar{
		display: none;
	}

	.table__pricing {
		min-width: 1120px;
	}
}

/*--------------------------------------------------------------
# フロー
--------------------------------------------------------------*/
.splide__flow {
	overflow: hidden;
}

.flow__item__title {
	font-size: var(--vw16);
	font-weight: 700;
	line-height: 2em;
	margin-bottom: var(--vw16);
}

.flow__item__detail {
	font-size: var(--vw14);
	font-weight: 500;
	line-height: 2em;
	opacity: .5;
}

.flow__step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: calc(var(--vw8) / 2);
	margin-bottom: var(--vw20);
}

.flow__step > *:first-child {
	font-size: var(--vw10);
	font-weight: 900;
	line-height: 1em;
	opacity: .5;
}

.flow__step > *:nth-child(2) {
	font-size: var(--vw32);
	font-weight: 900;
	line-height: 1em;
}

.splide__flow .card__primary {
	padding: var(--vw24);
}

@media (min-width: 768px) {
	.splide__inner {
		padding: 0 5%;
	}
}

@media (min-width: 992px) {
	.splide__inner {
		padding: 0 10%;
	}
}

@media (min-width: 1200px) {
	.splide__flow {
		width: var(--container-width);
		margin-right: auto;
		margin-left: auto;
	}

	.splide__flow .splide__inner {
		padding: 0;
	}

	#splide__flow .splide__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--vw24);
	}
}

/*--------------------------------------------------------------
# #contact
--------------------------------------------------------------*/
h2.title__contact {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: var(--vw16);
	font-weight: 700;
	color: #fff;
	line-height: 1.75em;
	text-align: center;
	margin: 0 auto var(--vw16);
	width: fit-content;
	filter: var(--shadow-outer);
}

h2.title__contact > span {
	background: var(--color-green-dark);
	padding: var(--vw16);
	border-radius: var(--vw8);
}

h2.title__contact::after {
	content: '';
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--color-green-dark);
	width: var(--vw20);
	height: 100%;
	margin: auto;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

h3.title__contact__item {
	font-size: var(--vw20);
	font-weight: 500;
	text-align: center;
}

#contact .card__primary {
	background: #3a7ec133;
	padding: var(--vw16);
}

#contact .contact__card__inner {
	display: grid;
	background: #fff;
	padding: var(--vw24) 0;
	border-radius: var(--vw8);
}

.contact__card__item {
	padding: 0 var(--vw24);
}

.contact__card__item:first-child {
	border-right: 1px solid var(--border-color);
}

a.phone__number {
	display: block;
	font-size: var(--vw40);
	font-weight: 900;
	color: var(--color-pink-light);
	width: fit-content;
	margin: auto;
	line-height: 1.5em;
}

.phone__text__sub {
	font-size: var(--vw14);
	font-weight: 500;
	text-align: center;
	opacity: .5;
}

.contact__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1 / 1;
	font-size: var(--vw40);
	background: var(--border-color);
	width: var(--vw80);
	height: 100%;
	margin: var(--vw16) auto var(--vw24);
	border-radius: 50%;
}

@media (max-width: 767px) {
	#contact {
		padding-bottom: 0;
	}

	#contact .container:has(>.card__primary) {
		width: 100%;
	}

	#contact .card__primary {
		padding-bottom: var(--vw48);
		border-radius: 0;
	}

	#contact .contact__card__inner {
		padding: 0;
	}

	.contact__card__item {
		padding: var(--vw24);
	}

	.contact__card__item:first-child {
		border-right: none;
		border-bottom: 1px solid var(--border-color);
	}
}

@media (min-width: 768px) {
	#contact .contact__card__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	#contact .card__primary {
		padding: var(--vw24);
	}
}

@media (min-width: 992px) {
	#contact .card__primary {
		padding: var(--vw40);
	}
}

/*--------------------------------------------------------------
# お客様の声
--------------------------------------------------------------*/
.splide__cases {
	padding-top: 4px;
	overflow: hidden;
}

a.post__link .entry__client {
	font-size: var(--vw14);
	font-weight: 700;
	margin-bottom: var(--vw16);
	line-height: 1.75em;
	opacity: .5;
}

a.post__link .entry__title {
	font-size: var(--vw16);
	font-weight: 700;
	line-height: 2em;
}

a.post__link .entry__footer::before {
	content: '\f054';
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--fontawesome);
	font-size: var(--vw24);
	font-weight: 700;
	color: #fff;
	width: 2em;
	height: 2em;
	line-height: 1em;
	margin-left: auto;
	border-radius: 50%;
}

.splide__slide:nth-child(3n+1) a.post__link .entry__footer::before {
	background: var(--color-pink-light);
}

.splide__slide:nth-child(3n+2) a.post__link .entry__footer::before {
	background: var(--color-yellow-light);
}

.splide__slide:nth-child(3n+3) a.post__link .entry__footer::before {
	background: var(--color-blue-dark);
}

.home .card__primary.has_article {
	transition: transform .25s;
}

.home .card__primary.has_article:hover {
	transform: translateY(-4px);
}

a.cases__interview.card__primary {
	display: block;
	margin-bottom: var(--vw48);
	padding: 0;
	transition: transform .25s;
	overflow: hidden;
}

a.cases__interview.card__primary:hover {
	transform: translateY(-4px);
}

.cases__interview__text {
	display: flex;
	flex-direction: column;
	font-size: var(--vw16);
	font-weight: 700;
	padding: var(--vw32);
	padding: var(--vw24);
	line-height: 2em;
}

.cases__interview__text > *:first-child {
	color: var(--color-green-dark);
}

.cases__interview__text::after {
	content: '\f054';
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--fontawesome);
	font-size: var(--vw24);
	font-weight: 700;
	background: var(--color-green-dark);
	color: #fff;
	width: 2em;
	height: 2em;
	line-height: 1em;
	margin-top: auto;
	margin-left: auto;
	border-radius: 50%;
}

.cases__interview .card__inner {
	display: grid;
}

@media (min-width: 768px) {
	a.cases__interview.card__primary {
		margin-bottom: var(--vw72);
	}

	.cases__interview .card__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	a.cases__interview.card__primary {
		width: 75%;
		margin-right: auto;
		margin-left: auto;
	}

	.cases__interview__text {
		padding: var(--vw32);
	}
}

/*--------------------------------------------------------------
# スタジオ
--------------------------------------------------------------*/
#studio .card__primary .text__primary {
	margin-bottom: var(--vw24);
}