.stripe-bg {
  background-color: rgba(233, 95, 158, 0.4) ;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(233, 95, 158, 0.1) 0,  
    rgba(233, 95, 158, 0.1) 8px, 
    transparent 8px,transparent 16px
  );
}

.float-soft {
  animation: floatSoft 6s ease-in-out infinite;
}


@keyframes floatSoft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.soft-combo { animation: softCombo 9s ease-in-out infinite; }
@keyframes softCombo {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.03); }
}

/* スライダーのオーバーフロー修正 */
#hero-slideshow-pc,
#hero-slideshow-mobile {
  overflow: hidden;
  height: 100vh;
}

/* スライダーの高さを統一 */
#hero-slideshow-pc .uk-slideshow-items,
#hero-slideshow-mobile .uk-slideshow-items {
  height: 100vh;
}

#hero-slideshow-pc .uk-slideshow-items > li,
#hero-slideshow-mobile .uk-slideshow-items > li {
  height: 100vh;
}

/* 画像とオーバーレイを確実にフル高さに */
#hero-slideshow-pc .uk-position-cover,
#hero-slideshow-mobile .uk-position-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#hero-slideshow-pc figure,
#hero-slideshow-mobile figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 改行制御のデフォルト設定 */
.mobile-br {
  display: none;
}

.desktop-br {
  display: inline;
}

/* SVG画像を確実に表示 - 文字の下、スライダーの上 */
#page\#2, #page\#3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 7 !important;
  position: absolute !important;
}

#page\#2 img, #page\#3 img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: none !important;
}

/* スライダーのカードが切れないための追加パディング */
.uk-slider-items-fix {
    padding-bottom: 50px !important;
    padding-top: 10px !important;
}

/* タブレット・スマホ用のレスポンシブ調整 */
@media (max-width: 960px) {
  /* スマホサイズ（〜640px） */
  #hero-slideshow-mobile article p:first-child {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #hero-slideshow-mobile article h2 {
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
  }
  
  #hero-slideshow-mobile article img[alt="RecoLiv logo"] {
    width: 120px !important;
  }
  
  #hero-slideshow-mobile article span {
    font-size: 1rem !important;
  }
  
  #hero-slideshow-mobile article p:last-child {
    font-size: 0.85rem !important;
  }
  
  /* スマホサイズ用改行表示 */
  .mobile-br {
    display: inline !important;
  }
  
  .desktop-br {
    display: none !important;
  }
  
  /* スマホサイズ用SVG画像縮小 */
  #page\#2 img {
    width: 137px !important;
    height: 165px !important;
  }
  
  #page\#3 img {
    width: 150px !important;
    height: 156px !important;
  }
  
  /* スマホサイズ用テキスト縮小 */
  #page\#5 {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Aboutセクションのカードをスマホで調整 */
  .uk-card-body h3 {
    font-size: 1.1rem !important;
  }
  
  .uk-card-body p {
    font-size: 0.85rem !important;
  }
  #platforms h2.uk-h2 {
    text-align: center !important;
  }

  #platforms .uk-panel.uk-margin {
    text-align: center !important;
  }

  #page\#37 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #page\#37 .uk-button {
    width: 100%;
    max-width: 320px;
  }
  
}

@media (max-width: 640px) {
  .music-category {
    padding-left: 16px;
    padding-right: 16px;
  }
  
}

@media (min-width: 641px) and (max-width: 960px) {
  /* タブレットサイズ（641px〜960px） */
  #hero-slideshow-mobile article p:first-child {
    font-size: 1.2rem !important;
  }
  
  #hero-slideshow-mobile article h2 {
    font-size: 4rem !important;
    margin-bottom: 5rem !important;
  }
  
  #hero-slideshow-mobile article img[alt="recoliv logo"] {
    width: 150px !important;
  }
  
  #hero-slideshow-mobile article span {
    font-size: 1.3rem !important;
  }
  
  #hero-slideshow-mobile article p:last-child {
    font-size: 1rem !important;
  }
  
  /* タブレットサイズは通常の改行 */
  .mobile-br {
    display: none !important;
  }
  
  .desktop-br {
    display: inline !important;
  }
  
  /* タブレットサイズ用SVG画像縮小 */
  #page\#2 img {
    width: 205px !important;
    height: 247px !important;
  }
  
  #page\#3 img {
    width: 300px !important;
    height: 312px !important;
  }
 /* 見出し（あなたのライブ活動を、もっと伝わるカタチへ） */
  #platforms h2.uk-h2 {
    text-align: center !important;
  }

  /* 本文 */
  #platforms .uk-panel.uk-margin {
    text-align: center !important;
  }

  /* CTAボタン */
  #page\#37 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #page\#37 .uk-button {
    width: 100%;
    max-width: 320px;
  }

}

@media (min-width: 960px) {
  #hero-slideshow-pc {
    height: 100vh; /* ヘッダーオーバーレイのため全画面 */
  }
}

/* モバイルヘッダーのスタイル */
.tm-header-mobile .uk-navbar-container {
  transition: background-color 0.3s ease;
}

/* スティッキー時の背景色 */
.tm-header-mobile .uk-sticky.uk-active .uk-navbar-container {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* スティッキー時のロゴとトグルボタンの色 */
.tm-header-mobile .uk-sticky.uk-active .uk-navbar-toggle {
  color: #333 !important;
}

.tm-header-mobile .uk-navbar-toggle {
  color: #e95f9e;
}


/* モバイルメニュー（オフキャンバス）のスタイル */
#mobile-menu .uk-offcanvas-bar {
      background: url(/a_image/about_bcgd_i4.png) center center / cover no-repeat, linear-gradient(135deg, #FFF5F7 0%, #E3F2FD 100%);
  padding: 40px 30px;
}

#mobile-menu .uk-logo {
  display: block;
  text-align: center;
}

#mobile-menu .uk-offcanvas-close {
  color: #333;
  position: absolute;
  top: 20px;
  right: 20px;
}

/* モバイルメニューのボタンスタイル */
.mobile-menu-button {
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 30px;
  text-align: center;
}

.mobile-menu-button.uk-button-default {
  background-color: #0097a5;
  color: white;
  border: none;
}

.mobile-menu-button.uk-button-default:hover {
  background-color: #024144;
}

.mobile-menu-button.mobile-menu-register {
  background-color: #e95f9e;
  color: white;
  border: none;
}

.mobile-menu-button.mobile-menu-register:hover {
  background-color: #722d50;
}

.btn_grn2{
background-color:#0097a5;
}
.bg_white{
  background-color:#ffffff !important;
}
/* モバイルメニュー内 ロゴ中央揃え */
#mobile-menu .uk-margin-auto-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ヒーロー内の見出しを最前面に */
#hero-slideshow .uk-panel,
#hero-slideshow-mobile .uk-panel {
  position: relative;
  z-index: 20;
}

/* とくに FIND YOUR STAGE (h1想定) をさらに最前面に */
#hero-slideshow h1,
#hero-slideshow-mobile h1 {
  position: relative;
  z-index: 30;
}

/* =========================================
   Platforms Section (Contact section)
========================================= */
/* タイトルスタイル */
.platforms-title {
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    color: #333;
}
.platforms-title span {
    color: var(--pink);
    position: relative;
    display: inline-block;
}
/* 下線マーカー */
.platforms-title span::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(233, 95, 158, 0.2);
    z-index: -1;
    transform: rotate(-1deg);
}

/* 本文スタイル */
.platforms-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 40px;
}

/* 画像スタイル強化 */
#page\#36 .el-image {
    border-radius: 0 500px 500px 0;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}
#page\#36:hover .el-image {
    transform: scale(1.02);
}

/* スマホ調整 */
@media (max-width: 959px) {
    #page\#36 .el-image {
        border-radius: 20px;
        margin-bottom: 30px;
    }
    .platforms-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .platforms-text {
        text-align: center;
        font-size: 1rem;
    }
}