@charset "utf-8";

/* ****************************************************
Title: station.css
Created: 2008-06-10
Last Modified: 2008-06-10
Editor(s): tsutsu
Last Editor: tsutsu
***************************************************** */


/* Table Of Contents
----------------------------------------

#01 General Elements
#02 gNavi
#03 pageBody
#04 sidebar
#05 content
#09 clearfix
#10 common classes

----------------------------------------*/


/* #01 General Elements
---------------------------------------------------------------------------- */


/* #02 gNavi
---------------------------------------------------------------------------- */

div#header dl#gNavi dd ul li#gNaviPrice,
div#header dl#gNavi dd ul li#gNaviPrice a,
div#header dl#gNavi dd ul li#gNaviPrice a:hover {
	background: url(../../common/images/gnavi_price_o.gif) no-repeat left top;
}


/* #03 pageBody
---------------------------------------------------------------------------- */


/* #04 sidebar
---------------------------------------------------------------------------- */

@media only screen and (min-width:769px) {
	div#sidebar ul#sNaviTrain,
	div#sidebar ul#sNaviOutdoor,
	div#sidebar ul#sNaviBus,
	div#sidebar ul#sNaviTaxi,
	div#sidebar ul#sNaviStation,
	div#sidebar ul#sNaviHowToDesign {
		display: none;
	}
}
@media only screen and (max-width:768px) {
	div#sidebar ul#sNaviTrain ul,
	div#sidebar ul#sNaviOutdoor ul,
	div#sidebar ul#sNaviBus ul,
	div#sidebar ul#sNaviTaxi ul,
	div#sidebar ul#sNaviStation ul,
	div#sidebar ul#sNaviHowToDesign ul {
		display: none;
	}
}

/* #05 content
---------------------------------------------------------------------------- */
@media only screen and (min-width:769px) {
div#content div.block01 div.block01Inner {
	padding:10px 18px 0;
}

* html div#content div.block01 div.block01Inner {
	padding:10px 0 0 18px;
}

*:first-child + html div#content div.block01 div.block01Inner {
	padding:10px 0 0 18px;
}

div#content p.description {
	font-size:110%;
	margin-bottom:12px;
	padding:0 10px;
	line-height: 1.4;
}

.searchBlock {
	margin-right:-22px;
}

*:first-child + html .searchBlock {
	margin-bottom: 20px;
}

* html .searchBlock {
	margin-bottom: 20px;
}

.searchBlock li {
	float:left;
	margin:0 21px 20px 0;
	width: 170px;
}

.searchBlock li a {
	display: inline-block;
	height: 135px;
	overflow: hidden;
	width: 170px;
}

* html .searchBlock li {
	margin:0 20px 20px 0;
}
*:first-child + html .searchBlock li {
	margin:0 20px 20px 0;
}

.searchList {
	margin-right:-20px;
}

* html .searchList {
	margin-bottom: 20px;
}

*:first-child + html .searchList {
	margin-bottom: 20px;
}

.inlineList li {
	margin: 0 13px 13px 0!important;
}
	
.searchList li {
	float:left;
	margin:0 20px 20px 0;
	width:107px;
}

* html .searchList li {
	margin:0 19px 20px 0;
}
*:first-child + html .searchList li {
	margin:0 19px 20px 0;
}

.searchList li a,
.searchList li a img,
.searchBlock li a,
.searchBlock li a img {
	outline: none;
}

}
.btnSearch02 {
	background:url(/search/images/btn_search.gif) no-repeat 0 0;
	border:none;
	cursor:pointer;
	display:block;
	font-size:0;
	height:0;
	line-height:46px;
	margin:0 auto;
	overflow:hidden;
	padding-top:46px;
	width:198px;
}
.btnSearch02.disabled {
	background:#FFF url(/search/images/btn_search_disabled.gif) no-repeat 0 0;
}
.btnSearch02:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter:alpha(opacity=60);
}
.resultNotice {
	text-align:center;
	padding:15px 0;
}

.routeTabTitle {
	display: flex;
    align-items: flex-start;
}
.routeTabTitle li {
	display:inline-block;
	position: relative;
	max-width: 180px;
	width: 100%;
	bottom: -2px;
	padding: 2px 2px 0;
	overflow: hidden;
	vertical-align: top;
	background-color: #FFF;
	
}
.routeTabTitle li.active {
	border: solid #5e8ebd;
	border-width: 1px 1px 0;
}
.routeTabTitle li:not(:last-child) {
	margin-right: 2px;
}
.routeTabTitle a {
    display:block;
    height:30px;
	border: 1px solid #d9d9d9;
	color: #FFF;
	padding: 3px 10px;
	line-height:30px;
	font-size: 16px;
	text-decoration: none;
	font-weight: bold;
}

/* .routeTabTitle li.active a {
	padding: 5px 10px;
} */
.tabContents {
	background-color: #fff;
    clear:both;
	border:2px solid #5e8ebd;
	padding: 15px 18px;
}
.tabContents.bgBlue {
    border: 2px solid #5e8ebd;
}
.tabContents.bgOrange {
    border: 2px solid #fac840;
}
.tabContents.bgGreen {
    border: 2px solid #A8D590;
}
.tabContents.bgTangelo {
    border: 2px solid #E96F1C;
}
.tabContents.bgRed {
    border: 2px solid #de2121;
}
.tabContents.bgViolet {
    border: 2px solid #7e36b4;
}
.tabContents.bgPurple {
    border: 2px solid #CFA9BA;
}
.tabContents.bgNavi {
    border: 2px solid #7BC0B5;
}
.tabBox {
	background-color: #fff;
    display:none;
}
.tabBox.active {
    display:block;
}
.tabBox  .notify {
	text-align: center;
	color: #4472c4;
	padding-top: 10px;
	margin-bottom: 0;
	font-weight: bold;
}
#tab01 {
    display:block;
}
.routeTabTitle li {
	width: 100%;
	padding-bottom: 2px;
}
.routeTabTitle .bgPurple.active {
    border: 2px solid #CFA9BA;
	border-bottom: 0;
}
.routeTabTitle .bgBlue.active {
	border: 2px solid #5e8ebd;
	border-bottom: 0;
}
.routeTabTitle .bgOrange.active {
    border: 2px solid #fac840;
	border-bottom: 0;
}
.routeTabTitle .bgGreen.active {
    border: 2px solid #A8D590;
	border-bottom: 0;
}
.routeTabTitle .bgTangelo.active {
    border: 2px solid #e96f1c;
	border-bottom: 0;
}
.routeTabTitle .bgRed.active {
    border: 2px solid #de2121;
	border-bottom: 0;
}
.routeTabTitle .bgViolet.active {
    border: 2px solid #7e36b4;
	border-bottom: 0;
}
.routeTabTitle .bgPurple.active {
    border: 2px solid #CFA9BA;
	border-bottom: 0;
}
.routeTabTitle .bgNavi.active {
    border: 2px solid #7BC0B5;
	border-bottom: 0;
}
.routeTabTitle .bgBlue a {
	background-image: linear-gradient(to top, #5884b0 47%, #5e8ebd 50% );
}
.routeTabTitle .bgOrange a {
	background-image: linear-gradient(to top, #e9ba3b 47% , #fac840 50%);
}
.routeTabTitle .bgGreen a {
	background-image: linear-gradient(to top, #9DC686 47% , #A8D590 50%);
}
.routeTabTitle .bgPurple a {
	background-image: linear-gradient(to top, #C19DAD 47% , #CFA9BA 50%);
}
.routeTabTitle .bgNavi a {
	background-image: linear-gradient(to top, #73B2A8 47% , #7BC0B5 50%);
}

.routeTabTitle .bgTangelo a {
	background-image: linear-gradient(to top, #e96f1c 47%, #f8763c 50%);
}

.routeTabTitle .bgRed a {
	background-image: linear-gradient(to top, #de2121 47%, #e43b3b 50%);
}

.routeTabTitle .bgViolet a {
	background-image: linear-gradient(to top, #7e36b4 47%, #854ab2 50%);
}

@media only screen and (max-width:768px) {
	div#content .pageTtl .ico {
		color: #28A9A4;
	}

	.btnSearch02 {
		margin-bottom: 10px;
	}

	.resultNotice {
		text-align: left;
	}
	.searchList li {
		float: left;
		margin: 0 10px 5px;
		width: calc(50% - 20px);

	}
	.routeTabTitle li {
		width: 100%;
		padding: 3px;
		background-color: #F7F6F2;
		text-indent: -999px;
	}
	.routeTabTitle a,
	.routeTabTitle li.active a {
		border: 0;
		text-align: center;
		padding: 14px 10px;
		background-size: 52px auto !important;
	}

	.routeTabTitle li.active {
		border-radius: 3px 3px 0 0;
	}

	.routeTabTitle .bgBlue a {
		background: url(/search/images/txt_kanto.gif) no-repeat 50% 50%,linear-gradient(to top, #5884b0 47%, #5e8ebd 50% );
	}
	.routeTabTitle .bgOrange a {
		background: url(/search/images/txt_kansai.gif) no-repeat 50% 50%,linear-gradient(to top, #e9ba3b 47% , #fac840 50%);
	}

	.routeTabTitle .bgGreen a {
		background: url(/search/images/txt_tokai.gif) no-repeat 50% 50%,linear-gradient(to top, #9DC686 47% , #A8D590 50%);
	}

	.routeTabTitle .bgTangelo a {
		background: url(/search/images/txt_chugoku_shikoku.gif) no-repeat 50% 50%,linear-gradient(to top, #e96f1c 47%, #f8763c 50%);
	}

	.routeTabTitle .bgRed a {
		background: url(/search/images/txt_kyushu.gif) no-repeat 50% 50%,linear-gradient(to top, #de2121 47%, #e43b3b 50%);
	}

	.routeTabTitle .bgViolet a {
		background: url(/search/images/txt_hokkaido_tohoku.gif) no-repeat 50% 50%,linear-gradient(to top, #7e36b4 47%, #854ab2 50%);
	}
}

/* #09 clearfix
---------------------------------------------------------------------------- */
div#content div.block01 .searchBlock:after,
div#content div.block01 .searchList:after,
.searchBlock:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

div#content div.block01 .searchBlock,
div#content div.block01 .searchList,
.searchBlock {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html div#content div.block01 .searchBlock,
* html div#content div.block01 .searchList {
	height: 1%;
}

div#content div.block01 .searchBlock,
div#content div.block01 .searchList {
	display: block;
}

@media only screen and (max-width:768px) {
	div#content div.block01 .searchBlock,
	div#content div.block01 .searchList {
		display: flex;
		flex-wrap: wrap;
	}
	div#content div.block01 .searchBlock li {
		width: 49%;
	}
	div#content div.block01 .searchBlock li:nth-of-type(2n) {
		margin-left:2%;
	}
	div#content div.block01 .searchBlock li a {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		background-size: contain;
	}
	div#content div.block01 .searchBlock li img,
	div#content div.block01 .searchList li img {
		display: inline-block !important;
		width: 100% !important;
	}
	div#content div.block01 .searchList li {
		width: 50%;
		text-align: center;
	}
	div#content div.block01 .searchList li a {
		display: inline-block !important;
		background-position: 50% 0 !important;
	}
}
/* End hide from IE-mac */

/* #10 common classes
---------------------------------------------------------------------------- */
.boxContact {
	padding: 30px 20px 55px;
	text-align: center;
}

.boxContactTitle {
	background-color: #fac840;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 15px;
	padding: 5px;
}
.boxContactTitle.bgGreen {
	background-color: #9DC686;
}

.boxContactTitle.bgTangelo {
	background-color: #e96f1c;
}

.boxContactTitle.bgRed {
	background-color: #de2121;
}

.boxContactTitle.bgViolet {
	background-color: #7e36b4;
}

.boxContactTxt {
	color: #333;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	margin: 0 0 30px;
}

.boxContactWrap {
	text-align: center;
}

.boxContactEmail {
	display: inline-block;
	margin: 0 10px;
	vertical-align: top;
}

.boxContactPhone {
	display: inline-block;
	margin: 0 10px;
	vertical-align: text-top;
}
@media only screen and (max-width:768px) {
	.boxContactTitle {
		font-size: 14px;
	}
	.boxContactTxt {
		font-size: 12px;
		margin: 0 0 15px;
	}
	.boxContactEmail {
		margin: 0 10px 15px;
	}
}