@charset "UTF-8";
body, html { margin:0; padding:0; font-family:'Zen Old Mincho',"Hiragino Mincho ProN","Yu Mincho",serif; background-color:#ffffff; color:#1F1F1F; }
img { max-width:100%; height:auto; vertical-align:bottom; }
.u-desktop { display:inline; }
@media (max-width:768px){ .u-desktop{ display:none; } }

/* PC時は改行させない */
br.u-sp-br {
  display: none;
}

@media (max-width: 768px) {
  /* スマホ時のみ改行として機能させる */
  br.u-sp-br {
    display: block; 
  }
}

/* =========================================================
   [ 共通 ] View More / MORE リンク（シンプル矢印・Action Box統一版）
   ・テキストの下にシンプルな横矢印
   ・ホバーで矢印が少し右へ動く（Action Box と同じ挙動・イージング）
   ・デフォルトは白（暗い背景用）。明るい背景では .is-dark を付与
========================================================= */
.view-more {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  text-decoration: none;
  width: 189px;
  position: relative;
}

.view-more-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

/* テキスト（MORE等）は新デザインでは非表示 */
.view-more .text {
  display: none;
}

/* 旧デザインの矢印画像は使わないので非表示（マークアップは温存） */
.view-more .arrow {
  display: none;
}

/* 矢印の器：旧 .view-more-lines を転用 */
.view-more-lines {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
}

/* 矢印の軸（横線）：旧 .line-d を転用 */
.view-more .line-d {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform: translateY(-50%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 常時アニメ（パターン4：ヘッド・パルス）--- */
/* 軸はうっすら常設し、その上を濃い線が「満ちて引く」。濃い線は ::before で描画。
   ベースの薄さは opacity ではなく背景色のアルファで表現（opacityだと子の::beforeまで薄くなるため）。 */
.view-more .line-d {
  background-color: rgba(255, 255, 255, 0.25); /* 白ベースを薄く */
}
.view-more.is-dark .line-d {
  background-color: rgba(9, 9, 9, 0.25); /* is-dark は黒ベースを薄く */
}
.view-more .line-d::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff; /* 濃い線（デフォルト白背景=暗い所用） */
  transform: scaleX(0);
  transform-origin: left center;
  animation: viewMoreDraw 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
/* is-dark（明るい背景）では濃い線を黒に */
.view-more.is-dark .line-d::before {
  background-color: #090909;
}

@keyframes viewMoreDraw {
  0%   { transform: scaleX(0); transform-origin: left center; }
  40%  { transform: scaleX(1); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: right center; }
  90%  { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* 矢じり（右端の「>」）：旧 .line-w を転用 */
.view-more .line-w {
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  background-color: transparent;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  /* 常時アニメ（先端を軸の完成に連動して押し出す） */
  animation: viewMoreHead 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* 矢じりのパルス：既存 transform(translateY -50% / rotate45) を保持しつつ X を足す */
@keyframes viewMoreHead {
  0%, 30%   { transform: translateY(-50%) translateX(0) rotate(45deg); }
  40%       { transform: translateY(-50%) translateX(4px) rotate(45deg); }
  50%, 100% { transform: translateY(-50%) translateX(0) rotate(45deg); }
}

/* ホバー：常時アニメを一時停止するだけ（右への移動は行わない） */
.view-more:hover .line-d::before,
.view-more:hover .line-w {
  animation-play-state: paused;
}
/* ホバー中、満ち引きの濃い線は完成状態で見せる（軸がフルに見えた状態で静止） */
.view-more:hover .line-d::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- 明るい背景用（is-dark）：文字・矢印を黒に --- */
.view-more.is-dark .text { color: #090909; }
.view-more.is-dark .arrow { filter: brightness(0); }
.view-more.is-dark .line-d { background-color: rgba(9, 9, 9, 0.25); }
.view-more.is-dark .line-w { border-color: #090909; }

/* --- 中央寄せ・ギャラリー用（is-center） --- */
.view-more.is-center {
  width: 163px;
  align-items: center;
}
.view-more.is-center .view-more-top {
  justify-content: center;
}

/* アクセシビリティ：モーション低減設定では常時アニメを停止（静的な矢印に） */
@media (prefers-reduced-motion: reduce) {
  .view-more .line-d::before,
  .view-more .line-w {
    animation: none !important;
  }
  .view-more .line-d::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}


/* ダミーの余白用（後で消してOKです） */
.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  background-color: #111;
}

/* =========================================================
   [ 共通 ] テキストアニメーション（サイト内2種で統一）
   A) .js-reveal-heading … 見出し：その場でふわっと（フェード＋わずかな拡大 scale 0.96→1.0）
   B) .js-reveal-lines   … 本文：各行(.reveal-line)が1行ずつ順に浮き上がる
   どちらも common.js が可視化時に .is-visible を付与して発火する。
========================================================= */

/* ---- A) 見出しリビール ---- */
/* ---- A) 見出しリビール：その場でふわっと（フェード＋わずかな拡大）----
   本文B（下から上へスライド）と動きの種類を変えて区別する。 */
.js-reveal-heading {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center center;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
  will-change: opacity, transform;
}
.js-reveal-heading.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- B) 本文リビール（行ごと） ---- */
.js-reveal-lines .reveal-line {
  display: inline-block;   /* transform を効かせるため */
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* 可視化時：行ごとに 0.12s ずつ遅延（--i は common.js が付与。br 混在でも崩れない） */
.js-reveal-lines.is-visible .reveal-line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 0.12s);
}

/* ---- アクセシビリティ：モーション低減では即時表示 ---- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-heading {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-reveal-lines .reveal-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}