@charset "utf-8";


/* =======================================================================================
------------------------------------------------------------------------------
	common要素の変更
------------------------------------------------------------------------------
======================================================================================== */

body{
	background:#FBEA53;
}


/* ===================================================
------------------------------------------------------
	frameBottom
------------------------------------------------------
==================================================== */

#frameBottom {
	background:#FBEA53;
}



/* ===================================================
------------------------------------------------------
	header
------------------------------------------------------
==================================================== */

#wrapper header section ul{
	padding:1% 242px 0 0;
}



/* 大阪 */
#wrapper header section ul.osaka{
	padding-right:123px;
}


#wrapper header section p#contact a{
	right:110px;
}
#wrapper header section p.login a{
	width:100%;
	max-width:108px;
	padding:24px 5px;
	background:#595757;
	position:absolute;
	right:0;
	top:0;
	text-align:center;
}
#wrapper header section p.login img{
	display:block;
	margin:auto;
}

#wrapper header section p.login a:hover{
	background:#0075C2;
}





/* ===================================================
------------------------------------------------------
	gateLinks
------------------------------------------------------
==================================================== */
#wrapper ul#gateLink li.osaka{background:#FBEA53;}
#wrapper ul#gateLink li.osaka a{color:#333333;}







/* ===================================================
------------------------------------------------------
	detailNav
------------------------------------------------------
==================================================== */

#wrapper #detailNav{
	border-top:1px solid #D8D8D8;
	border-bottom:1px solid #D8D8D8;
}
#wrapper #detailNav ul{
	width:100%;
	max-width:1100px;
	margin:0 auto;
	border-top:1px solid #D8D8D8;
	border-bottom:1px solid #D8D8D8;
	text-align:center;
	display:table;
}
#wrapper #detailNav ul li{
	width:219px;
	border-right:1px dotted #595757;
	vertical-align:middle;
	display:table-cell;
	border-bottom:5px solid #ffffff;
}
#wrapper #detailNav ul li#agency{
	border-bottom:5px solid #fffccc;
	background:#fffccc url(/assets/img/icon/keyYellow.png) no-repeat 88% center;
}
#wrapper #detailNav ul li#agency a{
	padding:15px 14px 15px 5px;
}


/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
	ハイライトページ
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
#wrapper #detailNav ul li.on{border-bottom:5px solid #F2B300;}
#wrapper #detailNav ul li.on a{color:#F2B300;}



#wrapper #detailNav li a{
	padding:15px 14px;
	display:block;
	font-size: 110%;
	font-weight:bold;
	color:#333333;
}



#wrapper #detailNav ul li a:hover,
#wrapper #detailNav ul li a.irregular:hover,
#wrapper #detailNav ul.f14 li a:hover{
	color:#F2B200;
}
#wrapper #detailNav ul li a.irregular{
	padding:10px 7px 8px;
	margin-top:2px;
	line-height:100%;
	display:block;
}
#wrapper #detailNav ul li.first{border-left:1px dotted #595757;}
#wrapper #detailNav ul li span{
	display:block;
	font-weight:bold;
	font-size:98%;
}
#wrapper #detailNav ul li span.f12{font-size:80%;}


#wrapper #detailNav ul.f14 li a{
	font-size:100%;
	letter-spacing:0;
}




/* ===================================================
------------------------------------------------------
	mainVisial
------------------------------------------------------
==================================================== */

#wrapper article#mainVisual{background:url(/assets/img/osaka/mainBg.gif);}
#wrapper article#mainVisual p{color:#333333;}
#wrapper article#mainVisual p span{
	font-weight:bold;
	display:block;
	font-size:100%;
}







/* ===================================================
------------------------------------------------------
	slidemenu
------------------------------------------------------
==================================================== */


#slidemenu div#menu_list ul#select02 li#agency{
	background:#FFFCCC url(/assets/img/icon/arrowBlack2.png) no-repeat 95% center;
}
#slidemenu div#menu_list ul#select02 li#agency a{
	background:url(/assets/img/icon/keyYellow.png) no-repeat 50% center;
}


/* ===================================================
------------------------------------------------------
	footer
------------------------------------------------------
==================================================== */
footer small{
	background:#FBEA53;
	color:#333333;
}




/* ===================================================
------------------------------------------------------
	ボタンスタイル
------------------------------------------------------
==================================================== */


/* 白背景黄色アロー */
#contents span.btn_white_yellow{
	text-align:center;
	display:block;
	margin-top:50px;
}
#contents span.btn_white_yellow a{
	font-weight: bold;
    border-style: none;
	border-radius:50px;
	margin:auto;
	background:#ffffff;
	padding:17px 13%;
	width:auto;
	border:2px solid #4C5051;
}
#contents span.btn_white_yellow a span{
	background:url(/assets/img/icon/_arrowYellow.png) no-repeat left center;
	background-size:26px auto;
    color:#333333;
    font-size:129%;
	display:inline-block;
	padding: 0 0 0 35px;
	font-weight:bold;
}
#contents span.btn_white_yellow a:hover{
	background:#FBEA53;
	border:2px solid #FBEA53;
}
#contents span.btn_white_yellow a:hover span{
	background:url(/assets/img/icon/arrowBlack.png) no-repeat left center;
	background-size:26px auto;
}






/* 白背景黄色back */
#contents span.back_yellow{
	text-align:center;
	display:block;
	margin:100px 0 50px;
}
#contents span.back_yellow a{
	font-weight: bold;
	border-radius:50px;
	margin:auto;
	background:#ffffff;
	padding:17px 13%;
	width:auto;
	border:2px solid #4C5051;
}
#contents span.back_yellow a span{
	background:url(/assets/img/icon/backYellow_on.png) no-repeat left center;
    color:#333333;
    font-size:129%;
	display:inline-block;
	padding: 0 0 0 35px;
	font-weight:bold;
}
#contents span.back_yellow a:hover{
	background:#FBEA53;
	border:none;
}




















/* ===================================================
------------------------------------------------------
	blog/ディスカバリーおおさか
------------------------------------------------------
==================================================== */

#wrapper section.irregular{
	max-width:1220px;
}
#contents section.irregular div{display:block; overflow:hidden;}
#contents section.irregular div h3{
	margin:0 18px 0 0;
}
#contents section.irregular div h3,
#contents section.irregular div label{float:left;}

#contents section.irregular div label select {
	margin-bottom:10px;
}



/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
	路線/駅選択
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
#wrapper label{
	position: relative;
}
#wrapper label:after{
	display: block;
	content: " ";
	position: absolute;
	/*top:16px;*/
	top:2px;
	right: 20px;
	width:8px;
	height:13px;
	background:url(/assets/img/icon/arrowBlack2.png) no-repeat right center;
	pointer-events: none;
}
#wrapper select{
	position: relative;
	max-width:325px;
	width:100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:2px solid #595757;
	background:#F7F8F2;
}
#wrapper select option{background:#ffffff;}


/*----- button-----*/
#wrapper form button{
    font-weight: bold;
    padding: 10px 30px;
    border-style: none;
	border-radius:50px;
	margin:auto;
	margin-left:20px;
	cursor:pointer;
	background:#595757;
	padding:1% 5%;
	width:100%;
	max-width:303px;
}
button.button span{
	background:#595757 url(/assets/img/icon/searchBlack.png) no-repeat left center;
    color:#ffffff;
    font-size:105%;
	display:inline-block;
	padding: 0 0 0 17%;
	font-weight:bold;
}
#wrapper form button:disabled,
#wrapper form button:disabled span {
	opacity:0.4;
	cursor: default;
}




/* カテゴリー別color 　背景*/
#contents section h4.category,
#wrapper article#mainVisual div p span.category,
#contents section ul#select_contents li div span.category{background:#0075c2;}

#contents section h4.media,
#wrapper article#mainVisual div p span.media,
#contents section ul#select_contents li div span.media{background:#41ACED;}

#contents section h4.gourmet,
#wrapper article#mainVisual div p span.gourmet,
#contents section ul#select_contents li div span.gourmet{background:#FB88A2;}

#contents section h4.voice,
#wrapper article#mainVisual div p span.voice,
#contents section ul#select_contents li div span.voice{background:#5EC685;}

#contents section h4.economics,
#wrapper article#mainVisual div p span.economics,
#contents section ul#select_contents li div span.economics{background:#009788;}

#contents section h4.discover,
#wrapper article#mainVisual div p span.discover,
#contents section ul#select_contents li div span.discover{background:#F2B300;}

/* カテゴリー別color 　文字*/
/* ----- 御堂筋線 ----- */
#wrapper article#mainVisual div p span.midousuji{
	color:#EB4640;
}
/* ----- 谷町線 ----- */
#wrapper article#mainVisual div p span.tanimachi{
	color:#7358BB;
}
/* ----- 谷町線 ----- */
#wrapper article#mainVisual div p span.yotsubashi{
	color:#5999DA;
}
/* ----- 中央線 ----- */
#wrapper article#mainVisual div p span.chuou{
	color:#39B313;
}

/* ----- 千日前線 ----- */
#wrapper article#mainVisual div p span.sennichi{
	color:#D62B79;
}

/* ----- 堺筋線 ----- */
#wrapper article#mainVisual div p span.sakaisuji{
	color:#936863;
}

/* ----- 長堀鶴見緑地線 ----- */
#wrapper article#mainVisual div p span.nagahori{
	color:#936863;
}

/* ----- 鶴見緑地線 ----- */
#wrapper article#mainVisual div p span.tsurumi{
	color:#85BE05;
}

/* ----- 今里線 ----- */
#wrapper article#mainVisual div p span.imazato{
	color:#F2B200;
}

/* ----- 北大阪急行 ----- */
#wrapper article#mainVisual div p span.kitaosaka{
	color:#B21F64;
}





/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
	select_contents
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

#contents section ul#select_contents{
	max-width:1125px;
	padding-top:3%;
	margin:auto;
}
#contents section ul#select_contents li{
	display:inline-block;
	margin:1.5%;
	width:30%;
	vertical-align:top;
	word-break: break-all;
}
#contents section ul#select_contents li a{
	height:333px;
	max-width:340px;
	width:100%;
	padding:28px;
	display:block;
	border:2px solid #4C5051;
	background:#F7F8F2;
	position:relative;
}
#contents section ul#select_contents li a:after{
	content:"";
	background:url(/assets/img/osaka/boxBg.gif) no-repeat right bottom;
	background-size:30px auto;
	width:30px;
	height:30px;
	position:absolute;
	bottom:-3px;
	right:-3px;
}
#contents section ul#select_contents li a:hover{background:#FBEA53;}
#contents section ul#select_contents li div{
	display:block;
	overflow:hidden;
	margin:4% 0 3%;
}

#contents section ul#select_contents li a figure{
	width:100%;
	max-width:280px;
	overflow:hidden;
}
#contents section ul#select_contents li a figure img{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
#contents section ul#select_contents li a:hover img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


#contents section ul#select_contents li div span.category,
#wrapper article#mainVisual div p span.category{
	padding:1% 3%;
	color:#ffffff;
	font-size:75%;
}









/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
	見出し別
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
#contents section div h3.title{
	padding:0 0 0 40px;
}
#contents section div h3.tag{
	background:url(/assets/img/icon/tagBlack.png) no-repeat left center;
}
#contents section div h3.route{
	background:url(/assets/img/icon/routeBlack.png) no-repeat left center;
	margin:0 20px;
}








/* ===================================================
------------------------------------------------------
	newsletter
------------------------------------------------------
==================================================== */

section#newsletter{
	background:#FFFCD9;
	border:2px solid #4C5051;
	max-width:900px;
	text-align:center;
	padding:40px 3% 60px;
	margin-bottom:80px;
	
}
section#newsletter h3,
section#newsletter p{
	font-weight:bold;
}
section#newsletter h3{
	font-size: 171%;
	border-bottom:5px solid #FBEA53;
	display:inline;
	padding:0 0 10px 0;
}
section#newsletter h3 span{
	font-size:100%;
	font-weight:bold;
}
section#newsletter p{
	font-size: 115%;
	margin-top:30px;
}
section#newsletter p span{
	font-size:100%;
	font-weight:bold;
	display:block;
}
section#newsletter span.btn_white_yellow{
	margin-top:40px;
}
section#newsletter span.btn_white_yellow a{
	padding:17px 20%;
}

































/* ===================================================
------------------------------------------------------
	幅1100幅の場合
------------------------------------------------------
==================================================== */
@media screen and (max-width: 1100px) {

	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		ディスカバリー大阪
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
	#contents section.irregular{
		padding-left:0;
		padding-right:0;
		max-width:1220px;
	}
	#contents section.irregular ul#select_contents li{
		margin:10px;
	}

}



/* ===================================================
------------------------------------------------------
	SP版の場合
------------------------------------------------------
==================================================== */

@media screen and (max-width: 736px) {

	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		ディスカバリー大阪　記事
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

	#contents section ul#select_contents{text-align:center;}
	#contents section ul#select_contents li{width:auto;}


	#contents section ul#select_contents{max-width:100%; text-align:center;}
	#contents section ul#select_contents li{margin:0 0 15px!important; margin-top:7%; width:100%;	}
	#contents section ul#select_contents li a{
		padding:15px;
		height:auto;
		margin:auto;
	}
	#contents section ul#select_contents li p{
		text-align:left;
	}
	#contents section ul#select_contents li a figure img{
		width:100%;
	}

}












/* ===================================================
------------------------------------------------------
	iPad版の場合
------------------------------------------------------
==================================================== */
@media screen and (max-width: 667px) {


	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		header
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

	#wrapper #detailNav,
	#wrapper header section p.login{display:none;}
	#contents section{
		overflow:inherit;
	}

	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		mainVisual
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
	#wrapper article#mainVisual p span{
		font-weight:bold;
		display:inline;
		font-size:100%;
	}





	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		路線/駅選択
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

	#wrapper form select{
		max-width:100%;
		padding:4%!important;
	}
	button.button{
		margin-top:15px;
		padding:3%!important;
	}

	#contents section.irregular div h3, #contents section.irregular div label{
		float:none;
	}
	#contents section div select{
		/*padding:5px 23px 5px 12px;*/
		width:100%;
		max-width:100%;
		margin:0;
	}
	#wrapper #contents section div label:after{
		top:4px;
	}



	/* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
		記事ボックス
	*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

	#contents section ul#select_contents li a figure{
		width:100%;
		max-width:100%;
		overflow:hidden;
	}
	#contents section ul#select_contents li div{
		text-align:left;
	}






	
	/* ===================================================
	------------------------------------------------------
		ボタンスタイル
	------------------------------------------------------
	==================================================== */


	/* 白背景黄色アロー */
	
	#contents span.btn_white_yellow{margin-top:30px;}
	#contents span.btn_white_yellow a{padding:5% 6%;}
	#contents span.btn_white_yellow a span{padding:0 0 0 35px; font-size:120%;}
	
	
	/* 白背景黄色back */
	#contents span.back_yellow{margin:50px 0;}
	
	
	
	
	
	
	/* ===================================================
	------------------------------------------------------
		newsletter
	------------------------------------------------------
	==================================================== */
	
	#wrapper section#newsletter{
		max-width:100%;
		padding:30px 3% 40px;
		margin:40px 3% 60px;
		
	}
	section#newsletter h3{
		font-size: 140%;
		padding:0 0 5px;
		line-height:200%;
	}
	section#newsletter h3 span{
		display:inline-block;
		font-weight:bold;
		font-size:100%;
		border-bottom:3px solid #FBEA53;
	}
	section#newsletter p{
		margin-top:20px;
	}
	section#newsletter p span{
		display:inline;
	}
	section#newsletter span.btn_white_yellow{
		margin-top:30px;
	}
	section#newsletter span.btn_white_yellow a{
		padding:17px 16%;
	}
	
	
	
	
	
}