@charset "utf-8";

/*============================
#js_loading
============================*/
#js_loading { width: 100%; height: 100%; background: #443d3A; position: fixed; top: 0; left: 0; z-index: 20000; }

.spinner { width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -20px; }
.spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s  }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/*============================
body
============================*/
body { min-width: 1200px; background: url("../../imageFile/global/bg_main.png") repeat; position: relative; }

/*============================
#header
============================*/
#header { position: relative; z-index: 10; }

/*============================
#headerPC
============================*/
#headerPC { position: absolute; left: 0; top: 0; width: 100%; }
#headerPC .logo { position: absolute; left: 50px; top: 50px; }
#headerPC .logo a { display: block; }
#headerPC .logo a .tagline { font-weight: bold; line-height: 1.5; color: #fff; }
#headerPC .logo a .image { margin-top: -10px; }
#headerPC .logo a .image img { width: 300px; height: auto; }
#headerPC .logo a:hover .image img { transform: scale(1); }
#headerPC .topMenu { position: absolute; display: inline-block; right: 50px; top: 65px; }
#headerPC .topMenu .global-nav {}
#headerPC .topMenu .global-nav ul {}
#headerPC .topMenu .global-nav ul li { float: left; display: inline-block; margin-left: 20px; }
#headerPC .topMenu .global-nav ul li:first-child { margin-left: 0; }
#headerPC .topMenu .global-nav ul li:nth-child(2) { width: 90px; }
#headerPC .topMenu .global-nav ul li li { display: block; height: 0; overflow: hidden; transition: .5s; }
#headerPC .topMenu .global-nav ul li li:nth-child(2) { margin: 30px auto; }
#headerPC .topMenu .global-nav ul li li.works { text-align: center; width: 200px; padding-right: 30px; margin-left: -15px; }
#headerPC .topMenu .global-nav ul li li.works a { margin-right: 40px;}
#headerPC .topMenu .global-nav ul li li.renovation a { margin-left: 12px; }
#headerPC .topMenu .global-nav ul li:hover > ul > li { height: 30px; overflow: visible; padding-top: 10px; }
#headerPC .topMenu .global-nav ul li:hover > ul > li a {}
#headerPC .topMenu .global-nav ul li:hover > ul > li a .en  {}
#headerPC .topMenu .global-nav ul li a { display: block; color: #fff; line-height: 1.5; text-align: center; }
#headerPC .topMenu .global-nav ul li a .ja { font-size: 0.75em; font-weight: bold; }
#headerPC .topMenu .global-nav ul li a .en { font-size: 1.125em; letter-spacing: 0.1em; }
#headerPC .topMenu .global-nav ul li a {}

/*============================
#headerSP
============================*/
#headerSP { display: none; }
#headerSP .sideMenu {}
#headerSP .sideMenu nav.global-nav {}
#headerSP .sideMenu nav.global-nav ul.global-nav__list {}
#headerSP .sideMenu nav.global-nav ul.global-nav__list li.global-nav__item {}
#headerSP .sideMenu nav.global-nav ul.global-nav__list li.global-nav__item a {}
#headerSP .sideMenu nav.global-nav ul.global-nav__list li.global-nav__item a.linkContact {}
#headerSP .sideMenu #js-hamburger.hamburger {}
#headerSP .sideMenu #js-hamburger.hamburger span.hamburger__line.hamburger__line--1 {}
#headerSP .sideMenu #js-hamburger.hamburger span.hamburger__line.hamburger__line--2 {}
#headerSP .sideMenu #js-hamburger.hamburger span.hamburger__line.hamburger__line--3 {}
#headerSP .sideMenu #js-black-bg.black-bg {}

/*============================
#bannerArea
============================*/
#bannerArea { padding: 60px 0 100px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%); }
#bannerArea ul {}
#bannerArea ul li { float: left; width: 530px; margin-right: 40px; margin-top: 40px; }
#bannerArea ul li:nth-child(2n) { margin-right: 0; }
#bannerArea ul li a { display: block; width: 530px; height: 160px; overflow: hidden; }
#bannerArea ul li a:hover img { transform: scale(1); }
#bannerArea .pageTop { position: absolute; right: 0; bottom: -100px; }
#bannerArea .pageTop a { display: block; width: 40px; height: 30px; background: url("../../imageFile/global/icon_top.svg") no-repeat center top; background-size: 40px auto; }

/*============================
#footer
============================*/
#footer { color: #fff; background: #443d3a; background: linear-gradient(-90deg, #3a3431, #514a47); padding: 60px; position: relative; }
#footer .linkArea { position: relative; }
#footer .linkArea .link {}
#footer .linkArea .link ul {}
#footer .linkArea .link ul li { float: left; display: inline-block; margin-left: 12px; }
#footer .linkArea .link ul li:first-child { margin-left: 0; }
#footer .linkArea .link ul li a { display: block; font-size: 0.875em; letter-spacing: 0.1em; color: #fff; }
#footer .linkArea .subLink { position: absolute; right: 0; top: 0; }
#footer .linkArea .subLink ul {}
#footer .linkArea .subLink ul li { float: left; display: inline-block; margin-left: 10px;}
#footer .linkArea .subLink ul li a { display: block; font-size: 0.75em; font-weight: bold; color: #fff; }
#footer .contentArea { position: relative; margin-top: 40px; }
#footer .contentArea .logo {}
#footer .contentArea .logo a { display: block; }
#footer .contentArea .logo a .tagline { font-weight: bold; line-height: 1.5; color: #fff; }
#footer .contentArea .logo a .image { margin-top: -10px; }
#footer .contentArea .logo a .image img { width: 400px; height: auto; }
#footer .contentArea .logo a:hover .image img { transform: scale(1); }
#footer .contentArea .info { margin-top: 30px; }
#footer .contentArea .info .address { color: #fff; line-height: 1.5; font-size: 0.875em; }
#footer .contentArea .banner { position: absolute; top: 0; left: 460px; }
#footer .contentArea .banner a { display: inline-block; width: 320px; height: auto; margin-right: 10px; overflow: hidden; }
#footer .contentArea .banner a img { width: 100%; height: auto; }
#footer .contentArea .banner a:hover img { transform: scale(1); }
#footer .contentArea .snsLink { position: absolute; top: 0; right: 0; width: 140px; line-height: 1.5; }
#footer .contentArea .snsLink ul {}
#footer .contentArea .snsLink ul li { float: left; width: 40px; margin-right: 10px; }
#footer .contentArea .snsLink ul li:nth-child(3n) { margin-right: 0; }
#footer .contentArea .snsLink ul li a {}
#footer .contentArea .snsLink ul li a img { width: 40px; height: 30px; }
#footer .contentArea .copyright { color: #fff; line-height: 1.5; font-size: 0.875em; margin-top: -40px; text-align: right; opacity: 0.75; }

/*============================
#sidebar
============================*/
#sidebar { position: fixed; right: 0; top: 50%; margin-top: -180px; z-index: 9; }
#sidebar a.mainAction { display: block; border: solid 5px #969aad; border-bottom: none; padding: 45px 15px 18px; text-align: center; background: #666a7d; background: linear-gradient(180deg, #767a8d, #666a7d); color: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); vertical-align: top; font-weight: bold; letter-spacing: 0.1em; position: relative; transition: all 250ms ease-out; }
#sidebar a.mainAction::before { content:""; position: absolute; top: 18px; left: 50%; margin-left: -10px; display: block; width: 20px; height: 20px; background: url("../../imageFile/global/icon_mail.svg") no-repeat center; background-size: 20px auto; }
#sidebar a.mainAction:hover { border-color: #666a7d; opacity: 1!important; }

#sidebar a.subAction { display: block; border: solid 5px #9d9386; border-top: none; background: #7d7366; background: linear-gradient(180deg, #8d8376, #6d6356); color: #fff; padding: 15px; height: 60px; text-align: center; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); vertical-align: top; font-weight: bold; letter-spacing: 0.1em; position: relative; transition: all 250ms ease-out; }
#sidebar a.subAction::before { content:""; position: absolute; top: 50%; left: 50%; margin: -10px; margin-top: -10px; display: block; width: 20px; height: 20px; background: url("../../imageFile/global/icon_tel.svg") no-repeat center; background-size: 20px auto; }
#sidebar a.subAction:hover { border-color: #7d7366; opacity: 1!important; }