.title-style02{
    text-align: center;
}
/* トラック新着一覧 */
#total .cntBox{
	margin-top: 30px;
}
#total .cnt-copy {
    gap: 30px;
}
#total .cnt-copy .cntImg{
    width: 45%;
}
#total .cnt-copy .cntText{
	width: 55%;
}
#total .cnt-copy .cntText h3 span.c-red {
    background: linear-gradient(transparent 50%, rgba(214, 15, 31, .1) 50%);
    background-position: auto -10px;
}
#total .cnt-copy .cntText p {
    line-height: 1.8;
    margin-top: 20px;
    margin-bottom: 30px;
}
#total .cnt-copy .ctaBox{
	display: flex;
	gap: 10px;
}
#total #feature > div{
	display: flex;
	justify-content: center;
	gap: 20px;
    padding: 20px 5%;
}
#total #feature > div .cnt{
	min-width: 100px;
	width: 100%;
	max-width: 165px;
	padding: 10px;
	font-size: 2.2rem;
	font-weight: bold;
	border-top: 9px solid var(--c-base);
}
#total #feature > div .cnt h3{
	font-size: 1.5rem;
	margin-bottom: 10px;
}
#total #feature > div .cnt p{
	color: var(--c-key);
}
#total #feature > div .cnt span{
	font-size: 4rem;
	margin-right: 4px;
}
/*お悩み*/
#worries h3{
	margin: 0 auto 20px;
	margin-top: -20px;
}
#worries .cntBox{
	display: flex;
	gap: 25px 3%;
	flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}
#worries .cntBox .cnt{
	width: 31.3%;
	background: #F2F3F5;
	border: 2px solid var(--c-key);
	padding: 15px 12px;
	border-radius: 5px;
	font-size: 1.5rem;
}
#worries .cntBox .cnt h4{
	text-align: center;
	font-weight: bold;
	line-height: 1.7;
	color: var(--c-base);
	margin-bottom: 15px;
	font-size: 1.7rem;
}
#worries .cntBox .cnt p{
	line-height: 1.6;
}

/*選ばれる4つの理由*/
#reason .cntBox{
  gap: 50px 5%;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 0;
}
#reason .cnt{
    width: 45%;
    position: relative;
    padding: 30px 3%;
}
#reason .cnt::after {
    font-size: 10rem;
    color: #F2F3F5;
    position: absolute;
    right: 10px;
    top: -10px;
    z-index: 0;
    font-family: var(--ff-en);
    letter-spacing: -0.05em;
}
#reason .cnt01::after {
    content: '01';
}
#reason .cnt02::after {
    content: '02';
}
#reason .cnt03::after {
    content: '03';
}
#reason .cnt04::after {
    content: '04';
}
#reason .cnt h3 {
    font-size: 2.6rem;
    color: var(--c-key);
    font-weight: 700;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    line-height: 1.5;
    z-index: 1;
}
#reason .cnt h3::after {
    content: '';
    width: 70px;
    height: 2px;
    background: var(--c-key);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}
#reason .cnt .cntIcon {
    width: 135px;
    height: 135px;
    position: absolute;
    top: -40px;
    left: -40px;
}
#reason .cnt p{
	text-align: left;
}

/*サービス一覧*/
#service .cntBox{
  gap: 50px 5%;
  flex-wrap: wrap;
  justify-content: center;
  padding-top:0;
}
#service .cnt{
    width: 45%;
    position: relative;
    padding: 30px 3%;
}
#service h3{
  margin: 0 auto 30px;
}
#service .cnt h4 {
    font-size: 2.6rem;
    color: var(--c-key);
    font-weight: 700;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    line-height: 1.5;
    z-index: 1;
}
#service .cnt h4::after {
    content: '';
    width: 70px;
    height: 2px;
    background: var(--c-key);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}
#service .cnt span{
	font-size: 1.5rem;
	line-height: 1.6;
	display: block;
	margin-top: 10px;
}
#service .cnt .cntImg{
	margin-top: 20px;
}
#service .cntTitle{
	padding-bottom: 0;
}
#service .service-cate li{
    font-size: 1.6rem;
}

/* 施工実績（ビフォーアフター）*/
#works .cntBox{
    gap: 30px 5%;
}
#works .cntBox .cnt{
    padding: 30px 2.5%;
}
#works .cntBox .cnt .cntImg{
    width: 100%;
    max-width: 450px;
    height: 220px;
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
}
#works .cntBox .cnt .cntImg > div{
    flex:1;
}
#works .cntBox .cnt .cntImg .af-img{
    outline: 6px solid var(--c-key);
    outline-offset: -6px;
    position: relative;
}
#works .cntBox .cnt .cntImg > div::before{
    position: absolute;
    background: #9A9A9A;
    color: #fff;
    padding: 2px 8px;
    font-size: 1.6rem;
    font-family: var(--ff-en);

}
#works .cntBox .cnt .cntImg > div.be-img::before{
    content: 'Before';
}
#works .cntBox .cnt .cntImg > div.af-img::before{
    content: 'After';
    background:var(--c-key);
}
#works .cntBox .cnt .cntImg .ba-arrow{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}
#works .cntBox .cnt h3{
    font-size: 2.6rem;
    line-height: 2;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 料金・費用目安 */
#price h3{
  margin: 0 auto 30px;
}
#price .cntBox{
    display: flex;
    flex-wrap: wrap;
    gap:40px 5%;
}
#price .priceBox{
    width: 47.5%;
}
#price .priceBox h4{
    font-size: 1.8rem;
    padding-left: 20px;
    margin-bottom: 15px;
    position: relative;
    font-weight:600;
}
#price .priceBox h4::before{
    content:'';
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--c-base);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin:auto;
}
#price table.table-style{
    width: 100%;
    text-align: center;
}
#price .table-style th{
    background: var(--c-base);
    color: #fff;
    text-align: center;
    padding: 10px;
}
#price .table-style th span,#price .table-style td span{
    font-size: 0.8em;
    padding-left: 5px;
}
#price .table-style td{
    font-size: 1.6rem;
    border-right: 1px solid #CDD1DB;
}
#price .table-style td:first-child{
    width: 40%;
    background: #F2F3F5;
}
#price .priceBox.option {
    width: 100%;
}
#price .desc{
    text-align: left;
}
#price .priceBox.option .table-style td:first-child{
    width: 30%;
}
#price .priceBox.option .table-style td:nth-child(2){
     width: 50%;
}
#price .priceBox .caution{
    text-align: right;
    font-size: 1.2rem;
    margin-top: 10px;
}
/* よくある質問 */
#quetion .cntTitle{
    padding-bottom: 0;
}
#quetion .cntBox{
    margin-top: 0;
    padding-top: 0;
}
#quetion .cntBox .cnt{
    padding: 0;
    margin-bottom: 20px;
    position: relative;
    /*height: 82px;*/
    /*overflow: hidden;*/
}
#quetion .cntBox .cnt dl > *{
    position: relative;
    padding-left: 40px;
    padding-bottom:20px;
    line-height: 1.6;
}
#quetion .cntBox .cnt .quetion{
    padding-bottom: 0;
    padding: 27px 35px 30px 60px;
}
#quetion .cntBox .cnt dl span{
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    margin-right: 25px;
    font-size: 2.7rem;
    position: absolute;
    left: 20px;
    top:20%;
}
#quetion .cntBox .cnt .quetion span{
    color: var(--c-key);
}
#quetion .cntBox .cnt .answer{
    padding-top: 20px;
    display: none;
    padding-left:60px;
    padding-bottom: 40px;
    padding-right: 30px;
}
#quetion .cntBox .cnt .answer.active{
    display: block;
}
#quetion .cntBox .cnt .answer span{
    color: #D60F1F;
    top: auto;
    transform: translateY(-8px);
}
#quetion .toggleBtn{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 40px;
}
#quetion .toggleBtn span{
    width: 100%;
    height: 2px;
    background: #1E2C5C;
    position: absolute;
    transition: .4s;
}
#quetion .toggleBtn span:last-child{
    transform: rotate(-90deg);
}
#quetion .toggleBtn.active span:last-child{
    transform: rotate(0);
}

/* お問い合わせ */
#contact-box > p{
    text-align: center;
    line-height: 2;
}
#contact-box h3{
  margin: 0 auto 30px;
}
#contact-box .cntBox{
    padding-top: 20px;
    gap: 50px 5%;
    flex-wrap: wrap;
}
#contact-box .cntBox .cnt{
    flex: 1;
    padding: 40px 5%;
}
#contact-box .cntBox .cnt h3{
    font-size: 2.3rem;
    font-weight: 700;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
}
#contact-box .cntBox .cnt p {
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: left;
    font-weight: 700;
}
#contact-box .cntBox .cnt.line-box .cta-btn a {
    width: 100%;
    max-width: 330px;
    margin: 20px auto;
    height: auto;
    background: none;
    box-shadow: none;
}
#contact-box .cntBox .cnt p.link {
    font-size: 1.8rem;
    text-align: center;
    color: var(--c-key);
}
#contact-box .cntBox .cnt p.link a {
    border-bottom: 1px solid var(--c-key);
}
#contact-box .cntBox .cnt.tel-box .cta-btn a {
    border: 1px solid var(--c-key);
    height: 80px;
    width: 300px;
    display: flex;
    flex-flow: column;
    padding: 5px 15px;
    justify-content: center;
    margin: 20px auto;
    background: #fff;
}

#contact-box .cntBox .cnt h3::after {
    content: '';
    width: 70px;
    height: 2px;
    background: var(--c-key);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}


@media(hover: hover) {

}

@media screen and (max-width: 899px) {
	#total .cnt-copy .cntText,#total .cnt-copy .cntImg{
        width: 100%;
    }
    #total .cnt-copy .cntText h3{
        font-size: 3rem;
    }
    #total .cnt-copy .ctaBox{
        flex-flow: column;
    }
    #total #feature > div{
        padding: 0;
        gap: 10px;
    }
    #total #feature > div .cnt{
        font-size: 1.5rem;
        padding: 10px 5px;
        border-top: 5px solid var(--c-base);
    }
    #total #feature > div .cnt h3{
        font-size: 1.2rem;
        letter-spacing: -0.05em;
    }
    #total #feature > div .cnt span{
        font-size: 3rem;
        margin-right: 3px;
    }
    #worries{
        padding-bottom: 0;
    }
    #worries .cntBox{
        margin-top: 20px;
    }
    #worries .cntBox .cnt{
        width: 48%;
    }
    #worries h3{
        margin-top: auto;
    }
    #reason .cntBox{
        gap: 40px 5%;
    }
    #reason .cnt{
        width: 95%;
    }
    #service .cntTitle{
        padding-top: 0;
    }
    #service .cntBox{
        gap: 30px 0;
    }
    #service .cnt{
        width: 100%;
    }
    #works{
        padding-bottom: 0;
    }
    #works .cntBox{
        flex-flow: column;
    }
    #works .cntBox{
        margin-top: 0;
    }
    #price h3{
        margin-bottom: 0;
    }
    #price .priceBox h4{
        font-size: 1.6rem;
    }
    #contact-box .cntBox{
        flex-flow: column;
    }
    
}
@media screen and (max-width: 480px) {
	#total .cnt-copy .cntText h3{
        font-size: 2.5rem;
    }
    #worries .cntBox{
        gap: 15px 3%;
    }
    #worries .cntBox .cnt{
        width: 48%;
        padding: 14px 10px;
    }
    #worries .cntBox .cnt h4{
        font-size: 1.5rem;
        line-height: 1.6;
    }
    #reason .cntBox{
        margin-top: 15px;
        gap: 30px 5%;
    }
    #reason .cnt .cntIcon{
        width: 100px;
        height: 100px;
        top: -30px;
        left: -30px;
    }
    #reason .cnt{
        padding: 30px 5%;
    }
    #reason .cnt h3 {
        font-size: 2.2rem;
    }
    #service{
        padding-bottom: 0;
    }
    #service h3{
        margin-bottom: 0;
    }
    #service .cnt h4{
        font-size: 2.2rem;
    }
    #service .cntTitle{
        padding-top: 20px;
    }
    #works .cntBox .cnt .cntImg{
        height: 140px;
    }
    #works .cntBox .cnt .cntImg .af-img{
        outline: 3px solid var(--c-key);
        outline-offset: -3px;
    }
    #works .cntBox .cnt .cntImg > div::before{
        font-size: 1.3rem;
    }
    #works .cntBox .cnt .cntImg .ba-arrow{
        width: 25px;    
    }
    #service .service-cate li{
        font-size:1.4rem;
    }
    #works .cntBox .cnt h3{
        font-size: 2rem;
    }
    #price .cntBox{
        gap: 30px 0;
    }
    #price .priceBox{
        width: 100%;
    }
    #price .priceBox h4{
        margin-bottom: 5px;
        padding-left: 15px;
    }
    #price .table-style td{
        font-size: 1.4rem;
    }
    #price .desc{
        font-size: 1.4rem;
    }
    #price .priceBox.option .table-style td:nth-child(2){
        width: 44%;
    }
    #price .priceBox .caution{
        line-height: 1.5;
    }
    #quetion .cntBox .cnt .quetion{
        padding: 20px 35px 22px 40px;
    }
    #quetion .cntBox .cnt dl span{
        left: 8px;
        top: 14%;
    }
    #quetion .toggleBtn{
        top: 32px;
        right: 10px;
        transform: scale(0.8);
    }
    #quetion .cntBox .cnt .answer{
        padding-left: 40px;
        padding-right: 25px;
        padding-top: 0;
    }
    #quetion .cntBox .cnt dl > *{
        font-size: 1.5rem;
    }
    #contact-box > p{
        font-size: 1.4rem;
    }
    #contact-box .cntBox{
        margin-top: 0;
        gap: 30px 5%;
    }
    #contact-box .cntBox .cnt h3{
        font-size: 2.2rem;
    }
    #contact-box .cntBox .cnt {
        padding: 30px 5%;
    }
    #contact-box .cntBox .cnt p.link{
        font-size: 1.6rem;
    }
}