@charset "UTF-8";
/*--------------------------------------------------------------
*   トップページ専用スタイル（front-page.php / is_home() でのみ読み込み）
*   特集スライダーはSlick Carousel使用（temple踏襲）
--------------------------------------------------------------*/
/*--------------------------------------------------------------
*   Variables（仕様書10章：骨格ラフジュ工房／余白・画像比率・カート等kinarino準拠のトークン）
--------------------------------------------------------------*/
/* キーカラー（2026-08-10登録。用途はまだ未確定の箇所も含む） */
/*--------------------------------------------------------------
*   Mixin（temple踏襲）
--------------------------------------------------------------*/
.feature-slider {
  position: relative;
}
.feature-slider .slick-slide {
  outline: none;
}
.feature-slider {
  /* centerMode：中央（現在）以外のスライドは少しぼかして淡くし、クリックもできないようにする */
}
.feature-slider .slick-slide {
  filter: blur(3px);
  opacity: 0.85;
  pointer-events: none;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.feature-slider .slick-current {
  filter: none;
  opacity: 1;
  pointer-events: auto;
}
.feature-slider {
  /* ブロックが画面幅いっぱい（.top-block--slider）になったため、幅に連動するaspect-ratioではなく
     高さを500pxで固定する。.slick-slideはSlick本体のCSSでheight:100%になっているが、親に明確な
     高さが無いとこの100%は解決されないため、track/slideはその実寸を100%で受け継ぐ形にする。
     centerModeのcenterPaddingがlist幅に加算されないよう、box-sizingをborder-boxにする。
     SPでは.top-block--slider側で通常幅に戻すため、高さも元のaspect-ratio指定に戻す。 */
}
.feature-slider .slick-list {
  height: 500px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .feature-slider .slick-list {
    height: auto;
    aspect-ratio: 1140/500;
  }
}
.feature-slider .slick-track,
.feature-slider .slick-slide,
.feature-slider .slick-slide > div {
  height: 100%;
}

.feature-slide {
  position: relative;
  display: block !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ececec center/cover no-repeat;
}

/* Slick本体のslick-theme.cssが.slick-dotted.slick-slider（2クラス）にmargin-bottom:30pxを
   当てており、.feature-slider単体（1クラス）より詳細度が高く上書きできないため、
   同等以上の詳細度を持つセレクタで明示的に打ち消す（キャプションと直接くっつけるため） */
.feature-slider.slick-slider {
  margin-bottom: 0;
}

/* タイトル・抜粋（画像には重ねず、スライダー下の専用エリアに表示。仕様書3.3改訂：
   クライアント要望によりオーバーレイ表示を廃止、SPでの重なりも解消するため。
   背景は画像と同じ100%幅で隙間なく直接つなげ、テキストのみ.max-widthで内側に揃える） */
.feature-slider-caption {
  background: #511f1f;
  color: #fff;
  padding: 28px 0;
}
@media (max-width: 767px) {
  .feature-slider-caption {
    padding: 20px 0;
  }
}

.feature-slider-caption__title {
  margin: 0 0 8px;
  font-size: 20px;
}
@media (max-width: 767px) {
  .feature-slider-caption__title {
    font-size: 16px;
    margin-bottom: 6px;
  }
}

.feature-slider-caption__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.9;
}
@media (max-width: 767px) {
  .feature-slider-caption__excerpt {
    font-size: 12px;
  }
}

.feature-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  z-index: 5;
  font-size: 0;
}
.feature-slider .slick-arrow::before {
  font-family: inherit;
  font-size: 14px;
  color: #511f1f;
  opacity: 1;
}

.feature-slider .slick-prev {
  left: 14px;
}

.feature-slider .slick-prev::before {
  content: "‹";
}

.feature-slider .slick-next {
  right: 14px;
}

.feature-slider .slick-next::before {
  content: "›";
}

.feature-slider .slick-dots {
  bottom: 12px;
}
.feature-slider .slick-dots li button::before {
  font-size: 8px;
  color: #fff;
  opacity: 0.6;
}
.feature-slider .slick-dots li.slick-active button::before {
  opacity: 1;
}

/* GSAP フェードイン用初期状態 */
.js-fade-up {
  opacity: 0;
  transform: translateY(24px);
}