@charset "UTF-8";

/* ==============================
  Tsukuba Owl Lions Club
  Animation
============================== */

/* Base */
.owl-anim {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.owl-anim.is-show {
  opacity: 1;
}

.owl-anim--fade {
  transform: none;
}

.owl-anim--up {
  transform: translateY(28px);
}

.owl-anim--up.is-show {
  transform: translateY(0);
}

.owl-anim--slide-left {
  transform: translateX(-32px);
}

.owl-anim--slide-left.is-show {
  transform: translateX(0);
}

/* Delay */
.owl-delay-1 { transition-delay: 0.08s; }
.owl-delay-2 { transition-delay: 0.16s; }
.owl-delay-3 { transition-delay: 0.24s; }
.owl-delay-4 { transition-delay: 0.32s; }
.owl-delay-5 { transition-delay: 0.4s; }

/* ==============================
  Card Spin Reveal
  Y軸・右回り70度でくるっと開く
============================== */

.owl-spin-reveal {
  perspective: 1200px;
}

.owl-spin-reveal .spin-reveal-item {
  opacity: 0;
  transform: rotateY(70deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.owl-spin-reveal .spin-reveal-item.is-spin-visible {
  animation: owlCardSpinReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--spin-delay, 0s);
}

@keyframes owlCardSpinReveal {
  0% {
    opacity: 0;
    transform: rotateY(70deg);
  }

  70% {
    opacity: 1;
    transform: rotateY(-6deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* ==============================
  Top Hero Animation
  1行目 → 2行目 → 3行目 → 10周年 → CTA左 → CTA右
============================== */

.owl-top-hero {
  --hero-delay-start: 0.2s;
  --hero-delay-gap: 0.44s;
}

/* 3行グラデーション帯 */
.owl-top-hero__copy .owl-top-hero__line {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.owl-top-hero__copy.is-show .owl-top-hero__line {
  animation: owlHeroLineFloatUp 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.owl-top-hero__copy.is-show .owl-top-hero__line:nth-child(1) {
  animation-delay: var(--hero-delay-start);
}

.owl-top-hero__copy.is-show .owl-top-hero__line:nth-child(2) {
  animation-delay: calc(var(--hero-delay-start) + var(--hero-delay-gap));
}

.owl-top-hero__copy.is-show .owl-top-hero__line:nth-child(3) {
  animation-delay: calc(var(--hero-delay-start) + var(--hero-delay-gap) * 2);
}

@keyframes owlHeroLineFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 10周年マーク */
.owl-top-hero__anniv.owl-anim {
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transform-origin: center center;
  will-change: opacity, transform, filter;
}

.owl-top-hero__anniv.owl-anim.is-show {
  animation: owlHeroAnnivFloatUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--hero-delay-start) + var(--hero-delay-gap) * 3);
}

@keyframes owlHeroAnnivFloatUp {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
    filter: drop-shadow(0 0 0 rgba(255, 241, 0, 0));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 18px rgba(255, 241, 0, 0.72));
  }
}

/* CTAボタン */
.owl-top-hero__buttons .owl-top-hero__button {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.owl-top-hero__buttons.is-show .owl-top-hero__button {
  animation: owlHeroButtonFloatUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.owl-top-hero__buttons.is-show .owl-top-hero__button:nth-child(1) {
  animation-delay: calc(var(--hero-delay-start) + var(--hero-delay-gap) * 4 + 0.3s);
}

.owl-top-hero__buttons.is-show .owl-top-hero__button:nth-child(2) {
  animation-delay: calc(var(--hero-delay-start) + var(--hero-delay-gap) * 5 + 0.3s);
}

@keyframes owlHeroButtonFloatUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================
  Motion Reduce
============================== */

@media (prefers-reduced-motion: reduce) {
  .owl-anim,
  .owl-anim--fade,
  .owl-anim--up,
  .owl-anim--slide-left,
  .owl-spin-reveal .spin-reveal-item,
  .owl-top-hero__copy .owl-top-hero__line,
  .owl-top-hero__anniv.owl-anim,
  .owl-top-hero__buttons .owl-top-hero__button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto;
  }
}


/* ==============================
  Top News Animation
  見出し → 表 → CTA の順に下からふわっと表示
============================== */

/* 初期状態 */
.owl-anim--news-up {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* is-show が付いたら、delayを待ってから表示 */
.owl-anim--news-up.is-show {
  animation: owlNewsFloatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 1. 見出し */
.owl-top-news__title.owl-anim--news-up.is-show {
  animation-delay: 0.1s;
}

/* 2. 表 */
.owl-top-news__list.owl-anim--news-up.is-show {
  animation-delay: 0.55s;
}

/* 3. CTA */
.owl-top-news__button-wrap.owl-anim--news-up.is-show {
  animation-delay: 1s;
}

@keyframes owlNewsFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==============================
  Top About Animation
  見出し → 本文 → CTA → 右カード の順に表示
============================== */

/* 見出し・本文・CTA：下からふわっと */
.owl-anim--about-up {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.owl-anim--about-up.is-show {
  animation: owlAboutFloatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 1. 見出し */
.owl-top-about__title.owl-anim--about-up.is-show {
  animation-delay: 0.1s;
}

/* 2. 本文段落 */
.owl-top-about__lead-wrap.owl-anim--about-up.is-show {
  animation-delay: 0.55s;
}

/* 3. CTA */
.owl-top-about__button-wrap.owl-anim--about-up.is-show {
  animation-delay: 1s;
}

/* 4. 右側カード：CTAのあとに今のくるっと表示 */
.owl-top-about__cards .spin-reveal-item.is-spin-visible {
  animation-delay: calc(1.45s + var(--spin-delay, 0s)) !important;
}

@keyframes owlAboutFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owl-anim--about-up,
  .owl-anim--about-up.is-show {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
}


/* ==============================
  Top Visit Animation
  タイトル → 段落 → CTA左 → CTA右 → 右イラスト の順に表示
============================== */

/* タイトル・段落・CTA：下からふわっと */
.owl-anim--visit-up {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.owl-anim--visit-up.is-show {
  animation: owlVisitFloatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 1. タイトル */
.owl-top-visit__title.owl-anim--visit-up.is-show {
  animation-delay: 0.1s;
}

/* 2. 段落 */
.owl-top-visit__lead.owl-anim--visit-up.is-show {
  animation-delay: 0.55s;
}

/* 3. CTA左 */
.owl-top-visit__buttons .owl-top-visit__button:nth-child(1).owl-anim--visit-up.is-show {
  animation-delay: 1s;
}

/* 4. CTA右 */
.owl-top-visit__buttons .owl-top-visit__button:nth-child(2).owl-anim--visit-up.is-show {
  animation-delay: 1.25s;
}

/* 5. 右側イラスト：CTAのあとに今のくるっと表示 */
.owl-top-visit__images .spin-reveal-item.is-spin-visible {
  animation-delay: calc(1.65s + var(--spin-delay, 0s)) !important;
}

@keyframes owlVisitFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owl-anim--visit-up,
  .owl-anim--visit-up.is-show {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
}


/* ==============================
  About Greeting Animation
  見出し → スローガン → 本文・署名 → 写真 の順に表示
============================== */

.owl-anim--greeting-up {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.owl-anim--greeting-up.is-show {
  animation: owlGreetingFloatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 1. 見出し */
.owl-about-greeting__head.owl-anim--greeting-up.is-show {
  animation-delay: 0.1s;
}

/* 2. スローガン */
.owl-about-greeting__slogan.owl-anim--greeting-up.is-show {
  animation-delay: 0.55s;
}

/* 3. 本文・名前・肩書き */
.owl-about-greeting__message.owl-anim--greeting-up.is-show {
  animation-delay: 1s;
}

/* 4. 写真 */
.owl-about-greeting__photo.owl-anim--greeting-up.is-show {
  animation-delay: 1.45s;
}

@keyframes owlGreetingFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owl-anim--greeting-up,
  .owl-anim--greeting-up.is-show {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
}


/* ==============================
  About Chart Animation
  見出し → 組織図画像 の順に表示
============================== */

.owl-anim--chart-up {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.owl-anim--chart-up.is-show {
  animation: owlChartFloatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 1. 見出し */
.owl-about-chart-simple__head.owl-anim--chart-up.is-show {
  animation-delay: 0.1s;
}

/* 2. 組織図画像 */
.owl-about-chart-simple__image.owl-anim--chart-up.is-show {
  animation-delay: 0.55s;
}

@keyframes owlChartFloatUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owl-anim--chart-up,
  .owl-anim--chart-up.is-show {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
}


/* ==============================
  Join Recommended Animation
  入会ページ：おすすめセクション
============================== */

/* 見出し・コピー：下からふわっと */
.owl-anim--join-recommend-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.owl-anim--join-recommend-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* リスト項目：1つずつ下からふわっと */
.owl-anim--join-recommend-list .owl-join-recommend__item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

/* 親が表示されたら、liを順番に表示 */
.owl-anim--join-recommend-list.is-show .owl-join-recommend__item {
  opacity: 1;
  transform: translateY(0);
}

/* 表示タイミング */
.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(1) {
  transition-delay: 0.75s;
}

.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(2) {
  transition-delay: 0.9s;
}

.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(3) {
  transition-delay: 1.05s;
}

.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(4) {
  transition-delay: 1.2s;
}

.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(5) {
  transition-delay: 1.35s;
}

.owl-anim--join-recommend-list.is-show .owl-join-recommend__item:nth-child(6) {
  transition-delay: 1.5s;
}

/* 見出し → キャッチ説明 → リスト → 補足文 */
.owl-join-recommend__title-group.owl-anim--join-recommend-up {
  transition-delay: 0.1s;
}

.owl-join-recommend__copy-group.owl-anim--join-recommend-up {
  transition-delay: 0.45s;
}

.owl-join-recommend__note.owl-anim--join-recommend-up {
  transition-delay: 1.85s;
}


/* ==============================
  Join Membership Animation
  入会ページ：入会資格・会費
============================== */

/* 見出し・コピー：下からふわっと */
.owl-anim--join-membership-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.owl-anim--join-membership-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 表：下からふわっと */
.owl-anim--join-membership-table {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.85s ease,
    transform 0.85s ease;
  transition-delay: 0.75s;
}

.owl-anim--join-membership-table.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 見出し → キャッチ説明 → 表 */
.owl-join-membership__title-group.owl-anim--join-membership-up {
  transition-delay: 0.1s;
}

.owl-join-membership__copy-group.owl-anim--join-membership-up {
  transition-delay: 0.45s;
}


/* ==============================
  Join Flow Animation
  入会ページ：入会までの流れ
============================== */

/* 見出し・キャッチ・各ステップ・入会イラスト：下からふわっと */
.owl-anim--join-flow-up,
.owl-anim--join-flow-step,
.owl-anim--join-flow-goal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.owl-anim--join-flow-up.is-show,
.owl-anim--join-flow-step.is-show,
.owl-anim--join-flow-goal.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 1. 見出し */
.owl-join-flow__title-group.owl-anim--join-flow-up {
  transition-delay: 0.1s;
}

/* 2. キャッチ */
.owl-join-flow__copy-group.owl-anim--join-flow-up {
  transition-delay: 0.45s;
}

/* 3. ステップ1 */
.owl-join-flow__steps .owl-join-flow__step:nth-child(1) {
  transition-delay: 0.8s;
}

/* 4. ステップ2 */
.owl-join-flow__steps .owl-join-flow__step:nth-child(2) {
  transition-delay: 1.1s;
}

/* 5. ステップ3 */
.owl-join-flow__steps .owl-join-flow__step:nth-child(3) {
  transition-delay: 1.4s;
}

/* 6. ステップ4 */
.owl-join-flow__steps .owl-join-flow__step:nth-child(4) {
  transition-delay: 1.7s;
}

/* 7. 最後の入会イラスト */
.owl-join-flow__goal.owl-anim--join-flow-goal {
  transition-delay: 2.05s;
}


/* ==============================
  About Committee Animation
  委員会：SPのみ1つずつ下からふわっと表示
============================== */

/* PCでは委員会行の追加アニメーションを無効化 */
@media (min-width: 768px) {
  .owl-about-committee__row.owl-anim--committee-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* SPだけアニメーション */
@media (max-width: 767px) {
  .owl-about-committee__row.owl-anim--committee-up {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition:
      opacity 0.75s ease,
      transform 0.75s ease !important;
    animation: none !important;
  }

  .owl-about-committee__row.owl-anim--committee-up.is-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .owl-about-committee__row.owl-anim--committee-up:nth-child(1) {
    transition-delay: 0.15s !important;
  }

  .owl-about-committee__row.owl-anim--committee-up:nth-child(2) {
    transition-delay: 0.4s !important;
  }

  .owl-about-committee__row.owl-anim--committee-up:nth-child(3) {
    transition-delay: 0.65s !important;
  }

  .owl-about-committee__row.owl-anim--committee-up:nth-child(4) {
    transition-delay: 0.9s !important;
  }

  .owl-about-committee__row.owl-anim--committee-up:nth-child(5) {
    transition-delay: 1.15s !important;
  }
}


/* ==============================
  Activity Archive Card Fade Up
  活動報告アーカイブ：カードを1枚ずつ下からふわっと表示
  ※1ページ12枚対応
============================== */

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition:
    opacity 0.75s ease,
    transform 0.75s ease !important;
  will-change: opacity, transform;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up.is-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 1段目 */
#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(1) {
  transition-delay: 0.10s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(2) {
  transition-delay: 0.25s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(3) {
  transition-delay: 0.40s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(4) {
  transition-delay: 0.55s !important;
}

/* 2段目 */
#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(5) {
  transition-delay: 0.70s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(6) {
  transition-delay: 0.85s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(7) {
  transition-delay: 1.00s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(8) {
  transition-delay: 1.15s !important;
}

/* 3段目 */
#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(9) {
  transition-delay: 1.30s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(10) {
  transition-delay: 1.45s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(11) {
  transition-delay: 1.60s !important;
}

#content[data-postid="26"] .owl-activity-archive__item.owl-anim--up:nth-child(12) {
  transition-delay: 1.75s !important;
}


/* ==============================
  PC History Archive Card Fade Up
  PC：これまでの歩みカードを1枚ずつ下からふわっと表示
============================== */

@media (min-width: 768px) {
  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up {
    opacity: 0 !important;
    transform: translateY(32px) !important;
    transition:
      opacity 0.75s ease,
      transform 0.75s ease !important;
    will-change: opacity, transform;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up.is-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* 1段目 */
  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(1) {
    transition-delay: 0.10s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(2) {
    transition-delay: 0.25s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(3) {
    transition-delay: 0.40s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(4) {
    transition-delay: 0.55s !important;
  }

  /* 2段目 */
  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(5) {
    transition-delay: 0.70s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(6) {
    transition-delay: 0.85s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(7) {
    transition-delay: 1.00s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(8) {
    transition-delay: 1.15s !important;
  }

  /* 3段目 */
  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(9) {
    transition-delay: 1.30s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(10) {
    transition-delay: 1.45s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(11) {
    transition-delay: 1.60s !important;
  }

  #content[data-postid="32"] .owl-history-archive__item.owl-anim--up:nth-child(12) {
    transition-delay: 1.75s !important;
  }
}


/* ==============================
  SP Top About CTA Timing Final
  スマホ：Aboutカード4枚のあとにCTAを早めに表示
============================== */

@media (max-width: 767px) {
  /* Aboutカード：短めの間隔で順番表示 */
  .owl-top-about .spin-reveal-item:nth-child(1) {
    transition-delay: 0.10s !important;
  }

  .owl-top-about .spin-reveal-item:nth-child(2) {
    transition-delay: 0.22s !important;
  }

  .owl-top-about .spin-reveal-item:nth-child(3) {
    transition-delay: 0.34s !important;
  }

  .owl-top-about .spin-reveal-item:nth-child(4) {
    transition-delay: 0.46s !important;
  }

  /* CTA：4枚目のあと、同じくらいの間隔で表示 */
  .owl-top-about__button-wrap.owl-anim--about-up.is-show {
    animation-delay: 0.50s !important;
  }
}


/* ==============================
  SP Top News CTA Timing
  スマホ：お知らせCTAを早めに表示
============================== */

@media (max-width: 767px) {
  .owl-top-news__button-wrap.owl-anim--news-up.is-show {
    animation-delay: 0.40s !important;
  }
}