/* ! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
/* Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template */
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
/* font settings -------------------- */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }


.nprogress-overlay {
  background-color:#37547e;
  width:100vw;
  height:100vh;
  position: fixed;
  top:0;
  z-index:2000;
}
.nprogress-overlay .nprogress-logo-box {
  display: inline-block;
  width:200px;
  text-align: center;
}
.nprogress-overlay .nprogress-logo-box > svg {
  width: 100px;
  height: 100px;
}
.nprogress-overlay .nprogress-logo {
  display: table-cell;
  width: inherit;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}
.no-js .nprogress-overlay article.no-js-visible {
  display: block;
  max-width: 570px;
  margin: 0 auto;
  padding: 0 10px;
  color: #ffffff;
}
#nprogress {
  position:absolute;
  z-index:2001;
}

.load_bar {
  width: 100px;
  display: block;
  height: 2px;
  overflow: hidden;
  position: relative;
  margin: 20px auto 10px auto;
}
.load_bar span {
  display: block;
  width: inherit;
  height: inherit;
  color: #fff;
  background-image: linear-gradient(  -90deg,  transparent,  transparent 25%,  #ffffff 26%,  #ffffff 50%,  transparent 51%,  transparent 75%,  #ffffff 76%,  #ffffff 100%  );
  background-size: 32px 2px;
  animation: move 2000ms linear infinite;
}
@keyframes move {
 0% {
background-position: 0 0;
}
 100% {
background-position: 100% 100%;
}
}


html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background-color: #f4f4f4;
}
img.icon-for-ie,
#service-ruby .service-box.ruby h3 img.icon-for-ie {
  display:none;
}
.ie #front-page #top-main .topimg-h1-wrapper h1 svg.icon,
.ie #front-page #top-main .scroll .scroll-inner svg.icon,
.ie #service-ruby .service-box.ruby h3 svg.icon {
  display: none;
}
.ie img.icon-for-ie {
  display: inline-block;
}
.ie #service-ruby .service-box.ruby h3 img.icon-for-ie {
  display: block;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
html, body, .header-container, main, .local-open, .local-nav {
  min-width: 320px;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
a {
  transition: 0.4s;
  color: #37547e;
  text-decoration: none;
}
a img,
a p {
  transition: 0.4s;
}
a img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
a[href^="tel:"] {
  cursor: default;
}
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
.on-mouse-effect {
  font-weight: bold;
  text-decoration: underline;
}
.on-mouse-effect:hover {
  color: #4881d4;
}
.new-line::before {
  content: '\a';
  white-space: pre;
}
.pc-flex {
  display: block;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */

body {
  font: 12px/26px Arial, Helvetica, Helvetica Neue, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p, ul, ul li, dt, dd {
  margin: 0;
  padding: 0;
}

#front-page.default-layout .content {
  max-width: 1050px;
  margin: 0 auto;
  padding: 50px 15px;
}

.main-container {
  overflow:hidden;
}
@media only screen and (min-width: 769px) {
  .default-layout .content {
    padding: 50px 0;
  }
}

/* ===================
ALL: Theme
=================== */

.header-container {
  position: relative;
  z-index: 1010;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(255,255,255,0.9);
  height: 60px;
}
#responsive-head {
  display: block;
  margin: 0 auto;
}
.title {
  color: white;
}
h2 {
  font-size: 2em;
  font-weight: normal;
  margin: 0;
}
h2 .small-word {
  font-size: 0.5em;
  display: block;
  margin-bottom: 28px;
}
h3 {
  font-size: 1.5em;
}
h3 .small-word {
  font-size: 0.5em;
  display: block;
}
h4 {
  font-size: 1.2em;
  color: #222;
}
.sp-hidden {
  display:none;
}
.sp-none {
  display: none;
}
.sp-br {
  display: block;
}
.pc-left-margin10 {
  margin-left: 0;
}
p.tc {
  text-align: center;
}
p.tr {
  text-align: right;
}
ul.default-list{
 margin: 10px 0;
}
ul.default-list li{
 margin-left: 1.5em;
}
em {
 font-weight: bold;
 font-style: normal;
}
/* ここからスクロールアニメーション */
.scroll {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-bottom: 35px;
  z-index: 998;
}
.scroll .scroll-inner {
  margin: 0 auto;
  width: 32px;
  height: 50px;
  background-image: url(../images/wheel.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 53% top;
  -webkit-animation: wheel_move 2s infinite ease;
  animation: wheel_move 2s infinite ease;
  color: #FFFFFF;
  text-align: left;
}
.scroll .scroll-inner .icon-for-ie {
  width: 32px;
  height: 50px;
}
.scroll svg.icon {
  width: 32px;
  height: 50px;
  fill: currentColor;
}
@keyframes wheel_move {
 0% {
background-position: 53% 0px;
}
 50% {
background-position: 53% 10px;
}
 100% {
background-position: 53% 0px;
}
}
/* ここまでスクロールアニメーション */

.icon-svg path,
.icon-svg polygon,
.icon-svg rect {
  color: #fff;
  fill: currentColor;
}

/* ---------------------------------
  layout style
  ---------------------------------*/
.layout {
  display:-ms-flexbox;
  display:flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content:center;
  
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:center;
}
ul.layout {
  padding: 0; /*リスト要素に使われた時に初期設定paddingをなくす*/
}

.layout > *,
.layout.one_half > *,
.layout.one_third > *,
.layout.two_column > *{
  width: 100%;
}

.layout.card {
  list-style: none;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 40px;
}
.layout.card > li {
  box-sizing: border-box;
  /*padding: 10px;*/
  margin: 10px;
  
  border: solid 1px #cccccc;
  border-radius: 5px;
  overflow: hidden;
  
  /*max-width: calc( 33% - 20px + 2px);*/
  
  position: relative;
  
}
.layout.card.no-border > li {
  border:none;
  border-radius: 0px;
}


.layout.card li .img-box {
  /*padding: 10px;*/
  background-color: #B1B1B1;
}
.layout.card li .img-box  img {
  width: 100%;
  height: auto;
}

.layout.card li .contents-box {
  padding: 10px;
}
.layout.card li .contents-box > h3 {
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 1;
  padding: 15px 0 20px 0;
  color: #1B60AD;
}
.layout.card li .contents-box > p {
  margin-bottom: 30px;
}
.layout.card .card-link {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.layout.card.no-border li .img-box{
  border: solid 1px #666666;
  min-height: 1px;
}
.layout.card.no-border li .contents-box {
  text-align: center;
  padding: 0;
}
.layout.card.no-border li .contents-box > h3 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 15px 0;
  color: #222;
}
.layout.card.no-border li .contents-box > p {
  line-height: 1.5;
  color: #9D9D9D;
}

.layout.card.horizontal li {
  display:-ms-flexbox;
  display:flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.layout.card.horizontal li .img-box{
  width: 98px;
  min-height: 140px;
  height: 100%;
}
.layout.card.horizontal li .contents-box {
  width: calc( 100% - 98px);
  padding: 0 35px 0 15px;
}
.layout.card.horizontal li .contents-box > h4 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #222;
  margin-top: 5px;
}
.layout.card.horizontal li .contents-box > p {
  font-size: 12px;
  font-size: 1.2rem;
  color: #9D9D9D;
  margin-bottom: 0;
}
.layout.card.horizontal .card-link {
  position: absolute;
  right: 14px;
  bottom: calc(50% - 14px);
}

.layout.news-nav > div {
  width: 33%;
    
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content:space-between;
}

.stretched-link::after{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0)
}


/*横並びのレイアウトスタイル*/
.layout.container {
  align-items: flex-start;
  width: 100%;
}

.layout.container div img {
  width: 100%;
  height: auto;
}

.layout.container.col-pattern-1 > div {
  width: 50%;
}

.layout.container.col-pattern-1 > div:first-child {
  width: calc(50% - 30px);
  margin-right: 30px;
}

@media only screen and (max-width: 767px) {
.layout.container{
  display: block;
}

.layout.container.col-pattern-1 > div,
.layout.container.col-pattern-1 > div:first-child {
  width: 100%;
}
}

/*flexboxを使用したテーブルスタイル*/
dl.layout {
  width: 100%;
  align-items: stretch;
}
dl.layout dt, .dl-flex-list dd {
  box-sizing: border-box;
}
dl.layout dt {
  display: flex;
  align-items: center;
  width: 30%;
  padding: 20px;
  color: #fff;
  font-weight:bold;
  background-color: #31708f;
  border-bottom: 4px solid #fff;
}
dl.layout dt:last-of-type,
dl.layout dd:last-of-type {
  border: none;
}
dl.layout dd {
  display: flex;
  align-items: center;
  width: 70%;
  margin-left: 0;
  padding: 20px;
  background-color: #f4f4f4;
  border-bottom: 4px solid #fff;
}
dl.layout dd img {
  width: 70%;
  height: auto;
  margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  dl.layout dd img {
  width: 100%;
  }
  dl.layout dt,dl.layout dd{
  display: block;
  width: 100%;
  padding: 3%;
  }
  dl.layout dt{
  border-bottom: none;
  }
}

@media only screen and (min-width: 769px) {
  .layout.one_half > * {
    width: 50%;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
  }
  .layout.one_third > * {
    width: 33%;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
  }
  .layout.two_column {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
      
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items:flex-start;
  }
  
  .layout.card > li {
    max-width: calc( 33% - 20px + 2px);
  }
  .layout.news-nav > div {
    width: 25%;
  }
}


/* ==========================================================================
Author's custom styles
========================================================================== */

/* ==============
MOBILE: grobal navigation
============== */

/* ===============
global navigation
=============== */
#gnav {
  display: none;
  margin-right: 2%;
  text-align: right;
}
#gnav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#gnav a {
  display: block;
  font-size: 1.2em;
  margin-bottom: 10px;
  padding: 16px 0;
  text-align: center;
  color: #37547e;
}
#gnav a:hover {
  color: #4881d4;
}
#gnav .small-word {
  display: block;
  font-size: 0.7em;
  line-height: 1em;
}
#gnav ul .have-child-menu {
  /*position: relative;*/
}
#gnav ul .have-child-menu .have-child-menu-effect {
  background-image: url(../images/icon-gnav-arrow-close.svg);
  background-repeat: no-repeat;
  background-position: center 92%;
  background-size: 8px;
  cursor: default;
}
#gnav ul .have-child-menu:hover .have-child-menu-effect {
  background-color: #2f4b7a;
  background-image: url(../images/icon-gnav-arrow-open.svg);
  color: #fff;
}
#gnav ul .have-child-menu .child-menu-box {
  display: none;
}
#gnav ul .have-child-menu .child-menu {
  display: none;
}

#gnav ul .have-child-menu .child-menu-box {
  width: 100vw;
  background-color: #3d547b;
  padding: 20px 0;;
}
#gnav ul .have-child-menu .child-menu-box > .child-menu-wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

#gnav ul .have-child-menu .child-menu.btn.layout {
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
  
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  
}
#gnav ul .have-child-menu .child-menu.btn li {
  display: block;
  border: 1px solid #bfdbf2;
  border-radius: 5px;
  position: relative;
}
#gnav ul .have-child-menu .child-menu.btn li:hover {
  background-color: rgba(255,255,255,0.40);
}
#gnav ul .have-child-menu .child-menu.btn li.external-link:after {
  right: 10px;
}
#gnav ul .have-child-menu .child-menu.btn.product-nav.layout > li,
#gnav ul .have-child-menu .child-menu.btn.service-nav.layout > li {
  width: 50%;
  max-width: calc(50% - 10px - 2px);
  margin: 5px;
  padding: 15px 10px;
  
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content:space-between;
  
  text-align: center;
  color: #fff;
}
#gnav ul .have-child-menu .child-menu.btn.product-nav.layout > li {
  padding: 15px 13px 15px 7px;
}

#gnav ul .have-child-menu .child-menu.btn li > img {
  display: block;
  margin: 0 auto 10px auto;
}
#gnav ul .have-child-menu .child-menu.btn li > a {
  display: block;
  color: #fff;
  padding: 0;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.5;
}
#gnav ul .have-child-menu .child-menu.btn.product-nav li a .main-name {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
}

#gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.txt-list {
  width: 100%;
  display: block;
  margin-top: 20px;
}
#gnav ul .have-child-menu .child-menu.txt-list > li {
  text-align: left;
  display: block;
  margin-right: 10px;
}
#gnav ul .have-child-menu .child-menu.txt-list li > a {
  color: #fff;
  padding: 16px 8px;
  font-size: 16px;
  font-size: 1.6rem;
}
#gnav ul .have-child-menu .child-menu.txt-list li > a.external-link::after {
  position: relative;
  display: inline-block;
  top: auto;
  right:auto;
  margin-left: 6px;
}

#gnav ul .have-child-menu .child-menu.txt-list li:hover a {
  text-decoration: underline;
}

.logo-box {
  float: left;
  display: inline-block;
  padding: 12px 0;
}
.logo-box img {
  width: 200px;
}
#gnav .header-contact {
  border: 2px solid #37547e;
  padding: 5px 30px;
  vertical-align: top;
  margin-top: 10px;
}
#gnav .header-contact:hover {
  border: 2px solid #37547e;
  color: #fff;
  background-color: #37547e;
}

@media only screen and (min-width: 769px) {
  #gnav ul .have-child-menu .child-menu-box {
    display: none;
  }
  #gnav ul .have-child-menu .child-menu {
    display: none;
  }
  #gnav ul .have-child-menu .child-menu-box {
    position: absolute;
    left: 0;
    padding: 20px 15px;
  }
  #gnav ul .have-child-menu:hover .child-menu-box {
    display: block;
  }
  #gnav ul .have-child-menu .child-menu.txt-list li > a {
    padding: 8px 0 10px 0;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1;
  }
  /*
  #gnav ul .have-child-menu .child-menu.txt-list li > a.external-link::after {
    right: calc( (12px + 6px) * -1 );
    margin-left: 0px;
  }
  */
}

/* プロダクトメニューのレスポンシブ設定 ------------------------ */
@media only screen and (min-width: 769px) {
  #gnav ul .have-child-menu .child-menu.btn.product-nav.layout > li {
    width: 33%;
    max-width: calc(33% - 10px - 2px);
    min-width: 174px;
    padding: 15px 10px;
  }
  #gnav ul .have-child-menu .child-menu.btn.product-nav li a .main-name {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
  }
}

@media only screen and (min-width: 961px) {
  #gnav ul .have-child-menu .child-menu.btn.product-nav.layout > li {
    width: 20%;
    max-width: calc(20% - 10px - 2px);
  }
}

/* サービスメニューのレスポンシブ設定 ------------------------ */
@media only screen and (min-width: 769px) {
  #gnav ul .have-child-menu .child-menu.btn.service-nav.layout > li {
    width: 50%;
    max-width: calc(50% - 10px - 2px);
    min-width: 148px;
    padding: 20px 10px;
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.btn.service-nav {
    width: calc( 100% - 340px);
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.txt-list {
    width: 320px;
    margin-left: 20px;
    margin-top: 0;
    display: flex;
    flex-flow: column wrap;
    height: auto;
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout .child-menu.txt-list a {
    text-align: left;
    line-height: 1.5;
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.txt-list a > br {
    display: none;
  }
}

@media only screen and (min-width: 846px) {
  #gnav ul .have-child-menu .child-menu.btn.service-nav.layout > li {
    width: 33%;
    max-width: calc(33% - 10px - 2px);
  }
}

@media only screen and (min-width: 1261px) {
  #gnav ul .have-child-menu .child-menu.btn.service-nav.layout > li {
    width: 25%;
    max-width: calc(25% - 10px - 2px);
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.btn.service-nav {
    width: 74%;
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.txt-list {
    width: 24%;
    margin-left: 2%;
    flex-flow: column wrap;
  }
  #gnav ul .have-child-menu .child-menu-box .child-menu-wrapper.layout > .child-menu.txt-list a > br {
    display: inline;
  }
}


/* ===============
top main-img
=============== */

#top-main {
  height: 100vh;
  position: relative;
}
#top-main .topimg-h1-wrapper {
  position: relative;
  width: 980px;
  height: 0;
  text-align: right;
  margin: 0 auto;
}
#top-main .topimg-wrapper {
  width: 980px;
  margin: 0 auto;
}
#top-main .topimg-wrapper-left img {
  position: relative;
  left: -480px;
  height: 100vh;
}
#top-main .topimg-wrapper-right img {
  position: relative;
  right: -592px;
  height: 100vh;
  top: -100vh;
}
#top-main h1 {
  position: relative;
  z-index: 600;
  text-align: left;
  font-size: 1em;
  color: #fff;
  font-weight: normal;
  display: inline-block;
}
#top-main h1 svg {
  text-align: center;
  display: block;
  margin: auto;
  padding-bottom: 2em;
}

#top-main .topimg-wrapper {
  overflow: hidden;
}
#top-main .topimg-wrapper .top-slide {
  width: 50%;
  height: 100%;
  display: block;
  position: absolute;
  min-height: 500px;
}
#top-main .topimg-wrapper .overlay1 {
  position: absolute;
  background-image: url(../images/main-slide-overlay.png);
  background-size: cover;
  background-repeat: repeat-x;
  background-position: left;
  z-index: 300;
  min-width: 300px;
  min-height: 600px;
  width: 100%;
  left: -200px;
}
#top-main .topimg-wrapper .topimg1 {
  /*background-color: #000;*/
  z-index: 200;
  min-width: 300px;
  max-width: 600px;
  min-height: 600px;
  transform: skewX(-16deg);
  left: -150px;
  overflow: hidden;
}
#top-main .topimg-wrapper .topimg1 .bg-topimg1{
  background-image: url(../images/main-slide1.jpg);
  background-repeat: no-repeat;
  background-size: auto 130%;
  background-position: 80px bottom;
  transform: skewX(16deg);
  width: 300%;
  height: 100%;
}
#top-main .topimg-wrapper .topimg2 {
  background-image: url(../images/main-slide2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
  min-height: 600px;
  width: 100vw;
  left: -130px;
}
#top-main .topimg-wrapper .topimg3 {
  background-color: #000;
  z-index: 400;
  right: -276px;
  min-width: 200px;
  min-height: 600px;
  width: 50%;
  transform: skewX(-16deg);
  overflow: hidden;
}
#top-main .topimg-wrapper .topimg3 .overlay2 {
  width: 100%;
  height: 100%;
  margin-left: -200px;
  background-image: url(../images/main-slide-overlay.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: right;
  transform: skewX(16deg);
}

/* ===============
service
=============== */
/*
.service {
  position: relative;
  height: 100vh;
  min-height: 460px;
}

.service.service-chaild {
  max-height: 500px;
}
.service.ruby {
  height: 100vh;
  min-height: 460px;
}
*/
.default-layout .content-heading.other-service {
  margin: 40px 0;
}

.card .img-box {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  min-height: 150px;
  width: 100%;
  position: relative;
}
.card.horizontal img-box {
  background-position: center center;
}

.card li .img-box > img.card-icon {
  height: 54px;
  width: 54px;
  position: absolute;
  top: calc(50% - 27px);
  left: calc(50% - 27px);
}

.img-box.ruby {
  background-image: url(../images/bg-card-ror.jpg);
}
.img-box.epub {
  background-image: url(../images/bg-card-epub.jpg);
}
.img-box.app {
  background-image: url(../images/bg-card-app.jpg);
}
.img-box.php {
  background-image: url(../images/bg-card-php.jpg);
}
.img-box.design {
  background-image: url(../images/bg-card-design.jpg);
}
.img-box.web-marketing {
  background-image: url(../images/bg-card-market.jpg);
}
.img-box.manga-translation {
  background-image: url(../images/bg-card-manga.jpg);
}
.img-box.aws {
  background-image: url(../images/bg-card-aws.jpg);
}

.img-box.ai {
  background-image: url("../images/bg-card-ai.jpg");
}
.img-box.manga-epub {
  background-image: url("../images/bg-card-manga-epub.jpg");
}
.img-box.manga-epub-sell {
  background-image: url("../images/bg-card-manga-epub-sell.jpg");
}
.img-box.try {
  background-image: url("/img/index/bg-card-try.jpg");
}
.img-box.nocode {
  background-image: url("../images/bg-card-nocode.jpg");
}
.img-box.v-dev {
  background-image: url("../images/bg-card-v-dev.jpg");
}
.img-box.dx {
  background-image: url("../images/bg-card-dx.jpg");
}

.service-link-wrapper {
  position: absolute;
  top: 50vh;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -25vh auto auto auto;
  height: 380px;
}

.service.service-chaild .service-link-wrapper {
  top: 250px;
  margin: -100px auto auto auto;
}
.service.service-chaild .service-top.manga-translation {
  height: auto;
  background-position: top center, bottom center;
}

.service-link-wrapper .service-name {
  font-weight: normal;
}
.service-link-wrapper .service-name svg {
  display: block;
  margin: auto;
  width: 3em;
  height: 3em;
  margin-bottom:1em;
  text-align: center;
}
.service .service-link a {
  margin-top: 80px;
  border: 2px solid #fff;
  padding: 10px 60px;
}
.service .service-link a {
  color: #fff;
}
.service .service-link a:hover {
  color: #37547e;
  background-color: #fff;
}
.service .card li:hover,
.products .card li:hover{
  transition: 0.4s;
  opacity: 0.7;
}


.news {
  background-color: #ffffff;
}
#ror-news.news {
  background-color: #f4f4f4;
}
#front-page .news .content {
  max-width: 800px;
}

.news-nav {
  text-align: center;
  border-bottom: #9D9D9D solid 1px;
  padding: 20px 0;
  margin-bottom: 28px;
}
.news-nav input[type="radio"] {
  display: none;
}
.news-nav label {
  display: inline-block;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 4px;
  padding: 5px 8px;
  min-width: 80px;
}
.news-nav input[type="radio"]:checked + label {
  background-color: #1B60AD;
  color: #ffffff;
  font-weight: bold;
}

.news-list {
  height: calc(52px * 6);
  overflow-y: scroll;
}

.news-list li {
  list-style: none;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 12px 0;
  
  
  display:-ms-flexbox;
  display:flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.news-list li > time,
.news-list li > a {
  width: 100%;
}
.news-list li > a:hover {
  text-decoration: underline;
}

.default-layout .news .link-btn {
  max-width: 250px;
  margin: 38px auto 0 auto;
  padding: 5px 38px 5px 22px; 
}

@media only screen and (min-width: 769px) {
  .news-list li > time{
  width: 110px;
}
.news-list li > a {
  width: calc(100% - 110px);
}
}

/* ===============
slider
=============== */

.large-content {
  max-width: 1050px;
  margin: 0 auto;
  padding: 50px 0;
}

.content-overview {
  text-align: center;
  margin: 0 2%;
}
.content-overview .content-heading .small-word {
  margin-bottom: 10px;
}
.slider {
  margin: 50px 0;
}
.slider li {
  margin: 0 10px;
}
.news .large-content {
  padding-top: 100px;
}
.news.normal-pd .large-content {
  padding-top: 50px;
}
.news .category {
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
}
.news .category.sysdev {
  color: #862651;
}
.news .category.infra {
  color: #554481;
}
.news .category.ittips {
  color: #126f94;
}
.news .category.notice {
  color: #293c8e;
}
.news .category.itlife {
  color: #6c9500;
}
.news .category.design {
  color: #01b398;
}
.news .category .small-word {
  display: block;
  color: #9d9d9d;
  font-weight: normal;
  font-size: 0.8em;
  margin-bottom: 10px;
}
.news .thumbnail-wrapper {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #666;
}
.news .thumbnail-wrapper .thumbnail {
  width: 100%;
  margin: auto;
  opacity: 0.6;
  filter: alpha(opacity=60);
  position: absolute;
  top: -50%;
  bottom: -50%;
}
.news .thumbnail-wrapper .thumbnail:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.news .title-name {
  font-size: 1.2em;
  color: #222;
  margin: 10px 2% 20px;
  word-break: break-all;
  height: 4em;
  overflow: hidden;
}
.news .year,
.news .date {
  font-size: 1.4em;
  margin-bottom: 20px;
  color: #757575;
}
.news .date {
  font-size: 1.6em;
  font-weight: bold;
}
.more-link-bg-bl {
  clear: both;
}
.more-detail-link {
  display: inline-block;
  color: #1b60ad;
  font-size: 1.2em;
  font-weight: bold;
  position: relative;
}
.more-detail-link::after {
  position: absolute;
  top: 3px;
  right: -30px;
  width: 30px;
  height: 20px;
  content: "";
  background-image: url(../images/icon-arrow.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right;
}
.more-detail-link:hover {
  color: #222;
  text-decoration: underline;
}
.more-link-bg-bl {
  height: 60px;
  width: 100%;
  background-image: url(../images/bg-more-link-bl.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
.more-link-bg-bl.no-bl {
  background-image: none;
  background-color: #E1E1E1;
}
.more-link {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  color: #222;
  padding: 18px 0;
  position: relative;
}
.more-link::before,
.more-link::after {
  position: absolute;
  top: 21px;
  width: 30px;
  height: 20px;
  content: "";
  background-repeat: no-repeat;
  background-size: 20px;
}
.more-link::before {
  left: -30px;
  background-image: url(../images/icon-list.svg);
}
.more-link::after {
  right: -30px;
  background-image: url(../images/icon-arrow.svg);
  background-position: right;
}
.more-link:hover {
  text-decoration: underline;
}


/* ===============
pickup
=============== */

/*
.pickup {
  background-color: #fff;
  width: 100%;
  position: relative;
}
.pickup-info-overview {
  text-align: center;
  margin-bottom: 60px;
}
.pickup-info-overview h2 {
  padding-top: 60px;
}
.pickup-list ul {
  width: 1080px;
  margin: 0 auto;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row;
  flex-direction: row;
  flex-wrap: wrap;

  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items:stretch;
}
.pickup-list ul li {
  float: left;
  list-style: none;
  margin-left: -1px;
  margin-bottom: 60px;
  text-align: center;
}
.pickup .pickup-list-img {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #666;
  text-align: left;
}
.pickup .pickup-list-img img {
  width: 101%;
  margin: auto;
  opacity: 0.6;
  filter: alpha(opacity=60);
  position: absolute;
  top: -50%;
  bottom: -50%;
}
.pickup .pickup-list-img img:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.pickup h4 {
  margin: 20px 0;
}
.pickup h4 .small-word {
  display: block;
  color: #9d9d9d;
  font-weight: normal;
}
.more-link-bg-gr {
  clear: both;
  text-align: center;
  background-color: #f4f4f4;
}
*/

/* ===============
contact
=============== */

.footer-contact {
  text-align: center;
}
.footer-contact .contact-bl-bg {
  position: relative;
  text-align: center;
  background-image: url(../images/bg-contact-bl.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer-contact .contact-bg {
  position: absolute;
  width: 518px;
  height: 100%;
  bottom: 0;
  right: -83px;
  margin: auto;
  transform: skewX(-16deg);
  overflow: hidden;
}
.footer-contact .contact-bg img {
  transform: skewX(16deg);
  width: 100%;
  margin-left: -170px;
  margin-top: -20px;
}
.footer-contact .contact-info-wrapper {
  color: #fff;
}
.footer-contact ul li .web-link-arrow:hover {
  background-color: #37547e;
}
.footer-contact ul li h3 {
  margin-bottom: 20px;
}
.footer-contact p .telephone-number {
  font-size: 1.6em;
  margin-left: 5px;
}
.footer-contact .reception-time {
  font-size: 0.75em;
}
.footer-contact .web-contact-link {
  padding-top: 10px;
  font-size: 1.4em;
}
.footer-contact .contact-note {
  margin-top: 20px;
  font-weight: bold;
}
/* ===============
access
=============== */
.footer-access {
  position: relative;
  text-align: left;
  clear: both;
}
.footer-access #gmaps {
  width: 100%;
  height: 482px;
  position: relative;
}
#gmaps.lazyloaded {
  background-image: url('../images/staticmap.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
}
.footer-access dl {
  margin-bottom: 40px;
}
.footer-access a.maps-link {
  border: 2px solid #222;
  color: #222;
}
.footer-access a.maps-link:hover {
  color: #fff;
  background-color: #222;
}
.footer-access .access-overview h3 {
  margin: 0 auto 1em;
  text-align: center;
  font-weight: lighter;
}
.footer-access .access-overview p {
  margin-bottom: 1.5em;
}
.footer-access .access-overview dt {
  font-weight: bold;
}
/* ===============
footer
=============== */
.footer-container {
  position: relative;
  z-index: 999;
}
.footer-bottom-wrapper {
  background-color: #fff;
  color: #222;
}
.footer-bottom .copyright-wrapper a:hover {
  text-decoration: underline;
}

/* ===================
404
=================== */
.page-not-found .message-box {
  padding: 30px;
  background-color: #fff;
}
.page-not-found .message-box b {
  font-size: 17px;
  font-size: 1.7rem;
}

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */
#gnav ul li {
  display: inline;
}
.oldie #gnav a {
  margin: 0 0.7%;
}
/* ========================
    INTERMEDIATE: common css
   ======================== */
.sp-img {
  display: block;
}
.pc-img {
  display: none;
}
/* ====================
    INTERMEDIATE: grobal navigation
   ==================== */
#gnav a {
  display: inline-block;
  padding: 8px 2%;
  margin-bottom: 0;
}#gnav li:first-child a {
  margin-left: 0px;
}
#gnav li:last-child a {
  margin-right: 0px;
}
.logo-box {
  margin-left: 2%;
}
.logo-box .bps-logo-white {
  display: none;
}
#responsive-head {
  display: block;
  position: relative;
}
.header-container.active {
  background-color: rgba(64, 92, 132, 0.95);
}
.header-container.active .logo-box .bps-logo,
.header-container.active #mobile-gnav .mobile-menu-btn {
  display: none;
}
.header-container.active .logo-box .bps-logo-white,
.header-container.active #mobile-gnav .mobile-close-btn {
  display: block;
}
.header-container.active #gnav {
  display: block;
}
.header-container.active #gnav ul {
  position: fixed;
  top: 60px;
  width: 100%;
}
.header-container.active #gnav ul li {
  display: block;
  text-align: center;
}
.header-container.active #gnav .main-menu {
  height: calc(100% - 60px);
  overflow: auto;
}
.header-container.active #gnav .main-menu > li > a,
.header-container.active #gnav .main-menu > li:last-child {
  background-color: rgba(55, 83, 125, 0.9);
  padding: 10px 0;
}
.header-container.active #gnav .main-menu > li:last-child {
  padding: 10px 0 30px;
}
.header-container.active #gnav .main-menu .have-child-menu .child-menu {
  position: static;
  /*display: none;*/
  max-height: none;
  overflow-y: auto;
}
.header-container.active #gnav .main-menu .have-child-menu .child-menu li a {
  /*width: 100%;
  background-color: rgba(103, 125, 157, 0.9);
  border: none;*/
}
.header-container.active #gnav .main-menu .have-child-menu .have-child-menu-effect {
  cursor: pointer;
  background-image: none;
}
.header-container.active #gnav a {
  display: block;
  color: #fff;
}
.header-container.active #gnav .main-menu .header-contact {
  border-color: #fff;
  margin: 0;
  display: inline-block;
  padding: 5px 30px;
  background: none
}
.header-container.active #gnav .main-menu .header-contact:hover {
  color: #37547e;
  background-color: #fff;
}
#mobile-gnav {
  float: right;
  line-height: 1em;
  height: 60px;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5em;
  background-color: #38537b;
  padding-bottom: 1%;
}
#mobile-gnav .mobile-menu-btn,
#mobile-gnav .mobile-close-btn {
  margin: 10px 0 0;
  color: #fff;
  width: 80px;
  position: relative;
}
#mobile-gnav .mobile-menu-btn::after,
#mobile-gnav .mobile-close-btn::after {
  width: 12px;
  height: 7px;
  content: "";
  background-image: url(../images/icon-gnav-arrow-open.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  position: absolute;
  bottom: -10px;
  right: 40%
}
#mobile-gnav .mobile-close-btn::after {
  transform: rotate(180deg);
}
#mobile-gnav .mobile-menu-btn .small-word,
#mobile-gnav .mobile-close-btn .small-word {
  display: block;
  font-size: 0.6em;
}
#mobile-gnav .mobile-close-btn {
  display: none;
}
h2, h3, p {
  margin: 0 2%;
}
.footer-contact .contact-wrapper, .footer-bottom, #top-main .topimg-wrapper, #top-main .topimg-h1-wrapper, .pickup-list ul li {
  width: 96%;
  margin: 0 auto;
}
/* ============
INTERMEDIATE: key
============ */
#top-main .topimg-wrapper-left {
  display: none;
}
#top-main .topimg-wrapper-right {
  display: none;
}
#top-main {
  height: 100vh;
  min-height: 600px;
  position: relative;
}
#top-main .topimg-h1-wrapper {
  text-align: center;
}
.ie #top-main .topimg-h1-wrapper .icon-for-ie {
  display: block;
  margin: auto;
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
  width: 40%;
  max-width: 150px;
  height: auto;
}
#top-main h1 {
  width: 52%;
}
#top-main h1 {
  position: relative;
  z-index: 600;
  text-align: left;
  font-size: 16px;
  font-size: 1.6rem;
  color: #fff;
  font-weight: normal;
  display: inline-block;
  top: 50vh;
  width: 90%;
  margin-top: -50%;
}
#top-main h1 svg {
  width: 40%;
}

#top-main .topimg-wrapper .top-slide {
  width: 100%;
  min-height: 500px;
}

#top-main .topimg-wrapper .overlay1 {
  left: 0;
}

#top-main .topimg-wrapper .topimg1 {
  /*background-color: #000;*/
  z-index: 200;
  min-width: auto;
  max-width: 100%;
  min-height: auto;
  transform: skewY(-16deg);
  top: -25%;
  left: 0;
  width: 100%;
  height: 80%;
}
#top-main .topimg-wrapper .topimg1 .bg-topimg1{
  background-size: cover;
  background-position: bottom;
  transform: skewY(16deg);
  width: 100%;
  height: 130%;
}
#top-main .topimg-wrapper .topimg2 {
  left: 0;
}
#top-main .topimg-wrapper .topimg3 {
  display: none;
}

/* ============
INTERMEDIATE: vision
============ */
.vision {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 10% 15px 80% 15px;
  background-image: url(../images/bg-vision-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.vision h2, .vision h3{
  margin: 0;
  margin-bottom: 16px;
}

/* ============
INTERMEDIATE: service
============ */
.service {
  background-color: #ffffff;
}

/*
.service {
  overflow: hidden;
}
.service-overview {
  background: rgba(255,255,255,0.5);
  width: 100%;
  height: 45%;
  transform: skewY(-16deg);
  position: absolute;
  top: -16%;
  z-index: 100;
}
.service-overview.move {
  left: -100%;
}
.service-overview.move.active {
  left: -33%;
}
.service-overview.move.animate {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.service-info-wrapper {
  position: relative;
  top: 70%;
  transform: skewY(16deg);
}
.service-info-wrapper p {
  width: 96%;
  display:none;
}
.service-link-wrapper {
  /*top: 65%;*//*
}
.service .service-link {
  margin-top: 4em;
}
*/

/* ============
INTERMEDIATE: news
============ */

/*
.more-link-bg-bl {
  margin: 0;
}

.more-link-bg-bl {
  background-size: 1100px;
}
*/

/* ============
INTERMEDIATE: pickup
============ */
/*
.pickup-list ul {
  width: 100%;
}
.pickup-list ul li {
  float: none;
  list-style: none;
  margin-bottom: 8%;
  text-align: center;
}
.pickup-info-overview h2 {
  padding-top: 10%;
}
.pickup .pickup-list-img {
  width: 100%;
  height: 40vw;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.pickup .pickup-list-img img {
  width: 105%;
  margin: auto;
  opacity: 0.7;
  filter: alpha(opacity=70);
  position: absolute;
  top: -50%;
  bottom: -50%;
}
.more-link-bg-gr {
margin: 0;
}
*/

/* ============
INTERMEDIATE: contact
============ */
.footer-contact .contact-bg {
  display: none;
}
.footer-contact .contact-bl-bg {
  background-size: 1100px;
  background-position:top center;
  background-repeat: repeat-y;
}
.contact-info-wrapper {
  padding: 10% 0;
}
.footer-contact ul li {
  float: none;
  list-style: none;
  margin: 8% 0;
}
.footer-contact ul li .web-link-arrow,
.footer-contact ul li .offline-link-arrow {
  display: block;
  color: #fff;
  padding: 5%;
  border: 2px solid #fff;
  position: relative;
}
.footer-contact ul li a.web-link-arrow::after,
.footer-contact ul li a.offline-link-arrow::after {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  content: "";
  background-image: url(../images/icon-white-arrow.svg);
  background-repeat: no-repeat;
  background-size: 16px;
}
.footer-contact ul li div.offline-link-arrow {
  display: none;
}
.footer-contact ul li h3 {
  font-weight: normal;
}
.footer-contact ul li p {
  font-weight: bold;
}
.footer-contact ul li .reception-time {
  font-weight: normal;
}
/* ============
INTERMEDIATE: access
============ */
.footer-access #gmaps {
  top: -160px;
}
.footer-access {
  overflow: hidden;
  background-color: #fff;
}
.footer-access .access-sp-deco {
  background-color: #fff;
  transform: skewY(-16deg);
  height: 160px;
  top: -160px;
  position: relative;
  z-index: 1;
}
.footer-access .access-overview-wrapper {
  background-color: #fff;
  transform: skewY(-16deg);
  margin-top: -223px;
}
.footer-access .access-overview {
  margin-left: 0;
  padding: 70px 12% 50px;
  transform: skewY(16deg);
  text-align: center;
}
.footer-access .access-overview h3 {
  background-image: none;
}
.footer-access dl {
  display: inline-block;
  text-align: left;
}
.footer-access .access-overview p {
  text-align: center;
}
.footer-access a.maps-link {
  padding: 1em 3em;
}
/* ============
INTERMEDIATE: footer
============ */
.footer-bottom {
  background-color: #fff;
  padding: 20px 0;
}
.footer-menu-wrapper{
  background-color: #1E252E;
  padding: 0 15px;
}
h3.footer-logo {
  margin: 0 0 16px 0;
}
.footer-logo img {
  height: 40px;
  width: auto;
  margin-left: -20px;
}

.footer-nav {
  margin: 0 0 16px 0;
}
.footer-nav dt {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
}
.footer-nav dd > a {
  color: #ffffff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  position: relative;
  padding-left: 10px;
  display: inline-block;
}
.footer-nav dd > a.external-link {
  font-weight: normal;
}
.footer-nav a::before {
  content: "-";
  position: absolute;
  left: 0;
}
.footer-nav a:hover {
  text-decoration: underline;
}
.co-menu {
  border-bottom: 1px solid #ffffff;
  padding: 50px 0;
}
.tr-menu {
  padding: 50px 0;
}
.tr-menu .footer-logo img {
  height: 24px;
  width: auto;
}

.footer-bottom-wrapper {
  text-align: center;
}
.footer-bottom .footer-logo-wrapper p {
  margin: 5%;
  display: inline-block;
}

@media print, screen and (min-width: 768px) {
  .footer-menu-wrapper{
    padding: 0 20px;
  }

  .footer-menu.layout {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 50px 0;
    
    max-width: 1400px;
    margin: 0 auto;
  }
  h3.footer-logo {
    margin: 0 0 40px 0;
  }
  
  .co-menu {
    border-bottom: none;
    border-right: 1px solid #ffffff;
    
    width: 50%;
    padding: 0 50px 0 30px;
  }
  .co-menu-box.layout{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    
    margin-left: -25px;
    margin-right: -25px;

    max-height: 1200px;
  }
  .co-menu-box > dl {
    width: 100%;
    padding: 0 25px;
    margin-bottom: 25px;
  }
  .co-menu-box > dl:last-child {
    margin-bottom: 0;
  }

  .tr-menu {
    width: 50%;
    padding: 0 30px 0 50px;
  }
  
  .footer-bottom .copyright-wrapper {
    text-align: left;
  }
  .footer-bottom .footer-logo-wrapper {
    text-align: right;
  }
  .footer-bottom .footer-logo-wrapper p {
    margin: 0 10px;
  }
}

@media print, screen and (min-width: 930px) {
  .co-menu {
    width: calc(100% - 290px);
  }
  .co-menu-box.layout{
    max-height: 710px;
  }
  .co-menu-box > dl {
    width: 50%;
    margin-bottom: 0;
  }
  .co-menu-box > dl.short {
    margin-bottom: 25px;
  }
  .tr-menu {
    width: 290px;
  }
}

@media print, screen and (min-width: 1125px) {
  .co-menu-box.layout{
    max-height: 690px;
  }
}

@media print, screen and (min-width: 1260px) {
  .co-menu-box.layout{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: nowrap;

    margin-left: -25px;
    margin-right: -25px;
    width: calc(100% + 50px);
  }
  .co-menu-box > dl {
    width: 40%;
    min-width: 370px;
    margin-bottom: 0;
  }
  .co-menu-box > dl.short {
    width: 20%;
    min-width: unset;
    margin-bottom: 0;
  }
  .co-menu-box > dl.mid {
    width: 40%;
    min-width: 360px;
  }
}

/* ===================
404
=================== */
.contact-layout .content.page-not-found {
  padding: 24vw 0 60px 0;
}
.page-not-found h1 {
  margin: 0 0 30px 0;
  font-size: 31.9px;
  font-size: 3.19rem;
  font-weight: bold;
}
.page-not-found .message-box p {
  text-align: left;
}
.page-not-found .button-wrapper {
  margin-top: 30px;
  text-align: center;
}
.page-not-found .button-wrapper .back-to-top-button {
  width: 100%;
  display: inline-block;
  border: 2px solid #37547e;
  padding: 10px 0;
  color: #37547e;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.page-not-found .button-wrapper .back-to-top-button:hover {
  background-color: #37547e;
  color: #f4f4f4;
}
br.sp-hidden {
  display: none;
}


/* ==========================================================================
Media Queries
========================================================================== */

@media print, screen and (min-width: 300px) and (max-width: 767px) {
  .service-overview.move {
    top: -100%;
    left: 0%;
  }
  .service-overview.move.active {
    top: -17%;
    left: 0%;
  }
}
@media print, screen and (min-width: 520px) {
  .ie #top-main .topimg-h1-wrapper .icon-for-ie {
    display: block;
    width: 150px;
    height: 149.77px;
  }
}

@media print, screen and (min-width: 768px) {
/* ====================
WIDE: helper css
==================== */
span.br {
  display: block;
}
.sp-br {
  display: none;
}
.sp-none {
  display: block;
}
.sp-img {
  display: none;
}
.pc-img {
  display: block;
}
.new-line::before {
  content: normal;
  white-space: normal;
}
.sp-hidden {
  display:inline;
}
.pc-left-margin10 {
  margin-left: 10px;
}
.pc-flex {
  display:-ms-flexbox;
  display:flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content:center;
}

/* ============
WIDE: grobal navigation
============ */
.title {
  float: left;
}
#gnav {
  display: block;
  float: right;
  width: 77%;
}
#gnav ul li a {
  padding: 9px 2% 12px 2%;
}
#gnav .header-contact {
  border: 2px solid #37547e;
  padding: 5px 1.5%;
  vertical-align: top;
  margin-top: 10px;
}
#mobile-gnav {
  display: none;
}
/* ============
WIDE: key visual
============ */

#top-main .topimg-wrapper {
  min-width: 980px;
  min-height: 500px;
}

#top-main .topimg-wrapper, #top-main .topimg-h1-wrapper, .vision {
  width: 96%;
  margin: 0 2%;
}
#top-main .topimg-h1-wrapper {
  position: relative;
  height: 0;
  text-align: right;
}
#top-main h1 {
  width: 690px;
  height:88px;
  top: 50vh;
  margin-right: 0px;
  margin-top: -44px;
}
.ie #top-main .topimg-h1-wrapper .icon-for-ie {
  display: inline-block;
  margin: 0;
  width: 95px;
  height: 94.85px;
}
#top-main h1 svg {
  display:inline-block;
  width:95px;
  margin:0;
  padding:0;
  vertical-align:middle;
}
#top-main h1 span {
  display:inline-block;
  width:580px;
  padding-left: 20px;
  vertical-align:middle;
}
#top-main .topimg-wrapper .topimg1 .bg-topimg1{
  margin-top: 25%;
}

/* ===============
WIDE: vision
=============== */
.vision {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px 0 64px 10px;
  background-image: none;
}
.vision-bg-wrapper {
  position: absolute;
  z-index: -1;
  right: -60px;
  top: 0;
  overflow: hidden;
  width: 370px;
  min-height: 416px;
  transform: skewX(-16deg);
}
.vision-bg {
  position: relative;
  right: 70px;
  z-index: -1;
  top: 0;
  background-image: url(../images/bg-vision.png);
  background-position: right center;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 480px;
  width: 510px;
  height: 462px;
  transform: skewX(16deg);
}
.vision h2,
.vision h3,
.vision p {
  width: 60%;
  margin-left:0;
}
.vision h3 {
  margin-bottom: 16px;
}

/* ============
WIDE: service
============ */

.ie #service-ruby .service-box.ruby h3 .icon-for-ie {
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
  margin-bottom: 0.5rem;
  width: 56.09px;
  height: 49.7px;
}
.service .service-link {
  margin-top: 80px;
}
.service-overview {
  position: absolute;
  background-color: #fff;
  height: 100vh;
  min-height: 600px;
  width: 50%;
  left: -33%;
  top: 0;
  transform: skewX(-16deg);
}
.service-link-wrapper {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -140px auto auto auto;
  height: 280px;
}

.service-link-wrapper.epub {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -180px auto auto auto;
  height: 380px;
}

.service-info-wrapper {
  transform: skewX(16deg);
  position: absolute;
  right: 30px;
  top: 80px;
  width: 170px;
}
.service-info-wrapper h2,
.service-info-wrapper p {
  margin-right:0;
  width: 100%;
}
.service-info-wrapper p {
  display: block;
}
/* ============
WIDE: pickup
============ */
.pickup-info-overview h2 {
  padding-top: 60px;
}
.pickup-list ul li {
  float: left;
  width: 33.3%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 30px;
}
.pickup .pickup-list-img {
  height: 150px;
}
.pickup .pickup-list-img img {
  width: 101%;
}
/* ===============
WIDE: contact
=============== */

.footer-contact {
  text-align: center;
  padding: 0;
}
.footer-contact .contact-bl-bg {
  position: relative;
  text-align: center;
  background-image: url(../images/bg-contact-bl.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer-contact .contact-info-wrapper {
  color: #fff;
  padding: 0;
}
.footer-contact h2 {
  padding-top: 60px;
}
.footer-contact ul {
  text-align: center;
  width: 632px;
  height: 24em;
  margin: 0 auto;
}
.footer-contact ul li {
  float: left;
  list-style: none;
  text-align: center;
}
.footer-contact ul li .web-link-arrow,
.footer-contact ul li .offline-link-arrow {
  display: block;
  color: #fff;
  width: 300px;
  height: 13.5em;
  margin: 0px 6px;
  background-position: 272px 134px;
}
.footer-contact ul li a.offline-link-arrow {
  display: none;
}
.footer-contact ul li div.offline-link-arrow {
  display: block;
}
.footer-contact ul li .web-link-arrow:hover {
  background-color: #37547e;
}
.footer-contact ul li h3 {
  margin-bottom: 20px;
}
.footer-contact p .small-word {
  font-size: 1.6em;
  margin-left: 5px;
}
.footer-contact .reception-time {
  font-size: 0.75em;
}
.footer-contact .web-contact-link {
  padding-top: 10px;
  font-size: 1.4em;
}
/* ===============
WIDE: access
=============== */
.footer-access {
  position: relative;
  text-align: left;
  clear: both;
  height: 532px;
}
.footer-access .access-sp-deco {
  display: none;
}
.footer-access #gmaps {
  width: calc(100% - 260px);
  top: 0;
  height: 532px;
  position: absolute;
}
.footer-access dl {
  margin-bottom: 40px;
}
.footer-access a.maps-link {
  padding: 17px 58px;
}
.footer-access a.maps-link:hover {
  color: #fff;
  background-color: #222;
}
.footer-access .access-overview-wrapper {
  background-color: #fff;
  width: 310px;
  position: absolute;
  height: 532px;
  bottom: 0;
  right: 30px;
  margin: auto;
  transform: skewX(-16deg);
}
.footer-access .access-overview {
  width: 340px;
  padding: 25px 20px 25px 40px;
  transform: skewX(16deg);
  text-align: center;
}
.footer-access .access-overview h3 {
  background-image: url(../images/icon-pin-bk.svg);
  background-position: center top;
  background-size: 36px;
  background-repeat: no-repeat;
  padding-top: 40px;
  width: 100px;
}
.footer-access .access-overview .access-guide {
  padding: 0 0 0 13px;
  text-align: left;
}
.footer-access .access-overview .access-guide p {
  margin: 0 0 1.5em 0;
  text-align: left;
}
.footer-contact ul li .offline-link-arrow {
  background-image: none;
}

/* ===================
404
=================== */
.contact-layout .content.page-not-found {
  padding: 60px 0 60px 0;
}
.page-not-found h1 {
  font-size: 48px;
  font-size: 4.8rem;
}
.page-not-found .message-box p {
  text-align: center;
}
.page-not-found .button-wrapper .back-to-top-button {
  width: 320px;
}
br.sp-hidden {
  display: inline;
}
}

@media print, screen and (min-width: 1140px) {
  /* ===============
  Maximal Width header
  =============== */
.header-container #responsive-head {
  margin: 0 auto;
}
/* ===============
Maximal Width KEY
=============== */

#top-main {
  background-image: none;
}
#top-main .topimg-wrapper, #top-main .topimg-h1-wrapper, .vision {
  width: 980px;
  margin: 0 auto;
}
#top-main .topimg-wrapper-left {
  display: block;
}
#top-main .topimg-wrapper-right img {
  top: -100vh;
  right: -592px;
}
#top-main .topimg-wrapper {
  overflow: hidden;
  min-width: 980px;
  min-height: 500px;
}
#top-main .topimg-wrapper .top-slide {
  width: 50%;
  height: 100%;
  display: block;
  position: absolute;
  min-height: 500px;
}
#top-main .topimg-wrapper .overlay1 {
  min-height: 600px;
  width: 100%;
  left: -100px;
  background-size: auto 100%;
}
#top-main .topimg-wrapper .topimg1 {
  min-width: 300px;
  max-width: 600px;
  min-height: 600px;
  transform: skewX(-16deg);
  left: -150px;
  top: 0;
}
#top-main .topimg-wrapper .topimg1 .bg-topimg1{
  background-size: auto 130%;
  background-position: 80px bottom;
  transform: skewX(16deg);
  width: 300%;
  margin-top: 0;
}
#top-main .topimg-wrapper .topimg2 {
  background-repeat: no-repeat;
  background-position: center;
  min-height: 600px;
  width: 100vw;
}

/* ===============
Maximal Width vision
=============== */
.vision {
  padding: 60px 0 68px 20px;
}
.vision-bg {
  background-position: 70% center;
}
.vision p {
  width: 450px;
}
.vision-bg-wrapper {
  right: 7.4%;
  width: 35%;
}
/* ===============
Maximal Width service
=============== */
.service-overview {
  left: -33%;
}

/* ===============
Maximal Width news
=============== */
.more-link-bg-bl {
  background-size: cover;
}

/* ===============
Maximal Width pickup
=============== */
.pickup-list ul {
  width: 987px;
  margin: 0 auto;
}
.pickup-list ul li {
  width: 330px;
  list-style: none;
  margin-left: -1px;
  text-align: center;
}
.pickup .pickup-list-img {
  width: 330px;
  height: 180px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.pickup .pickup-list-img img {
  margin: auto;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
/* ===============
Maximal Width footer
=============== */
.footer-contact .contact-bg {
  display: block;
  position: absolute;
  width: 518px;
  height: 100%;
  bottom: 0;
  right: -173px;
  margin: auto;
  transform: skewX(-16deg);
  overflow: hidden;
}
.footer-contact .contact-bg img {
  transform: skewX(16deg);
  width: 100%;
  margin-left: -290px;
  margin-top: -20px;
}
.footer-contact .contact-wrapper {
  width: 90%;
  margin-left: -220px;
}
.footer-contact .contact-info-wrapper {
  width: 100vw;
}
/*
.footer-bottom {
  width: 980px;
  height: 100px;
  margin: 0 auto;
}
*/
.footer-access .access-overview-wrapper {
  background-color: #fff;
  /*width: 1000px;*/
  width: 330px;
  /*right: -495px;*/
  right: 173px;
}
.footer-access #gmaps {
  width: calc(100% - 420px);
}
.footer-access .access-overview {
  padding: 25px 0px 25px 60px;
}
}

/* ==========================================================================
Helper classes
========================================================================== */

.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix::before, .clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  content: " ";
  clear: both;
  display: block;
}
.clearfix {
  *zoom: 1;
}