@charset "UTF-8";
html {scroll-behavior: smooth;}

/* メイン */
.pre-inc main{width: 100%;aspect-ratio: 16 / 9;overflow: hidden;font-size: 1.04166vw;}
.pre-inc main video{width: 100%;}
.pre-inc main img{width: 100%;}
.pre-inc main .main_copy01{position: absolute;inset: 0;margin: auto;width: 9.65em;height: 4.45em;opacity: 0;}
.pre-inc main .main_copy02{position: absolute;inset: 0;margin: auto;width: 16.75em;height: 4.45em;opacity: 0;}
.pre-inc main .main_copy03{position: absolute;inset: 0;margin: auto;width: 50.85em;height: 4.45em;opacity: 0;}
.pre-inc main .main_room_scene{position: absolute;left: 0;top: 0;width: 100%;opacity: 0;}
.pre-inc main .main_white_filter{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.5);opacity: 0;}
.pre-inc main .main_copy04{position: absolute;inset: 0;margin: auto;width: 40em;height: 15em;opacity: 0;}
.pre-inc main .main_last_copy{font-size: 1.6em;text-align: center;position: absolute;left: 0;bottom: 7.8em;width: 100%;opacity: 0;letter-spacing: 0.1em;}
.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;}
.pre-inc main .cap_into{color: #333;position: absolute;right: 0.7em;bottom: 1.5em;text-align: right;z-index: 10;text-shadow:none;}

@media screen and (min-width: 1921px){
.pre-inc main{font-size: 20px;}
}

@media screen and (max-width: 768px){
.pre-inc main{aspect-ratio: 9 / 11.71875;font-size: 1.8vw;}
.pre-inc main .main_bk{height: 100%;}
.pre-inc main .main_bk video{object-fit: cover;width: 100%;height: 100%;}
.pre-inc main .main_room_scene{height: 100%;}
.pre-inc main .main_room_scene video{object-fit: cover;width: 100%;height: 100%;}
.pre-inc main .main_copy04{font-size: 1.1em;}
.pre-inc main .main_last_copy{font-size: 1.8em;bottom: 10em;}
.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: 2.5em 0 3em;border-top: 0.15em solid #fff;}
.pre-inc .koudou_wrap{width: 60em;margin-inline: auto;}
.pre-inc .meritbox{display: flex;justify-content: space-between;padding: 0 0.5em;}
.pre-inc .meritbox li{display: flex;justify-content: center;align-items: center;height: 5.5em;width: 19em;background: linear-gradient(to right,#833b30,#e2797f,#833b30);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.5em;}
.pre-inc .koudou_tit{text-align: center;font-size: 1.8em;letter-spacing: 0.1em;margin-top: 1.8em;}
.pre-inc .koudou_tit span{display: block;font-family: "Playfair Display", serif;margin-bottom: 0.5em;}
.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;}

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

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

/* ACCESS */
.pre-inc #access{font-size: 1.04166vw;}
.pre-inc .access_three_point{display: flex;}
.pre-inc .access_three_point > li{width: 32em;}
.pre-inc .access_three_point > li h3{color: #fff;position: absolute;left: 0;top: 50%;transform: translateY(-50%);font-size: 3em;font-family: "EB Garamond", serif;line-height: 1;text-align: center;width: 100%;animation-name: fadeIn;animation-delay: 0.8s;letter-spacing: 0.1em;}
.pre-inc .access_three_point > li h3 big{font-size: 2em;line-height: 1;}
.pre-inc .access_three_point > li h3 .line_type{font-size: 0.25em;letter-spacing: 0.5px;}
.pre-inc .access_three_point > li h3 small{font-size: 0.2em;letter-spacing: 0.5px}
.pre-inc .access_three_point > li i{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.5);animation-name: fadeIn;animation-duration: 2.5s;}
.pre-inc .access_three_point.train > li{border-bottom: 0.4em solid;}
.pre-inc .access_three_point.train > li:nth-of-type(1){border-bottom-color: #c30d23;}
.pre-inc .access_three_point.train > li:nth-of-type(2){border-bottom-color: #723091;}
.pre-inc .access_three_point.train > li:nth-of-type(3){border-bottom-color: #036eb8;}

.pre-inc .access_aerial img{width: calc(100vw - 10px);max-width: none;}
.pre-inc .access_line{position: absolute;bottom: 0;left: 0;}
.pre-inc .access_line figure{overflow: hidden;}
.pre-inc .access_plot{position: absolute;bottom: 0;left: 0;}
.pre-inc .access_building_light{position: absolute;bottom: 0;left: 0;mix-blend-mode: screen;}
.pre-inc .access_building{position: absolute;bottom: 0;left: 0;}
.pre-inc .access_aerial02{position: absolute;bottom: 0;left: 0;}
.pre-inc .access_aerial_copy{position: absolute;right: 0;top: 3.5em;}
.pre-inc .access_aerial_tit{width: 34.5em;}
.pre-inc .access_aerial_tit img{width: 100%;}
.pre-inc .access_aerial_route{width: 47.35em;margin-top: 4em;}
.pre-inc .access_aerial_route img{width: 100%;}

.pre-inc .access_note{font-size: 0.65em;margin:0.5em 1em 1em;}

@media screen and (min-width: 1921px){
.pre-inc #access{font-size: 20px;}
.pre-inc .access_aerial img{width: 100%;}
.pre-inc .access_plot img{width: 1920px;}
.pre-inc .access_line img{width: 1920px;}
}

@media screen and (min-width: 769px){
.pre-inc .access_three_point > li:nth-of-type(2) h3{animation-delay: 1s;}
.pre-inc .access_three_point > li:nth-of-type(2) i{animation-delay: 0.2s;}
.pre-inc .access_three_point > li:nth-of-type(3) h3{animation-delay: 1.2s;}
.pre-inc .access_three_point > li:nth-of-type(3) i{animation-delay: 0.4s;}
}

@media screen and (max-width: 768px){
.pre-inc .access_three_point{flex-wrap: wrap;}
.pre-inc .access_three_point > li{width: 100%;}
.pre-inc .access_three_point > li h3{font-size: 6em;}
.pre-inc .access_three_point.train > li{border-bottom: 1.5em solid;}
.pre-inc .access_aerial img{width: 100vw;}
.pre-inc .access_aerial_copy{font-size: 1.8em;}
.pre-inc .access_aerial_tit{width: 28em;}
.pre-inc .access_aerial_tit img{width: 100%;}
.pre-inc .access_aerial_route{margin-top: 2em;}
.pre-inc .access_aerial_route img{width: 100%;}
}
/*# sourceMappingURL=base.css.map */