@charset "UTF-8";
/*================================================================================

media query mixin

================================================================================*/
/* common color
----------------------------------------------------------------------------*/
/*路線*/
/*    google font on web
--------------------------------------------------------------------------------*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlNzbP97U9sKh0jjxbPbfOKg.ttf) format("truetype"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNNE-IuDiR70wI4zXaKqWCM.ttf) format("truetype"); }
/*    google font on server
--------------------------------------------------------------------------------*/
/*    icomoon
--------------------------------------------------------------------------------*/
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?g5brci");
  src: url("fonts/icomoon.eot?g5brci#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?g5brci") format("truetype"), url("fonts/icomoon.woff?g5brci") format("woff"), url("fonts/icomoon.svg?g5brci#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-search01:before {
  content: "\e90b"; }

.icon-reserve01:before {
  content: "\e90a"; }

.icon-arrow02:before {
  content: "\e909"; }

.icon-another01:before {
  content: "\e908"; }

.icon-arrow01:before {
  content: "\e900"; }

.icon-language01:before {
  content: "\e901"; }

.icon-logomark01:before {
  content: "\e902"; }

.icon-pass01:before {
  content: "\e903"; }

.icon-pdf01:before {
  content: "\e904"; }

.icon-share01:before {
  content: "\e905"; }

.icon-train01:before {
  content: "\e906"; }

.icon-wifi01:before {
  content: "\e907"; }

/*    custom
--------------------------------------------------------------------------------*/
body.stationInfo main {
  padding: 0 0 60px 0; }
body.stationInfo .infoHead {
  padding: 20px 0;
  margin: auto;
  border: 4px solid #BBBBBB;
  max-width: 800px; }
  body.stationInfo .infoHead .staName {
    display: block;
    text-align: center;
    border-bottom: 15px solid #000000;
    padding-bottom: 20px;
    margin-bottom: 20px;
    line-height: 1.4; }
    body.stationInfo .infoHead .staName .base {
      font-size: 3.4rem; }
    body.stationInfo .infoHead .staName .-en {
      font-size: 2.8rem; }
  body.stationInfo .infoHead .staNumber {
    display: flex;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center; }
    body.stationInfo .infoHead .staNumber > li {
      display: inline-block;
      margin: 0 5px; }
body.stationInfo .staNumber {
  display: block;
  text-align: center;
  position: relative;
  z-index: 2; }
  body.stationInfo .staNumber .icon {
    display: inline-block;
    padding: 5px 10px;
    background: #000000;
    color: #ffffff;
    border-radius: 3px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    transition: all 0.4s;
    /*路線*/ }
    body.stationInfo .staNumber .icon::before {
      content: "";
      display: inline-block;
      padding: 5px 10px;
      background: #ffffff;
      color: #ffffff;
      border-radius: 3px;
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      opacity: 0; }
    @media print, screen and (min-width: 960px) {
      body.stationInfo .staNumber .icon {
        min-width: 50px; } }
    body.stationInfo .staNumber .icon.-line_ag {
      background-color: #D21544; }
    body.stationInfo .staNumber .icon.-line_bhi {
      background-color: #FAB202; }
    body.stationInfo .staNumber .icon.-line_c {
      background-color: #30CD32; }
    body.stationInfo .staNumber .icon.-line_dj {
      background-color: #4694D1; }
    body.stationInfo .staNumber .icon.-line_ekl {
      background-color: #143F97; }
    body.stationInfo .staNumber .icon.-line_fnop {
      background-color: #008E46; }
    body.stationInfo .staNumber .icon.-line_m {
      background-color: #00B3C1; }
    body.stationInfo .staNumber .icon.-line_yz {
      background-color: #DC9965; }
    body.stationInfo .staNumber .icon.-lineOther {
      border-radius: 100px; }
      body.stationInfo .staNumber .icon.-lineOther.-kyotoSubway, body.stationInfo .staNumber .icon.-lineOther.-c22 {
        background-color: #ffffff;
        color: #128100;
        border: 1px solid #128100; }
      body.stationInfo .staNumber .icon.-lineOther.-osakaSubway, body.stationInfo .staNumber .icon.-lineOther.-k14, body.stationInfo .staNumber .icon.-lineOther.-k15 {
        background-color: #ffffff;
        color: #00af5c;
        border: 1px solid #00af5c; }
      body.stationInfo .staNumber .icon.-lineOther.-hanshinNamba, body.stationInfo .staNumber .icon.-lineOther.-hs41, body.stationInfo .staNumber .icon.-lineOther.-hs42 {
        background-color: #ffffff;
        color: #396db2;
        border: 1px solid #396db2; }
body.stationInfo .infoBoard_lineGroup.-line_ag .station::before {
  background-color: #D21544; }
body.stationInfo .infoBoard_lineGroup.-line_bhi .station::before {
  background-color: #FAB202; }
body.stationInfo .infoBoard_lineGroup.-line_c .station::before {
  background-color: #30CD32; }
body.stationInfo .infoBoard_lineGroup.-line_dj .station::before {
  background-color: #4694D1; }
body.stationInfo .infoBoard_lineGroup.-line_ekl .station::before {
  background-color: #143F97; }
body.stationInfo .infoBoard_lineGroup.-line_fnop .station::before {
  background-color: #008E46; }
body.stationInfo .infoBoard_lineGroup.-line_m .station::before {
  background-color: #00B3C1; }
body.stationInfo .infoBoard_lineGroup.-line_yz .station::before {
  background-color: #DC9965; }
body.stationInfo .infoBoard_lineGroup .station.-left.-lineOther::before {
  background-color: #BBBBBB; }
body.stationInfo .staName {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: bold; }
  body.stationInfo .staName span {
    display: block; }
  body.stationInfo .staName .-en {
    font-size: 1rem; }
body.stationInfo .infoBoardCont .c-title_sM {
  position: relative;
  margin-top: 0; }
body.stationInfo .infoBoardCont .routeName {
  position: relative;
  margin-bottom: 10px;
  padding: 5px 10px;
  background: #ededed;
  text-align: center;
  line-height: 1.4; }
  @media only screen and (max-width: 768px) {
    body.stationInfo .infoBoardCont .routeName {
      width: auto; } }
body.stationInfo .infoBoardCont .infoBoard_lineGroupArea {
  margin-top: 20px; }
  body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .inner {
    position: relative; }
  body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction {
    width: 100%;
    margin-bottom: 10px; }
    @media print, screen and (min-width: 768px) {
      body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction {
        position: absolute;
        top: 3px; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction li {
      width: 50%; }
      @media print, screen and (min-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction li {
          width: 28%;
          max-width: 180px; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction .-left {
      float: left; }
      @media print, screen and (min-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction .-left {
          text-align: right; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction .-right {
      float: right;
      text-align: right; }
      @media print, screen and (min-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroupArea .direction .-right {
          text-align: left; } }
body.stationInfo .infoBoardCont .infoBoard_lineGroup {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  width: 400px;
  margin: auto; }
  @media only screen and (max-width: 768px) {
    body.stationInfo .infoBoardCont .infoBoard_lineGroup {
      width: 100%;
      align-items: center; } }
  body.stationInfo .infoBoardCont .infoBoard_lineGroup + .infoBoard_lineGroup {
    margin-top: 20px; }
  body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station {
    width: 33%;
    z-index: 2; }
    @media only screen and (max-width: 768px) {
      body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station {
        width: 40%; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-left .icon, body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-right .icon {
      font-size: 1.8rem; }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-left .icon, body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-right .icon {
          font-size: 1.4rem; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-center {
      position: relative;
      z-index: 3; }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-center {
          width: 20%; } }
      body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-center .icon {
        font-size: 1.4rem; }
        @media only screen and (max-width: 768px) {
          body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-center .icon {
            font-size: 1.2rem; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-left::before {
      content: "";
      display: block;
      width: 50%;
      height: 5px;
      position: absolute;
      top: 11px;
      left: 0;
      z-index: 0;
      transition: all 0.4s; }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-left::before {
          top: 18px;
          width: 60%;
          left: -10%; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-right::before {
      content: "";
      display: block;
      width: 50%;
      height: 5px;
      position: absolute;
      top: 11px;
      right: 0;
      z-index: 0;
      transition: all 0.4s; }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station.-right::before {
          top: 18px;
          width: 60%;
          right: -10%; } }
    body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station a {
      display: block;
      align-items: center;
      transition: all 0.4s; }
      body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station a:hover {
        transition: all 0.4s; }
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station a:hover .icon:before {
          opacity: 0.5;
          transition: all 0.4s; }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station a .staName {
          margin-left: 5px; } }
      @media only screen and (max-width: 768px) {
        body.stationInfo .infoBoardCont .infoBoard_lineGroup > .station a > .inner {
          display: flex;
          align-items: center;
          position: relative;
          z-index: 4;
          background: #fff;
          border: 2px solid #ddd;
          padding: 5px; } }
body.stationInfo .updateDay {
  text-align: right;
  margin-bottom: 10px; }
body.stationInfo .facilitiesCheckArea.-tourist th {
  width: 50%; }
@media only screen and (max-width: 768px) {
  body.stationInfo .facilitiesCheckArea .tableWrap:not(.tblScroll01) .tableColumn01 th,
  body.stationInfo .facilitiesCheckArea .tableWrap:not(.tblScroll01) .tableColumn01 td {
    padding: 15px; }
  body.stationInfo .facilitiesCheckArea .-spConnectCell {
    border-bottom: 1px dashed #BBBBBB; } }
body.stationInfo .facilitiesCheckArea dl {
  display: flex;
  align-items: center; }
  body.stationInfo .facilitiesCheckArea dl + dl {
    margin-top: 15px; }
  body.stationInfo .facilitiesCheckArea dl dt {
    padding-right: 10px; }
  body.stationInfo .facilitiesCheckArea dl dd .icon,
  body.stationInfo .facilitiesCheckArea dl dd .title {
    display: inline-block;
    vertical-align: middle; }
  body.stationInfo .facilitiesCheckArea dl dd .icon {
    width: 30px;
    opacity: 0.5; }
    .facilitiesCheckArea .checkItem.-on .icon {
      opacity: 1; }
  body.stationInfo .facilitiesCheckArea dl dd .link {
    display: inline-block;
    padding: 3px 10px;
    background: #ffffff;
    border: 1px solid #005BAC;
    color: #000000;
    border-radius: 100px;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 1.2rem;
    transition: all 0.4s; }
    @media only screen and (max-width: 768px) {
      body.stationInfo .facilitiesCheckArea dl dd .link {
        margin: 5px 0 0; } }
    body.stationInfo .facilitiesCheckArea dl dd .link:hover {
      cursor: pointer;
      opacity: 0.6;
      transition: all 0.4s; }
body.stationInfo .facilitiesCheckArea .infoText {
  padding: 10px;
  background: #ffffff;
  border-radius: 5px; }
body.stationInfo .facilitiesCheckArea th.-plusInfo .inner {
  display: flex;
  justify-content: space-between; }
body.stationInfo .facilitiesCheckArea th.-plusInfo dl {
  width: 48%; }
body.stationInfo .facilitiesCheckArea th.-plusInfo .infoText {
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.4;
  width: 48%; }
body.stationInfo .facilitiesCheck {
  position: relative; }
  body.stationInfo .facilitiesCheck:before {
    content: "";
    display: block; }
  body.stationInfo .facilitiesCheck:after {
    content: "";
    display: block;
    position: absolute; }
  body.stationInfo .facilitiesCheck:before {
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #BBBBBB;
    left: 0;
    top: 0; }
  .checkItem.-on .facilitiesCheck:after {
    border-left: 2px solid #E40732;
    border-bottom: 2px solid #E40732;
    width: 16px;
    height: 8px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 6px;
    top: 9px; }
body.stationInfo .stationMap a {
  display: block;
  overflow: hidden;
  height: 200px;
  border: 1px solid #BBBBBB;
  box-sizing: border-box;
  transition: all 0.4s; }
  body.stationInfo .stationMap a:hover {
    opacity: 0.7;
    transition: all 0.4s; }