@charset "utf-8";


/* -- SECTION: Case study
-------------------------------------------------------------------------------- */
#case h1,
#case article h2 {
	line-height: 1.5;
	padding-bottom: 8px;
	border-bottom: solid 1px #e4dbd7;
}
#case h1 {
	padding-bottom: 24px;
}
.form-block a {
	max-width: 280px;
}

@media screen and (min-width: 768px) {
	#case h1,
	#case article h2 {
		font-size: 2.8rem;
	}
	#case h1 {
		/* white-space: pre-wrap;
		word-break: keep-all; */
		white-space: nowrap;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
}

@media screen and (max-width: 767px) {
	#case h1,
	#case article h2 {
		font-size: 1.8rem;
	}
}

/* -- MEMO: Topic path -- */
#topicPath {
	padding: 16px!important;
}
#topicPath ul {
	font-size: 1.2rem;
	display: flex;
}
#topicPath ul li:not(:last-child)::after {
	content: "";
	vertical-align: middle;
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 8px;
	border-top: 1px solid #404040;
	border-right: 1px solid #404040;
	transform: rotate(45deg);
}

/* -- MEMO: Case study main visual -- */
.case-lead figure {
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 45 / 30;
}
.case-lead figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.case-lead dt {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 20px;
	color: #ea5532;
	text-align: center;
	width: 78px;
	height: 20px;
	border: solid 1px #ea5532;
	border-radius: 99px;
}
.case-lead dd {
	margin: -22px 0 0 88px;
}
.case-lead dd + dt {
	margin-top: 8px;
}
.case-lead p {
	line-height: 1.65;
}

@media screen and (min-width: 768px) {
	.case-lead {
		display: grid;
		grid-template-columns: 45% 1fr;
		grid-template-rows: min-content min-content 1fr;
		grid-auto-rows: 1fr;
		grid-auto-flow: column;
		gap: 12px 40px;
		margin-top: 40px;
	}
	.case-lead figure {
		grid-area: 1 / 1 / 4 / 2;
	}
	.case-lead h2 {
		font-size: 2rem;
		grid-area: 1 / 2 / 2 / 3;
	}
	.case-lead dl {
		grid-area: 2 / 2 / 3 / 3;
	}
	.case-lead p {
		grid-area: 3 / 2 / 4 / 3;
	}
}

@media screen and (max-width: 767px) {
	.case-lead figure,
	.case-lead h2 {
		margin-top: 40px;
	}
	.case-lead dl,
	.case-lead p {
		margin-top: 12px;
	}
	.case-lead h2 {
		font-size: 1.6rem;
	}
	#caseLeadBlock {
		padding-top: 40px!important;
	}
}

/* -- MEMO: Key points -- */
#keyPoints h3 {
	font-size: 1.8rem;
	line-height: 1;
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 99px;
}
#keyPoints h3:nth-of-type(1) {
	background-color: #404040;
}
#keyPoints h3:nth-of-type(2) {
	color: #ea5532;
	background-color: #fff;
	border: solid 1px #ea5532;
}
#keyPoints h3:nth-of-type(3) {
	background-color: #ea5532;
}
#keyPoints ul {
	padding-left: 24px;
	list-style: disc;
}
#keyPoints ul + h3 {
	margin-top: 24px;
}

/* -- MEMO: Customer Voice -- */
#customerVoice section:first-child {
	padding-top: 0;
}
#customerVoice h2 {
	margin-bottom: 48px;
}
#customerVoice h3 {
	font-size: 1.8rem;
	color: #ea5532;
	margin-top: 48px;
	margin-bottom: 24px;
	position: relative;
}
#customerVoice h3::before {
	content: "";
	background: #ea5532;
	vertical-align: middle;
	display: inline-block;
	width: 48px;
	height: 1px;
	margin-right: 4px;
}
#customerVoice div p + p {
	margin-top: 12px;
}
#customerVoice figure {
	margin-top: 48px;
}
#customerVoice div[class^="icon"] {
	line-height: 1.65;
	min-height: 84px;
	margin-top: 24px;
	padding-left: 76px;
	position: relative;
}
#customerVoice div[class^="icon"]::before {
	font-size: 1.2rem;
	text-align: center;
	display: block;
	width: 60px;
	padding-top: 68px;
	position: absolute;
	top: 0;
	left: 0;
}
.case1 .icon1::before {
	content: "阿阪様";
	background: url("../img/case/case1-icon1.webp") no-repeat 0 0 / 100% auto;
}
.case1 .icon2::before {
	content: "佐藤";
	background: url("../img/case/case1-icon2.webp") no-repeat 0 0 / 100% auto;
}
.case2 .icon1::before {
	content: "佐藤翔様";
	background: url("../img/case/case2-icon1.webp") no-repeat 0 0 / 100% auto;
}
.case2 .icon2::before {
	content: "佐藤凌";
	background: url("../img/case/case2-icon2.webp") no-repeat 0 0 / 100% auto;
}



/* -- SECTION: Form related
-------------------------------------------------------------------------------- */
.form-thank-content p {
	line-height: 1.5;
	text-align: center;
	margin-top: 40px;
}
@media screen and (min-width: 768px) {
	#forms main {
		min-height: calc(100vh - 196px);
	}
	.form-thank-content p {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 767px) {
	#forms main {
		min-height: calc(100vh - 208px);
	}
	.form-thank-content p {
		font-size: 1.6rem;
	}
}