:root {
    --mc:#0F97DD;
    --lc:#fff;
    --dc:#444;
    --dd:#ddd;
}

html {font-size:20px;}
body {font-size:0.8rem;}

#wrap {min-width:95rem;}
#header {position:fixed;top:0;left:0;width:100%;min-width:95rem;padding:0 3rem;line-height:5rem;color:var(--lc);font-size:1rem;transition:0.5s;z-index:999;}

#header .headerwrap {display:flex;padding:0 3rem;}
#header .search_form {display:none;background:var(--mc);color:var(--lc);text-align:center;}
#header .search_form form {display:inline-block;border-bottom:1px solid var(--dd);line-height:1.5;padding:0.5rem;}
#header .search_form input {background:transparent;outline:none;border:none;}
#header .search_form input:focus {color:var(--lc);}

#header h1 a {display:block;font-size:0;height:5rem;width:20rem;background:url(../img/logo.png) no-repeat left center;}
#header .gnb {margin-left:auto;}
#header .search {margin-left:10rem;}
#header .gnb>ul {display:flex;gap:2rem;}
#header .gnb>ul>li>a {display:block;}

#header.on {color:var(--dc);background:var(--lc);}
#header.on h1 a {background:url(../img/logo_on.png) no-repeat left center;}





#mainVisual {background:#000;position:relative;}
#mainVisual .main_slider figure {height:45rem;background-position:center center;background-size:110% 110%;background-repeat:no-repeat;position:relative;}
#mainVisual .main_slider figure.on {background-size:100% 100%;transition:1.5s;}
#mainVisual .main_slider .item01 {background-image:url(../img/img_visual1.jpg);}
#mainVisual .main_slider .item02 {background-image:url(../img/img_visual2.jpg);}
#mainVisual .main_slider .item03 {background-image:url(../img/img_visual3.jpg);}

#mainVisual figure .slogan {position:absolute;top:23rem;left:50%;transform:translateX(-50%);width:70rem;color:var(--lc);}
#mainVisual figure .slogan h3 {font-size:4rem;font-weight:900;margin-bottom:1rem;opacity:0;transform:translateY(5rem);}
#mainVisual figure .slogan p {font-size:1rem;font-weight:300;margin-bottom:2rem;opacity:0;transform:translateY(5rem);}
#mainVisual figure .slogan a {display:block;width:7.5rem;line-height:2rem;border:1px solid var(--lc);color:var(--lc);text-align:center;border-radius:1rem;opacity:0;transform:translateY(5rem);}

#mainVisual figure.on .slogan h3 {opacity:1;transform:translateY(0);transition:0.5s;}
#mainVisual figure.on .slogan p {opacity:1;transform:translateY(0);transition:0.5s 0.5s;}
#mainVisual figure.on .slogan a {opacity:1;transform:translateY(0);transition:0.5s 1s;}

#mainVisual figure .slogan a:hover {background:var(--mc);border:1px solid transparent;transition:0.1s;}

#mainVisual .slick-dots {position:absolute;bottom:6rem;left:50%;transform:translateX(-50%);width:70rem;}
#mainVisual .slick-dots li {display:inline-block;position:relative;width:5rem;height:0.2rem;background:var(--lc);border-radius:0.1rem;margin-right:0.2rem;overflow:hidden;}

#mainVisual .slick-dots li:after {content:"";display:block;position:absolute;top:0;left:0;width:0;height:100%;background:var(--mc);}
#mainVisual .slick-dots li.slick-active:after {width:100%;transition:3s;}

#mainVisual .slick-dots button {display:none;}


#mainVisual .search_box {display:flex;position:absolute;bottom:-5rem;left:50%;transform:translateX(-50%);width:70rem;height:10rem;border-radius:1rem;overflow:hidden;box-shadow:0.2rem 0.2rem 5rem var(--dd);}
#mainVisual .search_box>div {flex:1;padding:2.5rem 3rem;}

#mainVisual .search_box .left {background:var(--lc);}
#mainVisual .search_box .right {background:var(--mc);color:var(--lc);}

#mainVisual .search_box .case {display:flex;align-items:center;}
#mainVisual .search_box .case>a {display:block;width:5rem;height:5rem;background:var(--dd) url(../img/icon.png) -10rem 0rem;margin-right:2rem;text-indent:-9999rem;border-radius:50%;transition:0.5s;}
#mainVisual .search_box .case>a:hover {background:var(--dd) url(../img/icon.png) -10rem -10rem;}

#mainVisual .search_box .txt h3 {font-size:1.75rem;font-weight:700;margin-bottom:0.5rem;}
#mainVisual .search_box .txt p {font-size:0.75rem;font-weight:300;margin-bottom:0.5rem;}
#mainVisual .search_box .txt i {padding:0.25rem;background:var(--mc);color:var(--lc);margin-left:1rem;border-radius:50%;transition:0.5s;vertical-align:middle;}
#mainVisual .search_box .txt a:hover i {transform:rotate(180deg);}

#mainVisual .search_box .right h3 {font-size:1rem;margin-bottom:1rem;}
#mainVisual .search_box .right form {display:flex;border:0.05rem solid var(--lc);padding: 0.5rem 1rem;border-radius:0.5rem;}
#mainVisual .search_box .right form input[type="search"] {border:none;outline:none;background:transparent;}
#mainVisual .search_box .right form input[type="search"]::placeholder {color:var(--lc);}

#mainVisual .search_box .right form button {font-size:1.5rem;margin-left:auto;}





#solution {padding:10rem 0 10rem 0;text-align:center;}
#solution h2 {font-size:2rem;font-weight:700;}
#solution h2:after {content:"";display:block;width:5rem;height:0.2rem;background:var(--mc);margin:0.5rem auto 1rem auto;}
#solution p {font-size:0.75rem;font-weight: 300;margin-bottom:2rem;}
#solution .container {display:flex;flex-flow:row wrap;width:60rem;margin:0 auto;}
#solution .container figure {width:30rem;height:17.5rem;overflow:hidden;position:relative;}
#solution .container figure:after {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left, transparent, var(--mc));opacity:0;transition:0.5s;}
#solution .container figure .txt {position:absolute;top:12rem;left:2.5rem;width:100%;height:100%;text-align:left;color:var(--lc);z-index:999;transition:0.5s;}

#solution .container figure:hover:after {opacity:0.4;}
#solution .container figure:hover .txt {top:7rem;}
#solution .container figure:hover .txt h3:after {width:10rem;}

#solution .container figure .txt h3 {font-size:1.65rem;font-weight:700;}
#solution .container figure .txt p {font-size:0.75rem;font-weight:300;line-height:1.45;}
#solution .container figure .txt h3:after {content:"";display:block;width:2rem;height:0.1rem;background:var(--lc);margin:1.8rem 0;transition:0.5s;}

#solution .container figure:nth-child(1) {transform:translate(-10rem,5rem);opacity:0;transition:0.3s;}
#solution .container figure:nth-child(2) {transform:translate(0,-10rem);opacity:0;transition:0.3s;}
#solution .container figure:nth-child(3) {transform:translate(0,10rem);opacity:0;transition:0.3s;}
#solution .container figure:nth-child(4) {transform:translate(10rem,0);opacity:0;transition:0.3s;}

#solution.on .container figure:nth-child(1) {transform:translate(0,5rem);opacity:1;transition:0.3s;}
#solution.on .container figure:nth-child(2) {transform:translate(0,0);opacity:1;transition:0.3s 0.3s;}
#solution.on .container figure:nth-child(3) {transform:translate(0,5rem);opacity:1;transition:0.3s 0.5s;}
#solution.on .container figure:nth-child(4) {transform:translate(0,0);opacity:1;transition:0.3s 0.8s;}





#product {padding:5rem 0;background:#D1E0E5;text-align:center;}
#product h2 {font-size:2rem;font-weight:700;}
#product h2:after {content:"";display:block;width:5rem;height:0.2rem;background:var(--mc);margin:0.5rem auto 1rem auto;}
#product p {font-size:0.75rem;font-weight: 300;margin-bottom:2rem;}


#product .container figure {position:relative;width:27.5rem;height: 17.5rem;margin:0 0.5rem;}
#product .container figure .case {position:absolute;top:50%;left:0;width:100%;height:10rem;transform:translateY(-50%);border:4px solid transparent;transition:0.5s;}

#product .container figure .item01 {background:url(../img/img_spec1.jpg) no-repeat center center/cover;}
#product .container figure .item02 {background:url(../img/img_spec2.jpg) no-repeat center center/cover;}
#product .container figure .item03 {background:url(../img/img_spec3.jpg) no-repeat center center/cover;}
#product .container figure .item04 {background:url(../img/img_spec4.jpg) no-repeat center center/cover;}
#product .container figure .item05 {background:url(../img/img_spec5.jpg) no-repeat center center/cover;}

#product .container figure:hover .case {height:100%;border:4px solid var(--lc);}
#product .container figure .case .txt {display:block;text-align:left;color:var(--lc);padding:2.5rem;width:100%;}
#product .container figure h3 {font-size:1.5rem;font-weight:700;margin-bottom:1rem;}
#product .container figure strong {display:block;font-size:0.75rem;font-weight:300;margin-bottom:1rem;}

#product .container figure a {display:block;}
#product .container figure span {display:inline-block;width:0;overflow:hidden;white-space:nowrap;transition:0.5s;}
#product .container figure:hover span {width:5rem;}

#product .container figure.on .case {height:100%;border:4px solid var(--lc)}
#product .container figure.on span {width:5rem;}



#showroom {background:#f4f4f4;}
#showroom .container {display:flex;}
#showroom .container .left {position:relative;flex:7;height:23rem;background:url(../img/img_service_showroom.jpg) no-repeat center center/100% 100%;}
#showroom .container .right {flex:5;height:23rem;padding:4rem 3rem;}

#showroom .container .left .txt {position:absolute;bottom:1rem;left:5rem;color:var(--lc);transition:0.5s;}
#showroom .container .left:hover .txt {bottom:4rem;}
#showroom .left h3 {font-size:1.65rem;font-weight:700;}
#showroom .left h3:after {content:"";display:block;width:2rem;height:0.15rem;background:var(--lc);margin:2rem 0;transition:0.5s;}
#showroom .left:hover h3:after {width:7rem;}
#showroom .left p {font-size:0.75rem;font-weight: 300;line-height:1.45;margin-bottom:2rem;}
#showroom .left a {display:block;}
#showroom .left span {display:inline-block;width:0;overflow:hidden;white-space:nowrap;transition:0.5s;}
#showroom .left:hover span {width:5rem;}

#showroom .right h3 {font-size:1.65rem;font-weight:700;}
#showroom .right h3 a {display:block;float:right;font-size:0.75rem;font-weight:300;border:1px solid var(--dd);height:1.6rem;border-radius:0.8rem;line-height:1.5rem;padding:0 2rem;}

#showroom .right .list li {border-bottom:1px solid var(--dd);}
#showroom .right .list li a {display:block;line-height:3.5rem;}
#showroom .right .list li a span {float:right;}




#service {padding:5rem 0;}
#service h2 {position:absolute;top:0;left:0;z-index:-9999;font-size:0;width:0;height:0;line-height:0;overflow:hidden;text-indent:-9999px;}
#service .container {text-align:center;font-size:0;}
#service .container figure {display:inline-block;font-size:1rem;width:10rem;position:relative;}

#service .container figure strong {display:block;width:5rem;height:5rem;margin:0 auto 1rem auto;}
#service .container figure .icon01 strong {background:url(../img/icon.png) -5rem 0;}
#service .container figure .icon02 strong {background:url(../img/icon.png) 0 0;}
#service .container figure .icon03 strong {background:url(../img/icon.png) -10rem 0;}
#service .container figure .icon04 strong {background:url(../img/icon.png) -15rem 0;}

#service .container figure~figure:after {content:"";display:block;width:0.05rem;height:2rem;background:var(--dd);top:2rem;left:0;position:absolute;}





#footer {background:#f3f3f3;}

#footer .top {display:flex;justify-content:space-between;width:60rem;margin:0 auto;padding:1rem 0;position:relative;}
#footer .bottom {display:flex;justify-content:space-between;width:60rem;margin:0 auto;padding:1rem 0 2rem 0;}
#footer .top>ul {font-size:0;}
#footer .top>ul li {display:inline-block;font-size:0.75rem;margin:0 2rem 0 0;}
#footer .top>ul li:nth-child(1) {color:var(--mc);}

#footer hr {border-top:1px solid var(--dd);}

#footer .top .link {position:absolute;bottom:1rem;right:0;width:8rem;text-align:center;background:var(--dc);color:var(--lc);line-height:2;}
#footer .top .link ul {display:none;}
#footer .top .link ul>li {border-bottom:1px solid rgba(255,255,255,0.2);}

#footer .bottom strong {display:block;font-size:0.65rem;line-height:2;text-align:right;}





#toTop {display:none;position:fixed;bottom:10rem;right:5rem;}
#toTop i {font-size:1.5rem;padding:0.8rem;background:var(--lc);border:2px solid var(--mc);border-radius:50%;}


#popUp {position:fixed;top:10rem;left:10rem;border:0.2rem solid var(--mc);background:var(--lc);text-align:center;padding:3rem 1.5rem;line-height:1.45;cursor:pointer;}
#popUp p {margin-bottom:2rem;}
#popUp a {display:block;width:7.5rem;background:var(--mc);color:var(--lc);color:var(--lc);margin:0 auto;line-height:2;}