@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);
}

/* ------------------------------------------------
   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);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 画像専用バージョン */
.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: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.8s ease;
}
.hover-zoom--card:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* =========================
  Marker underline (reusable)
  使い方：
    <span class="c-markerUnderline">テキスト</span>
    伸ばすとき：.is-show を付与
========================= */
.c-markerUnderline{
  /* マーカー色（必要なら上書き） */
  --marker-color: rgb(255, 232, 2);
  /* マーカー位置（%を変えると太さ/位置が変わる） */
  --marker-stop: 68%;
  /* アニメ速度 */
  --marker-duration: 3s;

  background: linear-gradient(transparent var(--marker-stop), var(--marker-color) 0%);
  display: inline;
  padding-bottom: 2px;

  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--marker-duration);
}

.c-markerUnderline.is-show{
  background-size: 100% 100%;
}

.btn-press {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--color-main);
  background: #fff;

  /* 盛り上がり */
  box-shadow: 3px 3px 0 var(--color-main);

  /* アニメ */
  transition: transform .15s ease, box-shadow .15s ease;
}

.box-shadow{
  border-radius: 10px;
  border: 3px solid var(--color-main);
  background: #fff;

  /* 盛り上がり */
  box-shadow: 2px 2px 0 var(--color-main);
}

.btn-press:hover {
  /* ちょい沈む */
  transform: translateY(4px);
  box-shadow: 3px 2px 0 var(--color-main);
}

.btn-press:active {
  /* 押し切る */
  transform: translateY(6px);
  box-shadow: 3px 2px 0 var(--color-main);
}