@charset "utf-8";
.map {
padding-top: 70px;
}
.map__content {
max-width: calc(100% - 32px - 32px);
}
.map__content__tab {
width: 100%;
}
.map__content__tab__list {
justify-content: center;
gap: 32px;
}
.map__content__tab__list__item {
width: auto;
max-width: 282px;
min-height: calc(41 / 16 * 1em);
justify-items: center;
align-items: start;
box-sizing: border-box;
padding-bottom: .5em;
background: linear-gradient(0deg, currentColor, currentColor) no-repeat bottom left/0% 2px;
font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
transition: background-size .3s ease-out;
}
.map__content__tab__list__item.swiper-slide-thumb-active {
background-size: 100% 2px;
}
.map__content__tabpanel {
width: 100%;
margin-inline: 0;
margin-top: 32px;
}
/* .map__content__tabpanel__list {
}
.map__content__tabpanel__list__item {
} */
.map__content__tabpanel__list__item__photo {
margin-inline: auto;
}
/* .map__content__tabpanel__list__item__photo__link {
}
.map__content__tabpanel__list__item__photo__link2 {
} */
.map__content__btn {
margin-top: 32px;
gap: 32px;
}
.map__content__btn__item {
flex: 0 1 min(100%, 283px);
}
.map__content__btn__item a {
grid-template-columns: auto auto;
justify-content: center;
gap: 0 calc(16 / 16 * 1em);
font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
padding-right: 0;
}
.map__content__btn__item--print a::after {
position: relative;
width: calc(20 / 16 * 1em);
height: calc(20 / 16 * 1em);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.map__content__btn__item--google a::after {
position: relative;
width: calc(15 / 16 * 1em);
height: calc(20 / 16 * 1em);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
@media (any-hover: hover){
.map__content__tab__list__item:hover {
background-size: 100% 2px;
}
}
@media screen and (max-width: 768px){
.map {
padding-top: calc(var(--header-height) + 50px);
}
.map__content {
max-width: calc(100% - 8px - 8px);
}
.map__content__tab__list {
gap: 8px;
}
.map__content__tab__list__item {
max-width: none;
min-height: calc(37 / 13 * 1em);
font-size: min(calc(13 / 375 * 100vw), 13px);
}
.map__content__tabpanel {
margin-top: 0;
}
.map__content__btn {
margin-top: 18px;
gap: 8px;
}
.map__content__btn__item {
flex: 0 1 min(100%, calc(50% - 4px));
}
.map__content__btn__item a {
gap: 0 calc(8 / 13 * 1em);
font-size: min(calc(13 / 375 * 100vw), 13px);
}
.map__content__btn__item--print a::after {
width: calc(13 / 13 * 1em);
height: calc(13 / 13 * 1em);
}
.map__content__btn__item--google a::after {
width: calc(10 / 13 * 1em);
height: calc(13 / 13 * 1em);
}
}
.location {
padding-top: 100px;
}
.location__gallery {
max-width: calc(100% - 32px - 32px);
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: 2px;
}
/* .location__gallery__item {
} */
.location__area {
margin-top: 170px;
grid-template-columns: auto minmax(32px, 1fr) minmax(0, calc(912 / 1540 * 100%)) 32px minmax(0, calc(283 / 1540 * 100%));
align-items: start;
}
.location__area__heading {
grid-column: 1;
}
.location__area__photo {
grid-column: 3;
}
.location__area__desc {
grid-column: 5;
}
/* .location__area__desc__copy {
} */
.location__view {
position: relative;
z-index: 1;
margin-top: 170px;
}
.location__view__photo {
position: relative;
z-index: 1;
}
.location__view__photo img {
min-height: 400px;
object-fit: cover;
}
.location__view__desc {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
translate: -50% -65%;
}
.location__view__desc__heading {
font-size: clamp(14px, calc(22 / 1200 * 100vw), 22px);
letter-spacing: .2em;
writing-mode: vertical-rl;
}
.location__btn {
max-width: 283px;
margin-top: 65px;
}
@media screen and (max-width: 768px){
.location {
padding-top: 65px;
}
.location__gallery {
max-width: calc(100% - 8px - 8px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.location__area {
margin-top: 65px;
grid-template-columns: 100%;
}
.location__area__heading {
justify-self: start;
}
.location__area__photo {
grid-column: 1;
margin-top: 65px;
margin-inline: calc(50% - var(--window-half-width));
}
.location__area__desc {
grid-column: 1;
margin-top: 65px;
}
.location__view {
margin-top: 65px;
}
.location__view__photo img {
min-height: 0;
}
.location__view__desc {
translate: -50% -75%;
}
.location__view__desc__heading {
font-size: min(calc(20 / 375 * 100vw), 20px);
}
.location__btn {
max-width: 237px;
margin-top: 32px;
}
}
.access {
margin-top: 100px;
}
.access__search {
box-sizing: border-box;
padding: 64px;
background: #fff;
}
.access__search__form {
gap: 32px;
}
.access__search__form__condition {
flex: 0 1 auto;
grid-template-columns: minmax(0, auto) minmax(0, auto);
align-items: center;
gap: 32px 71px;
background: url('data:image/svg+xml;utf8,') no-repeat center/9px auto;
}
.access__search__form__condition__item {
grid-template-columns: auto minmax(0, 283px) auto;
align-items: stretch;
gap: 0 calc(24 / 16 * 1em);
font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
}
/* .access__search__form__condition__item--start {
}
.access__search__form__condition__item--goal {
} */
.access__search__form__condition__item__name {
letter-spacing: .2em;
text-align: center;
writing-mode: vertical-rl;
padding-right: calc(20 / 16 * 1em);
border-right: 2px solid rgb(var(--color-gold));
}
.access__search__form__condition__item__input {
width: 100%;
min-width: 0;
height: calc(48 / 16 * 1em);
box-sizing: border-box;
padding-inline: 1em;
font-size: inherit;
font-family: inherit;
border: 1px solid rgba(21, 21, 21, .1);
border-radius: 0;
outline: none;
appearance: none;
}
.access__search__form__condition__item__input::placeholder {
color: rgba(21, 21, 21, .3);
}
.access__search__form__condition__item--goal .access__search__form__condition__item__input {
text-align: center;
}
.access__search__form__condition__item__station {
align-self: center;
}
.access__search__form__btn {
flex: 0 1 min(100%, 283px);
height: calc(48 / 16 * 1em);
box-sizing: border-box;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
border-left: none;
border-right: none;
font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
font-family: inherit;
border-radius: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center right/7px auto;
outline: none;
appearance: none;
cursor: pointer;
}
.access__btn {
max-width: 283px;
margin-top: 65px;
}
@media screen and (max-width: 768px){
.access {
margin-top: 65px;
}
.access__search {
padding: 32px 28px;
width: calc(100% - 8px - 8px);
}
.access__search__form {
gap: 24px 0;
}
.access__search__form__condition {
flex: 1 0 100%;
grid-template-columns: 100%;
align-items: start;
gap: 56px 0;
background: url('data:image/svg+xml;utf8,') no-repeat center/7px auto;
}
.access__search__form__condition__item {
grid-template-columns: auto minmax(0, 400px) auto;
font-size: min(calc(16 / 375 * 100vw), 16px);
}
.access__search__form__condition__item__name {
padding-right: calc(24 / 13 * 1em);
font-size: calc(13 / 16 * 100%);
}
.access__search__form__btn {
flex: 1 0 100%;
height: calc(45 / 13 * 1em);
font-size: min(calc(13 / 375 * 100vw), 13px);
}
.access__btn {
max-width: 237px;
margin-top: 32px;
}
}