/* ============= */
/* ページ内 common */
/* ============= */
#page__mv {
    & .page__mvWrap--bg {
        .page__mvTextarea {
            min-width: unset;
        }
    }
}

.single-casePage {
	position: relative;
	width: 100%;

	.single-case__inner {
		width: 1200px;
	}
	.single-bg {
    position: relative;
    background-color: #E6F4FF;
  }

	.single-casePage__h2 {
		font-size: 3rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.364;
	}
	.single-casePage__h3 {
		background: linear-gradient(270deg, #84c7ff 9.62%, #33a2ff 100%);
		clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%);
		color: #fff;
		font-size: 3rem;
		font-weight: 700;
		line-height: 7rem;
		padding: 0 7rem;
		position: relative;
	}
	.single-casePage__h3::before {
		background-color: #0060dd;
		clip-path: polygon(0 0, 0% 100%, 100% 0);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 4rem;
	}
	.single-casePage__h3::after {
		background-color: #96d5f1;
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 4rem;
		border: 1px solid #96d5f1;
	}
	.section {
		padding-top: 10rem;
	}
	.section:last-of-type {
		padding-bottom: 15rem;
	}
	.headContent__list{
		font-size: 2rem;
		padding-left: 1.8rem;
		position: relative;
	}
	.headContent__list::before {
		background-color: var(--colorMainBlue);
		border-radius: 50%;
		content: "";
		height: 1rem;
		left: 0;
		position: absolute;
		top: 0.4em;
		width: 1rem;
	}
	@media screen and (max-width: 767px) {
		h2 {
			font-size: 4.6rem;
			margin-top: 5.6vw;
		}
		h3 {
			clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
			font-size: 2.4rem;
		}
		li {
			font-size: 1.6rem;
		}
		.single-casePage__h3 {
			clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0% 100%);
		}
		.single-casePage__h3::before {
			width: 3rem;
		}
		.single-casePage__h3::after {
			width: 3rem;
		}
	}
}

#singleHead {
	position: relative;
  padding-top: 15rem;
	.bg_img {
		background: url(../../img/case/bg_blue.svg) no-repeat top left / cover;
        height: 100%;
        left: 0%;
        max-width: 1440px;
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 0;
	}
	.inner {
		position: relative;
		z-index: 1;
	}
	.headTitles {
		align-items: center;
		border-bottom: 2px solid var(--colorMainBlue);
		display: flex;
		gap: 1.5rem;
	}
	.headCase {
		align-items: baseline;
		background-color: var(--colorMainBlue);
		clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
		color: #fff;
		display: flex;
		height: 7rem;
		justify-content: center;
		position: relative;
		width: 14.5rem;
		font-family: var(--fontOzwald);
		bottom: -0.1rem;
	}
	.headCase__text-white {
		left: 2.1rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.headCase span:first-of-type {
		font-size: 2.4rem;
	}
	.headCase span:nth-of-type(2) {
		font-size: 3.2rem;
	}

	.headContent {
		display: flex;
		flex-direction: row-reverse;
		gap: 8rem;
		margin-top: 4rem;
	}
	.headContent__textArea {
		flex: 1;
	}
	.headContent__img {
		flex: 0 1 45%;
	}

	.headContent__info {
		align-items: stretch;
		display: flex;
	}
	.headContent__info + .headContent__info {
		margin-top: 3rem;
	}
	dt {
		align-items: center;
		background-color: #96d5f1;
		display: grid;
		font-size: 2rem;
		font-weight: 700;
		min-height: 10rem;
		min-width: 18.6rem;
		place-content: center;
	}
	dd {
		align-items: center;
		background-color: #fff;
		display: grid;
		height: auto;
		padding: 2.7rem 3rem;
		width: 100%;
	}
	.headContent__lists {
		display: grid;
		gap: 1rem 2rem;
	}
	.headContent__list {
		display: inline-block;
		font-size: 1.8rem;
		line-height: 1.2;
	}
	.headContent__list::before {
		top: 0.3em;
	}
	.headContent__text {
		line-height: 2;
		margin-top: 4rem;
    	font-size: 2rem;
		font-weight: 400;
	}

	@media screen and (max-width: 767px) {
		.headContent__info + .headContent__info {
			margin-top: 4rem;
		}
		.bg_img {
			height: 66rem;
		}
		.headCase {
			height: 4.8rem;
			width: 12rem;
		}
		.headTitles {
			display: block;
		}
		.headContent {
			display: block;
		}
		.headContent__textArea {
			margin-top: 4rem;
		}
		.headCase span:first-of-type {
			font-size: 1.4rem;
		}
		.headCase span:nth-of-type(2) {
			font-size: 3.2rem;
		}
		.headContent__info {
			display: block;
			dt {
				display: block;
				min-height: auto;
				padding: 1.6rem;
				text-align: left;
				width: 100%;
			}
			dd {
				padding: 1.6rem;
			}
		}
	}
}

#singleSection {

	.contents {
		display: flex;
		flex-direction: row-reverse;
		gap: 6.67%;
		margin-top: 6rem;
	}
	.contents__lists {
		background-color: #fff;
		height: fit-content;
		padding: 3rem 4rem;
	}
  li{
		font-size: 2rem;
		padding-left: 1.8rem;
		position: relative;
    line-height: 1.5;
	}
	li::before {
		background-color: var(--colorMainBlue);
		border-radius: 50%;
		content: "";
		height: 1rem;
		left: 0;
		position: absolute;
		top: 0.4em;
		width: 1rem;
	}
	li + li {
		margin-top: 1.6rem;
	}
	.contents__lists {
		flex: 1;
	}
	.contents__img {
		flex: 0 1 45%;
	}

	@media screen and (max-width: 767px) {
		.contents {
			display: block;
			margin-top: 4rem;
		}
		.contents__img + .contents__lists {
			margin-top: 4rem;
		}
		.contents__lists {
			padding: 2rem;
		}
		li + li {
			margin-top: 1.6rem;
		}
	}
}