@charset "UTF-8";
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), 
       url('/assets/fonts/roboto-thin.woff2') format('woff2'),
       url('/assets/fonts/roboto-thin.woff') format('woff'),
       url('/assets/fonts/roboto-thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), 
       url('/assets/fonts/roboto-light.woff2') format('woff2'),
       url('/assets/fonts/roboto-light.woff') format('woff'),
       url('/assets/fonts/roboto-light.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), 
       url('/assets/fonts/roboto-regular.woff2') format('woff2'),
       url('/assets/fonts/roboto-regular.woff') format('woff'),
       url('/assets/fonts/roboto-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), 
       url('/assets/fonts/roboto-medium.woff2') format('woff2'),
       url('/assets/fonts/roboto-medium.woff') format('woff'),
       url('/assets/fonts/roboto-medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), 
       url('/assets/fonts/roboto-bold.woff2') format('woff2'),
       url('/assets/fonts/roboto-bold.woff') format('woff'),
       url('/assets/fonts/roboto-bold.ttf') format('truetype');
}



/*============================================================


  common


============================================================*/
html {
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-size: 0.7vw;
  background-color: #fff;
}

@media (max-width: 480px) and (orientation: portrait) {
  html {
    font-size: 2.6vw;
  }

  html.android {
    font-size: 2.4vw;
  }
}

html * {
  color: #444;
  font-family: -apple-system, "Roboto", BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", Arial, 
               "游ゴシック体", "游ゴシック", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium",
               "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
               "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  box-sizing: border-box;
}


body {
  width: 100%;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

html.active body {
  opacity: 1;
}


a {
  outline: 0;
  text-decoration: none;
  cursor: pointer;
}

a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none;}
a:focus { text-decoration: none;}
a:active { text-decoration: none;}

a[href^="tel"]{
  color: inherit;
}

br {
  font-size: 0 !important;
}

br.hdn-h {
  display: none !important;
}

br.hdn-v {
  display: block !important;
}

@media (max-width: 480px) and (orientation: portrait) {
  br.hdn-h {
    display: block !important;
  }

  br.hdn-v {
    display: none !important;
  }
}


img {
  width: 100%;
  height: auto;
}

img.hdn-h {
  display: none;
}

img.hdn-v {
  display: inline;
}

@media (max-width: 480px) and (orientation: portrait) {
  img.hdn-h {
    display: inline;
  }

  img.hdn-v {
    display: none;
  }
}

sup {
  font-size: 60%;
}

hr {
  border-bottom: 1px solid #ddd;
  margin: 0 10rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  hr {
    margin: 0 2.4rem;
  }
}

.hdn {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}



/*========================================
  header global
========================================*/
#header-global {
  display: block;
  width: 100%;
  height: 12rem;
  background-color: #fff;
  padding: 0 4rem;
  position: absolute;
  z-index: 20;
}

#header-global::before {
  content: "";
  display: block;
  width: 100%;
  width: calc(100% - 8rem);
  height: 1px;
  background-color: #eee;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

#header-global h1 {
  display: inline-table;
  height: 100%;
  position: relative;
  z-index: 1;
}

#header-global h1 a {
  display: table-cell;
  vertical-align: bottom;
  text-align: left;
  padding-bottom: 2.8rem;
  white-space: nowrap;
}

#header-global h1 a > img {
  width: auto;
  height: 5rem;
  vertical-align: bottom;
}

#header-global h1 a > strong {
  color: #25265a;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.4;
  vertical-align: bottom;
  white-space: nowrap;
  margin-left: 2rem;
}

#header-global .nav-header {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#header-global > .btn-nav {
  display: none;
}


@-webkit-keyframes header_nav_in {
  0% { -webkit-transform: translateY(-5%); opacity: 0;}
  100% {-webkit-transform: translateY(0); opacity: 1;}
}

@-moz-keyframes header_nav_in {
  0% { -moz-transform: translateY(-5%); opacity: 0;}
  100% {-moz-transform: translateY(0); opacity: 1;}
}

@-ms-keyframes header_nav_in {
  0% { -ms-transform: translateY(-5%); opacity: 0;}
  100% {-ms-transform: translateY(0); opacity: 1;}
}

@-o-keyframes header_nav_in {
  0% { -o-transform: translateY(-5%); opacity: 0;}
  100% {-o-transform: translateY(0); opacity: 1;}
}

@keyframes header_nav_in {
  0% { transform: translateY(-5%); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@-webkit-keyframes header_nav_out {
  0% { -webkit-transform: translateY(0); opacity: 1;}
  100% {-webkit-transform: translateY(-5%); opacity: 0;}
}

@-moz-keyframes header_nav_out {
  0% { -moz-transform: translateY(0); opacity: 1;}
  100% {-moz-transform: translateY(-5%); opacity: 0;}
}

@-ms-keyframes header_nav_out {
  0% { -ms-transform: translateY(0); opacity: 1;}
  100% {-ms-transform: translateY(-5%); opacity: 0;}
}

@-o-keyframes header_nav_out {
  0% { -o-transform: translateY(0); opacity: 1;}
  100% {-o-transform: translateY(-5%); opacity: 0;}
}

@keyframes header_nav_out {
  0% { transform: translateY(0); opacity: 1;}
  100% {transform: translateY(-5%); opacity: 0;}
}


@media (max-width: 480px) and (orientation: portrait) {
  #header-global {
    width: 100%;
    height: 5.6rem;
    padding: 0 1.6rem;
    position: fixed;
  }

  #header-global::before {
    width: 100%;
    background-color: rgba(0,0,0,0.04);
    bottom: -1px;
    z-index: 1;
  }

  #header-global h1 a {
    vertical-align: middle;
    padding-top: 0.4rem;
    padding-bottom: 0;
  }

  #header-global h1 a > img {
    height: 2.6rem;
  }

  #header-global h1 a > strong {
    font-size: 1rem;
    letter-spacing: 0.08em;
    line-height: 1.1;
    margin-left: 1rem;
  }

  #header-global .nav-header {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background-color: #fff;
    left: -100%;
    top: 5.6rem;
  }

  #header-global .nav-header.active {
    left: 0;
  }

  #header-global .nav-header.active.in {
    -webkit-animation: header_nav_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
       -moz-animation: header_nav_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
        -ms-animation: header_nav_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
         -o-animation: header_nav_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
            animation: header_nav_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  #header-global .nav-header.active.out {
    -webkit-animation: header_nav_out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
       -moz-animation: header_nav_out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
        -ms-animation: header_nav_out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
         -o-animation: header_nav_out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
            animation: header_nav_out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  #header-global > .btn-nav {
    display: block;
    width: 5rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  #header-global > .btn-nav::before,
  #header-global > .btn-nav::after {
    content: "";
    display: block;
    width: 2.2rem;
    height: 1px;
    background-color: #25265a;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: transform 0.2s;
       -moz-transition: transform 0.2s;
        -ms-transition: transform 0.2s;
         -o-transition: transform 0.2s;
            transition: transform 0.2s;
  }

  #header-global > .btn-nav::before {
    -webkit-transform: translateY(-0.25rem);
       -moz-transform: translateY(-0.25rem);
        -ms-transform: translateY(-0.25rem);
         -o-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }

  #header-global > .btn-nav::after {
    -webkit-transform: translateY(0.25rem);
       -moz-transform: translateY(0.25rem);
        -ms-transform: translateY(0.25rem);
         -o-transform: translateY(0.25rem);
            transform: translateY(0.25rem);
  }

  #header-global .nav-header.active + .btn-nav::before {
    top: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  #header-global .nav-header.active + .btn-nav::after {
    top: 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}



/*  nav global
=====================*/
#header-global .list-nav-global {
  position: absolute;
  right: 2rem;
  bottom: 0;
}

#header-global .list-nav-global > li {
  float: left;
}

#header-global .list-nav-global > li > a {
  display: block;
  height: 7.2rem;
  color: #36388f;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.14em;
  line-height: 7.2rem;
  vertical-align: middle;
  padding: 0 4rem;
  position: relative;
  cursor: default;
}

#header-global .list-nav-global > li > a::after {
  display: block;
  width: 100%;
  width: calc(100% - 4rem);
  height: 1px;
  background-color: #36388f;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

body.feature #header-global .list-nav-global > li.feature > a::after,
body.stage #header-global .list-nav-global > li.stage > a::after,
body.job #header-global .list-nav-global > li.job > a::after {
  content: "";
}

#header-global .list-nav-global > li:hover > a {
  background-color: rgba(250,250,250,0.9);
}


@media (max-width: 480px) and (orientation: portrait) {
  #header-global .list-nav-global {
    position: static;
  }

  #header-global .list-nav-global > li {
    float: none;
  }

  #header-global .list-nav-global > li + li {
    border-top: 1px solid #eee;
  }

  #header-global .list-nav-global > li > a {
    display: block;
    width: 100%;
    height: 5.6rem;
    text-align: left;
    line-height: 5.6rem;
    padding: 0 1.6rem;
    position: relative;
  }

  #header-global .list-nav-global > li:hover > a {
    background-color: transparent;
  }

  #header-global .list-nav-global > li > a::before,
  #header-global .list-nav-global > li > a::after {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1px;
    background-color: #ccc;
    margin: auto 0;
    position: absolute;
    left: auto;
    right: 1.6rem;
    top: 0;
    bottom: 0;
  }

  #header-global .list-nav-global > li > a::after {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: opacity 0.4s;
       -moz-transition: opacity 0.4s;
        -ms-transition: opacity 0.4s;
         -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
  }

  #header-global .list-nav-global > li.active > a::after {
    opacity: 0;
  }
}




/*  nav contents
=====================*/
#header-global .nav-contents {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

#header-global .list-nav-global > li:hover .nav-contents {
  height: auto;
  padding: 2rem 0;
  left: 0;
  top: 5.2rem;
}

#header-global .nav-contents > li {
  display: block;
  background-color: rgba(250,250,250,0.9);
}

#header-global .nav-contents > li + li {
  border-top: 1px solid rgba(0,0,0,0.04);
}

#header-global .nav-contents > li > a {
  display: block;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 2rem 3rem;
}

#header-global .nav-contents > li > a:hover {
  background-color: rgba(255,255,255,0.4);
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-global .nav-contents {
    height: 0;
    overflow: hidden;
    position: relative;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
       -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
         -o-transition: opacity 0.2s;
            transition: opacity 0.2s;
  }

  #header-global .list-nav-global > li:hover .nav-contents {
    height: 0;
    padding: 0;
    left: 0;
    top: 0;
  }

  #header-global .list-nav-global > li.active .nav-contents {
    height: auto;
    opacity: 1;
  }

  #header-global .nav-contents > li > a {
    font-size: 1.4rem;
    padding: 1.6rem 3.2rem;
  }

  #header-global .nav-contents > li > a:hover {
    background-color: rgba(250,250,250,0.9);
  }
}





/*  nav sub
=====================*/
#header-global .nav-sub {
  position: absolute;
  right: 4rem;
  bottom: 7.2rem;
  overflow: hidden;
}

#header-global .nav-sub > li {
  float: left;
}

#header-global .nav-sub > li + li {
  margin-left: 1rem;
}

#header-global .nav-sub > li > a {
  font-weight: 500;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-global .nav-sub {
    border-top: 1px solid #eee;
    position: static;
  }

  #header-global .nav-sub > li {
    width: 50%;
    padding: 1.6rem;
  }

  #header-global .nav-sub > li + li {
    margin-left: 0;
  }

  #header-global .nav-sub > li:nth-of-type(odd) {
    padding-right: 0.8rem;
  }

  #header-global .nav-sub > li:nth-of-type(even) {
    padding-left: 0.8rem;
  }

  #header-global .nav-sub > li > a {
    width: 100%;
  }
}



/*  fixed header
=====================*/
#header-global.fixed {
  height: 5rem;
  position: fixed;
}

#header-global.fixed h1 a {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#header-global.fixed h1 a > img {
  height: 3rem;
}

#header-global.fixed h1 a > strong {
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 1.2rem;
}

#header-global.fixed .list-nav-global > li > a {
  height: 5.2rem;
  line-height: 5.2rem;
}

#header-global.fixed .list-nav-global > li:hover .nav-contents {
  top: 3rem;
}

#header-global.fixed .nav-contents > li > a {
  padding: 1.6rem 3rem;
}

#header-global.fixed .nav-sub {
  display: none;
}

@-webkit-keyframes header_in {
  0% { -webkit-transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0); }
}

@-moz-keyframes header_in {
  0% { -moz-transform: translateY(-100%); }
  100% { -moz-transform: translateY(0); }
}

@-ms-keyframes header_in {
  0% { -ms-transform: translateY(-100%); }
  100% { -ms-transform: translateY(0); }
}

@-o-keyframes header_in {
  0% { -o-transform: translateY(-100%); }
  100% { -o-transform: translateY(0); }
}

@keyframes header_in {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

#header-global.fixed.in {
  -webkit-animation: header_in 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: header_in 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: header_in 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: header_in 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: header_in 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes header_out {
  0% { -webkit-transform: translateY(0); }
  100% {-webkit-transform: translateY(-100%); }
}

@-moz-keyframes header_out {
  0% { -moz-transform: translateY(0); }
  100% {-moz-transform: translateY(-100%); }
}

@-ms-keyframes header_out {
  0% { -ms-transform: translateY(0); }
  100% {-ms-transform: translateY(-100%); }
}

@-o-keyframes header_out {
  0% { -o-transform: translateY(0); }
  100% {-o-transform: translateY(-100%); }
}

@keyframes header_out {
  0% { transform: translateY(0); }
  100% {transform: translateY(-100%); }
}

#header-global.fixed.out {
  -webkit-animation: header_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: header_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: header_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: header_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: header_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}





/*========================================
  footer global
========================================*/
#footer-global {
  display: block;
  width: 100%;
  position: relative;
}

#footer-global .nav-footer {
  width: 100%;
  background-color: #f8f8f8;
  padding: 5.2rem 0 4.8rem;
}

#footer-global .pagetop {
  position: absolute;
  right: 2rem;
  top: -2rem;
  z-index: 4;
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
       -o-transform: translateY(-100%);
          transform: translateY(-100%);
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .nav-footer {
    padding: 2.4rem 2.4rem 1.6rem;
  }

  #footer-global .pagetop {
    right: 1.6rem;
    top: 1.6rem;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}



/*  global nav
=====================*/
#footer-global .list-nav-global {
  text-align: center;
  overflow: hidden;
}

#footer-global .list-nav-global  > li {
  width: 33.333%;
  width: calc(100% / 3);
  float: left;
}

.ie #footer-global .list-nav-global  > li {
  width: 33.333%;
}

#footer-global .list-nav-global > li > a {
  color: #444;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  cursor: default;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .list-nav-global > li {
    width: 100%;
    padding-top: 2.4rem;
    float: none;
  }

  #footer-global .list-nav-global > li + li {
    border-top: 1px solid #e8e8e8;
    margin-top: 2.4rem;
  }
}



/*  nav contents
=====================*/
#footer-global .nav-contents {
  margin-top: 3rem;
}

#footer-global .nav-contents {
  width: 100%;
  overflow: hidden;
}

#footer-global .nav-contents > li + li {
  margin-top: 0.2rem;
}

#footer-global .nav-contents > li > a {
  display: block;
  color: #444;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  padding: 0.4em 0;
}

#footer-global .nav-contents > li > a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .nav-contents {
    margin-top: 1.6rem;
  }

  #footer-global .nav-contents > li + li {
    margin-top: 0;
  }

  #footer-global .nav-contents > li > a {
    font-size: 1.4rem;
    padding: 1rem 0;
  }

  #footer-global .nav-contents > li > a:hover {
    text-decoration: none;
  }
}




/*  sig
=====================*/
#footer-global .sig-footer {
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding: 6.4rem 0;
  position: relative;
}

#footer-global .sig-footer a.btn.link {
  font-size: 1.1rem;
  margin: auto 0;
  position: absolute;
  left: 4rem;
  top: 0;
  bottom: 0;
}

#footer-global .sig-footer .statement {
  display: inline-block;
  width: 48rem;
  margin-bottom: 2.4rem;
}

#footer-global .sig-footer small {
  display: block;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .sig-footer {
    padding: 3.2rem 0;
  }

  #footer-global .sig-footer a.btn.link {
    font-size: 1.1rem;
    margin: auto;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
  }

  #footer-global .sig-footer .statement {
    width: 80%;
    max-width: 32rem;
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
  }

  #footer-global .sig-footer small {
    font-size: 1rem;
  }
}




/*========================================
  header local
========================================*/
#header-local {
  display: block;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
}

#header-local .btn.return {
  vertical-align: middle;
  margin-right: 2rem;
}

#header-local .nav-header {
  display: inline;
  float: right;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-local {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  #header-local .btn.return {
    display: none;
  }

  #header-local .nav-header {
    display: none;
  }
}



/*  nav local
=====================*/
#header-local .nav-local {
  display: inline;
}

#header-local .nav-local .nav-contents {
  display: inline;
}

#header-local .nav-local .nav-contents > li {
  display: inline-block;
  float: left;
}

#header-local .nav-local .nav-contents > li + li {
  margin-left: 1rem;
}

#header-local .nav-local .nav-contents > li a {
  display: inline-block;
  height: 3.6rem;
  color: #36388f;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 3.4rem;
  letter-spacing: 0.1em;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 10rem;
  padding: 0 1.6rem;
  -webkit-transition: all 0.1s;
     -moz-transition: all 0.1s;
      -ms-transition: all 0.1s;
       -o-transition: all 0.1s;
          transition: all 0.1s;
}

html.ie #header-local .nav-local .nav-contents > li a {
  line-height: 3.44rem;
}

#header-local .nav-local .nav-contents > li a:hover {
  border-color: #ebebf4;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-local .nav-local {
    display: block;
    width: 100%;
    height: auto;
  }

  #header-local .nav-local .nav-contents {
    display: block;
    text-align: left;
    padding: 1.6rem 0;
    overflow: hidden;
  }

  #header-local .nav-local .nav-contents > li {
    display: inline-block;
    width: 50%;
  }

  #header-local .nav-local .nav-contents > li:nth-of-type(odd) {
    float: left;
  }

  #header-local .nav-local .nav-contents > li:nth-of-type(even) {
    float: right;
  }

  #header-local .nav-local .nav-contents > li + li {
    margin-left: 0;
  }

  #header-local .nav-local .nav-contents > li a {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    padding: 1rem 0;
  }

  #header-local .nav-local .nav-contents > li a:hover {
    text-decoration: none;
  }
}





/*========================================
  local footer
========================================*/
#footer-local {
  display: block;
  width: 100%;
  border-top: 1px solid #ddd;
  position: relative;
}

body#feature-voice-person #footer-local {
  border-top: none;
}

#footer-local .nav-local {
  text-align: center;
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

#footer-local .nav-local dt {
  margin-bottom: 3.2rem;
}

#footer-local .nav-local .nav-contents {
  display: inline;
  font-size: 0;
}

#footer-local .nav-local .nav-contents > li {
  display: inline-block;
  vertical-align: top;
}

#footer-local .nav-local .nav-contents > li + li {
  margin-left: 1rem;
}

#footer-local .nav-local .nav-contents > li a {
  display: inline-block;
  width: 24rem;
  height: 3.6rem;
  color: #36388f;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 3.4rem;
  letter-spacing: 0.1em;
  text-align: center;
  background-color: #f2f2f8;
  border: 1px solid transparent;
  border-radius: 10rem;
  position: relative;
  -webkit-transition: all 0.1s;
     -moz-transition: all 0.1s;
      -ms-transition: all 0.1s;
       -o-transition: all 0.1s;
          transition: all 0.1s;
}

html.ie #footer-local .nav-local .nav-contents > li a {
  line-height: 3.44rem;
}

body.feature #footer-local .nav-local .nav-contents > li a {
  width: 32rem;
}

#footer-local .nav-local .nav-contents > li a:hover {
  background-color: #eeeef8;
}

#footer-local .nav-local .nav-contents > li a::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/assets/images/common/ico_arrow_next_vio.svg) center center no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-local .nav-local {
    padding-top: 3.2rem;
    padding-bottom: 2.4rem;
  }

  #footer-local .nav-local dt {
    font-size: 2.4rem;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
  }

  #footer-local .nav-local .nav-contents > li {
    width: 50%;
    padding: 0.5rem;
  }

  #footer-local .nav-local .nav-contents > li + li {
    margin-left: 0;
  }

  #footer-local .nav-local .nav-contents > li a {
    width: 100%;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }

  body.feature #footer-local .nav-local .nav-contents > li {
    width: 100%;
  }
}





/*========================================
  local navigation activate
========================================*/
.shinkiba .nav-contents > li.shinkiba a,
.education .nav-contents > li.education a,
.voice .nav-contents > li.voice a,
.digest .nav-contents > li.digest a,
.category .nav-contents > li.category a,
.support .nav-contents > li.support a,
.culture .nav-contents > li.culture a,
.message .nav-contents > li.message a,
.need .nav-contents > li.need a,
.newgraduate .nav-contents > li.newgraduate a,
.faq .nav-contents > li.faq a {
  background-color: transparent !important;
  border-color: #ebebf4 !important;
  cursor: default;
}

.shinkiba .nav-contents > li.shinkiba a::after,
.education .nav-contents > li.education a::after,
.voice .nav-contents > li.voice a::after,
.digest .nav-contents > li.digest a::after,
.category .nav-contents > li.category a::after,
.support .nav-contents > li.support a::after,
.culture .nav-contents > li.culture a::after,
.message .nav-contents > li.message a::after,
.need .nav-contents > li.need a::after,
.newgraduate .nav-contents > li.newgraduate a::after,
.faq .nav-contents > li.faq a::after {
  display: none !important;
}





/*========================================
  content hero
========================================*/
#content-hero {
  width: 100%;
  padding-left: 2rem; 
  padding-right: 2rem;
}

#content-hero > .block-content {
  width: 100%;
  position: relative;
}

#content-hero > .block-content > .block-letter {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#content-hero > .block-content > .block-image {
  position: relative;
}

#content-hero .title-page {
  padding-top: 3.2rem;
  padding-left: 4rem;
}

#content-hero .nav-anchor {
  position: absolute;
  left: 0;
  bottom: 2rem;
  z-index: 1;
}

@media (max-width: 480px) and (orientation: portrait) {
  #content-hero {
    padding-left: 0; 
    padding-right: 0;
  }

  #content-hero .title-page {
    padding-top: 1.6rem;
    padding-left: 1.6rem;
  }

  #content-hero > .block-content > .block-image {
    width: calc(100% + 8rem);
    margin: 0 -4rem;
  }

  #content-hero .nav-anchor {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    position: relative;
    top: 0;
    bottom: auto;
    overflow: hidden;
  }
}




/*========================================
  loading
========================================*/
html::after {
  content: "";
  display: block;
  width: 120%;
  height: 120%;
  background-color: #fff;
  position: fixed;
  left: -10%;
  top: -10%;
  z-index: 10; 
}

@-webkit-keyframes loading_out {
  0% { opacity: 1; width: 120%; height: 120%;}
  99% { opacity: 0; width: 120%; height: 120%;}
  100% { opacity: 0; width: 0; height: 0;}
}

@-moz-keyframes loading_out {
  0% { opacity: 1; width: 120%; height: 120%;}
  99% { opacity: 0; width: 120%; height: 120%;}
  100% { opacity: 0; width: 0; height: 0;}
}

@-ms-keyframes loading_out {
  0% { opacity: 1; width: 120%; height: 120%;}
  99% { opacity: 0; width: 120%; height: 120%;}
  100% { opacity: 0; width: 0; height: 0;}
}

@-o-keyframes loading_out {
  0% { opacity: 1; width: 120%; height: 120%;}
  99% { opacity: 0; width: 120%; height: 120%;}
  100% { opacity: 0; width: 0; height: 0;}
}

@keyframes loading_out {
  0% { opacity: 1; width: 120%; height: 120%;}
  99% { opacity: 0; width: 120%; height: 120%;}
  100% { opacity: 0; width: 0; height: 0;}
}

html.active::after {
  -webkit-animation: loading_out 0.2s both; 
     -moz-animation: loading_out 0.2s both; 
      -ms-animation: loading_out 0.2s both; 
       -o-animation: loading_out 0.2s both; 
          animation: loading_out 0.2s both;
}

body::before,
body::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 16; 
}

@media (max-width: 480px) and (orientation: portrait) {
  body::before,
  body::after {
    width: 3.2rem;
    height: 1.6rem;
  }
}

@-webkit-keyframes loading_icon_n {
  0% { -webkit-transform: translateY(0); }
  25% { -webkit-transform: translateY(-40%); }
  50% { -webkit-transform: translateY(0);}
  75% { -webkit-transform: translateY(40%); }
  100% { -webkit-transform: translateY(0);}
}

@-moz-keyframes loading_icon_n {
  0% { -moz-transform: translateY(0); }
  25% { -moz-transform: translateY(-40%); }
  50% { -moz-transform: translateY(0);}
  75% { -moz-transform: translateY(40%); }
  100% { -moz-transform: translateY(0);}
}

@-ms-keyframes loading_icon_n {
  0% { -ms-transform: translateY(0); }
  25% { -ms-transform: translateY(-40%); }
  50% { -ms-transform: translateY(0);}
  75% { -ms-transform: translateY(40%); }
  100% { -ms-transform: translateY(0);}
}

@-o-keyframes loading_icon_n {
  0% { -o-transform: translateY(0); }
  25% { -o-transform: translateY(-40%); }
  50% { -o-transform: translateY(0);}
  75% { -o-transform: translateY(40%); }
  100% { -o-transform: translateY(0);}
}

@keyframes loading_icon_n {
  0% { transform: translateY(0); }
  25% { transform: translateY(-40%); }
  50% { transform: translateY(0);}
  75% { transform: translateY(40%); }
  100% { transform: translateY(0);}
}

@-webkit-keyframes loading_icon_c {
  0% { -webkit-transform: translateY(0); }
  25% { -webkit-transform: translateY(40%); }
  50% { -webkit-transform: translateY(0);}
  75% { -webkit-transform: translateY(-40%); }
  100% { -webkit-transform: translateY(0);}
}

@-moz-keyframes loading_icon_c {
  0% { -moz-transform: translateY(0); }
  25% { -moz-transform: translateY(40%); }
  50% { -moz-transform: translateY(0);}
  75% { -moz-transform: translateY(-40%); }
  100% { -moz-transform: translateY(0);}
}

@-ms-keyframes loading_icon_c {
  0% { -ms-transform: translateY(0); }
  25% { -ms-transform: translateY(40%); }
  50% { -ms-transform: translateY(0);}
  75% { -ms-transform: translateY(-40%); }
  100% { -ms-transform: translateY(0);}
}

@-o-keyframes loading_icon_c {
  0% { -o-transform: translateY(0); }
  25% { -o-transform: translateY(40%); }
  50% { -o-transform: translateY(0);}
  75% { -o-transform: translateY(-40%); }
  100% { -o-transform: translateY(0);}
}

@keyframes loading_icon_c {
  0% { transform: translateY(0); }
  25% { transform: translateY(40%); }
  50% { transform: translateY(0);}
  75% { transform: translateY(-40%); }
  100% { transform: translateY(0);}
}

body::before {
  background-image: url(/assets/images/common/loading_icon_n.svg);
  -webkit-animation: loading_icon_n 0.6s linear infinite; 
     -moz-animation: loading_icon_n 0.6s linear infinite; 
      -ms-animation: loading_icon_n 0.6s linear infinite; 
       -o-animation: loading_icon_n 0.6s linear infinite; 
          animation: loading_icon_n 0.6s linear infinite;
}

body::after {
  background-image: url(/assets/images/common/loading_icon_c.svg);
  -webkit-animation: loading_icon_c 0.6s linear infinite; 
     -moz-animation: loading_icon_c 0.6s linear infinite; 
      -ms-animation: loading_icon_c 0.6s linear infinite; 
       -o-animation: loading_icon_c 0.6s linear infinite; 
          animation: loading_icon_c 0.6s linear infinite;
}

html.active body::before,
html.active body::after {
  display: none;
}