/* KADAN Scroll Fade
   opacity と translate（個別プロパティ）のみ使用 → テーマの transform（ホバー拡大・縦書き中央寄せ等）と衝突しません */
body .wkf-item{
  opacity:0;
  translate:0 32px;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), translate 1s cubic-bezier(.22,.61,.36,1);
}
body .wkf-item.wkf-in{
  opacity:1;
  translate:none; /* 0 0 だと重なり順の基準（スタッキングコンテキスト）が生まれ、画像が上に被さるため none にする */
}
/* 画像は少し大きめの動き */
body .wkf-item.wkf-img{ translate:0 48px; }
body .wkf-item.wkf-img.wkf-in{ translate:none; }

/* 画像に重なる文字（タイトル等）は、フェード中の画像より常に手前に表示 */
.p-block03__header-title,
.p-block04__item-content-inner,
.p-index-section__content-desc-inner,
.p-page-header__headline,
.p-section-header__headline{
  z-index:1;
}

/* トップページ：右端のサイドボタンをスクロールに追従（画面右に固定表示）
   ・テーマ標準は position:absolute（メインビジュアルと一緒に流れる）なので fixed に変更
   ・上下位置は標準のまま画面中央（top:50% + translateY(-50%) はテーマ側の指定を継承）
   ・z-index はヘッダー/ページトップ(99)より下に。スマホ幅(991px以下)の非表示もテーマ標準のまま */
.p-index-slider__nav{
  position:fixed;
  top:50%;
  right:0;
  z-index:98;
}

/* スマホ表示のみ：フッターメニューを「横3列・中央揃え」にし、メニュー名の間に
   「スペース ｜ スペース」を入れる（テーマ標準のスマホ切替幅 767px に合わせています） */
@media (max-width:767px){
  .p-footer-nav{
    display:grid;
    grid-template-columns:repeat(6,auto);   /* 1項目＝2マス。3項目で折り返す（最終行を中央寄せにするため6分割） */
    justify-content:center;                  /* 3列のまとまりを中央に */
    align-items:center;
    max-width:100%;
    text-align:center;
  }
  .p-footer-nav > li{
    grid-column:span 2;
    position:relative;
    padding:0 1.1em;                         /* 線とメニュー名の間のスペース（左右） */
    text-align:center;                       /* 縦線に挟まれた範囲の中央にメニュー名を表示 */
  }
  /* 最終行が1つだけ／2つだけのときも中央に寄せる */
  .p-footer-nav > li:last-child:nth-child(3n+1){ grid-column:3 / span 2; }
  .p-footer-nav > li:nth-last-child(2):nth-child(3n+1){ grid-column:2 / span 2; }
  /* 区切り線：各行の2・3列目の左端に、文字の流れとは無関係に絶対配置（名前の中央揃えを崩さない） */
  .p-footer-nav > li:nth-child(3n+2)::before,
  .p-footer-nav > li:nth-child(3n)::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:1em;
    margin:-.5em 0 0;
    background:currentColor;
    opacity:.6;
  }
  .p-footer-nav > li:nth-child(3n+1)::before{ content:none; }
}

@supports not (translate:0 0){
  body .wkf-item,body .wkf-item.wkf-img{ translate:none; }
}

@media (prefers-reduced-motion:reduce){
  body .wkf-item{ opacity:1; translate:none; transition:none; }
}
