@charset "utf-8";
.subContents_title_box.mvArea {
	padding: 0;
}

.mvArea .mvWrap {
	width: 100%;
	padding-bottom: 25.278%;
	background: url('/topics/crack_detection/img/mv_bg_001.png') bottom right/auto 100% no-repeat;
	position: relative;
}

.mvArea .mvWrap .wrap1280px {
	position: absolute;
	left: 50%;
	top: 16.48355%;
	transform: translateX(-50%);
}

.boxContent01 .sidePost {
	width: calc(353 / 1140 * 100%);
}

.boxContent01 .postMain {
	width: calc(757 / 1140 * 100%);
}

.boxContent01List {
	box-shadow: 0 3px 8px 0px rgba(17, 60, 112, 0.16);
	background: #fff;
	border-radius: 4px;
	padding: 24px 30px 4px;
}

.boxContent01List .date {
	color: #8491aa;
}
.boxContent01List .ttl {
	font-weight: bold;
	margin-bottom: 10px;
}
.boxContent02 {
	background: #fff;
	border-radius: 4px;
	padding: 30px;
}

.topTitle01 {
	font-size: 3rem;
	font-weight: normal;
	font-family: "din-condensed", sans-serif;
	color: #004b9e;
	line-height: 4.6rem;
	margin-bottom: 1rem;
	padding-left: 1rem;
	position: relative;
}

.topTitle01 .num {
	font-size: 4.2rem;
}

.topTitle01::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.9rem;
	width: 0.3rem;
	height: 3.2rem;
	background: linear-gradient(to bottom, #2e8ee2 0%,#004b9e 60%,#0b318f 100%);
}

.Q5 .imgBox02:not(.imgBoxText),
.Q6 .imgBox02:not(.imgBoxText) {
	width: 50%;
}

.Q5 .imgBox02.imgBoxText,
.Q6 .imgBox02.imgBoxText {
	width: 47.9%;
}

.boxDescription {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.8rem;
	font-weight: 500;
}

.boxDescription dt {
	width: calc(130 / 1080 * 100%);
	margin-bottom: 2rem;
}

.boxDescription dd {
	width: calc(950 / 1080 * 100%);
	margin-bottom: 2rem;
}

.J1 .accordionListText {
	padding-left: 1em;
	text-indent: -1em;
}

.boxStepList li {
	background: #fff;
	padding: 30px 40px;
	border-radius: 1.6rem;
	position: relative;
}

.boxStepList li:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -5.7rem;
	left: 50%;
	margin-left: -2.15rem;
	width: 4.3rem;
	height: 2.5rem;
	background: url('/topics/crack_detection/img/main_ico_006.png') center/contain no-repeat;
	display: block;
}

.boxStepList .topTitle01 {
	padding-left: 0;
}

.boxStepList .topTitle01::before {
	display: none;
}

.boxStepList .Q6 .imgBox02:not(.imgBoxText) {
	width: 17.5%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.boxStepList .Q6 .imgBox02.imgBoxText {
	width: 82.5%;
}

.boxStepList li:nth-child(3) .Q6 .imgBox02:not(.imgBoxText) {
	width: 24.5%;
}

.boxStepList li:nth-child(3) .Q6 .imgBox02.imgBoxText {
	width: 75.5%;
}

.boxStepList li:nth-child(5) .Q6 .imgBox02:not(.imgBoxText) {
	width: 28%;
}

.boxStepList li:nth-child(5) .Q6 .imgBox02.imgBoxText {
	width: 72%;
}

.boxStepList .imgBoxImg {
	width: auto;
	max-width: 92%;
}

@media screen and (min-width: 811px) and (max-width: 1100px) {
	#contents .topContents_title01 {
		line-height: 60px;
	}

	.boxDescription dt {
		width: calc(160 / 1080 * 100%);
	}
	
	.boxDescription dd {
		width: calc(920 / 1080 * 100%);
	}
}

@media screen and (max-width: 810px) {
	.mvArea .mvWrap {
		padding-bottom: 97.067%;
		background: url('/topics/crack_detection/img/mv_bg_001_sp.png') top center/100% auto no-repeat;
	}

	.mvArea .mvWrap .wrap1280px {
    left: 0;
    top: 10.471%;
		transform: none;
	}

	.boxContent01 .sidePost,
	.boxContent01 .postMain {
    width: 100%;
	}

	.Q5 .imgBox02,
	.Q6 .imgBox02 {
		width: 100% !important;
	}

	.topTitle01 {
    font-size: 2.4rem;
    line-height: 4rem;
    padding-left: 0;
		padding-bottom: 0.7rem;
		text-align: center;
	}

	.topTitle01 .num {
    font-size: 3.6rem;
	}

	.topTitle01::before {
    left: 50%;
    top: auto;
		bottom: 0;
    width: 3.2rem;
    height: 0.2rem;
    background: linear-gradient(to right, #2e8ee2 0%, #004b9e 60%, #0b318f 100%);
		margin-left: -1.8rem;
	}

	.boxContent02 {
    padding: 20px 10px;
	}

	.boxDescription {
    display: block;
    font-size: 1.6rem;
	}

	.boxDescription dt {
    width: 100%;
    margin-bottom: 1rem;
	}

	.boxDescription dd {
    width: 100%;
	}

	#contents .accordionListTitle {
		padding-right: 55px;
	}

	.accordionListTitle span {
		display: block;
    padding-left: 1em;
    text-indent: -1em;
	}

	.boxStepList li {
    padding: 30px 15px;
	}

	.boxStepList li .imgBoxText {
		order: 1;
	}

	.boxStepList li .imgBox02:not(.imgBoxText) {
		order: 2;
	}

	.boxStepList li .C8 {
		order: 3;
		margin: 0 auto;
	}
	
	.boxStepList li .imgBox01Title {
		text-align: center;
	}

	.boxStepList .topTitle01 {
    padding-bottom: 0;
	}


}