@charset "utf-8";

/*========== 越後交通トップページ(2020～) ==========*/
/*---------- 各スタイル ----------*/
/* トップ情報 ------------------- */
div#top-info {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 5px;
}

div#top-info > * {
  margin-bottom: 10px;
}

/* トピックス ------------------- */
article#topics {
  max-width: 1010px;/*画像width+外枠左右5px*/
  margin: 0 auto;
  padding: 0;
}

/** トピックススライダー **/
#topics-slider {
  width: 100%;
}

#topics-slider .swiper-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

#topics-slider .swiper-slide > div {
  /*外枠*/
  padding: 5px 5px 3px 5px;
  border: 1px solid #ccc;
}

/*** 印刷 ***/
@media print {
  #topics-slider .swiper-wrapper {
   max-height: 71.5mm;
  }
  
  #topics-slider .swiper-slide > div {
    max-width: 215mm;
  }
  
  #topics-slider .swiper-slide > div img {
    max-width: 215mm;
  }
}

#topics-slider .swiper-slide > div img {
  width: 100%;
  height: auto;
}

/*** Prev/Nextボタン ***/
#topics-slider .swiper-button-prev {
  background-image: url('/contents/components/swiper/images/prev.png') !important;
}

#topics-slider .swiper-button-next {
  background-image: url('/contents/components/swiper/images/next.png') !important;
}

#topics-slider .swiper-button-prev,
#topics-slider .swiper-button-next {
  /*半透明*/
  -ms-filter: "alpha(opacity=70)";/*IE 8,9*/
  zoom: 1;/*IE*/
  -moz-opacity: 0.6;/*FF lt 1.5, Netscape*/
  -khtml-opacity: 0.6;/*Safari 1.x*/
  opacity: 0.6;
}

#topics-slider .swiper-button-prev:hover,
#topics-slider .swiper-button-next:hover {
  /*不透明*/
  -ms-filter: "alpha(opacity=100)";/*IE 8,9*/
  zoom: 1;/*IE*/
  -moz-opacity: 1;/*FF lt 1.5, Netscape*/
  -khtml-opacity: 1;/*Safari 1.x*/
  opacity: 1;
}

/*** コントローラー ***/
#topics .swiper-controller {
  display: table;
  position: relative;/*子要素の相対位置対象*/
  width: 100%;
}

#topics .swiper-controller > .left {
  display: table-cell;
  width: 60px;/*固定幅*/
  height: 100%;
}

#topics .swiper-controller > .right {
  display: table-cell;
  position: relative;/*子要素の相対位置対象*/
  width: auto;/*可変幅*/
  height: 100%;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-color: #ccc;
}

/*** 再生ボタン ***/
#topics .swiper-button-play {
  display: none;
  position: relative;/*:beforeの相対位置対象*/
  width: 60px; 
  height: 30px;/*26px+枠線上下2px*/
  margin: 6px 5px 0 5px;
  cursor: pointer;
  background: white;
  z-index: 1;/*.slider-pagination-wrapperの前面*/
  /*枠線*/
  border-width: 2px;
  border-style: solid;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  /*影*/
  box-shadow: 3px 3px 2px 1px rgba(64,64,64,.2);
  /*テキスト選択不可*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#topics .swiper-button-play:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}

#topics .swiper-button-play.play:before {
  content: url('/contents/img/icon/play.png');
  left: 7px;
  color: #eee;
  color: #00b300\9;/*@IE10以下*/
}

/*@IE10*/
_:-ms-lang(x), #topics .swiper-button-play.play:before {
  color: #eee\9;
}

#topics .swiper-button-play.play {
  border-color: #00b300;
  /*背景色*/
  background: rgb(104,255,104); /* Old browsers */
  background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(0,179,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%,rgba(0,179,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(0,179,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#topics .swiper-button-play.pause:before {
  content: url('/contents/img/icon/pause.png');
  left: 33px;
  color: white;
  color: #999\9;/*@IE10以下*/
}

/*@IE10*/
_:-ms-lang(x), #topics .swiper-button-play.pause:before {
  color: white\9;
}

#topics .swiper-button-play.pause {
  border-color: #999;
  /*背景色*/
  background: rgb(222,222,222); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(153,153,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(153,153,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#topics .swiper-button-play > .pin {
  position: absolute;
  display: block;
  top : 2px;
  width: 22px;
  height: 22px;
  /*角丸*/
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 11px;
  /*アニメーション*/
  -webkit-transition: .2s;
  -moz-transition: .2s;
  transition: .2s;
}

#topics .swiper-button-play.play > .pin {
  right: 2px;
  background: #00b300;
}

#topics .swiper-button-play.pause > .pin {
  right: 2px;
  right: auto\9;/*@IE10以下*/
  left: 2px\9;/*@IE10以下*/
  background: #999;
  /*アニメーション*/
  -webkit-transform:translateX(-30px);
  -ms-transform:translateX(-30px);
  transform:translateX(-30px);
}

/*@IE9,10*/
#topics .swiper-button-play.pause > .pin:not(:target) {
  right: 2px;
  left: auto;
}

/*** サムネイル(スライダー) ***/
#topics-slider-thumbnail {
  display: none;
  position: absolute;/*:beforeの相対位置対象*/
  width: 100%;
  height: 64px;
  top: 0;
  margin: 0;
  padding: 0;
}

#topics-slider-thumbnail .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#topics-slider-thumbnail .swiper-slide {
  display: block;
  margin: 0;
  padding: 0;
}

#topics-slider-thumbnail .swiper-slide > img {
  display: block;
  width: 200px;
  height: auto;
  max-height: 64px;
  margin: 0;
  padding: 0;
  /*Chromeで縮小画像がぼけるのを防ぐ*/
  -webkit-backface-visibility: hidden;
  /*半透明*/
  -ms-filter: "alpha(opacity=50)";/*IE 8,9*/
  zoom: 1;/*IE*/
  -moz-opacity: 0.5;/*FF lt 1.5, Netscape*/
  -khtml-opacity: 0.5;/*Safari 1.x*/
  opacity: 0.5;
  /* アニメーション */
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#topics-slider-thumbnail .swiper-wrapper > li.swiper-slide-active > img {
  /*不透明*/
  -ms-filter: "alpha(opacity=100)";/*IE 8,9*/
  zoom: 1;/*IE*/
  -moz-opacity: 1;/*FF lt 1.5, Netscape*/
  -khtml-opacity: 1;/*Safari 1.x*/
  opacity: 1;
}

/*** ページネーション ***/
#topics .slider-pagination-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  text-align: right;
  padding-top: 10px;
}

#topics-slider-pagination .swiper-pagination-switch/*2.x*/,
#topics-slider-pagination .swiper-pagination-bullet/*3.x*/ {
  display: inline-block;/*for 2.x*/
  width: 21px;
  height: 21px;
  margin: auto 5px;
  background: #777;
}

#topics-slider-pagination .swiper-pagination-switch/*2.x*/ {
  /*角丸*/
  border-radius: 10.5px;
}

/**** 幅410px未満でスライダー数が多い場合は、バレット間隔を狭く・バレットを小さく ****/
@media only screen and (max-width: 409px) {
  #topics-slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #topics-slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 4px;
  }
}

@media only screen and (max-width: 389px) {
  #topics-slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #topics-slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    width: 18px;
    height: 18px;
  }
  
  #topics-slider-pagination.pager-small .swiper-pagination-switch/*2.x*/ {
    /*角丸*/
    border-radius: 9px;
  }
}

@media only screen and (max-width: 359px) {
  #topics-slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #topics-slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 3px;
  }
}

@media only screen and (max-width: 334px) {
  #topics-slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #topics-slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 2.5px;
  }
}

#topics-slider-pagination .swiper-pagination-switch:hover/*2.x*/,
#topics-slider-pagination .swiper-pagination-bullet:hover/*3.x*/ {
  background: #ea3a3a;
}

#topics-slider-pagination .swiper-pagination-switch.swiper-active-switch/*2.x*/,
#topics-slider-pagination .swiper-pagination-bullet-active/*3.x*/ {
  background: red;
  /* アニメーション */
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

/*** サムネイル⇔ページネーションの切替 ***/
/**** 幅≦689px ****/
@media screen and (max-width:689px) {
  #topics .swiper-controller {
    height: 48px;
  }
  
  #topics .swiper-controller > .right {
    border: none;
  }
  
  #topics-slider-thumbnail {
    display: none !important;
  }
  
  #topics .slider-pagination-wrapper {
    display: block !important;
  }
}

/**** 幅≧690px ****/
@media screen and (min-width:690px), print {
  #topics .swiper-controller {
    height: 64px;
  }
  
  #topics-slider-thumbnail {
    display: block !important;
  }
  
  #topics .slider-pagination-wrapper {
    display: none !important;
  }
}

/**** ページャーのみ ****/
#topics .swiper-controller.pager-only {
  height: 48px;
}

#topics .swiper-controller.pager-only > .right {
  border: none;
}

#topics .swiper-controller.pager-only #topics-slider-thumbnail {
  display: none !important;
}

#topics .swiper-controller.pager-only .slider-pagination-wrapper {
  display: block !important;
}

/* 左右分離ラッパー ------------------- */
.separate-wrapper {
  margin-top: 40px;
}

/** 右側/左側 **/
/*** ～1039px **/
.separate-wrapper .side-right,
.separate-wrapper .side-left {
  display: block;
  float: none;
  width: 100%;
  padding: 0 5px;
  word-wrap: break-word;
  overflow-x: hidden;
}

.separate-wrapper .side-left {
  margin-top: 20px;
}

.separate-wrapper .side-left:before {
  content: '';
  margin-bottom: 10px;
  /*水平罫線*/
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  border-style: solid;
  border-width: 1px;
  border-top-color: #9a9a9a;
  border-left-color: #9a9a9a;
  border-right-color: #eee;
  border-bottom-color: #eee;
}

/*** 1040px～/印刷 ***/
@media only screen and (min-width: 1040px), print {
  /** 右側 **/
  .separate-wrapper .side-right {
    float: right;
    width: 710px;
    width: calc(100% - 310px/*.side-left*/ - 20px/*margin*/);
  }
  
  /** 左側 **/
  .separate-wrapper .side-left {
    float: right;
    width: 310px;
    margin-top: 0;
    margin-right: 20px;
  }
  
  .separate-wrapper .side-left:before {
    /*水平罫線なし*/
    position: static;
    width: 0;
    height: 0;
    margin-bottom: 0;
    border-style: none;
  }
}

/* 広告(右側上) ------------------- */
aside#ads-right-top {
  width: 100%;
  border: solid 1px #aaa;
}

aside#ads-right-top img {
  width: 100%;
  height: auto;
}

/* 重要なお知らせ/お知らせ ------------------- */
section#important-news,
section#news {
  margin: 20px auto;
}

/* おすすめゴールデンツアー ------------------- */
section#osusume-golden-tour {
  margin: 20px auto;
}

section#osusume-golden-tour .contents {
  text-align: center;
}

section#osusume-golden-tour .contents > a {
  display: inline-block;
  margin: 5px;
}

@media only screen and (max-width: 350px) {
  section#osusume-golden-tour .contents img {
    max-width: 100%;
  }
}

/* SOS時お願い/アイドリングストップ運動 ------------------- */
section#sos-requests,
section#stop-idling {
  margin: 20px auto;
}

/* 広告(右側下) ------------------- */
aside#ads-right-bottom {
  width: 100%;
}

.tanaka-zaidan-wrapper {
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

.tanaka-zaidan-wrapper > * {
  margin: 5px;
  vertical-align: middle;
}

.tanaka-zaidan-wrapper > .banner {
  display: inline-block;
  width: 300px;
}

.tanaka-zaidan-wrapper > .model-cource {
  display: inline-block;
  width: 19em;/*15emx1.25em*/
  text-align: center;
}

.tanaka-zaidan-wrapper > .model-cource > .title {
  display: inline-block;
  font-size: 1.25em;
  font-weight: 700;
  color: black;
}

.tanaka-zaidan-wrapper > .model-cource > .link {
  display: inline-block;
}

/* バナー(左側) ------------------- */
.side-left aside.banners {
  width: 100%;
  text-align: center;
}

.side-left aside.banners a {
  display: inline-block;
  margin: 5px auto;
}

.side-left article.banners a > img {
  max-width: 100%;
}

/* 採用情報 ------------------- */
article#recruit-info {
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

article#recruit-info a {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 10px auto;
}

article#recruit-info a img {
  width: 100%;
}

@media only screen and (min-width: 650px) {
  article#recruit-info a {
    margin: 10px 30px;
  }
}

@media only screen and (min-width: 696px) {
  article#recruit-info a {
    margin: 10px;
    vertical-align: middle;
  }
}

@media only screen and (min-width: 1040px), print {
  article#recruit-info a {
    width: 300px;
    margin: 0 0 20px 0;
  }
}

/* お得な情報/各種ご案内 ------------------- */
article#left-info-frames {
  width: 100%;
  margin: 0 auto 10px auto;
}

article#left-info-frames > .info-frame-wrapper {
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
}

section#great-deals,
section#various-info {
  display: inline-block;
  width: 300px;
  margin: 10px auto;
  vertical-align: top;
}

@media only screen and (min-width: 630px) {
  section#great-deals,
  section#various-info {
    margin: 10px;
  }
}

@media only screen and (min-width: 1040px), print {
  section#great-deals,
  section#various-info {
    margin: 10px auto;
  }
}

section#great-deals .title,
section#various-info .title {
  text-align: center;
}

section#great-deals .contents,
section#various-info .contents {
  margin: 0 0 0 -9.5px;
  text-align: center;
  list-style: none;
}

section#great-deals .contents > li,
section#various-info .contents > li {
  line-height: 2em;
}

@media only screen and (min-width: 500px) {
  section#great-deals .contents > li,
  section#various-info .contents > li {
    line-height: 1.5em;
  }
}

section#great-deals .contents > li:not(.up-icon):before,
section#various-info .contents > li:not(.up-icon):before {
  content: '•';
  display: inline-block;
  width: 19px;
}

/* 貸切バス事業者安全性評価認定制度 ------------------- */
section#chartered-bus-safety {
  width: 300px;
  margin: 20px auto;
}

section#chartered-bus-safety .title {
  height: 2em;
  font-size: 1.1em;
  text-align: center;
}

section#chartered-bus-safety .title > span {
  display: inline-block;
  margin-top: 0.25em;
}

section#chartered-bus-safety .contents {
  padding: 0;
}

section#chartered-bus-safety .contents > .mark-wrapper {
  width: 100%;
  height: 118px;
  text-align: center;
  vertical-align: middle;
}

section#chartered-bus-safety .contents > .mark-wrapper img {
  margin: 5px auto;
}

section#chartered-bus-safety .contents > .description-1,
section#chartered-bus-safety .contents > .description-2 {
  width: 100%;
  padding: 0.5em 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}

section#chartered-bus-safety .contents > .description-1 {
  font-size: 0.75em;
  color: #145149;
  background-color: #61ec9f;
}

section#chartered-bus-safety .contents > .description-2 {
  font-size: 0.8125em;
  color: black;
}

section#chartered-bus-safety .contents > .link {
  width: 100%;
  margin-bottom: 5px;
  text-align: center;
  vertical-align: middle;
}

section#chartered-bus-safety .contents > .link > span {
  color: black;
  font-size: 0.8125em;
  margin: 0;
}

section#chartered-bus-safety .contents > .link > a {
  display: inline-block;
  margin: 5px auto;
}

/* バナー(下側) ------------------- */
aside#banners-bottom {
  width: 100%;
  text-align: center;
}

/*～374px:banner-bigとbanner-smalls:縦並び,banner-smalls内1列*/
aside#banners-bottom .contents {
  margin: 0 auto;
}

aside#banners-bottom .contents > .banner-big {
  width: 100%;
  height: 100px;
}

aside#banners-bottom .contents > .banner-big > img {
  margin: 10px;
}

aside#banners-bottom .contents > .banner-smalls {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  vertical-align: middle;
}

aside#banners-bottom .contents > .banner-smalls > * {
  display: inline-block;
  max-width: 100%;
  margin: 5px auto;
}

@media only screen and (min-width: 375px) {
  /*375～594px:banner-bigとbanner-smalls:縦並び,banner-smalls内2列*/
  aside#banners-bottom .contents {
    max-width: 375px;
  }
}

@media only screen and (min-width: 610px) {
  /*595～779px:banner-bigとbanner-smalls:横並び,banner-smalls内2列*/
  aside#banners-bottom .contents {
    max-width: 610px;
  }
  
  aside#banners-bottom .contents > .banner-big {
    float: left;
    width: auto;
    height: 171px;
    margin-left: 5px;
  }
  
  aside#banners-bottom .contents > .banner-big > img {
    margin: 45.5px 0;
  }
  
  aside#banners-bottom .contents > .banner-smalls {
    float: left;
    width: 390px;
  }
}

@media only screen and (min-width: 800px), print {
  /*800px～/印刷:banner-bigとbanner-smalls:横並び,banner-smalls内3列*/
  aside#banners-bottom .contents {
    max-width: 800px;
  }
  
  aside#banners-bottom .contents > .banner-big {
    float: left;
    width: auto;
    height: 114px;
  }
  
  aside#banners-bottom .contents > .banner-big > img {
    margin: 17px 0;
  }
  
  aside#banners-bottom .contents > .banner-smalls {
    float: left;
    width: 580px;
  }
}

/* 更新情報 ------------------- */
footer .update-info {
  text-align: right;
  font-size: 0.75em;
}