.hotspot-outer{position:relative;background-color:#e0e0e0}
.hotspot{margin-left:65px;margin-bottom:20px}
span.border-line{width:32px;height:1px;text-align:center;background:#000;position:relative;display:flex;justify-content:center;margin:0 auto 5px}
.hotspot-area{display:flex;align-items:flex-end;justify-content:space-between}
.hotspot .hotspot-prev,section .hotspot .hotspot-next,.hotspot .hotspot-prev,section .hotspot .hotspot-prev{position:relative;cursor:pointer}
.hotspot .hotspot-prev .icon-arrow-up:before{font-weight:bold;font-size:12px}
.hotspot .hotspot-next .icon-arrow-up:before{font-weight:bold;font-size:12px}
.hotspot .hotspot-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.hotspot .hotspot-names{list-style-type:none}
.hotspot .hotspot-names .hotspot-name{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight:bold;text-transform:uppercase;font-size:26px;line-height:2;-webkit-transition:2s ease all;transition:2s ease all;cursor:pointer}
.hotspot .hotspot-names .hotspot-name.active{position:relative;font-size:42px;color:#d1291c;margin-bottom:10px}
.hotspot .hotspot-names .hotspot-name.active::after{content:"";position:absolute;bottom:0;left:0;height:4px;background-color:#d1291c;-webkit-animation:btLine 2s ease forwards;animation:btLine 2s ease forwards}
.hotspot-prev{padding:0 0 10px}
.hotspot-prev{padding:10px 0 0}
@-webkit-keyframes btLine{from{width:0}
to{width:100%}
}
@keyframes btLine{from{width:0}
to{width:100%}
}
.video-box{width:75%;order:2;padding-top:20px}
.video-box video{height:100%;width:100%;object-fit:cover}
.explore-heading{font-size:32px;line-height:36px;text-align:center;padding:20px 30px 5px}
.hotspot-next{float:left}
.hotspot-outer{overflow:hidden}
.p4d-custom .video-box{width:65%}
.p4d-custom .hotspot{margin-left:40px}
.p4d-custom .hotspot .hotspot-names .hotspot-name{font-size:18px}
.p4d-custom .hotspot .hotspot-names .hotspot-name.active{font-size:28px}
@media only screen and (max-width:1410px){.p4d-custom .video-box{width:60%}
}
@media only screen and (max-width:1200px){.p4d-custom .hotspot .hotspot-names .hotspot-name.active{font-size:26px}
.p4d-custom .video-box{width:55%}
}
@media only screen and (max-width:1025px){.video-box{width:72%}
.hotspot{margin-left:50px}
.hotspot .hotspot-names .hotspot-name{font-size:24px}
.hotspot .hotspot-names .hotspot-name.active{font-size:38px}
.p4d-custom .video-box{width:50%}
.p4d-custom .hotspot{margin-left:20px}
.p4d-custom .hotspot .hotspot-names .hotspot-name{font-size:16px}
.p4d-custom .hotspot .hotspot-names .hotspot-name.active{font-size:22px}
}
@media only screen and (max-width:767px){.hotspot-area{display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column-reverse}
.explore-heading{position:relative;font-size:24px;line-height:28px}
span.border-line{width:45px;margin:0 auto}
.video-box,.p4d-custom .video-box{width:100%;margin:0}
.icon-arrow-down:before{content:"\0043"}
.hotspot{margin-left:35px;margin-bottom:20px}
.hotspot .hotspot-names .hotspot-name{font-size:16px}
.hotspot .hotspot-names .hotspot-name.active{font-size:28px}
.p4d-custom .hotspot{margin-left:20px}
.p4d-custom .hotspot .hotspot-names .hotspot-name{font-size:14px}
.p4d-custom .hotspot .hotspot-names .hotspot-name.active{font-size:20px}
}
.hotspot-outer.dark-theme{background-color:#000;color:#fff}
@media screen and (max-width:1024px){.dark-theme .explore-heading{font-size:28px;line-height:32px}
}
.hotspot-outer.white-theme-p4d{background:#fff}
.arial-ft .hotspot .hotspot-names .hotspot-name{font-family:"Arial-bold"}