@charset "utf-8";

:root {
	--color-main: #fff;
	--color-assort: #f3f8fb;
	--color-accent: #5fb1bf;
	--color-white: #fff;
	--color-gray-light: #fafafa;
	--color-gray: #ededed;
	--color-gray-dark: #ddd;
	--color-blue-light: #f3f8fb;
	--color-black: #646464;
	--color-pink: #E1A0B0;
	--color-pink-light: #ffeef3;
	--font-serif: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HGS明朝E";
	--font-en: "HelveticaNeue";
}

.quattro-wrapper * {
	box-sizing: border-box;
	text-align: justify;
}

@media (max-width: 767px) {
	#main .comBox {
		margin: 0;
	}
}

.quattro-wrapper {
	.quattro-section:last-child {
		margin-bottom: 0;
	}
}

/*======================================
-MV
======================================*/

.quattro-mv {
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: min(140vw, 500px);
	margin: auto;
	background: url("../img/quattro/background01_pc.webp") no-repeat center right / cover var(--color-gray);
	margin-bottom: min(10.66vw, 40px);

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		z-index: 1;
	}

	&:before {
		border-width: min(90vw, 500px) min(90vw, 500px) 0px 0px;
		border-color: var(--color-main) transparent transparent transparent;
		opacity: .5;
		top: 0;
	}

	&:after {
		border-width: min(90vw, 500px) 0px 0px min(90vw, 500px);
		border-color: transparent transparent transparent var(--color-main);
		opacity: .4;
		bottom: 0;
	}

	>.inner {
		position: absolute;
		top: 55%;
		left: 0;
		transform: translateY(-50%);
		z-index: 2;
		padding: 0 min(4.26vw, 56px);
		max-width: min(86vw, 580px);
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.quattro-mv {
		background: url("../img/quattro/background01.webp") no-repeat center center / cover var(--color-gray);
	}
}

.quattro-headline {
	margin-bottom: min(5.33vw, 32px);

	.en {
		font-size: min(14.66vw, 9rem);
		font-weight: 300;
		line-height: 1.2;
		font-family: var(--font-en);
	}

	.headline {
		font-size: min(3.73vw, 1.6rem);
		font-family: var(--font-serif);
		font-weight: 400;
		background-color: var(--color-white);
		padding: min(1.06vw, 4px);
		letter-spacing: 0.05rem;
		text-align: center;
	}
}

.quattro-catch {
	p {
		line-height: 2;
		font-family: var(--font-serif);
		letter-spacing: 0.1rem;
		font-size: min(3.73vw, 1.8rem);
	}

	.list {
		margin-top: min(21.3vw, 80px);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: min(1.06vw, 4px);

		li {
			background-color: var(--color-accent);
			color: var(--color-white);
			border-radius: min(10.66vw, 40px);
			font-size: min(3.46vw, 1.4rem);
			padding: min(2.13vw, 12px) min(4.26vw, 8px);
			box-shadow: 0 0 min(2.13vw, 8px) 0px rgba(0, 0, 0, .05);
			text-align: center;
			font-weight: 600;
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-catch {
		.list {
			grid-template-columns: repeat(1, 1fr);
			max-width: min(53vw, 400px);
			gap: min(2.13vw, 8px);
		}
	}
}


/*================================
-セクション外枠
=================================*/
.quattro-section {
	margin-bottom: min(21.3vw, 120px);
	padding: 0 min(4.26vw, 16px);
	overflow: hidden;

	>.inner {
		p {
			margin-bottom: min(6.4vw, 24px);
			line-height: 2.55;
			letter-spacing: -0.5px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-section {
		>.inner {
			p {
				line-height: 1.75;
				letter-spacing: 0;
			}
		}
	}
}

/*================================
-目次
=================================*/

.quattro-menu-title,
.quattro-table-title {
	padding: min(2.13vw, 8px) min(1.06vw, 4px);
	text-align: center;
	font-size: min(4.26vw, 1.6rem);
	line-height: 1.4;
	color: var(--color-white);
	font-family: "HelveticaNeue";
	letter-spacing: 1px;
	background-color: var(--color-accent);
}

/* 全文を開く */

.quattro-menu {
	padding: min(6.4vw, 24px) min(6.4vw, 24px) min(21.3vw, 80px);
	border: 1px solid var(--color-assort);
	position: relative;

	input {
		visibility: hidden;
		display: none;
	}

	label {
		position: absolute;
		left: 50%;
		bottom: min(5.33vw, 20px);
		display: block;
		font-size: min(3.73vw, 1.4rem);
		transform: translateX(-50%);
		padding: 0;
		z-index: 10;
		cursor: pointer;
		text-transform: uppercase;

		&:before {
			content: "すべて開く +";
		}
	}
}

.quattro-menu input:checked+label:before {
	content: "閉じる  -"
}

.quattro-menu input[type=checkbox]:checked~.quattro-menu-item {
	max-height: 500px;
}

.quattro-menu input[type=checkbox]:checked~.quattro-menu-item:before {
	opacity: 0
}

.quattro-menu-item {
	max-height: min(25.6vw, 96px);
	overflow: hidden;
	position: relative;
	transition: .5s;
	font-size: min(3.46vw, 1.4rem);

	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 50%;
		bottom: 0;
		background-image: linear-gradient(rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
		transition: .5s;
		z-index: 2;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 min(4.26vw, 16px);

		li {
			border-bottom: .5px solid #e5e5e5;

			a {
				position: relative;
				padding-left: min(4.26vw, 16px);
				text-decoration: none;
				height: min(14.93vw, 56px);
				display: flex;
				align-items: center;

				&::before {
					content: "〉";
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					color: var(--color-accent);
				}
			}
		}
	}
}



@media screen and (min-width: 768px) {
	.quattro-menu-item .list li a:hover {
		text-decoration: underline;
	}
}

@media screen and (max-width: 767px) {
	.quattro-menu-item .list {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;

		li a:active {
			text-decoration: underline;
		}

	}
}

/*================================
-見出し
=================================*/

.quattro-headline02 {
	font-size: min(4.8vw, 2.2rem);
	line-height: 1.6;
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: 0.05rem;
	padding: min(2.13vw, 8px) 0;
	margin-bottom: min(8.53vw, 32px);
	min-height: min(13.33vw, 50px);
	border-bottom: 2px solid var(--color-accent);
	position: relative;
	overflow: hidden;
	z-index: 0;

	&::before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: 0;
		border-style: solid;
		z-index: -1;
	}

	&::before {
		bottom: 0;
		border-width: min(13.33vw, 50px) min(13.33vw, 50px) 0px 0px;
		border-color: transparent var(--color-accent) transparent transparent;
		opacity: .1;
	}

	&:after {
		bottom: 0;
		border-width: 0px min(13.33vw, 50px) min(13.33vw, 50px) 0px;
		border-color: transparent var(--color-accent) transparent transparent;
		opacity: .08;
	}

	b {
		font-size: min(8vw, 4.8rem);
		display: inline-block;
		margin: 0 min(2.13vw, 4px);
		color: var(--color-accent);
		line-height: 1.2;
		font-weight: 400;
	}

	u {
		position: relative;
		text-decoration: none;
		background: linear-gradient(transparent 70%, var(--color-pink-light) 70%);
	}
}

.quattro-headline02-b {
	position: relative;
	margin: 0 auto min(4.26vw, 16px);
	text-align: center;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		width: 100%;
		height: 1px;
		background-color: var(--color-black);
	}

	span {
		position: relative;
		font-size: min(4.8vw, 2.1rem);
		line-height: 1.4;
		font-family: var(--font-serif);
		font-weight: 600;
		letter-spacing: 0.05rem;
		padding: min(2.13vw, 8px) min(5.33vw, 20px);
		display: inline-block;
		background-color: var(--color-white);
		z-index: 2;
	}
}

.quattro-headline02-c {
	position: relative;
	text-align: center;
	letter-spacing: 0.01rem;
	padding: min(3.2vw, 12px) min(5.33vw, 20px);
	background-color: var(--color-black);
	color: var(--color-white);
	min-height: min(17.06vw, 64px);
	display: flex;
	align-items: center;
	justify-content: center;

	&::before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		opacity: .08;
	}

	&::before {
		left: 0;
		bottom: 0;
		border-width: min(17.06vw, 64px) min(17.06vw, 64px) 0px 0px;
		border-color: var(--color-white) transparent transparent transparent;
	}

	&:after {
		right: 0;
		top: 0;
		border-width: min(17.06vw, 64px) min(17.06vw, 64px) 0px 0px;
		border-color: transparent var(--color-white);
	}

	span {
		position: relative;
		display: inline-block;
		font-size: min(4.8vw, 2.1rem);
		line-height: 1.4;
		font-family: var(--font-serif);
		font-weight: 400;
		z-index: 2;
	}
}

.quattro-headline03 {
	font-size: min(4.53vw, 2rem);
	margin-bottom: min(4.26vw, 16px);
	color: var(--color-accent);
	line-height: 1.6;
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: 0.05rem;
}

p+.quattro-headline03 {
	margin-top: min(21.3vw, 80px);
}

.quattro-headline03-b {
	font-size: min(4.53vw, 2rem);
	margin-bottom: min(4.26vw, 16px);
	color: var(--color-white);
	line-height: 1.6;
	font-family: var(--font-serif);
	font-weight: 400;
	padding: min(3.2vw, 12px) min(5.33vw, 20px);
	letter-spacing: 0.01rem;
	text-align: center;
	background-color: var(--color-accent);
	position: relative;

	&::before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		opacity: .08;
	}

	&::before {
		left: 0;
		bottom: 0;
		border-width: min(21.3vw, 88px) min(21.3vw, 88px) 0px 0px;
		border-color: var(--color-white) transparent transparent transparent;
	}

	&:after {
		right: 0;
		top: 0;
		border-width: min(21.3vw, 88px) min(21.3vw, 88px) 0px 0px;
		border-color: transparent var(--color-white);
	}
}

/*================================
-枠線付きボックス
=================================*/

.quattro-border-box {
	border: .5px solid var(--color-accent);
	padding: min(8.53vw, 32px) min(5.33vw, 40px);
	position: relative;
	margin: min(10.66vw, 40px) auto;

	p {
		line-height: 1.8 !important;
	}
}

.quattro-border-box+.quattro-border-box {
	margin-top: max(-6.4vw, -24px);
}


/*================================
-テーブル
=================================*/

.quattro-table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: min(10.66vw, 40px);
	border: 1px solid var(--color-gray);

	th,
	td {
		padding: min(4.26vw, 16px) min(4.26vw, 18px);
		font-size: min(4vw, 1.5rem);
		text-align: left;
		font-weight: normal;
		line-height: 1.4;
		vertical-align: middle;
	}

	th {
		background-color: var(--color-accent);
		color: var(--color-white);

		span {
			font-size: min(3.2vw, 1.3rem);
		}
	}
}

@media screen and (min-width: 768px) {
	.quattro-table {
		th {
			width: 32%;
			border: 1px solid var(--color-gray);


			span {
				display: block;
			}
		}

		td {
			border: 1px solid var(--color-gray);
		}

		th:last-child {

			th,
			td {
				border-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-table {

		th,
		td {
			padding: min(5.33vw, 20px) min(4.26vw, 18px);
			display: block;
		}

		th {
			border-bottom: 0;
		}
	}
}

/*================================
-料金表
=================================*/

.quattro-table-price {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: min(10.66vw, 40px);
	border: 1px solid var(--color-gray);

	th,
	td {
		padding: min(5.33vw, 20px) min(4.26vw, 18px);
		font-size: min(4vw, 1.5rem);
		text-align: left;
		font-weight: normal;
		line-height: 1.4;
		vertical-align: middle;
	}

	th {
		background-color: var(--color-blue-light);
	}
}

@media screen and (min-width: 768px) {
	.quattro-table-price {
		th {
			width: 32%;
			border-bottom: 1px solid var(--color-gray);
		}

		td {
			text-align: right;
			border-bottom: 1px solid var(--color-gray);
		}

		th:last-child {

			th,
			td {
				border-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-table-price {

		th,
		td {
			display: block;
		}

		th {
			border-bottom: 0;
		}

		th:last-child {

			td {
				border-bottom: 0;
			}
		}
	}
}


/*================================
-FAQ
=================================*/

.quattro-faq {
	font-size: min(3.73vw, 1.6rem);

	dt {
		margin: min(4.26vw, 16px) min(4.26vw, 16px) min(4.26vw, 16px) min(2.66vw, 16px);
		position: relative;
		padding-left: min(8vw, 50px);
		line-height: min(8vw, 30px);
		text-indent: -0.7em;

		&:before {
			position: absolute;
			left: 0;
			top: 0;
			font-family: YuGo-Bold;
			font-size: min(7.19vw, 27px);
			content: 'Q';
		}
	}

	dd {
		position: relative;
		line-height: min(8.53vw, 36px);
		padding: 0 0 min(4.26vw, 16px) min(8vw, 50px);
		margin: 0 min(4.26vw, 16px) 0 min(2.66vw, 16px);
		border-bottom: 1px solid #e9e9e9;
		text-indent: -0.7em;

		&::before {
			position: absolute;
			left: 0;
			top: 0;
			font-family: YuGo-Bold;
			font-size: min(7.19vw, 27px);
			color: #60B1BF;
			content: 'A';
			margin-right: min(6.13vw, 23px);
		}
	}
}


/*================================
-このような方におすすめ
=================================*/

.quattro-point {
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 min(4.26vw, 16px);

		li {
			border-bottom: .5px dashed var(--color-black);
			padding-left: min(10.66vw, 32px);
			min-height: min(12.8vw, 56px);
			font-size: min(3.73vw, 1.5rem);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: min(2.13vw, 4px);
				transform: translateY(-50%);
				width: min(4.26vw, 16px);
				height: min(4.26vw, 16px);
				background: url("../img/quattro/icon-balloon.svg") no-repeat center center / 100%;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-point {
		.list {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}


/*================================
-特徴セクション
=================================*/

.quattro-features {
	background-color: var(--color-blue-light);
	padding: min(8.53vw, 32px) min(4.26vw, 24px);
	position: relative;
	border: 1px solid var(--color-gray-light);

	&::before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		top: 0;
		border-style: solid;
		opacity: .08;
	}

	&::before {
		left: 0;
		border-width: min(70vw, 420px) min(70vw, 420px) 0px 0px;
		border-color: var(--color-accent) transparent transparent transparent;
	}

	&:after {
		right: 0;
		border-width: 0 min(70vw, 420px) min(70vw, 420px) 0;
		border-color: transparent var(--color-accent) transparent transparent;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: min(2.13vw, 16px) min(2.13vw, 8px);
		position: relative;
		z-index: 2;

		li {
			background-color: var(--color-white);
			overflow: hidden;
		}

		.contents {
			padding: min(6.4vw, 32px) min(4.26vw, 16px);
		}

		img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 16 / 9;
			background-color: var(--color-gray);
		}

		.headline {
			font-size: min(4.26vw, 1.8rem);
			text-align: center;
			margin-bottom: min(10.66vw, 40px);
			line-height: 1.6;
			font-family: var(--font-serif);
			font-weight: 600;
			letter-spacing: 0.05rem;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: max(-5.33vw, -20px);
				width: min(21.3vw, 200px);
				height: 1px;
				background-color: var(--color-accent);
			}

			span {
				font-size: min(3.46vw, 1.4rem);
			}
		}

		p {
			font-size: min(3.73vw, 1.4rem);
			margin-bottom: min(4.26vw, 24px);
			line-height: 1.8;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-features {
		width: calc(100% + 4.26vw * 2);
		margin-left: -4.26vw;

		.list {
			grid-template-columns: repeat(1, 1fr);
			gap: min(4.26vw, 16px);
		}
	}
}


/*================================
-テストでわかること
=================================*/

.quattro-understand {
	margin: 0 auto min(10.66vw, 40px);
	max-width: 600px;

	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: min(2.13vw, 24px);

		li {
			aspect-ratio: 1 / 1;
			border: 1px solid var(--color-accent);
			background-color: var(--color-white);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: var(--color-accent);
			font-family: var(--font-serif);
			text-align: center;
			font-size: min(3.73vw, 1.8rem);
			line-height: 1.4;

			span {
				font-size: min(3.2vw, 1.4rem);
			}
		}
	}
}

.quattro-understand-inspection {
	background-color: var(--color-blue-light);
	padding: min(8.53vw, 32px) min(4.26vw, 24px);
	position: relative;

	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: min(2.13vw, 8px);
		background-color: var(--color-white);
		padding: min(4.26vw, 16px);
		margin: 0 auto min(6.4vw, 24px);

		li {
			padding: min(5.33vw, 20px) 0 min(5.33vw, 20px) min(12.8vw, 48px);
			position: relative;
			border-bottom: .5px dashed var(--color-black);
			font-size: min(4vw, 1.5rem);
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&::before {
				content: "";
				position: absolute;
				top: calc(50% - 2px);
				left: min(4.26vw, 16px);
				width: min(3.2vw, 12px);
				height: min(1.6vw, 6px);
				border-left: 2px solid var(--color-accent);
				border-bottom: 2px solid var(--color-accent);
				transform: translateY(-50%) rotate(-45deg);
				z-index: 2;
			}

			&:last-child {
				border-bottom: 0;
			}

			span {
				font-size: min(3.46vw, 1.3rem);
			}
		}
	}

	.style-att-text {
		margin-top: 0;
	}

	.quattro-headline03-b {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 767px) {
	.quattro-understand-inspection {
		width: calc(100% + 4.26vw * 2);
		margin-left: -4.26vw;

		.list {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}


/*================================
-NIPTとクアトロテストの違い
=================================*/

.quattro-scroll-box {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.quattro-scroll-box {
		width: calc(100% + 4.26vw * 2);
		margin-left: -4.26vw;
		padding: 0 4.26vw;
		overflow-x: scroll;
	}
}

.quattro-scroll-sp {
	display: none;
	background-color: var(--color-blue-light);
	padding: min(2.13vw, 8px);

	.small-text {
		text-align: center;
		font-size: min(3.46vw, 1.4rem);
	}
}

@media screen and (max-width: 767px) {
	.quattro-scroll-sp {
		display: block;
	}
}

.quattro-table-comparison {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--color-gray);
	margin-top: min(17.06vw, 64px);

	th,
	td {
		padding: min(4.26vw, 20px) min(2.13vw, 18px);
		font-size: min(3.46vw, 1.4rem);
		text-align: left;
		font-weight: normal;
		line-height: 1.4;
		vertical-align: middle;
		border: 1px solid var(--color-gray);
	}

	th {
		background-color: var(--color-blue-light);
		width: 20%;
		height: min(21.3vw, 80px);
		font-family: var(--font-serif);
	}

	td {
		span {
			font-size: min(3.2vw, 1.3rem);
		}
	}

	tr {
		td:nth-of-type(1) {
			background-color: var(--color-gray-light);
		}
	}

	.th-top,
	.th-top02 {
		font-family: var(--font-serif);
		text-align: center;
		width: initial;
		color: var(--color-white);

		span {
			font-size: min(3.2vw, 1.3rem);
			text-align: center;
			display: block;
		}
	}

	.th-top {
		background-color: var(--color-black);
	}

	.th-top02 {
		position: relative;
		background-color: var(--color-accent);
		font-size: min(4.26vw, 1.8rem);
		padding-top: 0;

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: min(5.33vw, 20px);
			top: max(-5.33vw, -20px);
			left: 0;
			background-color: var(--color-accent);
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-table-comparison {
		width: 135%;
	}
}

.quattro-image {
	background-color: var(--color-black);
	width: 100%;
	display: block;
	margin: min(10.66vw, 40px) auto min(21.3vw, 120px);
	padding: min(5.33vw, 40px);

	img {
		width: 100%;
		height: auto;
		display: block;
		background-color: var(--color-gray-light);
	}

	figcaption {
		display: block;
		margin-top: min(5.33vw, 20px);
		color: var(--color-white);
		font-size: min(3.46vw, 1.4rem);
		text-align: center;
	}
}

/*================================
-治療の流れ
=================================*/

.quattro-flow {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0;
	counter-reset: count;

	li {
		padding: min(5.33vw, 20px) 0 min(5.33vw, 20px) min(12.8vw, 48px);
		position: relative;
		border-bottom: .5px dashed var(--color-black);
		font-size: min(4vw, 1.5rem);
		display: flex;
		align-items: center;
		justify-content: flex-start;

		&:last-child {
			border-bottom: 0;
		}

		&::before,
		&::after {
			position: absolute;
			font-weight: bold;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: min(8.53vw, 32px);
			height: min(8.53vw, 32px);
			line-height: min(8.53vw, 32px);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&::before {
			counter-increment: count;
			content: counter(count)"";
			font-family: var(--font-en);
			color: var(--color-white);
			z-index: 2;
		}

		&::after {
			content: "";
			border-radius: min(5.33vw, 20px);
			background-color: var(--color-accent);
			z-index: 1;
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-flow {
		li {
			min-height: min(21.3vw, 80px);
		}
	}
}

/*================================
-挨拶文
=================================*/

.quattro-border-box-greet {
	margin-top: min(21.3vw, 80px);
	border: 1px solid var(--color-gray);
	padding: min(8.53vw, 32px) min(5.33vw, 40px);
	position: relative;

	&::before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		opacity: .05;
	}

	&::before {
		left: 0;
		top: 0;
		border-width: min(14.93vw, 120px) min(14.93vw, 120px) 0px 0px;
		border-color: var(--color-accent) transparent transparent transparent;
	}

	&:after {
		right: 0;
		bottom: 0;
		border-width: min(14.93vw, 120px) min(14.93vw, 120px) 0px 0px;
		border-color: transparent var(--color-accent);
	}
}

.quattro-border-box-greet-item {
	position: relative;
	z-index: 2;

	.image {
		display: grid;
		grid-template-columns: min(50vw, 380px) 1fr;
		gap: min(10.66vw, 40px);
		margin: min(10.66vw, 40px) auto;
		align-items: center;
		position: relative;
		background-color: var(--color-gray-light);
		overflow: hidden;

		&::before,
		&:after {
			content: "";
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			right: 0;
			opacity: .05;
		}

		&::before {
			bottom: 0;
			border-width: 0px min(74vw, 400px) min(74vw, 400px) 0px;
			border-color: transparent var(--color-black) transparent transparent;
			opacity: .08;
		}

		&:after {
			top: 0;
			border-width: min(74vw, 400px) min(74vw, 400px) 0px 0px;
			border-color: transparent var(--color-black);
			z-index: 1;
		}

		img {
			width: 100%;
			height: auto;
			margin: 0 auto;
			display: block;
			position: relative;
			z-index: 2;
		}


		figcaption {
			position: absolute;
			padding: min(2.13vw, 16px) min(5.33vw, 24px);
			border: .5px solid var(--color-gray);
			background-color: var(--color-white);
			margin: auto;
			font-size: min(3.2vw, 1.2rem);
			text-align: center;
			z-index: 2;

			>span {
				display: block;
				text-align: center;
				font-size: min(3.73vw, 1.9rem);
				font-family: var(--font-serif);
			}
		}
	}

	.contents {
		p {
			font-size: min(3.73vw, 1.5rem);
			line-height: 2;
			font-family: var(--font-serif);

		}
	}
}

@media screen and (min-width: 768px) {
	.quattro-border-box-greet-item {

		.image {
			figcaption {
				top: 50%;
				right: min(4.16vw, 40px);
				transform: translateY(-50%);
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.quattro-border-box-greet-item {

		.image {
			grid-template-columns: repeat(1, 1fr);

			figcaption {
				left: 50%;
				bottom: min(2.13vw, 40px);
				transform: translateX(-50%);
				width: 80%;
			}
		}
	}
}

/*================================
-監修者情報
=================================*/

.quattro-career {
	background-color: var(--color-blue-light);
	padding: min(8.53vw, 32px) min(5.33vw, 40px);
	position: relative;

	.title01,
	.title02 {
		font-size: min(4vw, 1.6rem);
		margin-bottom: min(4.26vw, 16px) !important;
		font-family: var(--font-serif);
		font-weight: 600;
		letter-spacing: 0.05rem;
	}

	.title01 {
		color: var(--color-white);
		background-color: var(--color-black);
		padding: min(2.13vw, 8px) min(4.26vw, 16px);
		font-weight: 400;
	}

	.title02 {
		border-bottom: 1px solid var(--color-black);
		padding-bottom: min(2.13vw, 8px);
	}

	.image {
		display: grid;
		grid-template-columns: min(25vw, 120px) 1fr;
		gap: min(5.33vw, 40px);
		margin: min(10.66vw, 40px) auto;
		align-items: center;
		position: relative;

		img {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 50%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
			background-color: var(--color-gray-light);
			border: 1px solid var(--color-gray-dark);
		}

		figcaption {
			font-family: var(--font-serif);
			text-align: left;
		}
	}
}

.quattro-career-contents-2fr {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(4.26vw, 16px);
}

@media screen and (max-width: 767px) {
	.quattro-career-contents-2fr {
		grid-template-columns: repeat(1, 1fr);
	}
}

.quattro-career-contents-list {

	.list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: min(2.13vw, 8px);
		margin: 0 auto min(10.66vw, 40px);

		li {
			padding-left: min(5.33vw, 20px);
			position: relative;
			font-size: min(3.73vw, 1.4rem);
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&::before {
				content: "・";
				position: absolute;
				left: 0;
				top: 0;
			}

			&:last-child {
				border-bottom: 0;
			}

			span {
				font-size: min(3.46vw, 1.3rem);
			}
		}
	}
}

.quattro-career-contents-table {

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

		th,
		td {
			text-align: left;
			font-weight: normal;
			line-height: 1.4;
			vertical-align: middle;
			padding: min(2.13vw, 4px) 0;
			font-size: min(3.73vw, 1.4rem);
		}

		th {
			background-color: var(--color-blue-light);
			font-family: var(--font-serif);
			border-right: 1px solid var(--color-black);
		}

		td {
			padding-left: min(5.33vw, 20px);
		}
	}
}

@media screen and (min-width: 768px) {
	.quattro-career-contents-table {
		th {
			width: 15%;
		}
	}
}

@media screen and (max-width: 767px) {
		.quattro-career-contents-table {
		th {
			width: 27%;
		}
	}
}