@charset "UTF-8";
html {scroll-behavior: smooth;}
.pre-inc article{background: url("../img/top/mv/main_bk_base_img.webp") no-repeat fixed center 20%/cover;max-width: none;}

@media screen and (max-width: 768px){
.pre-inc article::before{content: "";display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: url("../img/top/mv/main_bk_base_img.webp") no-repeat center 20%/cover;}
}

/* メイン */
.pre-inc main{width: 100%;aspect-ratio: 16 / 9;overflow: hidden;font-size: 1.04vw;}
.pre-inc main img{width: 100%;}
.pre-inc main .main_bk_ur{position: absolute;left: 0;top: 0;width: 100%;}
.pre-inc main .main_aerial{position: absolute;left: 0;top: 0;width: 100%;opacity: 0;}
.pre-inc main .main_bk_dl{position: absolute;left: 0;bottom: 0;width: 100%;}
.pre-inc main .umeda_east_cross{position: absolute;inset: 0;margin: auto;width: 64.6em;height: 38.95em;}
.pre-inc main .umeda_east_cross div{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.pre-inc main .umeda_east_cross div figure{opacity: 0;}
.pre-inc main .umeda_east_cross > figure{opacity: 0;overflow: hidden;}
.pre-inc main .umeda_east_cross figure{position: absolute;left: 0;top: 0;width: 100%;}
.pre-inc main .umeda_east_cross figure img{width: 64.6em;height: 38.95em;max-width: none;}
.pre-inc main .umeda_east_cross .umeda_east_cross_x{height: 0;bottom: 0;margin: auto 0;}
.pre-inc main .umeda_east_cross .umeda_east_cross_x img{position: absolute;left: 0;top: 0;bottom: 0;margin: auto 0;}
.pre-inc main .ten6_3min{position: absolute;right: 18em;top: 24em;width: 27.5em;opacity: 0;}
.pre-inc main .nakasaki_5min{position: absolute;left: 11em;top: 23.5em;width: 30.5em;opacity: 0;}
.pre-inc main .gf-osaka{position: absolute;left: 28em;bottom: 1em;width: 18em;opacity: 0;}
.pre-inc main .umeda_east_cross_mini{position: absolute;left: 2em;top: 1em;width: 37.2em;opacity: 0;}
.pre-inc main .cap{font-size: 0.6em;position: absolute;right: 1.5em;bottom: 1.5em;opacity: 0;}
.pre-inc main .loading_wrap{position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 1!important;}
.pre-inc main .loading{width: 3vw;height: 3vw;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0; border: 0.4vw rgba(0,0,0,0.25) solid;border-top: 0.4vw rgba(0,0,0,1) solid;border-radius: 50%;animation: spCircRot .6s infinite linear;}

@media screen and (max-width: 768px){
.pre-inc main{aspect-ratio: 9 / 11.71875;font-size: 1.4vw;}
.pre-inc main .cap{font-size: 1.5em;right: 0.7em;bottom: 1em;}
.pre-inc main .umeda_east_cross_mini{left: 2em;top: 2em;width: 56em;}
.pre-inc main .ten6_3min{right: 2em;top: 49em;width: 25em;}
.pre-inc main .nakasaki_5min{left: 3em;top: 43em;width: 30em;}
.pre-inc main .gf-osaka{left: 13em;bottom: 5em;width: 25em;}
.pre-inc main .loading{width: 8vw;height: 8vw;border: 1vw rgba(0,0,0,0.25) solid;border-top: 1vw rgba(0,0,0,1) solid;}
}

/* 行動提起 */
.pre-inc #koudou{padding: 2em 0 3em;border-top: 0.15em solid #fff;}
.pre-inc .koudou_wrap{width: 60em;margin-inline: auto;}
.pre-inc .koudou_tit{text-align: center;font-size: 2.4em;letter-spacing: 0.1em;}
.pre-inc .koudou_tit small{display: block;font-size: 0.75em;}
.pre-inc .koudou_tit small sub{font-size: 0.4em;letter-spacing: 0;margin-right: 0.2em;}
.pre-inc .koudou_tit span{display: block;font-size: 1.25em;font-family: "Playfair Display", serif;}
.pre-inc #koudou .entry_btn{padding: 0.8em 0;background: #fff;display: block;width: 23em;text-align: center;transition: 0.3s all;margin: 1.5em auto 0;}
.pre-inc #koudou .entry_btn span{font-size: 1.4em;color: #000;transition: 0.3s all;letter-spacing: 0.1em;}
.pre-inc .meritbox{display: flex;justify-content: space-between;padding: 0 0.5em;margin: 4em auto 0;width: 40em;flex-wrap: wrap;}
.pre-inc .meritbox li{display: flex;justify-content: center;align-items: center;height: 6.2em;width: 48%;background: linear-gradient(to right,#0284e5,#004d87);text-align: center;}
.pre-inc .meritbox li::before{content: "";width: calc(100% - 0.6em);height: calc(100% - 0.6em);border: 1px solid #fff;display: block;position: absolute;inset: 0;margin: auto;pointer-events: none;}
.pre-inc .meritbox li span{color: #fff;font-size: 1.4em;line-height: 1.2;letter-spacing: 0.05em;}
.pre-inc .meritbox li span small{font-size: 0.46em;display: block;}

@media screen and (min-width: 769px){
.pre-inc #koudou .entry_btn:hover{background: #333;}
.pre-inc #koudou .entry_btn:hover span{color: #fff;}
.pre-inc .meritbox li:nth-of-type(2){animation-delay: 0.2s;}
.pre-inc .meritbox li:nth-of-type(3){animation-delay: 0.4s;margin-top: 1em;height: 4em;}
.pre-inc .meritbox li:nth-of-type(4){animation-delay: 0.6s;margin-top: 1em;height: 4em;}
}

@media screen and (max-width: 768px){
.pre-inc #koudou{padding: 2em 0 2em;}
.pre-inc .koudou_wrap{width: 100%;}
.pre-inc .koudou_tit{font-size: 1.7em;}
.pre-inc #koudou .entry_btn{width: 18em;margin: 1.5em auto 0;}
.pre-inc #koudou .entry_btn span{font-size: 1.15em;}
.pre-inc .meritbox{flex-wrap: wrap;justify-content: center;padding: 0;margin-top: 2em;gap: 0.7em 0;width: 90%;}
.pre-inc .meritbox li{height: 3.8em;width: 100%;}
.pre-inc .meritbox li span{color: #fff;font-size: 1.2em;}
.pre-inc .meritbox li span small{font-size: 0.55em;}
}

/* UMEKITA & TENROKU */
.pre-inc #spot{border-top: 5em solid #fff;}
.pre-inc .spot_item{display: flex;justify-content: center;align-items: center;flex-direction: column; height: calc(100vh - 180px);font-size: 1.3vh;}
.pre-inc .spot_main_wrap{width: 100em;display: flex;}
.pre-inc .spot_tit{text-align: right;position: absolute;top: 16.75em;right: 0;z-index: 1;opacity: 0;}
.pre-inc .spot_tit span{display: block;font-size: 3.6em;padding: 0 0.7em 0 0.3em;letter-spacing: 0.1em;font-family: "Playfair Display", serif;white-space: nowrap;}
.pre-inc .spot_tit small{font-size: 1.8em;display: block;letter-spacing: 0.05em;white-space: nowrap;}
.pre-inc .spot_main{display: flex;width: 74.5em;}
.pre-inc .spot_main figure{opacity: 0;}
.pre-inc .spot_main figure img{height: 41.4em;}
.pre-inc .spot_main figure figcaption{text-align: left;font-size: 0.7em;}
.pre-inc .spot_main_lead{text-align: center;font-size: 1.3em;margin-top: 2em;opacity: 0;}
.pre-inc .spot_main_lead small{font-size: 0.8em;}
.pre-inc .diagonal_line{width: 84em;height: 70.25em;position: absolute;left: 45%;top: 0;overflow: hidden;}
.pre-inc .diagonal_line img{height: 70.25em;max-width: none;}

.pre-inc .spot_wrap:nth-of-type(even) .spot_main_wrap{justify-content: flex-end;}
.pre-inc .spot_wrap:nth-of-type(even) .spot_tit{text-align: left;left: 0;right: auto;}
.pre-inc .spot_wrap:nth-of-type(even) .spot_main{justify-content: flex-end;}
.pre-inc .spot_wrap:nth-of-type(even) .spot_main figure figcaption{text-align: right;}
.pre-inc .spot_wrap:nth-of-type(even) .diagonal_line{left: auto;right: 45%;}

@media (width >= 769px) and (height >= 1025px) {
.pre-inc .spot_main_lead{font-size:16px;}
}

@media screen and (min-width: 769px){
.pre-inc #umekita .spot_tit{background: linear-gradient(to right, #fff 48%, #000 48%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.pre-inc #tenroku .spot_tit{background: linear-gradient(to right, #000 41%, #fff 41%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;padding-left: 0.9em;}
}

@media screen and (max-width: 768px){
.pre-inc #spot{border-top: 4em solid #fff;}
.pre-inc .spot_item{height: calc(100vh - 127px);height: calc(100dvh - 127px);font-size: 1.3vh;font-size: 1.3dvh;}
.pre-inc .spot_main_wrap{width: 100%;}
.pre-inc .spot_tit{top: 16.75em;color: #fff; text-shadow: 0 0 0.3em #000,0 0 0.3em #000,0 0 0.3em #000,0 0 0.3em #000;}
.pre-inc .spot_tit span{font-size: 3.0em;padding-right: 0.7em;}
.pre-inc .spot_tit small{font-size: 1.5em;}
.pre-inc .spot_main{width: 100%;}
.pre-inc .spot_main figure img{height: 41.4em;max-width: none;}
.pre-inc .spot_main figure figcaption{font-size: 0.8em;padding: 0 1em;}
.pre-inc .spot_main_lead{font-size: 1.1em;margin-top: 2em;}

.pre-inc .spot_wrap:nth-of-type(even) .spot_tit{left: 0.5em;}
}

/* ACCESS */
.pre-inc #access{padding-bottom: 3.5em;}
.pre-inc .access_tit{font-size: 3em;color: #fff;letter-spacing: 0.1em;font-family: "Playfair Display", serif;position: absolute;left: 0;top: 0;bottom: 0;width: 100%;text-align: center;height: 1em;margin: auto 0;}
.pre-inc .access_main_triangle{width: 100%; height: 100%;text-align: right;position: absolute;left: 0;top: 0;}
.pre-inc .access_main_triangle img{height: 100%;animation-name: scale_x_r;}
.pre-inc .access_main .cap{font-size: 0.5em;left: 0.7em;bottom: -0.5em;}
.pre-inc .train_access{width: 50em;margin: 3.5em auto 0;display: flex;justify-content: space-between;}
.pre-inc .train_access_copy{width: 25.5em;}
.pre-inc .train_access_copy .line{display: block;background: #000;height: 1px;width: 100%;margin: 0.8em 0 1em;}
.pre-inc .route{font-size: 1.2em;line-height: 1.4;}
.pre-inc .route.column2{display: flex;flex-wrap: wrap;gap: 0 1.5em;}
.pre-inc .route + .route{margin-top: 0.7em;}
.pre-inc .route small{font-size: 0.5em;}
.pre-inc .route small.block{display: block;width: 100%;line-height: 1.2;}
.pre-inc .route span{font-size: 0.75em;}
.pre-inc .route strong{font-size: 1.6em;color:#065883;font-family: "EB Garamond", serif;line-height: 0.5;}
.pre-inc .subroute{padding: 1em;border: 1px solid #333;margin-top: 2em;width: fit-content;}

.pre-inc .route:nth-of-type(3), .pre-inc .route:nth-of-type(4){margin-top: 0.3em;}

.pre-inc .train_access_map{width: 23em;}

@media screen and (min-width: 769px){
.pre-inc .train_access_map{animation-delay: 0.2s;}
}

@media screen and (max-width: 768px){
.pre-inc #access{padding-bottom: 2em;}
.pre-inc .access_tit{font-size: 2em;}
.pre-inc .access_main_img{height: 90vw;}
.pre-inc .access_main_img img{object-fit: cover;width: 100%;height: 100%;}
.pre-inc .train_access{width: 100%;flex-wrap: wrap;gap: 1em 0; margin: 2em auto 0;padding: 0 1.2em;}
.pre-inc .train_access_copy{width: 100%;order: 2;}
.pre-inc .route{font-size: 1.1em;line-height: 1.4;}
.pre-inc .route small{font-size: 0.65em;}
.pre-inc .route.column2{gap: 0 0.5em;}

.pre-inc .train_access_map{width: 100%;}
}
/*# sourceMappingURL=base.css.map */