@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

html {
  font-size: 62.5%; }

a {
  color: #000000;
  text-decoration: none; }

li {
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 12px;
  font-size: 1.2rem; }

:placeholder-shown {
  　color: #808080; }

::-webkit-input-placeholder {
  color: #808080; }

:-moz-placeholder {
  color: #808080;
  opacity: 1; }

body#index {
  color: #000000;
  font: 13px 'Work Sans','Noto Sans','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"游ゴシック",YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1; }
  body#index img {
    width: 100%;
    vertical-align: bottom; }
  body#index header {
    width: 100%;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 0px; }
    body#index header h1 {
      width: 43px;
      height: 43px;
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -22px; }
      body#index header h1 svg {
        width: 43px;
        height: 43px; }
      body#index header h1 .st0 {
        fill: #fff; }
  body#index footer {
    margin-top: 40px; }
    body#index footer #btm p.copy {
      width: 100%;
      text-align: center;
      font-size: 10px;
      font-size: 1rem; }
  body#index footer {
    width: 100%;
    position: relative;
    z-index: 2; }
    body#index footer .footer_inner {
      padding: 0px; }
    body#index footer #footer_nav {
      width: 87.2%;
      margin: auto; }

    footer #footer_nav a.fnavs {
      width: 100%;
      height: 48px;
      line-height: 48px;
      box-sizing: border-box;
      border: 1px solid #333333;
      display: block;
      text-align: center;
      color: #fff;
      font-size: 13px;
      font-size: 1.3rem;
    }
    footer #footer_nav a.fnavs + a.fnavs {
      border-top:none;
    }

    footer #footer_nav a.fnavs .icon, footer #footer_nav a.fnavs .icon svg {
      width: 13px;
      height: 13px;
    }
    footer #footer_nav a.fnavs svg .st0 {
      fill: #fff;
    }
    footer #footer_nav a.nav_global--ip {
      font-size:1.1rem;
    }
    footer #footer_nav a.nav_global--ip .icon, footer #footer_nav a.nav_global--ip .icon svg {
      width: 16px;
      height: 16px;
    }

    body#index footer #nav_info {
      margin-top: 30px;
      margin-bottom: 28px; }
      body#index footer #nav_info ul {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-top: 1px solid #333;
        border-left: 1px solid #333; }
        body#index footer #nav_info ul li {
          width: calc(50% - 1px);
          border-right: 1px solid #333;
          border-bottom: 1px solid #333;
          text-align: center;
          position: relative; }
          body#index footer #nav_info ul li a {
            color: #999;
            display: block;
            font-size: 10px;
            font-size: 1rem;
            position: relative; }
          body#index footer #nav_info ul li .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            display: block;
            top: 0px;
            left: 0px;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
            filter: alpha(opacity=80);
            -webkit-opacity: 0.8;
            -khtml-opacity: 0.8;
            -moz-opacity: 0.8;
            opacity: 0.8;
            background: #000; }
          body#index footer #nav_info ul li span {
            position: relative; }
        body#index footer #nav_info ul li, body#index footer #nav_info ul li a {
          height: 38px;
          line-height: 38px; }
    body#index footer #btm {
      width: 100%;
      background: #000;
      padding: 30px 0; }
      body#index footer #btm .col2 {
        width: 100%;
        text-align: center;
        margin-bottom: 30px; }
        body#index footer #btm .col2 h5, body#index footer #btm .col2 h6 {
          display: inline-block;
          vertical-align: top;
          line-height: 1; }
        body#index footer #btm .col2 h5 {
padding-top: 0.9px;
          width: 41px;
          height: 10px;
          margin-right: 15px; }
          body#index footer #btm .col2 h5 svg {
            width: 41px;
            height: 14px; }
            body#index footer #btm .col2 h5 svg path, body#index footer #btm .col2 h5 svg polygon {
              fill: #fff; }
        body#index footer #btm .col2 h6 {
          width: 73px;
          position: relative;
          /*top: 2px;*/ }
        body#index footer #btm .col2 h5 a, body#index footer #btm .col2 h6 a{vertical-align: middle;}
body#index footer #btm .col2 h5 a, body#index footer #btm .col2 h6 a{vertical-align: top;}
    body#index footer p.copy {
      color: #fff;
      font-weight: 300;
      text-align: center;
      width: 100%;
      font-size: 10px;
      font-size: 1rem; }
  body#index .nav ul li .icon .st0 {
    fill: none;
    stroke: #fff;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10; }


  body#index a.btn_search{
    width: 20px;
    height: 20px;
    opacity: .75;
    transition: .3s }
      body#index a.btn_search:hover,
      body#index header .block_search .search_input .icon svg:hover {
    opacity: 1;
    transition: .3s}



    body#index a.btn_search svg {
      width: 20px;
      height: 20px; }
    body#index a.btn_search .st0 {
      fill: none;
      stroke: #808080;
      stroke-width: 5;
      stroke-miterlimit: 10; }

.block_search {
  position: absolute;
  right: 4%;
  top: 0px;
  display: block;
  width: 92%;
  height: 21px;
  z-index: 10;
  max-width: 360px; }
  .block_search .search_input {
    position: absolute;
    overflow: hidden;
    right: 0px;
    top: 70px;
    width: 100%;
    height: 0px;
    line-height: 40px;
    /*@include transition(height, .3s, ease);*/
    background: #262626; }
    .block_search .search_input .icon {
      width: 56px;
      height: 40px;
      position: absolute;
      left: 0px;
      top: -2px; }
      .block_search .search_input .icon svg {
        width: 21px;
        height: 21px;
        position: relative;
        top: 8px;
        left: 12px; }
      .block_search .search_input .icon .st0 {
        fill: none;
        stroke: #808080;
        stroke-width: 5;
        stroke-miterlimit: 10; }
    .block_search .search_input input.input_search {
      height: 40px;
      padding-left: .5em;
      font-size: 14px;
      font-size: 1.4rem;
      width: calc(100% - 112px);
      color: #fff; }
  .block_search .inputs {
    position: relative;
    left: 56px; }
  .block_search a.btn_close {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 18px;
    right: 0px; }
    .block_search a.btn_close svg {
      width: 16px;
      height: 16px; }
    .block_search a.btn_close .st0 {
      fill: none;
      stroke: #808080;
      stroke-width: 5;
      stroke-miterlimit: 10; }
  .block_search.active {
    width: 92%;
    max-width: 360px; }
    .block_search.active .search_input {
      width: 100%;
      height: 40px; }
      .block_search.active .search_input .icon {
        display: block; }
    .block_search.active a.btn_search {
      display: none; }
    .block_search.active a.btn_close {
      display: block; }

a.btn_close {
  display: none; }

a.btn_search {
  width: 21px;
  height: 21px;
  position: absolute;
  right: 0px;
  top: 14px; }
  a.btn_search svg {
    width: 21px;
    height: 21px; }

.bg_search {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  z-index: 3;
  display: none;
  /*@include transition(opacity, .5s, ease);*/ }

#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  background: #000;
  z-index: 5;
  display: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  /*@include transition(opacity, .3s, ease);*/ }

.mode_search.show_menu header {
  background: none; }
  .mode_search.show_menu header h2,
  .mode_search.show_menu header .emergency {
    display: none; }
  .mode_search.show_menu header a.btn_menu {
    z-index: 10; }

.mode_search #bg {
  display: block; }

.mode_search main .slideshow {
  z-index: 1; }

.mode_search header {
  z-index: 10; }
  .mode_search header h1 {
    z-index: 10; }
  .mode_search header h2,
  .mode_search header a.btn_menu,
  .mode_search header .emergency {
    display: block; }

.mode_search #header_sub {
  display: none; }
  .mode_search #header_sub a.btn_close .st0 {
    stroke: #fff !important; }
  .mode_search #header_sub .block_search {
    display: none; }

.mode_search .bg_search {
  display: block; }

.mode_search.show_search #bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8; }

.mode_search.show_search .bg_search {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8; }

.scrolled.mode_search #header_sub {
  z-index: 10;
  display: block; }
  .scrolled.mode_search #header_sub .block_search {
    display: block; }

.scrolled.mode_search header .block_search {
  display: none; }

footer #footer_nav a.nav_global svg .st0 {
    fill: #fff;
}
footer #footer_nav a.nav_global .icon, footer #footer_nav a.nav_global .icon svg {
    width: 13px;
    height: 13px;
}

/* Small Devices, Tablets */
/* PC */
@media all and (min-width: 864px) {
  body#index #bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: url(../images/index/bg.png);
    z-index: 5;
    display: none; }
  body#index.mode_search #bg {
    display: block; }
  body#index header {
    width: 100%;
    height: 88px;
    z-index: 10; }
    body#index header h1 {
      width: 64px;
      height: 64px;
      top: 22px;
      margin-left: -32px; }
      body#index header h1 svg {
        width: 64px;
        height: 64px; }
    body#index header .block_search {
      position: absolute;
      right: 24px;
      top: 32px;
      display: block;
      width: 48px;
      height: 48px;
      /* @include transition(width, .2s, ease);*/ }
      body#index header .block_search .search_input {
        position: absolute;
        overflow: hidden;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: none;
        /*@include transition(width, .3s, ease);*/ }
        body#index header .block_search .search_input .icon {
          width: 56px;
          height: 48px;
          position: absolute;
          left: 0px;
          top: 0px;
          display: none; }
          body#index header .block_search .search_input .icon svg {
            width: 25px;
            height: 25px;
            position: relative;
            top: 8px;
            left: 12px;



            opacity: .75;
           transition: .3s }
          body#index header .block_search .search_input .icon .st0 {
            fill: none;
            stroke: #808080;
            stroke-width: 5;
            stroke-miterlimit: 10; }
        body#index header .block_search .search_input input.input_search {
          height: 48px;
          padding-left: .5em;
          font-size: 14px;
          font-size: 1.4rem;
          width: calc(100% - 112px);
          color: #fff; }
      body#index header .block_search .inputs {
        position: relative;
        left: 56px; }
      body#index header .block_search a.btn_close {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 16px;
        right: 15px; }
        body#index header .block_search a.btn_close svg {
          width: 16px;
          height: 16px; }
        body#index header .block_search a.btn_close .st0 {
          fill: none;
          stroke: #808080;
          stroke-width: 5;
          stroke-miterlimit: 10; }
      body#index header .block_search.active {
        width: 360px;
        background: #262626; }
        body#index header .block_search.active .search_input {
          width: 360px; }
          body#index header .block_search.active .search_input .icon {
            display: block; }
        body#index header .block_search.active a.btn_search {
          display: none; }
        body#index header .block_search.active a.btn_close {
          display: block; }
      body#index header .block_search .suggest {
        width: 100%;
        position: absolute;
        top: 48px;
        background: #4d4d4d;
        display: none; }
        body#index header .block_search .suggest ul {
          padding: 20px 0; }
        body#index header .block_search .suggest li, body#index header .block_search .suggest li a {
          width: 100%;
          height: 26px;
          line-height: 26px;
          display: block; }
        body#index header .block_search .suggest li a {
          text-indent: 48px;
          color: #fff;
          letter-spacing: 0.025em; }
          body#index header .block_search .suggest li a:hover {
            background: #333333; }
    body#index header a.btn_close {
      display: none; }
    body#index header a.btn_search {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 12px;
      top: 12px; }
      body#index header a.btn_search svg {
        width: 25px;
        height: 25px; }
  body#index footer {
    position: absolute;
    bottom: 0px;
    margin-top: 60px; }
    body#index footer .footer_inner {
      width: 100%;
      padding: 0px; }
    body#index footer #footer_nav {
      width: 100%; }


      /* footer upper navs */
      body#index footer #footer_nav .fnav {
        width: 100%;
        background: url(../images/common/bg_footer.png) top left repeat-x;
        position: relative;
        height: 48px;
        border-top: 1px solid #262626;
      }

      footer #footer_nav .fnav a.fnavs {
        position: absolute;
        height: 50px;
        line-height: 50px;
        top: 0px;
        border: none;
        text-align: left;
        width: auto;
        font-size: 14px;
        font-size: 1.4rem;
        transition: color 0.15s linear;
      }

      footer #footer_nav .fnav a.fnavs svg path {
        transition: fill 0.15s linear;
      }

      footer #footer_nav .fnav a.fnavs:hover {
        color: #997a1f;
      }

      footer #footer_nav .fnav a.fnavs:hover svg path {
        fill: #997a1f;
      }

      footer #footer_nav .fnav a.fnavs .icon {
        position: relative;
        top: 4px;
        margin-right: .5em;
      }

      footer #footer_nav .fnav a.fnavs .icon,
      footer #footer_nav .fnav a.fnavs .icon svg {
        width: 18px;
        height: 18px;
      }

    /* footer #footer_nav .fnav a.fnavs.nav_global {
      left: 38px;
    } */

    footer #footer_nav .fnav a.fnavs.nav_global--ip {
      left: 38px;
      font-size:1.2rem;
    }

      footer #footer_nav .fnav a.fnavs.nav_global--ip .icon,
      footer #footer_nav .fnav a.fnavs.nav_global--ip .icon svg {
        width: 20px;
        height: 20px;
      }

    /*
        body#index footer #footer_nav .fnav a.nav_global svg path {
          transition: fill 0.15s linear; }
        body#index footer #footer_nav .fnav a.nav_global:hover {
          color: #cba229; }
          body#index footer #footer_nav .fnav a.nav_global:hover svg path {
            fill: #cba229; }
        body#index footer #footer_nav .fnav a.nav_global .icon {
          position: relative;
          top: 0px;
          margin-right: .5em; }
        body#index footer #footer_nav .fnav a.nav_global .icon, body#index footer #footer_nav .fnav a.nav_global .icon img {
          width: 18px;
          height: 18px; }
        body#index footer #footer_nav .fnav a.nav_global img {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          top: -2px;
          margin-right: .5em; } */
      /* // end footer upper navs*/


      body#index footer #footer_nav #nav_info {
        position: absolute;
        right: 38px;
        top: 0px;
        margin: 0px;
        width: 60%;
        min-width: 530px; }
        body#index footer #footer_nav #nav_info ul {
          border: none;
          display: block;
          -webkit-box-lines: inherit;
          flex-wrap: inherit;
          text-align: right;
          width: 100%; }
          body#index footer #footer_nav #nav_info ul li a {
            -webkit-transition: color 0.15s linear;
            -moz-transition: color 0.15s linear;
            -o-transition: color 0.15s linear;
            -ms-transition: color 0.15s linear;
            transition: color 0.15s linear; }
            body#index footer #footer_nav #nav_info ul li a:hover {
              color: #cba229; }
            body#index footer #footer_nav #nav_info ul li a .bg {
              background: none; }
          body#index footer #footer_nav #nav_info ul li, body#index footer #footer_nav #nav_info ul li a {
            display: inline-block;
            width: auto;
            height: 50px;
            line-height: 54px;
            border: none;
            text-align: left;
            font-size: 11px;
            font-size: 1.1rem; }
          body#index footer #footer_nav #nav_info ul li:after {
            content: "";
            position: relative;
            top: 8px;
            display: inline-block;
            border-right: 1px solid #333;
            width: 1px;
            height: 25px;
            padding: 0 15px 0 0;
            margin-right: 12px; }
          body#index footer #footer_nav #nav_info ul li:last-child:after {
            display: none; }
    body#index footer #btm {
      width: 100%;
      padding: 0px;
      height: 85px;
      position: relative;
      border-top: 1px solid #262626;
      background: #000; }
      body#index footer #btm .col2 {
        width: 100%;
        height: 85px;
        position: absolute;
        top: 0px;
        left: 0px;
        margin-bottom: 0px; }
        body#index footer #btm .col2 h5 {
          position: absolute;
          width: 66px;
          height: 17px;
          left: 38px;
          margin-right: 0px;
          top: 34px; }
          body#index footer #btm .col2 h5 svg {
            width: 66px;
            height: 17px; }
        body#index footer #btm .col2 h6 {
          width: 120px;
          height: 20px;
          position: absolute;
          right: 38px;
          top: 32px; }
        body#index footer #btm .col2 a {
          -webkit-transition: opacity 0.15s linear;
          -moz-transition: opacity 0.15s linear;
          -o-transition: opacity 0.15s linear;
          -ms-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear; }
          body#index footer #btm .col2 a:hover {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
            filter: alpha(opacity=60);
            -webkit-opacity: 0.6;
            -khtml-opacity: 0.6;
            -moz-opacity: 0.6;
            opacity: 0.6; }
      body#index footer #btm p.copy {
        height: 85px;
        line-height: 85px;
        font-size: 12px;
        font-size: 1.2rem; } }

@media all and (min-width: 1140px) {
  body#index header .block_search.active {
    width: 360px; }
    body#index header .block_search.active .search_input {
      width: 360px; } }

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); }
  90% {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); } }

@-moz-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); }
  90% {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); } }

@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); }
  90% {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); } }

#index {
  background: #000; }
  #index #bgs {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    height: vh(100);
    display: none; }
    #index #bgs.active {
      display: block; }
    #index #bgs .b {
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      display: block;
      -webkit-transition: opacity 0s linear;
      -moz-transition: opacity 0s linear;
      -o-transition: opacity 0s linear;
      -ms-transition: opacity 0s linear;
      transition: opacity 0s linear;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=0);
      -webkit-opacity: 0;
      -khtml-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
      animation-fill-mode: forwards; }
      #index #bgs .b.z2 {
        z-index: 2; }
    #index #bgs .bg01 {
      background-image: url(../images/index/bg_sp01.jpg);
      background-position: top left; }
    #index #bgs .bg02 {
      background-image: url(../images/index/bg_sp02.jpg);
      background-position: top center; }
    #index #bgs.active0 .bg01 {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=100);
      -webkit-opacity: 1;
      -khtml-opacity: 1;
      -moz-opacity: 1;
      opacity: 1;
      -webkit-transition: opacity 1s linear;
      -moz-transition: opacity 1s linear;
      -o-transition: opacity 1s linear;
      -ms-transition: opacity 1s linear;
      transition: opacity 1s linear; }
    #index #bgs.active1 .bg02 {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=100);
      -webkit-opacity: 1;
      -khtml-opacity: 1;
      -moz-opacity: 1;
      opacity: 1;
      -webkit-transition: opacity 1s linear;
      -moz-transition: opacity 1s linear;
      -o-transition: opacity 1s linear;
      -ms-transition: opacity 1s linear;
      transition: opacity 1s linear; }
  #index #wrapper {
    padding-top: 95px;
    overflow: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
    #index #wrapper.active {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=100);
      -webkit-opacity: 1;
      -khtml-opacity: 1;
      -moz-opacity: 1;
      opacity: 1; }
  #index .lead {
    width: 100%;
    text-align: center;
    margin-bottom: 15px; }
    #index .lead h2 {
      width: 31.33%;
      height: 0px;
      padding-bottom: 29.6%;
      background-image: url(../images/index/ttl_sp.png);
      background-position: top left;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      margin: auto;
      text-indent: -10000px; }
  #index #block_movie {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 10; }
    #index #block_movie .movie {
      width: 100%;
      height: 0;
      padding-bottom: 57.32%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -28.66% 0 0 -50%; }
      #index #block_movie .movie video {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px; }
  #index .nav {
    width: 87.2%;
    margin: auto; }
    #index .nav ul {
      letter-spacing: -.4em;
      text-align: center; }
      #index .nav ul li {
        display: inline-block;
        vertical-align: top;
        /*width: 40.3%; padding-bottom: 40.3%; */
        width: 45.3%;
        padding-bottom: 46.3%;
        height: 0px;
        position: relative; }
        #index .nav ul li a {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          border: 2px solid #808080;
          color: #fff;
          letter-spacing: 0em; }
          #index .nav ul li a .inr {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 50%; }
          #index .nav ul li a h3 {
            font-size: 18px;
            font-size: 1.8rem;
            font-weight: 300;
            line-height: 1.4; }
            #index .nav ul li a h3 span {
              display: block;
              font-size: 11px;
              font-size: 1.1rem; }
          #index .nav ul li a .icon {
            display: inline-block; }
      #index .nav ul li:nth-child(2n) {
        margin-left: 6.4%;
        margin-bottom: 6.4%; }
      #index .nav ul li:nth-child(1) .icon, #index .nav ul li:nth-child(1) svg {
        width: 31px;
        height: 34px; }
      #index .nav ul li:nth-child(1) .inr {
        margin-top: -38px; }
      #index .nav ul li:nth-child(2) .icon, #index .nav ul li:nth-child(2) svg {
        width: 32px;
        height: 36px; }
      #index .nav ul li:nth-child(2) .inr {
        margin-top: -40px; }
      #index .nav ul li:nth-child(3) .icon, #index .nav ul li:nth-child(3) svg {
        width: 37px;
        height: 30px; }
      #index .nav ul li:nth-child(3) .inr {
        margin-top: -36px; }
      #index .nav ul li:nth-child(4) .icon, #index .nav ul li:nth-child(4) svg {
        width: 30px;
        height: 34.8px; }
      #index .nav ul li:nth-child(4) .inr {
        margin-top: -40px; }
      #index .nav ul li:nth-child(3),
      #index .nav ul li:nth-child(4) {
        margin-bottom: 0px; }
      #index .nav ul li:nth-child(4) h3{
        margin-top: -1px; }
      #index .nav ul li:nth-child(4) h3 span{
        margin-top: 1px; }
  #index .lead h2 {
    -webkit-transition: opacity 1.5s ease;
    -moz-transition: opacity 1.5s ease;
    -o-transition: opacity 1.5s ease;
    -ms-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  #index .nav li {
    -webkit-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    -moz-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    -o-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    -ms-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -ms-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0); }
  #index header {
    -webkit-transition: opacity 1.5s ease;
    -moz-transition: opacity 1.5s ease;
    -o-transition: opacity 1.5s ease;
    -ms-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  #index footer {
    -webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
    -moz-transition: opacity 1s ease 0s, transform 1s ease 0s;
    -o-transition: opacity 1s ease 0s, transform 1s ease 0s;
    -ms-transition: opacity 1s ease 0s, transform 1s ease 0s;
    transition: opacity 1s ease 0s, transform 1s ease 0s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -ms-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0); }
  #index #bgs {
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    -o-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    transition: opacity 3s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  #index.active #bgs {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; }
  #index.active header {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s; }
  #index.active .lead h2 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0); }
  #index.active .lead h2 {
    transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s; }
  #index.active .nav li {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0); }
  #index.active .nav li:nth-child(1) {
    transition-delay: 2.5s;
    -moz-transition-delay: 2.5s;
    -o-transition-delay: 2.5s;
    -webkit-transition-delay: 2.5s; }
  #index.active .nav li:nth-child(2) {
    transition-delay: 2.6s;
    -moz-transition-delay: 2.6s;
    -o-transition-delay: 2.6s;
    -webkit-transition-delay: 2.6s; }
  #index.active .nav li:nth-child(3) {
    transition-delay: 2.7s;
    -moz-transition-delay: 2.7s;
    -o-transition-delay: 2.7s;
    -webkit-transition-delay: 2.7s; }
  #index.active .nav li:nth-child(4) {
    transition-delay: 2.8s;
    -moz-transition-delay: 2.8s;
    -o-transition-delay: 2.8s;
    -webkit-transition-delay: 2.8s; }
  #index.active footer {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transition-delay: 3s;
    -moz-transition-delay: 3s;
    -o-transition-delay: 3s;
    -webkit-transition-delay: 3s; }

@media all and (min-width: 375px) {
  #index .nav ul li {
    width: 45.3%;
    padding-bottom: 46.3%; } }

/* Small Devices, Tablets */
/* PC */
@media all and (min-width: 864px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 100%; }
  #index {
    background: #000;
    width: 100%;
    min-height: 750px;
    position: relative; }
    #index #block_movie {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      z-index: 10;
      overflow: hidden;
      /*.movie{ width: 0px; padding-right: 174%; height: 100%; position: absolute; margin-left: -87%; top: 0%; padding-bottom: 0px; margin-top: 0px;
				video{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}
			}*/ }
      #index #block_movie .movie video {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px; }
    #index #bgs .bg01 {
      background-image: url(../images/index/bg_pc01.jpg); }
    #index #bgs .bg02 {
      background-image: url(../images/index/bg_pc02.jpg); }
    #index #wrapper {
      padding-top: 0px;
      width: 100%;
      min-width: 864px;
      min-height: 680px;
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: 100% auto; }
      #index #wrapper .content {
        width: 100%;
        position: absolute;
        top: 50%;
        z-index: 2;
        /*@include translate3d(0, -60%, 0);*/
        margin-top: -208px; }
    #index .lead {
      margin-bottom: 70px; }
      #index .lead h2 {
        width: 688px;
        height: 119px;
        background-image: url(../images/index/ttl_pc.png);
        padding-bottom: 0px; }
    #index .nav {
      width: 87.2%;
      max-width: 990px;
      margin: auto; }
      #index .nav ul {
        letter-spacing: -.4em; }
        #index .nav ul li {
          display: inline-block;
          vertical-align: top;
          width: 23%;
          height: 0px;
          padding-bottom: 23%;
          position: relative;
          margin-left: 2.6%; }
          #index .nav ul li a {
            -webkit-transition: background 0.15s ease;
            -moz-transition: background 0.15s ease;
            -o-transition: background 0.15s ease;
            -ms-transition: background 0.15s ease;
            transition: background 0.15s ease; }
            #index .nav ul li a h3 {
              font-size: 28px;
              font-size: 2.8rem;
              font-weight: 400;
              line-height: 1.4; }
              #index .nav ul li a h3 span {
                display: block;
                font-size: 14px;
                font-size: 1.4rem; }
            #index .nav ul li a .st0 {
              -webkit-transition: stroke 0.15s linear;
              -moz-transition: stroke 0.15s linear;
              -o-transition: stroke 0.15s linear;
              -ms-transition: stroke 0.15s linear;
              transition: stroke 0.15s linear; }
            #index .nav ul li a:before {
              position: absolute;
              width: 100%;
              height: 100%;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
              background: -moz-linear-gradient(top, rgba(153, 122, 31, 0.65) 20%, rgba(153, 122, 31, 0) 100%);
              background: -webkit-linear-gradient(top, rgba(153, 122, 31, 0.65) 20%, rgba(153, 122, 31, 0) 100%);
              background: linear-gradient(to bottom, rgba(153, 122, 31, 0.65) 20%, rgba(153, 122, 31, 0) 100%);
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6997a1f', endColorstr='#00997a1f',GradientType=0 );
              -webkit-transition: opacity 0.15s linear;
              -moz-transition: opacity 0.15s linear;
              -o-transition: opacity 0.15s linear;
              -ms-transition: opacity 0.15s linear;
              transition: opacity 0.15s linear;
              display: block;
              content: "";
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
              filter: alpha(opacity=0);
              -webkit-opacity: 0;
              -khtml-opacity: 0;
              -moz-opacity: 0;
              opacity: 0; }
            #index .nav ul li a .icon {
              display: inline-block;
              line-height: 1;
              margin-bottom: .5em; }
            #index .nav ul li a:hover {
              border: 2px solid #997a1f; }
              #index .nav ul li a:hover:before {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
                filter: alpha(opacity=100);
                -webkit-opacity: 1;
                -khtml-opacity: 1;
                -moz-opacity: 1;
                opacity: 1;
                background-blend-mode: screen; }
        #index .nav ul li:nth-child(1) {
          margin-left: 0px; }
        #index .nav ul li:nth-child(2n) {
          margin-left: 2.6%;
          margin-bottom: 0%; }
        #index .nav ul li:nth-child(1) .icon, #index .nav ul li:nth-child(1) svg {
          width: 47px;
          height: 52px; }
        #index .nav ul li:nth-child(1) .inr {
          margin-top: -58px; }
        #index .nav ul li:nth-child(2) .icon, #index .nav ul li:nth-child(2) svg {
          width: 50px;
          height: 55px; }
        #index .nav ul li:nth-child(2) .inr {
          margin-top: -61px; }
        #index .nav ul li:nth-child(3) .icon, #index .nav ul li:nth-child(3) svg {
          width: 56px;
          height: 50.5px; }
        #index .nav ul li:nth-child(3) .inr {
          margin-top: -56px; }
        #index .nav ul li:nth-child(4) .icon, #index .nav ul li:nth-child(4) svg {
          width: 46px;
          height: 54.8px; }
        #index .nav ul li:nth-child(4) .inr {
          margin-top: -61px; }
          /* footer #footer_nav .fnav a.nav_global {
          position: absolute;
          height: 50px;
          line-height: 50px;
          left: 38px;
          top: 0px;
          border: none;
          text-align: left;
          width: auto;
          font-size: 14px;
          font-size: 1.4rem;
          -webkit-transition: color 0.15s linear;
          -moz-transition: color 0.15s linear;
          -o-transition: color 0.15s linear;
          -ms-transition: color 0.15s linear;
          transition: color 0.15s linear;
      }
      footer #footer_nav .fnav a.nav_global .icon, footer #footer_nav .fnav a.nav_global .icon svg {
          width: 18px;
          height: 18px;
      }
      body#index footer #footer_nav .fnav a.nav_global .icon {
          position: relative;
          top: 4px;
          margin-right: .5em;
      }
      footer #footer_nav .fnav a.nav_global .icon, footer #footer_nav .fnav a.nav_global .icon svg {
          width: 18px;
          height: 18px;
      }
      footer #footer_nav .fnav a.nav_global svg path {
          -webkit-transition: fill 0.15s linear;
          -moz-transition: fill 0.15s linear;
          -o-transition: fill 0.15s linear;
          -ms-transition: fill 0.15s linear;
          transition: fill 0.15s linear;
      }  */
    }