@charset "UTF-8";
/* ================================================
   ANIMATION CSS COLLECTION
   （LaotourRadioテーマ共通用）
================================================ */

/* ------------------------------------------------
   1. Hover Button: 横から色が差し込むボタン
------------------------------------------------ */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.8em 2.2em;
  border: 2px solid var(--color-main, #87774a);
  color: var(--color-main, #87774a);
  background: transparent;
  overflow: hidden;
  transition: color 0.4s ease;
  z-index: 0;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-main, #87774a);
  z-index: -1;
  transition: width 0.4s ease;
}

.btn:hover {
  color: #fff;
}

.btn:hover::before {
  width: 100%;
}

/* ------------------------------------------------
   2. Fade-Up: スクロールでふわっと上に表示
------------------------------------------------ */
.fadeup {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------
   1-b. Slide-In X: 横スライド＋フェード
   使い方：要素に .slidein-x を付与（JSで監視）
------------------------------------------------ */
.slidein-x{
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}
.slidein-x.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------------
   1-c. Stagger-Up: 子要素を左→右（DOM順）にスライドアップ
   使い方：親に .js-stagger-up（任意で data-stagger-base / data-stagger-step）
------------------------------------------------ */
.js-stagger-up .stagger-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--stagger-delay, 0ms);
  will-change: transform, opacity;
}
.js-stagger-up.is-visible .stagger-item{
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------
   Wipe Text（ゆっくり版 + 初期表示で文字が見えない対策）
------------------------------------------------ */

/* デフォルト値（要素ごとに上書きOK） */
.wipe-text{
  --wipe-delay: 0ms;
  --wipe-step:  0ms;
  /* ★ ここを長く：全体の流れをゆっくりに */
  --wipe-dur: 1.25s;

  /* 出始めゆっくり / 引きは速め */
  --wipe-ease-in:  cubic-bezier(0.55, 0, 1, 1);
  --wipe-ease-out: cubic-bezier(0.1, 0, 0.35, 1);
}

/* 1行単位 */
.wipe-text .wipe-line{
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* ★ iOS/Safariで初期フレームがチラつくのを抑える */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 文字：初期は完全に隠す（clip + opacity の二重ロック） */
.wipe-text .wipe-inn{
  position: relative;
  z-index: 1;
  display: inline-block;

  color: #fff;
  -webkit-text-fill-color: #fff;

  /* 初期は見えない */
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  opacity: 0;

  text-shadow: 4px 4px 4px rgba(0 0 0 / 50%);

  will-change: clip-path, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 発火後は描画対象に戻す（透明のままにならないように） */
.wipe-text.is-wipe .wipe-inn{
  opacity: 1;
}

/* 白幕 */
.wipe-text .wipe-line::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  background-color: #fff;

  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* 発火（delayは全体 + 行ごとを合算） */
.wipe-text.is-wipe .wipe-line::before{
  animation: wipe-rect var(--wipe-dur) both;
  animation-delay: calc(var(--wipe-delay, 0ms) + var(--wipe-line-delay, 0ms));
}

.wipe-text.is-wipe .wipe-inn{
  /* ★ 文字は白幕より少し遅れて出すと「見えてしまう」事故が減る */
  animation: wipe-clip var(--wipe-dur) both;
  animation-delay: calc(var(--wipe-delay, 0ms) + var(--wipe-line-delay, 0ms) + 0.06s);
  animation-timing-function: cubic-bezier(0,0,.2,1);
}

/* 白幕：伸びを長く（ゆっくり）→ 引きを短く（速い） */
@keyframes wipe-rect{
  0%{
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation-timing-function: var(--wipe-ease-in);
  }
  /* ★ 伸び区間を増やす：ゆっくり流れていく */
  72%{
    transform: scaleX(1);
    transform-origin: 0 50%;
    animation-timing-function: var(--wipe-ease-out);
  }
  73%{
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }
  100%{
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

/* 文字：左→右にクリップ解除（透明→表示も含める） */
@keyframes wipe-clip{
  0%{
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  /* ★ 途中で確実に出す（初期フレームで見える/見えないの揺れを抑える） */
  25%{
    opacity: 1;
  }
  100%{
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* コンテナ側の影指定が競合する場合があるので無効化 */
.main-visual__title,
.main-visual__lead{
  text-shadow: none !important;
}

/* clip-path 非対応フォールバック */
@supports not (clip-path: inset(0 0 0 0)) {
  .wipe-text .wipe-inn{
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0;
  }
  .wipe-text.is-wipe .wipe-inn{
    animation: wipe-text-fallback 1.1s steps(1, end) forwards;
    animation-delay: calc(var(--wipe-delay, 0ms) + var(--wipe-line-delay, 0ms));
  }
  @keyframes wipe-text-fallback{
    0%,59%{ opacity: 0; color: transparent; -webkit-text-fill-color: transparent; }
    60%,100%{ opacity: 1; color: #fff; -webkit-text-fill-color: #fff; }
  }
}


/* motionを抑える設定 */
@media (prefers-reduced-motion: reduce){
  .fadeup,
  .fadein,
  .reveal img,
  .slidein-x,
  .js-stagger-up .stagger-item{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .wipe-text .wipe-line::before{
    display: none !important;
  }
  .wipe-text .wipe-inn{
    opacity: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}


/* ------------------------------------------------
   2. Fade-Up: スクロールでふわっと上に表示
------------------------------------------------ */
.fadein {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.is-visible {
  opacity: 1;
}

/* ------------------------------------------------
   3. Stylish Image Reveal: 画像がスタイリッシュに表示
------------------------------------------------ */
.reveal {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.reveal img {
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-main, #87774a);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.is-visible::before {
  transform: translateX(100%);
}

.reveal.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------
   4. Hover Zoom: ホバーでゆっくり拡大
------------------------------------------------ */

/* 汎用ホバー拡大クラス */
.hover-zoom {
  display: inline-block;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
}

.hover-zoom:hover {
  transform: scale(1.05);
}

/* 画像専用バージョン */
.hover-zoom--img img {
  transition: transform 0.8s ease;
  transform-origin: center center;
}

.hover-zoom--img:hover img {
  transform: scale(1.08);
}

/* やや強調されたカード用（カード自体は拡大せず、画像のみズーム） */
.hover-zoom--card{
  transition: box-shadow 0.6s ease, color 0.3s ease;
}
.hover-zoom--card:hover{
  color: var(--color-main);
  opacity: 1;
}

/* テキスト色は明示指定されているケースがあるので吸収 */
.hover-zoom--card:hover :where(h1,h2,h3,h4,h5,h6,p,span,li,dt,dd,small,strong,em){
  color: var(--color-main);
}

/* 画像領域はクリップして、imgだけズーム（picture対応） */
.hover-zoom--card :is(.top-businesses-img, .company__img, .businesses__intro-titleimg){
  overflow: hidden;
}

.hover-zoom--card :is(.top-businesses-img, .company__img, .businesses__intro-titleimg) :is(img){
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center center;
  display: block;
  width: 100%;
  height: auto;
}

.hover-zoom--card:hover :is(.top-businesses-img, .company__img, .businesses__intro-titleimg) img{
  transform: scale(1.08);
}

/* js-stagger-up：遅延待ち中は見えないように固定 */
.js-stagger-up.is-stagger-wait {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}

/* 子要素も念のため隠す（親のopacityだけで足りない場合があるため） */
.js-stagger-up.is-stagger-wait .stagger-item {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}

/* businesses-list：カードの背景ズーム（背景だけ拡大） */
.businesses-list .hover-zoom--card {
  position: relative;
  overflow: hidden; /* はみ出しを隠す（背景ズーム専用） */
  background-image: none !important; /* 既存のinline背景は使わない */
}

/* 背景レイヤー */
.businesses-list .hover-zoom--card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .6s ease;
  will-change: transform;
  z-index: 0;
}

/* 中身は前面へ */
.businesses-list .hover-zoom--card > a {
  position: relative;
  z-index: 1;
}

/* hover / focus（キーボード対応） */
.businesses-list .hover-zoom--card:hover::before,
.businesses-list .hover-zoom--card:focus-within::before {
  transform: scale(1.08);
}

/* optional：ちょい暗くして文字を読みやすくしたい場合 */
.businesses-list .hover-zoom--card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
  z-index: 0;
  pointer-events: none;
}