@charset "utf-8";

/* ==================================================================

	accessmap.css
	
=================================================================== */

/* ◇ title
-------------------------------- */	
.contents .accent{
    background:url(../../images/accessmap/accent.jpg) no-repeat 50% 50%; 
    background-size:cover;
}
.contents .mainvisual h2 {
    background:url(../../images/accessmap/title_icon.png) 0 50% no-repeat;
}

/* --------------------------------
   □ map
-------------------------------- */ 
main section .map {
	margin-bottom:17px;
	border-radius: 5px;
    overflow: hidden;
}
	main section .map p.link{
		margin:10px 0 0 0;
		text-align:right;
	}
	main section .map p.link a{
		color:#333;
		background:url(../../images/common/icon/pin.png) 0 50% no-repeat;
		padding-left:19px;
	}

/* --------------------------------
   □ method
-------------------------------- */ 
section.method {
	margin-bottom:30px;
}
section.method:last-child {
	margin-bottom:0;
}
section.method h4 {
    padding: 5px 0 5px 45px;
}
section.method.car h4 {
    background: url(../../images/accessmap/icon_car.png) 0 50% no-repeat;
}
section.method.train h4 {
    background: url(../../images/accessmap/icon_train.png) 0 50% no-repeat;
}
section.method p.txt {
    font-size: 114%;
}

.contents .flexbox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.contents .flexbox p.image {
    max-width: 480px;
    margin-bottom: 0;
}
    .contents .flexbox p.image img {
        max-width: 100%;
        height: auto;
    }

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

    /* --------------------------------
       □ map
    -------------------------------- */ 
    main section .map {
        margin-bottom:10%;
        border-radius: 5px;
        overflow: hidden;
        height: 400px!important;
    }

    /* --------------------------------
       □ method
    -------------------------------- */ 
    section.method h4 {
        margin-bottom: 3%;
    }
    section.method p.txt {
        font-size: 100%;
    }

    .contents .flexbox {
        flex-direction: column;
    }
    .contents .flexbox p.image {
        max-width: 100%;
        margin-top: 30px;
    }

}