@charset "UTF-8";
/*---------------------------------------------
ティザー（teaser_index）PC：デザイン幅 1440px 基準
--u = 1440px幅で1px。1440px未満は画面幅に合わせて縮小、
1440px以上は等倍（px固定）で表示
---------------------------------------------*/
/*---------------------------------------------
メディアクエリー
---------------------------------------------*/
/*---------------------------------------------
共通リセット
---------------------------------------------*/
html {
  color: #000;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
  scroll-behavior: smooth;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

img {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.8s ease-in-out;
}
a:hover {
  transition: 0.8s ease-in-out;
  opacity: 0.7;
}

@media screen and (min-width: 769px) {
  .sp_none {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .sp_none {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .pc_none {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pc_none {
    display: block;
  }
}

.flexed {
  display: flex;
  flex-wrap: wrap;
}

.relative {
  position: relative;
}

/* FONT */
.boreal__regular {
  font-family: "boreal", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.boreal__bold {
  font-family: "boreal", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*---------------------------------------------
共通
---------------------------------------------*/
.eg {
  font-family: "din-1451-lt-pro", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.jp {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.js-reveal {
  opacity: 0;
}
.js-reveal[data-reveal^=fade] {
  will-change: opacity, transform, filter;
}

/*---------------------------------------------
FVスライダー（フェード・矢印なし・ページャーなし）
---------------------------------------------*/
.slides_fv {
  width: 100%;
  overflow: hidden;
}
.slides_fv .slick-slide {
  overflow: hidden;
}
.slides_fv .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.slides_fv .slick-slide img {
  display: block;
  width: 100%;
  transform: scale(1);
  transform-origin: center center;
}

.slides_fv.is-zoom .slick-slide img {
  animation: fvZoomLoop 16s ease-in-out infinite alternate;
}

@keyframes fvZoomLoop {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.3);
  }
}
/*---------------------------------------------
中央スライダー（フェード・矢印あり・ページャーあり）
---------------------------------------------*/
.slides_center_wrap {
  position: relative;
  width: 100%;
  background-color: #e4d9c6;
  transition: background-color 0.8s ease;
  background-image: url(../images/noise.png);
  background-repeat: repeat;
}
.slides_center_wrap .slick-arrow {
  z-index: 5;
  width: 30px;
  height: 30px;
  top: auto;
  bottom: 10px;
  transform: none;
}
.slides_center_wrap .slick-arrow::before {
  content: "";
  display: block;
  opacity: 1;
  position: absolute;
}
.slides_center_wrap .slick-prev {
  left: 10px;
}
.slides_center_wrap .slick-prev::before {
  bottom: 2%;
  left: 55%;
}
.slides_center_wrap .slick-next {
  right: 10px;
}
.slides_center_wrap .slick-next::before {
  top: 50%;
  right: 55%;
}

html:has(> body.teaser_index) {
  background: #fff linear-gradient(to bottom, #0086c5 50%, #ffe43f 50%) fixed;
}
@media screen and (max-width: 768px) {
  html:has(> body.teaser_index) {
    overscroll-behavior-y: none;
  }
}

.teaser_index {
  --u: max(calc(100vw / 1440), 0.8px);
}
@media screen and (min-width: 1440px) {
  .teaser_index {
    --u: 1px;
  }
}
.teaser_index {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.teaser_index .wrapper {
  flex: 1 0 auto;
  width: 100%;
}
.teaser_index .content_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.teaser_index .main_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #0086c5;
}
.teaser_index .main_visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, #0069ab 0%, #006bac 2%, #006aad 4%, #006cae 6%, #006cb0 8%, #006db1 10%, #006eb2 12%, #0070b2 14%, #0071b4 16%, #0071b4 18%, #0072b7 20%, #0072b7 22%, #0072b8 24%, #0173b9 26%, #0074b9 28%, #0075ba 30%, #0076bb 32%, #0076bc 34%, #0076bc 36%, #0076bc 38%, #0076bd 40%, #0077bc 42%, #0076bd 44%, #0077be 46%, #0077be 48%, #0078c0 50%, #0079c0 52%, #0079c0 54%, #0079c1 56%, #0079c1 58%, #007ac2 60%, #007ac2 62%, #007ac1 64%, #007ac1 66%, #007ac3 68%, #007ac3 70%, #0079c2 72%, #0079c1 74%, #0079c0 76%, #0078bf 78%, #0078bf 80%, #0078bd 82%, #0077bc 84%, #0076bc 86%, #0075bb 88%, #0074bb 90%, #0073b9 92%, #0072b8 94%, #0072b7 96%, #0070b4 98%, #0071b3 100%), linear-gradient(to bottom, #0083c8 0%, #0085c8 2%, #0087ca 4%, #0188c8 6%, #008aca 8%, #008ccb 10%, #008ecc 12%, #0090ce 14%, #0091ce 16%, #0092cf 18%, #0094d0 20%, #0095d0 22%, #0097d1 24%, #0098d2 26%, #0098d2 28%, #009bd3 30%, #009dd4 32%, #009cd4 34%, #019ed4 36%, #019ed4 38%, #019ed4 40%, #019ed5 42%, #00a1d5 44%, #00a0d4 46%, #00a1d5 48%, #00a0d5 50%, #00a1d5 52%, #00a0d5 54%, #00a0d4 56%, #00a1d4 58%, #00a1d6 60%, #00a0d6 62%, #00a0d5 64%, #019fd5 66%, #019ed5 68%, #019ed5 70%, #009cd4 72%, #009bd3 74%, #009bd3 76%, #0099d2 78%, #0098d1 80%, #0097cf 82%, #0097cf 84%, #0093cd 86%, #0092cd 88%, #0090cb 90%, #008cc9 92%, #0089c7 94%, #0087c4 96%, #0084c1 98%, #0082bf 100%);
  background-position: left top, right top;
  background-size: 50.5% 100%, 50.5% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.teaser_index .main_visual:not(.is-edge-ready):has(.main_canvas.is-drawn)::before {
  opacity: 1;
}
.teaser_index .main_img {
  --mv-w: calc(min(950px, 100%) * var(--mv-scale, 1));
  position: relative;
  width: var(--mv-w);
  margin-left: calc((100% - var(--mv-w)) / 2);
}
.teaser_index .main_img .main_canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% / (1 - 2 * var(--mv-inset, 0)));
  max-width: none;
  margin-left: calc(-100% * var(--mv-inset, 0) / (1 - 2 * var(--mv-inset, 0)));
  height: auto;
  aspect-ratio: var(--pc-ratio, 2880/2037);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.teaser_index .main_img .main_canvas.is-drawn {
  opacity: 1;
}
.teaser_index .main_img .main_canvas.is-instant {
  transition: none;
}
@media screen and (min-width: 951px) {
  .teaser_index .main_img .main_canvas {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1%, #000 99%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1%, #000 99%, transparent 100%);
  }
}
.teaser_index .main_logo {
  position: absolute;
  z-index: 2;
  left: 7.5%;
  top: 13.9421%;
  width: 27.1615%;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.teaser_index .main_img:has(.main_canvas.is-drawn) .main_logo {
  opacity: 1;
}
.teaser_index .main_img:has(.main_canvas.is-instant) .main_logo {
  transition: none;
}
.teaser_index .main_visual.is-edge-ready .main_img canvas.main_canvas {
  -webkit-mask-image: none;
  mask-image: none;
}
.teaser_index .main_img .main_side {
  position: absolute;
  top: 0;
  z-index: 2;
  display: block;
  max-width: none;
  aspect-ratio: auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  -webkit-mask-image: none;
  mask-image: none;
}
.teaser_index .main_img .main_side.is-drawn {
  opacity: 1;
}
.teaser_index .main_img .main_side.is-instant {
  transition: none;
}
.teaser_index .countdown {
  background: #ffe43f;
  color: #231815;
  text-align: center;
  padding: calc(var(--u) * 82) 0 0;
}
.teaser_index .countdown_date,
.teaser_index .countdown_num,
.teaser_index .countdown_colon,
.teaser_index .countdown_label {
  display: block;
  line-height: 1;
  letter-spacing: 0;
  font-size-adjust: cap-height 0.7;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}
.teaser_index .countdown_date {
  font-size: calc(var(--u) * 26.7);
  color: #3b80ad;
}
.teaser_index .countdown_timer {
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: calc(var(--u) * 50);
}
.teaser_index .countdown.is-counting .countdown_timer {
  opacity: 1;
}
.teaser_index .countdown_unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.teaser_index .countdown_num,
.teaser_index .countdown_colon {
  font-size: calc(var(--u) * 85.7);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.teaser_index .countdown_label {
  margin: calc(var(--u) * 29) calc(var(--u) * -200) 0;
  font-size: calc(var(--u) * 14.7);
}
.teaser_index .footer {
  background: #ffe43f;
  text-align: center;
  padding: calc(var(--u) * 54.6) 0 calc(var(--u) * 23);
  flex: 1 0 auto;
}
.teaser_index .footer_copyright {
  font-family: "helvetica-lt-pro", sans-serif;
  font-size: calc(var(--u) * 12);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #000;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}
.teaser_index .countdown.is-finished .countdown_num {
  opacity: 0.4;
}
.teaser_index {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.teaser_index .main_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.teaser_index .main_canvas {
  pointer-events: none;
}
.teaser_index .visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media screen and (max-width: 768px) {
  .teaser_index {
    --u: calc(100vw / 750);
    background: linear-gradient(to bottom, #007dc0 50%, #ffe43f 50%);
    min-height: 100lvh;
  }
  .teaser_index .main_visual {
    background: #007dc0;
  }
  .teaser_index .main_visual::before {
    content: none;
  }
  .teaser_index .main_img {
    width: 100%;
    margin-left: 0;
  }
  .teaser_index .main_img .main_canvas {
    width: 100%;
    margin-left: 0;
    aspect-ratio: var(--sp-ratio, 1500/2142);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .teaser_index .main_img .main_logo {
    left: 6.6667%;
    top: 5.3688%;
    width: 37.4667%;
  }
  .teaser_index .main_img .main_side {
    display: none;
  }
  .teaser_index .countdown {
    padding: calc(var(--u) * 62) 0 0;
  }
  .teaser_index .countdown_date {
    font-size: calc(var(--u) * 37.7);
  }
  .teaser_index .countdown_timer {
    margin-top: calc(var(--u) * 48);
  }
  .teaser_index .countdown_num,
  .teaser_index .countdown_colon {
    font-size: calc(var(--u) * 100.7);
  }
  .teaser_index .countdown_label {
    margin: calc(var(--u) * 27) calc(var(--u) * -200) 0;
    font-size: calc(var(--u) * 26.7);
  }
  .teaser_index .footer {
    padding: calc(var(--u) * 70.2) 0 calc(var(--u) * 86.5);
    padding-bottom: calc(calc(var(--u) * 86.5) + env(safe-area-inset-bottom, 0px));
  }
}

.is-protect-hidden .teaser_index .main_visual {
  visibility: hidden;
}

@media print {
  .teaser_index .main_visual,
  .teaser_index canvas {
    display: none !important;
  }
}/*# sourceMappingURL=style.css.map */