@charset "UTF-8";
/* ==========================================================================
   top.css — トップページ固有。build/pages/top.py とセットで使う。
   元 style.css は編集せず、ここで上書きする。
     1. MV 画像切替 ........ mv.js (setInterval 5.5s + .active) → @keyframes + animation-delay
     2. サービススライダー .. slick → scroll-snap (+ 対応ブラウザでは CSS ネイティブの矢印/ドット)
                              自動再生・無限ループ・矢印/ドットの同期は slider.js が .is-js を付けて担当
     3. ニュース絞り込み .... news.js → :has(input[name=category]:checked)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MV: 5 枚 × 5.5s = 27.5s で 1 周。各枚は --i (0〜4) × 5.5s 遅れて開始。
   元 CSS: picture { opacity:0; transform:scale(1.05); transition: opacity 1s, transform 6s }
           picture.active { opacity:1; transform:scale(1) }  picture:first-child { opacity:1 }
   1s = 3.6364%, 5.5s = 20%, 6s = 21.8182%, 6.5s = 23.6364% (27.5s 基準)
   -------------------------------------------------------------------------- */
.mv__img picture.mv__pic {
  transition: none;
  animation: top-mv-fade 27.5s ease infinite both;
  animation-delay: calc(var(--i, 0) * 5.5s);
}
/* 1 枚目は元 CSS どおり常に opacity:1 (他の画像の下敷き)。ズームだけ周期的に行う */
.mv__img picture.mv__pic:first-child {
  animation-name: top-mv-zoom;
}
@keyframes top-mv-fade {
  0%       { opacity: 0; transform: scale(1.05); }
  3.6364%  { opacity: 1; }
  20%      { opacity: 1; }
  21.8182% { transform: scale(1); }
  23.6364% { opacity: 0; }
  100%     { opacity: 0; transform: scale(1.05); }
}
@keyframes top-mv-zoom {
  0%       { transform: scale(1.05); }
  21.8182% { transform: scale(1); }
  100%     { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .mv__img picture.mv__pic { animation: none; }
  .mv__img picture.mv__pic:first-child { transform: none; }
}

/* --------------------------------------------------------------------------
   2. サービススライダー
   slick の設定: 568px 幅 (≤1280: 480px)、左右 margin 32px (≤1280: 16px)、
   centerMode + .service__item{translateX(-320px)} → 「現在のカード」の中心が 50% - 320px。
   ここでは横スクロール + scroll-snap で再現する。現在のカードの左端位置は
   各カードの scroll-margin-left で指定 (cqw = .service の幅基準。slider.js もこの値を読む)。
   container-type はレイアウト包含を伴うので、スライダー自身ではなく親の .service に付ける
   (スライダーに付けると position:fixed の ::scroll-button の包含ブロックがスライダーになり anchor() が効かない)。
   -------------------------------------------------------------------------- */
.service {
  container-type: inline-size;
}
.service__slider {
  --top-card-w: 568px;
  --top-gap: 64px;
  --top-shift: 320px;
  display: flex;
  align-items: stretch;            /* カードの高さを最大値に揃える (元は JS で計測) */
  gap: var(--top-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  isolation: isolate;              /* .service__card::after (z-index:-1 の影) をスライダー内で描画 */
  /* JS 無効時に先頭/末尾のカードも所定位置まで来られるよう左右に余白 */
  padding: 40px max(0px, calc(50% + var(--top-shift) - 1.5 * var(--top-card-w) - var(--top-gap))) 40px
           max(0px, calc(50% - var(--top-shift) - var(--top-card-w) / 2));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
}
.service__slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.service__slider .service__item {
  flex: 0 0 var(--top-card-w);
  width: var(--top-card-w);
  /* 既定の min-width:auto だと .service__img (width:320px) + カード padding の min-content (≈368px) が
     下限になり、SP でカードが枠からはみ出す。basis どおりの幅にするため 0 に */
  min-width: 0;
  height: auto;
  transform: none;
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-margin-left: max(0px, calc(50cqw - var(--top-shift) - var(--top-card-w) / 2));
}
.service__slider .service__card {
  flex: 1;
  height: auto;
}
@media screen and (max-width: 1280px) {
  .service__slider {
    --top-card-w: 480px;
    --top-gap: 32px;
  }
}
/* ≤850: 2 枚表示 (slidesToShow 2, centerPadding 0, variableWidth false) */
@media screen and (max-width: 850px) {
  .service__slider {
    --top-gap: 20px;
    padding: 40px 10px;
  }
  .service__slider .service__item {
    flex-basis: calc((100% - var(--top-gap)) / 2);
    width: auto;
    scroll-margin-left: 10px;
  }
}
/* ≤590: 1 枚表示 */
@media screen and (max-width: 590px) {
  .service__slider .service__item {
    flex-basis: 100%;
  }
}
@media screen and (max-width: 450px) {
  .service__slider {
    padding-bottom: 32px;
  }
}

/* --- JS 有効時 (slider.js が .is-js と矢印/ドットを追加) --- */
.service__slider.is-js {
  scrollbar-width: none;
}
.service__slider.is-js::-webkit-scrollbar {
  display: none;
}
.service__nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  margin-top: 16px;
}
.service__arrow {
  position: absolute;
  top: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  transition: 0.3s;
}
.service__arrow:hover {
  opacity: 0.7;
}
.service__arrow:focus-visible,
.service__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.service__arrow--prev {
  left: calc(50% - 216px);
  background-image: url("../img/btn_prev.svg");
}
.service__arrow--next {
  right: calc(50% - 216px);
  background-image: url("../img/btn_next.svg");
}
.service__dots {
  display: flex;
  gap: 16px;
}
.service__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s;
}
.service__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.service__dot[aria-current="true"] {
  background: #fff;
}
@media screen and (max-width: 850px) {
  .service__arrow--prev { left: calc(50% - 180px); }
  .service__arrow--next { right: calc(50% - 180px); }
}
@media screen and (max-width: 450px) {
  .service__nav {
    height: 40px;
    margin-top: 0;
  }
  .service__arrow {
    width: 40px;
    height: 40px;
  }
  .service__arrow--prev { left: 0; }
  .service__arrow--next { right: 0; }
}

/* --- JS 無効時: CSS ネイティブのカルーセル (::scroll-button / ::scroll-marker, Chrome 135+) ---
   非対応ブラウザでは細いスクロールバー + スワイプ/トラックパッドで手動スクロール */
@supports (scroll-marker-group: after) {
  .service__slider:not(.is-js) {
    anchor-name: --top-service-slider;
    scroll-marker-group: after;
    scrollbar-width: none;
  }
  .service__slider:not(.is-js)::scroll-marker-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 56px;
    margin-top: 16px;
  }
  .service__slider:not(.is-js) .service__item::scroll-marker {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .service__slider:not(.is-js) .service__item::scroll-marker:target-current {
    background: #fff;
  }
  .service__slider:not(.is-js)::scroll-button(*) {
    position: fixed;
    position-anchor: --top-service-slider;
    top: calc(anchor(bottom) + 16px);
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: transparent center / contain no-repeat;
    cursor: pointer;
    transition: 0.3s;
  }
  .service__slider:not(.is-js)::scroll-button(left) {
    content: "" / "前へ";
    left: calc(anchor(center) - 216px);
    background-image: url("../img/btn_prev.svg");
  }
  .service__slider:not(.is-js)::scroll-button(right) {
    content: "" / "次へ";
    left: calc(anchor(center) + 160px);
    background-image: url("../img/btn_next.svg");
  }
  .service__slider:not(.is-js)::scroll-button(*):hover { opacity: 0.7; }
  .service__slider:not(.is-js)::scroll-button(*):disabled { opacity: 0.3; cursor: default; }
  @media screen and (max-width: 850px) {
    .service__slider:not(.is-js)::scroll-button(left)  { left: calc(anchor(center) - 180px); }
    .service__slider:not(.is-js)::scroll-button(right) { left: calc(anchor(center) + 124px); }
  }
  @media screen and (max-width: 450px) {
    .service__slider:not(.is-js)::scroll-marker-group { height: 40px; margin-top: 0; }
    .service__slider:not(.is-js)::scroll-button(*) { top: anchor(bottom); width: 40px; height: 40px; }
    .service__slider:not(.is-js)::scroll-button(left)  { left: anchor(left); }
    .service__slider:not(.is-js)::scroll-button(right) { left: calc(anchor(right) - 40px); }
  }
}

/* --------------------------------------------------------------------------
   3. ニュース: top.py が「すべて」+ 各カテゴリの先頭 4 件を出力し、
   li[data-show] にその記事が表示されるビュー (all / service / event / info) を持たせている。
   :has 非対応ブラウザでは「すべて」の 4 件を表示 (絞り込みは効かない)。
   -------------------------------------------------------------------------- */
.news .news__links > .news__link:not([data-show~="all"]) {
  display: none;
}
@supports selector(:has(*)) {
  .news .news__links > .news__link {
    display: none;
  }
  .news__wrapper:has(input[name="category"][value="すべて"]:checked) .news__link[data-show~="all"],
  .news__wrapper:has(input[name="category"][value="サービスニュース"]:checked) .news__link[data-show~="service"],
  .news__wrapper:has(input[name="category"][value="イベント・セミナー"]:checked) .news__link[data-show~="event"],
  .news__wrapper:has(input[name="category"][value="お知らせ"]:checked) .news__link[data-show~="info"] {
    display: block;
  }
}