@charset "utf-8";
/* CSS Document */

.main {background: url("/common/images/access/mainBg.png") center bottom no-repeat; height: 250px;}
.accessNav .sectionTitle {margin: 5% auto 3%;}
.accessNav ul {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; width: 80%; overflow: hidden; margin-bottom: 5%;}
.accessNav ul li {background: url("/common/images/logo_mini.png") left center no-repeat; padding: 0 0 0 2em; letter-spacing: 0.05em;}
.accessNav a {border-bottom: 1px solid #6c9f2f; display: block; padding: .2em .6em; transition: all 0.2s;}
.accessNav a:hover {color: #6c9f2f;}
.access {padding: 3% 0; box-sizing: border-box;}
.access .container {width: 920px;display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
.access h2 {font-size: 20px; border-left: 10px solid #fdd000; letter-spacing: 0.05em; line-height: 1.2; padding: .2em 0 .3em 1em;}
.access h2 span {font-size: 14px; display: block; text-transform: uppercase;}
.access .left, .access .right {width: 50%;}
.access .map {height: 330px; position: relative; border: 1px solid #eee; box-sizing: border-box;}
.access .data {width: 88%; margin: 4% auto 0;}
.access dl {display: -webkit-flex; display: flex; -webkit-align-items: flex-start; flex-wrap: wrap; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin: 3% auto 0;}
.access .number {margin-bottom: 9%;}
.access dt {font-size: 12px; letter-spacing: 0.03em; width: 75px; text-align: center; border-radius: 3px; padding: .3em 0;}
.access dd {margin: 3% 3% 0; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; font-weight: 400}
.access .zip {width: 140px;}
.access p:not(.zip) {width: 100%;}
#osaka,#tokyo {background: rgba(238,238,238,0.3);}
.map iframe {position: absolute; width: 100%; height: 100%; border: 0;}
.btnArea {text-align: center; padding: 2% 0 4%;}
.btnArea p {margin: 1% auto;}

@media screen and (max-width: 896px) {
    .main .right {position: absolute; right: -6%;}
    .accessNav ul li {background-size: auto 100%;}
    .access {padding: 5% 3%;}
    .access .container {width: 95%; flex-wrap: wrap;}
    .access .left,.access .right,.access .data {width: 100%;}
    .access .map {margin: 5% auto 0;}
    .access dd {width: auto; margin: 0 3%;}
}
@media screen and (max-width: 896px) and (min-width: 381px) {
    .access dl {flex-wrap: nowrap;}
}
@media screen and (max-width: 600px) {
    .main .right {right: -10%}
}
@media screen and (max-width: 480px) {
    .main .right {right: -15%;}
    .accessNav ul {width: 100%; webkit-justify-content: space-between; justify-content: space-between; margin: 8% auto;}
    .access .map {height: 50vw;}
    .accessNav a {padding: 0;}
}
@media screen and (max-width: 380px) {
    .access h2 {margin: 5% auto 10%;}
    .access dd {width: 100%; margin: 3% auto;}
}