@charset "UTF-8";
/*
    Theme Name: ロータス専用テーマ
    Description: ロータス子テーマ
    Template: swell
    Version: 1.0.0
    Author: クリエイターDOOO
    Author URI: https://creatordooo.com/
*/



/* ========================================
   トップページ透明ヘッダー
   左側は1300px幅の位置を維持
======================================== */
.home .l-header__inner {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   右側のグローバルメニューだけ中央寄りへ
======================================== */
.home .c-gnav {
    margin-right: 50px;
}


/* ========================================
   「寄付」だけ水色のボタンにする
======================================== */
.home .c-gnav > li:last-child > a {
    background: #7ecbd3;
    padding: 8px 22px;
    margin: auto 0;
}



/* ========================================
   メインビジュアルのサブテキスト
   ・文字を大きく
   ・左側へ移動
======================================== */
.p-mainVisual__textLayer .p-mainVisual__slideText {
    font-size: clamp(44px, 5.5vw, 90px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    /* 左へ移動 */
    transform: translate(-80px);
}

/* =========================================================
//  コピペで簡単！無限ループアニメーション
// ========================================================= */
/* 無限ループアニメーション */
@keyframes infinite-loop {
  to {
    transform: translateX(-100%);
  }
}
/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
  /* 設定項目 START */
  --item-max-width: 400px; /* 各アイテムの最大幅 */
  --item-mobile-width: 80vw; /* スマホでのアイテムの幅 */
  --duration: 12s; /* アニメーションスピード */
  --gap: 1rem; /* 各アイテム同士の間隔 */
  /* 設定項目 END */
  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}
.infiniteLoop.-reverse{--direction: reverse;--flex-direction: row-reverse}.infiniteLoop:hover{--play-state: paused}.infiniteLoop>*{display:flex}.infiniteLoop>*>*>*{overflow:hidden;transform:translateX(0);flex-wrap:nowrap !important;flex-direction:var(--flex-direction, row);margin:0 !important;padding-left:var(--gap) !important;gap:var(--gap);width:calc(var(--infinite-loop_width, 100vw)*1)}.infiniteLoop>*>*>*>*{padding:0 !important}.infiniteLoop>*>*>*>*>*{max-width:var(--item-max-width, 0px);margin-inline:auto}@media(min-width: 600px){.infiniteLoop>*>*>*{animation:infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}}@media not all and (min-width: 600px){.infiniteLoop>*>*:nth-child(n+2){display:none}.infiniteLoop>*>*>*{-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;padding:0 calc((100vw - var(--item-mobile-width, 80vw)) / 2) !important;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.infiniteLoop>*>*>*::-webkit-scrollbar{display:none}.infiniteLoop>*>*>*>*{flex-shrink:0;width:var(--item-mobile-width, 80vw) !important;scroll-snap-align:center}}





/* ボランティア：説明文の位置調整 */
.volunteer-description {
  position: relative;
  top: -250px;
}
.volunteer-descriptionmax {
  position: relative;
  top: -300px;
}




/* 01・02・03 スクロール登場アニメーション */
@media (min-width: 960px) {

  @supports (animation-timeline: view()) {

    .support-gradient .support-cover-01 {
      --slide-x: 1000px;
    }

    .support-gradient .support-cover-02 {
      --slide-x: -1000px;
    }

    .support-gradient .support-cover-03 {
      --slide-x: 1000px;
    }

    .support-gradient .support-cover-01,
    .support-gradient .support-cover-02,
    .support-gradient .support-cover-03 {
      animation-name: support-slide-in;
      animation-duration: 1s;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 80%;
    }

    @keyframes support-slide-in {
      from {
        opacity: 0;
        transform: translateX(var(--slide-x));
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

/* 動きを減らす設定のユーザーには適用しない */
@media (prefers-reduced-motion: reduce) {
  .support-gradient .support-cover-01,
  .support-gradient .support-cover-02,
  .support-gradient .support-cover-03 {
    animation: none !important;
  }
}



/* フッターメニュー：ホバー時に下線 */

.lotus-footer-menu a {
  display: inline-block;
  width: fit-content;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.3s ease;
}

.lotus-footer-menu a:hover {
  border-bottom-color: #ffffff;
}





/* 指定した固定ページのタイトルを非表示 */

body.page-id-2 .c-pageTitle,
body.page-id-43 .c-pageTitle,
body.page-id-45 .c-pageTitle,
body.page-id-49 .c-pageTitle,
body.page-id-39 .c-pageTitle {
  display: none !important;
}




/* 支援・参加するページの本文下余白を縮める */
body.page-id-49 .l-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}