@charset "UTF-8";
/* V7.4: WordPress版に近いスライド・固定キャッチコピーの独立CSS。
   他のページは変更しません。アニメーション時間は JS の定数と一致させること。 */
.wp-like-mv { position:relative; }
.wp-like-mv .mv-top__wp { position:relative; }
.wp-like-mv .mv-top__slider {
  position:relative;
  height:clamp(562px,37.46vw,720px);
  overflow:hidden;
  isolation:isolate;
}
.wp-like-mv .mv-top__item {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  z-index:1;
  transition:opacity 4000ms ease-in-out,visibility 0s linear 4000ms;
  pointer-events:none;
}
.wp-like-mv .mv-top__item.is-active {
  opacity:1;
  visibility:visible;
  z-index:2;
  pointer-events:auto;
  transition:opacity 4000ms ease-in-out,visibility 0s;
}
.wp-like-mv .mv-top__item:first-child:not(.is-active) {z-index:1}
.wp-like-mv .mv-top__img {
  opacity:1;
  visibility:visible;
  transition:none;
  height:100%;
}
.wp-like-mv .mv-top__img:before {display:none;}
.wp-like-mv .mv-top__img > picture {
  position:static;
  display:block;
  width:100%;
  height:100%;
}
.wp-like-mv .mv-top__img picture img {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
}
/* キャッチコピーは画像スライダーの外側に固定する。
   登場アニメーションはページ表示時の一回だけ。写真切り替え時には再実行しない。 */
.wp-like-mv .mv-top__content {
  z-index:5;
  pointer-events:none;
}
.wp-like-mv .mv-top__ttl {
  margin:0;
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition:none;
  animation:mv-caption-entrance 3000ms ease-out 800ms both;
}
@keyframes mv-caption-entrance {
  from { opacity:0; transform:translateX(-8%); }
  to   { opacity:1; transform:translateX(0); }
}
.wp-like-mv .mv-top__ttl .txt-lg {font-size:clamp(36px,5.2vw,80px);line-height:1.14;}
.wp-like-mv .mv-top__ttl .txt-sm {font-size:clamp(13px,1.15vw,18px);line-height:1.65;}
.wp-like-mv__dots {
  display:none;
  position:absolute;
  z-index:8;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  gap:9px;
  align-items:center;
}
.wp-like-mv__dot {
  cursor:pointer;
  appearance:none;
  border:0;
  border-radius:0;
  padding:0;
  width:42px;
  height:7px;
  background:rgba(255,255,255,.78);
  box-shadow:0 0 1px rgba(0,0,0,.15);
  transition:background-color 180ms ease;
}
.wp-like-mv__dot.is-active {background:#0ad3f1;}
.wp-like-mv__dot:focus-visible {outline:3px solid #023289;outline-offset:4px;}
@media (max-width:834px) {
  .wp-like-mv .mv-top__slider {height:577px;}
  .wp-like-mv .mv-top__img {width:100%;border-radius:0;}
  .wp-like-mv .mv-top__img picture img {height:100%;min-height:0;}
  .wp-like-mv .mv-top__content {z-index:5;}
  .wp-like-mv .mv-top__ttl .txt-lg {font-size:clamp(32px,9vw,55px);margin-bottom:8px;letter-spacing:1px;}
  .wp-like-mv .mv-top__ttl .txt-sm {font-size:clamp(12px,3.4vw,16px);}
  .wp-like-mv__dots {display:flex;}
}

/* V7.1: 自動切り替えの停止・再生操作 */
.wp-like-mv__toggle {
  position:absolute;
  z-index:10;
  right:24px;
  bottom:22px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:4px;
  background:rgba(0,39,89,.82);
  color:#fff;
  padding:8px 13px;
  min-width:64px;
  line-height:1.35;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
}
.wp-like-mv__toggle:focus-visible {outline:3px solid #0ad3f1;outline-offset:3px;}
@media (max-width:834px) {
  /* スマホの下部ドットと重ならない位置 */
  .wp-like-mv__toggle {right:15px;bottom:50px;font-size:12px;min-width:54px;padding:6px 9px;}
}

/* V7.2: WP版と同様のフェードをOSの低減設定にかかわらず適用。
   利用者は「停止／再生」ボタンで切り替えを制御できます。 */