/* CSS Document */
@charset "UTF-8";
/*-------------------------------*/
/*マイミュースターガジェット*/
.layMyMustar {
  height: 45px;
  background: #676767;
}
.layMyMustar iframe {
  margin: 0;
  padding: 0;
  width: 100%;
}
@media screen and (max-width:991px) {
  .layMyMustar {
    display: none;
  }
}
/*-------------------------------*/
/*ホーム メインビジュアル*/
.wrapMainVs {
  position: relative;
  /*  height: 585px;*/
  height: 380px;
  padding: 20px 0;
  background: #004ea2 url("/img/pic_01.jpg") repeat-x 50% 50% / auto 100%;
  overflow: hidden;
}
.wrapMainVsImg {
  display: none;
  /*	position: absolute;
	top: 0;
	left:0;
	height:585px;
	width: auto;*/
}
@media screen and (max-width:1500px) {
  .wrapMainVs {
    /*    height: auto;
    padding: 20px 0 30%;*/
  }
}
@media screen and (max-width:991px) {
  .wrapMainVs {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    padding: 0;
    /*    padding: 0 0 60%;*/
  }
  .wrapMainVsImg {
    position: relative;
  }
}
/*.wrapMainVsEle {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}*/
/*.mainVsLink {
  position: absolute;
  top: 140px;
  right: 0;
}
.mainVsLink.displace {
  top: 65px;
}
.mainVsLink a {
  display: inline-block;
  padding: 10px 50px;
  font-size: 0.8rem;
  color: #ffffff;
  background: #004ea2;
  border-radius: 50px;
  text-decoration: none;
}
.mainVsLink a span {
  position: relative;
  padding-left: 14px;
}
.mainVsLink a span:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}*/
@media screen and (max-width:991px) {
  /*  .wrapMainVsEle {
    width: 100%;
  }*/
  /*  .mainVsLink {
    top: 0;
    width: 100%;
  }
  .mainVsLink a {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px;
  }*/
}
/*ホーム メインビジュアルのスライドショー*/
.wrapMainVs {
  background: #ffffff;
}
.mainVsImgSet {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* stacking contextを作成する */
}
.mainVsImgSet > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
  /* 画像の内容を枠にフィットする (IE11ではサポートされていないので、この場合common.jsは
     * background-imageを使用したアプローチに切り替え、background-size等の設定が
     * 有効になる) */
  object-position: 50% 50%;
  object-fit: cover;
  background-position: 50% 50%;
  background-size: cover;
}
.mainVsImgSet > .realize {
  display: block;
}
.mainVsImgSet > .in {
  /* 画像の切り替えを行うために、新しい画像を上に被せてフェードインする */
  animation: 800ms both fade;
  z-index: 2;
  pointer-events: auto;
}
.mainVsImgSet > .out {
  opacity: 1;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width:991px) {
  /* .mainVsImgSetを縦横比固定にし、.wrapMainVsをそれに合わせるようにする */
  #siteMultilang .wrapMainVs {
    padding-bottom: 0;
  }
  .mainVsImgSet {
    position: relative;
    /*    padding-bottom: 40%;*/
    padding-bottom: 30%;
  }
  .mainVsImgSet img.spVsTyp1 {
    object-fit: cover;
    object-position: 30% -55px;
    height: 160%;
  }
}
@media screen and (max-width:374px) {
  .mainVsImgSet img.spVsTyp1 {
    object-position: 30% -40px;
    height: 180%;
  }
}
@media screen and (max-width:991px) {}
/*多言語*/
/*body.eng .wrapMainVs {
  background-image: url("/multilang-common/img/pic_01.jpg");
}*/
/*-------------------------------*/
/*ホーム 電車のご利用サポートエリア*/
/*-------------------------------*/
/*ホーム ボトムエリア サービスのご案内*/
#wrapServiceNav {
  padding: 15% 0 70px;
  background: url("/img/pic_02.jpg") no-repeat 50% 50% / cover;
}
.serviceNav {
  width: 1100px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
/*サービス案内タイトル*/
.headTypServiceNav {
  margin: 0 0 40px;
  text-align: center;
  font-size: 1.4rem;
  color: #ffffff;
  font-weight: 500;
}
/*サービス表示*/
.wrapServiceItem {
  display: flex;
  flex-wrap: wrap;
}
.wrapServiceItem li {
  width: 33.33333333%;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.wrapServiceItem li:nth-child(4), .wrapServiceItem li:nth-child(5), .wrapServiceItem li:nth-child(6) {
  border-bottom: none;
}
.wrapServiceItem li:nth-child(3), .wrapServiceItem li:nth-child(6) {
  border-right: none;
}
.wrapServiceItem li a {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  text-decoration: none;
}
.wrapServiceItem li a dl {
  margin: 0 0 0 20px;
}
.wrapServiceItem li dt {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.wrapServiceItem li dt img {
  margin: 0 0 0 5px;
}
.wrapServiceItem li a:hover dt {
  text-decoration: underline;
}
.wrapServiceItem li a dd {
  padding-top: 8px;
  font-size: 0.9rem;
  color: #676767;
}
.wrapServiceItem li a dt span {
  display: inline-block;
}
.wrapServiceItem li a[target="_blank"] dt span {
  padding-right: 15px;
  background: url("/img/ico_blank_01.png") no-repeat 100% 50% / 8px auto;
}
@media screen and (max-width:991px) {
  #wrapServiceNav {
    padding: 0;
    background: none;
  }
  .serviceNav {
    width: 100%;
    background: #f9f9f9;
  }
  .headTypServiceNav {
    margin: 40px 0 25px;
    color: #676767;
  }
  .headTypServiceNav .layTxt {
    white-space: nowrap;
  }
  .wrapServiceItem {
    display: block;
  }
  .wrapServiceItem li {
    width: 100%;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid #e9e9e9;
  }
  .wrapServiceItem li a dl {
    flex-grow: 1;
  }
}
@media screen and (max-width:374px) {
  .wrapServiceItem li a {
    padding: 20px;
  }
}
/*-------------------------------*/
/*end*/