@charset "utf-8";
html{
    font-size: 62.5%;
}

.base_box {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

#mainContent img{
    vertical-align: middle;
}
/* #mainContent{
    line-height: 2.1;
} */

#mainContent .mb290 { margin-bottom:290px!important; }
#mainContent .mb200 { margin-bottom:200px!important; }
#mainContent .mb190 { margin-bottom:190px!important; }
#mainContent .mb180 { margin-bottom:180px!important; }
#mainContent .mb170 { margin-bottom:170px!important; }
#mainContent .mb160 { margin-bottom:160px!important; }
#mainContent .mb150 { margin-bottom:150px!important; }
#mainContent .mb140 { margin-bottom:140px!important; }
#mainContent .mb135 { margin-bottom:135px!important; }
#mainContent .mb130 { margin-bottom:130px!important; }
#mainContent .mb120 { margin-bottom:120px!important; }
#mainContent .mb100 { margin-bottom:100px!important; }
#mainContent .mb95 { margin-bottom:95px!important; }
#mainContent .mb90 { margin-bottom:90px!important; }
#mainContent .mb85 { margin-bottom:85px!important; }
#mainContent .mb80 { margin-bottom:80px!important; }
#mainContent .mb75 { margin-bottom:75px!important; }
#mainContent .mb70 { margin-bottom:70px!important; }
#mainContent .mb65 { margin-bottom:65px!important; }
#mainContent .mb60 { margin-bottom:60px!important; }
#mainContent .mb55 { margin-bottom:55px!important; }
#mainContent .mb50 { margin-bottom:50px!important; }
#mainContent .mb45 { margin-bottom:45px!important; }
#mainContent .mb40 { margin-bottom:40px!important; }
#mainContent .mb35 { margin-bottom:35px!important; }
#mainContent .mb30 { margin-bottom:30px!important; }
#mainContent .mb25 { margin-bottom:25px!important; }
#mainContent .mb20 { margin-bottom:20px!important; }
#mainContent .mb15 { margin-bottom:15px!important; }
#mainContent .mb12 { margin-bottom:12px!important; }
#mainContent .mb10 { margin-bottom:10px!important; }
#mainContent .mb8 { margin-bottom:8px!important; }
#mainContent .mb5 { margin-bottom:5px!important; }
#mainContent .mb0 { margin-bottom:0!important; }
#mainContent .mlr250 { margin-left:250px!important; margin-right:250px!important; }
#mainContent .mlr150 { margin-left:150px!important; margin-right:150px!important; }
#mainContent .mlr115 { margin-left:115px!important; margin-right:115px!important; }
#mainContent .mlr100 { margin-left:100px!important; margin-right:100px!important; }
#mainContent .mlr80 { margin-left:80px!important; margin-right:80px!important; }
#mainContent .mlr75 { margin-left:75px!important; margin-right:75px!important; }
#mainContent .mlr70 { margin-left:70px!important; margin-right:70px!important; }
#mainContent .mlr60 { margin-left:60px!important; margin-right:60px!important; }
#mainContent .mlr55 { margin-left:55px!important; margin-right:55px!important; }
#mainContent .mlr50 { margin-left:50px!important; margin-right:50px!important; }
#mainContent .mlr45 { margin-left:40px!important; margin-right:45px!important; }
#mainContent .mlr40 { margin-left:40px!important; margin-right:40px!important; }
#mainContent .mlr35 { margin-left:35px!important; margin-right:35px!important; }
#mainContent .mlr30 { margin-left:30px!important; margin-right:30px!important; }
#mainContent .mlr25 { margin-left:25px!important; margin-right:25px!important; }
#mainContent .mlr20 { margin-left:20px!important; margin-right:20px!important; }
#mainContent .mlr15 { margin-left:15px!important; margin-right:15px!important; }
#mainContent .mlr10 { margin-left:10px!important; margin-right:10px!important; }
#mainContent .mlr5 { margin-left:5px!important; margin-right:5px!important; }
#mainContent .mlr-1 { margin-left:-1px!important; margin-right:-1px!important; }
#mainContent .mlr-5 { margin-left:-5px!important; margin-right:-5px!important; }
#mainContent .mlr-10 { margin-left:-10px!important; margin-right:-10px!important; }
#mainContent .mlr-20 { margin-left:-20px!important; margin-right:-20px!important; }
#mainContent .mlr-30 { margin-left:-30px!important; margin-right:-30px!important; }
#mainContent .mlr-100 { margin-left:-100px!important; margin-right:-100px!important; }
#mainContent .mlr_auto { margin-left:auto!important; margin-right:auto!important; }

#mainContent .disp_r{
    float: right !important;
}
#mainContent .disp_l{
    float: left !important;
}

#mainContent .w460{
    width: 460px !important;
}
#mainContent .w480{
    width: 480px !important;
}

#mainContent .c_dblue {
    color: #405e6d !important;
}
#mainContent .size16 {
    font-size: 1.6rem !important;
}
#mainContent .size12 {
    font-size: 1.2rem !important;
}
#mainContent .normal {
    font-weight: normal !important;
}
#mainContent .lh2 {
    line-height: 2 !important;
}

#mainContent .title01{
	box-sizing: border-box;
	float: left;
	width: 395px;
	font-size: 2.8rem;
    margin: 0;
	font-weight: normal;
	font-family: YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	border-right: solid 1px #bebebe;
}
#mainContent .txt01{
	box-sizing: border-box;
	float: right;
	width: 500px;
	padding-top: 10px;
}
#mainContent .ul01 li{
	background: url(../image2024/t_service/soundproof/icon04.png) no-repeat left 7px;
	box-sizing: border-box;
	line-height: 1.5;
	margin-bottom: 8px;
	padding-left: 14px;
}
#mainContent .list01 li {
	margin-left: 2rem;
	text-indent: -1.8rem;
}
#mainContent .posit_r{
    position: relative !important;
}

/* ▼CASE STUDY▼ */
.service_casestudy{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding: 0 0 160px;
}
.case_prof{
	width:480px;
	float:right;
	position:relative;
}
.case_prof .txt{
	position:absolute;
	background-color:#f4f4f4;
	top:240px;
	right:0;
	width:350px;
	padding:40px;
}
.case_link h3{
	font-weight:normal;
	font-size:14px;
	margin:0 0 60px;
}
.case_link h3 span{
	font-family: YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:#405e6d;
	font-size:2.4rem;
	margin:0 20px 0 0 ;
}
.case_link ol{
	counter-reset:number;
	margin:0 0 70px;
}
.case_link ol li{
	width:210px;
	float:left;
	margin:0 40px 30px 0;
	position:relative;
}
.case_link ol li:after{
	content:"";
	width:16px;
	height:42px;
	background:url(../image2024/t_service/soundproof/icon09.png);
	display:block;
	position:absolute;
	top:54px;
	right:-28px;
}
.case_link ol li:last-child:after{ display:none; }
.case_link ol li a{
	background-color:#607e8b;
	display:block;
	width:100%;
	padding:37px 0 45px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	line-height:1;
	font-size:1.6rem;
	font-weight:bold;
}
.case_link ol li a{
    transition: .3s all ease-in-out;
}
.case_link ol li:nth-child(4n) a{
	background:  linear-gradient(45deg, #274757, #132633) left top;
	background-size:  100%;
	background-position:  100%;
	transition-duration:  0.3s;
}
.case_link ol li a:before{
	counter-increment:number;
	content:counter(number);
	color:#b7c5cc;
	font-size:3rem;
	font-weight:normal;
	margin:0 0 20px;
	font-family: YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display:block;
}
.case_link ol li a:hover{
    opacity: .8;
}
.case_step article{ margin:0 0 95px; }
.case_step article:last-child{margin:0;}
.case_step h3{
	color:#405e6d;
	font-size:2.4rem;
	font-weight:normal;
	margin:0 0 20px;
	line-height:1.5;
	font-family: YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.case_step h3 span{
	color:#b7c5cc;
	font-size:6rem;
	font-weight:normal;
	margin:0 20px 0 0 ;
}
.case_step h4{
	border-left:4px #b7c5cc solid;
	padding:8px 0 8px 10px;
	line-height:1;
	font-weight:normal;
	color:#405e6d;
	font-size:2.6rem;
	margin:0 0 20px;
}
.case_step h4 span{
	font-size:1.6rem;
	margin:0 0 0 12px;
	font-weight:bold;
}

.case_step .box{
	box-sizing:border-box;
	border:1px #b7c5cc solid;
	padding:30px 40px;
}
.case_step #step4{
	border:2px #dfe6e9 solid;
	text-align:center;
	padding:35px 0 25px;
}
.case_step #step4 h3 span{ vertical-align:-10px; }
.case_step .box.flowbox{
	text-align:center;
	padding:50px 30px;
}
.flowbox h5{
	color:#405e6d;
	font-size:2.2rem;
	font-weight:normal;
	margin:0 0 25px;
}
.flowbox ol{ counter-reset:f_number; }
.flowbox ol li{ font-weight:bold; }
.flowbox ol li:before{
	counter-increment:f_number;
	content:counter(f_number)". ";
}
.flowbox ol li:after{
	content:"";
	width:34px;
	height:12px;
	background:url(../image2024/t_service/soundproof/icon10.png);
	display:block;
	margin:22px auto;
}
.flowbox ol li:last-child:after{display:none;}

.case_step-block .sp{
	display: none;
}

@media screen and (max-width: 680px){

	#chatplusview{
		display: none !important;
	}
	.kizi{
        padding-left: 6vw;
        padding-right: 6vw;
        padding-bottom: 0;
    }
	#mainContent .case_step-block .pc{
		display: none;
	}
	#mainContent .case_step-block .sp{
		display: block;
	}
	#mainContent .service_casestudy{
		width: 100%;
		padding-bottom: 40px;
	}
	#mainContent .case_link{
		margin-bottom: 15px;
	}
	#mainContent .case_link h3{
		font-size: 1.4rem;
		margin-right: 0;
		margin-bottom: 0;
	}
	#mainContent .case_link h3 span{
		font-size: 5.8vw;
		margin-bottom: 15px;
		display: block;
	}
	#mainContent .case_link ol{
		display: none;
	}
	#mainContent .case_step > article:not(:last-child){
		margin-bottom: 15px;
	}
	#mainContent .case_step > article .case_step-block__title{
		width: 100%;
		margin-bottom: 0;
		height: 20.58vw;
		padding: 0 0 0 5vw;
		font-size: 4.2vw;
        box-sizing: border-box;
		color: #fff;
		background: #5d7e8b;
		display: flex !important;
        align-items: center;
        justify-content: flex-start;
		position: relative;
	}
	#mainContent .case_step > article .case_step-block__title.-pick{
		background: #1a3846;
	}
	#mainContent .case_step > article .case_step-block__title:not(.-pick)::after{
		content: "";
		display: block;
		width: 10vw;
		height: 100%;
		right: 0;
		top: 0;
		bottom: 0;
		border-left: 1px solid #fff;
		position: absolute;
	}
	#mainContent .case_step > article .case_step-block__title:not(.-pick)::before{
		content: "";
		display: block;
		width: 2vw;
		height: 2vw;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		position: absolute;
		right: 4vw;
        top: calc(50% - 1vw);
        transform: rotate(-45deg);
	}
	#mainContent .case_step > article .case_step-block__title span{
		font-size: 6.5vw;
		margin-right: 3.5vw;
	}
	#mainContent .case_step-block__inner{
		padding-top: 20px;
	}
	#mainContent .case_step-block__text{
		line-height: 1.8;
		/* font-size: 1.3rem; */
	}
	#mainContent .case_step-block__image{
		width: 100%;
	}
	#mainContent .case_step-block__image img{
		width: 100%;
	}
	#mainContent .case_step-block__accordion{
		padding-top: 20px;
		display: none;
	}
	#mainContent .case_step-block__accordion img{
		max-width: 100% !important;
	}
	#mainContent .case_step-block__accordion__title{
		display: block;
		line-height: 1.5;
		font-size: 1.6rem;
		font-weight: 700;
		margin-bottom: 15px !important;
		color: #405e6d;
		padding: 0;
		border-left: none;
	}
	#mainContent .case_step-block__accordion__copy{
		margin-bottom: 15px !important;
		/* font-size: 1.3rem; */
		color: #5d7e8b;
		line-height: 1.8;
	}
	#mainContent .case_step-block__accordion .w460{
		width: 100% !important;
		float: none !important;
	}
	#mainContent .case_step-block__accordion .w480{
		width: 100% !important;
		float: none !important;
	}
	#mainContent .case_step .box{
		padding: 20px 4%;
		/* font-size: 1.3rem; */
		line-height: 1.8;
	}
	#mainContent .case_step .box p:nth-of-type(1){
		/* font-size: 1.3rem; */
		line-height: 1.8;
		color: #5d7e8b;
	}
	#mainContent .case_step .box p:nth-of-type(2){
		line-height: 1.8;
		margin-bottom: 15px !important;
	}
	#mainContent .ul01 li{
		margin: 0 0 20px 2px;
		padding-left: 10px;
		/* font-size: 1.3rem; */
		color: #5d7e8b;
		line-height: 1.8 !important;
	}
	#mainContent .ul01 li:last-child{
		margin-bottom: 0;
	}
	#mainContent .case_step .case_step-block__accordion__flex_re{
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
	}
	#mainContent .case_step-block_frame{
		/* font-size: 1.3rem; */
		line-height: 1.8;
		padding: 20px 4%;
		border: 1px #b7c5cc solid;

	}

	#mainContent .case_step #step1 .w480{
		margin-bottom: 15px;
	}
	#mainContent .case_step #step4{
		border: none;
		padding: 0;
	}
	#mainContent .case_step #step5 .case_step-block__accordion > div{
		margin-bottom: 20px !important;
	}
	#mainContent .case_step #step5 .case_step-block_frame{
		margin-bottom: 20px !important;
	}
	#mainContent .case_step #step5 .case_step-block-flow{
		margin-bottom: 20px;
	}
	#mainContent .case_step #step5 .case_step-block-flow__title{
		font-size: 1.6rem;
		color: #405e6d;
		margin-bottom: 15px;
		line-height: 1.8;
	}
	#mainContent .case_step #step5 .case_step-block-flow__text{
		line-height: 1.8;
		/* font-size: 1.3rem; */
		margin-bottom: 0;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text2{
		margin-bottom: 15px !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text3{
		margin-bottom: 10px !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text3 .bold{
		font-weight: normal !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text4{
		margin-bottom: 10px !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text4 .bold{
		font-weight: normal !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text5{
		margin-bottom: 20px !important;
	}
	#mainContent .case_step #step5 .case_step-block__text.-text5 .bold{
		font-weight: normal !important;
	}
	#mainContent .case_step #step6 .case_step-block__text.-text1{
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 15px;
		line-height: 1.5;
		color: #405e6d;
	}
	#mainContent .case_step #step6 .case_step-block__accordion > div.mb55{
		margin-bottom: 20px !important;
	}
	#mainContent .case_step #step6 .case_step-block__text.-text2{
		margin-bottom: 20px !important;
	}
	#mainContent .case_step #step6 .flowbox{
		box-sizing: border-box;
		float: left;
		width: calc(50% - 10px);
		text-align: center;
		line-height: 1.5;
		padding: 10px 4%;
	}
	#mainContent .case_step #step6 .flowbox h5{
		font-size: 1.6rem;
		margin-bottom: 15px;
		font-weight: 700;
	}
	#mainContent .case_step #step6 .flowbox li{
		/* font-size: 1.2rem; */
		font-weight: normal;
		position: relative;
	}
	#mainContent .case_step #step6 .flowbox li::before{
		display: none;
	}
	#mainContent .case_step #step6 .flowbox li:not(:last-child){
		margin-bottom: 30px;
	}
	#mainContent .case_step #step6 .flowbox li:not(:last-child)::after{
		display: block;
		content: '';
		position: absolute;
		bottom: -16px;
		left: 50%;
		width: 22px;
		height: 8px;
		margin: 0;
		margin-left: -11px;
		background-size: 22px;
	}
	#mainContent .case_step #step6 .flowbox li span.size12{
		font-size: 1.2rem !important;
	}
	#mainContent .case_step #step6 .case_step-block__image{
		width: 50%;
		float: right;
	}

}