@charset "utf-8";

/* 下層ページ：XXXXX */
/* ---------------------    
PC Style
定期運賃表のスタイル移植
---------------------- */

/* midashi
---------------------- */
#commuter_pass h3  {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

#commuter_pass h4  {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
}
#commuter_pass .railmapPC img{width:1000px;}

#commuter_pass .ticket-fare { padding: 30px 30px 10px; background-color: #e9edf3;}
#commuter_pass .ticket-fare .update { text-align: right; margin-bottom: 5px;}
#commuter_pass .ticket-fare .diagram {
    min-width: 600px;
    width: 100%;
    font-size: 1.6em;
    line-height: 1.32;
    table-layout: fixed;
    margin: 0;
}
#commuter_pass .ticket-fare .diagram th,
#commuter_pass .ticket-fare .diagram td {
    text-align: center;
    vertical-align: middle;
    padding: 5px 10px;
    border: 2px solid #e9edf3;
    background-color: #fff;
	font-size: 16px !important;
}
#commuter_pass .ticket-fare .diagram .station {
    font-size: .8em;
    color: #555;
    word-wrap: break-word;
    padding: 10px;
    background-color: #cfd7e3;
}
#commuter_pass .ticket-fare .diagram .blank { border: none; background-color: transparent;}
#commuter_pass .ticket-fare .diagram .adult { color: #555;}
#commuter_pass .ticket-fare .diagram .child { color: #cb6133;}
#commuter_pass .ticket-fare .ex { width: 240px; font-size: 1.4em; table-layout: fixed;}
#commuter_pass .ticket-fare .ex th,
#commuter_pass .ticket-fare .ex td {
    text-align: center;
    padding: 5px 10px;
    border: 2px solid #e9edf3;
    background-color: #fff;
}
#commuter_pass .ticket-fare .ex th { font-weight: normal; background-color: #cfd7e3;}
#commuter_pass .ticket-fare .ex .adult { color: #555;}
#commuter_pass .ticket-fare .ex .child { color: #cb6133;}

#commuter_pass .jikokuhyoBtnWrapper {
	margin-top: 10px;
}

#commuter_pass .jikokuhyoBtn{margin-right: 91px;}
#commuter_pass .jikokuhyoBtn img,
#commuter_pass .jikokuhyoBtnLast img{width:45px;height:45px;}


#commuter_pass .poinCase01 a:link,
#commuter_pass .poinCase02 a:link{text-decoration: none!important;}


/* ---------------------    
SP Style
---------------------- */
@media all and (max-width: 768px) {
    
    
    
    #commuter_pass #commuter_pass-deals {
        padding: 20px;
        -moz-background-size: 55px auto;
        -webkit-background-size: 55px auto;
        background-size: 55px auto;
        margin-top: 20px;
    }
    #commuter_pass #commuter_pass-deals h1 { margin-bottom: 20px;}
    #commuter_pass #commuter_pass-deals .entries { display: block;}
    #commuter_pass #commuter_pass-deals .entry {
        width: 100%;
        padding: 20px;
        margin: 20px 0;
    }
    #commuter_pass #commuter_pass-howto h2 { text-align: center;}
    #commuter_pass #commuter_pass-howto .fig-summary { margin: 20px 0;}
    #commuter_pass #commuter_pass-howto .fig-summary .fig { width: 100%;}
    #commuter_pass #commuter_pass-howto .fig-summary .summary { width: 100%;}
    #commuter_pass #commuter_pass-howto .balloon { padding: 20px;}
    #commuter_pass .ticket-fare { padding: 20px 20px 10px; background-color: #e9edf3;}
    #commuter_pass .ticket-fare h2 { text-align: center;}
    #commuter_pass .ticket-fare .diagram-wrapper { overflow-x: scroll; margin-bottom: 20px;}
    #commuter_pass .ticket-fare .ex { width: 100%;}
    
    /**/
    #commuter_pass .railmapSPWrapper {width:100%;}
    #commuter_pass .railmapSP{width:80%;margin-bottom: -3vw;}
    #commuter_pass .jikokuhyoBtn{width:20%; height:auto; margin: 1.5vw 0;}
    #commuter_pass .railmap img{}
    #commuter_pass .jikokuhyoBtn img,
    #commuter_pass .jikokuhyoBtnLast img{width:10vw;height:10vw;}
    
    #commuter_pass .ticket-fare .diagram th,
    #commuter_pass .ticket-fare .diagram td {
        font-size:0.6em;
    }
}


/* ---------------------    
PC Style
---------------------- */

/* midashi
---------------------- */
#commuter_pass h2 span {
	font-size: .7em;
}
#commuter_pass h3  {
    text-align: left;
    font-weight: bold;
    font-size: 1.5em;
}

/*
#commuter_pass h4  {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
}*/

/*pdf*/
#commuter_pass .pdf p:before {
    content : url(../images/icon_pdf.png);
    display: block;
    position: relative;
    top: 8px;
}

/*jisseki*/

#commuter_pass .jisseki{
    width: 80%;
    margin:0 auto;
}

#commuter_pass .jisseki th,
#commuter_pass .jisseki td {
    border: 1px solid #ccc;
    padding: 10px;
}

#commuter_pass .jisseki th {
    font-weight: bold;
    background-color: #dedede; 
}

#commuter_pass .blue{
    color:#0196d6;
}

/*leadWrap*/

#commuter_pass .leadWrap img{
    width:1000px;
}

#commuter_pass .leadWrapTxt{
    margin: 0 auto;
    width:1000px;
}

/* gaiyou */

#commuter_pass table {
    border-collapse: collapse;
    width: 100%;
}
#commuter_pass table th,
#commuter_pass table td {
    padding: 10px;
    border: 1px solid #999;
	display: table-cell;
}
#commuter_pass table th {
    padding: 10px;
    background-color: #eee;
    text-align: center;
    width: 30%;
}


#commuter_pass .yakuin{
    margin: 0 auto;
}

#commuter_pass .leadWrapTxt{text-align: left!important;}
#commuter_pass .leadWrapTxtName{text-align: right!important;}

/*accessPhoto*/
#commuter_pass .accessPhoto{width:230px;padding:0 5px 15px;}
#commuter_pass .accessPhoto img{width:230px;}
#commuter_pass .accessPhoto p{font-size:1em;line-height: 1.25em;text-align: left;}

/*contentsWrap*/
#commuter_pass .contentsWrap_text{
    margin:0 auto;
    word-break:normal;
	padding: 0;
}
/*リンクボタン*/
#commuter_pass p.btn {
	line-height: 1.42;
    margin: 10px 0 0;
}
#commuter_pass .btn-flat {
    font-size: 1.2em;
    color: #fff;
    text-decoration: none;
    background: #164b9a url(../images/arrow-btn.png) no-repeat right 11px center;
    -moz-background-size: 25px auto;
    -webkit-background-size: 25px auto;
    background-size: 25px auto;
    padding: 20px 40px 20px 35px;
    display: inline-block;
	
	&.btn-flat-inPage{
		background-image: url(../images/arrow-btn-under.png);
		margin-bottom: 10px;
	}
}

/*リスト調整*/
/*
#commuter_pass ul {
list-style-position: inside;
}
*/
#commuter_pass ol {
list-style-position: inside;
}

/* ---------------------    
SP Style
---------------------- */
@media all and (max-width: 768px) {
    
    /* jisseki*/
    
    #commuter_pass .jisseki{
        width: 100%;
    }
    
    #commuter_pass .jisseki tr,
    #commuter_pass .jisseki td,
    #commuter_pass .jisseki th {display:block;}
    #commuter_pass .jisseki td{text-align: center;}
    
    #commuter_pass .leadWrap img{
        width:100%;
    }
    
    #commuter_pass .leadWrapTxt{
        width:100%;
    }
    #commuter_pass .leadWrap .btn a span {
		display: block;
	}
    #commuter_pass table {
        border-top: 1px solid #999;
        width: 100%;
    }
    #commuter_pass table.ex td {
        display: block;
        text-align: center;
        padding: 5px;

        
    }
    #commuter_pass table.ex th {
        display: block;
        border-top: none;
        border-bottom: none;
        width: auto;
        padding: 5px;
    }
    #commuter_pass .access iframe{
        width:100%!important;
    }
    /*accessPhoto*/
    #commuter_pass .accessPhoto{width:100%;padding:0 5px 15px;}
    #commuter_pass .accessPhoto img{width:100%;}
    #commuter_pass .accessPhoto p{font-size:1em;line-height: 1.25em;text-align: left;}
    
    /*contentsWrap*/
    #commuter_pass .mewCI_Img img{
        width:100%;
        height:auto;
    }
    
    #commuter_pass .CI_text{
        width:100%;
    }
    
    
}