@charset "UTF-8";
html.fixed, body.fixed {overflow:hidden;}
.skip-navigation {position:fixed; left:0; top:0; width:100%; z-index:100}
.skip-navigation li a {position:absolute; top:-100px; width:100%; text-align:center; font-size:1.4rem; line-height:1.5em; padding:5px 0; background:#000; color:#fff}
.skip-navigation li a:focus {top:0;}
#wrapper {padding-top:101px; min-width:1280px; position: relative;}
#header {position:fixed; z-index:10; left:0; top:0; width:100%; height:101px; background-color:#fff}
#header .inner-header {position:relative; max-width:100%; min-width:1200px; margin:0 40px}
#header .inner-header:after {content:''; display:block; clear:both}
#header .inner-header .logo {position:absolute; z-index:1; left:0; top:25px}
#header .inner-header .logo a {display:block; width:68px; height:50px; background:url(../../pc/images/common/logo-header.png);}
#header .inner-header .util {position: absolute; top:0; right:0; padding-top:34px}
#header .inner-header .util > * {float:left;}
#header .inner-header .util .lang {height:32px; padding:0 10px; /* margin-right:30px; */ font:300 1.6rem/33px 'Roboto', sans-serif}
#header .inner-header .util .toggle {position:relative; width:22px; height:32px; border:0; background:transparent}
#header .inner-header .util .toggle:before,
#header .inner-header .util .toggle:after {content:'';}
#header .inner-header .util .toggle:before,
#header .inner-header .util .toggle:after,
#header .inner-header .util .toggle .bar {position: absolute; left:50%; top:50%; margin-left:-11px; width:100%; height:2px; background:#1370d8; -webkit-transition:all 200ms;; transition:all 200ms}
#header .inner-header .util .toggle .bar {margin-top:-1px}
#header .inner-header .util .toggle:before {margin-top:-6px}
#header .inner-header .util .toggle:after {margin-top:4px}
#header .inner-header .util .toggle.active:before {transform:rotate(45deg); margin-top:-1px}
#header .inner-header .util .toggle.active:after {transform:rotate(-45deg); margin-top:-1px}
#header .inner-header .util .toggle.active .bar {opacity:0;}
#gnb {position:relative; text-align:center; height:101px; margin:0 -40px; background-color:#fff; -webkit-transition:all 200ms;; transition:all 200ms;}
#gnb:before {content:''; position: absolute; left:0; top:100px; width:100%; border-top:1px solid #e5e5e5;}
#gnb > ul {font-size:0;}
#gnb > ul > li {display:inline-block; position:relative; padding:30px 40px; background:#fff;}
#gnb > ul > li > a {display:block; font-size:1.6rem; color:#444; line-height:40px; -webkit-transition:color 200ms; transition:color 200ms;}
#gnb > ul > li ul {position:absolute; width:100%; background: #fff; /* top:calc(100% + 1px); */ top:-1000px; left:0; opacity:0; padding:30px 0 40px; text-align:center; -webkit-transition:opacity 400ms;; transition:opacity 400ms; -webkit-transition-delay:100ms; transition-delay:100ms}
#gnb > ul > li ul li {position:relative; font-size:0;}
#gnb > ul > li ul li ~ li {margin-top:10px}
#gnb > ul > li ul li a {font-size:1.5rem; color:#777; line-height:30px}
#gnb > ul > li:hover > a,
#gnb > ul > li a:hover,
#gnb > ul > li a:focus {color:#095dba}
#gnb > ul > li ul li a:hover,
#gnb > ul > li ul li a:focus {text-decoration:underline;}
#gnb.active {box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);}
#gnb.active > ul > li > ul {top:calc(100% + 1px); opacity:1}

#footer {background-color:#222}
#footer .group-footer ~ .group-footer {border-top:1px solid #393939}
#footer .group-footer .inner-footer {min-width:1280px; max-width:1400px; margin:0 auto; padding:0 100px}
#footer .group-footer .inner-footer:after {content:''; display:block; clear:both}
#footer .group-footer .menu {float:left; padding:20px 0}
#footer .group-footer .menu:after {content:''; display:block; clear:both}
#footer .group-footer .menu li {float:left}
#footer .group-footer .menu li ~ li {margin-left:40px;}
#footer .group-footer .menu li a {display:block; line-height:34px; font-size:1.6rem; font-weight:300; color:#fff}
#footer .group-footer .family {float:right; width:230px; position:relative;}
#footer .group-footer .family a {color:#fff}
#footer .group-footer .family > a {display:block; padding:0 20px; font-family:'Roboto', sans-serif; font-size:1.6rem; font-weight:300; line-height:74px; border:1px solid #393939; border-width:0 1px}
#footer .group-footer .family > a:before,
#footer .group-footer .family > a:after {content:''; position: absolute; top:50%; right:20px; width:16px; height:1px; background-color:#666;}
#footer .group-footer .family > a:after {transform:rotate(90deg);}
#footer .group-footer .family ul {position:absolute; left:0; bottom:100%; width:100%; max-height:0; overflow:hidden; background-color:#222; -webkit-transition:all 600ms; transition:all 600ms; /* border:1px solid #393939 */}
#footer .group-footer .family ul li ~ li {border-top:1px solid #393939}
#footer .group-footer .family ul li a {display:block; padding:0 20px; line-height:36px; font-size:1.4rem;}
#footer .group-footer .family.active ul {max-height:999px}
#footer .group-footer .copyright {padding:20px 0; font-size:1.4rem; line-height:30px; color:#777; font-weight:300;}

#content {min-height:300px}

.btn-top {position:fixed; z-index:1000; bottom:0; right:0; width:60px; height:60px; font-size:0; text-indent:-9999px; background:rgba(0,0,0,.8) url(../../pc/images/main/btn-top.png) center center no-repeat; background-size:13px 17px}