@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;
        border: none;
        transition: 0.2s;
    }

    .head{
        position: relative;
        aspect-ratio: 4/1;
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 30px;
    }
    .head .top-text{
        position: absolute;
        left: 50%;
        top: 20%;
        color: #ffffef;
        font-size: 4.0rem;
        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;
    }

    

    .display-area{
        text-align: center;
    }

    .railwaymap{
        display: block;
        width: 100%;
        height: 500px;
        overflow-x: auto;
        overflow-y: auto;
    }
    .railwaymap img{
        height: 400%;
    }

    .file-button{
        position: relative;
        display: inline-block;
        width: 250px;
        padding: 25px;
        font-size: 1.7rem;
        text-align: center;
        border-radius: 10px;
        border: #0f1a45 solid 1px;
        color: #0f1a45;
        transition: 0.2s;
    }
    .file-button:hover{
        background-color: #0f1a45;
        color: #fff;
        text-decoration: underline;
        box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.3);
    }

    .button-base{
        text-align: center;
    }
    .button-base a{
        background-color: #0f1a45;
        color: #fff;
        border-radius: 20px;
        padding-left: 20px;
        display: inline-block;
        text-align: center;
        font-size: 3.0rem;
        margin-bottom: 20px;
        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-base .line-button{
        background-color: #0f1a45;
        color: #fff;
        text-align: center;
        font-size: 3.0rem;
        border-radius: 20px;
        border: 2px #0f1a45 solid;
        padding: 0 10px;
        margin-bottom: 20px;
        margin-right: 20px;
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .button-base .line-button:hover{
        background-color: #fff;
        color: #0f1a45;
    }
    .button-base .line-button.active{
        background-color: #fff;
        color: #0f1a45;
    }



    .station-area{
        background-color: #eee;
        padding: 20px 10px;
        margin-bottom: 100px;
    }

    #saika-line-1{
        display: block;
    }
    #saika-line-2{
        display: none;
    }
    #naruiso-line{
        display: none;
    }
    #isezaki-line{
        display: none;
    }
    #nitta-line{
        display: none;
    }
    #akinai-line{
        display: none;
    }
    #chiyourako-line{
        display: none;
    }
    #maekami-line{
        display: none;
    }



    .station-button{
        position: relative;
        width: 100%;
        height: 75px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .station-button a{
        color: inherit;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .station-button:hover{
        box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
    }
    .station-button .name-ja{
        position: absolute;
        left: 100px;
        top: -10px;
        font-weight: bold;
        font-size: 2.7rem;
    }
    .station-button .name-en{
        position: absolute;
        left: 250px;
        top: 10px;
        font-size: 1.7rem;
    }
    .station-button .tt-button{
        display: block;
        position: absolute;
        right: 30px;
        top: 12px;
        text-align: center;
        color: #fff;
        font-size: 1.8rem;
        width: 100px;
        padding: 10px;
        background-color: #0f1a45;
        border: #0f1a45 solid 1px;
        transition: 0.2s;
    }
    .station-button .tt-button a{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .station-button .tt-button:hover{
        background-color: #fff;
        color: #0f1a45;
    }






    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倍に変形（表示） */
    }



    .display-area{
        text-align: center;
    }

    .railwaymap{
        display: block;
        width: 100%;
        height: 300px;
        overflow-x: auto;
        overflow-y: auto;
    }
    .railwaymap img{
        height: 200%;
    }

    .file-button{
        position: relative;
        display: inline-block;
        width: 150px;
        padding: 10px;
        font-size: 1.5rem;
        text-align: center;
        border-radius: 10px;
        border: #0f1a45 solid 1px;
        color: #0f1a45;
        transition: 0.2s;
    }
    .file-button:hover{
        background-color: #0f1a45;
        color: #fff;
        text-decoration: underline;
        box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.3);
    }

    .button-base{
        text-align: center;
    }
    .button-base a{
        background-color: #0f1a45;
        color: #fff;
        border-radius: 20px;
        display: inline-block;
        text-align: center;
        font-size: 2.0rem;
        padding: 0 15px;
        margin-bottom: 10px;
        margin-right: 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-base .line-button{
        background-color: #0f1a45;
        color: #fff;
        text-align: center;
        font-size: 2.0rem;
        min-width: 150px;
        border-radius: 20px;
        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;
    }
    .button-base .line-button:hover{
        background-color: #fff;
        color: #0f1a45;
    }
    .button-base .line-button.active{
        background-color: #fff;
        color: #0f1a45;
    }



    .station-area{
        background-color: #eee;
        padding: 20px 10px;
        margin-bottom: 100px;
    }

    #saika-line-1{
        display: block;
    }
    #saika-line-2{
        display: none;
    }
    #naruiso-line{
        display: none;
    }
    #isezaki-line{
        display: none;
    }
    #nitta-line{
        display: none;
    }
    #akinai-line{
        display: none;
    }
    #chiyourako-line{
        display: none;
    }
    #maekami-line{
        display: none;
    }



    .station-button{
        position: relative;
        width: 100%;
        height: 50px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
        transition: 0.2s;
    }
    .station-button a{
        color: inherit;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .station-button:hover{
        box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.3);
    }
    .station-button .name-ja{
        position: absolute;
        left: 50px;
        top: -15px;
        font-weight: bold;
        font-size: 2.0rem;
    }
    .station-button .name-en{
        position: absolute;
        left: 52px;
        top: 20px;
        font-size: 1.0rem;
    }
    .station-button .tt-button{
        display: block;
        position: absolute;
        right: 15px;
        top: 10px;
        text-align: center;
        color: #fff;
        font-size: 1.5rem;
        width: 75px;
        padding: 3px;
        background-color: #0f1a45;
        border: #0f1a45 solid 1px;
        transition: 0.2s;
    }
    .station-button .tt-button a{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .station-button .tt-button:hover{
        background-color: #fff;
        color: #0f1a45;
    }






    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;
    }
    
}