/**
* jifma_v3 main CSS（旧 style.css の上書き／追加分のみ）
*
* 旧 Jifma は Slick.js（jQuery 依存）で MV スライダーを実装していたが、
* jifma_v3 では CSS Grid stacking + Vanilla JS に置き換える。
* prefers-reduced-motion を尊重し、視覚刺激への配慮も組み込む。
*
* @package Jifma_v3
* @since 3.0.0
*/
/* ============================================
* Modern smooth scroll（旧 common.js の jQuery アニメ置換）
* ============================================ */
html {
scroll-behavior: smooth;
/* ヘッダー固定分のオフセット。レイアウトに合わせて調整 */
scroll-padding-top: var(--jifma-header-offset, 80px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================
* MV スライダー（メインビジュアル）
*
* 構造:
*
*
* - CSS Grid stacking で 3 枚を完全に重ねる
* - data-active がついている要素だけ opacity: 1
* - フェードのみ。reduced-motion ユーザにはトランジションなし
* ============================================ */
.mv-block {
position: relative;
overflow: hidden;
}
/*
* 旧 _top.scss は `.mv-list { opacity: 0 }` で初期化し、Slick が `.slick-initialized`
* クラスを付けた瞬間に表示する設計だった。
* vanilla 実装では Slick を使わないので、その「初期 opacity: 0」を打ち消す必要がある。
* セレクタは旧と同じ specificity (0,0,3) でこちらが後勝ち。
*/
.top .mv-block .mv-list {
opacity: 1;
transition: none;
}
.mv-list {
display: grid;
grid-template-areas: "stack";
list-style: none;
margin: 0;
padding: 0;
/* 旧 Slick が overrides していた width: 5000px などを無効化 */
width: 100%;
}
.mv-item {
grid-area: stack;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 800ms ease-in-out, visibility 0s linear 800ms;
/* 旧 .slick-slide のスタイルを上書き */
width: 100% !important;
position: relative !important;
left: auto !important;
top: auto !important;
float: none !important;
display: block !important;
}
.mv-item[data-active] {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity 800ms ease-in-out, visibility 0s linear 0s;
z-index: 1; /* ホバーやリンクをトップに */
}
@media (prefers-reduced-motion: reduce) {
.mv-item { transition: none; }
}
/* ============================================
* MV dots（旧 .slick-dots の代替）
* ============================================ */
/* 旧 slick-dots の見た目に合わせる：小さめの「•」ドット＋opacityでアクティブ表現。 */
.mv-dots {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.mv-dots li {
display: inline-flex;
margin: 0;
padding: 0;
list-style: none;
}
.mv-dot {
display: block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border: 0;
background: transparent;
color: #000;
font-size: 6px;
line-height: 20px;
text-align: center;
opacity: 0.25;
cursor: pointer;
transition: opacity 200ms ease;
-webkit-font-smoothing: antialiased;
}
/* 文字を持たない