/*
 * Common.css
 */

/*--------------------------------------
 Base
--------------------------------------*/

html,
button,
input,
select,
textarea {
 color: #333;
 font-family: 'Hiragino Kaku Gothic Pro',Meiryo,Helvetica,Arial,sans-serif;
}

html {
 font-size: 62.5%;
}

body {
 background: url(../img/texture_body_01.png);
 color: #333;
 font-size: 12px;
 font-size: 1.2rem;
 padding: 0;
}

.global-header,
.global-content,
.global-footer {
 width: 100%;
}

.global-header > .container,
.global-content > .container,
.global-footer > .container {
 margin: 0 auto;
 padding: 0;
 position: relative;
 width: 960px;
}

/* Typography
--------------------------------------*/

/* Link */

a:hover,
a:focus {
 color: inherit;
}

a.hover:hover img {
 filter: alpha(opacity=80);
 opacity: 0.8;
}

/*--------------------------------------
 Header Area
--------------------------------------*/

.global-header {
 background: url(../img/texture_header_01.png) repeat-x 0 0;
 height: 60px;
 position: fixed;
  top: 0;
  left: 0;
 z-index: 100;
}

.global-header h1 {
 margin: 0;
 padding: 7px 0 0;
}

.header-utility {
 position: absolute;
  top: 7px;
  right: 0;
}

/* Global Nav
--------------------------------------*/

.global-nav {
 margin-left: -480px;
 position: fixed;
  top: 110px;
  left: 50%;
 z-index: 10;
}

.global-nav > .nav {
 margin-left: 5px;
 width: 169px;
}

.global-nav > .nav > li > a {
 background: no-repeat 0 0;
 display: block;
 outline: 0;
 padding: 0;
}

.global-nav > .nav > li > a:hover,
.global-nav > .nav > li > a:focus {
 background: none;
}

.global-nav > .nav > li.active.nav_01 a {
 background-image: url(../img/nav_global_01_on.png);
}

.global-nav > .nav > li.active.nav_02 a {
 background-image: url(../img/nav_global_02_on.png);
}

.global-nav > .nav > li.active.nav_03 a {
 background-image: url(../img/nav_global_03_on.png);
}

.global-nav > .nav > li.active img {
 visibility: hidden;
}

.global-nav > .nav > li.home.nav_01 a {
 background-image: none;
}

.global-nav > .nav > li.home.nav_01 img {
 visibility: visible;
}

/*--------------------------------------
 Content Area
--------------------------------------*/

.global-content {
 padding-top: 70px;
 background: url(../img/texture_content_01.png) repeat-x 0 55px fixed;
}

.global-content > .container {
 padding-left: 185px;
}

.global-content > .container > section {
 position: relative;
}

/* Content Lead
--------------------------------------*/

.content-lead {
 margin: 0 auto;
 position: relative;
 width: 100%;
}

/* Section
--------------------------------------*/

section {
 margin: 0 0 -100px;
 padding: 125px 0 100px;
}

section > h1 {
 margin: 0 auto 15px;
}

.section-content {
 background: url(../img/texture_section-content_01.png) no-repeat 0 0;
 height: 408px;
 position: relative;
}

.section-content .figure {
 padding: 30px 0 0;
 text-align: center;
}

/* #section-01
--------------------------------------*/

#section-01 .js-pager {
 position: absolute;
  top: 0;
  left: 0;
 z-index: 10;
}

#section-01 .js-pager > h2 {
 margin: 0;
}

#section-01 .js-pager > ul {
 background-color: #fff;
 height: 330px;
 padding: 10px 0 0;
 text-align: center;
}

#section-01 .js-pager > ul > li {
 margin: 0 0 10px;
}

#section-01 .js-slider {
 height: 408px;
 list-style: none;
 margin: 0;
 padding: 0;
 width: 775px;
}

#section-01 .js-control {
 position: absolute;
  bottom: 30px;
  left: 0;
 text-align: center;
 width: 100%;
}

#section-01 .js-control .pager {
 margin: 0 20px;
}

#section-01 .js-control a,
#section-01 .js-control span {
 background-color: transparent;
 border: none;
 border-radius: 0;
 padding: 0;
}

#section-01 .js-control .previous a,
#section-01 .js-control .next a {
 background-color: transparent;
 border: 0;
 overflow: hidden;
}

#section-01 .js-control .previous a:before,
#section-01 .js-control .next a:before {
 content: '';
 display: block;
 height: 150%;
 width: 0;
}

#section-01 .js-control .previous a {
 background: url(../img/pager_section-01_prev.png) no-repeat 0 0;
 display: block;
 height: 19px;
 overflow: hidden;
 width: 38px;
}

#section-01 .js-control .next a {
 background: url(../img/pager_section-01_next.png) no-repeat 0 0;
 display: block;
 height: 17px;
 overflow: hidden;
 width: 38px;
}

#section-01 .js-control .start {
 cursor: pointer;
}

/* #section-02
--------------------------------------*/

#section-02 .section-content {
 background-image: url(../img/texture_section-content_02.png);
}

#section-02 .js-pager {
 background: url(../img/texture_section-content_02.png) no-repeat 100% 0;
 position: absolute;
  top: 0;
  right: 0;
 z-index: 99;
}

#section-02 .js-pager ul {
 padding: 15px 10px 0 0;
}

#section-02 .js-pager a {
 background: no-repeat 0 0;
 display: block;
 outline: 0;
}

#section-02 .js-pager .active img {
 visibility: hidden;
}

#section-02 .js-pager .pager_01 .active {
 background-image: url(../img/pager_section-02_01_on.png);
}

#section-02 .js-pager .pager_02 .active {
 background-image: url(../img/pager_section-02_02_on.png);
}

#section-02 .js-pager .pager_03 .active {
 background-image: url(../img/pager_section-02_03_on.png);
}

#section-02 .js-pager .pager_04 .active {
 background-image: url(../img/pager_section-02_04_on.png);
}

#section-02 .js-pager .pager_05 .active {
 background-image: url(../img/pager_section-02_05_on.png);
}

#section-02 .js-pager .pager_06 .active {
 background-image: url(../img/pager_section-02_06_on.png);
}

#section-02 .slide-content h2 {
 margin: 0;
 padding: 20px 20px 5px;
}

#section-02 .js-control {
 position: absolute;
  bottom: 30px;
  left: 0;
 text-align: center;
 width: 100%;
}

#section-02 .js-control .pager {
 margin: 0 30px;
}

#section-02 .js-control a {
 background-color: transparent;
 border: none;
 border-radius: 0;
 padding: 0;
}

#section-02 .js-control .previous a,
#section-02 .js-control .next a {
 background-color: transparent;
 border: 0;
 overflow: hidden;
}

#section-02 .js-control .previous a:before,
#section-02 .js-control .next a:before {
 content: '';
 display: block;
 height: 150%;
 width: 0;
}

#section-02 .js-control .previous a {
 background: url(../img/pager_section-02_prev.png) no-repeat 0 0;
 display: block;
 height: 19px;
 overflow: hidden;
 width: 38px;
}

#section-02 .js-control .next a {
 background: url(../img/pager_section-02_next.png) no-repeat 0 0;
 display: block;
 height: 17px;
 overflow: hidden;
 width: 38px;
}

/* #section-03
--------------------------------------*/

/*#section-03 .media {
 padding: 40px;
}

#section-03 .media .pull-left {
 margin-right: 35px;
}*/

#section-03 .figure {
 padding: 45px 0 0;
 text-align: center;
}

/*--------------------------------------
 Footer Area
--------------------------------------*/

.global-footer {
 background-color: #00adef;
 box-shadow: 0 5px 0 rgba(141,207,239,0.4);
 height: 55px;
 position: fixed;
  bottom: 0;
  left: 0;
 z-index: 100;
}

.footer-utility ul {
 margin: 0;
 padding: 0;
}

.footer-utility li {
 display: inline-block;
 margin-right: 10px;
 padding-top: 10px;
}

.footer-copyright {
 color: #fff;
 font-size: 11px;
 font-size: 1.1rem;
 position: absolute;
  top: 20px;
  right: 0;
}

.texture-before {
 display: block !important;
 position: fixed;
  top: 0;
  left: 0;
}

.texture-after {
 display: block !important;
 position: fixed;
  bottom: 30px;
  left: 0;
}