@charset "utf-8";

/* PC：style_pc.css
 * 裏天満天神横丁（2017-1001）
 * **************************************************
 * Common
 * Space(Margin)
 * Header (Logo )
 * Content (Main)
 * Elements
 * Map
 * Footer(Inquiry / Copyright)
 * Page Top
 * **************************************************
 * Media Queries min-width: 1024px (Tablet)
 * Media Queries min-width: その他　 (調整)
 * **************************************************
 */

/*  Common
------------------------------------------------------------------- */
/* padding、borderの値を含めない */
* {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/*  Space
------------------------------------------------------------------- */

/*  Header
------------------------------------------------------------------- */
#header {
	border-top:15px solid #000000;
	background: url(../images/common/bg_header.jpg) repeat center top;
	background-size:1520px 630px;
}
@media screen and (max-width: 1200px) {
	#header {
		background-size: contain;
	}
}
#header .inner {
	background: url(../images/common/chochin.png) repeat-x center -60px;
	background-size:65% auto;
}
@media screen and (max-width: 1200px) {
	#header .inner {
		background: url(../images/common/chochin.png) repeat-x center -50px;
		background-size:65% auto;
	}
}
@media screen and (max-width: 1050px) {
	#header .inner {
		background: url(../images/common/chochin.png) repeat-x center -40px;
		background-size:65% auto;
	}
}
@media screen and (max-width: 900px) {
	#header .inner {
		background: url(../images/common/chochin.png) repeat-x center -35px;
		background-size:65% auto;
	}
}
/* Uratenma Yokocho */
#header .uratenmaYokocho {
	padding: 85px 0 20px 0;
}
@media screen and (max-width: 900px) {
	#header .uratenmaYokocho {
		padding: 50px 0 20px 0;
	}
}
#header .uratenmaYokocho img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Content
------------------------------------------------------------------ */
#content {
}
#content .inner {
}

/* Elements
------------------------------------------------------------------ */
#home #content ul li {
	display: none;
}

/* 西の道 */
#content .west {
	clear: both;
	padding: 10% 10% 2% 10%;
	background: url(../images/home/bg_west.png) no-repeat left top;
	background-size:1040px 869px;
}
@media screen and (max-width: 1180px) {
	#content .west {
		background-size: contain;
	}
}
#content .west:after {
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}
#content .west h1 {
	float: left;
	width: 30%;
	margin: 0 3% 0 3%;
	text-align:center;
}
#content .west h1 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
#content .west li {
	float: left;
	width: 30%;
}
#content .west li + li {
	margin: 0 0 3% 3%;
}
#content .west li img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* 東の道 */
#content .east {
	clear: both;
	margin-top: -8%;
	padding: 10% 10% 8% 10%;
	background: url(../images/home/bg_east.png) no-repeat right top;
}
@media screen and (max-width: 1180px) {
	#content .east {
		background-size: contain;
	}
}
#content .east:after {
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}
#content .east h1 {
	float: right;
	width: 30%;
	margin: 0 1.2% 3% 0;
	text-align:center;
}
#content .east h1 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
#content .east li {
	float: left;
	width: 30%;
}
#content .east li:first-child {
	margin: 0 0 3% 3%;
}
#content .east li + li {
	margin: 0 0 3% 3%;
}
#content .east li img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Button */
#content .west li,
#content .east li {
	position: relative;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#content .west li a,
#content .east li a {
	display: block;
	background-color: #ffffff;
}
#content .west li img:hover,
#content .east li img:hover {
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}
#content .west li:before,
#content .west li:after,
#content .east li:before,
#content .east li:after {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#content .west li:before,
#content .west li:after,
#content .east li:before,
#content .east li:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	-webkit-box-shadow: 0 15px 8px #b7b7b7;
	-moz-box-shadow: 0 15px 8px #b7b7b7;
	box-shadow: 0 15px 8px #b7b7b7;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
#content .west li:after,
#content .east li:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}

/* 無効 */
#content .west li.comingSoon a,
#content .east li.comingSoon a {
	cursor: default;
}
#content .west li.comingSoon:before,
#content .west li.comingSoon:after,
#content .east li.comingSoon:before,
#content .east li.comingSoon:after {
	content:none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#content .west li.comingSoon img:hover,
#content .east li.comingSoon img:hover {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1;
}

#content .west li.comingSoon2 a,
#content .east li.comingSoon2 a {
	cursor: default;
}
#content .west li.comingSoon2 img:hover,
#content .east li.comingSoon2 img:hover {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1;
}




/* Map
------------------------------------------------------------------ */
#home #access {
	clear: both;
	background-color: #555555;
}
#home #access #map {
	height: 490px;
	width:100%;
}

/* Footer
------------------------------------------------------------------ */
#footer {
	background: #000000 url(../images/common/bg_footer.png) repeat-x center bottom;
}
@media screen and (max-width: 900px) {
	#footer {
		background-size: 18% auto;
	}
}
#footer dl dt {
	font-weight: bold;
	font-size: 1.3em; /* =13px */
	text-align:left;
	color:#ffffff;
	letter-spacing: 0.1em;
}
#footer dl dd {
	font-size: 1.2em; /* =12px */
	text-align:left;
	color:#ffffff;
	line-height: 1.8em;
	letter-spacing: 0.1em;
}
#footer dl dd a {
	display: inline-block;
	margin-top: 5px;
	padding: 0 45px 0 10px;
	border:1px solid #ffffff;
	font-size: 92%; /* =11px */
	color:#ffffff;
	letter-spacing: 0.3em;
	text-decoration: none; 
}
#footer dl dd a:hover {
	background-color: #222222;
}
#footer dl dd span {
	position:relative; top:1px; left:0px;
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #ffffff;
}

/* CopyRight */
#footer .copyRight {
	margin: 0 3% 1% 3%;
	font-size: 1.0em; /* =10px */
	color:#ffffff;
	text-align: right;
	letter-spacing: 0.1em;
}

/* PageTop
------------------------------------------------------------------ */
#pageTop {
	display: none;
	position:relative;
	margin:0 auto;
}
#pageTop a {
	z-index:9999;
	display: block;
	overflow:hidden;
	position: fixed;
	bottom: 0px;
	right: 15px;
	height:50px;
	width: 50px;
	background: url(../images/common/pagetop.png) no-repeat center center;
	background-size: 100% 100%;
	text-indent:-9999px;
	outline:none;
}
#pageTop a:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
}

/* Management
------------------------------------------------------------------ */
.inline_content {
    width: 380px;
    overflow: hidden;
}
.boxer-container table {
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 15px;
}
.boxer-container th {
	font-size: 1.4em; /* =14px */
	font-weight: bold;
	color:#e35a43;
}
.boxer-container td {
	font-size: 1.4em; /* =14px */
}
.boxer-container td > span {
	display: block;
}