@import "default.css";
@import "common.css";

/* ===============================================
  Stationsで使うスタイル
=============================================== */

li#st > a{
    background: #cecece;
}

/* ---- カテゴリのタイトル Acess(旧Station) ---- */

#stations #cate {
    background: url(../images/stations/category.jpg);
    background-size: cover;
    width: 100%;
    height: 180px;
    font-size: 50px;
    font-style: normal;
	font-variant: normal;
	font-weight: 700;
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
    position: relative;
    letter-spacing: 1px;
    position: relative;
}

#stations #cate .ttl_letter {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

/* ---- 左メニュー ---- */

.access #leftside nav li#submenu1 a,
.namba_map #leftside nav li#submenu2 a,
.easily #leftside nav li#submenu3 a,
.namba #leftside nav li#submenu4 a,
.shinimamiya #leftside nav li#submenu5 a,
.tengachaya #leftside nav li#submenu6 a,
.hashimoto #leftside nav li#submenu7 a,
.koyasan #leftside nav li#submenu8 a,
.ticket #leftside nav li#submenu9 a {
	background: url(../images/share/arrow_01.gif) no-repeat 0 0.2em;
	padding: 0 0 0 15px;
	margin-left:-15px;
	zoom:1;
}

/* ---- 各ページ漢字のタイトル背景 ---- */

#pagettl{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.access #pagettl {
	background-image:url(../images/stations/access/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.namba_map #contents #pagettl {
	background-image:url(../images/stations/namba_map/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.easily #contents #pagettl {
	background-image:url(../images/stations/easily/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
   background-position: 0 bottom;
}

.namba #contents #pagettl {
	background-image:url(../images/stations/namba/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.shinimamiya #contents #pagettl {
	background-image:url(../images/stations/shinimamiya/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.tengachaya #contents #pagettl{
    background-image:url(../images/stations/tengachaya/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.hashimoto #contents #pagettl {
	background-image:url(../images/stations/hashimoto/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.koyasan #contents #pagettl {
	background-image:url(../images/stations/koyasan/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.ticket #contents #pagettl {
	background-image:url(../images/stations/ticket/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

.timetable #contents #pagettl {
	background-image:url(../images/stations/timetable/bg_ttl.gif),linear-gradient( to bottom, #f5f5f5, #fff );;
    background-repeat: no-repeat;
    background-position: 0 bottom;
}

/* ---- stations各ページ共通 ---- */

#stations #contents h4 {
	background:url(../images/stations/koyasan/line_short.gif) repeat-x left bottom;
	padding-bottom:5px;
	font-size:24px;
	margin-bottom:20px;
	letter-spacing:0.5px;
}

#stations #contents .halfbox_l,
#stations #contents .halfbox_r {
	width:47%;
	margin-bottom:30px;
}

#stations #contents .halfbox_l {
	float:left;
}

#stations #contents .halfbox_r {
	float:right;
}

#stations #contents .icon{
    color: #fff;
    background: #aaa;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    letter-spacing: 0.1px;
    margin-right: 10px;
    font-size: 12px;
    min-width: 50px;
    text-align: center;
}

#stations #contents .map-wrap{
    border: 1px solid #cdcdcd;
    padding: 20px 0;
}

/* ---- Access to Koyasanのページで使うスタイル ---- */

.access #contents .linkbox {
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	width:100%;
	padding:15px 20px;
	margin:10px auto 40px;
}

.access #contents .linkbox ul li {
	background: url(../images/share/arrow_01.gif) no-repeat 0 0.3em;
	padding: 0 0 0 12px;
	display: inline-block;
	*display: inline;
	margin-left:30px;
}

/* ---- 難波駅から迷わず高野山駅へ行くためにのページで使うスタイル ---- */

.easily br.sp{
    display: none;
}

.easily #contents h4 {
	margin-top:30px;
}

.easily #contents dl dt,
.easily #contents h5{
	font-weight:bold;
    font-size: 18px;
}

.easily #contents #from p {
	margin-bottom:15px;
}

.easily #contents #from dl:after {
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	content: '[.]';
}

.easily #contents .step1,
.easily #contents .step2{
    text-align: center;
    margin-bottom: 15px;
}

.easily #contents .step1 .start{
    display: block;
    margin: 0 auto;
}

.easily #contents #from .photo-station,
.easily #contents #from .step2 p{
}

.easily #contents #from .step1 dl,
.easily #contents #from .step2 dl{
    text-align: center;
}

.easily #contents #from .wrapbox{
    margin-top: 30px;
}


.easily #contents #from .halfbox {
	width:47%;
	float:left;
}

.easily #contents #from .halfbox:first-of-type{
    width: 50%;
    padding-right: 2.5%;
}

.easily #contents #from .halfbox:last-of-type {
	float: right;
}

.easily #contents #from .halfbox dl{
	margin:30px 0;	
}

.easily #contents #from .halfbox dl.mb0{
    margin-top: 0;
}

.easily #contents #from .halfbox dl dt,
.easily #contents #from .halfbox dl dd{
    width: 49%;
}

.easily #contents #from .halfbox dl dt{
    float: left;
}

.easily #contents #from .halfbox dl dd{
    float: right;
}

.easily #contents .trains{
    width: 90%;
    margin: 0 auto;
}

.easily #contents .trains dl{
    width: 45%;
    min-width: 420px;
    margin-bottom: 20px;
}

.easily #contents .trains dl:nth-of-type(2n-1){
    float: left;
}

.easily #contents .trains dl:nth-of-type(2n){
    float: right;
}

.easily #contents .trains dl dt img{
    margin-bottom: 6px;
}

.easily #contents .emphasis-button{
    text-align: center;    
}

.easily #contents .emphasis-button a{
    display: inline-block;
    padding: 20px 20px 20px 50px;
    background: #00861f;
    color: #fff;
    font-size: 18px;
    position: relative;
}

.easily #contents .emphasis-button a:hover{
    text-decoration: none;
    opacity: .8;
}

.easily #contents .emphasis-button a:before{
    content:"";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 0 7.5px 13.0px;
    border-color: transparent transparent transparent #ffffff;
    top: 23px;
    left: 23px;
}



/* ---- 難波駅のページで使うスタイル ---- */

.namba #contents dl dt {
	background:url(../images/share/bg_sttl.jpg) no-repeat 0 0;
	border-bottom:1px solid #ccc;
	padding:4px 0 2px 20px;
	font-weight:bold;
	margin-bottom:15px;
}

.namba #contents dl dd {
	padding-left:10px;
	margin-bottom:10px;
}

.namba #contents dl dd img {
	padding-right:5px;
}

.namba #contents dl dd img.pd0 {
	padding-right:0;
}

.namba #contents .bd_gray_top {
	border-top:1px solid #ccc;
}

.namba #contents ul.pic_station li{
	display:block;
    float: left;
	width:310px;
	margin-right:24px;
	font-size:80%;
}

.namba #contents ul.pic_station li img {
	margin-bottom:5px;
}

.namba #contents ul.pic_station li.last {
	margin-right:0;
}

.namba #contents .currency dd img{
    width: 200px;
    height: auto;
}

#stations #contents .map-wrap.namba3f{
    border-top: none;
}

/* ---- 天下茶屋駅のページで使うスタイル ---- */

.tengachaya #contents .map-wrap img{
    vertical-align: top;
}

.tengachaya #contents .map-wrap img:first-of-type{
    width: 500px;
    height: auto;
    float: left;
    margin-left: 30px;
}

.tengachaya #contents .map-wrap img:last-of-type{
    height: auto;
    float: right;
    margin-right: 30px;
}

/* ---- 高野山駅のページで使うスタイル ---- */

.koyasan #contents .visitors {
	width:718px;
	border:1px solid #ccc;
	padding-bottom:20px;
	margin-bottom:10px;
    margin-right: auto;
    margin-left: auto;
}

.koyasan #contents .visitors dt {
	width:716px;
	text-align:center;
	margin:1px auto 18px;
	padding:6px 0;
	background-color:#eee;
	font-weight:bold;
}

/* ---- Koyasan-World Heritage Ticketページで使うスタイル ---- */

.ticket #contents ul.coupons li{
	background: url(../images/share/mark_01.gif) no-repeat 0 0.3em;
	padding:0 0 0 15px;
}

.ticket #contents ul.coupons li ul li {
	background: url(../images/share/mark_02.gif) no-repeat 0 0.3em;
}

.ticket #contents .normalstyle .ticket_photo img{
    width: 300px;
    height: auto;
}

.ticket #contents .normalstyle .ticket_link{
    clear: both;
    width: 840px;
    margin: 30px auto 30px;
}

.ticket #contents .normalstyle .ticket_link a{
    display: block;
}

.ticket #contents .normalstyle .ticket_link a:hover{
    opacity: 0.8;
}

.ticket #contents .normalstyle .ticket_link a:nth-of-type(1){
    float: left;
    max-width: 400px;
}

.ticket #contents .normalstyle .ticket_link a:nth-of-type(2){
    float: right;
    max-width: 400px;
}

.ticket #contents .normalstyle dd.mb30{
    margin-bottom: 30px;
}

.ticket #contents .example {
	background:url(../images/share/bg_wafu_murasaki.gif) repeat 0 0;
	padding:40px 50px;
	width:100%;
	text-align:center;
}

.ticket #contents .example .example_inner-wrap{
    background: #fff;
    padding: 20px;
}

.ticket #contents .example ul{
    display: flex;
    justify-content: space-around;
}

.ticket #contents .example ul li {
	width:160px;
	display:block;
}

.ticket #contents .example ul li img {
	border:1px solid #fff;
}

@media only screen and (max-width: 768px){
    
    #stations #cate {
        background-position: 46% 0;
    }
    
     /* ---- 各ページ漢字のタイトル背景 ---- */

    .access #contents #pagettl,
    .namba_map #contents #pagettl,
    .namba #contents #pagettl,
    .shinimamiya #contents #pagettl,
    .tengachaya #contents #pagettl,
    .hashimoto #contents #pagettl,
    .koyasan #contents #pagettl,
    .ticket #contents #pagettl{
        background-position: 0 bottom;
    }
    
    #stations #contents .map-wrap{
        border: none;
        padding: 0;
    }
    
    .easily #contents #pagettl{
        background-position: 0 bottom;
    }
    
    .access #contents .linkbox ul li {
        background: url(../images/share/arrow_01.gif) no-repeat 0 0.3em;
        display: block;
        margin-left:0;
    }
    
     /* ---- 難波駅 ---- */
    
    #stations #contents .halfbox_l,
    #stations #contents .halfbox_r {
        width:100%;
        margin-bottom:30px;
    }

    #stations #contents .halfbox_l,
    #stations #contents .halfbox_r{
        float:none;
    }
    
    .namba #contents .currency dd img{
        width: 100%;
        margin-bottom: 10px;
    }
    
    .namba #contents ul.pic_station li{
        float: none;
        width:100%;
        margin-right:0;
        margin-bottom: 30px;
        font-size:100%;
    }
    
    .ticket #contents .normalstyle img{
        float: none;
        display: block;
        margin: 10px auto;
    }
    
    .ticket #contents .example ul{
        display: block;
    }
    
    .ticket #contents .example ul li{
        margin: 0 auto 15px;
    }
    
    .ticket #contents .example ul li:last-of-type{
        margin-bottom: 0;
    }
    
    .ticket #contents .normalstyle .ticket_photo {
        float: none;
    }
    
    .ticket #contents .normalstyle .ticket_photo img,
    .ticket #contents .normalstyle .ticket_photo a img{
        max-width: 100%;
        margin-bottom: 10px;
    }

    .ticket #contents .normalstyle .ticket_link{
        width: 100%;
    }

    .ticket #contents .normalstyle .ticket_link a{
        margin: 0 auto;
    }

    .ticket #contents .normalstyle .ticket_link a:nth-of-type(1){
        float: none;
    }

    .ticket #contents .normalstyle .ticket_link a:nth-of-type(2){
        float: none;
    }
    
    /*----Easily Namba----*/
    
    .easily br.sp{
        display: block;
    }
    
    .easily #contents #from .halfbox dl dt,
    .easily #contents #from .halfbox dl dd{
        width: 100%;
    }

    .easily #contents #from .halfbox dl dt,
    .easily #contents #from .halfbox dl dd{
        float: none;
    }
    
    .easily #contents #from .halfbox:first-of-type{
        border-right: 1px solid #ccc;
    }
    
    .easily #contents .trains{
        width: 100%;
    }
    
    .easily #contents .trains dl{
        width: 100%;
        min-width: auto;
        margin-bottom: 30px;
    }
    
    .easily #contents .emphasis-button a{
        padding: 15px 10px 15px 40px;
        font-size: 16px;
    }

    .easily #contents .emphasis-button a:before{
        content:"";
        top: 17px;
        left: 15px;
    }
    
    /* ---- 天下茶屋駅のページで使うスタイル ---- */

    .tengachaya #contents .map-wrap img:first-of-type{
        width: auto;
        float: none;
        margin: 0;
    }

    .tengachaya #contents .map-wrap img:last-of-type{
        width: auto;
        float: none;
        margin: 15px 0 0 0;
    }
    
    .koyasan #contents .visitors {
        width:100%;
        border:none;
    }

    .koyasan #contents .visitors dt {
        width:100%;
    }

}