@charset "UTF-8";

:root {
    /* background color */
    --select-color-background-light: rgba(253, 216, 53, 1);
    --select-color-background-dark : #e69646;
  /***********************************************************************/
    /* FSD02_inbound.html_selected seat color */
    --select-color-armrest     : #FFA726;
    --select-color-seat-surface: #ff9800;
    --select-color-backrest    : #ffb74d;
        /*  + FSA01.html
              - 時刻表hover、メニューhover */
    --select-color-headrest    : #ffcc80;
        /*  + FSB01.html
              - チェックボックスの背景色 */
  /***********************************************************************/
    --select-color-1: #FFA000;
        /*  + FSD01.html
              - 座席指定（非指定）ボタンhover
            + FSD02_outbound.html
              - 空席状況更新ボタンhover、座席を指定するボタンhover */
    --select-color-2: #EF6C00;
        /*  + FSA01.html
              - ドロップダウンのfocus***
              - 「お知らせ一覧へ」
              - お知らせ関連の箇条書き記号色
              - STEP文字色,アイコン色
              - STEP3「購入する」文字色

              (- [[[Not in use]]]サービスデスクへのリンク色
               - [[[Not in use]]]fa-circle fa-stack-2x
               - [[[Not in use]]]nav-tabs
               - [[[Not in use]]].modal-dialog .modal-content .modal-footerのaタグ、背景色 */
    --select-color-3: #FB8C00;
        /*  + FSA01.html
              - チケット情報の各時間の中点色（枠線、塗潰）
            + FSE04.html
              - 本日購入分,購入履歴 アイコン色 */
    --select-color-4: #FFB300;
        /*  + FSD02.html
              - 空席状況更新ボタン背景色
              - 座席を指定するボタン背景色*/
    --select-color-5: rgba(239, 108, 0, .5);
        /*  + FSA01.html
              - ドロップダウンのshadow(--select-color-2***) */
    --select-color-6: #FFE0B2;
        /*  + FSA01.html
              - 注意書きの背景色
              - TOPログアウト背景色
            + SA01.html
              - STEP背景色
            + FSJ01.html,FSK01.html
              - 文字背景色 */
    --select-color-7: #ff8c2d;
    /*  + FSA01.html
          - 新規会員登録、ログインhover */
    --select-color-8: #f8cbad;
    /*  + FSA01.html
          - ログイン後上部背景色 */
    --select-color-9: #b30419;
    /*  + FSA01.html
          - 他路線リンクボタン背景色 */
    --select-color-10: #d9051e;
    /*  + FSA01.html
          - 他路線リンクボタン背景色hover */
}
  /* -------------------------------------------------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 100px;
    background-color: #fcfcfc;
    font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
}

body.top {
    background-color: #fdfdfd;
}

body.top:not(.logout) {
    margin-bottom: 158px;
}

/* form validation */
.ui-state-error-message {
  color: #a94442;
  font-weight: bold;
  display: none;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

label.error {
    color: #a94442;
    font-weight: bold;
    margin-bottom: 0;
}

.navbar {
    position: relative;
    z-index: 10;
    border-radius: 0px;
    border-right: none;
    border-left: none;
    background: rgba(242, 61, 121, 0.9);
    background: -moz-linear-gradient(45deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(253, 216,
        53, 1)), color-stop(100%, var(--select-color-background-dark)));
    background: -webkit-linear-gradient(45deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -o-linear-gradient(45deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: -ms-linear-gradient(45deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: linear-gradient(45deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80e69646,
        endColorstr=#80e69646);
    margin-bottom: 10px;
}

.navbar:not(:target){
    filter: none;
}

.top .navbar {
    background: none;
    box-shadow: none;
}

.navbar-header {
    float: none;
}

.navbar-brand {
    padding-top: 0px;
    padding-left:5px;
}

.navbar-brand .logo {
    height: 46px; 
    width: auto;
    margin-top: 2px;
}

.navbar-time-table {
    position: relative;
    float: right;
    padding: 0 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border-radius: 4px;
    line-height: 32px;
    color: #333!important;
    width: 65px;
    text-decoration: none!important;
    cursor: pointer!important;
    outline: none!important;
}

.navbar-time-table:hover {
    background-color: var(--select-color-backrest);
}

.navbar-time-table .icon {
    display: block;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
}

.navbar-time-table .icon-label {
    display: block;
    line-height: 10px;
    font-size: 10px;
    height: 10px;
    text-align: center;
}

.navbar-toggle {
    display: block;
    border: none;
    padding-top: 4px;
    padding-bottom: 0;
    width: 65px;
}

.navbar-toggle:hover {
    background-color: var(--select-color-backrest);
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.navbar-toggle .icon-bar {
    background-color: #333;
    margin: auto;
}

.navbar-toggle .icon-label {
    display: block;
    line-height: 10px;
    font-size: 10px;
    height: 10px;
    text-align: center;
    color: #333;
    margin-top: 4px;
}

.overlay-nav {
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow-y: auto;
    background: rgba(242, 61, 121, 0.9);
    background: -moz-linear-gradient(135deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(253, 216,
        53, 1)), color-stop(100%, var(--select-color-background-dark)));
    background: -webkit-linear-gradient(135deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -o-linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: -ms-linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);

    filter:alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity:0;
    zoom:1;
}

.overlay-nav.show {
    z-index: 10000;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--select-color-background-dark),
        endColorstr=var(--select-color-background-dark));
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--select-color-background-dark),
        endColorstr=var(--select-color-background-dark));
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity:1;
}

.overlay-nav.show.hide {
    z-index: -1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

    filter:alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity:0;
}

.overlay-nav:not(:target){
    filter:none;
}
.overlay-nav .inner {
    position: relative;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
}

.overlay-nav .inner ul {
    list-style: none;
    padding: 0;
}

.overlay-nav .inner ul li {
    padding: .8em;
}

.overlay-nav .inner ul li a {
    color: #333;
    font-weight: bold;
    font-size: 110%;
    cursor: default;
}

.overlay-nav.show .inner ul li a {
    cursor: pointer;
}

.overlay-nav .navbar-header {
    position: relative
}

.overlay-nav .navbar-header .overlay-nav-close {
    position: absolute;
    right: 16px;
    top: 9px;
    width: 65px;
    height: 32px;
    text-decoration: none;
}

.overlay-nav-close:before {
    font-family: "FontAwesome";
    display: inline-block;
    content: "\f00d";
    color: #333;
    position: absolute;
    top: 50%;
    left: 0;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    width: 65px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 22px;
    z-index: 10001;
}

.subheader {
    padding: 8px 15px;
    margin-top: -10px;
    margin-bottom: 15px;
    background-color: #eee;
    color: #666;
    box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.2);
    z-index: 9;
}

.subheader .container {
    padding: 0;
}

.subheader p {
    margin: 0;
}

/* dropdownの配置調整（最前面） */
.container_step1.wrapper {
    padding: 15px 0;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 13;
}
/* ドロップダウンの文字幅、枠線を修正 */
.form-group .form-control{
    font-weight: bold;
 }
.form-group .form-control:focus {
    border: solid var(--select-color-2);
    box-shadow: 0 1px 5px var(--select-color-5);
}

.mm-stations-info {
  clear: both;
  position: relative;
  left: 50px;
  margin-right: 50px;
  color: red;
  text-shadow:
    -2px -2px 2px white,
     2px -2px 2px white,
    -2px  2px 2px white,
     2px  2px 2px white,
     0px -2px 2px white,
     0px  2px 2px white,
    -2px  0px 2px white,
     2px  0px 2px white;
}

.container_step2.wrapper {
    padding: 15px 0;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 12;
}

.container_step3.wrapper {
    padding: 15px 0;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 11;
}

.container.wrapper {
    padding: 15px 0;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
}

.breadcrumb {
    width: 100%;
    border-radius: 0px;
}

.background_bar {
    background-color: #fff;
    width: 140%;
    height: 110px;
    position: absolute;
    top: 85px;
    display: block;
  }

.top-logo {
    position: absolute;
    width: 100%;
    top: 60px;
    margin-top: 27px;
}

.top-logo img {
    max-height: 80px;
    max-width: 100%;
}

.top-msg {
    width: 100%;
    position: absolute;
    color: var(--select-color-2);
    top: 180px;
}

.top-msg .strong {
    font-size: 19px;
    font-weight: bold;
}

.top-msg .detail {
    font-size: 12px;
}

.top-msg .highlight {
    color: var(--select-color-2);
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: underline;
}

.feature {
    width: 100%;
    position: relative;
    margin-top: -72px;
    /*z-index: -1;*/
    height: auto;
}

.feature .service-desc {
    /* スマホサイズ */
    padding-top: 80px;
    z-index: 5;
    position: relative;
    height: 582px;
}

.feature .service-desc-nolink {
    /* スマホサイズ */
    height: 550px;
}

.feature .service-desc  ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    line-height: 20px;
}

.feature .service-desc  ul li {
    padding: 2px 0 2px 15px;
    position: relative;
}

.feature .service-desc  ul li:before {
    font-family: "FontAwesome";
    content: "\f069";
    position: absolute;
    left: 0;
    color: var(--select-color-2);
}


.feature .service-desc .links {
    /* スマホサイズ */
    margin-top: 270px;
}

.feature .service-desc .links a {
    display: block;
    width: 100%;
    padding: 8px;
    border-radius: 100px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 1em;
    outline: none;
    line-height: 24px;
}

.feature .service-desc .links a i {
    margin-right: .6em;
}

.feature .service-desc .links .main {
    border: solid 2px var(--select-color-2);
    background-color: var(--select-color-2);
    color: #fff;
}

.feature .service-desc .links .main:hover {
    background-color: var(--select-color-7);
    border: solid 2px var(--select-color-7);
}

.feature .service-desc .links .sub {
    background-color: transparent;
    color: var(--select-color-2);
    border: solid 2px var(--select-color-2);
}

.feature .service-desc .links .btn-route-link {
    background-color: var(--select-color-9);
    border: solid 2px var(--select-color-9);
    color: #fff;
}

.feature .service-desc .links .btn-route-link:hover {
    background-color: var(--select-color-10);
    border: solid 2px var(--select-color-10);
}

.feature .service-desc .br {
    display: inline;
}
.feature .service-desc .br2 {
    display: none;
}

.feature .background {
    background: rgba(242, 61, 121, 0.9);
    background: -moz-linear-gradient(135deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(250, 192,
        210, 1)), color-stop(100%, var(--select-color-background-dark)));
    background: -webkit-linear-gradient(135deg, var(--select-color-background-light) 0%,
        var(--select-color-background-dark) 100%);
    background: -o-linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: -ms-linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    background: linear-gradient(135deg, var(--select-color-background-light) 0%, var(--select-color-background-dark)
        100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.feature .background .accent {
    width: 140%;
    height: 1000px;
    position: absolute;
    top: 550px;
}

.feature .background .accent.left {
    background: #fdfdfd;
    left: 0;
    transform-origin: top left;
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.feature .background .accent.right {
    right: 0;
    background: rgba(253, 253, 253, 0.24);
    transform-origin: top right;
    -ms-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
}

/* logout only */
.feature {
    position: absolute;
}

.feature .eye-catch {
    display: none;
}

.feature .service-desc h1,
.feature .service-desc p {
    display: none;
}

.feature .background .accent {
    display: block;
}

.logout .feature {
    position: relative;
}

.logout .feature .eye-catch {
    display: block;
}

.logout .feature .service-desc {
    /* スマホ画面 */
    padding-top: 80px;
    z-index: 5;
    position: relative;
    height: 582px;
}

.logout .feature .service-desc-nolink {
    /* スマホ画面 */
    height: 550px;
}

.logout .feature .service-desc h1,
.logout .feature .service-desc p {
    display: block;
}

.logout .feature .background {
    background: none;
}

.logout .feature .background .accent {
    display: none;
}

.logout .feature .background .train-image {
    position: absolute;
    height: 100%;
    width: 100%;
}

.logout .feature .background .train-image-fade {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--select-color-8);
}

.logout .feature .background .train-image {
    position: absolute;
    height: 200px;
    top: 270px;
    width: 100%;
    /* z-index: -1; */
    background-image: url("/qseat/tq/images/6020_sp-5eaf99b837cbc6c47eb9818d1b5a86ec.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.logout .navbar-brand {
    display: none;
}

.logout .navbar-toggle span.icon-bar {
    background-color: var(--select-color-2);
}

.logout .navbar-toggle span.icon-label {
    color: var(--select-color-2);
}

.logout .navbar-toggle:hover {
    background-color: #AAA;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.alert {
    border: none;
    padding-left: 75px;
    margin: 15px 0;
    position: relative;
    color: #444;
}

.alert strong {
    font-size: 120%;
}

.alert div.icon {
    float: left;
    width: 60px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.alert .icon:before {
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    padding: 0;
    font-size: 20px;
    font-weight: normal;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    left: 15px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.alert-info .icon:before {
    content: "\f129";
    color: #228ae6;
}

.alert-info div.icon {
    background-color: #72c3fc;
}

.alert-success .icon:before {
    content: "\f00c";
    color: #40c057;
}

.alert-success div.icon {
    background-color: #8ce99a;
}

.alert-warning {
    background-color: #fff3bf;
}

.alert-warning .icon:before {
    content: "\f12a";
    color: #fab005;
}

.alert-warning div.icon {
    background-color: #ffe066;
}

.alert-danger .icon:before {
    content: "\f12a";
    color: #fa5252;
}

.alert-danger div.icon {
    background-color: #ffa8a8;
}

.alert.iconless {
    padding-left: 15px;
    background-color: var(--select-color-6);
}

.alert ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 20px;
}

.alert ul li {
    padding: 2px 0 2px 22px;
    position: relative;
}

.alert ul li:before {
    content: "・";
    position: absolute;
    left: 0;
    font-size: 20px;
    font-weight: bold;
}

/* [FSD02.html]通路矢印を設定 */
.arrow i {
    color: #777;
    font-size: 120px;
    position: relative;
    transform: translate(-12px)
}

.btn-tokyu-id {
    display: inline-block;
    padding: .8em 1em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    background-color: #FFFFFF;
    border:solid 1px #B30419;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.btn-tokyu-id:hover {
    background-color: #F4F4F4;
}

.btn-flat {
    display: inline-block;
    padding: .8em 1em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.btn-flat-sm {
    display: inline-block;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    background-color: var(--select-color-4);
    margin-left: 5px;
}

/* FSD01_edit.html ボタン色 */
.btn-flat.train-color {
    background-color: var(--select-color-4);
}
.btn-flat.train-color:hover {
    background-color: var(--select-color-1);
}

.btn-flat.negative {
    background-color: #E0E0E0;
    color: #777;
    box-shadow: none;
}

.btn-flat.negative:hover {
    background-color: #BDBDBD;
    color: #444;
}

.btn-flat i {
    margin-right: .8em;
}

.row .btn-horizontal {
    margin-bottom: 2em;
}

.row .btn-horizontal button,
.row .btn-horizontal .btn {
    margin-top: 1.2em;
}

.row .btn-horizontal a.btn {
    color: inherit;
}

.row .btn-loginlink {
    padding-bottom:2em;
}

.row .btn-tokyu-id-link {
    padding-top:1em;
    padding-bottom:1em;
}

.row .btn-tokyu-id-link-message {
    padding-bottom:2em;
}

.form-group .btn-flat {
    margin: 1.5em 0;
}

.form-group .spacer {
    height: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.notice a {
    text-decoration: none;
    color: var(--select-color-2);
}

.notice ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    line-height: 20px;
}

.notice ul li {
    padding: 2px 0 2px 15px;
    position: relative;
}

.notice ul li:before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--select-color-2);
}

.notice ul li a {
    color: #333;
}

.notice ul li.external a:after {
    font-family: "FontAwesome";
    content: "\f08e";
    margin-left: .5em;
}

.notice ul li i {
    margin-left: .5em;
}

.notice .link-to-notice {
    padding-left: 15px;
}

.col-coupon {
    float: left;
    padding-left: 15px;
    width: 20em;
}

.coupon-addmsg {
    font-size: 11px; 
    color: #3399FF;
}

.coupon-annotation {
    font-weight: normal; 
    font-size: 12px; 
    margin: 0px 5px;
}

.coupon-label {
    padding: 10px 40px 15px 40px;
    width: 100%;
    margin: 0;
}

.coupon-list {
    border: solid 3px #CCC;
    border-radius: 4px;
    background-color:#FFF;
    margin: 5px 0px;
    padding: 0;
}

div .coupon-list:has(input:checked)  {
    border-color: #F18F98;
    box-shadow: 
    0px 2px 4px -1px rgba(0, 0, 0, 0.15), 
    0px 2px 3px 0px rgba(0, 0, 0, 0.1), 
    0px 1px 6px 0px rgba(0, 0, 0, 0.07)
    
}

.docs-how-to-logo-container {
    display: flex;           /*横並びにする*/
    gap: 10px;               /*ロゴ間の幅*/
    align-items: center;     /*ロゴの配置を中央に寄せる*/
    justify-content: center; /*ロゴの縦位置を中央に寄せる*/
}

.docs-how-to-logo {
    height: 50px;
    object-fit: contain;     /*ロゴがアスペクト比を維持したまま高さに収まる*/
    max-width: 40%;
}

/* [～スマホサイズ] */
@media screen and (max-width: 666px) {
    .coupon-list {width: 100%;}

    .docs-how-to-logo {
        height: 35px;
        object-fit: contain;
        max-width: 30%;
    }
}

#coupon-container .coupon-radio {
    position:absolute;
    top:0;
    bottom:0;
    left:15px;
    margin:auto;
    accent-color: #007bff;
}

.coupon-text {
    font-weight: normal; 
    font-size: 11px; 
    margin: 0px 0px 3px 0px;
}

.coupon-title {
    font-weight: bold; 
    font-size: 15px; 
    color: #C00;
    margin: 0px 0px 3px 0px;
}

div.step {
    margin: 10px 0 25px 0;
    position: relative;
    /*background: #ececec;*/
    background: var(--select-color-6);
    /*padding: 0 0 0 20px;*/
    font-size: 14px;
    line-height: 36px;
    border-radius: 18px;
    color: #4a4a4a;
    font-weight: bold;
}

div.step .icon {
    font-size: 18px;
}

div.step .step-number {
    margin: 0 12px 0 48px;
    color: var(--select-color-2);
}

div.step:before {
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    padding: 0em;
    color: white;
    background: var(--select-color-2);
    font-size: 18px;
    font-weight: normal;
    width: 36px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

div.step.station:before {
    content: "\f041";
}

div.step.train:before {
    content: "\f238";
}

div.step .fa-circle.fa-stack-2x {
    color: var(--select-color-2);
}

.nav-tabs>li>a {
    color: var(--select-color-2);
}

.nav-pills>li+li {
    margin-left: 0;
}

.timeline .date {
    margin-bottom: 15px;
}

.timeline .date i {
    margin-right: .5em;
    font-size: 1.2em;
}

.timeline .date i:not(:first-child){
    margin-left:0em;
}
.timeline .timeline-item .train {
    position: relative;
}

.timeline .timeline-item .train .bullet-col {
    position: relative;
}

.timeline .timeline-item .train .bullet {
    width: 13px;
    height: 13px;
    border: 2px solid var(--select-color-3);
    border-radius: 50%;
    float: left;
    background-color: var(--select-color-3);
    margin-top: 10px;
    position: relative;
    z-index: 1;
}

.timeline .timeline-item .train.full .bullet,
.timeline .timeline-item .train.suspended .bullet {
    background-color: #c6c6c6;
    border-color: #c6c6c6;
}

.timeline .timeline-item .train .ticket-col {
    padding: 0 0 0 35px;
}

.timeline .timeline-item .train .ticket {
    width: 100%;
    margin-bottom: 20px;
    padding: 6px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.timeline .timeline-item .train .ticket .badge {
    font-weight: normal;
    color: #555;
}

.timeline .timeline-item .train .ticket .badge i {
    margin-right: .5em;
}

.timeline .timeline-item .train.available .ticket .badge {
    background-color: #8ce99a;
}

.timeline .timeline-item .train.available .ticket .badge i {
    color: #40c057;
}

.timeline .timeline-item .train.slight .ticket .badge {
    background-color: #ffe066;
}

.timeline .timeline-item .train.slight .ticket .badge i {
    color: #fab005;
}

.timeline .timeline-item .train .ticket
{
    background-color: #fffafa;
}

.timeline .timeline-item .train.full .ticket, .timeline .timeline-item .train.suspended .ticket
{
    box-shadow: none;
    background-color: #bbb;
    color: #111;
}

.timeline .timeline-item .train.full .ticket .badge, .timeline .timeline-item .train.suspended .ticket .badge
{
    background-color: #343a40;
    color: #f8f9fa;
}

.timeline .timeline-item .train.full .ticket .badge i, .timeline .timeline-item .train.suspended .ticket .badge i
    {
    color: #f8f9fa;
}

.timeline .timeline-item .train.full .ticket .desc:after, .timeline .timeline-item .train.suspended .ticket .desc:after
    {
    content: " ";
}

.desc {
    position: relative;
    padding: 0 30px 0 0;
}

.desc:after {
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    padding: 0em;
    font-size: 22px;
    font-weight: normal;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    right: 0;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    content: "\f105";
}

.timeline .timeline-item .train:before {
    content: attr(data-time);
    height: 100%;
    position: absolute;
    top: 0;
    left: -33%;
    margin-top: 5px;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
    color: #444;
    line-height: 30px;
    width: 33%;
    text-align: right;
}

.timeline .timeline-item .train.full:before,
.timeline .timeline-item .train.suspended:before {
    color: #c6c6c6;
}

.timeline .timeline-item .train:after {
    content: "";
    height: 100%;
    width: 1px;
    background-color: #c6c6c6;
    position: absolute;
    top: 0;
    left: 21px;
}

.badge.required {
    background-color: #ef5350;
    margin-left: .5em;
}
/* top: loading */
.loading-base {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10;
  overflow: hidden;
  height: 0;
  transition: .3s;
  opacity: .7;
}
.loading {
  position: absolute;
  top: 10%;
  left: 50%;
}
.loading-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
  background-color: #3498db;
  animation-delay: 0;
}
.loading-bar:nth-child(2) {
  background-color: #c0392b;
  animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
  background-color: #f1c40f;
  animation-delay: .18s;
}
.loading-bar:nth-child(4) {
  background-color: #27ae60;
  animation-delay: .27s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}

option.placeholder {
    display: none;
}

option.placeholder[disabled] {
    display: block;
    color: transparent;
}

.checkbox.customized {
    margin-bottom: 0;
}

.checkbox.customized label, label.radio-inline.customized {
    padding-left: 25px;
}

.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
    margin-left: 20px;
}

.checkbox.customized input[type="checkbox"], .radio-inline.customized input[type="radio"]
    {
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

.checkbox.customized input[type="checkbox"]+.icon, .radio-inline.customized input[type="radio"]+.icon
    {
    position: relative;
}

.checkbox.customized input[type="checkbox"]+.icon:before {
    position: absolute;
    content: "\f0c8";
    font-family: "FontAwesome";
    font-size: 1.4em;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: #cfcfcf;
}
.checkbox.customized input[type="checkbox"]:focus+.icon:before {
    text-shadow: 0 0 3px blue;
}

.checkbox.customized input[type="checkbox"]:checked+.icon:before {
    content: "\f0c8";
    font-size: 1.4em;
    color: var(--select-color-headrest);
}

.checkbox.customized input[type="checkbox"]:checked+.icon:after {
    position: absolute;
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 1.4em;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: #E65100;
}

.radio-inline.customized input[type="radio"]+.icon:before {
    position: absolute;
    content: "\f10c";
    font-family: "FontAwesome";
    font-size: 1.4em;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
}
.radio-inline.customized input[type="radio"]:focus+.icon:after {
    position: absolute;
    content: "\f111";
    font-family: "FontAwesome";
    font-size: 1.4em;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-shadow:
 1px  1px 1px rgba(255,255,0,.3),
 1px  0px 1px rgba(255,255,0,.3),
 1px -1px 1px rgba(255,255,0,.3),
 0px  1px 1px rgba(255,255,0,.3),
 0px  0px 1px rgba(255,255,0,.3),
 0px -1px 1px rgba(255,255,0,.3),
-1px  1px 1px rgba(255,255,0,.3),
-1px  0px 1px rgba(255,255,0,.3),
-1px -1px 1px rgba(255,255,0,.3)
;
    z-index: -1;
}

.radio-inline.customized input[type="radio"]:checked+.icon:before {
    content: "\f192";
    font-size: 1.4em;
    color: #E65100;
}

.form-group .well.well-sm {
    background-color: #ededed;
    border: none;
    box-shadow: none;
    padding: 15px 15px 8px 15px;
    margin-bottom: 0;
}

.alert .well {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-top: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
}

.alert .well.well-sm.well-last {
    margin-bottom: 0;
}

.alert .well.well-sm.domain {
    margin-bottom: 0;
}

.alert .well.well-sm.train-info .row {
    position: relative;
}

.alert .well.well-sm.train-info .row .seat-availability {
    height: 50px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.alert .well.well-sm.train-info .row .seat-availability i {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
}

.alert .well.well-sm.train-info .row .seat-availability small {
    height: 20px;
    line-height: 20px;
    display: block;
}

.alert .well strong {
    font-size: 1em;
}

.panel.panel-notice {
    border: none;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

.panel.panel-display {
    border: none;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

.panel.panel-notice .panel-heading {
    border: none;
    background-color: var(--select-color-6);
}

.panel.panel-notice.bodyless .panel-heading {
    border-radius: 4px;
}

.panel.panel-ticket-item {
    border: none;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

.panel.panel-ticket-item .ticket-detail>p {
    font-weight: bold;
}

.panel.panel-ticket .panel-body {
    padding: 0;
    background-color: #fffafa;
    border-radius: 4px;
}

.panel.panel-ticket .panel-body hr {
    margin: 0 10px;
}

.panel.panel-ticket .train-info, .panel.panel-ticket .ticket-info {
    padding: 15px;
}

.panel.panel-ticket .train-info {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.panel.panel-ticket .ticket-info {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.panel.panel-ticket .train-info.green
{
    border-top: 40px solid #4CAF50;
}

.panel.panel-ticket .ticket-info.green
{
    border-bottom: 40px solid #4CAF50;
}

.panel.panel-ticket .train-info.red
{
    border-top: 40px solid #f44336;
}

.panel.panel-ticket .ticket-info.red
{
    border-bottom: 40px solid #f44336;
}

.panel.panel-ticket .train-info.blue
{
    border-top: 40px solid #2196F3;
}

.panel.panel-ticket .ticket-info.blue
{
    border-bottom: 40px solid #2196F3;
}

.panel.panel-ticket .train-info.purple
{
    border-top: 40px solid #9C27B0;
}

.panel.panel-ticket .ticket-info.purple
{
    border-bottom: 40px solid #9C27B0;
}

/*.panel.panel-ticket .train-info.orange*/
.panel.panel-ticket .train-info.train-color
{
    border-top: 40px solid #FF9800;
}

/*.panel.panel-ticket .ticket-info.orange*/
.panel.panel-ticket .ticket-info.train-color
{
    border-bottom: 40px solid #FF9800;
}

.panel.panel-ticket .train-info.pink
{
    border-top: 40px solid #E91E63;
}

.panel.panel-ticket .ticket-info.pink
{
    border-bottom: 40px solid #E91E63;
}

.panel.panel-ticket .train-info.deep-purple
{
    border-top: 40px solid #673AB7;
}

.panel.panel-ticket .ticket-info.deep-purple
{
    border-bottom: 40px solid #673AB7;
}

.panel.panel-ticket .train-info.indigo
{
    border-top: 40px solid #3F51B5;
}

.panel.panel-ticket .ticket-info.indigo
{
    border-bottom: 40px solid #3F51B5;
}

.panel.panel-ticket .train-info.light-blue
{
    border-top: 40px solid #03A9F4;
}

.panel.panel-ticket .ticket-info.light-blue
{
    border-bottom: 40px solid #03A9F4;
}

.panel.panel-ticket .ticket-info .table {
    table-layout: fixed;
    max-width: 250px;
    margin: 0 auto;
}

.panel.panel-ticket .ticket-info .table td {
    font-size: 18px;
    /* Bootstrap標準のテーブル上部の枠線を削除 */
    border-top: 0px;
    vertical-align: middle;
}
.panel.panel-ticket .ticket-info .table .lavel {
    text-align: left;
    width: 60%;
    padding: 3px 0px 3px 10px;
}

.panel.panel-ticket .ticket-info .table .value {
    text-align: left;
    font-weight: bold;
    padding: 3px 0px;
}

.ticket-history .header {
    margin-bottom: 15px;
}

.ticket-history .header i:nth-child(1) {
    color: var(--select-color-3);
}

.ticket-history .header i:nth-child(2) {
    color: #fff;
}

.ticket-history .panel {
    position: relative;
}

.ticket-history .refundable-ticket-item {
    margin: -1px -1px 19px -1px;
    border: 1px #EEE solid;
}

.ticket-history .refundable-ticket-item:hover {
    margin: -1px -1px 19px -1px;
    border: 1px #DDD solid;
}

.ticket-history .refundable-ticket-item:active {
    margin: -1px -1px 19px -1px;
    border: 1px #9BE solid;
}

.ticket-history .panel .link-to-ticket {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor:pointer;
}

.ticket-history .panel-ticket .ticket-detail i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ticket-history .ticket-status {
    padding: 0;
}

.ticket-history .ticket-status div {
    padding: 0;
}

.ticket-history .ticket-status div:first-child {
    margin-bottom: 10px;
}

.ticket-history .panel-body>.row {
    position: relative;
}

.ticket-history .show-ticket {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 60px;
    line-height: 30px;
}

.ticket-history .show-ticket i {
    height: 30px;
    line-height: 30px;
    font-size: 30px;
}

.ticket-history .show-ticket .show-ticket-label {
    line-height: 20px;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 58px;
    background-color: white;
    z-index: 1010;
    box-shadow: 0px -3px 4px -1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px -3px 4px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px -3px 4px -1px rgba(0, 0, 0, 0.2);
}

.fixed-footer .row>div {
    padding-top: .5em;
    padding-bottom: .5em;
    height: 58px;
}

.fixed-footer .row>div:last-child {
    background-color: var(--select-color-4);
}

.fixed-footer .row>div i {
    font-size: 1.5em;
}

.fixed-footer .row>div a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 100px;
}

.top:not(.logout) .footer {
    height: 158px;
}

.footer .scroll-top {
    height: 40px;
    position: relative;
}

.footer .scroll-top a {
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    color: #666;
    position: absolute;
    top: 8px;
    right: 30px;
}

.footer .copyright {
    height: 60px;
    background-color: #aaa;
}

.top:not(.logout) .footer .copyright {
    height: 118px;
}

.footer .copyright p {
    margin: 20px 0;
    color: #333;
    line-height: 20px;
    font-size: 60%;
}

.top:not(.logout) .footer .copyright p {
    margin: 20px 0 78px 0;
}

.container.steps {
    padding: 0;
}

.modal .modal-dialog .modal-content .modal-header {
    border-bottom: none;
}

.modal .modal-dialog .modal-content .modal-footer {
    border-top: none;
}

.modal .modal-dialog .modal-content .modal-footer a {
    color: var(--select-color-2);
}

.modal .modal-dialog .modal-content .modal-body {
    padding-top: 0;
    padding-bottom: 0;
}

.modal .modal-dialog .modal-content .modal-body .timetable {
    overflow-x: scroll;
}

.modal .modal-dialog .modal-content .modal-body .timetable::-webkit-scrollbar
    {
    height: 10px;
}

.modal .modal-dialog .modal-content .modal-body .timetable::-webkit-scrollbar-track
    {
    background-color: #ddd;
}

.modal .modal-dialog .modal-content .modal-body .timetable::-webkit-scrollbar-thumb
    {
    background: var(--select-color-2);
}

/* 時刻表の列に罫線を引く */
.modal .modal-dialog .modal-content .modal-body .timetable table th:first-child, 
.modal .modal-dialog .modal-content .modal-body .timetable table td:first-child {
    border-right: 2px solid #ddd;
}

.modal .modal-dialog .modal-content .modal-body .timetable table th:not(:first-child),
.modal .modal-dialog .modal-content .modal-body .timetable table td:not(:first-child) {
    border-left: 1px solid #ddd;
}

.modal .modal-dialog .modal-content .modal-body table {
    white-space: nowrap;
    margin: 0;
    font-size: 85%;
}

.modal .modal-dialog .modal-content .modal-body table th {
    /*font-weight: normal;*/

}

.modal .modal-dialog .modal-content .modal-body table thead th:first-child
    {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #fff;
    opacity: 1.0;
}

.modal .modal-dialog .modal-content .modal-body table tbody th {
    vertical-align: middle;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #fff;
    opacity: 1.0;
}

.progress-wrapper {
    margin-bottom: 20px;
}

.progress-wrapper .progress-step {
    padding: 0;
}

.progress-wrapper .progress-step small {
    color: #888;
}

.progress-wrapper .progress-step .icon {
    position: relative;
}

.progress-wrapper .progress-step .icon i:first-child {
    color: #ccc;
}

.progress-wrapper .progress-step .icon i:last-child {
    color: #fff;
}

.progress-wrapper .progress-step:not(:last-child) .icon:before {
    content: " ";
    height: 1px;
    width: 100%;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
}

.progress-wrapper .progress-step.current .icon i:first-child {
    color: #228ae6;
}

.progress-wrapper .progress-step.current small {
    color: #228ae6;
    font-weight: bold;
}

.progress-wrapper .progress-step.passed .icon:before {
    background-color: #40c057;
}

.progress-wrapper .progress-step.passed .icon i:first-child {
    color: #40c057;
}

.seatmap {
    background-color: #efefef;
}

/* 車両(1) */
.seatmap .car-wrapper {
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
}
.seatmap .car-wrapper .car-number {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    padding: 1em;
    width: 60px;
    margin: auto;
}

/* 車両(2) */
.seatmap .car-wrapper2 {
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
}
.seatmap .car-wrapper2 .car-number {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    padding: 1em;
    width: 60px;
    margin: auto;
}

.seatmap .car {
    border: 5px solid #aaa;
    border-radius: 6px;
    background-color: #fafafa;
}

.seatmap .sticky-top, .seatmap .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    z-index: 20;
    background-color: #c8c8c8;
    color: #333;
    margin-left: -15px;
    margin-right: -15px;
    padding: 5px;
}

.seatmap .sticky-top {
    top: 0;
    margin-bottom: 10px;
}

.seatmap .sticky-top .legend {
    background-color: #fafafa;
    padding: 5px;
    border-radius: 4px;
    position: relative;
}

.seatmap .sticky-top .legend .refresh {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: auto;
    height: 24px;
    border: none;
    border-radius: 3px;
    background-color: var(--select-color-4);
}

.seatmap .sticky-top .legend .refresh i {
    margin-right: .5em;
}

.seatmap .sticky-top .legend .seat {
    position: relative;
    width: 20px;
    height: 20px;
}

.seatmap .sticky-top .legend .selected:before {
    font-family: "FontAwesome";
    content: "\f2be";
    color: #fef0f4;
    font-size: 14px;
    line-height: 21px;
    display: block;
    z-index: 13;
    position: relative;
    text-align: center;
}

.seatmap .sticky-top .legend .purchased:before {
    font-family: "FontAwesome";
    /* content: "\f00d";  (**1) */
    color: #888;
    font-size: 16px;
    line-height: 20px;
    display: block;
    z-index: 13;
    position: relative;
    text-align: center;
}

/* ボックスシート設定 */
.seatmap .sticky-top .legend .boxseat:before {
    font-family: "FontAwesome";
    display: block;
    z-index: 13;
    position: relative;
}

.seatmap .sticky-top .legend>div {
    float: left;
}

.seatmap .sticky-top .legend>div:nth-child(even) {
    margin-right: .6em;
    margin-left: .2em;
}

.seatmap .sticky-top .direction {
    margin-top: 5px;
}

.seatmap .sticky-bottom {
    top: auto;
    bottom: 0;
    margin-top: 10px;
}

.seatmap .sticky-bottom .direction {
    margin-bottom: 5px;
}

.seatmap .sticky-bottom .control {
    background-color: #fafafa;
    padding: 7px;
    border-radius: 4px;
    position: relative;
}

/* ボックスシート設定（selected3,selected4を追加）*/
.seatmap .sticky-bottom .control .selected1, .seatmap .sticky-bottom .control .selected2, .seatmap .sticky-bottom .control .selected3, .seatmap .sticky-bottom .control .selected4 {
    display: inline-block;
    width: 4em;
    background-color: #dfdfdf;
    vertical-align: middle;
    border-radius: 3px;
    height: 20px;
    margin-left: .3em;
}

.seatmap .sticky-bottom .control .entered {
    display: inline-block;
    width: 4em;
    background-color: #8BC34A;
    vertical-align: middle;
    border-radius: 3px;
    height: 20px;
    margin-left: .3em;
    color: #666;
    font-weight: bold;
}

/* [FSD02.html]選択中の座席 背景色[2車両ver.] */
.seatmap .sticky-bottom .control .entered.carGreen {
    background-color: #8BC34A;
}   
.seatmap .sticky-bottom .control .entered.carBlue {
    background-color: #7cbdc4;
}

.seatmap .sticky-bottom .control .buttons {
    margin-top: 5px;
}

.seatmap .sticky-bottom .control .buttons button {
    padding: .3em .8em;
    border: none;
    border-radius: 3px;
}

.seatmap .sticky-bottom .control .buttons button i {
    margin-right: .5em;
}

.seatmap .sticky-bottom .control .buttons .back {
    background-color: #E0E0E0;
    color: #777;
}

.seatmap .sticky-bottom .control .buttons .back:hover {
    background-color: #BDBDBD;
    color: #444;
}

.seatmap .sticky-bottom .control .buttons .designate {
    background-color: var(--select-color-4);
    font-weight: bold;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.seatmap .sticky-bottom .control .buttons .designate:hover {
    background-color: var(--select-color-1);
}

.seatmap .seat-row .seat-group .seat-box {
    padding: 0;
}

.seatmap .seat-row .seat-group .seat-box .seat {
    height: 50px;
    width: 50px;
    margin: auto;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.seatmap .seat-row .seat-group.horizontal:first-child .seat-box {
    float: left;
}

.seatmap .seat-row .seat-group:first-child .seat-box .seat {
    margin-left: 0;
}

.seatmap .seat-row .seat-group.horizontal:last-child .seat-box {
    float: right;
}

.seatmap .seat-row .seat-group:last-child .seat-box .seat {
    margin-right: 0;
}

.seatmap .seat-row .seat-group .seat-box .seat .seat-number {
    line-height: 50px;
    position: relative;
    z-index: 13;
    font-size: 18px;
    color: #666;
    font-weight: bold;
}

/* 車両(1) 色設定 */
.seatmap .legend .seat .seat-surface, .seatmap .seat-row .seat-group .seat-box .seat .seat-surface
    {
    position: absolute;
    width: 80%;
    height: 100%;
    border-radius: 2px;
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    background-color: #8BC34A;
    z-index: 10;
}

.seatmap .legend .seat .backrest, .seatmap .seat-row .seat-group .seat-box .seat .backrest
    {
    position: absolute;
    width: 80%;
    height: 35%;
    border-radius: 2px;
    top: 65%;
    bottom: 0;
    right: 10%;
    left: 10%;
    background-color: #C5E1A5;
    z-index: 11;
}

.seatmap .legend .seat .headrest, .seatmap .seat-row .seat-group .seat-box .seat .headrest
    {
    position: absolute;
    width: 60%;
    height: 20%;
    border-radius: 2px;
    top: 80%;
    bottom: 0;
    right: 20%;
    left: 20%;
    background-color: #DCEDC8;
    z-index: 12;
}

.seatmap .legend .seat .armrest, .seatmap .legend .seat.second .armrest, .seatmap .seat-row .seat-group .seat-box .seat .armrest
    {
    position: absolute;
    width: 10%;
    height: 70%;
    border-radius: 2px;
    top: 30%;
    bottom: 0;
    background-color: #9E9E9E;
}

/* 車両(2) 色設定 */
.seatmap .legend .seat.second .seat-surface, .seatmap .seat-row .seat-group .seat-box .seat.second .seat-surface
    {
    background-color: #7cbdc4;
}

.seatmap .legend .seat.second .backrest, .seatmap .seat-row .seat-group .seat-box .seat.second .backrest
    {
    background-color: #c5e7eb;
}

.seatmap .legend .seat.second .headrest, .seatmap .seat-row .seat-group .seat-box .seat.second .headrest
    {
    background-color: #ebfdff;
}

/*  */
.seatmap .legend .seat .armrest.left, .seatmap .seat-row .seat-group .seat-box .seat .armrest.left
    {
    left: 0;
    right: 90%;
}

.seatmap .legend .seat .armrest.right, .seatmap .seat-row .seat-group .seat-box .seat .armrest.right
    {
    right: 0;
    left: 90%;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat {
    margin-left: 0;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .seat-surface
    {
    position: absolute;
    height: 80%;
    width: 100%;
    border-radius: 2px;
    top: 10%;
    bottom: 10%;
    right: 0;
    left: 0;
    z-index: 10;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .backrest {
    position: absolute;
    height: 80%;
    width: 35%;
    border-radius: 2px;
    left: 0;
    top: 10%;
    bottom: 10%;
    z-index: 11;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .headrest {
    position: absolute;
    height: 60%;
    width: 20%;
    border-radius: 2px;
    left: 0;
    top: 20%;
    bottom: 20%;
    z-index: 12;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .armrest {
    position: absolute;
    height: 10%;
    width: 70%;
    border-radius: 2px;
    right: 30%;
    left: 0;
    display: none;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .armrest.left
    {
    display: block;
    top: 0;
    bottom: 10%;
}

.seatmap .seat-row .seat-group.vertical.left .seat-box .seat .armrest.right
    {
    display: block;
    bottom: 0;
    top: 90%;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat {
    margin-right: 0;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .seat-surface
    {
    position: absolute;
    height: 80%;
    width: 100%;
    border-radius: 2px;
    top: 10%;
    bottom: 10%;
    left: 0;
    right: 0;
    z-index: 10;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .backrest
    {
    position: absolute;
    height: 80%;
    width: 35%;
    border-radius: 2px;
    right: 0;
    left: 65%;
    top: 10%;
    bottom: 10%;
    z-index: 11;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .headrest
    {
    position: absolute;
    height: 60%;
    width: 20%;
    border-radius: 2px;
    right: 0;
    left: 80%;
    top: 20%;
    bottom: 20%;
    z-index: 12;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .armrest {
    position: absolute;
    height: 10%;
    width: 70%;
    border-radius: 2px;
    left: 30%;
    right: 0;
    display: none;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .armrest.left
    {
    display: block;
    bottom: 0;
    top: 90%;
}

.seatmap .seat-row .seat-group.vertical.right .seat-box .seat .armrest.right
    {
    display: block;
    top: 0;
    bottom: 90%;
}

.seatmap .legend .seat.purchased .seat-surface, .seatmap .seat-row .seat-group .seat-box.purchased .seat .seat-surface
    {
    background-color: #bfbfbf;
}

.seatmap .legend .seat.purchased .backrest, .seatmap .seat-row .seat-group .seat-box.purchased .seat .backrest
    {
    background-color: #cdcdcd;
}

.seatmap .legend .seat.purchased .headrest, .seatmap .seat-row .seat-group .seat-box.purchased .seat .headrest
    {
    background-color: #e3e3e3;
}

.seatmap .legend .seat.purchased .armrest, .seatmap .seat-row .seat-group .seat-box.purchased .seat .armrest
    {
    background-color: #c6c6c6;
}

/* 「×」マークの表示はせず、席番号の表示に変更になったため削除(**1)
.seatmap .seat-row .seat-group .seat-box.purchased .seat .seat-number {
    display: none;
}*/

.seatmap .seat-row .seat-group .seat-box.purchased .seat:before {
    font-family: "FontAwesome";
    /* content: "\f00d";  (**1) */
    color: #888;
    font-size: 30px;
    line-height: 50px;
    display: block;
    z-index: 13;
    position: relative;
}

/* ↓ボックスシート */
.seatmap .legend .seat.boxseat .seat-surface, .seatmap .seat-row .seat-group .seat-box.boxseat .seat .seat-surface
    {
    background-color: #bfbfbf;
}

.seatmap .legend .seat.boxseat .backrest, .seatmap .seat-row .seat-group .seat-box.boxseat .seat .backrest
    {
    background-color: #cdcdcd;
}

.seatmap .legend .seat.boxseat .headrest, .seatmap .seat-row .seat-group .seat-box.boxseat .seat .headrest
    {
    background-color: #e3e3e3;
}

.seatmap .legend .seat.boxseat .armrest, .seatmap .seat-row .seat-group .seat-box.boxseat .seat .armrest
    {
    background-color: #c6c6c6;
}
/* ↑ボックスシート */

.seatmap .legend .seat.selected .seat-surface, .seatmap .seat-row .seat-group .seat-box.selected .seat .seat-surface
    {
    background-color: var(--select-color-seat-surface);
}

.seatmap .legend .seat.selected .backrest, .seatmap .seat-row .seat-group .seat-box.selected .seat .backrest
    {
    background-color: var(--select-color-backrest);
}

.seatmap .legend .seat.selected .headrest, .seatmap .seat-row .seat-group .seat-box.selected .seat .headrest
    {
    background-color: var(--select-color-headrest);
}

.seatmap .legend .seat.selected .armrest, .seatmap .seat-row .seat-group .seat-box.selected .seat .armrest
    {
    background-color: var(--select-color-armrest);
}

.seatmap .seat-row .seat-group .seat-box.selected .seat .seat-number {
    display: none;
}

.seatmap .seat-row .seat-group .seat-box.selected .seat:before {
    font-family: "FontAwesome";
    content: "\f2be";
    color: #fef0f4;
    font-size: 30px;
    line-height: 50px;
    display: block;
    z-index: 13;
    position: relative;
}

.seatmap .seat-row {
    margin: 15px 0;
}

.seatmap .seat-row .seat-group {
    padding: 0;
}

.seatmap .seat-row .seat-group .seat.selected {
    padding: 0;
}

.seatmap .aisle {
    position: relative;
    height: 50px;
}

.seatmap .aisle>div {
    position: relative;
    height: 100%;
}

.seatmap .aisle .row .partition {
    height: 3px;
    background-color: #bababa; border-radius : 1px;
    position: absolute;
    border-radius: 1px;
}

.seatmap .aisle .left .row:fist-child .partition, .seatmap .aisle .right .row:fist-child .partition
    {
    top: 0;
}

.seatmap .aisle .left .row:last-child .partition, .seatmap .aisle .right .row:last-child .partition
    {
    bottom: 0;
}

.seatmap .aisle .door {
    height: 30px;
    width: 5px;
    background-color: #666;
    position: absolute;
    top: 10px;
}

.seatmap .aisle .left .door {
    left: -5px;
}

.seatmap .aisle .right .door {
    right: -5px;
}

.seatmap #selection-limit {
    display: none;
    width: 300px;
    left: 0;
    right: 0;
    margin: auto; position : fixed;
    bottom: 300px;
    z-index: 30;
    text-align: center;
    padding: 20px;
    position: fixed;
}

.seatmap #selection-limit .inner {
    padding: 10px;
    background: #333;
    border-radius: 4px;
    opacity: .8;
}

.seatmap #selection-limit .inner span {
    color: #fff;
}

.timeline-item .ticket > .row {
   margin: 0;
}
.timeline-item .ticket > .row > div:nth-child(3) {
   border-top: dashed 1px #ccc;
   margin-top: 6px;
   padding-top: 6px;
   color: var(--select-color-2);
}

.timeline-item .ticket > .row > div:nth-child(3) i {
   margin-left: .5em;
}

@media (min-width: 768px) {
    .top-logo {
        margin-top: 50px;
    }

    .top-logo img {
        max-height: 120px;
    }

    .top-msg {
        top: 250px;
        margin-top: 20px;
    }

    .logout .feature .background .train-image {
        top: 330px;
        background-image: url("/qseat/tq/images/6020_pc-1be81d9bd70b620c8d1f02e9eaabd78e.png");
        background-size: 3511px;
    }

    .feature .service-desc {
        /* PCサイズ */
        height: 582px;
    }

    .feature .service-desc-nolink {
        /* PCサイズ */
        height: 550px;
    }

    .feature .service-desc .links {
        /* PCサイズ */
        margin-top: 330px;
    }

    .logout .feature .service-desc {
        /* PCサイズ */
        height: 530px;
    }

    .timeline-item .ticket > .row {
       height: 60px;
    }

    /*.timeline-item .ticket > .row > div:nth-child(1) {
       margin-top: 10px;
    }*/
    .timeline-item .ticket > .row > div:nth-child(2) {
        margin-top: 20px;
    }
    .timeline-item .ticket > .row > div:nth-child(3) {
        height: 100%;
        padding-top: 0;
        line-height: 60px;
        margin-top: 0;
        border-top: none;
        border-left: dashed 1px #ccc;
    }

    div.step {
        font-size: 18px;
    }

    .timeline .timeline-item .train .ticket .badge {
        padding: 5px 12px;
    }

    body.top:not(.logout) {
        margin-bottom: 100px;
    }

    .top:not(.logout) .footer {
        height: 100px;
    }

    .top:not(.logout) .footer .copyright {
        height: 60px;
    }

    .top:not(.logout) .footer .copyright p {
        margin: 20px 0;
    }

    .background_bar {
        height: 210px;
        top: 70px;
      }

    .feature .service-desc .br {
        display: none;
    }
}

@media (max-width: 335px) {
    .feature .service-desc .br2 {
        display: inline;
    }
}


.fa-street-view {
  -webkit-animation: animation 2500ms linear infinite both;
  animation: animation 2500ms linear infinite both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/6wwZjy */

@-webkit-keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.125, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.125, 0, 1); }
  62.88% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.71, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.71, 0, 1); }
  65.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.206, 0, 1); }
  67.89% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.749, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.749, 0, 1); }
  70.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.196, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.196, 0, 1); }
  72.89% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.649, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.649, 0, 1); }
  77.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.146, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.146, 0, 1); }
  82.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.055, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.055, 0, 1); }
  92.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.005, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.005, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.125, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.125, 0, 1); }
  62.88% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.71, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.71, 0, 1); }
  65.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.206, 0, 1); }
  67.89% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.749, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.749, 0, 1); }
  70.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.196, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.196, 0, 1); }
  72.89% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.649, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.649, 0, 1); }
  77.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.146, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.146, 0, 1); }
  82.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.055, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.055, 0, 1); }
  92.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.005, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.005, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}


/* disappear spin button at input element of number */
/* for  Chrome Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* for Firefox IE */
input[type="number"] {
    -moz-appearance:textfield;
}

/* TOKYU ID 対応 ここから */
.promotion-tokyu-id {
    padding: 20px 15px 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #fff8dc;
    color: #666;
}

.feature .service-desc .links .tokyu-id {
    border: solid 2px #B30419;
    background-color: #FFFFFF;
    color: #000000;
}

.feature .service-desc .links .tokyu-id:hover {
    background-color: #F4F4F4;
}

.btn-tokyu-id {
    display: inline-block;
    padding: .8em 1em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    background-color: #FFFFFF;
    border:solid 1px #B30419;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.btn-tokyu-id:hover {
    background-color: #F4F4F4;
}

.btn-promotion-tokyu-id {
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    background-color: #f8f9fa;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px
        rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.btn-promotion-tokyu-id:hover {
    background-color: #F4F4F4;
}

.row .btn-tokyu-id-link {
    padding-top:1em;
    padding-bottom:1em;
}

.row .btn-tokyu-id-link-message {
    padding-bottom:2em;
}

/* TOKYU ID 対応 ここまで */

.custom-col-purchase-info {
  max-width: 750px;
  float: left;
  min-height: 1px;
  position: relative;
}

@media (min-width: 1200px) {
    .custom-col-purchase-info {
        width: 100%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .custom-col-purchase-info {
        width: 82%;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .custom-col-purchase-info {
        width: 96%;
    }
}

@media (max-width: 767px) {
    .custom-col-purchase-info {
        width: 100%;
    }
}

#info-table,
#info-table th,
#info-table td{
	border: 1px solid black !important;
}