@charset "UTF-8";
/*
# 1 共通スタイル
画面全体にかかるスタイルや、画面を問わず共通で使用する汎用的なスタイルを定義。
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
/*
## 1-1 汎用的に使用するスタイル
### 1-1-1 クリア
* 廻りこみ（float）を解除したい要素に.sp-clear`クラスを付与する
*/
.sp-clear {
    clear: both;
}
/*
### 1-1-2 右に回りこみ
* 右に廻りこみ（float）をしたい要素に.sp-float-right`クラスを付与する
*/
.sp-float-right {
    float: right;
}
/*
### 1-1-3 左に回りこみ
* 左に廻りこみ（float）をしたい要素に.sp-float-left`クラスを付与する
*/
.sp-float-left {
    float: left;
}
/*
### 1-1-4 非表示
* 非表示にしたい要素に.sp-display-none`クラスを付与する
*/
.sp-display-none {
    display: none !important;
}
/*
### 1-1-5 罫線

* 罫線はhr要素を使用して実装を行う。
* デフォルトの余白よりも下余白を小さくしたい場合は、hr要素に.sp-border-small`クラスを付与する

```
<div class=.sp-wrapper">
    <hr />
</div>
```
*/
.sp-wrapper hr {
    border: 1px solid #dcdcdc;
    display: inline-block;
    margin: 20px auto;
    width: 100%;
}
.sp-wrapper .sp-border-small {
    margin: 5px 0;
}
/*
## 1-2　サイト全体のスタイル
* フォントファミリーは優先度の高い順に、Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serifを設定。
* 駅ナンバーアイコンの、ナンバリング部分のみ等幅フォントを使用している。等幅フォントのフォントファミリーは優先度の高い順に、"Courier New",Courier,Monaco,monospaceを設定。
* フォントサイズは、デフォルト値は14px。
*/
html, body {
    padding: 0 auto;
    margin: 0 auto;
    height: 100%;
    line-height: 1.4;
    font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/*
## 1-3　iPhoneサファリ対応
* 画面の向きによりフォントサイズが変わることを防ぐ設定。
*/
body {
    -webkit-text-size-adjust: 100%;
}
/* pタグ　余白 */
.sp-paragraph {
    line-height: 2.0;
}

/*
# 2 ヘッダ
##2-1 ヘッダスタイル（全体）

* ヘッダ全体は、header要素で囲み、中にロゴや案内文言を入れる。　　
* 案内文言の強調したい文字は.sp-bold-text`クラス、補足的な文字は.sp-small-text`クラスを付与する。

```
<header class=.sp-header">
    <div class=.sp-header-area">
        <a class=.sp-logo" href="top.html">
            <img src="../img/logo.png" alt="近畿日本鉄道　インターネット予約・発売サービス" />
        </a>
        <div class=.sp-header-text">
            <span class=.sp-bold-text">ご利用時間：5:30～23:45</span>
            <p class=.sp-small-text">特急券はご乗車1ヶ月前の10:30から購入可能</p>
        </div>
    </div>
</header>
```
*/
.sp-header {
    color: white;
    /* height: 60px; */
    background-color: #2D4D80;
    /* border-bottom: 3px solid #2D4D80; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-header-area {
    background-color: #2D4D80;
    padding: 0px 10px;
    box-sizing: border-box;
    height: 100%;
    width: 960px;
    text-align: left;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* 会員の名前 */
.sp-header .sp-member-name {
    display: flex;
    align-items: center;
}
/* TOP・ログイン/ログアウト　ボタン */
.sp-header .sp-btn-area {
    display: flex;
    align-items: center;
}
/* 近畿日本鉄道ロゴエリア */
.sp-header .sp-logo {
    display: flex;
    align-items: center;
}
/* 近畿日本鉄道ロゴ画像 */
.sp-header .sp-logo img {
    max-width: 100%;
    max-height: 50px;
    margin: 5px 0;
}
/* ヘッダー右側(会員の名前・TOPボタン・ログイン/ログアウトボタン) */
.sp-header-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-right: 30px;
    flex-grow: 1;
}
/* TOP・ログイン/ログアウト ボタン リンク */
.sp-header-text a {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    background-color: #FFFFFF;
    border-radius: 3px;
    text-align: center;
    color: #204A66;
    cursor: pointer;
    padding: 5px 10px;
    text-decoration: none;
    min-width: 40px;
    font-weight: bold;
    margin: 10px 0 10px 10px;
}
/* TOP・ログイン/ログアウト ボタン リンクホバー時 */
.sp-wrapper .sp-header-text a:hover {
    background-color: #F6FBFF;
}
/*
.sp-header-text strong {
    display: block;
}
.sp-header-text small {
    font-size: 11.66667px;
}
*/

/*
##2-2 ヘッダスタイル（コールセンター用）

* ヘッダ全体は、header要素で囲み、中に会員名や社員名を入れる。　　

```
<header class="sp-call-header">
    <div class="sp-call-header-area">
        <div class="sp-member-name">近鉄太郎&nbsp;様&nbsp;(999-999)</div>
        <div class="sp-call-header-text">コールテスト</div>
    </div>
</header>
```
*/
.sp-call-header {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-call-header-area {
    background-color: #2D4D80;
    box-sizing: border-box;
    height: 100%;
    width: 960px;
    text-align: left;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 3px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 3px;
    font-size: 13px;
}
/* ヘッダー左側（代理会員の名前） */
.sp-call-header .sp-member-name {
    display: flex;
    align-items: center;
}
/* ヘッダー右側（コールセンターの名前） */
.sp-call-header-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-grow: 1;
}

/*
##2-3 ナビゲーションスタイル（コールセンター用）

* ヘッダ全体は、header要素で囲み、中にメニューリンクなどを入れる。　　

```
<header class="sp-call-header">
    <div class="sp-call-navigation-area">
        <div class="sp-call-navigation-text">
            <a href="">メニュー</a>&nbsp;
            <a onclick="return confirmLogout();" href="">ログアウト</a>&nbsp;
            <a href="/web/help/help_member.html" target="_blank">ヘルプ</a>
        </div>
    </div>
</header>
```
*/
/* ナビゲーションエリア */
.sp-call-navigation-area {
    box-sizing: border-box;
    height: 100%;
    width: 960px;
    text-align: left;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 5px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 5px;
    font-size: 13px;
}
/* ナビゲーション右側（リンク） */
.sp-call-navigation-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-grow: 1;
}
/* ナビゲーション内のリンク */
.sp-call-navigation-text a {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    min-width: 40px;
    font-weight: bold;
    color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
}

@media only screen and (max-width: 768px) {
.sp-header-area {
    width: 100%;
    height: auto;
}
.sp-header {
    height: auto;
}
.sp-header-text {
    padding: 0;
}
.sp-header .sp-logo {
}
.sp-header .sp-logo img {
    width: 80%;
}
.sp-header-text strong {
    font-size: 13.59223px;
}
.sp-call-header-area {
    width: 100%;
    height: auto;
}
.sp-call-header {
    height: auto;
}
.sp-call-header-text {
    padding: 0;
}
}
/*
# 3 フッタ

##3-1 フッタスタイル（全体）

* フッタ全体は、footer要素で囲み、フッタメニューは.sp-footer-area`クラスを付与したdiv要素で囲んだ上で、list要素でマークアップを行う。
* フッタの横幅はコンテンツの幅と同じサイズになるため、.sp-wrap`クラスを付与したdiv要素でコンテンツとフッター囲む。（定義や詳細は、[layout](layout.html)を参照のこと）

```
<footer class=.sp-footer.sp-clear">
    <div class=.sp-footer-img">
        <div class=.sp-footer-area">
            <ul class=.sp-link-list">
                <li><a href="#">ご利用ガイド</a></li>
                <li><a href="#">路線図<img src="../img/icon-pdf.png" alt="PDFダウンロード" /></a><span class=.sp-sub-text">（13.5MB）</span></li>
                <li><a href="#">セキュリティについて</a></li>
                <li><a href="#">個人情報について</a></li>
            </ul>
        </div>
        <div class=.sp-footer-area">
            <ul class=.sp-link-list">
                <li><a href="#">利用規約</a></li>
                <li><a href="#">お問合せ</a></li>
                <li><a href="#">Q & A</a></li>
                <li><a href="#">近畿日本鉄道　ホームページ</a></li>
            </ul>
        </div>
    </div>
    <div class=.sp-copy.sp-clear"><small>Copyright&copy;Kintetsu Railway Co.,Ltd. All Rights Reserved.</small></div>
</footer>
```
*/
.sp-footer {
    width: 100%;
    background-color: #E5EAFF;
    box-sizing: border-box;
    border-radius: 20px 20px 0px 0px;
    font-size: 14px;
    margin-top: 20px;
}
.sp-copy {
    background-color: #2D4D80;
    color: #ffffff;
    font-size: 9.8px;
    padding: 5px;
    text-align: center;/*height: 16px;*/
}
/*.sp-footer-area {
    width: 270px;
    float: left;
    padding-left: 10px;
    padding-top: 18px;
    padding-bottom: 16px;
    box-sizing: border-box;
}*/

/*
##3-2 フッタスタイル（コールセンター用）
*/
.sp-call-footer {
    box-sizing: border-box;
    border-radius: 20px 20px 0px 0px;
    font-size: 14px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.sp-call-copy {
    width: 960px;
    background-color: #2D4D80;
    color: #ffffff;
    font-size: 9.8px;
    padding: 5px 0px 5px 0px;
    text-align: center;/*height: 16px;*/
}

/*
##3-3 フッタメニュー

* フッタメニューは、list要素で実装を行う。フッタメニューは、1つのリストあたり（＝1列）、4メニューまでを列挙し、4つ以上の場合は別途、リストを定義する。
* ul要素に.sp-link-list`クラスを付与することで、三角のアイコンが付いたリストを作成することができる。

```
<div class=.sp-wrapper">
    <ul class=.sp-link-list">
        <li><a href="リンク先">フッタメニュー</a></li>
    </ul>
</div>
```
*/

/*
##3-4 ページトップに戻るボタン

* 本ボタンを押下すると、ページ上部にページ内遷移する。
* 戻り先は、各画面の冒頭で宣言している.sp-topに遷移するように設定している。

```
<div class=.sp-wrapper">
    <div class=.sp-clear.sp-footer-upbtn-area">
        <a class=.sp-linkup" href=".sp-top">このページの上に戻る</a>
    </div>
</div>
```

*/
.sp-footer-upbtn-area {
    text-align: right;
    padding-top: 20px;
    margin-right: 5px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
/* フッタ（SP）*/
.sp-footer {
    width: 100%;
    border-radius: 0px;
    /*padding-top: 10px;*/
}
.sp-footer-area {
    width: 100%;
    float: none;
    padding: 0px 10px;
}

}
/*
#4 フロー（シーケンス）

サイト共通のフローのスタイル
例)M-7-2_Password再登録本人認証等
PCでのデザインと、スマホでのデザインは別物になる。
HTMLは別々に記載し、CSSでデバイスに合わせて表示を切り替えている。
(そのため、実装例を確認したい場合は、PC版であればガイドの表示モードを「Desktop」または「Laptop」、スマホ版であれば「Tablet」または「SmartPhone」モードで表示する。）

##4-1 【PC版】フロー

* HTMLはlist要素で記述し、ul要素には.sp-flow`クラスを付与する。
* 各フローのli要素には、フローの状態に合わせて、
過去のフロー（完了済み）であれば.sp-flow-before`クラス、
現在のフローであれば.sp-flow-now`クラス、
未来のフローであれば.sp-flow-after`クラス  を付与する。

```
<ul class=.sp-flow">
    <li class=.sp-flow-before">過去のフロー</li>
    <li class=.sp-flow-now">現在のフロー</li>
    <li class=.sp-flow-after">未来のフロー</li>
</ul>
```
*/
/* フロー全体 */
.sp-flow {
    display: inline-block;
    padding-left: 10px;
}
/* PCではSPのフローを非表示 */
.sp-sp-flowlayout {
    display: none;
}
/* フロー段階 */
.sp-flow-now, .sp-flow-before, .sp-flow-after {
    width: 292px;
    height: 48px;
    background: #2D4D80;
    position: relative;
    border-radius: 6px 3px 3px 6px;
    line-height: 48px;
    list-style: outside none none;
    text-align: center;
    float: left;
    margin-right: 18px;
    font-size: 14px;
    padding-left: 4px;
    font-weight: bold;
    box-sizing: border-box;
}
/* 現画面フローの文字色 */
.sp-flow-now {
    color: #fff;
}
/* 各フロー　三角形 */
.sp-flow-now:before, .sp-flow-before:before, .sp-flow-after:before {
    border-bottom: 24px solid transparent;
    border-left: 16px solid #2D4D80;
    border-top: 24px solid transparent;
    content: "";
    display: block;
    height: 0;
    left: 100%;
    position: absolute;
    width: 0;
    margin-left: -1px;
}
/* 現画面より前のフロー　*/
.sp-flow-before {
    background: #b8b8b8;
    color: #44433e;
}
/* 現画面より前のフロー　三角形 */
.sp-flow-before:before {
    border-left: 16px solid #b8b8b8;
}
/* 現画面より後のフロー */
.sp-flow-after {
    background: #E5EAFF;
}
/* 現画面より後のフロー　三角形 */
.sp-flow-after:before {
    border-left: 16px solid #E5EAFF;
}

@media only screen and (max-width: 768px) {
/*
##4-2 【スマホ版】フロー

* スマホのデザインは、ブラウザサイズが小さくなると切り替わるよう、MediaQueryで制御する。
スマホのフローは、.sp-sp-flowlayout`クラスの付与されたdiv要素の中で、.sp-flow-sp`クラスの付与されたul要素でマークアップしていく。
* 現在のフローを示すマーカーは、li要素に.sp-flow-sp-now`クラスを付与する。

```
<div class=.sp-sp-flowlayout">
    <ul class=.sp-flow-sp">
        <li class=.sp-flow-sp-now">検索</li>
        <li>選択</li>
        <li>購入条件</li>
        <li>座席選択</li>
        <li>購入情報</li>
        <li>確認</li>
        <li>完了</li>
    </ul>
</div>
```
*/
/* SPではPCのフローを非表示 */
.sp-flow {
    display: none;
}
/* フロー全体レイアウト */
.sp-sp-flowlayout {
    display: inherit;
    background: #E5EAFF;
    height: 30px;
    over-flow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
    border-bottom: #8b8b8b solid 2px;
    min-width: 310px;
}
/* フロー全体 */
.sp-flow-sp {
    margin: 0;
    padding: 0;
}
/* 各フロー */
.sp-flow-sp li {
    list-style: none;
    display: inline-block;
    font-size: 12.6px;
    margin-top: 7px;
    margin-left: 20px;
    margin-right: 20px;
    background: url(../img/flow-sp-border.png) no-repeat;
    background-position: center 21px;
    height: 30px;
}
/* 各フロー 現画面 */
.sp-flow-sp li.sp-flow-sp-now {
    background: url(../img/flow-sp-now.png) no-repeat;
    background-position: center 18px;
}
}
/*
#5 レイアウト

サイトの共通レイアウトスタイル

*/
/*
##5-1 画面の横幅
* PC版の画面幅（横）は、会員向けサイトの横幅とあわせ、960pxで作成している。
* スマホ版のデザインは、MediaQueryを使用し、画面幅（横）が767px以下になるとスタイルが切り替わるように実装している。

##5-2 大枠のレイアウト
* ヘッダ、コンテンツ全体を.sp-wrapper`クラスのdiv要素で囲む
* コンテンツは.sp-contents`クラス内に定義し、さらに.sp-wrap`クラスのdiv要素で囲む

```
<div class=.sp-wrapper" id=.sp-top">
  <header class=.sp-header">
　　　ここにヘッダを記述
  </header>
  <div class=.sp-wrap">
    <div class=.sp-contents">
　　　　ここにコンテンツを記述
    </div>
    <footer class=.sp-footer">
　　　　ここにフッタを記述
    </footer>
  </div>
</div>
```
*/
.sp-wrapper {
    margin: auto;
    padding: auto;
    box-sizing: border-box;
    color: #2e2e2e;
    font-size: 14px;
    min-width: 960px;
}
/* 画面コンテンツ幅 */
.sp-wrap {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* 画面コンテンツ */
.sp-contents {
    padding: 30px 10px 20px;
    box-sizing: border-box;
}
/*
##5-3 PC、スマホでの表示切り替え
必要に応じて要素に下記クラスを付与し、PC版とスマホ版で要素の表示を切り替える。

| 　クラス名　 | 　PCでの表示　 | 　スマホでの表示　 |
|:--|:--:|:--:|
| .sp-display-block-pc`クラス | block | 非表示 |
| .sp-display-inline-pc`クラス | inine-block | 非表示 |
| .sp-display-block-sp`クラス | 非表示 | block |
| .sp-display-inline-sp`クラス | 非表示 | inline-block |
| .sp-switch-inline-block`クラス | inline-block | block |

```
<div class=.sp-display-block-pc">PC：block／SP:非表示</div>
<div class=.sp-display-inline-pc">PC：inline-block／SP:非表示</div>
<div class=.sp-display-block-sp">PC：非表示／SP:block</div>
<div class=.sp-display-inline-sp">PC：非表示／SP:inline-block</div>
<div class=.sp-switch-inline-block">PC：inline-block／SP:block</div>
```
*/
.sp-display-block-pc {
    display: block !important;
}
.sp-display-inline-pc {
    display: inline-block !important;
}
.sp-display-block-sp {
    display: none !important;
}
.sp-display-inline-sp {
    display: none !important;
}
.sp-switch-inline-block {
    display: inline-block !important;
}
/*
##5-4 共通で使用する囲みのレイアウト
*/
/*
###5-4-1 囲みのスタイル１
.sp-inclosed-area`クラスをdiv要素に付与する。

```
<div class=.sp-inclosed-area">
    <p>【年末年始　越年臨時特急の取扱いについて】<br>
12月1日 10時30分より、大晦日から元旦にかけて運転される越年臨時特急もお取り扱いいたします。<br>
ただし、購入・払戻がご利用頂けない時間帯がございますので、詳細をご確認ください。 </p>
</div>
```
*/
.sp-inclosed-area {
    background: #E5EAFF;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
    line-height: 1.4;
}
/*
###5-4-2 囲みのスタイル２
主に選択済み内容の表示時に使用する。.sp-selected-area`クラスをdiv要素に付与する。

```
<div class=.sp-selected-area" id=.sp-select-train">
    <span class=.sp-selected-day">2016/02/19（金）</span>
    <div class=.sp-selectedstation-area">
        <span class=.sp-selected-station">大阪難波</span>
        <span class=.sp-selected-time">10:40 発</span>
        <span class=.sp-selected-station.sp-clear">鳥羽</span>
        <span class=.sp-selected-time">12:29 着</span>
    </div>
</div>
```
*/
.sp-selected-area {
    background: #efefef;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
/*
###5-4-3 囲みのスタイル３
主に画面下部の注意事項の表示時に使用する。.sp-complement-area`クラスをdiv要素に付与する。

```
<div class=.sp-complement-area">
    <ul class=.sp-sub-message-area2">
        <li class=.sp-sub-message">しまかぜのご利用には、普通運賃・特急料金の他に、しまかぜ特別車両料金が必要です。</li>
    </ul>
</div>
```
*/
.sp-complement-area {
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    margin: 5px 10px;
    padding: 5px 10px;
}
/*
##5-5 表形式のレイアウト
*/
/*
###5-5-1 PC：2カラムテーブル／スマホ：1カラムテーブル
* 参照系のテーブルや、前画面の情報を引き継いで表示するテーブルなどで使用する。
* 2列テーブルは1行ずつ、dl、dt、dd要素を使って実装する。クラス名は下記のとおり。
 - dl：.sp-2col-row`クラス
 - dt：.sp-2col-label`クラス
 - dd：.sp-2col-data`クラス
* テーブル全体を.sp-2col-table`クラスを付与したdiv要素で囲む

```
<div class=.sp-2col-table">
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">ラベル１</dt>
    <dd class=.sp-2col-data">データ１</dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">ラベル２</dt>
    <dd class=.sp-2col-data">データ２</dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">ラベル３</dt>
    <dd class=.sp-2col-data">データ３</dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">ラベル４</dt>
    <dd class=.sp-2col-data">データ４</dd>
  </dl>
</div>

```

*/
.sp-2col-table {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: solid #999999 1px;
    border-left: solid #999999 1px;
    margin-top: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.sp-2col-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
.sp-2col-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    background: #e8dec2;
    color: #2e2e2e;
    width: 20%;
    min-width: 80px;
    border-bottom: solid #999999 1px;
    border-right: solid #999999 1px;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
}
.sp-2col-data {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    border-bottom: solid #999999 1px;
    border-right: solid #999999 1px;
    padding: 10px;
    box-sizing: border-box;
}
.sp-2col-data .sp-member-num-area .sp-member-num {
    margin: 4px;
    width: 18.5em;
    display: inline-block;
}
/* パスワード等、表の幅が短いとき */
.sp-2col-table2 {
    margin: 15px auto;
    width: 45%;
    border-top: none;
}
.sp-2col-table3 {
    margin: 15px auto;
    width: 55%;
    border-top: none;
}
.sp-2col-table4 {
    margin: 15px auto;
    width: 62%;
}
.sp-2col-row:first-child .sp-2col-label2 {
    border-top: solid #999999 1px;
}
.sp-2col-label2 {
    width: 40%;
}
.sp-2col-row:first-child .sp-2col-data2 {
    border-top: solid #999999 1px;
}
.sp-2col-data2 {
    width: 59%;
    flex-grow: unset;
    box-sizing: unset;
}
/* 号車・座席選択 */
.sp-2col-data .sp-train-numselect{
    width: 100%;
}
/* 号車・座席選択　リンク右寄せ */
.sp-2col-data .sp-train-right {
    float: right;
}
.sp-2col-label-impact {
    background: #b2c1ff !important;
}
/*
##5-6 凡例
* 凡例アイコンを配置する場合にはアイコン画像をimg要素で指定し、.sp-legend-item`クラスのspan要素で囲む

```
<span class=.sp-legend-item">
  <img src="../img/icon-nosmoking-legend.png" width="28" height="28" alt="禁煙車両">：禁煙車両（座席禁煙）</span>
```
*/
/* 凡例の内容　リスト表示 */
.sp-legend-list {
    margin: 0;
    padding: 0;
    display: inline-block;
}
/* 各凡例 */
.sp-legend-list .sp-legend-item-wrapper {
    list-style: none;
    display: inline-block;
}
.sp-legend-list2 dd:last-child {
    margin-bottom: 0;
}
/* 凡例の内容　定義リスト */
.sp-legend-list2, .sp-legend-list3 {
    margin: 0;
    padding: 5px;
}
/* 凡例　定義リスト　タイトル */
.sp-legend-list2 dt {
    float: left;
    font-weight: bold;
}
/* 凡例　定義リスト　内容 */
.sp-legend-list2 dd {
    padding-left: 1em;
    margin-bottom: 5px;
}
.sp-legend-list2 p {
    padding-left: 1em;
}
/* 凡例　定義リスト　タイトル */
.sp-legend-list3 dt {
    float: left;
    padding-bottom: 5px;
    text-align: right;
}
/* 凡例　定義リスト　内容 */
.sp-legend-list3 dd {
    padding-bottom: 5px;
    padding-right: 15px;
    min-height: 28px;
    line-height: 30.5px;
    float: left;
}
.sp-legend-list3 .sp-legend-item {
    min-height: 28px;
    line-height: 28px;
    padding-right: 0;
}
.sp-legend-item-wrapper-link {
    list-style: none;
    text-align: right;
}
.sp-legend-item > img {
    vertical-align: middle;
}
.sp-legend-item {
    padding-right: 15px;
    display: inline-block;
}
.sp-smoke-icon {
    margin-left: 5px;
    display: inline-block;
}

@media only screen and (max-width: 768px) {
    .sp-legend-list {
        margin-top: 10px;
    }
    .sp-clear-sp {
        clear: both;
    }
    .sp-center-text-pc {
        text-align: left !important;
    }
    .sp-wrapper {
        min-width: 280px;
    }
    /* フッタとコンテンツ（レイアウト用/SP） */
    .sp-wrap {
        width: 100%;
    }
    .sp-contents {
        padding-top: 10px;
        padding-right: 5px;
        padding-left: 5px;
    }
    .sp-display-block-pc {
        display: none !important;
    }
    .sp-display-inline-pc {
        display: none !important;
    }
    .sp-display-block-sp {
        display: block !important;
    }
    .sp-display-inline-sp {
        display: inline-block !important;
    }
    .sp-switch-inline-block {
        display: block !important;
    }
    /* ##PC：2カラムテーブル　SP：1カラムテーブル) */
    .sp-2col-table {
        display: block;
        margin-left: 5px;
        margin-right: 5px;
        width: auto;
        border-top: solid #999999 1px;
        border-left: solid #999999 1px;
    }
    .sp-2col-row {
        flex-wrap: wrap;
        margin-top: 0px;
        margin-bottom: 0px;
        display: block;
    }
    .sp-2col-label {
        justify-content: center;
        width: 100%;
        padding: 5px 10px 5px;
    }
    .sp-2col-row:first-child .sp-2col-label2,
    .sp-2col-row:first-child .sp-2col-data2 {
        border-top: none;
    }
    .sp-2col-data {
        width: 100%;
        padding: 5px 5px 5px;
        box-sizing: border-box;
    }
    .sp-legend-item {
        margin-bottom: 8px;
        padding-right: 5px;
    }
    .sp-legend-list .sp-legend-item-wrapper {
        display: block;
    }
    .sp-legend-list2 dd {
        margin-bottom: 15px;
    }
    .sp-legend-list3 dt {
        text-align: right;
    }
    .sp-legend-list3 dd {
        line-height: normal;
        max-width: 84%;
        padding: 5px 0 0;
    }
    .sp-legend-list3 p {
        padding-left: 12px;
    }
    .sp-legend-list3 .sp-legend-item {
        margin-bottom: 0;
        float: left;
    }
}
/*
#6 文章・文字
サイト共通の文章、文字スタイル

##6-1 基本のリンク

```
<div class=.sp-wrapper">
    <a href="#">リンク</a>
</div>
```

*/
.sp-wrapper a {
    display: inline-block;
    text-indent: 0;
}
.sp-wrapper a:link {
    color: #386786;
}
.sp-wrapper a:visited {
    color: #204a66;
}
.sp-wrapper a:hover {
    color: #4682aa;
}
.sp-wrapper a:active {
    color: #204a66;
}
.sp-wrapper .sp-2col-label-impact a:link {
    color: #2e2e2e;
}
.sp-wrapper .sp-2col-label-impact a:visited {
    color: #44433e;
}
.sp-wrapper .sp-2col-label-impact a:hover {
    color: #646464;
}
.sp-wrapper .sp-2col-label-impact a:active {
    color: #44433e;
}
/*
.sp-wrapper .sp-header-text a:link {
    color: white;
}
.sp-wrapper .sp-header-text a:visited {
    color: white;
}
.sp-wrapper .sp-header-text a:hover {
    color: white;
}
.sp-wrapper .sp-header-text a:active {
    color: white;
}
*/
/*
##6-2 リンク装飾
###6-2-1 マーク付き
.sp-linkmark`を付与したa要素で実装する

```
<div class=.sp-wrapper">
    <a class=.sp-linkmark" href="#">マーク付き</a>
</div>
```

*/
.sp-linkmark {
    position: relative;
    padding-left: 25px;
    text-align: left;
}
.sp-linkmark:before {
    content: url(../img/icon-mark1.png);
    position: absolute;
    left: 0;
    top: 2px;
}
/*
###6-2-2 ページ内リンク（上へ）
.sp-linkup`クラスを付与したa要素で実装する

```
<div class=.sp-wrapper">
    <a class=.sp-linkup" href="#">ページ内リンク</a>
</div>
```
*/
.sp-linkup {
    position: relative;
    padding-left: 25px;
}
.sp-linkup:before {
    content: url(../img/icon-mark2.png);
    position: absolute;
    left: 0;
    top: 2px;
}
.sp-linkup2:before {
    vertical-align: top;
    margin-right: 5px;
    content: url(../img/icon-mark2.png);
}
.sp-linkback {
    position: relative;
    display: inline-block;
    padding: 1px 5px;
    border-left: solid 4px white;
    border-right: solid 4px white;
}
/*
###6-2-3 ページ内リンク（下へ）
.sp-linkdown`クラスを付与したa要素で実装する

```
<div class=.sp-wrapper">
    <a class=.sp-linkdown" href="#">ページ内リンク</a>
</div>
```

*/
.sp-linkdown {
    position: relative;
    padding-left: 25px;
}
.sp-linkdown:before {
    content: url(../img/icon-mark6.png);
    position: absolute;
    left: 0;
    top: 2px;
}
/*
###6-2-4 別ウィンドウで開く(文字リンク専用）
.sp-link-blank`クラスを付与したa要素で実装する

```
<div class=.sp-wrapper">
    <a class=.sp-link-blank" href="#">別ウィンドウで開く</a>
</div>
```
*/
.sp-link-blank {
    padding-right: 5px;
    text-align: left;
}
.sp-link-blank:after {
    content: url(../img/icon-link.png);
    margin-left: 5px;
    vertical-align: middle;
}
.sp-link-area {
    padding-left: 10px;
}
/*
###6-2-5 閉じる
a要素、またはspan要素に.sp-link-close`クラスを付与する

```
<div class=.sp-wrapper">
    <a class=.sp-link-close" href="#">閉じる</a>
</div>
```
*/
.sp-link-close {
    /*position: relative;
    padding-left: 22px;*/
}
.sp-link-close:before {
    content: url(../img/icon-mark4.png);
    /*position: absolute;
    left: 4px;
    top: 0;*/
}
.sp-link-close-fix-height {
    height: 19.6px;
    /*position: relative;
    padding-left: 22px;*/
}
.sp-link-close-fix-height:before {
    content: url(../img/icon-mark4.png);
    /*position: absolute;
    left: 4px;
    top: 0;*/
}
@media only screen and (max-width: 768px) {
    .sp-link-close-fix-height {
        height: 22px;
        /*position: relative;
        padding-left: 22px;*/
    }
}
/*
###6-2-6 開く（詳細）
a要素、またはspan要素に.sp-link-open`クラスを付与する

```
<div class=.sp-wrapper">
    <a class=.sp-link-open" href="#">詳細</a>
</div>
```
*/
.sp-link-open {
    /*position: relative;
    padding-left: 22px;
    padding-right: 13px;*/
}
.sp-link-open:before {
    content: url(../img/icon-mark5.png);
    /*position: absolute;
    left: 4px;
    top: 0;*/
}
.sp-link-open-fix-height {
    height: 19.6px;
    /*position: relative;
    padding-left: 22px;
    padding-right: 13px;*/
}
.sp-link-open-fix-height:before {
    content: url(../img/icon-mark5.png);
    /*position: absolute;
    left: 4px;
    top: 0;*/
}
@media only screen and (max-width: 768px) {
    .sp-link-open-fix-height {
        height: 22px;
        /*position: relative;
        padding-left: 22px;
        padding-right: 13px;*/
    }
}
/*
##6-3 文字
*/
/*
###6-3-1 大きな文字（強調したい文字に使用）

* テキスト情報に.sp-large-text`クラスを付与する

```
<span class=.sp-large-text">大きな文字</span>
```
*/
.sp-large-text {
    font-size: 18.2px;
    font-weight: bold;
}
/*
###6-3-2 小さな文字（注釈など補足文字に使用）

* テキスト情報に.sp-small-text`クラスを付与する

```
<span class=.sp-small-text">小さな文字</span>
```
*/
.sp-small-text {
    font-size: 13.3px;
}
/*
###6-3-3 太字文字（強調したい文字に使用）

* テキスト情報に.sp-bold-text`クラスを付与する

```
<span class=.sp-bold-text">太字文字</span>
```
*/
.sp-bold-text {
    font-weight: bold;
}
/*
###6-3-4 色つき文字（強調したい文字に使用）

* テキスト情報に.sp-color-text`クラスを付与する

```
<span class=.sp-color-text">色つき文字</span>
```
*/
.sp-color-text {
    font-size: 18.2px;
    font-weight: bold;
    color: #006cac;
}
/*
###6-3-5 右寄せ文字（日付など右寄せしたい文字に使用）
* テキスト情報に.sp-right-text`クラスを付与する

```
<span class=.sp-right-text">右寄せ文字</span>
```
*/
.sp-right-text {
    text-align: right !important;
}
.sp-right-text a {
    text-align: left !important;
    display: inline !important;
}
.sp-link-right {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
/*
###6-3-6 左寄せ文字（左寄せしたい文字に使用）
* テキスト情報に.sp-left-text`クラスを付与する

```
<span class=.sp-left-text">左寄せ文字</span>
```
*/
.sp-left-text {
    text-align: left !important;
}
/*
###6-3-7 中央寄せ文字（決定ボタンの上の注意文言などに使用）
* テキスト情報に.sp-center-text`クラスを付与する

```
<span class=.sp-center-text">中央寄せ文字</span>
```
*/
.sp-center-text {
    text-align: center !important;
}
.sp-center-text-pc {
    text-align: center;
}
/*
###6-3-8 重要度の低い文字列（補足など）

```
<span class=.sp-sub-text">補足</span>
```
*/
.sp-sub-text {
    color: #646464;
}
/*
###6-3-9 選択中を表す文字列

```
<span class=.sp-select-text">選択中</span>
```
*/
.sp-select-text {
    background-color: #fff656;
    padding: 0 3px;
}
/*
##6-4 文章
*/
/*
###6-4-1 説明文章、リード文
* 画面の説明やリード文に使用するスタイル。文章（主にp要素）に.sp-text`クラスを付与する。

```
<p class=.sp-text">説明文です。</p>
```
*/
.sp-text, .sp-attention-text {
    padding: 10px;
}
.sp-text-area {
    margin: 20px 5px 15px 5px;
    line-height: 2;
}
/* F-0-4_メッセージ.htmlの「◆変更手続き」など */
.sp-text-area2 {
    margin-left: 5px;
}
/* E-2-1_特急券予約・発売(前回履歴).html C-1-3の表下のテキストのマージンをあわせるため */
.sp-text-area3 {
    margin: 10px 5px 15px 5px;
    line-height: 1.5;
}
/* M-3-2_会員登録抹消確認.html C-1-3の表下のテキストのマージンをあわせるため */
.sp-text-area4 {
    padding: 5px 10px 10px 10px;
}
@media only screen and (max-width: 768px) {
    .sp-text-area {
        line-height: 1.5;
    }
}
/*
###6-4-2 注意文章（赤字）
* 赤字で注意を促す文に使用するスタイル。文章（主にp要素）に.sp-attention-text`を付与する。
* 文字列の一部を赤字にするスタイル。強調する文字列をspan要素で囲み、.sp-attention-letter`クラスを付与する。

```
<p class=.sp-attention-text">注意文です。</p>
<p class=.sp-text">文字列の一部を<span class=.sp-attention-letter">赤字</span>にします。</p>
```
*/
.sp-attention-text {
    color: #ff0000;
}
.sp-attention-letter {
    color: #ff0000;
}
/*
###6-4-3 注意文章、案内文章１（行頭：※インデントあり）→※は廃止
* 注意文章や案内文章など補足文章（リスト形式）に使用するスタイル。座席選択の号車選択に関する注釈などで使用する。
* リストのul要素に.sp-sub-message-area`、li要素に.sp-sub-message`クラスを付与、またはp要素に.sp-sub-message`クラスを付与する。
* ※マークを含めた文章全体を、赤文字にしたい場合は、リストのli要素に付与するクラスを.sp-sub-attention-message`クラスに変更する。
* ※マークが行頭に付与される。また、左右にインデント（余白）を持たせている。
* 注意文章の最後に、リンクがある場合は、レイアウト調整のため、全体を.sp-sub-message-link`クラスを付与したdivで囲む。

```
<ul class=.sp-sub-message-area">
    <li class=.sp-sub-message">プレミアムの1号車と6号車は、展望車両となります。</li>
    <li class=.sp-sub-attention-message">列車の連結または切り離しにより乗降位置が異なる場合がございます。</li>
</ul>
```
*/
.sp-sub-message, .sp-sub-attention-message, .sp-sub-message a {
    text-indent: -12.88px;
    padding-left: 12.88px;
}
.sp-sub-message:before, .sp-sub-attention-message:before {
    content: "";
    font-size: 12.88px;
}
.sp-sub-message-before-none:before, .sp-sub-attention-message-before-none:before {
    content: none;
}
.sp-sub-attention-message {
    color: #ff0000;
}
.sp-sub-attention-message .sp-icon-s-star-nosmoking, .sp-sub-attention-message .sp-icon-l-star-nosmoking {
    color: #2e2e2e;
}
.sp-sub-message-area {
    margin: 10px 50px 20px 50px;
    padding: 0;
    list-style: none;
}
.sp-sub-message-link {
    margin-top: 0;
    margin-bottom: 5px;
    display: inline-block;
    width: 100%;
}
.sp-sub-message-link2 {
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
    width: 100%;
}
.sp-2col-table .sp-sub-message, .sp-2col-table .sp-sub-attention-message {
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
}
/*
###6-4-4 注意文章、案内文章２（行頭：※インデントなし）
* 画面下部の注意文章や案内文章など補足文章（リスト形式）に使用するスタイル。
* リストのul要素に.sp-sub-message-area2`、li要素に.sp-sub-message`クラスを付与、またはp要素に.sp-sub-message`クラスを付与する。
* ※マークが行頭に付与される。また、左右にインデント（余白）を持たせていない。.sp-sub-message-area`には左右にインデントがあるが、こちらはない）
* 注意文章の最後に、リンクがある場合は、レイアウト調整のため、全体を.sp-sub-message-link`クラスを付与したdivで囲む。

```
<ul class=.sp-sub-message-area2">
    <li class=.sp-sub-message">しまかぜのご利用には、普通運賃・特急料金の他に、しまかぜ特別車両料金が必要です。</li>
    <li class=.sp-sub-message">しまかぜの個室（和風／洋風）ご利用には、普通運賃・特急料金・しまかぜ特別車両料金の他に個室料金が必要です。
        <div class=.sp-legend-item-wrapper-link"><a class=.sp-link-blank" href="http://www.kintetsu.co.jp/senden/shimakaze/index.html" target="_blank">しまかぜについて</a></div>
    </li>
</ul>
```
*/
.sp-sub-message-area2 {
    padding: 0;
    list-style: none;
}
.sp-sub-message-area2 li.sp-sub-message, .sp-sub-message-area2 li.sp-sub-attention-message {
    margin-bottom: 5px;
}
.sp-sub-message-area2 li.sp-sub-message:last-child, .sp-sub-message-area2 li.sp-sub-attention-message:last-child {
    margin-bottom: 0;
}
.sp-sub-message-area3 {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
/*
###6-4-5 注意文章、案内文章３（行頭：・）
* 画面下部の注意文章や案内文章など補足文章（リスト形式）に使用するスタイル。
* リストのul要素に.sp-sub-disc-message-area`、li要素に.sp-sub-disc-message`クラスを付与する。
* 行頭マークが「・」の場合にこちらを使用する。
* ・マークが行頭に付与される。

```
<ul class=.sp-sub-disc-message-area">
    <li class=.sp-sub-disc-message">上記、特急券のほかに乗車券が必要となります。また、「購入決定」ボタン押下以降の払戻しには、手数料が必要となります。</li>
</ul>
```

*/
.sp-sub-disc-message-area {
    margin: 10px 0;
}
.sp-sub-disc-message-area2 {
    margin: 10px 0;
    padding-top: 10px;
}
.sp-sub-disc-message {
    padding: 5px 0;
}
.sp-list {
    margin-top: 0;
    margin-bottom: 10px;
}
/* 矢印リスト M-2-3-2_会員登録変更結果(仮登録通知).html */
.sp-list-arrow {
    margin: 0;
    padding-left: 1em;
}
.sp-list-arrow > li {
    list-style-type: none;
    text-indent: -1em;
    padding: 0;
}
.sp-list-arrow > li:before {
    display: inline;
    content: "→";
}
/* ※印リスト　M-3-1_会員登録抹消.html */
.sp-list-asterisk {
    margin: 0;
    padding-left: 1em;
}
.sp-list-asterisk > li {
    list-style-type: none;
    text-indent: -1em;
    padding: 0;
}
.sp-list-asterisk > li:before {
    display: inline;
    content: "※";
}
/* 番号付きリスト　F-0-4_メッセージ.html */
.sp-number-list {
    margin: 0 5px 15px;
    line-height: 2;
    padding-left: 0;
}
.sp-number-sub-list {
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt;
    padding-left: 2em;
    text-indent: -2em;
}
.sp-number-sub-list:before {
    display: marker;
    content: "(" counter(cnt) ")";
}
@media only screen and (max-width: 768px) {
    .sp-number-list {
        line-height: 1.5;
    }
    .sp-list-asterisk {
        margin: 0 5px;
    }
}
/* インターネット定期券予約　数字付きリスト */
ol {
    padding-left: 30px;
}
ol > li {
    margin: 3px 0;
    line-height: 2;
}
ol :nth-child(2) {
    line-height: 1.5;
}
.sp-sp {
    display: none;
}
.sp-pc {
    display: initial;
}
@media only screen and (max-width: 768px) {
    ol {
        margin-right: 5px;
    }
    ol > li {
        line-height: 1.5;
    }
    ol > li .sp-list {
        text-indent: -1em;
        display: inline-block;
        padding-left: 1em;
    }
    .sp-sp {
        display: initial;
    }
    .sp-pc {
        display: none;
    }
}


/*
##6-5 特急券情報テーブル
2カラムテーブル（スマホの場合は1カラム）内に下記項目がある場合、説明にしたがって実装する。
2カラムテーブルの実装方法は[layout](layout.html)参照。

* 乗車日時
  - .sp-2col-data`クラスを付与したdd要素の中に、.sp-datetime-list`クラスを付与したul要素を配置する
  - ul要素の中に.sp-datetime`クラスを付与したli要素を配置する
* 利用区間
  - .sp-2col-data`クラスを付与したdd要素の中に、.sp-station-list`クラスを付与したul要素を配置する
  - ul要素の中に.sp-station`クラスを付与したli要素を配置する。矢印は.sp-station-arrow`クラスのli要素で実装する
* 座席1列目、座席2列目
  - .sp-2col-data`クラスを付与したdd要素の中に、span要素を配置し、それぞれクラスを付与する。
    * 座席タイプ：.sp-seat-type`
    * 座席番号：.sp-seat-no`
    * 列車名：.sp-train-name`

```
<div class=.sp-wrapper">
<div class=.sp-2col-table">
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">乗車日時</dt>
    <dd class=.sp-2col-data">
        <ul class=.sp-bold-text.sp-datetime-list">
            <li class=.sp-datetime">2016/02/19（金）</li>
            <li class=.sp-datetime">09：33発 → 10：53着</li>
        </ul>
    </dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">利用区間</dt>
    <dd class=.sp-2col-data">大阪上本町　→　伊勢中川</dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">人数</dt>
    <dd class=.sp-2col-data">大人 2人 小児 0人</dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">座席（1列車目）</dt>
    <dd class=.sp-2col-data">
        <span class=.sp-seat-type">喫煙 一般</span>
        <span class=.sp-seat-no">1号車 10D,10C番</span>
    </dd>
  </dl>
  <dl class=.sp-2col-row">
    <dt class=.sp-2col-label">座席（2列車目）</dt>
    <dd class=.sp-2col-data">
        <span class=.sp-seat-type">禁煙 ツイン</span>
        <span class=.sp-seat-no">5号車 6E,6F番</span>
        <span class=.sp-train-name">[伊勢志摩ライナー]</span>
    </dd>
  </dl>
</div>
</div>
```

*/
.sp-train-name, .sp-seat-type, .sp-seat-no {
    display: inline-block;
    margin-right: 10px;
    min-width: 140px;
}
.sp-seat-type {
    min-width: 140px;
}
.sp-seat-no {
    margin-right: 0;
    min-width: auto;
}
.sp-train-table .sp-2col-data {
    justify-content: center;
    background: #E5EAFF;
}
.sp-express-ticket-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 5px 0;
}
.sp-train-table .sp-express-ticket-info {
    width: 500px;
}
.sp-express-ticket-info li {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
}
.sp-express-ticket-info .sp-trains {
    margin-bottom: 0;
}
.sp-express-ticket-info .sp-datetime {
    font-size: 22px;
}
.sp-express-ticket-info .sp-station {
    flex-wrap: wrap;
    width: 45%;
    font-size: 26px;
}
.sp-express-ticket-info .sp-station span {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 22px;
}
.sp-express-ticket-info .sp-station-arrow {
    align-items: center;
    width: auto;
    font-size: 18px;
    padding: 0 10px;
    font-weight: bold;
}
.sp-change-item {
    background-color: #fff656;
}

/* 合計料金表示 */
.sp-train-fare-table {
    margin-top: 0;
    margin-bottom: 15px;
    background: #E5EAFF;
    border: solid #999999 1px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.sp-train-fare-table hr {
    border:solid #999999;
    border-width:1px 0 0 0;
    margin: 0;
}
.sp-train-fare-table .sp-total,
.sp-train-fare-table .sp-breakdown {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #2e2e2e;
    width: 100%;
    min-width: 250px;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
}
.sp-train-fare-table .sp-breakdown {
    flex-direction: column;
}
.sp-train-fare-table .sp-total dt,
.sp-train-fare-table .sp-total dd {
    padding:5px;
    box-sizing: border-box;
}
.sp-train-fare-table .sp-total dt {
    font-size: 120%;
    text-align: right;
    margin-right: 10px;
}
.sp-train-fare-table .sp-total dd {
    font-size: 180%;
    font-weight: 600;
}
.sp-train-fare-table .sp-refund-charge{
    display: flex;
    margin-top: 10px;
    padding: 10px;
    font-weight: bold;
    align-items: center;
}
.sp-train-fare-table .sp-refund-charge dt {
    margin-right: 25px;
    box-sizing: border-box;
    font-size: 120%;
}
.sp-train-fare-table .sp-refund-charge dd {
    font-size: 180%;
}
.sp-train-fare-table .sp-breakdown > dt,
.sp-train-fare-table .sp-breakdown > dd {
    padding:5px;
    box-sizing: border-box;
}
.sp-train-fare-table .sp-breakdown > dt {
    text-align: right;
}
.sp-train-fare-table .sp-breakdown > dd {
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data {
    font-weight: normal;
    line-height: 1.75;
    display: table;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dt {
    white-space: nowrap;
    display: table-cell;
    vertical-align: top;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dl {
    display: table-row;
    flex-wrap: nowrap;
    justify-content: space-between
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dd {
    padding-left: 20px;
    display: table-cell;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dd > span {
    float: left;
    width: 7em;
    text-align: right;
    display: block;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dd .sp-discount-name {
    float: left;
    display: block;
    width: auto;
}
@media only screen and (max-width: 768px) {
.sp-train-fare-table {
    margin-left: 5px;
    margin-right: 5px;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dd > span {
    text-align: right;
    clear: both;
    width: 9em;
}
.sp-train-fare-table .sp-breakdown .sp-breakdown-data dd .sp-discount-name {
    width: 9em;    
}
}

/*凡例、列車・座席の追加料金について*/
.sp-additional-charge-area {
    margin-top: 15px;
}
.sp-legend-area .sp-head-area,
.sp-additional-charge-area .sp-head-area {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: #efefef;
    border: 1px solid #999999;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.sp-legend-area .sp-head-area div,
.sp-additional-charge-area .sp-head-area div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-legend-area .sp-head-area div:nth-child(2),
.sp-additional-charge-area .sp-head-area div:nth-child(2){
    margin-left: 35px;
}
.sp-legend-area .sp-head-area .sp-selecttrain-head-rightarea a,
.sp-additional-charge-area .sp-head-area .sp-selecttrain-head-rightarea a{
    display: flex;
    align-items: center;
    background-color: #d9d9d9;
    padding: 8px 10px;
    border-left: 1px solid #999999;
}
.sp-legend-area .sp-selecttrain-infoarea {
    padding: 0;
    border: none;
}
.sp-additional-charge-area .sp-selecttrain-infoarea {
    padding: 0;
}
.sp-legend-area .sp-2col-table,
.sp-additional-charge-area .sp-2col-table {
    border-top: none;
    margin: 0;
}
.sp-legend-area .sp-2col-table,
.sp-additional-charge-area .sp-2col-table {
    border-top: none;
    margin: 0;
}
.sp-additional-charge-area .sp-complement-area {
    margin: 0;
}
.sp-additional-charge-area .sp-selecttrain-infoarea {
    border-bottom: solid 1px #999999;
    border-right: solid 1px #999999;
    border-left: solid 1px #999999;
    padding: 3px 6px 3px 6px;
}

@media only screen and (max-width: 768px) {
    /* 注意文 */
    .sp-sub-message-area {
        margin-right: 20px;
        margin-left: 20px;
    }
    .sp-sub-message-table-area {
        margin: 0;
    }
    .sp-sub-message-link {
        margin-bottom: 5px;
    }
    .sp-sub-disc-message-area {
        padding-left: 30px;
        padding-right: 10px;
    }
    .sp-express-ticket-info {
    }
    .sp-express-ticket-info li {
    }
    .sp-express-ticket-info .sp-trains {
    }
    .sp-express-ticket-info .sp-datetime {
        font-size: 18px
    }
    .sp-express-ticket-info .sp-station {
        font-size: 20px
    }
    .sp-express-ticket-info .sp-station span {
        font-size: 18px;
    }
    .sp-express-ticket-info .sp-station-arrow {
        font-size: 14px;
        padding: 0 5px;
    }
    .sp-additional-charge-area .sp-selecttrain-infoarea {
        padding: 0 6px;
    }
    .sp-additional-charge-area .sp-complement-area {
        padding: 0 10px;
    }
}
/*
#7 ボタン

##7-1 ボタンのネーミングルール
* 文言は体言止めにする。
* 画面遷移系のボタンの場合は、基本的には「～へ」（～には遷移先の画面名）という文言で統一する。
* アクション系のボタンの場合は、何が起こるのか明示できる文言にする。(例：「OK」→何がOKなのかわからないためNG、「座席確定」→OK)
* 戻る系のボタンの場合は、外部遷移で戻り先が動的に変わり、指定することができない場合を除き、戻り先を明示する。(例：「戻る」→どこに戻るのかわからないため基本的にはNG、「特急券購入条件修正」→OK)
* 1つ前の画面に戻るボタンの場合は、基本的には「～修正」（～には遷移先の画面名）という文言にし、「変更」や「～へ」など表記ゆれが発生しないようにする。
*/
/*
##7-2 共通のボタンのスタイル
###7-2-1 重要なボタン

* 重要なボタンには、.sp-btn-important`クラスを付与する。
 重要なボタンは、画面遷移や確定など、重要なアクションを伴うボタンにのみ使用する。
 基本的には重要なボタンは、1画面に1，2程度に留め、多用しないこと。

```
<div class=.sp-wrapper">
    <a href="#" class=.sp-btn-important">重要ボタン</a>
</div>
```
*/
.sp-btn-important, .sp-btn-normal {
    background-color: #0000cd;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    border-bottom: 3px solid #00008b;
    border-right: 2px solid #00008b;
    color: #2e2e2e;
    /*font-weight: bold;*/
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 6px;
    padding: 13px 0 13px 0;
    max-width: 427px;
    min-width: 427px;
}
.sp-btn-login {
    background-color: #b2c1ff;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    border-bottom: 3px solid #92a7fc;
    border-right: 2px solid #92a7fc;
    color: #2e2e2e !important;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 6px;
    padding: 13px 0 13px 0;
    max-width: 427px;
    min-width: 427px;
}
.sp-btn-hikaiin {
    background-color: #ffae00;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    border-bottom: 3px solid #dd9000;
    border-right: 2px solid #dd9000;
    color: #2e2e2e !important;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 6px;
    padding: 13px 0 13px 0;
    max-width: 427px;
    min-width: 427px;
}
/* F-0-7_特急券受取方法兼ログイン */
.sp-btn-member {
    min-width: 200px;
    margin-left: 10px;
    margin-right: 10px;
}

@media only screen and (max-width: 768px) {
    .sp-btn-important, .sp-btn-normal {
        background-color: #0000cd;
        border-radius: 6px;
        display: inline-block;
        text-align: center;
        /*font-size: 16.1px;*/
        border-bottom: 3px solid #00008b;
        border-right: 2px solid #00008b;
        color: #2e2e2e;
        /*font-weight: bold;*/
        cursor: pointer;
        text-decoration: none;
        margin-bottom: 6px;
        padding: 13px 5px 13px 5px;
        min-width: 95%;
    }
    .sp-btn-login, .sp-btn-hikaiin {
        display: inline-block;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        margin-bottom: 6px;
        padding: 13px 5px 13px 5px;
        min-width: 95%;
    }
    .sp-btn-member {
        margin-left: 0;
        margin-right: 0;
    }
}

/*
###7-2-3 通常のボタン

* 通常のボタンには、.sp-btn-normal`クラスを付与する。
 通常のボタンは、重要なボタン以外のボタンに使用する。戻るのボタンでは、アイコン付与クラスと併用して、本スタイルを付与する。

```
<div class=.sp-wrapper">
    <a class=.sp-btn-normal" href="#">通常ボタン</a>
</div>
```
*/
.sp-btn-normal {
    background-color: #d9d9d9;
    border-bottom: 3px solid #c4c4c4;
    border-right: 2px solid #c4c4c4;
    color: #2e2e2e;
    font-weight: normal;
    padding: 10px 10px 10px 10px;
    min-width: 60px;
    max-width: 95%;
    max-width: -moz-available;         /* Firefox */
    max-width: -webkit-fill-available; /* Chrome */
}
.sp-wrapper .sp-btn-important:link {
    color: #FFFFFF;
}
.sp-wrapper .sp-btn-important:visited {
    color: #FFFFFF;
}
.sp-wrapper .sp-btn-important:hover {
    color: #FFFFFF;
    background-color: #4040FF;
}
.sp-wrapper .sp-btn-important:active {
    color: #FFFFFF;
}
.sp-wrapper .sp-btn-normal:link {
    color: #2e2e2e;
}
.sp-wrapper .sp-btn-normal:visited {
    color: #2e2e2e;
}
.sp-wrapper .sp-btn-normal:hover {
    color: #2e2e2e;
    background-color: #6495ed;
}
.sp-wrapper .sp-btn-normal:active {
    color: #2e2e2e;
}
.sp-wrapper .sp-membersitebtn-confirm:link {
    color: #ffffff;
}
.sp-wrapper .sp-membersitebtn-confirm:visited {
    color: #ffffff;
}
.sp-wrapper .sp-membersitebtn-confirm:hover {
    color: #ffffff;
    background-color: #ffa500;
}
.sp-wrapper .sp-membersitebtn-confirm:active {
    color: #fff656;
}
.sp-wrapper .sp-btn-normal:link {
    color: #2e2e2e;
}
.sp-wrapper .sp-btn-normal:visited {
    color: #2e2e2e;
}
.sp-wrapper .sp-btn-normal:hover {
    color: #787878;
    background-color: #e9e9e9;
}
.sp-wrapper .sp-btn-normal:active {
    color: #787878;
}
.sp-wrapper .sp-btn-login:hover {
    background-color: #c1cdff;
}
.sp-wrapper .sp-btn-hikaiin:hover {
    background-color: #ffbf59;
}
.sp-btn-important.sp-btn-off {
    background-color: #d9d9d9;
    border-bottom: 3px solid #c4c4c4;
    border-right: 2px solid #c4c4c4;
    color: #9a9a9a;
    cursor: default;
}
.sp-btn-important.sp-btn-off:hover {
    background-color: #d9d9d9;
    color: #9a9a9a;
}
.sp-btn-normal.sp-btn-off {
    color: #9a9a9a;
    cursor: default;
}
.sp-btn-normal.sp-btn-off:hover {
    background-color: #d9d9d9;
    color: #9a9a9a;
}
/*
###7-2-4 前の画面に戻るボタン
* 「前の画面に戻る」ボタンは、.sp-btn-backfirst`クラスを.sp-btn-normal`クラスと同じ位置に指定する。
 前の画面に戻るボタンは、「他の列車を検索」ボタンなど、2つ以上前の画面に戻る場合に使用する。
 また、戻る系のボタンは画面の下部（但し凡例よりも上）左側に配置し、「1つ前に戻る」ボタンと並べる場合は、本ボタンが左に来るように配置する。

```
<div class=.sp-wrapper">
    <a class=.sp-btn-normal.sp-btn-backfirst" href="#">前の画面に戻る</a>
</div>
```
*/
.sp-btn-backfirst {
    background-image: url(../img/icon-back-first.png);
    background-repeat: no-repeat;
    padding-left: 35px;
    background-position: 10px center;
    margin-right: 20px;
    box-sizing: border-box;
    min-width: 170px;
}
.sp-btn-reset {
    background-repeat: no-repeat;
    background-position: 10px center;
    margin-right: 20px;
    box-sizing: border-box;
    min-width: 170px;
}
/*
###7-2-5 1つ前に戻るボタン
* 「1つ前に戻る」ボタンは、.sp-btn-back`を、.sp-btn-normal`クラスと同じ位置に指定する。
 1つ前の画面に戻るボタンは、「特急券購入条件修正」ボタンなど、1画面前の画面に戻る場合に使用する。外部遷移などで戻り先が複数ある場合を除き、戻るボタンのボタン名には、戻り先を明示すること。また、「～修正」という文言を使用し、表記ゆれのないようにする。
 また、戻る系のボタンは画面の下部（但し凡例よりも上）左側に配置し、「前の画面に戻る」ボタンと並べる場合は、本ボタンが右に来るように配置する。

```
<div class=.sp-wrapper">
    <a class=.sp-btn-normal.sp-btn-back" href="purchase-condition.html">1つ前に戻る</a>
</div>
```
*/
.sp-btn-back {
    background-image: url(../img/icon-back.png);
    background-repeat: no-repeat;
    padding-left: 30px;
    background-position: 10px center;
    margin-right: 20px;
    box-sizing: border-box;
    min-width: 170px;
}
/*
###7-2-6 前へ、次へボタン

* 「前へ」ボタンは、.sp-btn-left`を、.sp-btn-normal`クラスと同じ位置に指定する。
 「前の時間帯」ボタンなど左向きの矢印のついたボタンにしたい場合に使用する。
* 「→次へ」ボタンは、.sp-btn-right`を、.sp-btn-normal`クラスと同じ位置に指定する。
 「後の時間帯」ボタンなど右向きの矢印のついたボタンにしたい場合に使用する。

```
<div class=.sp-wrapper">
    <a class=.sp-btn-normal.sp-btn-left" href="#">前の時間帯</a>
    <a class=.sp-btn-normal.sp-btn-right" href="#">後の時間帯</a>
</div>
```
*/
.sp-btn-left {
    background-image: url(../img/icon-arrow-left.png);
    background-repeat: no-repeat;
    padding-left: 40px;
    background-position: 10px center;
    margin-right: 20px;
}
.sp-btn-right {
    background-image: url(../img/icon-arrow-right.png);
    background-repeat: no-repeat;
    padding-right: 40px;
    background-position: right 10px center;
    margin-left: 20px;
}
.sp-btn-center-position {
  text-align: center;
}
.sp-btn-center-position a.sp-btn-backfirst:last-of-type {
  margin-right: 0;
}
/*
##7-3 ボタンレイアウト用クラス
画面レイアウトに合わせて、ボタンレイアウト用のクラスを付与したdiv要素で、各ボタンを囲む。
*/
/*
###7-3-1 ボタンを中央に配置するレイアウト
* アクション系や画面遷移を伴うボタン（主に重要なボタン）は、.sp-center-btnarea`クラスを付与したdiv要素でボタンを囲む。

```
<div class=.sp-center-btnarea">
    <a href="#" class=.sp-btn-important">重要ボタン</a>
</div>
```
*/
.sp-center-btnarea {
    text-align: center;
    margin-bottom: 20px;
}
.sp-center-btn {
    margin-top: 30px;
}
/*
###7-3-2 ボタンがPCでは左右、スマフォでは2段で中央のレイアウト
* 戻るボタンや次へ前へボタンなどは、.sp-bottom-btnarea`クラスを付与したdiv要素でボタンを囲む。

```
<div class=.sp-bottom-btnarea">
    <a class=.sp-btn-normal.sp-btn-back" href="#">１つ前に戻る</a>
    <a href="http://www.ticket.kintetsu.co.jp/M/MZZ/MZZ20.do?op=pDisplayServiceMenu" class=.sp-membersitebtn-confirm.sp-float-right">会員向けサイトへ</a>
</div>
```
*/
.sp-bottom-btnarea {
    padding-top: 20px;
}
.sp-bottom-btnarea .sp-btn-left {
    float: left;
}
.sp-bottom-btnarea .sp-btn-right {
    float: right;
}

@media only screen and (max-width: 768px) {
/* ボタンエリア（下部） */
.sp-bottom-btnarea .sp-btn-left, .sp-bottom-btnarea .sp-btn-right, .sp-float-right {
    float: none !important;
}
.sp-bottom-btnarea {
    text-align: center;
}
.sp-btn-backfirst, .sp-btn-back {
    margin-right: 0;
}
.sp-btn-left, .sp-btn-right {
    margin-right: 10px;
}
.sp-membersitebtn-pc {
    display: none;
}
.sp-membersitebtn-sp {
    display: inline-block;
}
}
/*
#8 見出し

サイトの共通見出しスタイル
H1からH4要素にスタイルを設定しており、クラス名は付与しなくてよい。

*/
/*
##8-1 H1見出し

```
<div class=.sp-contents">
    <h1>H1　見出し</h1>
</div>
```
*/
.sp-contents h1 {
    background-image: url(../img/h1.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    font-size: 19.6px;
    min-height: 26px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    box-sizing: border-box;
}
/*
##8-2 H2見出し

```
<div class=.sp-contents">
    <h2>H2　見出し</h2>
</div>
```
*/
.sp-contents h2 {
    background-image: url(../img/h2.png);
    background-position: 0 8px;
    background-repeat: no-repeat;
    font-size: 19.6px;
    margin: 30px 0 10px;
    padding-left: 12px;
    box-sizing: border-box;
}
/*
##8-3 H3見出し

```
<div class=.sp-contents">
    <h3>H3　見出し</h3>
</div>
```
*/
.sp-contents h3 {
    background-image: url(../img/h3.png);
    background-position: 0 11px;
    background-repeat: no-repeat;
    font-size: 19.6px;
    margin: 0;
    padding-left: 12px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
#supplement-area {
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 0;
}
/*
##8-4 H4見出し

```
<div class=.sp-contents">
    <h4>H4　見出し</h4>
</div>
```
*/
.sp-contents h4 {
    font-size: 18.2px;
    margin: 0;
    padding-left: 12px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
/* ## H1見出し*/
.sp-contents h1 {
    margin-bottom: 10px;
    margin-left: 5px;
}
/* ## H2見出し*/
.sp-contents h2 {
    background-position: 5px 8px;
    padding-left: 17px;
}
/* ## H3見出し*/
.sp-contents h3 {
    margin-left: 10px;
}
}
/*
#9 フォーム

サイトの共通フォームスタイル

##9-1 input要素（テキストボックス）について
###9-1-1 type属性
下記ルールにしたがってtype属性を付与する
* 半角数字：`type=tel`
* メールアドレス：`type=email`
* 上記以外：`type=text`

###9-1-2 maxlength属性
入力可能な最大桁数を設定する

###9-1-3 クラス名
汎用的なフィールドに、以下のクラスを付与する。
付与するクラスによって、テキストフィールドの幅が最適化される。
* フィールド（小）：.sp-short`
* フィールド（中）：.sp-middle`
* フィールド（大）：.sp-long`

```
<p>フィールド（小）</p>
<input type="text" class=.sp-short" />
<p>フィールド（中）</p>
<input type="text" class=.sp-middle" />
<p>フィールド（大）</p>
<input type="text" class=.sp-long" />
```

下記の入力フィールドには以下のクラスを付与する。
こちらも付与するクラスによって、テキストフィールドの幅が最適化される。
* 8桁の日付：.sp-date`
* 予約番号:.sp-purchase-no`
* クレジットカード番号：.sp-card-no`
* セキュリティコード：.sp-security-no`
* メールアドレス：.sp-mail`
* セイ、メイ：.sp-name`
* 駅名：.sp-station`

##9-2 input要素（ラジオボタン・チェックボックス）について
* input要素のtype属性を`radio`にすることでラジオボタン、`checkbox`にすることでチェックボックスになる。
* 初期選択状態にしたい項目には、input要素に、`checked`を付与する。
* ラジオボタン、チェックボックス共に、必ずlabel要素を用いた、コントロールのラベルを併用する。
* 各input要素には一意なIDを付与し、コントロールのlabel要素のfor属性値にも同じID値を付与する。そうすることで、ラベル部分を押下しても、コントロールが動作するようになる。
ただし、iOS 5.0以前の古いiOSには上記が効かないバグがあるため、input要素と対にするlabel要素には、空の`onclick`属性を指定し、バグを解消する。

```
<p>ラジオボタン</p>
<input type="radio" name="dammy-radio" id="select1" checked>
<label for="select1" onclick="">選択しない</label>
<input type="radio" name="dammy-radio" id="select2">
<label for="select2" onclick="">シートマップから選択</label>

<p>チェックボックス</p>
<input type="checkbox" id="agree-check" value="agree">
<label for="agree-check" onclick="">上記の規約に同意します</label>
```

## 9-3 select要素（セレクトボックス）について
* 初期選択状態にしたい項目には、select要素の子要素であるoption要素に、`selected`を付与する。

```
<select name="dammy">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
```

*/
input, select, textarea {
    padding: 2px 3px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    vertical-align: middle;
    border: 1px solid #999999;
}
input[type=radio] {
    vertical-align: text-top;
}
select {
    height: 27px;
}
select.sp-select-train-num {
    width: 50%;
}
input.sp-date {
    width: 84px;
}
input.sp-purchase-no {
    width: 65px;
}
input.sp-security-no {
    width: 56px;
}
input.sp-name {
    width: 280px;
}
input.sp-mail {
    width: 280px;
}
input.sp-cardno {
    width: 224px;
}
input.sp-station {
    width: 252px;
}
input.sp-station-short {
    width: 200px;
}
input.sp-short {
    width: 140px;
}
input.sp-middle {
    width: 280px;
}
input.sp-long {
    width: 420px;
}
input.sp-mail-address {
    width: 350px !important;
}
input.sp-pass {
    width: 235px !important;
}
/*
## 9-4 入力様式のガイド表示
（半角数字）、（全角カナ）などの、ラベル情報の補足的な役割を持つ、入力様式のガイド表示は.sp-form-sub-explain`クラスを付与したspan要素で実装する。

```
予約番号<span class=.sp-form-sub-explain">(半角数字)</span>
```
*/
.sp-form-sub-explain {
    font-weight: normal;
    font-size: 13.3px;
}
/*
##9-5 入力例
フォームの入力例は.sp-form-example`クラスを付与したspan要素で実装する。

```
<input type="text" class=.sp-name" maxlength="20"><span class=.sp-form-example">例:キンテツ</span>
```
*/
.sp-form-example {
    box-sizing: border-box;
    padding: 5px 0;
    display: inline-block;
    margin-right: 10px;
}
.sp-form-message {
    padding: 0 10px;
}
/*
##9-6 エラーメッセージ
エラーメッセージは`error-message`クラスを付与したp要素で実装する。さらに、エラーメッセージ全体を`error-message-area`を付与してdiv要素で囲む。
```
<div class=.sp-error-message-area">
    <p class=.sp-error-message">電子メールアドレスは半角文字で入力してください。(S1802)</p>
</div>
```
*/
.sp-error-message-area {
    background-color: #ffff99;
    padding: 0 10px;
    color: #ff0000;
    font-weight: bold;
    margin-top: 10px;
}
/*
##9-7 エラー表示（エラー発生フィールド）
* エラーになっているフォームには.sp-error-item`クラスを付与する。
* ラジオボタン、チェックボックスには、エラーになっているコントロールのlabel要素に.sp-error-item`クラスを付与する。

```
<p>テキストボックス</p>
<input type="email" class=.sp-mail.sp-error-item" maxlength="60">

<p>セレクトボックス</p>
<select class=.sp-error-item" name="dammy">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<p>ラジオボタン</p>
<input type="radio" name="dammy-radio-error" id="select3" checked>
<label for="select3" onclick="" class=.sp-error-item">選択しない</label>
<input type="radio" name="dammy-radio-error" id="select4">
<label for="select4" onclick="" class=.sp-error-item">シートマップから選択</label>

<p>チェックボックス</p>
<input type="checkbox" id="agree-check" value="agree">
<label for="agree-check" onclick="" class=.sp-error-item">上記の規約に同意します</label>
```
*/
.sp-error-item {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
    padding: 3px 4px;
}
label.sp-error-item {
    border: none;
}

@media only screen and (max-width: 768px) {
input.sp-name {
    width: 100%;
}
input.sp-mail {
    width: 100%;
}
input.sp-station {
    width: 196px;
    margin-left: 2px;
}
input.sp-mail-address {
    width: 100% !important;
}
input.sp-pass {
    width: 100% !important;
}
input.sp-ride {
    width: 100% !important;
}
}
/* M-1-1_会員規約・特約　テキストエリア */
textarea.readonly{ 
    margin: 40px auto;
    display: block;
}
@media only screen and (max-width: 768px) {
textarea.readonly {
width: 95%;
} 

}
/*
#10 アイコン

サイトの共通アイコンスタイル
##10-1 アイコンの共通実装指針

* 文字要素を含むアイコンはCSSで実装し、アイコン内に文字要素を含まないものはHTMLのimg要素で実装を行う。
* 全体方針として、英語化対応も踏まえ、アイコンには日本語を画像文字として埋め込まない。
* ブラウザの設定により画像が表示されない場合でも意味が伝わるように、各画像には必ずアイコンの内容がわかるテキスト情報を持たせること。（img要素での実装であれば、必ずalt属性を記述する）
* Sサイズ、Lサイズアイコンでは、クラスの付与だけでアイコンの出し分けを行うために、スクリプトを用いてimg要素の挿入を動的に行う。アイコンの表示領域を確保した親要素（主にdiv要素）に、該当するアイコンのクラスを付与することで、子要素としてアイコンのソースコード（img要素）が、スクリプトによって動的に挿入される。
*/
/*
##10-2 座席禁煙アイコン
* 座席禁煙アイコンは、画像を用いず、文字情報とCSSによるスタイル付与で実装している。
* 英語表記の場合は、”★座席禁煙”の”座席禁煙”部分を削除し、”★”のみのアイコンにする。

###10-2-1 座席禁煙アイコン（通常サイズ）

```
<span class=.sp-icon-s-star-nosmoking.sp-icon-star-inline">座席禁煙</span>
```
*/
.sp-icon-s-star-nosmoking, .sp-icon-l-star-nosmoking {
    background-color: #fca000;
    font-size: 14px;
    border: 1px solid #2e2e2e;
    border-radius: 2px;
    padding: 3px 1px 2px 0;
    height: 14px;
    display: inline-block;
    line-height: 1;
    font-weight: bold;
    text-indent: 0;
    margin-top: 5px;
}
.sp-icon-s-star-nosmoking:before, .sp-icon-l-star-nosmoking:before {
    content: "★";
    font-size: 14px;
    font-weight: bold;
}
/*
###10-2-2 座席禁煙アイコン（縦幅が大きいサイズ）

```
<span class=.sp-icon-l-star-nosmoking.sp-icon-star-inline">座席禁煙</span>
```
*/
.sp-icon-l-star-nosmoking {
    padding: 5px;
}
.sp-icon-star-inline {
    margin: 1px;
    vertical-align: middle;
}
/*
##10-3 必須アイコン
* フォームで必須入力を行う項目にアイコンを付与する。

```
<span class=.sp-required">必須</span>
```
*/
.sp-required {
    font-size: 12.6px;
    color: #ffffff;
    background: #ff0000;
    border-radius: 4px;
    padding: 1px 3px 2px;
    height: 20px;
    min-width: 22px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}
/*
##10-4 駅名ナンバリングアイコン

* .sp-icon-stationno`クラスと同じ位置に、該当する路線のクラスを付与する。

```
<span class=.sp-icon-stationno.sp-icon-stationno-A">A99</span>
```
*/
.sp-icon-stationno {
    font-family: 'Courier New', Courier, Monaco, monospace;
    padding: 0 4px;
}
/*
###10-4-1 難波・奈良線（A）、生駒線（G）

```
<span class=.sp-icon-stationno.sp-icon-stationno-A">A99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-G">G99</span>
```
*/
.sp-icon-stationno-A, .sp-icon-stationno-G {
    background-color: #c22047;
    color: #ffffff;
}
/* ###10-4-2 京都・橿原線（B）、天理線（H）、田原本線（I）
```
<span class=.sp-icon-stationno.sp-icon-stationno-B">B99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-H">H99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-I">I99</span>
```
*/
.sp-icon-stationno-B, .sp-icon-stationno-H, .sp-icon-stationno-I {
    background-color: #e7a61a;
}
/* ###10-4-3 けいはんな線（C）
```
<span class=.sp-icon-stationno.sp-icon-stationno-C">C99</span>
```
*/
.sp-icon-stationno-C {
    background-color: #65c03a;
    color: #ffffff;
}
/* ###10-4-4 大阪線（D）、信貴線（J）
```
<span class=.sp-icon-stationno.sp-icon-stationno-D">D99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-J">J99</span>
```
*/
.sp-icon-stationno-D, .sp-icon-stationno-J {
    background-color: #2e89d9;
    color: #ffffff;
}
/* ###10-4-5 名古屋線（E）、湯の山線（K）、鈴鹿線（L）
```
<span class=.sp-icon-stationno.sp-icon-stationno-E">E99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-K">K99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-L">L99</span>
```
*/
.sp-icon-stationno-E, .sp-icon-stationno-K, .sp-icon-stationno-L {
    background-color: #1b3db0;
    color: #ffffff;
}
/* ###10-4-6 南大阪・吉野線（F）、道明寺線（N）、長野線（O)、御所線（P）
```
<span class=.sp-icon-stationno.sp-icon-stationno-F">F99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-N">N99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-O">O99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-P">P99</span>
```
*/
.sp-icon-stationno-F, .sp-icon-stationno-N, .sp-icon-stationno-O, .sp-icon-stationno-P {
    background-color: #008446;
    color: #ffffff;
}
/* ###10-4-7 山田・鳥羽・志摩線（N）
```
<span class=.sp-icon-stationno.sp-icon-stationno-M">M99</span>
```
*/
.sp-icon-stationno-M {
    background-color: #00b1bb;
    color: #ffffff;
}
/* ###10-4-8 生駒鋼索線（Y）、西信貴鋼索線(Z)
```
<span class=.sp-icon-stationno.sp-icon-stationno-Y">Y99</span>
<span class=.sp-icon-stationno.sp-icon-stationno-Z">Z99</span>
```
*/
.sp-icon-stationno-Y, .sp-icon-stationno-Z {
    background-color: #b1865b;
    color: #ffffff;
}
/*
##10-5 Sサイズアイコン
* Sサイズアイコンは、車両選択など小さい領域で使用する。
* Sサイズアイコンでは、スクリプトを用いてimg要素の挿入を動的に行う。アイコンの表示領域を確保した親要素（主にdiv要素）に、該当するアイコンのクラスを付与することで、子要素としてアイコンのソースコード（img要素）が、スクリプトによって動的に挿入される。
* アイコンを新規追加したい場合は、inserticon.jsに以下の記述を参考に追記する。
  `$("クラス名").prepend('<img alt="テキスト情報" src="アイコンのパス" width="18" height="18">');`
*/
/*
###10-5-1 禁煙アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-nosmoking`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-nosmoking">
    <img alt="禁煙" src="../img/icon-nosmoking-s.png" width="18" height="18">
</div>
```

###10-5-2 喫煙アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-smoking`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-smoking">
    <img alt="喫煙" src="../img/icon-smoke-s.png" width="18" height="18">
</div>
```

###10-5-3 喫煙（一部区間）アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-smoking2`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-smoking2">
    <img alt="喫煙" src="../img/icon-smoke2-s.png" width="18" height="18">
</div>
```

###10-5-4 喫煙室アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-smokeroom`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-smokeroom">
    <img alt="喫煙室" src="../img/smoke-room16.gif" width="18" height="18">
</div>
```

###10-5-5 喫煙ルームアイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-smokecorner`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-smokecorner">
    <img alt="喫煙ルーム" src="../img/smoke-corner16.gif" width="18" height="18">
</div>
```

###10-5-6 化粧室アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-wc`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-wc">
    <img alt="化粧室" src="../img/wc16.gif" width="18" height="18">
</div>
```

###10-5-7 多目的化粧室アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-multiwc`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-multiwc">
    <img alt="多目的化粧室" src="../img/multi-wc16.gif" width="18" height="18">
</div>
```

###10-5-8 車内販売アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-sales`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-sales">
    <img alt="車内販売" src="../img/icon-sales-s.png" width="18" height="18">
</div>
```

###10-5-9 車内販売（一部区間）アイコン（Sサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-s-sales2`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-s-sales2">
    <img alt="車内販売（一部区間）" src="../img/icon-sales2-s.png" width="18" height="18">
</div>
```
*/
/*
##10-6 Lサイズアイコン
* Lサイズアイコンは、凡例やシートマップの車内設備の表記に使用する。
* Lサイズアイコンでは、スクリプトを用いてimg要素の挿入を動的に行う。アイコンの表示領域を確保した親要素（主にdiv要素）に、該当するアイコンのクラスを付与することで、子要素としてアイコンのソースコード（img要素）が、スクリプトによって動的に挿入される。
* アイコンを新規追加したい場合は、inserticon.jsに以下の記述を参考に追記する。
  `$("クラス名").prepend('<img alt="テキスト情報" src="アイコンのパス" width="30" height="30">');`
  ※空席状況アイコンの場合は、width="32" height="32"　とする。
*/
/*
###10-6-1 アイコンなし（Lサイズ）
* アイコンがないが、領域だけは確保したい場合にはブロック要素に.sp-icon-l-noicon`クラスを付与する。（複数アイコンを並べる際に、縦をそろえたい場合など）

```
<div class=.sp-icon-l-noicon"></div>
```
*/
.sp-icon-l-noicon {
    width: 30px;
    height: 30px;
}
/*
###10-6-2 化粧室アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-ws`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-ws">
    <img alt="化粧室" src="../img/wc30.gif" width="30" height="30">
</div>
```

###10-6-3 多目的化粧室アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-multiws`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-multiws">
    <img alt="多目的化粧室" src="../img/multi-wc30.gif" width="30" height="30">
</div>
```

###10-6-4 喫煙コーナーアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-smokecorner`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-smokecorner">
    <img alt="喫煙コーナー" src="../img/smoke-corner30.gif" width="30" height="30">
</div>
```

###10-6-5 喫煙室（座席禁煙）アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-smokeroom`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-smokeroom">
    <img alt="喫煙室（座席禁煙）" src="../img/smoke-room30.gif" width="30" height="30">
</div>
```

###10-6-6 喫煙アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-smoke`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-smoke">
    <img alt="喫煙" src="../img/icon-smoke-legend.png" width="30" height="30">
</div>
```

###10-6-7 喫煙（一部区間で喫煙車両あり）アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-smoke2`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-smoke2">
    <img alt="喫煙（一部区間で喫煙車両あり）" src="../img/icon-smoke2-legend.png" width="30" height="30">
</div>
```

###10-6-8 禁煙アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-nosmoking`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-nosmoking">
    <img alt="禁煙" src="../img/icon-nosmoking-legend.png" width="30" height="30">
</div>
```

###10-6-9 車内販売ありアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-sales`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-sales">
    <img alt="車内販売あり" src="../img/icon-sales-legend.png" width="30" height="30">
</div>
```

###10-6-10 車内販売（一部区間で車内販売あり）アイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-sales2`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-sales2">
    <img alt="車内販売（一部区間で車内販売あり）" src="../img/icon-sales2-legend.png" width="30" height="30">
</div>
```

###10-6-11 伊勢志摩ライナーアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-isl`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-isl">
    <img alt="伊勢志摩ライナー" src="../img/isl.gif" width="30" height="30">
</div>
```

###10-6-12 しまかぜアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-shimakaze`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-shimakaze">
    <img alt="しまかぜ" src="../img/shimakaze.gif" width="30" height="30">
</div>
```

###10-6-13 さくらライナーアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-sl`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-sl">
    <img alt="さくらライナー" src="../img/sl.gif" width="30" height="30">
</div>
```

###10-6-14 アーバンライナーアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-ul`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-ul">
    <img alt="アーバンライナー" src="../img/ul.gif" width="30" height="30">
</div>
```

###10-6-15 ビスタカーアイコン（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-vista`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-vista">
    <img alt="ビスタカー" src="../img/vista.gif" width="30" height="30">
</div>
```

###10-6-16 空席状況アイコン　可（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-circle`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-circle">
    <img alt="空席あり" src="../img/icon-circle-l.png" width="32" height="32">
</div>
```

###10-6-17 空席状況アイコン　残り僅か（Lサイズ））
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-try`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-try">
    <img alt="残り僅か" src="../img/icon-try-l.png" width="32" height="32">
</div>
```

###10-6-18 空席状況アイコン　不可（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-ng`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-ng">
    <img alt="空席なし" src="../img/icon-x-l.png" width="32" height="32">
</div>
```

###10-6-19 空席状況アイコン　取り扱い無し（Lサイズ）
アイコンの表示領域を確保した親のブロック要素に、.sp-icon-l-border`クラスを付与すると、スクリプトによって下記のソースコード（img要素）が、子要素に挿入される。

```
<div class=.sp-icon-l-border">
    <img alt="取り扱いなし" src="../img/icon-border-l.png" width="32" height="32">
</div>
```
*/
/*
##10-7 シートマップの座席アイコン
###10-7-1 空席

```
<div class=.sp-seat-column">
    <div class=.sp-seat">NO</div>
</div>
```
*/
.sp-seat, .sp-seat-full, .sp-seat-select, .sp-seat-car {
    width: 45px;
    height: 100%;
    border: 1px solid #999999;
    text-align: center;
    line-height: 45px;
    background: #ffffff;
    float: left;
    box-sizing: border-box;
    margin-right: 1px;
    margin-bottom: 10px;
    font-weight: bold;
    cursor: pointer;
}
/* 車いす席　背景がグレーの場合の文字色(白) */
.sp-seat-car-text {
    color: #fff;
}
/* 車いす席　背景が白の場合の文字色(黒) */
.sp-seat-car-text2 {
    color: #000;
}
/* 車いす席　赤枠 */
.sp-seat-wheel-chair {
    border: 2px dashed red;
}
/* 車いす席　赤枠　説明文 */
.sp-seat-wheel-chair2 {
    width: 30px;
    height: 14px;
    border: 2px dashed red;
    float: left;
    margin-right: 5px;
}
/* 車いす席　赤線によって車いすアイコンが改行されるのを避ける為 */
.sp-seat-column-red {
    margin: 10px !important;
}
/* 車いす近隣席 */
.sp-seat-car-blue {
    border: 1px solid blue;
}
/* 車いす対応席 */
.sp-seat-car-red {
    border: 1px solid red;
}
/* 車いす近隣席・車いす対応席　テキストエリア */
.sp-seat-wheel-chair-textarea {
    float: left;
    width: 53%;
    text-align: center;
    padding-right: 10px;
}
.sp-seat-wheel-chair-text {
    color: blue;
}
/*
### 10-7-2 選択不可座席

```
<div class=.sp-seat-column">
    <div class=.sp-seat.sp-seat-full">NO</div>
</div>
```
*/
.sp-seat-full {
    background: #b8b8b8;
    color: #44433e;
    cursor: default;
}
/*
###10-7-3 選択中の座席
```
<div class=.sp-seat-column">
    <div class=.sp-seat.sp-seat-select">NO</div>
</div>
```
*/
.sp-seat-select {
    background: #fff656;
    background-image: url(../img/icon-circle-m.png);
    background-repeat: no-repeat;
    background-position: center;
}
/*
###10-7-4 車椅子用座席
* 車椅子用座席には席番を記述しない。

```
<div class=.sp-seat-column">
    <div class=.sp-seat.sp-seat-car"></div>
</div>
```
*/
.sp-seat-car {
    background: #b8b8b8;
    background-image: url(../img/icon-car-m.png);
    background-repeat: no-repeat;
    cursor: default;
    background-position: center;
}
/* E-1-9_4 車いす対応席　背景が白の場合 */
.sp-seat-car-gray {
    background: #fff;
    background-image: url(../img/icon-wheel-chair-gray.png);
    background-repeat: no-repeat;
    cursor: default;
    background-position: center;
    background-size: 30px;
}
.sp-seattype-attention {
    width: 100%;
}
.sp-seattype-text {
    width: 50%;
    float: left;
}
@media only screen and (max-width: 768px) {
.sp-seattype-text {
    width: 100%;
    float: left;
}
.sp-legend-item-wrapper-link {
    width: 100%;
}
}

/* E-9-1_特急券列車変更確認 h2 見出し */
.sp-h2 {
    margin-top: 15px !important;
}
/* V-1-3 案4 */
@media only screen and (max-width: 768px) {
.sp-img {
    width: 100%;
    height: auto;
}
}
/* E-3-1　ボタン内文字サイズ */
.sp-small-text {
    font-size: 14px;
}
/* E-1-1,E-1-4 車椅子アイコン */
.sp-wheel-chair {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 2px 5px 2px 0;
}
.sp-wheel-chair2 {
    position: absolute;
    top: 27px;
    right: 0;
    width: 20px;
    height: 20px;
    margin: 2px 5px 2px 0;
}
.sp-seat-car {
    background: #b8b8b8;
    background-image: url(../img/icon-car-m.png);
    background-repeat: no-repeat;
    cursor: default;
    background-position: center;
}
.sp-right-aisle {
    margin-right: 40px;
}
.sp-seat-num {
    color: #fff;
}
@media only screen and (max-width: 768px) {
.sp-wheel-chair {
    display: block;
    margin: 6px 5px 2px 0;
    float: left;
}
}
/* 新規ページ　車いす */
.sp-img-area{
    margin: 20px 0;
    text-align: center;
}
.sp-wheelchair-img {
    margin: 0 30px;
}
@media only screen and (max-width: 768px) {
    .sp-wheelchair-img {
        margin: 0 10px;
        width: 42%;
    }
}
/* F-1-1 SP時リンク右寄せ*/
@media only screen and (max-width: 768px) {
    .sp-link-right-text {
        display: inline !important;
    }
}
/* F-0-7 ログインメーッセージ　PC時：中央寄せ　SP時左寄せ */
.sp-login-text {
    text-align: center;
}
@media only screen and (max-width: 768px) {
    /* F-0-7 SP時見出し()内　フォントサイズ */
    .sp-head-small {
        font-size: 14px;
    }
    .sp-login-text {
        text-align: left;
    }
}
/*
* スマートフォン時に隠したい要素
```
<div class=.sp-seat-column">
    <div class=.sp-seat.sp-seat-car"></div>
</div>
```
*/
@media only screen and (max-width: 768px) {
.sp-sp-hidden {
    display: none;
}
}

/*# sourceMappingURL=css/common.css.map */

/* M-4-2 会員番号確認結果 コールセンター専用*/
.sp-vertical-table{
    color:#000000;
    font-family:"MS PGothic","Osaka",Arial,sans-serif !important;
    line-height:1.5em;
    text-align:left;
    margin-bottom:1em;
    border-collapse:separate;
    border-spacing:2px;
}
.sp-vertical-table th{
    color:#ffffff;
    background-color:#1B3AB4;
    font-weight:normal;
}
.sp-vertical-table th,.sp-vertical-table td{
    padding:4px 6px;
}
.sp-vertical-table th.center{
    text-align:center;
}
.sp-vertical-table td{
    line-height:1.5em;
    max-height:100%;
    padding:4px 6px;
    background-color:#E5EAFF;
    text-align:left;
    font-weight:normal;
}
.sp-vertical-table-button{
    width:100px !important;
    height:25px;
    font-size:13px;
    font-family:"MS PGothic","Osaka",Arial,sans-serif !important;
    border:2px solid #FFFFFF;
    border-bottom-color:#000000;
    border-right-color:#000000;
}
.sp-vertical-table-button:active{
    width:100px !important;
    height:25px;
    font-size:13px;
    font-family:"MS PGothic","Osaka",Arial,sans-serif !important;
    border:2px solid #FFFFFF;
    border-top-color:#000000;
    border-left-color:#000000;
}

/* border非表示 */
.sp-no-border{
    border:none !important;
}