@charset "UTF-8";



.works-area{margin: 6% auto}
.works-area h3 {font-size:24px;}
.works-about {display:flex;align-items:center;gap:5%;max-width: 1200px;margin-bottom: 5%;}
.works-about .img {width:50%;}
.works-about .img img {width:100%;height:auto;display:block;}
.works-about .text {width:50%;}
.works-about .text span {display:block;}
.works-about .text a{margin-bottom: 4%;display: block;}
.works-about .text .title {font-size:20px;}
.works-about .text .service {font-size:32px;font-weight:500;margin-bottom:5px;}
.works-about .text .description {font-size:16px;margin-top: 4%;}
.works-about .text p {font-size:14px;line-height:1.8;}

@media screen and (max-width:767px){
.works-about {margin-top:40px;}
.works-about {flex-direction:column;}
.works-about .img {width:100%;}
.works-about .text {margin:0 20px;width:100%;}
}


@media screen and (max-width:767px){
.section-divider {position:relative;height:100px;display:flex;justify-content:center;overflow:hidden;}
.divider-line {position:absolute;top:0;width:2px;height:100px;background:linear-gradient(to bottom,rgba(0,120,255,0),rgba(0,120,255,1),rgba(0,120,255,0));}
}

.feature {width:100%;background-color:rgb(255, 253, 247);padding:5% 0 6%;border-top-left-radius:10%;border-top-right-radius:10% ;}
.feature h3 {font-size:clamp(14px,4vw,24px);margin-bottom: 3%;}
.feature .item {display:flex;margin:0 auto;align-items:center;justify-content:space-between;position: relative;}
.feature .item .img {width:65%;margin-right:5%;}
.feature .item .img img {width:100%;}
.feature .item .list {width:30%;}
.feature .item .list>div {margin-bottom:24px;}
.feature .btn {margin:2% 0 0;position: absolute;}
.feature dt{font-weight: 600;}

@media screen and (max-width:767px){
.feature {padding:60px 0;}
.feature .item {flex-direction:column;align-items:stretch;justify-content:flex-start;}
.feature .item .img {width:100%;margin:0 0 40px;}
.feature .item .list {width:100%;margin-bottom:20px;}
.feature h3 {font-size:20px;}
.feature .item .list>div {font-size:14px;margin-bottom:14px;}
}

.process {padding:5% 0;max-width: 1200px;}
.process h3 {font-size:clamp(14px,4vw,24px);margin-bottom: 3%;}
.process .item {display:flex;gap:80px;align-items:center;justify-content:space-between;position:relative;}
.process .item .img {flex:1.2;}
.process .item .img img {width:100%;}
.process .item .list {flex:1;max-width:480px;}
.process .item .list dt {font-size:18px;font-weight:600;}
.process .item .list>div:not(:last-child) {margin-bottom:24px;}

@media screen and (max-width:767px){
.process {margin-top:0;padding:0 20px;margin-bottom:50px;}
.process .item {flex-direction:column;gap:0;}
.process .item .img {width:100%;margin:0 0 40px;}
.process .item .list {width:100%;margin-bottom:20px;}
.process h3 {font-size:20px;}
.process .illust {display:none;}
}

.point {padding:60px 20px;margin-bottom:80px;max-width: 1200px;}
.point .catchcopy {margin-bottom: 3%;}
.point .gallery {display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:40px;}
.point .gallery-left {display:flex;gap:24px;}
.point .gallery-left .img {flex:1;}
.point .gallery .img img {width:100%;height:auto;display:block;}
.point .text dt {font-size:20px;font-weight:600;}
.point .text dd {line-height:1.8;margin-bottom:30px;}
.point .gallery-right img{width: 100%;}
.point .text{width: 100%;max-width: 1200px;}
.screens {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1200px;margin:0 auto;margin-bottom: 4%;}
.screen {height:400px;overflow-y:auto;background:#f5f1ea;border-radius:16px;}
.screen img {width:100%;height:auto;display:block;}


.point-flex{display:flex;gap:5%;align-items:flex-start;}
.point-flex .screen{width:45%;}
.point-flex .text{width:55%;}

@media screen and (max-width:767px){
.point {padding:20px;margin-bottom:50px;}
.point .gallery {grid-template-columns:1fr;gap:16px;}
.point .catchcopy {margin:0 20px 24px;}
}

.other-design{width:100%;background-color:rgb(255, 253, 247);padding:100px 0;border-top-left-radius:10%;border-top-right-radius:10% ;}
.other-design-inner{max-width: 1200px;margin: 0 auto;}
.works-area .other-design {margin-bottom:5%;}
.other-design .more-img {width:100%;margin:30px auto 50px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.other-design .more-img img {width:100%;height:auto;display:block;}
.other-design .more-text {width: 100%;}

@media screen and (max-width:767px){
.works-area .other-design {margin-bottom:60px;}
.other-design .more-img {width:80%;grid-template-columns:1fr;gap:16px;margin-bottom:0;}
.other-design .more-text {font-size:15px;}
}

.review {margin: 4% auto;}
.review .text {margin-bottom:40px;}
.review .text .title {display:block;font-size:20px!important;margin-bottom:15px!important;font-weight:500;}
.review .text p {line-height:1.8;margin-bottom:30px;}
.review .btn ,.point .btn{margin:6% auto 0;}