/* 正式なindex.htmlで使用するトップページスライダー用CSSです。 */
.slider-hero { background: var(--color-navy-dark); color: #fff; overflow: hidden; }
.slider-hero .carousel-inner { height: 500px; }
.slider-panel {
  background-color: var(--color-navy-dark);
  height: 500px;
  min-height: 500px;
  position: relative;
}
.slider-panel::before {
  content: "";
  inset: 0;
  position: absolute;
}
.slider-panel::after {
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  bottom: 0;
  content: "";
  height: 1px;
  left: max(1.25rem, calc((100% - 1320px) / 2));
  position: absolute;
  width: min(10rem, 24vw);
}
/* 背景装飾はリンクやカルーセル操作のクリックを受け取りません。 */
.slider-panel::before, .slider-panel::after { pointer-events: none; }
/* スライドごとの写真を使い、文字が読みやすい位置へ焦点を調整します。 */
.slider-panel::before { background-image: linear-gradient(90deg, rgba(9,31,49,.46) 0%, rgba(14,43,65,.34) 24%, rgba(14,43,65,.25) 42%, rgba(14,43,65,.09) 54%, rgba(14,43,65,.025) 70%, rgba(14,43,65,0) 100%), url("../images/hero/hero-slide-03.webp"); background-position: 48% 50%; background-repeat: no-repeat; background-size: cover; }
.slider-panel-corporate::before { background-image: linear-gradient(90deg, rgba(9,31,49,.58) 0%, rgba(14,43,65,.42) 28%, rgba(14,43,65,.24) 48%, rgba(14,43,65,.05) 72%, rgba(14,43,65,0) 100%), url("../images/hero/manta-slide-02.webp"); background-position: 50% 50%; }
.slider-panel-local::before { background-image: linear-gradient(90deg, rgba(9,31,49,.58) 0%, rgba(14,43,65,.42) 28%, rgba(14,43,65,.24) 48%, rgba(14,43,65,.05) 72%, rgba(14,43,65,0) 100%), url("../images/hero/sangosyou-slide-03.webp"); background-position: 50% 50%; }
.slider-copy { max-width: 50rem; text-shadow: 0 1px 3px rgba(5,24,38,.42); }
.slider-local-copy { transform: none; }
.slider-content .slider-local-heading { font-size: clamp(2.15rem, 3.6vw, 2.85rem); max-width: 50rem; }
.slider-local-lead { max-width: 52rem; }
.slider-content { align-items: center; display: flex; height: 100%; padding: clamp(4rem, 8vh, 5.5rem) 0; pointer-events: auto; position: relative; z-index: 3; }
.slider-content a { pointer-events: auto; position: relative; z-index: 1; }
.slider-content h2 {
  color: #fff;
  font-size: clamp(2.15rem, 3.6vw, 2.85rem);
  font-weight: 700;
  line-break: strict;
  line-height: 1.45;
  text-wrap: balance;
  word-break: normal;
}
/* 見出しは意味のまとまりごとに2行で表示します。 */
.slider-heading-line { display: block; width: fit-content; }

@media (min-width: 992px) {
  .slider-heading-line { white-space: nowrap; }
}

.slider-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.85; max-width: 46rem; }
.slider-content .eyebrow { color: #d6b56d !important; margin-bottom: 1.15rem !important; text-shadow: 0 1px 2px rgba(5,24,38,.48); }
.slider-content .slider-lead { margin-top: 1.35rem; }
.slider-content .slider-lead + .d-flex { margin-top: 1.65rem !important; }
.slider-content .btn { align-items: center; display: inline-flex; justify-content: center; min-height: 52px; min-width: 12.5rem; padding: .75rem 1.5rem; }
.slider-content .btn-gold { background-color: #c89b45; border-color: #c89b45; color: #0e2438; }
.slider-content .btn-gold:hover, .slider-content .btn-gold:focus { background-color: #d6b56d; border-color: #d6b56d; color: #0e2438; }
.slider-content .btn-outline-light { background: rgba(9,31,49,.18); }
.slider-content .btn-outline-light:hover { background: #fff; color: var(--color-navy-dark); }
.slider-content .btn:focus-visible, .carousel-play-control .btn:focus-visible, .slider-hero .carousel-control-prev:focus-visible, .slider-hero .carousel-control-next:focus-visible { box-shadow: 0 0 0 .25rem rgba(255,255,255,.9), 0 0 0 .45rem rgba(166,130,68,.95); outline: 0; }
.slider-hero .carousel-control-prev, .slider-hero .carousel-control-next { bottom: auto; height: 3rem; opacity: .72; top: 50%; transform: translateY(-50%); width: 3rem; z-index: 4; }
.slider-hero .carousel-control-prev:hover, .slider-hero .carousel-control-next:hover { opacity: 1; }
.slider-hero .carousel-indicators { bottom: 1.1rem; margin-bottom: 0; z-index: 5; }
.slider-hero .carousel-indicators [data-bs-target] { background-clip: content-box; background-color: #fff; border: 2px solid transparent; height: .65rem; margin-inline: .4rem; opacity: .65; padding-top: 1.9rem; width: 2.5rem; }
.slider-hero .carousel-indicators .active { background-color: var(--color-gold); opacity: 1; }
.carousel-play-control { bottom: .65rem; position: absolute; right: max(1rem, calc((100% - 1320px) / 2)); z-index: 6; }
.carousel-play-control .btn { color: var(--color-navy-dark); font-weight: 700; min-width: 7rem; }

/* Bootstrapのフェードだけを使い、動きを控えめにします。 */
.carousel-fade .carousel-item { transition-duration: .45s; }

/* 現在のスライドだけ、文字とプレースホルダーを順番に表示します。 */
.carousel-item .slider-animate { opacity: 0; transform: translateY(16px); }
.carousel-item.active .slider-animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
.carousel-item.active .slider-delay-1 { transition-delay: .10s; }
.carousel-item.active .slider-delay-2 { transition-delay: .18s; }
.carousel-item.active .slider-delay-3 { transition-delay: .26s; }
.carousel-item.active .slider-delay-4 { transition-delay: .34s; }

@media (max-width: 991.98px) {
  .slider-hero .carousel-inner, .slider-panel { height: 480px; min-height: 480px; }
  .slider-content { padding: 3.75rem 3rem; }
  .slider-panel::before { background-position: 52% 50%; }
  .slider-panel-corporate::before { background-position: 52% 50%; }
  .slider-panel-local::before { background-position: 54% 50%; }
  .slider-hero .carousel-control-prev, .slider-hero .carousel-control-next { width: 3rem; }
  .slider-local-copy { transform: none; }
}
@media (max-width: 575.98px) {
  .slider-hero .carousel-inner, .slider-panel { height: 500px; min-height: 500px; }
  .slider-content { padding: 2rem 1.25rem 4rem; }
  .slider-content h2 {
    font-size: clamp(1.6rem, 6.7vw, 2.05rem);
    line-height: 1.48;
    max-width: 100%;
  }
  .slider-content .slider-local-heading { font-size: clamp(1.6rem, 6.7vw, 2.05rem); }
  .slider-heading-line { max-width: 100%; }
  .slider-lead { font-size: 1rem; line-height: 1.75; }
  .slider-content .eyebrow { margin-bottom: .65rem !important; }
  .slider-content .slider-lead { margin-top: .7rem; }
  .slider-content .slider-lead + .d-flex { gap: .45rem !important; margin-top: .9rem !important; }
  .slider-content .btn {
    align-items: center;
    display: flex;
    font-size: 1rem;
    justify-content: center;
    line-height: 1.3;
    min-height: 46px;
    padding: .35rem 1.1rem;
    width: min(100%, 20rem);
    margin-inline: auto;
  }
  .slider-hero .carousel-indicators { bottom: 1.35rem; justify-content: flex-start; margin-left: 1.25rem; margin-right: 7.5rem; }
  .carousel-play-control { bottom: .45rem; right: .75rem; }
  .carousel-play-control .btn { font-size: .72rem; font-weight: 600; min-height: 44px; min-width: 5.75rem; padding: .25rem .4rem; }
  .slider-hero .carousel-control-prev, .slider-hero .carousel-control-next { display: none; }
  .slider-panel::before { background-image: linear-gradient(90deg, rgba(9,31,49,.50) 0%, rgba(14,43,65,.36) 28%, rgba(14,43,65,.26) 46%, rgba(14,43,65,.08) 64%, rgba(14,43,65,.01) 100%), url("../images/hero/hero-slide-03.webp"); background-position: 58% 50%; }
  .slider-panel-corporate::before { background-image: linear-gradient(90deg, rgba(9,31,49,.62) 0%, rgba(14,43,65,.48) 32%, rgba(14,43,65,.28) 52%, rgba(14,43,65,.08) 74%, rgba(14,43,65,.01) 100%), url("../images/hero/manta-slide-02.webp"); background-position: 48% 50%; }
  .slider-panel-local::before { background-image: linear-gradient(90deg, rgba(9,31,49,.62) 0%, rgba(14,43,65,.48) 32%, rgba(14,43,65,.28) 52%, rgba(14,43,65,.08) 74%, rgba(14,43,65,.01) 100%), url("../images/hero/sangosyou-slide-03.webp"); background-position: 58% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .carousel-item { transition: none; }
  .carousel-item .slider-animate,
  .carousel-item.active .slider-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}