@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');
}

@page {
  size: A4;
  margin: 8mm;
}



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


  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;
  }
}

@media print {
  html.ie {
    font-size: 0.4vw;
  }
}


html * {
  color: #000;
  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%;
  text-align: left;
  -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;
}



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

#header-global::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #eee;
  position: absolute;
  left: 0;
  bottom: 0;
}

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

#header-global h1 a {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

#header-global .nav-header {
  display: block;
  width: 40%;
  height: 100%;
  position: absolute;
  right: 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: absolute;
  }

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

  #header-global h1 {
    width: 30%;
  }

  #header-global .nav-header {
    width: 100%;
    height: auto;
    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);
  }
}



/*  global nav
=====================*/
#header-global .list-nav-global {
  width: 100%;
  height: 6rem;
  margin-top: 4rem;
  overflow: hidden;
}

#header-global .list-nav-global > li {
  display: table;
  width: 22%;
  height: 100%;
  float: left;
}

#header-global .list-nav-global > li:nth-of-type(n+4) {
   width: 17%;
}

#header-global .list-nav-global > li > a {
  display: table-cell;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  vertical-align: middle;
}

body.company #header-global .list-nav-global > li.company > a,
body.business #header-global .list-nav-global > li.business > a,
body.merchandise #header-global .list-nav-global > li.merchandise > a,
body.logistics #header-global .list-nav-global > li.logistics > a,
body.csr #header-global .list-nav-global > li.csr > a {
  border-bottom: 1px solid #000;
}

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


@media (max-width: 480px) and (orientation: portrait) {
  #header-global .list-nav-global {
    height: auto;
    margin-top: 0;
    background-color: #fff;
  }

  #header-global .list-nav-global > li {
    display: block;
    width: 100%;
    height: auto;
    float: none;
  }

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

  #header-global .list-nav-global > li:nth-of-type(n+4) {
     width: 100%;
  }

  #header-global .list-nav-global > li > a {
    display: block;
    text-align: left;
    padding: 1.6rem;
    position: relative;
  }

  body.company #header-global .list-nav-global > li.company > a,
  body.business #header-global .list-nav-global > li.business > a,
  body.merchandise #header-global .list-nav-global > li.merchandise > a,
  body.logistics #header-global .list-nav-global > li.logistics > a,
  body.csr #header-global .list-nav-global > li.csr > a {
    border-bottom: none;
  }

  #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;
    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;
  }
}




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

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

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

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

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

#header-global .list-nav-contents > li.top > a {
  font-weight: 400;
  letter-spacing: 0.08em;
}

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

@media (max-width: 480px) and (orientation: portrait) {
  #header-global .list-nav-contents {
    height: 0;
    overflow: hidden;
    position: relative;
    left: 0;
    top: 0;
  }

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

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

  #header-global .list-nav-contents > li > a {
    font-size: 1.3rem;
    padding: 1.4rem 3rem;
  }

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





/*  sub nav
=====================*/
#header-global .nav-sub {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

#header-global .nav-sub > li {
  display: table;
  width: 33%;
  height: 100%;
  float: left; 
}

#header-global .nav-sub > li:first-of-type {
  width: 34%;
}

#header-global .nav-sub > li > a {
  display: table-cell;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  vertical-align: middle;
}


#header-global .nav-sub > li:nth-of-type(1) a {
  background-color: #eee;
}

#header-global .nav-sub > li:nth-of-type(2) a {
  color: #fff;
  background-color: #278363;
}

#header-global .nav-sub > li:nth-of-type(3) a {
  color: #fff;
  background-color: #25265a;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-global .nav-sub {
    height: 9.6rem;
    position: relative;
    right: auto;
    top: auto;
  }

  #header-global .nav-sub > li {
    display: table;
    width: 50%;
    height: 4.8rem;
    float: left; 
  }

  #header-global .nav-sub > li:first-of-type {
    width: 50%;
  }

  #header-global .nav-sub > li:nth-of-type(2) {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}



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

#header-global.locked {
  position: fixed !important;
}

@media (min-width: 481px) and (orientation: landscape) {
  #header-global.fixed {
    height: 5rem;
  }

  #header-global.fixed h1 {
    width: 10%;
  }

  #header-global.fixed .list-nav-global {
    height: 100%;
    margin-top: 0;
  }

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

  #header-global.fixed .list-nav-contents > li > a {
    display: block;
    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;
}




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

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

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



/*  global nav
=====================*/
#footer-global .list-nav-global {
  width: 100%;
  overflow: hidden;
}

#footer-global .list-nav-global > li {
  width: 20%;
  padding-right: 1rem;
  float: left;
}

#footer-global .list-nav-global > li > a {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .list-nav-global > li {
    width: 100%;
    padding: 1.2rem 0;
    float: none;
    clear: both;
    overflow: hidden;
  }

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

  #footer-global .list-nav-global > li > a {
    display: block;
    width: 50%;
    padding: 0.8rem 0;
    float: left;
  }
}



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

#footer-global .list-nav-contents > li.top {
  width: 0;
  height: 0;
  overflow: hidden;
}

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

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

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

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .list-nav-contents {
    display: block;
    width: 50%;
    margin-top: 0;
    float: right;
  }

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

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

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



/*  nav bar
=====================*/
#footer-global .block-bar {
  width: 100%;
  height: 4rem;
  background-color: #f2f2f2;
  padding-right: 10rem;
  overflow: hidden;
  position: relative;
}

#footer-global .block-bar .pagetop {
  display: block;
  width: 10rem;
  height: 100%;
  background: url(/assets/images/common/ico_arrow_up_wht.svg) center center no-repeat #000;
  background-size: 1.6rem auto;
  position: absolute;
  right: 0;
  top: 0;
}

#footer-global .block-bar .pagetop > span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .block-bar {
    padding-right: 4rem;
  }

  #footer-global .block-bar .pagetop {
    width: 4rem;
  }
}




/*  information nav
=====================*/
#footer-global .nav-info {
  width: 100%;
  padding-right: 8rem;
  margin-top: 8rem;
}

#footer-global .nav-info > dl {
  display: inline-block;
}

#footer-global .nav-info > dl > dt {
  border-bottom: 1px solid #eee;
  padding-bottom: 2.4rem;
  margin-bottom: 3rem;
}

#footer-global .nav-info > dl > dt > strong {
  font-family: "Roboto";
  font-size: 3.2rem;
  font-weight: 100;
}

#footer-global .nav-info > dl > dt > em {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-left: 1rem;
  vertical-align: 20%;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .nav-info {
    padding-right: 0;
    margin-top: 4.8rem;
  }

  #footer-global .nav-info > dl {
    display: block;
  }

  #footer-global .nav-info > dl > dt {
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
  }

  #footer-global .nav-info > dl > dt > strong {
    font-size: 3rem;
  }

  #footer-global .nav-info > dl > dt > em {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    margin-left: 0;
    margin-top: 0.8rem;
    vertical-align: baseline;
  }
}



/*  access nav
=====================*/
#footer-global .nav-access {
  width: 65%;
}

#footer-global .nav-access > dd ul {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 6.5rem 0;
  justify-content: space-between;
}

#footer-global .nav-access > dd li {
  width: 44%;
}

#footer-global .nav-access > dd li:first-child {
  float: left;
}

#footer-global .nav-access > dd li:last-child {
  float: right;
}

#footer-global .nav-access > dd a {
  display: block;
  width: 100%;
  position: relative;
}

#footer-global .nav-access > dd a::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background: url(/assets/images/common/ico_arrow_next_blk.svg) center center no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  right: 2rem;
  top: 0;
  bottom: 0;
}

#footer-global .nav-access > dd .text-name {
  margin-bottom: 2rem;
}

#footer-global .nav-access > dd .text-name > strong {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.04rem;
  text-indent: -0.1em;
}

#footer-global .nav-access > dd .text-name > span {
  display: block;
  font-size: 1.5rem;
  font-weight: 100;
  margin-top: 0.8rem;
}

#footer-global .nav-access > dd .text-address {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .nav-access {
    width: 100%;
  }

  #footer-global .nav-access > dd ul {
    display: block;
  }

  #footer-global .nav-access > dd li {
    width: 100%;
  }

  #footer-global .nav-access > dd li + li {
    margin-top: 3.2rem;
  }

  #footer-global .nav-access > dd li:first-child {
    float: none;
  }

  #footer-global .nav-access > dd li:last-child {
    float: none;
  }

  #footer-global .nav-access > dd a::after {
    margin: auto 0;
    position: absolute;
    right: 0;
  }

  #footer-global .nav-access > dd .text-name {
    margin-bottom: 1.2rem;
  }

  #footer-global .nav-access > dd .text-name > strong {
    font-size: 2.4rem;
    text-indent: -0.1em;
  }

  #footer-global .nav-access > dd .text-name > span {
    color: #666;
    font-size: 1rem;
    margin-top: 0.6rem;
  }
}




/*  sns nav
=====================*/
#footer-global .nav-sns {
  width: 25%;
  float: right;
}

#footer-global .nav-sns > dd > ul {
  overflow: hidden;
}

#footer-global .nav-sns > dd > ul > li {
  width: 50%;
  margin-bottom: 2rem; 
}

#footer-global .nav-sns > dd > ul > li:nth-of-type(odd) {
  float: left;
}

#footer-global .nav-sns > dd > ul > li:nth-of-type(even) {
  float: right;
}

#footer-global .nav-sns a.sns::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 1rem;
}

#footer-global .nav-sns a.sns.facebook::before {
  background-color: #3c5a99;
  background-image: url(/assets/images/common/ico_sns_facebook_wht.svg);
}

#footer-global .nav-sns a.sns.x::before {
  background-color: #1da1f2;
  background-image: url(/assets/images/common/ico_sns_x_wht.svg);
}

#footer-global .nav-sns a.sns.instagram::before {
  background-image: url(/assets/images/common/ico_sns_instagram_wht.svg);
}

#footer-global .nav-sns a.sns > em {
  font-size: 1.5rem;
  font-weight: 100;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .nav-sns {
    width: 100%;
    float: none;
    margin-top: 4.8rem;
  }

  #footer-global .nav-sns > dd > ul > li {
    width: 50%;
    margin-bottom: 1.2rem; 
  }

  #footer-global .nav-sns > dd > ul > li:nth-of-type(odd) {
    float: left;
  }

  #footer-global .nav-sns > dd > ul > li:nth-of-type(even) {
    float: right;
  }

  #footer-global .nav-sns a.sns::before {
    width: 2.8rem;
    height: 2.8rem;
  }


  #footer-global .nav-sns a.sns > em {
    display: inline-block;
    font-size: 1.4rem;
    margin-top: 0.4rem;
  }
}




/*  signature
=====================*/
#footer-global .block-signature {
  display: table;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding: 2.8rem 0;
  overflow: hidden;
}

#footer-global .block-signature > p {
  display: table-cell;
  vertical-align: bottom;
}

#footer-global .block-signature > p > a {
  display: inline-block;
}

#footer-global .block-signature .logo {
  width: 40%;
  text-align: left;
}

#footer-global .block-signature .statement {
  width: 60%;
  text-align: right;
}

#footer-global .block-signature .logo > a {
  width: 20rem;
}

#footer-global .block-signature .statement > a {
  width: 48rem;
  padding-bottom: 0.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .block-signature {
    border-bottom-color: #eee;
  }

  #footer-global .block-signature .logo {
    display: none;
  }

  #footer-global .block-signature .statement {
    width: 100%;
    text-align: center;
  }

  #footer-global .block-signature .statement > a {
    width: 88%;
    max-width: 32rem;
    padding-bottom: 0;
  }
}



/*  utility nav
=====================*/
#footer-global .list-nav-utility {
  display: inline-table;
  height: 8.8rem;
}

#footer-global .list-nav-utility > li {
  display: table-cell;
  vertical-align: middle;
}

#footer-global .list-nav-utility > li + li {
  padding-left: 3rem;
}

#footer-global .list-nav-utility > li > a {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

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

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global .list-nav-utility {
    display: block;
    width: 100%;
    height: auto;
    padding: 1.8rem 0;
  }

  #footer-global .list-nav-utility > li {
    display: block;
    width: 100%;
  }

  #footer-global .list-nav-utility > li + li {
    padding-left: 0;
  }

  #footer-global .list-nav-utility > li > a {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem 0;
  }

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



/*  copyright
=====================*/
#footer-global small {
  display: inline-block;
  height: 8.8rem;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 8.8rem;
  float: right;
}

@media (max-width: 480px) and (orientation: portrait) {
  #footer-global small {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    padding-bottom: 2.4rem;
    margin-top: 1.6rem;
    float: none;
  }
}




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

#header-local .block-title {
  display: table;
  width: 55%;
  height: 12rem;
  position: absolute;
  left: 0;
  top: 0;
}

#header-local.nav-none .block-title {
  width: 100%;
  position: static;
}

#header-local .nav-header {
  display: block;
  width: 100%;
  height: 100%;
  text-align: right;
}

#header-local .title-page {
  display: table-cell;
  vertical-align: middle;
}

#header-local.nav-none .block-title .title-page {
  border-bottom: 1px solid #eee;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-local .block-title {
    display: table;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #eee;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    position: static;
  }

  #header-local .nav-header {
    display: none;
    border-top: 1px solid #eee;
  }

  #header-local .title-page {
    display: block;
  }

  #header-local.nav-none .block-title .title-page {
    border-bottom: none;
  }
}



/*  local nav
=====================*/
#header-local .nav-local {
  display: table;
  width: 100%;
  height: 12rem;
}

#company-keywords-1 #header-local .nav-local,
#company-keywords-2 #header-local .nav-local,
#company-keywords-3 #header-local .nav-local,
#company-keywords-4 #header-local .nav-local,
#company-keywords-5 #header-local .nav-local,
#company-keywords-6 #header-local .nav-local,
#company-philosophy #header-local .nav-local,
#company-overview #header-local .nav-local,
#company-history #header-local .nav-local,
#business-totalsupport #header-local .nav-local,
#business-technicalsupport #header-local .nav-local,
#business-expertsupport-top #header-local .nav-local,
#business-expertsupport-renewal #header-local .nav-local,
#business-expertsupport-bousai #header-local .nav-local,
#business-kanzainet #header-local .nav-local,
#business-kanzainet-guide #header-local .nav-local,
#merchandise-item #header-local .nav-local,
#merchandise-maker #header-local .nav-local,
#merchandise-pricelist #header-local .nav-local,
#merchandise-pickup-top #header-local .nav-local,
#merchandise-ecology-top #header-local .nav-local,
#logistics-message #header-local .nav-local,
#logistics-delivery #header-local .nav-local,
#logistics-driver #header-local .nav-local,
#logistics-training #header-local .nav-local,
#csr-iso #header-local .nav-local,
#csr-deliverysystem #header-local .nav-local,
#csr-ecodrive #header-local .nav-local,
#csr-recycle #header-local .nav-local,
#information-news #header-local .nav-local,
#information-event #header-local .nav-local,
#information-data-top #header-local .nav-local,
#information-data-build #header-local .nav-local,
#information-data-sales #header-local .nav-local,
#information-tips-top #header-local .nav-local,
#information-seasonreport-top #header-local .nav-local,
#information-seasonreport-dubai-top #header-local .nav-local,
#information-seasonreport-shanghai-top #header-local .nav-local,
#information-seasonreport-hochiminh-top #header-local .nav-local,
#contact-top #header-local .nav-local,
#contact-form #header-local .nav-local {
  border-bottom: 1px solid #eee;
}

#header-local .nav-local .list-nav-contents {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: right;
  vertical-align: middle;
}

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

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

#header-local .nav-local .list-nav-contents > li a {
  display: inline;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

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

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

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

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

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

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

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

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

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





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

#business-top #footer-local,
#logistics-top #footer-local,
#merchandise-top #footer-local,
#merchandise-item #footer-local,
#merchandise-maker #footer-local,
#merchandise-pickup #footer-local,
#merchandise-ecology #footer-local,
#information-top #footer-local {
  border-top: none;
}

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

#footer-local .nav-local dt {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 4rem;
}

#footer-local .nav-local .list-nav-contents {
  display: inline-block;
  padding: 1rem 0;
  overflow: hidden;
}

#footer-local .nav-local .list-nav-contents > li {
  display: inline;
}

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

#footer-local .nav-local .list-nav-contents > li a {
  display: inline;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

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

@media (max-width: 480px) and (orientation: portrait) {
  #footer-local .nav-local {
    padding: 4rem 0 2rem;
  }

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

  #footer-local .nav-local .list-nav-contents > li {
    display: block;
  }

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

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

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





/*========================================
  local header footer activate
========================================*/
body.company.message .list-nav-contents > li.message a,
body.company.keywords .list-nav-contents > li.keywords a,
body.company.philosophy .list-nav-contents > li.philosophy a,
body.company.vision .list-nav-contents > li.vision a,
body.company.overview .list-nav-contents > li.overview a,
body.company.history .list-nav-contents > li.history a,
body.company.worldwide .list-nav-contents > li.worldwide a,
body.business.procurement .list-nav-contents > li.procurement a,
body.business.totalsupport .list-nav-contents > li.totalsupport a,
body.business.technicalsupport .list-nav-contents > li.technicalsupport a,
body.business.renewal .list-nav-contents > li.renewal a, 
body.business.bousai .list-nav-contents > li.bousai a,
body.business.expertsupport .list-nav-contents > li.expertsupport a,
body.business.kanzainet .list-nav-contents > li.kanzainet a,
body.business.techlab .list-nav-contents > li.techlab a,
body.merchandise.item .list-nav-contents > li.item a,
body.merchandise.maker .list-nav-contents > li.maker a,
body.merchandise.pricelist .list-nav-contents > li.pricelist a,
body.merchandise.pickup .list-nav-contents > li.pickup a,
body.merchandise.ecology .list-nav-contents > li.ecology a,
body.logistics.overview .list-nav-contents > li.overview a,
body.logistics.message .list-nav-contents > li.message a,
body.logistics.delivery .list-nav-contents > li.delivery a,
body.logistics.driver .list-nav-contents > li.driver a,
body.logistics.depot .list-nav-contents > li.depot a,
body.logistics.training .list-nav-contents > li.training a,
body.csr.problem .list-nav-contents > li.problem a,
body.csr.iso .list-nav-contents > li.iso a,
body.csr.deliverysystem .list-nav-contents > li.deliverysystem a,
body.csr.ecodrive .list-nav-contents > li.ecodrive a,
body.csr.recycle .list-nav-contents > li.recycle a,
body.information.news .list-nav-contents > li.news a,
body.information.event .list-nav-contents > li.event a,
body.information.data .list-nav-contents > li.data a,
body.information.tips .list-nav-contents > li.tips a,
body.information.monthlyreport .list-nav-contents > li.monthlyreport a,
body.information.seasonreport .list-nav-contents > li.seasonreport a {
  color: #ccc;
  text-decoration: none !important;
  cursor: default;
}





/*========================================
  category top header
========================================*/
#header-top-category {
  text-align: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 14rem;
  position: relative;
}

#header-top-category * {
  color: #fff;
}

#header-top-category .block-catchline {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

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

  #header-top-category .block-catchline {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  #header-top-category .text-summary {
    text-align: left;
  }

  #header-top-category .text-summary > br {
    display: none;
  }
}




/*========================================
  content hero
========================================*/
#content-hero {
  display: table;
  width: 100%;
  height: 60rem;
  position: relative;
}

#content-hero > .block-letter {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 480px) and (orientation: portrait) {
  #content-hero {
    height: 32rem;
  }
}




/*========================================
  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;
}

@media print {
  html::after {
    display: none;
  }

  body::before,
  body::after {
    display: none;
  }
}