@charset "utf-8";

body { counter-reset: number 0; }
img { width: auto; height: auto; object-fit: cover;}

.access { max-width: 1200px; margin: 0 auto; padding: 4vw 2vw; }
.access h1 { font-size: 28px; padding: 0 0 4vw; }
.access .info { margin: 0 auto 5rem; border-top: 1px solid #e3e0d9; }
.access .info > dl { display: flex; border-bottom: 1px solid #e3e0d9; }
.access .info > dl > dt { background: #F3F0E9; width: 14rem; padding: 1rem; display: flex; align-items: center; }
.access .info > dl > dd { width: calc(100% - 14rem); padding: 1rem; }
.access .info > dl > dd dl { display: flex; align-items: center; margin: 1rem 0 0; }
.access .info > dl > dd dl dd { padding: 0 0 0 1rem; }
.access .info > dl > dd ul li { padding: 0 0 0 15px; position: relative; }
.access .info > dl > dd ul li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 100px; background: #aaa; position: absolute; left: 2px; top:.7em; line-height: 1.5; }
.access .info > dl > dd ul li a { color: #6E9CCF; position: relative; display: inline-block; transition: .4s; }
.access .info > dl > dd ul li a::before { content: ""; display: block; width: 0; height: 0; opacity: 0; transition: .4s; border-bottom: 1px solid #6E9CCF; position: absolute; left: 0; bottom: 0; }
.access .info > dl > dd ul li a:hover::before { width: 100%; opacity: 1; }

.accessmap { margin: 0 auto 2.5rem;}





/* ─────────────────────────────────────────────────────────────────────────── */

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

}


@media screen and (max-width:767px){
  .access h1 { font-size: 25px; }
  .access .info > dl { display: block; }
  .access .info > dl > dt { width: auto; padding: .5rem; list-style: 1; }
  .access .info > dl > dd { width: auto; padding: 1rem .5rem; }

}
