@charset "utf-8";

@media only all and (min-width:1200px) and (max-width:1830px){

.sample .image{width:60%;}
.sample .explain{width:40%;}
.sample .explain li{font-size:16px;}
	
}

@media only all and (min-width:1200px) and (max-width:1779px){

.service-title>div{margin:0 40px;}
.sample .explain{padding:40px 20px;}
.history h2{margin-top:50px;}
.year-area{margin-top:30px;}
.history h3{font-size:20px;line-height:50px;}
.year-area{padding:0 40px;}
.year-area>div+div::before{top:50px;}
.year-area ul{margin-top:15px;padding:0 15px;}
.year-area li strong{width:50px;font-size:18px;}
.year-area dt{font-size:20px;}
.year-area dd{padding-left:15px;font-size:16px;}
.year-area dd::before{width:5px;height:5px;}
.year-area dd+dd::after{top:-12px;left:3px;height:24px;}
	
}

@media only all and (min-width:1600px) and (max-width:1779px){

.service-title{width:350px;}
.service-title>div{margin:0 40px;}
.service-title p{font-size:20px;}
.service-title h2{font-size:60px;}
.slider-service>div{padding-left:500px;}
.service .bx-controls{left:500px;width:calc(100% - 560px);}
	
}

@media only all and (min-width:1200px) and (max-width:1599px){
	
.service-title{width:250px;}
.service-title>div{margin:0 30px;}
.service-title p{font-size:16px;}
.service-title h2{font-size:40px;}
.service-title h2 p{font-size:20px;}
.slider-service>div{padding-left:350px;padding-right:50px;}
.service .bx-controls{left:350px;width:calc(100% - 400px);}
.service h3{height:70px;}
.service .text p{margin:20px 0 50px 0;font-size:20px;}
.sample{height:calc(100% - 350px);}
.service .bx-controls{top:45%;}
.awards .paragraph1{left:100px;}
footer{height:130px;padding-left:100px;}
footer::before{margin:0 20px;}
.foot dt{font-size:12px;}
.foot dd{font-size:13px;}
.foot p:last-child{font-size:12px;}
.end-scroll{bottom:130px;}

}

@media only all and (min-width:1200px) and (max-width:1599px){

body,p,span,ul,li,dt,dd{font-size:14px;}
aside{top:70px;}
header{height:70px;}
.logo a{width:120px;height:70px;}
.aside-left{width:100px;}
.aside-left li{width:100px;height:100px;}
.aside-right{width:50px;}
.aside-right a{width:50px;height:50px;}
.aside-right a::before{width:inherit;height:inherit;}
.mouse{width:20px;height:24px;}
.nav li{font-size:18px;}
.slider>div{padding:70px 50px 0 100px;}
.slider .text{bottom:150px;padding-left:50px;}
.slider .text h2+p{font-size:30px;}
.slider .text p:last-child{font-size:18px;letter-spacing:-1px;}
.visual .slide1 h2,.visual .slide1 h2 *{font-size:70px;}
.pager-area{left:100px;right:50px;bottom:30px;}
.bx-pager{width:100%;padding:0 100px;}
.bx-controls{bottom:80px;padding:0;}
.bx-controls-direction a{width:50px;height:50px;}
.bx-prev{left:140px;}
.bx-next{right:90px;}
.visual h2,.visual h2 *{font-size:60px;}
.visual .bx-pager-item a{height:50px;font-size:16px;line-height:46px;}
section:not(.service){padding-left:100px;padding-right:50px;}
section h2{font-size:50px;letter-spacing:-5px;}
.company em{font-size:30px;}
.company p,.company span{font-size:16px;}
.company .paragraph1{left:100px;padding-left:50px;}
.company .paragraph1 h2{left:50px;}
.company .paragraph2{left:100px;width:calc(70% - 100px);padding-left:50px;}
.company .paragraph2 p{font-size:18px;}
.company .paragraph3 *{font-size:50px;}
.company .paragraph3 strong{font-size:60px;line-height:58px;}
.greeting .paragraph2{padding-left:40px;}
.greeting .paragraph2 h3{font-size:30px;}
.ceo-name{left:40px;}
.ceo-name span{font-size:20px;}
.greeting .paragraph3 p{font-size:16px;}
.service-title{left:100px;}

}

@media only all and (max-width: 1199px){

*{letter-spacing:0;}
body,p,span,ul,li,dt,dd{font-size:.9rem;}
html,body{min-width:320px;min-height:480px;}
header{height:auto;z-index:100;}
section:not(.service){padding:0 1em;}
section h2{width:100%;font-size:2.5rem;letter-spacing:-3px;text-align:center;}
aside{min-height:auto;}
footer{height:auto;padding:1em;}
footer::before{display:none;}

.logo a{width:90px;height:50px;background-size:contain;}
.nav{display:none;position:absolute;top:50px;left:0;right:0;height:50px;background:linear-gradient(-130deg,rgba(0,71,146,.8),rgba(135,51,133,.8),rgba(255,102,51,.8));}
.nav ul{padding:0 .5em;justify-content:space-between;}
.nav li{margin:0;padding:0;color:#fff;font-size:.75rem;line-height:50px;}
.nav li:focus,.nav li:hover{color:#ffc000;}
.nav-mobile{display:block;}
.partner{display:none;}

.company p,.company span{font-size:.9rem;}
.company em{margin-bottom:.5em;font-size:1.5rem;}
.company .paragraph1{left:0;width:100%;height:20%;padding-left:0;}
.company .paragraph1 h2{left:50%;bottom:auto;transform:translateX(-50%);}
.company .paragraph2{left:0;width:50%;height:40%;padding:1em;}
.company .paragraph2 p{font-size:.9rem;line-height:120%;}
.company .paragraph3{top:20%;left:0;right:0;width:50%;height:40%;padding-left:0;}
.company .paragraph3 *{font-size:2.2rem;}
.company .paragraph3 strong{font-size:2.2rem;line-height:2.2rem;letter-spacing:-3px;}
.company .paragraph4{top:20%;height:40%;width:50%;padding:1em;}
.company .paragraph5{top:60%;height:40%;width:50%;padding:1em;}
.company .paragraph4 p,.company .paragraph5 p,.company .paragraph4 em,.company .paragraph5 em{width:100%;line-height:120%;}

.greeting .paragraph1{display:flex;align-items:center;justify-content:center;top:0;left:0;bottom:auto;width:100%;height:20%;padding-right:0;}
.greeting .paragraph2{top:20%;left:0;width:100%;height:40%;padding-left:1em;}
.greeting .paragraph2::after{right:.5em;}
.greeting .paragraph2 h3{width:60%;font-size:1.3rem;letter-spacing:-2px;;line-height:130%;}
.ceo-name{left:2em;width:50%;height:60px;padding:.5em;font-size:.8rem;}
.ceo-name span{margin-left:.2em;font-size:1.2rem;letter-spacing:0;}
.greeting .paragraph3{left:0;width:100%;height:40%;padding:2em 1em 0 1em;}
.greeting .paragraph3 p{width:100%;font-size:.9rem;line-height:130%;}
.greeting .paragraph3::after{display:none;}

.history h2{display:flex;align-items:center;justify-content:center;margin-top:0;height:20%;}
.history h3{font-size:2rem;line-height:3rem;}
.year-area{flex-direction:row;margin-top:0;padding:0;}
.year-area>div{width:100%;height:auto;}
.year-area>div+div{margin-top:1.5em;}
.year-area>div+div::before{display:none;}
.year-area ul{margin-top:1.5em;}

.service-title{left:0;width:100%;height:20%;}
.service-title>div{width:100%;margin:0;}
.service-title h2{width:100%;font-size:2.5rem;}
.service-title p{font-size:1.5rem;text-align:center;}
.service-title p span{display:inline;}
.slider-service>div{padding:0;}
.slider-service .text{margin-top:20%;}
.sample{position:relative;height:50%;}
.sample>div{float:none;width:100%;}
.sample .image{width:100%;}
.sample .explain{flex-direction:row;position:absolute;left:0;right:0;bottom:0;width:100%;height:157px;padding:1em 2em;}
.sample .explain ul{width:70%;}
.sample .explain li{font-size:1rem;line-height:150%;}
.sample .btn-link{width:30%;}
.service .bx-controls{display:block;top:60%;left:0;right:0;width:100%;}
.service .bx-controls-direction a{top:0;}

.awards .paragraph1{justify-content:center;left:0;width:100%;height:20%;padding-right:0;background-color:rgba(135,51,133,.5);}
.awards .paragraph1 h2{float:none;}
.awards .paragraph2{left:0;width:100%;padding-right:0;}
.awards .paragraph2 ul{padding:0;}
.awards li{margin-top:0;}

.aside-left ul,.aside-right{display:none!important;}
.aside-left{position:absolute;width:100%;height:50px;top:auto;bottom:0;background:transparent;}
.icon-scroll{position:absolute;left:50%;transform:translateX(-50%);}

.foot dt,.foot dd{font-size:.7rem;line-height:150%;}
.foot p:last-child{font-size:.7rem;}

}

/* ipad pro 1024~ */
@media only all and (max-width: 1199px) and (min-width: 960px){

.slider>div{padding-left:2em;padding-right:2em;}
.slider .text{left:50%;width:80%;bottom:20em;padding-left:0;transform:translateX(-50%);}
.bx-controls{padding:0;bottom:14em;}
.bx-prev{left:1em;}
.bx-next{right:1em;}
.pager-area{left:0;right:0;bottom:10em;}
.bx-pager{width:80%;padding:0;}
.visual .bx-pager-item a{font-size:.9rem;}
.aside-left{bottom:50px;}
.icon-scroll{bottom:0;}
	
}

@media only all and (max-width:959px) {
	
.slider>div{padding:50px 1em 0 1em;}
.slider .text{margin-top:5em;position:static;left:auto;padding-left:0;text-align:center;}
.slider .text h2+p{font-size:1.8rem;letter-spacing:-1px;}
.slider .text p:last-child{font-size:1.2rem;line-height:150%;letter-spacing:-1px;}
.visual h2, .visual h2 *{font-size:5rem;}
.visual h2{margin-bottom:.2em;line-height:5rem;}
.visual .slide1 h2, .visual .slide1 h2 *{font-size:5.2rem;line-height:5rem;}
.bx-controls{display:none;}
.pager-area{bottom:15%;left:50%;right:auto;transform:translateX(-50%);}
.bx-pager{width:auto;padding:0;}
.visual .bx-pager-item a{width:25px;height:5px;border:0;line-height:0;text-indent:-9999px;background-color:rgba(255,255,255,.3);}
.visual .bx-pager-link.active{background-color:#fff;}

.history h3{font-size:1.2rem;line-height:2rem;}
.year-area>div+div{margin-top:.5em;}
.year-area ul{margin-top:0;padding:1em;}
.year-area li+li{margin-top:1em;}
.year-area li strong{font-size:1.2rem;line-height:100%;}
.year-area dt,.year-area dd{line-height:120%;}
.year-area dt{font-size:.9rem;}
.year-area dd{padding-left:15px;font-size:.75rem;}
.year-area dd::before{width:5px;height:5px;}
.year-area dd+dd::after{display:none;}

.service-title{display:none;}
.slider-service .text{margin-top:80px;}
.service h3{margin-top:0;height:50px;}
.service .text{width:100%;}
.service .text p{margin:1em 0 2em 0;font-size:1rem;}
.slider-service .sample{width:calc(100% - 2em);height:calc(100% - 230px);}
.sample .explain{height:170px;padding:1em;}
.sample .explain ul,.sample .btn-link{width:calc(100% - 2em);}
.sample .explain li{float:left;width:50%;padding-left:15px;font-size:.9rem;}
.sample .explain li+li{margin-top:0;}
.sample .explain li::before{width:3px;height:10px;}
.sample .explain li:nth-child(2n+1){clear:both;}
.sample .btn-link{position:absolute;left:1em;right:1em;bottom:1em;height:30px;font-size:.8rem;}
.service .bx-controls{top:100px;}
.bx-controls-direction a{width:30px;height:30px;}
.service .bx-controls-direction .bx-prev{left:.5em;}
.service .bx-controls-direction .bx-next{right:.5em;}

.foot dt{clear:both;}
.foot dd+dt{margin-left:0;}
	
}

@media only all and (max-width:599px){

.visual h2 span{display:block;}
.year-area li strong{width:60px;}
.awards li::before{width:120px;height:175px;}
.awards li{font-size:1rem;}

}

@media only all and (max-width:440px){

.service .bx-controls{top:82px;}
.slider-service .text{margin-top:70px;}
.sample .explain{height:180px;}
.sample .explain li{float:none;width:100%;padding-left:15px;}

}

@media only all and (max-width:340px){
	
.visual h2,.visual h2 *{font-size:4rem;line-height:100%;}
.company .paragraph3 *{font-size:2rem;}
.company p,.company span{font-size:.8rem;}
.ceo-name{font-size:.7rem;}
.ceo-name span{font-size:1rem;}
.history h3{font-size:1rem;line-height:1.2rem;}
.year-area ul{padding:.5em;}
.year-area li strong{width:55px;}
.year-area dd{font-size:.7rem;}
.service h3{height:40px;}
.service .text p,.service-title p{font-size:.8rem;}
.slider-service .sample{height:calc(100% - 180px)}
.sample .explain{height:150px;}
.sample .explain li{font-size:.7rem;}

}