:root {
    --mc : #0F97DD;
    --lc : #ffffff;
    --dc : #444444;
    --dd : #dddddd;
};

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


#wrap {min-width:95rem;}


#header {display:flex;position:fixed;top:0;left:0;width:100%;min-width:95rem;padding:0 3rem;line-height:5rem;font-size:1rem;color:var(--lc);transition:0.4s;z-index:999;}
#header.on {color:var(--dc);background:var(--lc);}
#header:hover {color:var(--dc);background:var(--lc);}

#header h1>a {display:block;font-size:0;height:5rem;width:20rem;background:url(../img/logo.png) no-repeat left center;}
#header.on h1>a {background:url(../img/logo_on.png) no-repeat left center;}
#header:hover h1>a {background:url(../img/logo_on.png) no-repeat left center;}

#header .gnb {margin-left:auto;}
#header .gnb>ul {display:flex;gap:2rem;}
#header .gnb>ul>li>a {display:block;}

#header .search {margin-left:10rem;}

#header .search_form {display:none;position:absolute;top:100%;left:0;width:100%;background:rgba(0,0,0,0.5);color:var(--lc);line-height:4rem;text-align:center;}
#header .search_form form {display:inline-block;border-bottom:1px solid var(--lc);padding:0.5rem;line-height:1.5;}
#header .search_form input {background:transparent;outline:none;border:none;}
#header .search_form input:focus {color:var(--lc);}

#main_visual {position:relative;}
#main_visual figure {position:relative;height:40rem;background-position:center center;background-size:110%;background-repeat:no-repeat;}
#main_visual figure.on {background-size:100%;transition:2s 1.5s;}
#main_visual .itm01 {background-image:url(../img/img_visual1.jpg);}
#main_visual .itm02 {background-image:url(../img/img_visual2.jpg);}
#main_visual .itm03 {background-image:url(../img/img_visual3.jpg);}

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

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

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

#main_visual .slick-dots {position:absolute;bottom:7.5rem;left:50%;transform:translateX(-50%);width:70rem;}
#main_visual .slick-dots li {display:inline-block;position:relative;width:5rem;height:0.2rem;background:var(--lc);border-radius:0.1rem;margin-right:0.2rem;}
#main_visual .slick-dots li:after {content:"";display:block;position:absolute;top:0;left:0;width:0;height:100%;background:var(--mc);}
#main_visual .slick-dots li.slick-active:after {width:100%;transition:4s 1s;}
#main_visual .slick-dots button {display:none;}

#main_visual .search_box {display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%, 50%);width:70rem;height:10rem;border-radius:1rem;overflow:hidden;box-shadow:0px 13px 27px -5px rgba(50, 50, 93, 0.25), 0px 8px 16px -8px rgba(0, 0, 0, 0.3);}
#main_visual .search_box>div {flex:1;padding:2.5rem 5rem;}
#main_visual .search_box .left {background:var(--lc);}
#main_visual .search_box .right {background:var(--mc);color:var(--lc);}

#main_visual .search_box .case {display:flex;align-items:center;}
#main_visual .search_box .case>a {display:block;width:5rem;height:5rem;background:url(../img/iconset.png) -10rem -5rem;margin-right:2rem;text-indent:-9999rem;border-radius:50%;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;transition:0.5s;}

#main_visual .search_box .case>a:hover {background:url(../img/iconset.png) -10rem -15rem;}

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

#main_visual .search_box .right h3 {font-size:1.2rem;font-weight:700;margin-bottom:1rem;}
#main_visual .search_box .right form {display:flex;justify-content:space-between;border:0.05rem solid var(--lc);padding:0.5rem 1rem;border-radius:0.5rem;}
#main_visual .search_box .right form input[type="search"] {background:none;border:none;width:100%;color:var(--lc);}
#main_visual .search_box .right form input[type="search"]::placeholder {color:var(--lc);}
#main_visual .search_box .right form input[type="search"]:focus::placeholder {color:transparent;}
#main_visual .search_box .right form input[type="search"]:focus {font-size:1rem;}
#main_visual .search_box .right form input[type="search"]::-webkit-search-cancel-button {display:none;}
#main_visual .search_box .right form button {font-size:1.5rem;padding:0;margin-left:1rem;}


#solution {padding:10rem 0;background:#f7f7f7;text-align:center;}
#solution>h2 {font-size:2rem;font-weight:700;}
#solution>h2:after {content:"";display:block;width:0;height:0.15rem;background:var(--mc);margin:0.5rem auto 1rem auto;transition:0.5s;}
#solution.on>h2:after {width:5rem;}
#solution>p {font-size:0.75rem;font-weight:300;margin-bottom:1.5rem;}
#solution .container {display:flex;flex-wrap:wrap;width:60rem;margin:0 auto;}

#solution .container>figure {position:relative;flex:1 50%;overflow:hidden;transition:0.5s;}
#solution .container>figure:after {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right, var(--mc), transparent);opacity:0;transition:0.5s;}
#solution .container>figure>img {width:100%;}

#solution .container>figure .txt {position:absolute;top:12.5rem;left:0;width:100%;height:100%;padding:0 2rem;text-align:left;color:var(--lc);transition:0.5s;z-index:999;}
#solution .container>figure .txt h3 {font-size:1.75rem;font-weight:700;}
#solution .container>figure .txt h3:after {content:"";display:block;width:2rem;height:0.1rem;background:var(--lc);margin:1.5rem 0;transition:0.5s;}
#solution .container>figure .txt p {font-size:0.75rem;font-weight:300;line-height:1.4;}

#solution .container>figure:hover:after {opacity:0.5;}
#solution .container>figure:hover .txt {top:9rem;}
#solution .container>figure:hover .txt h3:after {width:10rem;}

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




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

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

#product .container figure .itm01 {background:url(../img/img_spec1.jpg) no-repeat center center/cover;}
#product .container figure .itm02 {background:url(../img/img_spec2.jpg) no-repeat center center/cover;}
#product .container figure .itm03 {background:url(../img/img_spec3.jpg) no-repeat center center/cover;}
#product .container figure .itm04 {background:url(../img/img_spec4.jpg) no-repeat center center/cover;}
#product .container figure .itm05 {background:url(../img/img_spec5.jpg) no-repeat center center/cover;}

#product .container figure .case .txt {text-align:left;color:var(--lc);padding:1.5rem 2rem;}
#product .container figure .case .txt h3 {font-size:1.2rem;font-weight:700;margin-bottom:0.5rem;}
#product .container figure .case .txt p {font-size:0.75rem;font-weight:300;margin-bottom:0.7rem;line-height:1.2;}
#product .container figure .case .txt a {display:block;}
#product .container figure .case .txt span {display:inline-block;width:0;overflow:hidden;white-space:nowrap;transition:0.5s;}
#product .container figure:hover .case .txt span {width:5rem;}


#showroom {background:#f2f2f2;}
#showroom .container {display:flex;}
#showroom .left {position:relative;flex:7;height:23rem;background:url(../img/img_service_showroom.jpg) no-repeat center center/100% auto;transition:0.5s;}
#showroom .right {flex:5;height:23rem;}

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

#showroom .left:hover {background-size:110% auto;}
#showroom .left:hover .txt {bottom:4rem;}
#showroom .left:hover .txt h3:after {width:10rem;}
#showroom .left:hover .txt span {width:5rem;}

#showroom .right {padding:3rem;}
#showroom .right h3 {font-size:1.75rem;font-weight:700;padding:1rem 0;}
#showroom .right h3 a {float:right;display:block;font-size:0.75rem;font-weight:400;border:1px solid var(--dd);line-height:1.6rem;border-radius:0.8rem;padding:0 1rem;}
#showroom .right h3 a i {margin-left:0.5rem;}

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


#service {padding:5rem 0;}
#service h2 {display:block;position:absolute;top:0;left:0;z-index:-9999;width:0;height:0;font-size: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;background:url(../img/iconset.png);margin:0 auto 1rem auto;}
#service .container figure .icon01 strong {background-position:-100px 0;}
#service .container figure .icon02 strong {background-position:0 0;}
#service .container figure .icon03 strong {background-position:-200px 0;}
#service .container figure .icon04 strong {background-position:-300px 0;}

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


#footer {background:#f3f3f3;}
#footer .top {position:relative;display:flex;justify-content:space-between;width:60rem;margin:0 auto;padding:1rem 0;}
#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:0.5rem;right:0;width:7rem;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 #555;}
#footer .top .link i {transition:0.5s;}
#footer .top .link i.on {transform:rotate(180deg);}

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


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


#pop_up {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.6;cursor:grab;}
#pop_up:active {cursor:grabbing;}
#pop_up p {margin-bottom:2rem;}
#pop_up a {display:block;margin:0 auto;width:7.5rem;line-height:2;background:var(--mc);color:var(--lc);}