@charset "UTF-8";

/*
/* hero_device_banner
/* -------------------------------------------------- */

.hero_device_banner { position: relative; background-repeat: no-repeat; background-position: center; }
.hero_device_banner_link { position: relative; }
.hero_device_banner_button { position: absolute; background: #001968; transition: all .2s linear; }
.hero_device_banner_button:hover,
.hero_device_banner_button:focus,
.hero_device_banner_button:active { background: #203988; text-decoration: none; }

@media screen and (min-width: 700px), print {
.hero_device_banner { width: 640px; height: 100px; background-size: 100%; }
.hero_device_banner_link { width: 640px; height: 100px; }
.hero_device_banner_button { top: 48px; left: 210px; width: 135px; height: 36px; }
.hero_device_banner_button:nth-of-type(2) { left: 355px; }
}

@media only screen and (max-width: 699px) {
.hero_device_banner { width: 100vw; height: calc((100vw / 64) * 10); background-size: cover; }
.hero_device_banner_link { width: 100vw; height: calc((100vw / 64) * 10); }
.hero_device_banner_button { top: 7.5vw; left: 32vw; width: 22vw; height: 6vw; font-size: 2.8vw; }
.hero_device_banner_button:nth-of-type(2) { left: 55vw; }
}

/*
/* hero_mass_banner
/* -------------------------------------------------- */

.hero_mass_thumbnail .slick-track { transform: unset !important; }
.hero_mass_thumbnail .slick-list { overflow: visible; }
.hero_mass_thumbnail img { cursor: pointer; }

@media screen and (min-width: 700px), print {
.hero_mass_banner { position: relative; }
.hero_mass_thumbnail { margin-top: 25px; padding-left: calc((100% - (320px * 2) - 1em) / 2); }
/* .hero_mass_thumbnail { margin-top: 25px; padding-left: calc((100% - (320px * 3) - 2em) / 2); } */
.hero_mass_thumbnail img { width: 320px; }
.hero_mass_thumbnail .slick-slide { position: relative; width: 320px !important; }
.hero_mass_thumbnail .slick-slide.slick-current::after { content: ""; position: absolute; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); top: -10px; left: calc((100% - 20px) / 2); width: 20px; height: 10px; background: #bbbbbb; overflow: visible; }
.hero_mass_thumbnail_item:not(:first-child) { margin-left: 1em; }
}

@media screen and (min-width: 1920px), print {
.hero_mass_thumbnail { position: absolute; top: 0; right: calc(((100% - 1200px) / 2) - 320px - 25px); margin-top: 0; padding-left: 0; }
.hero_mass_thumbnail img { margin-top: 25px; }
.hero_mass_thumbnail .slick-slide { float: none; }
.hero_mass_thumbnail_item:not(:first-child) { margin-left: 0; }
.hero_mass_thumbnail .slick-slide.slick-current::after { content: ""; position: absolute; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); left: -10px; top: calc((100% - 20px) / 2); width: 10px; height: 20px; background: #bbbbbb; overflow: visible; }
}

@media only screen and (max-width: 699px) {
.hero_mass_thumbnail { margin-top: 8px; }
.hero_mass_thumbnail .slick-slide { position: relative; margin-left: 5px; width: calc((100% - 20px) / 3) !important;  }
.hero_mass_thumbnail .slick-slide.slick-current::after { content: ""; position: absolute; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); top: -6px; left: calc((100% - 20px) / 2); width: 12px; height: 6px; background: #bbbbbb; overflow: visible; }
}