@charset "UTF-8";

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}



@keyframes fadein-phone-menu {
  0% {
    top: 0px;
    opacity: 0;
  }
  
  100% {
    top: 60px;
    opacity: 1;
  }
}


@media screen and (min-width:769px){
    body{
        color: #333;
        font-size: 3.0rem;
        font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    }
    *, *::before, *::after{
        box-sizing: border-box;
    }

    header{
        width: 100%;
        color: #fff;
        background-color: #fff;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 50px;
        box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
    }
    .headbar{
        z-index: 30;
        position: relative;
        width: 100%;
        height: 50px;
        background-color: #fff;
    }
    .home-button{
        display: block;
        position: absolute;
        left: 40px;
        top: 15px;
    }
    .home-button:hover{
        transition: 0.2s;
        opacity: 0.75;
    }
    .home-button .logo{
        position: relative;
        width: 150px;
        height: auto;
    }
    .global-nav{
        width: 100%;
        height: 50px;
        position: relative;
        background-color: #0f1a45;
        text-align: center;
    }
    .global-nav .nav-item{
        position: relative;
        display: inline-block;
        margin: 0 10px;
    }
    .global-nav .nav-item a{
        display: inline-block;
        width: auto;
        height: auto;
        line-height: 30px;
        position: relative;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 2.0rem;
        letter-spacing: 1px;
        transform: 0.2s;
    }
    .global-nav .nav-item.active a{
        border-radius: 8px;
        background-color: #fff450;
        color: #0f1a45;
    }
    .global-nav .nav-item a:hover{
        color: #fff450;
    }
    .global-nav .nav-item.active a:hover{
        color: #0f1a45;
    }
    /* 下線のスタイル */
    .global-nav .nav-item a::after {
        background-color: #fff450; /* 下線の色 */
        bottom: -4px; /* 要素の下端からの距離 */
        content: ""; /* 要素に内容を追加 */
        height: 2px; /* 下線の高さ */
        left: 0; /* 要素の左端からの距離 */
        position: absolute; /* 絶対位置指定 */
        transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
        transform-origin: left top; /* 変形の原点を左上に指定 */
        transition: transform .2s; /* 変形をアニメーション化 */
        width: 100%; /* 要素の幅 */
    }
    /* リンクにホバーした際の下線の表示 */
    .global-nav .nav-item a:hover::after {
        transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
    }
    .global-nav .nav-item.active a:hover::after {
        transform: scale(0, 0); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
    }
    #phone-menu-button{
        display: none;
    }
    .phone-nav{
        display: none;
    }
    .phone-script{
        display: none;
    }



    .header-space{
        display: none;
    }

    .page-top-button{
        z-index: 30;
        display: block;
        position: fixed;
        right: 30px;
        bottom: 30px;
        box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.15);
        color: #fff450;
        text-decoration: none;
        background-color: #0f1a45;
        border-radius: 50%;
        text-align: center;
        width: 50px;
        height: 50px;
        transition: 0.2s;
    }
    .page-top-button:hover{
        color: #0f1a45;
        background-color: #fff450;
    }

    main{
        z-index: 0;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        text-decoration: none;
    }
    main a{
        text-decoration: none;
    }
    section{
        margin-bottom: 100px;
    }
    h1{
        font-size: 3.6rem;
        margin-top: 30px;
        margin-bottom: 30px;
        border-bottom: #000 solid 1px;
        width: 100%;
    }
    h2{
        text-decoration: none;
        font-size: 2.8rem;
        border-left: #0f1a45 solid 5px;
        padding-left: 7px;
    }
    hr{
        width: 100%;
    }
    p{
        font-size: 1.8rem;
    }
    th{
        font-size: 1.8rem;
    }
    tr{
        font-size: 1.8rem;
    }
    td{
        font-size: 1.8rem;
    }
    .hidden{
        display: none;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }



    .breadcrumb{
        display: block;
        position: relative;
        margin-bottom: 50px;
    }
    .breadcrumb ul{
        font-size: 1.2rem;
        list-style: none;
        padding-left: 0;
    }
    .breadcrumb .breadcrumb-item{
        display: inline-block;
        width: auto;
    }
    .breadcrumb .breadcrumb-item a{
        position: relative;
        color: inherit;
        width: auto;
        text-decoration: none;
    }
    .breadcrumb .breadcrumb-item a:hover{
        color: blue;
    }
    .breadcrumb li:not(:last-child)::after{
        content: ">";
        margin-left: 0.5em;
    }
    /* 下線のスタイル */
    .breadcrumb .breadcrumb-item a::after {
        background-color: blue; /* 下線の色 */
        bottom: 0px; /* 要素の下端からの距離 */
        content: ""; /* 要素に内容を追加 */
        height: 1px; /* 下線の高さ */
        left: 0; /* 要素の左端からの距離 */
        position: absolute; /* 絶対位置指定 */
        transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
        transform-origin: left top; /* 変形の原点を左上に指定 */
        transition: transform .2s; /* 変形をアニメーション化 */
        width: 100%; /* 要素の幅 */
    }
    /* リンクにホバーした際の下線の表示 */
    .breadcrumb .breadcrumb-item a:hover::after {
        transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
    }



    .box-item{
        position: relative;
        float: left;
        display: block;
        width: 315px;
        height: 250px;
        border-radius: 10%;
        margin-right: 30px;
        margin-bottom: 30px;
        padding: 130px 15px 0;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .box-item:hover{
        box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.15);
    }
    .box-item .title{
        margin-top: 30px;
        color: #555;
        font-size: 2.0rem;
        line-height: 1.6;
        text-decoration: inherit;
        transition: 0.2s;
    }

    .head{
        position: relative;
        aspect-ratio: 4/1;
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }
    .head .top-text{
        position: absolute;
        left: 50%;
        top: 20%;
        color: #ffffef;
        background-color: rgba(0,0,0,0.8);
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .head .top-img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .head .model{
        position: absolute;
        right: 10px;
        bottom: 5px;
        font-size: 1.2rem;
        background-color: black;
        color: white;
    }

    .news{
        padding: 10px;
        width: 100%;
        height: 300px;
        background-color: skyblue;
    }
    .others{
        padding: 10px;
        width: 100%;
    }
    .topic{
        margin-left: 10px;
    }

    .name-signboard{
        position: relative;
        display: block;
        width: 100%;
        height: 250px;
        text-align: center;
        border-radius: 0;
        margin-bottom: 30px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
    }
    .name-signboard .name{
        position: absolute;
        top: 0;
        width: 100%;
        text-align: center;
    }
    .name-signboard .name .name-text{
        display: inline;
        color: #000;
        font-size: 8.0rem;
        font-weight: bold;
    }
    .name-signboard .ruby{
        position: absolute;
        color: #000;
        top: 100px;
        width: 100%;
        text-align: center;

    }
    .name-signboard .ruby .ruby-ja{
        display: inline;
        font-size: 3.0rem;
        font-weight: bold;
        margin-right: 10px;
    }
    .name-signboard .ruby .ruby-en{
        display: inline;
        font-size: 3.0rem;
        font-weight: bold;
        margin-left: 10px;
    }
    .name-signboard .seio-blue{
        position: absolute;
        top: 128px;
        left: 0;
        display: block;
        width: 100%;
        height: 25px;
        background-color: #010066;
        border: 0 none;

    }
    .name-signboard .seio-yellow{
        position: absolute;
        top: 65%;
        left: 0;
        display: block;
        width: 100%;
        height: 10px;
        background-color: #ffff00;
        border: 0 none;
    }
    .name-signboard a{
        color: #000;
        display: block;
        width: 150px;
        height: 40px;
        text-align: center;
        font-size: 2.0rem;
        font-weight: bold;
        border-radius: 30px;
        padding: 5px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .name-signboard a:hover{
        background-color: #0f1a45;
        color: #fff;
        text-decoration: underline;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }
    .name-signboard .left-sta{
        position: absolute;
        bottom: 12px;
        left: 20px;
    }
    .name-signboard .left-sta-sub{
        position: absolute;
        bottom: 120px;
        left: 20px;
    }
    .name-signboard .right-sta{
        position: absolute;
        bottom: 12px;
        right: 20px;

    }
    .name-signboard .right-sta-sub{
        position: absolute;
        bottom: 120px;
        right: 20px;

    }
    .name-signboard .left-direction{
        display: block;
        font-size: 5.0rem;
        position: absolute;
        bottom: -60px;
        left: 200px;
    }
    .name-signboard .left-direction-sub{
        display: block;
        font-size: 5.0rem;
        position: absolute;
        bottom: 50px;
        left: 200px;
    }
    .name-signboard .right-direction{
        display: block;
        font-size: 5.0rem;
        position: absolute;
        bottom: -60px;
        right: 200px;
    }
    .name-signboard .right-direction-sub{
        display: block;
        font-size: 5.0rem;
        position: absolute;
        bottom: 50px;
        right: 200px;
    }



    .train-type{
        display: block;
        position: relative;
        width: 100%;
        height: 200px;
        text-align: center;
    }
    .stop-type{
        display: inline-block;
        font-size: 3.0rem;
        font-weight: bold;
    }
    .train-type .trains{
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 800px;
    }
    .train-type .trains .star-liner{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #ffff00;
        background-color: #010066;
        border-radius: 6px;
    }
    .train-type .trains .commuter-special-express{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #ff0000;
        background-color: #fff;
        border-radius: 6px;
        border: #000 solid 1px;
    }
    .train-type .trains .rapid-special-express{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #fff;
        background-color: #7f1184;
        border-radius: 6px;
    }
    .train-type .trains .special-express{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        background-color: #ff0000;
        border-radius: 6px;
    }
    .train-type .trains .commuter-express{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #008000;
        background-color: #fff;
        border-radius: 6px;
        border: #000 solid 1px;
    }
    .train-type .trains .express{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #fff;
        background-color: #008000;
        border-radius: 6px;
    }
    .train-type .trains .rapid{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #fff;
        background-color: #e4007f;
        border-radius: 6px;
    }
    .train-type .trains .local{
        display: inline-block;
        width: 155px;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #fff;
        background-color: #219ddd;
        border-radius: 6px;
    }
    .train-type .trains .pass{
        color: #fff;
        background-color: #e3e3e3;
        border: none;
    }
    .train-type p{
        position: relative;
        display: inline-block;
    }



    .transport-button{
        text-decoration: none;
    }
    .button-base{
        text-align: center;
    }
    .button-base a{
        background-color: #0f1a45;
        color: #fff;
        border-radius: 20px;
        padding-left: 10px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .button-base a:hover{
        background-color: #fff;
        color: #0f1a45;
    }
    .button-item{
        display: inline-block;
        text-align: center;
        font-size: 2.0rem;
    }

    .station-data{
        display: inline-block;
        border-collapse: collapse;
        border: solid 2px #000;
        margin-right: 30px;
        margin-bottom: 30px;
        vertical-align: top;
    }
    .station-data th{
        background-color: #0f1a45;
        color: #fff;
        border: solid 1px #000;
        padding: 10px;
    }
    .station-data td{
        background-color: #ffffef;
        color: #000;
        border: solid 1px #000;
        padding: 10px;
    }

    .time-table{
        text-align: center;
    }
    .tt-item{
        display: inline-block;
        width: 400px;
        height: 120px;
        border: solid #000 3px;
        background-color: #eee;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        margin-right: 30px;
        margin-bottom: 40px;
    }
    .tt-item .direction{
        margin-top: -5px;
        font-size: 2.0rem;
    }
    .tt-item a{
        color: #000;
        background-color: #fff;
        border-radius: 20px;
        padding: 5px 50px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .tt-item .weekday{
        color: #0f1a45;
    }
    .tt-item .weekend{
        color: #ca0048;
    }
    .tt-item .weekday:hover{
        background-color: #0f1a45;
        color: #fff;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }
    .tt-item .weekend:hover{
        background-color: #ca0048;
        color: #fff;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }

    #star-liner .scroll-table{
        overflow-x: auto;
        display: block;
    }
    #star-liner .star-liner{
        font-size: 2.0rem;
        position: relative;
        border-collapse: collapse;
    }
    #star-liner .star-liner .station th{
        background-color: #0f1a45;
        color: #fff;
        white-space: nowrap;
        border: none;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .station th:nth-child(1){
        position: sticky;
        left: 0;
    }
    #star-liner .star-liner .station th.passed{
        background-color: #bbb;
    }
    #star-liner .star-liner .train th{
        position: sticky;
        left: 0;
        background-color: #fff;
        font-size: 2.2rem;
        font-weight: bold;
        color: #0f1a45;
        white-space: nowrap;
        border-bottom: #000 solid 1px;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .train td{
        background-color: #fff;
        font-size: 2.0rem;
        color: #000;
        white-space: nowrap;
        border-bottom: #000 solid 1px;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .train td.passed{
        color: #bbb;
    }
    #star-liner .star-liner .train td .right-arrow{
        position: relative;
        width: 100px;
    }
    #star-liner .star-liner .train td .right-arrow::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background-color: #010066;
        width: 100px;
        height: 2px;
    }
    #star-liner .star-liner .train td .right-arrow::after{
        content: "";
        position: absolute;
        right: 2px;
        top: -7px;
        border: solid 2px;
        border-color: #010066 #010066 transparent transparent;
        height: 15px;
        width: 15px;
        transform: rotate(45deg);
    }



    #train-position .position-button{
        background-color: #0f1a45;
        color: #fff;
        text-align: center;
        font-size: 3.0rem;
        border: 2px #0f1a45 solid;
        padding: 0 15px;
        margin-bottom: 20px;
        margin-right: 20px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    #train-position .position-button:hover{
        border: 2px #0f1a45 solid;
        background-color: #fff;
        color: #0f1a45;
    }
    #train-position .position-button.active{
        border: 2px #0f1a45 solid;
        background-color: #fff;
        color: #0f1a45;
    }
    #train-position .visible{
        display: block;
    }
    #train-position .invisible{
        display: none;
    }

    .platform{
        display: inline-block;
        border-collapse: collapse;
        border: solid 2px #000;
        margin-right: 30px;
        margin-bottom: 20px;
        vertical-align: top;
    }
    .platform th{
        background-color: #555;
        color: #fff;
        border: solid 1px #000;
        padding: 10px;
    }
    .platform td{
        background-color: #fff;
        color: #000;
        border: solid 1px #000;
        padding: 10px;
    }
    .sexp{
        background-color: #ff0000;
        color: #fff;
    }
    .exp{
        background-color: #008000;
        color: #fff;
    }
    .rpd{
        background-color: #e4007f;
        color: #fff;
    }
    .lcl{
        background-color: #219ddd;
        color: #fff;
    }
    .rsexp{
        background-color: #7f1184;
        color: #fff;
    }
    .csexp{
        background-color: #fff;
        color: #ff0000;
        border: #000 solid 1px;
    }
    .cexp{
        background-color: #fff;
        color: #008000;
        border: #000 solid 1px;
    }
    .stl{
        background-color: #010066;
        color: #ffff00;
    }
    .all-type{
        background-color: #000;
        color: #fff;
    }
    .platform .lcl-b{
        background-color: #ef5b9c;
        color: #fff;
    }
    .platform .rexp{
        background-color: #0067c0;
        color: #fff;
    }
    .platform .exp-w{
        background-color: #fd7e00;
        color: #fff;
    }
    .platform .semiexp{
        background-color: #b2d235;
        color: #fff;
    }

    .item-block{
        position: relative;
        display: inline-block;
        padding-left: 65px;
        background-color: #eee;
        font-size: 2.0rem;
        width: 280px;
        height: 65px;
        margin-bottom: 20px;
    }
    .item-block::before{
        content: "×";
        display: block;
        color: #aaa;
        font-size: 6.0rem;
        position: absolute;
        top: -12px;
        left: 0px;
    }
    .item-block.active{
        background-color: #bbe2f1;
    }
    .item-block.active::before{
        content: "○";
        display: block;
        color: #0075c2;
        font-size: 4.5rem;
        font-weight: bold;
        position: absolute;
        top: -3px;
        left: 10px;
    }
    .equipment{
        color: #aaa;
        vertical-align: middle;
    }
    .equipment.active{
        color: inherit;
        vertical-align: middle;
    }




    footer{
        background-color: #0f1a45;
        color: #fff;
        font-size: 1.2rem;
        text-align: center;
        border-top: #fff450 10px solid;
        border-bottom: 10px solid #fff450;
    }
    .footer-desc{
        font-size: inherit;
    }
}



@media screen and (max-width: 768px) {
    body{
        color: #333;
        font-size: 1.0rem;
        font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        margin: 0;
        padding: 0;
    }
    *, *::before, *::after{
        box-sizing: border-box;
    }



    header{
        z-index: 30;
        height: 60px;
        width: 100%;
        color: inherit;
        border-bottom: #0f1a45 solid 1px;
        padding: 0;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
    }
    .headbar{
        z-index: 30;
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        margin: 0;
    }
    .home-button{
        display: block;
        position: absolute;
        left: 15px;
        top: 12px;
    }
    .home-button:hover{
        transition: 0.2s;
        opacity: 0.75;
    }
    .home-button .logo{
        position: relative;
        width: auto;
        height: 36px;
    }


    #phone-menu-button{
        z-index: 30;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #0f1a45;
        border: none;
        height: 100%;
        width: 70px;
        cursor: pointer;
    }
    #phone-menu-button .line-area{
        width: 28px;
        height: 20px;
        position: absolute;
        top: 12px;
        right: 20px;
        background-color: inherit;
    }
    #phone-menu-button .line-area .line {
        background-color: #fff450;
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: all 0.3s;
    }
    #phone-menu-button p{
        display: block;
        position: absolute;
        right: 10px;
        bottom: 5px;
        font-size: 1.2rem;
        color: #fff450;
        margin: 0;
        padding: 0;
    }
    #phone-menu-button .line:nth-of-type(1) {
        top: 0;
    }

    #phone-menu-button .line:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    #phone-menu-button .line:nth-of-type(3) {
        bottom: 0;
    }
    #phone-menu-button.active .line-area > .line:nth-of-type(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    #phone-menu-button.active .line-area > .line:nth-of-type(2) {
        display: none;
    }

    #phone-menu-button.active .line-area > .line:nth-of-type(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }



    .global-nav{
        display: none;
    }
    .phone-nav{
        z-index: 10;
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        padding: 7%;
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }
    .phone-nav.active{
        display: block;
        animation: fadein-phone-menu 0.5s forwards;
    }
    .phone-nav ul{
        list-style: none;
        position: relative;
    }
    .phone-nav .nav-item{
        position: relative;
        display: block;
        margin-bottom: 30px;
        width: 100%;
        height: 20px;
    }
    .phone-nav .nav-item a{
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #0f1a45;
        font-size: 2.0rem;
        letter-spacing: 1px;
        transform: 0.2s;
    }
    .phone-nav .nav-item a:hover{
        text-decoration: underline;
    }
    



    .header-space{
        display: block;
        position: relative;
        width: 100%;
        height: 70px;
    }



    a.page-top-button{
        z-index: 30;
        display: block;
        position: fixed;
        right: 30px;
        bottom: 70px;
        box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.15);
        color: #fff450;
        font-size: 3.0rem;
        text-decoration: none;
        background-color: #0f1a45;
        opacity: 70%;
        border-radius: 50%;
        text-align: center;
        width: 50px;
        height: 50px;
        transition: 0.2s;
    }
    a.page-top-button:hover{
        color: #0f1a45;
        background-color: #fff450;
    }



    main{
        padding: 15px;
    }
    main a{
        text-decoration: none;
    }
    section{
        padding-top: 50px;
    }
    h1{
        font-size: 3.0rem;
        margin-bottom: 30px;
        border-bottom: #000 solid 1px;
        width: 100%;
    }
    h2{
        text-decoration: none;
        font-size: 2.2rem;
        border-left: #0f1a45 solid 5px;
        padding-left: 7px;
    }
    hr{
        width: 100%;
    }
    p{
        font-size: 1.5rem;
    }
    th{
        font-size: 1.5rem;
    }
    tr{
        font-size: 1.5rem;
    }
    td{
        font-size: 1.5rem;
    }
    .hidden{
        display: none;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }



    .breadcrumb{
        display: block;
        position: relative;
        padding: 2px;
        margin-bottom: 20px;
        background-color: #E0ECFF;
    }
    .breadcrumb ul{
        font-size: 1.2rem;
        list-style: none;
        padding-left: 0;
    }
    .breadcrumb .breadcrumb-item{
        display: inline-block;
        width: auto;
    }
    .breadcrumb .breadcrumb-item a{
        position: relative;
        color: inherit;
        width: auto;
        text-decoration: none;
    }
    .breadcrumb .breadcrumb-item a:hover{
        color: blue;
    }
    .breadcrumb li:not(:last-child)::after{
        content: ">";
        margin-left: 0.5em;
    }
    /* 下線のスタイル */
    .breadcrumb .breadcrumb-item a::after {
        background-color: blue; /* 下線の色 */
        bottom: 0px; /* 要素の下端からの距離 */
        content: ""; /* 要素に内容を追加 */
        height: 1px; /* 下線の高さ */
        left: 0; /* 要素の左端からの距離 */
        position: absolute; /* 絶対位置指定 */
        transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
        transform-origin: left top; /* 変形の原点を左上に指定 */
        transition: transform .2s; /* 変形をアニメーション化 */
        width: 100%; /* 要素の幅 */
    }
    /* リンクにホバーした際の下線の表示 */
    .breadcrumb .breadcrumb-item a:hover::after {
        transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
    }



    .name-signboard{
        position: relative;
        display: block;
        width: 100%;
        height: 120px;
        text-align: center;
        border-radius: 0;
        margin-bottom: 30px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
    }
    .name-signboard .name{
        position: absolute;
        top: 0;
        width: 100%;
        text-align: center;
    }
    .name-signboard .name .name-text{
        display: inline;
        color: #000;
        font-size: 3.6rem;
        font-weight: bold;
    }
    .name-signboard .ruby{
        position: absolute;
        color: #000;
        top: 42px;
        width: 100%;
        text-align: center;

    }
    .name-signboard .ruby .ruby-ja{
        display: inline;
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 5px;
    }
    .name-signboard .ruby .ruby-en{
        display: inline;
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 5px;
    }
    .name-signboard .seio-blue{
        position: absolute;
        top: 58px;
        left: 0;
        display: block;
        width: 100%;
        height: 10px;
        background-color: #010066;
        border: 0 none;

    }
    .name-signboard .seio-yellow{
        position: absolute;
        top: 72px;
        left: 0;
        display: block;
        width: 100%;
        height: 5px;
        background-color: #ffff00;
        border: 0 none;
    }
    .name-signboard a{
        color: #000;
        display: block;
        width: 85px;
        height: 24px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 30px;
        padding: 2px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .name-signboard a:hover{
        background-color: #0f1a45;
        color: #fff;
        text-decoration: underline;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }
    .name-signboard .left-sta{
        position: absolute;
        bottom: 7px;
        left: 5px;
    }
    .name-signboard .left-sta-sub{
        position: absolute;
        bottom: 64px;
        left: 5px;
    }
    .name-signboard .right-sta{
        position: absolute;
        bottom: 7px;
        right: 5px;
    }
    .name-signboard .right-sta-sub{
        position: absolute;
        bottom: 64px;
        right: 5px;

    }
    .name-signboard .left-direction{
        display: block;
        font-size: 2.5rem;
        position: absolute;
        bottom: -25px;
        left: 105px;
    }
    .name-signboard .left-direction-sub{
        display: none;
    }
    .name-signboard .right-direction{
        display: block;
        font-size: 2.5rem;
        position: absolute;
        bottom: -25px;
        right: 105px;
    }
    .name-signboard .right-direction-sub{
        display: none;
    }



    .train-type{
        display: block;
        position: relative;
        width: 100%;
        height: 100px;
        text-align: center;
    }
    .stop-type{
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .train-type .trains{
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 800px;
    }
    /*.train-type .trains .type{
        display: inline-block;
        width: 90px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        background-color: #e3e3e3;
        color: #fff;
        border-radius: 6px;
    }*/
    .train-type .trains .star-liner{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #ffff00;
        background-color: #010066;
        border-radius: 6px;
    }
    .train-type .trains .commuter-special-express{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #ff0000;
        background-color: #fff;
        border-radius: 6px;
        border: #000 solid 1px;
    }
    .train-type .trains .rapid-special-express{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #fff;
        background-color: #7f1184;
        border-radius: 6px;
    }
    .train-type .trains .special-express{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #fff;
        background-color: #ff0000;
        border-radius: 6px;
    }
    .train-type .trains .commuter-express{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #008000;
        background-color: #fff;
        border-radius: 6px;
        border: #000 solid 1px;
    }
    .train-type .trains .express{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #fff;
        background-color: #008000;
        border-radius: 6px;
    }
    .train-type .trains .rapid{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #fff;
        background-color: #e4007f;
        border-radius: 6px;
    }
    .train-type .trains .local{
        display: inline-block;
        width: 80px;
        font-size: 1.0rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
        color: #fff;
        background-color: #219ddd;
        border-radius: 6px;
    }
    .train-type .trains .pass{
        color: #fff;
        background-color: #e3e3e3;
        border: none;
    }
    .train-type p{
        position: relative;
        display: inline-block;
    }



    .transport-button{
        text-decoration: none;
    }
    .button-base{
        text-align: center;
    }
    .button-item{
        display: inline-block;
        text-align: center;
        width: 150px;
        height: auto;
        font-size: 1.5rem;
        font-weight: bold;
        background-color: #0f1a45;
        color: #fff;
        border-radius: 20px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 10px;
        margin-bottom: 10px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .button-base .button-item:hover{
        background-color: #fff;
        color: #0f1a45;
    }
    


    table.station-data{
        border-collapse: collapse;
        border: solid 2px #000;
        width: 100%;
        margin-bottom: 30px;
        vertical-align: top;
        table-layout: fixed;
        box-sizing: border-box;
    }
    table.station-data tr{
        width: 100%;
        box-sizing: border-box;
    }
    table.station-data tr th{
        background-color: #0f1a45;
        color: #fff;
        font-size: 1.3rem;
        border: solid 1px #000;
        width: 30%;
        box-sizing: border-box;
        padding: 5px;
    }
    table.station-data tr td{
        background-color: #ffffef;
        color: #000;
        border: solid 1px #000;
        width: 70%;
        box-sizing: border-box;
        padding: 10px;
    }



    .time-table{
        text-align: center;
    }
    .tt-item{
        display: inline-block;
        width: 90%;
        height: 165px;
        border: solid #000 3px;
        background-color: #eee;
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        margin-bottom: 40px;
    }
    .tt-item .direction{
        margin-top: -5px;
        font-size: 1.5rem;
    }
    .tt-item a{
        display: inline-block;
        color: #000;
        font-size: 1.7rem;
        background-color: #fff;
        width: 96%;
        border-radius: 20px;
        padding: 5px 50px;
        margin-bottom: 10px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .tt-item .weekday{
        color: #0f1a45;
    }
    .tt-item .weekend{
        color: #ca0048;
    }
    .tt-item .weekday:hover{
        background-color: #0f1a45;
        color: #fff;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }
    .tt-item .weekend:hover{
        background-color: #ca0048;
        color: #fff;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
    }

    #star-liner .scroll-table{
        overflow-x: auto;
        display: block;
    }
    #star-liner .star-liner{
        font-size: 2.0rem;
        position: relative;
        border-collapse: collapse;
    }
    #star-liner .star-liner .station th{
        background-color: #0f1a45;
        color: #fff;
        white-space: nowrap;
        border: none;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .station th:nth-child(1){
        position: sticky;
        left: 0;
    }
    #star-liner .star-liner .station th.passed{
        background-color: #bbb;
    }
    #star-liner .star-liner .train th{
        position: sticky;
        left: 0;
        background-color: #fff;
        font-size: 2.2rem;
        font-weight: bold;
        color: #0f1a45;
        white-space: nowrap;
        border-bottom: #000 solid 1px;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .train td{
        background-color: #fff;
        font-size: 2.0rem;
        color: #000;
        white-space: nowrap;
        border-bottom: #000 solid 1px;
        padding: 10px 15px;
        text-align: center;
    }
    #star-liner .star-liner .train td.passed{
        color: #bbb;
    }
    #star-liner .star-liner .train td .right-arrow{
        position: relative;
        width: 100px;
    }
    #star-liner .star-liner .train td .right-arrow::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background-color: #010066;
        width: 100px;
        height: 2px;
    }
    #star-liner .star-liner .train td .right-arrow::after{
        content: "";
        position: absolute;
        right: 2px;
        top: -7px;
        border: solid 2px;
        border-color: #010066 #010066 transparent transparent;
        height: 15px;
        width: 15px;
        transform: rotate(45deg);
    }



    #train-position .position-button{
        background-color: #0f1a45;
        color: #fff;
        text-align: center;
        font-size: 2.0rem;
        width: 150px;
        border: 2px #0f1a45 solid;
        padding: 0 15px;
        margin-bottom: 10px;
        margin-right: 10px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    #train-position .position-button:hover{
        border: 2px #0f1a45 solid;
        background-color: #fff;
        color: #0f1a45;
    }
    #train-position .position-button.active{
        border: 2px #0f1a45 solid;
        background-color: #fff;
        color: #0f1a45;
    }
    #train-position .visible{
        display: block;
    }
    #train-position .invisible{
        display: none;
    }



    .platform{
        border-collapse: collapse;
        border: solid 2px #000;
        width: 100%;
        margin-right: 30px;
        margin-bottom: 20px;
        vertical-align: top;
        table-layout: fixed;
    }
    .platform th{
        background-color: #555;
        color: #fff;
        border: solid 1px #000;
        width: 25%;
        padding: 10px;
    }
    .platform td{
        background-color: #fff;
        color: #000;
        border: solid 1px #000;
        width: 75%;
        padding: 10px;
    }
    .sexp{
        background-color: #ff0000;
        color: #fff;
    }
    .exp{
        background-color: #008000;
        color: #fff;
    }
    .rpd{
        background-color: #e4007f;
        color: #fff;
    }
    .lcl{
        background-color: #219ddd;
        color: #fff;
    }
    .rsexp{
        background-color: #7f1184;
        color: #fff;
    }
    .csexp{
        background-color: #fff;
        color: #ff0000;
        border: #000 solid 1px;
    }
    .cexp{
        background-color: #fff;
        color: #008000;
        border: #000 solid 1px;
    }
    .stl{
        background-color: #010066;
        color: #ffff00;
    }
    .all-type{
        background-color: #000;
        color: #fff;
    }
    .platform .lcl-b{
        background-color: #ef5b9c;
        color: #fff;
    }
    .platform .rexp{
        background-color: #0067c0;
        color: #fff;
    }
    .platform .exp-w{
        background-color: #fd7e00;
        color: #fff;
    }
    .platform .semiexp{
        background-color: #b2d235;
        color: #fff;
    }



    .item-block{
        z-index: 0;
        position: relative;
        display: inline-block;
        padding: 10px 0;
        padding-left: 50px;
        background-color: #eee;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    .item-block::before{
        content: "×";
        display: block;
        color: #aaa;
        font-size: 4.0rem;
        z-index: 1;
        position: absolute;
        top: -7px;
        left: 0px;
    }
    .item-block.active{
        background-color: #bbe2f1;
    }
    .item-block.active::before{
        content: "○";
        display: block;
        color: #0075c2;
        font-size: 3.0rem;
        font-weight: bold;
        z-index: 1;
        position: absolute;
        top: -2px;
        left: 6px;
    }
    .equipment{
        display: inline;
        color: #aaa;
        font-size: 1.5rem;
        margin: 0;
    }
    .equipment.active{
        color: inherit;
        vertical-align: middle;
    }



    footer{
        background-color: #0f1a45;
        width: 100%;
        color: #fff;
        font-size: 1.2rem;
        padding: 2px 10px;
        text-align: center;
        border-top: #fff450 5px solid;
        border-bottom: 5px solid #fff450;
    }
    .footer-desc{
        font-size: inherit;
    }
    
}