@charset "utf-8";

.map-parking{
}
.map-parking ul#map-photo-car{
    width: 690px;
    height: 450px;
    background: url("/route/osaka-beppu/boarding/img/access_map_parking/map_car_l.gif") no-repeat;
    position: relative;
	margin-left: 10px;
	margin-bottom: 5px;
}
.map-parking ul#map-photo-car li a{
display: inline-block;
z-index: 3;
transition-duration: .8s;
opacity: 0.9;
box-shadow: 0 5px 7px -7px #000;
padding: 0;
border:1px solid #fff;
}
.map-parking ul#map-photo-car li a img{
width: 60px;
height: 40px;
}
.map-parking ul#map-photo-car li a:hover{
background-color: #0081CF;
border:1px solid #0081CF;
opacity: 0.8;
}
.map-parking ul#map-photo-car li a:hover img{
	opacity:0.6;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5 */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	zoom:1;
}
.map-parking ul#map-photo-car li#map-photo05 a img{
width: 84px;
height: 40px;
}

.map-parking ul#map-photo-car li a:hover, .map-parking ul#map-photo-car li a:active{
    animation: hover-bob 1.5s ease-out infinite alternate;
}
.map-parking ul#map-photo-car li a:focus{
    opacity: .6;
}
.map-parking ul#map-photo-walk{
    width: 690px;
    height: 450px;
    background: url("/route/osaka-beppu/boarding/img/access_map_parking/map_walk_l.gif") no-repeat;
    position: relative;
	margin-left: 10px;
	margin-bottom: 5px;
}
.map-parking ul#map-photo-walk li a{
display: inline-block;
z-index: 3;
transition-duration: .8s;
opacity: 0.9;
box-shadow: 0 5px 7px -7px #000;
padding: 0;
border:1px solid #fff;
}
.map-parking ul#map-photo-walk li a img{
width: 60px;
height: 40px;
}
.map-parking ul#map-photo-walk li a:hover{
background-color: #0081CF;
border:1px solid #0081CF;
opacity: 0.8;
}
.map-parking ul#map-photo-walk li a:hover img{
	opacity:0.6;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5 */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	zoom:1;
}
.map-parking ul#map-photo-walk li#map-photo05 a img{
width: 84px;
height: 40px;
}

.map-parking ul#map-photo-walk li a:hover, .map-parking ul#map-photo-walk li a:active{
    animation: hover-bob 1.5s ease-out infinite alternate;
}
.map-parking ul#map-photo-walk li a:focus{
    opacity: .6;
}
.map-parking #map-photo01{
    position: absolute;
    top: 4px;
    right: 160px;
}
.map-parking #map-photo02{
    position: absolute;
    top: 35px;
    right: 300px;
}
.map-parking #map-photo03{
    position: absolute;
    top: 132px;
    right: 245px;
}
.map-parking #map-photo04{
    position: absolute;
    top: 300px;
    right: 450px;
}
.map-parking #map-photo05{
    position: absolute;
    top: 205px;
    right: 250px;
}
.map-parking #map-photo11{
    position: absolute;
    top: 4px;
    right: 160px;
}
.map-parking #map-photo12{
    position: absolute;
    top: 35px;
    right: 300px;
}
.map-parking #map-photo13{
    position: absolute;
    top: 132px;
    right: 245px;
}
.map-parking #map-photo14{
    position: absolute;
    top: 300px;
    right: 490px;
}
.map-parking #map-photo15{
    position: absolute;
    top: 205px;
    right: 220px;
}
.map-parking .map-info {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
}
.map-parking li.col3-arrow {
    width: 233px;
    position: relative;
    margin-right: 0;
    margin-bottom: 0.5em;
}
.map-parking li.col3-arrow3 {
    width: 300px;
    position: relative;
    margin-right: 0;
    margin-bottom: 0.5em;
}
.map-parking li.col3-arrow>img{
    width: 210px;
    height: 140px;
}
.map-parking li.col3-arrow2{
    display: inline-block;
}
.map-parking li.col3-arrow3{
    display: inline-block;
}
.map-parking li.col3-arrow4{
    display: inline-block;
}
.map-parking li.col3-arrow3>img{
    width: 284px;
    height: 140px;
}
.map-parking li.col3-arrow>.cap {
    display: block;
    font-size: 92%;
    line-height: 1.6;
    width: 210px;
    letter-spacing: 0;
}
.map-parking li.col3-arrow3>.cap {
    display: block;
    font-size: 92%;
    line-height: 1.6;
    width: 284px;
    letter-spacing: 0;
}
.map-parking li.col3-arrow4>.cap {
    display: block;
    font-size: 92%;
    line-height: 1.6;
    width: 284px;
    letter-spacing: 0;
}
.map-parking li.col3-arrow2 {
    max-width: 16em;
    height: 143px;
    margin-right: 0;
    margin-bottom: 2em;
	/*margin-left: 20px;*/
    display: flex;
    align-items: center;
}
.map-parking li.col3-arrow2 p {
    display: inline;
    font-size: 95%;
    line-height: 1.6;
    letter-spacing: 0;
}
.map-parking li.col3-arrow4 {
    max-width: 10em;
    height: 143px;
    margin-right: 0;
    margin-bottom: 0.5em;
	margin-left: 10px;
    display: flex;
    align-items: center;
}
.map-parking li.col3-arrow4 p {
    display: inline;
    font-size: 95%;
    line-height: 1.6;
    letter-spacing: 0;
	max-width: 380px;
}

.map-parking li.col3-arrow:not(:last-child):after {
    content: '';
    border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #6aa7cd;
    width: 8px;
    display: block;
    position: absolute;
    top: 60px;
    left: 218px;
}
.map-parking li.col3-arrow3:not(:last-child):after {
    content: '';
    border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #6aa7cd;
    width: 8px;
    display: block;
    position: absolute;
    top: 60px;
    left: 292px;
}

.flexbox-2col{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexbox-2col>li,
.flexbox-2col>div {
	width: calc(50% - 10px);
}
.flexbox-2col img{
	max-width: 100%;
	height: auto;
}
/*****************************************************************/

@media only screen and (max-width: 750px) {
.map-parking ul#map-photo-car{
    width: 330px;
    height: 360px;
    background: url("/route/osaka-beppu/boarding/img/access_map_parking/map_car_s.gif") no-repeat;
    background-size: contain;
    position: relative;
	margin: 0 auto;
}
.map-parking ul#map-photo-walk{
    width: 330px;
    height: 360px;
    background: url("/route/osaka-beppu/boarding/img/access_map_parking/map_walk_s.gif") no-repeat;
    background-size: contain;
    position: relative;
	margin: 0 auto;
}
.map-parking .map-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
}
.map-parking li.col3-arrow {
    max-width: 280px;
    width: 280px;
    position: relative;
    margin-right: 0;
    margin-bottom: 4em;
    text-align: center;
    }
.map-parking li.col3-arrow>img{
    width: 280px;
    height: 187px;
    margin: 0 auto;
}
.map-parking li.col3-arrow3>img{
    width: 300px;
    height: auto;
    margin: 0 auto;
}
.map-parking li.col3-arrow:not(:last-child):after {
    content: '';
border-top: 8px solid #F0897F;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
    width: 2px;
    display: block;
    position: absolute;
    top: 244px;
    left: 132px;
}
.map-parking #map-photo01{
    position: absolute;
    top: 6px;
    right: 72px;
}
.map-parking #map-photo02{
    position: absolute;
    top: 20px;
    right: 160px;
}
.map-parking #map-photo03{
    position: absolute;
    top: 100px;
    right: 130px;
}
.map-parking #map-photo04{
    position: absolute;
    top: 220px;
    right: 268px;
}
.map-parking #map-photo05{
    position: absolute;
    top: 172px;
    right: 115px;
}
.map-parking #map-photo11{
    position: absolute;
    top: 6px;
    right: 72px;
}
.map-parking #map-photo12{
    position: absolute;
    top: 20px;
    right: 160px;
}
.map-parking #map-photo13{
    position: absolute;
    top: 100px;
    right: 130px;
}
.map-parking #map-photo14{
    position: absolute;
    top: 235px;
    right: 288px;
}
.map-parking #map-photo15{
    position: absolute;
    top: 172px;
    right: 115px;
}
.map-parking li.col3-arrow>.cap {
    display: block;
    font-size: 92%;
    line-height: 1.6;
    width: 280px;
    letter-spacing: 0;
    text-align: left;
}
.map-parking li.col3-arrow2 {
    max-width: 280px;
    height: auto;
    margin-right: 0;
    margin-bottom: 2em;
	margin-left: 0;
}
.map-parking li.col3-arrow2 p {
    display: block;
    font-size: 95%;
    line-height: 1.6;
    letter-spacing: 0;
}
.map-parking li.col3-arrow4 {
    max-width: 310px;
    height: auto;
    margin-right: 0;
    margin-bottom: 2em;
	margin-left: 0;
}
.map-parking li.col3-arrow4 p {
    display: block;
    font-size: 95%;
    line-height: 1.6;
    letter-spacing: 0;
}
}
/*****************************************************************/