@import url("https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap");header .h-inner{position:absolute;top:auto;bottom:0;border-top:1px solid white;background:transparent}header .h-inner .site-title{display:none}header.h-fixed .h-inner{position:fixed;top:0;bottom:auto;background:black;border:none}header.h-fixed .h-inner .site-title{display:block}main #hero .hero-warp{background:gray;overflow:hidden;position:relative;height:100vh}main #hero .hero-warp .hero-inner{position:absolute;z-index:2;height:100vh;max-width:1268px;width:90%;bottom:0;left:50%;transform:translateX(-50%)}main #hero .hero-warp .hero-inner .sp-logo{display:none}main #hero .hero-warp .h-top{display:flex;justify-content:space-between;align-items:flex-start;margin-top:5rem}main #hero .hero-warp .h-top h1{margin-left:3rem}main #hero .hero-warp .h-top h1 .sp{display:none}main #hero .hero-warp .scr{position:absolute;top:50%;transform:translateY(-50%);right:0;z-index:2;width:17px;height:14rem}main #hero .hero-warp .scr span{position:absolute;right:0;top:0;color:white;font-size:1.2rem;font-family:'Syncopate', sans-serif;font-weight:700;letter-spacing:0.05em;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}main #hero .hero-warp .scr .scr-border{width:1px;height:6rem;background:white;animation:scrollDown 2s ease infinite;margin:0 auto;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}@keyframes scrollDown{0%{transform-origin:top;transform:scaleY(0)}45%{transform-origin:top;transform:scaleY(1)}55%{transform-origin:bottom;transform:scaleY(1)}100%{transform-origin:bottom;transform:scaleY(0)}}main #hero .hero-warp .video-container{position:relative;width:101%;height:100%}main #hero .hero-warp .video-container .pattern{position:absolute;content:"";width:100%;height:100%;background:url("../../img/top/hero-dot.png") top left/3px;left:0;top:0;z-index:1;opacity:.8}main #hero .hero-warp .video-container video{min-width:100%;min-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}@media (aspect-ratio: 16 / 9){main #hero .hero-warp video{width:100%;top:50%;transform:translateY(-50%)}}@media (max-aspect-ratio: 16 / 9){main #hero .hero-warp video{height:100%;left:50%;transform:translateX(-50%)}}main #about .wrap{margin-top:6rem}main #about .under{display:flex;justify-content:space-between;align-items:flex-end;margin:4rem auto 5rem}main #about .under .left{max-width:715px}main #about .under .left h2{font-size:2rem;font-weight:bold;margin-bottom:2rem;line-height:36px}main #about .under .left p{line-height:29px}main #about .under a{color:black;font-size:1.6rem;font-family:'Syncopate', sans-serif;font-weight:700;width:20rem;height:4.5rem;border:1px solid black;padding:1rem 1rem;letter-spacing:.2rem}main #about .under a:before{background:black}main #about .under a:after{border-color:black;right:2rem}main #about .under a:hover{color:white}main #about .under a:hover:after{border-color:white}main #about .advantage{display:flex;justify-content:space-between;align-items:flex-start;width:calc(100% - 4rem);margin:0 auto 2rem}main #about .advantage li{width:calc(33% - 2rem/3);height:auto;background-position:center;background-repeat:no-repeat;background-size:cover}main #about .advantage li:first-child{background-image:url("../../img/top/advantage01.jpg")}main #about .advantage li:nth-child(2){background-image:url("../../img/top/advantage02.jpg")}main #about .advantage li:last-child{background-image:url("../../img/top/advantage03.jpg")}main #about .advantage li div{position:relative;padding-top:100%;height:auto}main #about .advantage li dl{position:absolute;left:3rem;bottom:2rem;color:white}main #about .advantage li dl dt{font-size:2rem;font-weight:bold}main #about .advantage li dl dd{font-size:1.1rem;font-family:'Syncopate', sans-serif;font-weight:700}main #service .ser-wrap{background:#9aa0a3;color:white}main #service .ser-wrap a{color:white}main #service .top{position:relative;padding:8rem 0}main #service .top .wrap{margin-bottom:8rem;z-index:2;position:relative}main #service .top h2{margin:3rem auto 2rem;font-size:2rem;font-weight:bold;line-height:36px}main #service .top .text{line-height:29px}main #service .top .hum-img{display:none}main #service .top:before{position:absolute;content:"";width:520px;height:412px;right:0;top:8rem;background:url("../../img/top/service01.jpg") no-repeat top right/auto 100%}main #service .top .top-image{width:calc(50% + 50rem);height:auto;padding-top:36.1%;margin:0 0 0 auto;position:relative}main #service .top .top-image:before{width:100%;height:100%;top:0;right:0;position:absolute;content:"";background:url("../../img/top/service02.jpg") no-repeat top right/cover}main #service .links-wrap{position:relative;padding-bottom:8rem}main #service .links-wrap .ser-slider{position:absolute;top:0;left:50%;max-width:764px;transform:translateX(-100%)}main #service .links-wrap .ser-list{max-width:43rem;margin:0 0 0 auto}main #service .links-wrap .ser-list .slick-track{transform:unset !important;width:100% !important}main #service .links-wrap .ser-list .slick-slide{position:relative;width:100% !important;display:block !important;float:none !important;opacity:.5}main #service .links-wrap .ser-list .slick-slide:hover{cursor:pointer}main #service .links-wrap .ser-list .slick-slide.slick-current{opacity:1}main #service .links-wrap .ser-list .scroll_up{margin-bottom:4rem;padding-bottom:4rem;border-bottom:1px solid white}main #service .links-wrap .ser-list .scroll_up:last-of-type{margin:0;padding:0;border:none}main #service .links-wrap .ser-list a img{display:none}main #service .links-wrap .ser-list a dl dt{position:relative;display:flex;justify-content:flex-start;align-items:baseline;margin-bottom:2rem}main #service .links-wrap .ser-list a dl dt:before,main #service .links-wrap .ser-list a dl dt:after{position:absolute;content:"";top:10px;right:0}main #service .links-wrap .ser-list a dl dt:before{right:5px;width:10px;height:10px;border-top:1px solid white;border-right:1px solid white;transform:rotate(45deg)}main #service .links-wrap .ser-list a dl dt .link-tit{font-size:3.6rem;font-family:'Syncopate', sans-serif;font-weight:700;line-height:3rem;margin-right:2rem}main #service .links-wrap .ser-list a dl dt .jp{font-size:1.4rem;font-weight:bold;position:relative;padding:0 1rem}main #service .links-wrap .ser-list a dl dt .jp:before,main #service .links-wrap .ser-list a dl dt .jp:after{position:absolute;content:"";width:6px;height:1px;background:white;top:50%;transform:translateY(-50%)}main #service .links-wrap .ser-list a dl dt .jp:before{left:0}main #service .links-wrap .ser-list a dl dt .jp:after{right:0}main #service .links-wrap .ser-list a dl dd{line-height:29px}main #sales .wrap{padding:10rem 0}main #sales .sale-title{margin-bottom:3rem;display:flex;justify-content:flex-start;align-items:baseline}main #sales .sale-title .en-title{font-size:7.3rem;font-family:'Syncopate', sans-serif;font-weight:700;line-height:8rem}main #sales .sale-title h2{font-size:1.4rem;font-weight:bold;margin-left:3rem;position:relative;padding:0 1rem}main #sales .sale-title h2:before,main #sales .sale-title h2:after{position:absolute;content:"";width:6px;height:1px;background:black;top:50%;transform:translateY(-50%)}main #sales .sale-title h2:before{left:0}main #sales .sale-title h2:after{right:0}main #sales .text{font-size:2rem;font-weight:bold;line-height:3.6rem}main #sales ul{margin:3rem auto 5rem;display:flex;justify-content:flex-start;align-items:flex-start}main #sales ul li{width:calc(33.3% - 4rem /3);font-weight:bold;margin-right:2rem}main #sales ul li .thum-wrap{display:block;position:relative;padding-top:67%;margin-bottom:1rem}main #sales ul li .thum-wrap .thum{position:absolute;width:100%;height:100%;top:0;left:0;background-position:center;background-repeat:no-repeat;background-size:cover}main #sales ul li:last-child{margin-right:0}main #sales ul li .name{font-size:2rem;line-height:3.6rem;margin-bottom:.5rem;display:block;color:#000}main #sales ul li .cat{background:#9aa0a3;color:#fff;padding:0 1rem;display:inline-block}main #sales ul li a{transition:.3s opacity}main #sales ul li a:hover{opacity:.7}main #sales .btn-common{color:black;font-size:1.6rem;font-family:'Syncopate', sans-serif;font-weight:700;width:20rem;height:4.5rem;border:1px solid black;padding:1rem 1rem;letter-spacing:.2rem;margin:0 auto}main #sales .btn-common:before{background:black}main #sales .btn-common:after{border-color:black;right:2rem}main #sales .btn-common:hover{color:white}main #sales .btn-common:hover:after{border-color:white}main .youtube{margin-bottom:10rem}main .youtube a{transition:.3s opacity}main .youtube a:hover{opacity:.7}main .scroll_up{transform:translateY(30px);opacity:0}main .scroll_up.on{transition:transform .8s ease-in-out, opacity .3s ease-in-out;transform:translateY(0);opacity:1}@media screen and (max-width: 1117px){main #service .links-wrap{padding-bottom:4rem}main #service .links-wrap .ser-slider{display:none}main #service .links-wrap .ser-list{max-width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start}main #service .links-wrap .ser-list .slick-slide{opacity:1}main #service .links-wrap .ser-list .slick-track{display:flex;justify-content:space-between;align-items:flex-start}main #service .links-wrap .ser-list .scroll_up{max-width:34rem;width:calc(34% - 4rem /3);padding:0;border:none;margin-bottom:0}main #service .links-wrap .ser-list .scroll_up:nth-child(2){margin:0 2rem}main #service .links-wrap .ser-list a{transition:.3s opacity}main #service .links-wrap .ser-list a img{display:block;width:100%}main #service .links-wrap .ser-list a dl{margin-top:3rem}main #service .links-wrap .ser-list a dl dt{display:block}main #service .links-wrap .ser-list a dl dt .link-tit{display:block}main #service .links-wrap .ser-list a dl dt:before{top:20px}main #service .links-wrap .ser-list a:hover{opacity:.5}}@media screen and (max-width: 1100px){header .h-inner{top:0;bottom:auto;border-top:none}main #hero .hero-warp .h-top{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);width:100%}main #service .top .wrap{margin-bottom:0}main #service .top .hum-img{display:block;margin-top:8rem}main #service .top .top-image{display:none}main #sales .sale-title .en-title{font-size:5rem;font-family:'Syncopate', sans-serif;font-weight:700;line-height:6rem}}@media screen and (max-width: 900px){main #about .wrap{max-width:60rem;margin:4rem auto 0}main #about .under{display:block;margin:1rem auto 4rem}main #about .under .left{margin-bottom:3rem}main #about .under .left h2 br,main #about .under .left p br{display:none}main #about .under .left h2{font-size:1.6rem;margin-bottom:1rem}main #about .under a{margin:0 auto}main #about .advantage{display:block;width:calc(100% - 4rem);max-width:60rem}main #about .advantage li{width:100%}main #about .advantage li dl{left:2rem}main #about .advantage li:nth-child(2){margin:2rem auto}main #service .top{padding:4rem 0}main #service .top .hum-img{display:none}main #service .top h2 br,main #service .top .text br{display:none}main #service .top h2{margin:1rem auto;font-size:1.6rem}main #service .top:before{display:none}}@media screen and (max-width: 770px){main #hero .hero-warp .hero-inner .sp-logo{display:block;width:7rem;height:32px;top:2rem;left:0;position:absolute}main #hero .hero-warp .h-top .l-logo{display:none}main #hero .hero-warp .h-top h1{margin:0 auto}main #hero .hero-warp .h-top h1 .pc{display:none}main #hero .hero-warp .h-top h1 .sp{display:block;width:100%}main #service .links-wrap .ser-list{display:block}main #service .links-wrap .ser-list .scroll_up{max-width:100%;width:100%;margin:0 auto 3rem !important;padding:0 0 3rem;border-bottom:1px solid white}main #service .links-wrap .ser-list .scroll_up:last-child{margin-bottom:0 !important}main #service .links-wrap .ser-list a{transition:.3s opacity}main #service .links-wrap .ser-list a img{display:block;width:100%}main #service .links-wrap .ser-list a dl{margin-top:3rem}main #service .links-wrap .ser-list a dl dt{display:block}main #service .links-wrap .ser-list a dl dt .link-tit{display:block}main #service .links-wrap .ser-list a dl dt:before{top:20px}main #service .links-wrap .ser-list a:hover{opacity:.5}main #sales .wrap{padding:5rem 0}main #sales .sale-title{display:block}main #sales .sale-title h2{display:inline-block;margin-left:0}main #sales ul{display:block}main #sales ul li{width:100%;margin:0 auto 3rem !important}main #sales ul li:last-child{margin-bottom:0 !important}}
