@charset "utf-8";

/* ========================================================
	guide.css => 門別競馬場情報
======================================================== */

/* guideMain
============================================================================================================ */
#guideMain {
	padding-top: 20px;
}
#guideMain #map {
	position: relative;
	width: 1281px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0 auto;
	text-align: center;
}
#guideMain #map .wrap {
	position: relative;
}
#guideMain #map .wrap ul {
	position: absolute;
	top: 0;
	left: 0;
}
#guideMain #map .wrap li {
	position: absolute;
	z-index: 10;
}
#guideMain #map .wrap .fuki .fuki_vr {
	left: 438px;
	top: 70px;
}
#guideMain #map .wrap .fuki .fuki01 {
	left: 147px;
	top: 156px;
}
#guideMain #map .wrap .fuki .fuki02 {
	left: 367px;
	top: 202px;
}
#guideMain #map .wrap .fuki .fuki03 {
	left: 531px;
	top: 98px;
}
#guideMain #map .wrap .fuki .fuki04 {
	left: 639px;
	top: 90px;
}
#guideMain #map .wrap .fuki .fuki05 {
	left: 559px;
	top: 248px;
}
#guideMain #map .wrap .fuki .fuki06 {
	left: 816px;
	top: 288px;
}
#guideMain #map .wrap .fuki .fuki07 {
	left: 1007px;
	top: 72px;
}
#guideMain #map .wrap .fuki .fuki08 {
	left: 1136px;
	top: 0px;
}
#guideMain #map .wrap .fuki .fuki09 {
	left: 1156px;
	top: 228px;
}

#guideMain #map .wrap .link a {
	display: block;
	height: 100%;
	/*background-color: #f00;
	opacity: .5;*/
}
#guideMain #map .wrap .link a::after {
	content: "";
	position: absolute;
}
/*
#guideMain #map .wrap .link .link01 {
	left: 312px;
	top: 101px;
	width: 114px;
	height: 106px;
}
*/
#guideMain #map .wrap .link .link02 {
	left: 744px;
	top: 55px;
	width: 111px;
	height: 131px;
}
#guideMain #map .wrap .link .link03 {
	left: 852px;
	top: 96px;
	width: 42px;
	height: 56px;
}
#guideMain #map .wrap .link .link03 a::after {
	left: 46px;
	top: -30px;
	width: 94px;
	height: 34px;
}
#guideMain #map .wrap .link .link04 {
	left: 670px;
	top: 220px;
	width: 64px;
	height: 46px;
}
#guideMain #map .wrap .link .link05 {
	left: 736px;
	top: 220px;
	width: 64px;
	height: 46px;
}
#guideMain #map .wrap .link .link06 {
	left: 800px;
	top: 226px;
	width: 64px;
	height: 60px;
}
/*
#guideMain #map .wrap .link .link07 {
	left: 1131px;
	top: 203px;
	width: 139px;
	height: 42px;
}
*/
#guideMain #map .wrap .link .link08 {
	left: 970px;
	top: 190px;
	width: 41px;
	height: 41px;
}
#guideMain #map .wrap .link .link08 a::after {
	left: 62px;
	top: -7px;
	width: 70px;
	height: 15px;
}
#guideMain #map .wrap .link .link09 {
	left: 970px;
	top: 230px;
	width: 41px;
	height: 41px;
}
#guideMain #map .wrap .link .link09 a::after {
	left: 58px;
	top: 62px;
	width: 70px;
	height: 15px;
}
#guideMain #map .wrap .link .link10 {
	left: 1130px;
	top: 192px;
	width: 41px;
	height: 41px;
}
#guideMain #map .wrap .link .link10 a::after {
	left: 38px;
	top: -50px;
	width: 40px;
	height: 15px;
}

@media screen and (min-width: 769px), print {
}
@media screen and (max-width: 768px) {
	#guideMain {
		padding-top: 20px;
	}
	#guideMain #map {
		width: 651px;
		height: 340px;
	}
	#guideMain #map > * {
		position: relative;
		width: 1261px;
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(.5);
		-ms-transform: scale(.5);
		-o-transform: scale(.5);
		transform: scale(.5);
	}
	#guideMain #map li img {
		max-width: none;
	}
}

/* .magnific popup
============================================================================================================ */

.mfp-title {
	font-size: 160%
}

/* .guide_pickup_block
============================================================================================================ */
.guide_pickup_block {
	position: relative;
	overflow: hidden;
	margin-top: -360px;
	padding: 300px 0 350px;
}
.guide_pickup_gourmet {}
.guide_pickup_block > * {
	position: relative;
	z-index: 3;
}
.guide_pickup_block .line {
	position: absolute;
	top: 170px;
	right: 0;
	left: 0;
	height: 60px;
	background: #004d9a;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMwMDRkOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMwMDRkOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDcwZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left, #004d9a 30%, #004d9a 30%, #0070df 60%);
	background: -webkit-linear-gradient(left, #004d9a 30%,#004d9a 30%,#0070df 60%);
	background: linear-gradient(to right, #004d9a 30%,#004d9a 30%,#0070df 60%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004d9a', endColorstr='#0070df',GradientType=1 );
	-webkit-transform: skewY(7deg);
	-ms-transform: skewY(7deg);
	-o-transform: skewY(7deg);
	transform: skewY(7deg);
	z-index: 1;
}
.guide_pickup_block .bg {
	position: absolute;
	overflow: hidden;
	top: 200px;
	right: 0;
	left: 0;
	bottom: -200px;
	background-color: #e9f1fa;
	-webkit-transform: skewY(8deg);
	-ms-transform: skewY(8deg);
	-o-transform: skewY(8deg);
	transform: skewY(8deg);
	z-index: 2;
}

@media screen and (min-width: 769px), print {}

@media screen and (max-width: 768px) {
	.guide_pickup_block {
		padding: 120px 0 160px;
	}
	.guide_pickup_block .line {
		top: 70px;
	}
	.guide_pickup_block .bg {
		top: 80px;
	}
	.guide_pickup_block .bg::before {
		top: -80px;
	}
}


/* .guide_go_block
============================================================================================================ */
.guide_go_block {
	position: relative;
	margin-top: -100px;
	padding-bottom: 200px;
	z-index: 10;
}
.guide_go_block > * {
	position: relative;
	z-index: 3;
}
.guide_go_block > h1 {
	margin-bottom: 40px;
	text-align: center;
}
.guide_go_block .bg {
	position: absolute;
	overflow: hidden;
	top: -100px;
	right: 0;
	left: 0;
	bottom: 140px;
	-webkit-transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	-o-transform: skewY(-6deg);
	transform: skewY(-6deg);
	z-index: 2;
}
.guide_go_block .bg::before {
	content: "";
	position: absolute;
	top: -200px;
	right: 0;
	left: 0;
	bottom: -100px;
	background: url(../images/go_bg.jpg) no-repeat 50% 100%;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-transform: skewY(6deg);
	-ms-transform: skewY(6deg);
	-o-transform: skewY(6deg);
	transform: skewY(6deg);
}
.guide_go_block ul {
	text-align: center;
}
.guide_go_block li {
	display: inline-block;
	margin: 0 18px 40px;
	width: 346px;
}
.guide_go_block li a {
	position: relative;
	display: table;
	width: 100%;
	height: 216px;
	padding-top: 90px;
	background: no-repeat 50% 20px;
	text-align: center;
	font-size: 2rem;
	line-height: 1.5;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
	box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.guide_go_block li a::before {
	content: "";
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.guide_go_block li a > * {
	display: table-cell;
	vertical-align: middle;
}

.guide_go_block li a.bus {
	background-color: #005bac;
	background-image: url(../images/go_ico_bus.png);
}
.guide_go_block li a.car {
	background-color: #4cc47f;
	background-image: url(../images/go_ico_car.png);
}
.guide_go_block li a.map {
	background-color: #00a2c5;
	background-image: url(../images/go_ico_map.png);
}

.guide_go_block + .topics_block .bg {
	-webkit-transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	-o-transform: skewY(-6deg);
	transform: skewY(-6deg);
}
.guide_go_block + .topics_block .bg::before {
	-webkit-transform: skewY(6deg);
	-ms-transform: skewY(6deg);
	-o-transform: skewY(6deg);
	transform: skewY(6deg);
}

@media screen and (max-width: 768px) {
	.guide_go_block {
		margin-top: -50px;
		padding-bottom: 0;
	}
	.guide_go_block > h1 {
		margin-bottom: 20px;
	}
	.guide_go_block > h1 img {
		width: 290px;
	}
	.guide_go_block .bg {
		top: -50px;
		bottom: -40px;
	}
	.guide_go_block .bg::before {
		top: -80px;
		bottom: -80px;
	}
	.guide_go_block ul {
		text-align: center;
		margin: 0 -5px;
	}
	.guide_go_block li {
		float: left;
		width: 50%;
		margin: 0;
		padding: 0 5px 15px;
	}
	.guide_go_block li a {
		height: 100px;
		padding-top: 50px;
		background-position: 50% 5px;
		-webkit-background-size: 80px;
		background-size: 80px;
		font-size: 1.2rem;
	}
	.guide_go_block li a::before {
		bottom: 7px;
		right: 7px;
	}
	.guide_go_block + .topics_block {
		margin-top: 0;
		padding-top: 70px;
	}
	.guide_go_block + .topics_block .bg {
		top: 0;
	}
}