/* ============================================================
   MIRAI メインビジュアル
   design-preview/style.css の .hero / .hero-slider 系を移植。
   数値は参照実装の実測値をそのまま使う。
   ============================================================ */
.mj-hero {
  background: #e7f6ff;
}

/* 読み上げ・検索エンジン向けの見出し（画面には出さない） */
.mj-hero__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mj-hero__slider {
  position: relative;
  display: block;
  background: #e7f6ff;
}

/* 参照 .hero / .hero-slider .hero{min-height:720px} */
.mj-hero__stage {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
}

/* ---- 背景（水） ---- */
.mj-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.mj-hero__bg-image,
.mj-hero__bg img {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: calc(100% + 160px);
  object-fit: cover;
  opacity: 0.65;
}

/* 参照 .hero:after */
.mj-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(249, 253, 255, 0.94),
    rgba(238, 249, 255, 0.55) 53%,
    rgba(212, 239, 253, 0.18)
  );
}

/* ---- スライド ---- */
.mj-hero__viewport {
  position: relative;
}

.mj-hero__slide {
  display: grid;
  grid-template-columns: 51% 49%;
  min-height: 720px;
  outline: none;
}

.mj-hero__viewport .mj-hero__slide:not(:first-child) { display: none; }
.mj-hero__viewport .mj-hero__slide.is-active { display: grid; }
.mj-hero__viewport .mj-hero__slide[hidden] { display: none !important; }

/* 参照 @keyframes hero-enter{from{opacity:.45}to{opacity:1}} */
.mj-hero__slide.is-active {
  animation: mj-hero-enter 0.55s ease both;
}

.mj-hero--no-fade .mj-hero__slide.is-active { animation: none; }

@keyframes mj-hero-enter {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-hero__slide.is-active { animation: none; }
}

/* ---- 左：コピー（参照 .hero-copy{padding:80px 10% 85px 11%}） ---- */
.mj-hero__copy {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 10% 85px 11%;
  min-width: 0;
}

.mj-hero__title {
  font-size: clamp(32px, 3.3vw, 54px);
  line-height: 1.85;
  letter-spacing: 0.1em;
  margin: 4px 0 25px;
  color: #103e60;
}

.mj-hero__body {
  max-width: 430px;
  font-size: 17px;
  line-height: 2.1;
}

.mj-hero__body p { color: #3c627d; }
.mj-hero__body > :last-child { margin-block-end: 0; }

/* 参照 .hero-model */
.mj-hero__model {
  margin: 20px 0 0;
  font: 30px/1.5 Georgia, serif;
  letter-spacing: 0.04em;
  color: #103e60;
}

.mj-hero__secondary { margin-block-start: 22px; }

/* ---- 右：写真（参照 .hero-image） ---- */
.mj-hero__visual {
  position: relative;
  margin: 42px 42px 42px 0;
  min-height: 590px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 25px 65px #14527817;
}

.mj-hero__media {
  position: absolute;
  inset: 0;
}

.mj-hero__media-image,
.mj-hero__media img {
  position: absolute;
  top: -45px;
  width: 100%;
  height: calc(100% + 90px);
  object-fit: cover;
  object-position: center;
}

.mj-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #07334b70, transparent 35%);
}

.mj-hero__caption {
  position: absolute;
  bottom: 28px;
  left: 34px;
  z-index: 1;
  color: #fff;
  font: 11px Arial, sans-serif;
  letter-spacing: 0.2em;
}

.mj-hero__number {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  color: #fff;
  font: 48px Georgia, serif;
}

/* ---- 操作バー（参照 .hero-controls） ---- */
.mj-hero__controls {
  position: relative;
  background: #e7f6ff;
}

.mj-hero__controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  padding: 0 4% 26px 5.6%;
}

/* 参照 .hero-pickers：上に2pxの線が入るタブ形式（丸いボタンではない） */
.mj-hero__tabs {
  display: flex;
  gap: 20px;
  min-width: 0;
}

.mj-hero__tab {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 180px;
  min-height: 52px;
  padding: 14px 8px;
  border: 0;
  border-top: 2px solid #b3d0e2;
  border-radius: 0;
  background: transparent;
  color: #506a7e;
  font: 15px "Noto Sans JP", sans-serif;
  text-align: left;
  cursor: pointer;
}

.mj-hero__tab[aria-pressed="true"],
.mj-hero__tab.is-active {
  border-top-color: #09629e;
  background: transparent;
  color: #09629e;
}

.mj-hero__tab-no {
  margin-right: 12px;
  font: 14px Georgia, serif;
}

.mj-hero__tab-badge {
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 2px;
  background: #09629e;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.mj-hero__arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mj-hero__count {
  margin-right: 14px;
  font: 14px Georgia, serif;
  letter-spacing: 0.1em;
  color: #506a7e;
}

.mj-hero__arrow {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #8db5cf;
  border-radius: 50%;
  background: transparent;
  color: #09629e;
  font: 23px Arial, sans-serif;
  cursor: pointer;
}

.mj-hero__arrow:hover { background: #d2eaf8; }

.mj-hero__controls button:focus-visible {
  outline: 3px solid #09629e;
  outline-offset: 5px;
}

/* 読み上げ用 */
.mj-hero__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- ボタン（参照 .btn） ---- */
.mj-hero a.mj-btn {
  background: #09629e;
  border-color: #09629e;
  color: #fff;
}

.mj-hero a.mj-btn:hover {
  background: #084b7b;
  border-color: #084b7b;
}

.mj-hero a.mj-textlink {
  color: #103e60;
}

/* ---- 1000px 以下 ---- */
@media (max-width: 1000px) {
  .mj-hero__copy { padding: 55px 8%; }
  .mj-hero__visual { margin: 28px 28px 28px 0; min-height: 560px; }
  .mj-hero__title { font-size: 36px; }
  .mj-hero__tab { min-width: 155px; }
}

/* ---- 760px 以下（参照：縦積み・写真が先） ---- */
@media (max-width: 760px) {
  .mj-hero__stage { min-height: 0; }

  .mj-hero__slide {
    display: flex;
    flex-direction: column;
    min-height: 0;
    grid-template-columns: none;
  }

  .mj-hero__viewport--image_first .mj-hero__visual { order: -1; }

  .mj-hero__visual {
    height: 350px;
    min-height: 350px;
    flex: none;
    width: calc(100% - 40px);
    margin: 20px 20px 0;
    box-shadow: 0 12px 28px #14527813;
  }

  .mj-hero__media img { object-position: 50% 62%; }

  .mj-hero__copy {
    min-height: 475px;
    padding: 38px 27px 48px;
  }

  .mj-hero__title { font-size: 35px; margin-top: 0; margin-bottom: 18px; }
  .mj-hero__copy .mj-eyebrow { font-size: 10px; margin-bottom: 18px; }
  .mj-hero__model { font-size: 25px; }
  .mj-hero__caption { left: 22px; bottom: 22px; font-size: 10px; }
  .mj-hero__number { font-size: 36px; }
  .mj-hero__bg img { opacity: 0.44; }

  .mj-hero__controls-inner {
    padding: 0 24px 28px;
    gap: 20px;
    flex-wrap: wrap;
  }

  .mj-hero__tabs { gap: 16px; width: 100%; }

  .mj-hero__tab {
    min-width: 0;
    flex: 1;
    font-size: 13px;
    padding: 14px 0;
  }

  .mj-hero__tab-no { margin-right: 5px; }
  .mj-hero__arrows { margin-left: auto; }
  .mj-hero__arrow { width: 46px; height: 46px; }
}

/* 設定欄で入れた改行をそのまま反映する */
.mj-hero__title {
  white-space: pre-line;
}