/*===============================================
 *	コンテンツ
===============================================*/
#second-visualcontents h1 span{max-width: 90px;}
.img-service{margin-top: 0;}
.banner-ttl{position: relative;max-width: 925px;margin: 0 auto;}
.icon-ttl{font-size: 42px;font-weight: bolder;margin-bottom: 30px; color: var(--site-primary);position: relative;}
.icon-ttl span em{font-size:38px;color: var(--site-subcolor); background:linear-gradient(transparent 60%, #f2e200 60%);padding:0 .5em;}
.icon-ttl span::before {content: '';display: block;background: url(../img/icon-left.png) no-repeat;width: 60px;height: 100px;background-size: contain;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.icon-ttl span::after {content: '';display: block;background: url(../img/icon-right.png) no-repeat;width: 60px;height: 100px;background-size: contain;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

.voice-list{width: 32%; background-color: #fff;border-radius: 6px;margin-top: 40px;box-shadow: 0px 5px 0px 0px var(--site-primary);}
.voice-list:nth-child(1),.voice-list:nth-child(2),.voice-list:nth-child(3){margin-top: 0;}

.voice-list h3{color: #fff;background:var(--site-primary);font-size:20px;font-weight:bold;text-align: center;border-radius: 6px 6px 0 0;padding: 10px 0;}
.customer{padding: 30px;}
.customer-text img{max-width:135px;height: 145px;object-fit: cover;width: 100%;}
.customer-text p{width: 46%;}
.before-after{margin:34px 0 48px;}
.before-after dd{width:45%; position: relative;}
.before-after dd img{height: 160px; object-fit: cover;}
.before-after dd:first-child::before{content:'Before';background:#504e4f; width: 85px;height: 30px;position: absolute;top: 0;left: 0;z-index: 10;color: #fff;text-align: center;line-height: 1.8;}
.before-after dd:first-child::after{content:'';background: url(../img/allow-ba.png) no-repeat; width: 17px;height: 26px;position: absolute;right: -18%;top: 50%;transform: translateY(-50%);}
.before-after dd:nth-child(2)::before{content:'After';background:#ff7608; width: 85px;height: 30px;position: absolute;top: 0;left: 0;z-index: 10;color: #fff;text-align: center;line-height: 1.8;opacity: .8;}
.before-after dd:nth-child(2)::after{content:'';width: calc(100% - 8px);height: calc(100% - 8px);border: 4px solid #ff7608;position: absolute;left: 0;top: 0;z-index: 10;}

.btn a{max-width: 340px;border: 3px solid var(--site-primary);text-align: center;color:var(--site-primary);border-radius:6px;font-size: 18px;font-weight: bold;margin: 0 auto;padding: 15px 0;display: block;position: relative;}
.btn a span::after{content: '';display: block;background: url(../img/icon-r2.png) no-repeat;width: 10px;height: 17px;background-size: contain;position: absolute;right: 18px;top: 50%;transform: translateY(-50%);}
.btn a:hover{background:var(--site-primary);color: #fff;transition: .3s;}
.btn a:hover span::after{content: '';display: block;background: url(../img/icon-r2h.png) no-repeat;width: 10px;height: 17px;background-size: contain;position: absolute;right: 18px;top: 50%;transform: translateY(-50%);transition: .3s;}
/*----詳細ページ---*/
.intro-voice p{margin-top:30px;}
.voice-content{padding: 56px 55px 40px 55px;}
.before-after-content{background: url(../img/voice/illust-bg.png) no-repeat;background-size: cover;height: 350px;border-radius: 6px;position: relative;}
.before-after-content dl{width: 58%; position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);}
.before-after-content dl dd{width: 40%;}
.before-after-content .before-after{margin: 0;}
.before-after-content .before-after dd img { height: 286px;}
.before-after-content .before-after dd:first-child::after{content:'';background: url(../img/allow-ba.png) no-repeat; width: 30px;height: 45px;position: absolute;right: -34%;top: 50%;transform: translateY(-50%);background-size: contain;}
.before-after-text{margin-top: 30px;}
.before-after-text p{margin-bottom: 30px;}
.before-after-text p:last-child{margin-bottom: 0;}
#bread li:nth-child(2) a{color: var(--site-primary);font-weight: normal;border-bottom: var(--site-primary) 1px solid;}

@media only screen and (max-width: 1024px) {
.voice-list{width: 48%;}
.voice-list:nth-child(3) {margin-top: 40px;}
.customer-text img{max-width: 100px;width: 100%;}
.customer-text p {width: 70%;}
/*----詳細ページ---*/
.before-after-content{height: 296px;}
.before-after-content .before-after dd img { height: 225px;}
}
    
@media only screen and (max-width: 768px) {
.icon-ttl{font-size: 30px;}
.icon-ttl span em{font-size: 28px;}
.txtbox{margin-bottom: 20px;}
.voice-list{max-width: 340px;}
.before-after dd{max-width: 125px;width: 100%;}
.customer-text p{width: 57%;}
.customer-text img{height:fit-content;}
.before-after dd:first-child::after{right: -19%;}
/*----詳細ページ---*/
.before-after-content{height: 206px;}
.before-after-content dl dd{max-width: initial; width: 43%;}
.before-after-content dl {max-width: 508px;}
.before-after-content .before-after dd img { height: 170px;}
.before-after-content .before-after dd:first-child::after {width: 22px; height: 32px; right: -27%;}
}
@media only screen and (max-width: 568px) {
.icon-ttl{font-size: 18px;letter-spacing: 0;margin-bottom: 20px;}
.icon-ttl span em{font-size: 21px;}
.icon-ttl span::after,.icon-ttl span::before{width: 25px;height: 41px;}
.img-service{margin-bottom: 20px;}
.customer-text img {height: 135px;}
.voice-list{width: 100%;}
.voice-list,.voice-list:nth-child(2),.voice-list:nth-child(3){margin-top: 20px;}
.before-after{margin: 30px 0;}

.voice-content{padding: 20px;}
.intro-voice p{margin-bottom: 20px;}
.before-after-content{background: url(../img/voice/illust-bg_sp.jpg) no-repeat;background-size: contain;height: 452px;border-radius: 6px;position: relative;}
.before-after-content dl{width:80%; max-width: 220px;}
.before-after-content dl dd {width: 100%;}
.before-after-content dl dd:first-child{margin-bottom: 40px;}
.before-after-content .before-after dd:first-child::after{right: 45%;top:103%; transform:rotate(90deg);width: 20px; height: 31px;}
.before-after-text p{margin-bottom: 10px;}
}