@charset "UTF-8";
:root {
  --color-train: #EF8502;
  --color-bus: #0062b0;
  --color-walk: #A9A9A9;
  --tc-kintetsu: #f29e2c;
  --tc-chuou: #0dad4a;
  --tc-jr-gakken: #ed4085;
  --tc-midosuji: #dd2f18;
  --gradient: linear-gradient(to right, #0062b0, #00a199);
}

.gm-style.place-card-large { display: none; }
.material-symbols-outlined { font-weight: normal; }
div.shuttlebus, div.accessBox { margin-bottom: 80px; }

div.accessBox ul#accessTabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 40px; }
div.accessBox ul#accessTabs li { background-color: #f1f1f1; border: 1px solid #0073b2; color: #0073b2; font-size: 1.6rem; text-align: center; padding: 16px 48px; transition: all 0.35s; cursor: pointer; position: relative; }
div.accessBox ul#accessTabs li:hover, div.accessBox ul#accessTabs li.active { background-color: #0073b2; border: 1px solid #0073b2; color: #f1f1f1; }
div.accessBox ul#accessTabs li::after { content: ''; display: block; width: 10px; height: 10px; border-top: 10px solid #0073b2; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; transition: bottom 0.5s; z-index: -1; }
div.accessBox ul#accessTabs li:hover::after, div.accessBox ul#accessTabs li.active::after { bottom: -24px; }

div#accessRoots > div { display: none; }
div#accessRoots > div.active { display: block; }
div#accessRoots > div > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
div#accessRoots > div > ul > li { margin-right: 2%; margin-bottom: 2%; }
div#accessRoots > div > ul > li:last-child { margin-right: 0; }

@media screen and (min-width: 801px) {
div#accessRoots > div > ul li { width: 48%; } 
}
@media screen and (max-width: 801px) {
div#accessRoots > div > ul li { width: 100%; } 
}

.root .root__point { display: inline-block; background-color: #fff; border: 1px solid #333; font-size: 1.6rem; line-height: 1; padding: 8px 24px; }
.root .root__point.start, .root .root__point.goal { background: var(--gradient); border: none; color: #f1f1f1; }
.root .root__notices { font-size: 1.5rem; display: grid; display: -ms-grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }
.root .root__notices::after { content: ''; display: block; background-color: #333; height: 100%; width: 4px; position: absolute; top: 0; left: 23px; z-index: -1; }
@media screen and (min-width: 801px) {
  .root .root__notices { grid-template-columns: 120px 2fr; -ms-grid-columns: 120px 2fr; gap: 16px; } 
}
@media screen and (max-width: 801px) {
  .root .root__notices { grid-template-columns: 1.8fr 3.2fr; -ms-grid-columns: 1.8fr 3.2fr; gap: 4%; } 
}

.root__notices:has(.train)::after { background-color: var(--color-train); }
.root__notices:has(.train.kintetsu)::after { background-color: var(--tc-kintetsu); }
.root__notices:has(.train.chuou)::after { background-color: var(--tc-chuou); }
.root__notices:has(.train.jr-gakken)::after { background-color: var(--tc-jr-gakken); }
.root__notices:has(.train.midosuji)::after { background-color: var(--tc-midosuji); }
.root__notices:has(.bus)::after { background-color: var(--color-bus); }
.root__notices:has(.walk)::after { background-color: var(--color-walk); }
.root__notices > .transport { display: grid; display: -ms-grid; grid-template-columns: 60px 1fr; -ms-grid-columns: 60px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.5rem; text-align: inherit; padding: 20px 0; }
.root__notices > .transport::before { content: ''; display: block; border: 2px solid #333; border-radius: 50%; width: 48px; height: 48px; padding: 10px; margin-right: 6px; box-sizing: border-box; }
.root__notices > .transport.train::before { background: url(../access/icon_train.svg) var(--color-train) center center no-repeat; background-size: auto 75%; border-color: var(--color-train); }
.root__notices > .transport.train.kintetsu::before { background-color: var(--tc-kintetsu); border-color: var(--tc-kintetsu); }
.root__notices > .transport.train.chuou::before { background-color: var(--tc-chuou); border-color: var(--tc-chuou); }
.root__notices > .transport.train.jr-gakken::before { background-color: var(--tc-jr-gakken); border-color: var(--tc-jr-gakken); }
.root__notices > .transport.train.midosuji::before { background-color: var(--tc-midosuji); border-color: var(--tc-midosuji); }
.root__notices > .transport.bus::before { background: url(../access/icon_bus.svg) var(--color-bus) center center no-repeat; background-size: auto 75%; border-color: var(--color-bus); }
.root__notices > .transport.walk::before { background: url(../access/icon_walking.svg) var(--color-walk) center center no-repeat; background-size: 70% auto; border-color: var(--color-walk); }

.transport__notice { text-align: inherit; padding: 20px 0; }
.transport__notice span { font-size: 90%; }
.transport__notice a { display: inline-block; background-color: #fff; border-radius: 16px; border: 1px solid #666; color: #666; font-size: 90%; letter-spacing: 2px; text-decoration: none;  padding: 2px min(3vw, 24px); margin: 4px; transition: all ease 0.3s; }
.transport__notice a[href=""] { opacity: 0.5; pointer-events: none; }
@media (hover:hover) {
  .transport__notice a:hover { background-color: #666; color: #fff; }
}
.transport__notice a:not(a[href=""]):focus-within { background-color: #666; color: #fff; }

.root .open-title { background-color: #fff; border: 1px solid #666; cursor: pointer; color: var(--cl-bk); font-size: 1.6rem; /*display: grid; display: -ms-grid; grid-template-columns: 50px 1fr; -ms-grid-columns: 50px 1fr;*/ display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.root .open-title::before { content: '+'; display: inline-block; color: #fff; background: var(--gradient); text-align: center; line-height: 3.2rem; height: 100%; width: 50px; padding: min(3vw, 16px); }
.root .open-title > span { padding: 0 6px;
    width: 90%;}
.root .open-title + div { padding: min(6vw, 32px) 0; }
.root:not(:last-child) .open-title { border-bottom: 0; }

/* OPEN */
.root[open] .open-title { border-bottom: 1px solid #666; }
.root[open] .open-title, .root[open] .open-title:focus-within { background-color: #e1e1e1; }
.root[open] .open-title::before, .root[open] .open-title:focus-within::before { content: '-'; background: #666; }
@media (hover:hover) {
  .root .open-title:hover::before { content: '↓'; }
  .root[open] .open-title:hover::before { content: '↑'; }
}
.root .open-title:focus-within::before { content: '↓'; }
.root[open] .open-title:focus-within::before { content: '↑'; }

a.btn_timeschedule { background-color: var(--gradient); border-radius: 32px; background: var(--gradient); border: 1px solid #aeaeae; color: #fff; font-size: 1.5rem; letter-spacing: 0.2rem;  line-height: 1.5rem; display: inline-block; transition: opacity 0.3s; padding: 10px min(6vw, 48px) 8px; margin: 2% 0%; }
a.btn_timeschedule::before { content: ''; display: inline-block; vertical-align: middle; margin-right: 8px; width: min(4vw, 46px); height: min(4vw, 46px); background: url("../access/icon_calendar.svg") center center no-repeat; background-size: contain; }
a.btn_timeschedule[href=""], a.btn_timeschedule[href=""]:focus-within { background: #ccc; opacity: 0.5; pointer-events: none; }
@media (hover:hover) {
  a.btn_timeschedule:hover { opacity: 0.6; }
}
a.btn_timeschedule:focus-within { opacity: 0.6; }

@media screen and (min-width: 801px) {
  .map .detail01__box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 0; }
}
@media screen and (max-width: 801px) {
  .map figure { margin-top: 6%; }
}
.detail01__box > h4 { font-size: 1.6rem; margin-bottom: min(3vw, 16px); }
.root + h4 { margin-top: min(6vw, 32px); }

address > p { margin-bottom: 16px; }

#map { min-height: min(40vh, 500px); width: 100%; margin-top: 6%; position: relative; }
#map > iframe { border: 0; width: 100%; height: 100%; position: absolute; top: 0; }