@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	導入事例
--------------------------------------------------------------------------------------- */

main::after {
	background: url(../img/case-study/index/main_bg.png) no-repeat;
	background-size: cover;
	content: '';
	display: block;
	height: 105.333vw;
	left: 0;
	position: absolute;
	top: 50.333vw;
	width: 100%;
	z-index: -1;
}

.lead {
	margin-top: 82px;
	position: relative;
	z-index: 1;
}

.lead dt {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 3rem;
	letter-spacing: 1px;
	line-height: 1.7;
}

.lead dd {
	font-size: 2rem;
	margin-top: 16px;
}

.logo-area { margin-top: 42px; }

.case-study-wrap {
	margin-top: 60px;
	overflow-x: clip;
	position: relative;
}

.case-study-column:nth-of-type(n+2) { margin-top: 60px; }

.case-study-list { margin-top: 40px; }

.case-study-list .card-item { float: left; }
.case-study-list .card-item:nth-of-type(even) { float: right; }

.case-study-list .card-item:nth-of-type(n+3) { margin-top: 60px; }

@media (max-width: 768px) {

	main::after {
		background-image: url(../img/case-study/index/main_bg_sp.png);
		height: 434.133vw;
		top: 140.333vw;
	}

	.lead { margin-top: 10.667vw; }

	.lead dt { font-size: 5.333vw; }

	.lead dd {
		font-size: 2.963vw;
		margin-top: 6.4vw;
	}

	.logo-area {
		background-color: rgba(255, 255, 255, .6);
		margin-top: 8.267vw;
		padding: 3.2vw 0;
	}

	.case-study-wrap { margin: 13.333vw 5.333vw 0; }

	.case-study-list { margin-top: 6.4vw; }

	.case-study-list .card-item {
		float: none;
		min-height: 0 !important;
		width: 100%;
	}

	.case-study-list .card-item:nth-of-type(even) { float: none; }

	.case-study-list .card-item:nth-of-type(n+2),
	.case-study-list .card-item:nth-of-type(n+3) { margin-top: 5.333vw; }

	.case-study-list .card-item .image { height: 56vw; }
}

/* --------------------------------------------------------------------------------------
	詳細
--------------------------------------------------------------------------------------- */

main.sub::after { display: none; }

.detail-wrap { margin-top: 90px; }

.detail-head {
	min-height: 398px;
	padding-right: 570px;
	padding-top: 47px;
	position: relative;
	text-align: center;
}

.detail-head > p {
	color: var(--color-deep-blue);
	font-family: var(--font-UD-ShinGo-DeBold);
	margin-top: 16px;
}

.detail-head h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.8rem;
}

.detail-head .image {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.detail-head h3 {
	border-top: 1px solid var(--border-color);
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	line-height: 2;
	margin-top: 28px;
	padding-top: 28px;
}

.detail-head h3 span,
.detail-content .column .before-after dd .result p span,
.detail-content .column .before-after dd ol li span { color: var(--color-deep-blue); }

.company-intro {
	background-color: var(--color-gray-white);
	border-radius: 16px;
	margin-top: 32px;
	min-height: 300px;
	padding: 30px 366px 30px 30px;
	position: relative;
}

.company-intro02 {
	background-color: var(--color-gray-white);
	border-radius: 16px;
	margin-top: 32px;
	min-height: 240px;
	padding: 30px 30px 30px 30px;
	position: relative;
}

.company-intro h2,
.company-intro02 h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
}

.company-intro p,
.company-intro02 p {
	font-size: 1.419999rem;
	line-height: 1.6;
	margin-top: 12px;
}

.company-intro .image {
	background-color: #fff;
	border: 1px solid #e6e6e6;
	height: 240px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 320px;
}

.company-intro .image img {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.detail-content {
	counter-reset: number 0;
	margin-top: 76px;
}

.detail-content .column:nth-of-type(n+2) { margin-top: 38px; }

.detail-content .column h3 {
	border-bottom: 1px solid var(--border-color);
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	padding-bottom: 24px;
	padding-left: 42px;
	position: relative;
}

.detail-content .column h3 span,
.detail-content .column span  { color: var(--color-deep-blue); }

.detail-content .column h3::before {
	background-color: var(--color-deep-blue);
	border-radius: 100vw;
	color: #fff;
	content: counter(number) ' ';
	counter-increment: number 1;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	height: 32px;
	left: 0;
	line-height: 32px;
	position: absolute;
	text-align: center;
	top: 2px;
	width: 32px;
}

.detail-content .column > p,
.detail-content .column .flex,
.detail-content .column .before-after { margin-top: 24px; }

.detail-content .column .flex p {
	float: left;
	max-width: 530px;
	width: 100%;
}

.detail-content .column .flex .topic {
	float: left;
	max-width: 530px;
	width: 100%;
}

.detail-content .column .flex .image { float: right; }

.detail-content .column .diagram {
	margin-top: 24px;
	text-align: center;
}

.detail-content .column p { line-height: 1.6; }

.detail-content .column .topic {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	line-height: 1.6;
	list-style-type: decimal;
}

.detail-content .column .before-after:nth-of-type(n+2) { margin-top: 40px; }

.detail-content .column .before-after dl {
	float: left;
	max-width: 48.188%;
	position: relative;
	width: 100%;
}

.detail-content .column .before-after dl:nth-of-type(even) { float: right; }

.detail-content .column .before-after dt {
	background-color: var(--border-color);
	color: #fff;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	padding: 8px 0;
	text-align: center;
}

.detail-content .column .before-after dl:nth-of-type(even) dt { background-color: var(--color-deep-blue); }

.detail-content .column .before-after dd {
	border: 1px solid var(--border-color-thin);
	border-radius: 16px;
	margin-top: 24px;
	min-height: 434px;
	position: relative;
}

.detail-content .column .before-after dl:first-of-type dd::after {
	background-color: var(--color-deep-blue);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	content: '';
	display: block;
	height: 46px;
	position: absolute;
	right: -42px;
	top: calc(50% - 23px);
	width: 42px;
}

.detail-content .column .before-after dl:nth-of-type(even) dd {
	border-color: var(--color-deep-blue);
	border-width: 2px;
}

.detail-content .column .before-after dd ol,
.detail-content .column .before-after dd .result {
	left: 50%;
	min-width: 78%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.detail-content .column .before-after dd ol li,
.detail-content .column .before-after dd .result p {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	list-style-type: decimal;
}

.detail-content .column .before-after dd ol li:nth-of-type(n+2) { margin-top: 12px; }

.detail-content .column .before-after dd .result {
	min-width: 91.66%;
	text-align: center;
}

.detail-content .column .before-after dd .result p {
	margin-bottom: 40px;
	text-align: center;
}

.detail-point { margin-top: 56px; }

.detail-point dt {
	background-color: var(--color-deep-blue);
	border-radius: 16px 16px 0 0;
	color: #fff;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	padding: 10px 0;
	text-align: center;
}

.detail-point dt img { vertical-align: middle; }

.detail-point dt span {
	display: inline-block;
	margin-top: 5px;
	vertical-align: middle;
}

.detail-point dt span:first-of-type { margin-left: 6px; }

.detail-point dd {
	background-color: #fff;
	border-bottom: 2px solid var(--border-color);
	border-left: 2px solid var(--border-color);
	border-radius: 0 0 16px 16px;
	border-right: 2px solid var(--border-color);
	padding: 24px 0;
	text-align: center;
}

.detail-point dd ol {
	display: inline-block;
	margin: auto;
	text-align: left;
}

.detail-point dd li {
	background: url(../img/common/icon_check.svg) no-repeat left 7px;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	padding-left: 34px;
}

.detail-point dd li:nth-of-type(n+2) { margin-top: 10px; }

@media (max-width: 768px) {

	.detail-wrap { margin-top: 12vw; }

	.detail-head {
		margin: 0 5.333vw;
		padding-right: 0;
		padding-top: 0;
	}

	.detail-head > p {
		font-size: 3.467vw;
		margin-top: 2.667vw;
	}

	.detail-head h2 { font-size: 6.3vw; }

	.detail-head .image {
		margin-top: 6.4vw;
		position: relative;
		top: auto;
		transform: none;
	}

	.detail-head h3 {
		border-top: none;
		font-size: 5.233vw;
		margin-top: 7.2vw;
		padding-top: 0;
	}

	.company-intro {
		margin: 8vw 5.333vw 0;
		min-height: inherit;
		padding: 6.133vw 3.2vw;
	}

	.company-intro h2 { font-size: 4.8vw; }

	.company-intro p {
		font-size: 3.267vw;
		margin-top: 3.2vw;
	}

	.company-intro .image {
		height: 60.533vw;
		margin-top: 4.267vw;
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: auto;
	}

	.detail-content { margin: 12vw 5.333vw 0; }

	.detail-content .column h3 {
		font-size: 4.8vw;
		padding-bottom: 4.533vw;
		padding-left: 11.333vw;
	}

	.detail-content .column h3::before {
		font-size: 4.8vw;
		height: 7.733vw;
		line-height: 7.733vw;
		top: calc(50% - 6.33vw);
		width: 7.733vw;
	}

	.detail-content .column > p,
	.detail-content .column .flex,
	.detail-content .column .before-after { margin-top: 4vw; }

	.detail-content .column .flex p {
		float: none;
		max-width: 100%;
	}

	.detail-content .column .flex .image {
		float: none;
		margin-top: 3.733vw;
	}

	.detail-content .column .diagram { margin-top: 3.2vw; }

	.detail-content .column .before-after:nth-of-type(n+2) { margin-top: 8.533vw; }

	.detail-content .column .before-after dl {
		float: none;
		max-width: 100%;
	}

	.detail-content .column .before-after dl:first-of-type::after  {
		background-color: var(--color-deep-blue);
		clip-path: polygon(50% 100%, 0 0, 100% 0);
		content: '';
		display: block;
		height: 5.333vw;
		margin: auto;
		width: 8.533vw;
	}

	.detail-content .column .before-after dl:first-of-type dd::after { display: none; }

	.detail-content .column .before-after dt {
		font-size: 4.8vw;
		padding: 1.6vw 0;
	}

	.detail-content .column .before-after dd {
		margin-top: 2.933vw;
		min-height: inherit;
		padding: 4.267vw 4vw;
	}

	.detail-content .column .before-after dd ol,
	.detail-content .column .before-after dd .result {
		left: auto;
		min-width: inherit;
		position: relative;
		top: auto;
		transform: translate(0);
	}

	.detail-content .column .before-after dd ol li,
	.detail-content .column .before-after dd .result p { font-size: 4.167vw; }

	.detail-content .column .before-after dd ol li { margin-left: 5.333vw; }
	.detail-content .column .before-after dd ol li br { display: none; }

	.detail-content .column .before-after dd .result p { margin-bottom: 3.133vw; }

	.detail-content .column .before-after dd .result > div {
		margin: auto;
		max-width: 39.733vw;
	}

	.detail-point {
		margin: 10.133vw 4.267vw 0;
		width: auto;
	}

	.detail-point dt {
		border-radius: 2.133vw 2.133vw 0 0;
		font-size: 4.8vw;
		padding: 3.2vw 0;
	}

	.detail-point dt img { max-height: 12.267vw; }

	.detail-point dd {
		border-radius: 0 0 2.133vw 2.133vw;
		padding: 6.4vw 5.333vw;
	}

	.detail-point dd li {
		background-size: 5.867vw auto;
		font-size: 4.8vw;
		padding-left: 8.333vw;
	}

	.detail-point dd li:nth-of-type(n+2) { margin-top: 3.2vw; }
}