@charset "utf-8";

#mainVisual{position:relative;height:100vh;}
#mainVisual .typo{position:absolute;top:50%;left:0;width:100%;color:#000;transform:translateY(-60%);text-align:center;z-index:3;}
#mainVisual .typo .t0{font-size:18.6px;line-height:1.7px;font-weight:600;letter-spacing:0.4px;opacity:0.85;}
#mainVisual .typo .t1{font-size:100px;line-height:100px;font-weight:900;letter-spacing:2px;padding:30px 0 25px;opacity:1;text-shadow:4px 4px 10px rgba(0,0,0,0.10);}
#mainVisual .typo .t2{font-size:15.4px;line-height:1.7;font-weight:300;letter-spacing:0px;opacity:0.85;}
 
@media screen and (max-width:1024px) {
#mainVisual .typo .t1{font-size:86px;line-height:1.0;letter-spacing:1px;padding:30px 0 25px;}
#mainVisual .typo .t1 span{display:block;}
}
 
@media screen and (max-width:768px) {
#mainVisual .typo .t0{font-size:17px;}
#mainVisual .typo .t1{font-size:76px;line-height:1.0;}
#mainVisual .typo .t2{font-size:14px;padding:0 50px;}
#mainVisual .typo .t2 br{display:none;}
}

@media screen and (max-width:480px) {
#mainVisual .typo .t0{font-size:15px;}
#mainVisual .typo .t1{font-size:50px;padding:18px 0 15px;}
#mainVisual .typo .t2{font-size:12px;line-height:1.5;padding:0 30px;}
}


.more_area a.btn_more{display:inline-block;font-size:15.6px;font-weight:400;line-height:54px;text-align:left;color:#fff;width:200px;padding:0 0 0 20px;border:1px solid rgba(255,255,255,0.4);
background:url(/img/svg/arrow_next_white.svg) no-repeat calc(100% - 12px) center;background-size:18px;opacity:0.7;transition-duration:0.2s;}
.more_area a.btn_more.black{color:#000;border:1px solid rgba(0,0,0,0.8);background:url(/img/svg/arrow_next.svg) no-repeat calc(100% - 12px) center;opacity:0.90;}
.more_area a.btn_more:hover{opacity:1;color:#fff;background:url(/img/svg/arrow_next_white.svg) no-repeat calc(100% - 12px) center;background-color:#d70303;border:1px solid rgba(215,3,3,1);width:230px;}

@media screen and (max-width:600px) {
.more_area a.btn_more{font-size:14.2px;line-height:46px;width:150px;padding:0 0 0 15px;background:url(/img/svg/arrow_next_white.svg) no-repeat calc(100% - 10px) center;background-size:16px;}
.more_area a.btn_more.black{background:url(/img/svg/arrow_next.svg) no-repeat calc(100% - 10px) center;background-size:16px;}
.more_area a.btn_more:hover{background:url(/img/svg/arrow_next_white.svg) no-repeat calc(100% - 10px) center;background-color:#d70303;width:170px;}
}

#service{position:relative;background-color:rgba(0,0,0,0.75);padding:170px 0 150px;color:#fff;}
#service .typo{}
#service .typo h2{font-size:17.2px;font-weight:700;line-height:1.7px;}
#service .typo .t1{font-size:80px;text-indent:-5px;line-height:100px;font-weight:900;letter-spacing:2px;padding:20px 0 15px;}
#service .typo .t2{font-size:17.4px;line-height:1.7;font-weight:300;letter-spacing:0px;opacity:0.75;}

#service ul{font-size:0;text-align:right;margin:100px 0 60px;}
#service ul li{display:inline-block;width:20%;vertical-align:top;}
#service ul li:nth-child(2){margin:0 2%;}
#service ul li:nth-child(2) a{margin-top:70px;}
#service ul li a{display:block;font-size:18.0px;font-weight:600;color:#fff;text-align:center;letter-spacing:0.4px;border-radius:25px;padding:156px 10px 50px;transition-duration:0.5s;}
#service ul li:nth-child(1) a{background:url(/img/main/icon_service01_on.png) no-repeat center 50px rgba(255,255,255,0.07);background-size:85px 85px;transition-duration:0.5s;}
#service ul li:nth-child(2) a{background:url(/img/main/icon_service02_on.png) no-repeat center 50px rgba(255,255,255,0.07);background-size:85px 85px;transition-duration:0.5s;}
#service ul li:nth-child(3) a{background:url(/img/main/icon_service03_on.png) no-repeat center 50px rgba(255,255,255,0.07);background-size:85px 85px;transition-duration:0.5s;}
#service ul li:nth-child(1) a:hover{background:url(/img/main/icon_service01.png) no-repeat center 50px rgba(215,3,3,1);background-size:85px 85px;}
#service ul li:nth-child(2) a:hover{background:url(/img/main/icon_service02.png) no-repeat center 50px rgba(215,3,3,1);background-size:85px 85px;}
#service ul li:nth-child(3) a:hover{background:url(/img/main/icon_service03.png) no-repeat center 50px rgba(215,3,3,1);background-size:85px 85px;}
#service ul li a:hover{box-shadow:10px 10px 15px rgba(0,0,0,0.35);}
#service ul li a span{display:block;font-size:13.0px;font-weight:400;line-height:1.2;opacity:0.6;text-transform:uppercase;}

@media screen and (max-width:1024px) {
#service{padding:130px 0 110px;}
#service .typo{text-align:center;}
#service .typo .t1{font-size:70px;text-indent:0;line-height:80px;letter-spacing:1px;padding:20px 0 15px;}

#service ul{text-align:center;margin:90px 0 70px;}
#service ul li{width:30%;}

#service .more_area{text-align:center;}
}
 
@media screen and (max-width:640px) {
#service{padding:80px 0 70px;}
#service .typo h2{font-size:16.4px;}
#service .typo .t1{font-size:36px;line-height:46px;letter-spacing:0px;padding:12px 0 8px;}
#service .typo .t2{font-size:16px;line-height:1.6;padding: 0 25px;}
#service .typo .t2 br{display:none;}

#service ul{margin:40px 0 50px;}
#service ul li{width:100%;}
#service ul li:nth-child(2){width:48.5%;margin:3% 1.5% 0 0;}
#service ul li:nth-child(3){width:48.5%;margin:3% 0 0 1.5%;}
#service ul li:nth-child(2) a{margin-top:0;}
#service ul li a{font-size:17.0px;letter-spacing:0px;border-radius:15px;padding:110px 10px 40px;}
#service ul li:nth-child(1) a{background-position:center 35px;background-size:65px 65px;}
#service ul li:nth-child(2) a{background-position:center 35px;background-size:65px 65px;}
#service ul li:nth-child(3) a{background-position:center 35px;background-size:65px 65px;}
#service ul li:nth-child(1) a:hover{background-position:center 35px;background-size:65px 65px;}
#service ul li:nth-child(2) a:hover{background-position:center 35px;background-size:65px 65px;}
#service ul li:nth-child(3) a:hover{background-position:center 35px;background-size:65px 65px;}
#service ul li a span{display:block;font-size:13.0px;font-weight:400;line-height:1.2;opacity:0.6;text-transform:uppercase;}
}
 

#portfolio{position:relative;padding:170px 0 0;}
#portfolio .typo{text-align:center;padding-bottom:120px;}
#portfolio .typo h2{font-size:17.2px;font-weight:700;line-height:1.7px;letter-spacing:0px;}
#portfolio .typo .t1{font-size:80px;color:#000;opacity:0.9;line-height:1;font-weight:900;letter-spacing:0;padding:20px 0 0;}


@media screen and (max-width:1024px) {
#portfolio{padding:130px 0 0;}
#portfolio .typo{padding-bottom:80px;}
#portfolio .typo .t1{font-size:70px;letter-spacing:0;}
}
 
@media screen and (max-width:640px) {
#portfolio{padding:80px 0 0;}
#portfolio .typo{padding-bottom:30px;}
#portfolio .typo h2{font-size:16.4px;}
#portfolio .typo .t1{font-size:36px;line-height:46px;letter-spacing:0px;padding:12px 0 8px;}

}