/*ロゴスクロール*/

.scroll-container {
  width: 100%;
  overflow: hidden;
  background: #ed6c00;
  position: relative;
  height: 3vw;
}
.scroll-content {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 2vw;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 0.8vw;
}
.scroll-content img {
  width: 12vw;
  flex-shrink: 0;
}

/* アニメーションを適用する親要素 */
.aside-container {
  position: relative;
  overflow: hidden;
}

/* 疑似要素で背景をアニメーションさせる */
.aside-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%; /* 初期状態（非表示） */
  background: #ed6c00; /* オレンジ色 */
  transition: height 0.3s ease-in-out;
  z-index: -1; /* 背景の後ろに配置 */
}

/* アニメーション（クリック時に高さ100%になる） */
.aside-container.active::before {
  height: 100%;
}

/* アニメーションを適用する親要素 */
.aside-container-sp {
  position: relative;
  overflow: hidden;
}

/* 疑似要素で背景をアニメーションさせる */
.aside-container-sp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%; /* 初期状態（非表示） */
  background: #ed6c00; /* オレンジ色 */
  transition: width 0.3s ease-in-out;
  z-index: -1; /* 背景の後ろに配置 */
}

/* アニメーション（クリック時に高さ100%になる） */
.aside-container-sp.active::before {
  width: 100%;
}

.menu-button {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #fba700, #ed6c00);
  border: none;
  cursor: pointer;
}

/* クリック時に単色に変化 */
.menu-button.active {
  background: #ed6c00;
}

/* 大画面（lg: 1024px以上） */
@media (min-width: 1024px) {
  .menu-button {
    width: 120px;
    height: 120px;
  }
}

/* 特大画面（xl: 1280px以上） */
@media (min-width: 1280px) {
  .menu-button {
    width: 150px;
    height: 150px;
  }
}

.menu-lines {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  transition: transform 0.3s ease-in-out;
}

/* 線の共通スタイル */

.menu-line {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
    width 0.3s ease-in-out;
}

/* デフォルトのスタイル */
.menu-line {
  background-color: white;
  position: relative;
}

.menu-lines {
  gap: 6px;
}
.menu-line:first-child {
  width: 24px;
  height: 1px;
}
.menu-line:last-child {
  width: 16px;
  height: 1px;
}

.menu-button.active .menu-line:last-child {
  width: 24px;
  top: 1px;
}

/* 大画面（lg: 1024px以上）で適用 */
@media (min-width: 1024px) {
  .menu-lines {
    gap: 12px;
  }
  .menu-line:first-child {
    width: 48px;
    height: 2px;
  }
  .menu-line:last-child {
    width: 32px;
    height: 2px;
  }
}

/* 特大画面（xl: 1280px以上）で適用 */
@media (min-width: 1280px) {
  .menu-lines {
    gap: 15px;
  }
  .menu-line:first-child {
    width: 60px;
    height: 3px;
  }
  .menu-line:last-child {
    width: 40px;
    height: 3px;
  }
}

/* クリック時の変形 */
.menu-button.active .menu-line:first-child {
  transform: translateY(2px) rotate(30deg);
}

.menu-button.active .menu-line:last-child {
  transform: translateY(-6px) rotate(-30deg);
}

/* 大画面（lg: 1024px以上）で適用 */
@media (min-width: 1024px) {
  /* クリック時の変形 */
  .menu-button.active .menu-line:first-child {
    transform: translateY(8px) rotate(30deg);
  }

  .menu-button.active .menu-line:last-child {
    transform: translateY(-8px) rotate(-30deg);
  }

  .menu-button.active .menu-line:last-child {
    width: 48px;
    top: 2px;
  }
}

/* 特大画面（xl: 1280px以上）で適用 */
@media (min-width: 1280px) {
  .menu-button.active .menu-line:last-child {
    width: 60px;
    top: -2px;
  }
}

/* アニメーション用のクラス */
.svg-transition {
  transition: fill 0.5s ease-in-out; /* ふわっと変化 */
}

/* クリック時の fill */
.svg-white {
  fill: #ffffff !important; /* クリックで白に */
}

/* 大画面（lg: 1024px以上）で適用 */
@media (min-width: 1024px) {
  .svg-transition {
    width: 8px;
  }
}

/* 特大画面（xl: 1280px以上）で適用 */
@media (min-width: 1280px) {
  .svg-transition {
    width: 10px;
  }
}

/* すべての SVG の fill をスムーズに変化 */
.svg-transition2 path {
  transition: fill 0.5s ease-in-out;
}

/* クリック時（fill を白にする） */
.svg-white path {
  fill: #ffffff !important;
}

/* 斜線パターンを背景に適用 */
.has-stripes {
  position: relative;
  overflow: hidden; /* 斜線をはみ出さないようにする */
}

/* 疑似要素で斜線を作成 */
.has-stripes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    -30deg,
    /* 角度を逆に変更 */ rgba(255, 255, 255, 0.3) 0px,
    rgba(255, 255, 255, 0.3) 2px,
    transparent 1px,
    transparent 8px
  );
  opacity: 0.3; /* 斜線の薄さを調整 */
  pointer-events: none; /* クリックできるようにする */
}

.nav-translate {
  transform: translateX(-340px);
}

.nav-translate2 {
  transform: translateX(-60px);
}

@media (min-width: 1024px) {
  .nav-translate {
    transform: translateX(-280px);
  }

  .nav-translate2 {
    transform: initial;
  }
}

@media (min-width: 1280px) {
  .nav-translate {
    transform: translateX(-350px);
  }

  .nav-translate2 {
    transform: initial;
  }
}

.nav-translate-sp {
  transform: translateY(-100vh);
}

.nav-translate2-sp {
  transform: translateY(-60px);
}

/*スライダーボタン調整*/

.splide__arrow--prev {
  left: 0 !important;
}

.splide__arrow--next {
  right: 0 !important;
}

.custom-arrow {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.custom-arrow.prev {
  left: 0px; /* 矢印の位置調整（適宜変更してね） */
}

.custom-arrow.next {
  right: 0px;
}

.custom-arrow img {
  width: 20px;
  height: auto;
}

/* 大画面（lg: 1024px以上）で適用 */
@media (min-width: 1024px) {
  .custom-arrow img {
    width: 40px;
  }
}

/* 特大画面（xl: 1280px以上）で適用 */
@media (min-width: 1280px) {
  .custom-arrow img {
    width: 50px;
  }
}

/*マーカーデザイン*/
.marker-highlight {
  position: relative;
}
/* CSSでカスタムクラス */
.marker-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.1em; /* 少し上げてマーカーっぽく */
  width: 100%;
  height: 45%;
  background-color: #ffde9b;
  z-index: -1; /* テキストの下に配置 */
}

.marker-highlight-inline {
  background: linear-gradient(to bottom, transparent 60%, #ffde9b 60%);
}

/*ドット背景*/

.dot-bg {
  background-image: radial-gradient(#fffaef 2px, transparent 2px);
  background-size: 12px 12px;
  background-repeat: repeat;
}

.combined-bg {
  background-image: radial-gradient(
      rgba(255, 250, 239, 0.2) 2px,
      transparent 2px
    ),
    /* ドット（20%不透明） */ linear-gradient(to bottom, #ed6c00, #ff953c); /* グラデーション */
  background-size: 12px 12px, 100% 100%;
  background-repeat: repeat, no-repeat;
}

/* fade in effect*/
.fade-in-bottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6rem);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.fade-in-bottom-before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1280px) {
  .fade-in-bottom-xl {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6rem);
    transition: opacity 1s, visibility 1s, transform 1s;
  }
  .fade-in-bottom-xl-before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ローダーのスタイル */
#loader {
  transition: opacity 1s ease-in-out;
}

#loader.loader-fade {
  opacity: 0;
  pointer-events: none;
}

.loader {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, #009fdf 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
  33% {
    background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%;
  }
  50% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
  }
  66% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
  }
}

.bg-herringbone {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(#ffdcc1 4px, transparent 4px),
    radial-gradient(#ffdcc1 4px, transparent 4px);
  background-size: 74px 74px;
  background-position: 0 0, 37px 37px;
  z-index: -1;
  pointer-events: none;

  /* 👇ここがポイント：下半分だけ見せる */
  clip-path: inset(52% 0 0 0);
}

/*news 詳細*/

#news-detail p {
  margin-bottom: 26px;
  font-size: 10px;
}

@media (min-width: 1024px) {
  #news-detail p {
    margin-bottom: 32px;
    font-size: 12px;
  }
}

@media (min-width: 1280px) {
  #news-detail p {
    margin-bottom: 40px;
    font-size: 15px;
  }
}


/* 見出し大 */

#news-detail h3 {
  margin-bottom: 6px;
  font-size: 18px;
  margin: 36px 0 24px 0;
  border-left: 5px solid #009fdf;
  border-bottom: 1px solid #009fdf;
  padding: 12px 0 12px 12px;
}

@media (min-width: 1024px) {
  #news-detail h3 {
    margin-bottom: 28px;
    font-size: 20px;
  }
}

@media (min-width: 1280px) {
  #news-detail h3 {
    margin-bottom: 32px;
    font-size: 22px;
  }
}

/* 見出し中 */

#news-detail h4 {
  margin-bottom: 6px;
    padding: 8px 0 8px 8px;
  font-size: 11px;
  border-left: 4px solid #009fdf;
}

@media (min-width: 1024px) {
  #news-detail h4 {
    margin-bottom: 8px;
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  #news-detail h4 {
    margin-bottom: 10px;
    font-size: 18px;
  }
}


/* 見出し（強調アイコン） */
#news-detail h5 {
  margin-bottom: 6px;
  font-size: 11px;
    padding: 6px 0 6px 0px;
}

#news-detail h5::before {
  content: '■';
  color: #009fdf;
    margin-right: 8px;
}

@media (min-width: 1024px) {
  #news-detail h5 {
    margin-bottom: 8px;
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  #news-detail h5 {
    margin-bottom: 10px;
    font-size: 18px;
  }
}

/* 見出し小 */
#news-detail h6 {
  margin-bottom: 6px;
      padding: 6px 0 6px 0px;
  font-size: 11px;
}

@media (min-width: 1024px) {
  #news-detail h6 {
    margin-bottom: 8px;
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  #news-detail h6 {
    margin-bottom: 10px;
    font-size: 18px;
  }
}

#news-detail h6::before {
  content: '-';
  color: #009fdf;
  margin-right: 8px;
}



#news-detail ul li {
  list-style: disc;
}

#news-detail ol li {
  list-style: decimal;
}

#news-detail ul,
#news-detail ol {
  font-size: 10px;
  padding-left: 20px;
}

@media (min-width: 1024px) {
  #news-detail ul,
  #news-detail ol {
    font-size: 12px;
    padding-left: 32px;
  }
}

@media (min-width: 1280px) {
  #news-detail ul,
  #news-detail ol {
    font-size: 15px;
    padding-left: 40px;
  }
}

#news-detail a {
  text-decoration: underline;
}

#news-detail hr {
  border: none;
  border-top: 1px solid #009fdf;
}

#news-detail .embed-responsive-16by9 iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

#news-detail .p-accordion__title {
  background-color: #009fdf;
  border-radius: 9999px;
  color: #fff;
  width: 100%;
  padding: 6px 12px;
  font-weight: bold;
  text-align: left;
}

#news-detail .row::after {
  content: '';
  display: table;
  clear: both;
}

#news-detail .row {
  margin-bottom: 80px;
}

div.button-panel a {
  text-decoration: none !important;
  color: #fff;
  background-color: #fe589e;
  padding: 6px 24px 8px 24px;
  border-radius: 9999px;
}

div.button-panel a:hover {
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out 0.1s;
}

p.attention {
  padding: 16px;
  border: 1px solid #fe589e;
  color: #fe589e;
  border-radius: 8px;
}

.p-accordion__title {
  position: relative;
  padding-right: 40px; /* 記号用のスペース */
  font-size: 16px;
  background: #eee;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.p-accordion__title::after {
  content: '＋';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.p-accordion__title.active::after {
  content: 'ー';
}

.p-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 16px;
}

.p-accordion__body.open {
  max-height: 500px; /* 適当な最大値 */
  padding: 16px;
}

.slash-bg {
  background: repeating-linear-gradient(
    135deg,
    #fab1ca,
    #fab1ca 1px,
    transparent 1px,
    transparent 8px
  );
}

@media (min-width: 640px) {
  .slash-bg {
    background: repeating-linear-gradient(
      135deg,
      #fab1ca,
      #fab1ca 1px,
      transparent 1px,
      transparent 10px
    );
  }
}

@media (min-width: 768px) {
  .slash-bg {
    background: repeating-linear-gradient(
      135deg,
      #fab1ca,
      #fab1ca 1px,
      transparent 1px,
      transparent 12px
    );
  }
}

@media (min-width: 1024px) {
  .slash-bg {
    background: repeating-linear-gradient(
      135deg,
      #fab1ca,
      #fab1ca 1px,
      transparent 1px,
      transparent 14px
    );
  }
}

/*Member Carousel*/

#thumbnail-slider .splide__slide.is-active {
  outline: 2px solid #009fdf;
  outline-offset: -2px; /* 必要に応じて調整 */
}

/* .splide__track--nav > .splide__list > .splide__slide.is-active {
  outline: 2px solid #009fdf;
  outline-offset: -2px; 
}
.splide__track--nav > .splide__list > .splide__slide {
  border: 0px solid #ffffff !important;
} */

/* Modal */
.modal {
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  max-width: 90%;
  min-width: 30%;
  margin: auto;
}

/* live and event detail*/

#live-and-event-detail h3,
h2.guideline {
  position: relative;
  font-weight: bold;
  color: #393939;
  border-bottom: 1px solid #bebebe;
  font-size: 20px;
  padding-left: 24px;
  padding-bottom: 16px;
  margin-bottom: 32px;
}

#live-and-event-detail h3::before,
h2.guideline::before {
  top: 8px;
  left: 0;
  position: absolute;
  content: '';
  display: block;
  width: 6px;
  height: 20px;
  background-color: #ed6c00;
}

@media (min-width: 1024px) {
  #live-and-event-detail h3,
  h2.guideline {
    font-size: 24px;
    padding-left: 28px;
    padding-bottom: 20px;
    margin-bottom: 40px;
  }

  #live-and-event-detail h3::before,
  h2.guideline::before {
    top: 10px;
    width: 8px;
    height: 26px;
  }
}

@media (min-width: 1280px) {
  #live-and-event-detail h3,
  h2.guideline {
    font-size: 32px;
    padding-left: 36px;
    padding-bottom: 25px;
    margin-bottom: 50px;
  }
  #live-and-event-detail h3::before,
  h2.guideline::before {
    top: 12px;
    width: 10px;
    height: 33px;
  }
}

.dot-bg2 {
  background-image: radial-gradient(white 2px, transparent 2px);
  background-size: 14px 14px;
  background-repeat: repeat;
}

.text-shadow-yellow {
  text-shadow: 3px 3px 5px #fee569;
}

.text-shadow-1 {
  text-shadow: 3px 3px 0px #fee569;
}
.text-shadow-2 {
  text-shadow: 3px 3px 0px #009fdf;
}
.text-shadow-3 {
  text-shadow: 3px 3px 0px #bdedad;
}
.text-shadow-4 {
  text-shadow: 3px 3px 0px #ff2021;
}
.text-shadow-5 {
  text-shadow: 3px 3px 0px #ffb7f1;
}
.text-shadow-6 {
  text-shadow: 3px 3px 0px #ca96ff;
}
.text-shadow-7 {
  text-shadow: 3px 3px 0px #b2f9fe;
}
.text-shadow-8 {
  text-shadow: 3px 3px 0px #fe589e;
}
.text-shadow-9 {
  text-shadow: 3px 3px 0px #16b500;
}
.text-shadow-10 {
  text-shadow: 3px 3px 0px #9b9b9b;
}

#main-slider .splide__arrows {
  position: relative;
  top: 60vw;
}

@media (min-width: 640px) {
  #main-slider .splide__arrows {
    position: initial;
    top: initial;
  }
}

.cat-active {
  background-color: #009fdf !important;
  color: #fff !important;
  border: none !important;
}

.free-input a {
  text-decoration: underline;
  color: #009fdf;
}

/*タップギミック用*/

.hotspot {
  position: absolute;
  width: 10%;
  height: 10%;
  cursor: pointer;
  /* 透明だがクリックできる */
  background: rgba(0, 0, 0, 0); /* デバッグ時は色付けてもよい */
}

.gimmick_icon {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
}

.gimmick_icon.show {
  animation: floatExpand 0.6s ease-out forwards;
  /* animation: floatDrop 1.5s ease forwards; */
}

/* @keyframes floatDrop {
  0% {
    transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -150%) scale(1.2); 上昇
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0%) scale(1); 下降
    opacity: 0;
  }
} */

@keyframes floatExpand {
  0% {
    transform: translate(-50%, 0%) scale(0.8);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -80%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -160%) scale(1.8);
    opacity: 0;
  }
}

.char-1 {
  top: 28%;
  left: 30%;
  width: 44%;
  height: 39%;
}
.char-2 {
  top: 41%;
  left: 1%;
  width: 28%;
  height: 28%;
}
.char-3 {
  top: 29%;
  left: 75%;
  width: 25%;
  height: 33%;
}
.char-4 {
  top: 22%;
  left: 0%;
  width: 35%;
  height: 20%;
}
.char-5 {
  top: 69%;
  left: 0%;
  width: 34%;
  height: 31%;
}
.char-6 {
  top: 67%;
  left: 34%;
  width: 34%;
  height: 33%;
}
.char-7 {
  top: 4%;
  left: 0%;
  width: 35%;
  height: 18%;
}
.char-8 {
  top: 4%;
  left: 62%;
  width: 38%;
  height: 25%;
}
.char-9 {
  top: 4%;
  left: 34%;
  width: 29%;
  height: 25%;
}
.char-10 {
  top: 62%;
  left: 68%;
  width: 32%;
  height: 38%;
}
@media (min-width: 1024px) {
  .char-1 {
    top: 25%;
    left: 40%;
    width: 37%;
    height: 40%;
  }

  .char-2 {
    top: 40%;
    left: 12%;
    width: 27%;
    height: 28%;
  }
  .char-3 {
    top: 27%;
    left: 78%;
    width: 21%;
    height: 35%;
  }
  .char-4 {
    top: 19%;
    left: 10%;
    width: 30%;
    height: 21%;
  }
  .char-5 {
    top: 68%;
    left: 9%;
    width: 30%;
    height: 32%;
  }
  .char-6 {
    top: 65%;
    left: 39%;
    width: 32%;
    height: 35%;
  }
  .char-7 {
    top: 0%;
    left: 9%;
    width: 31%;
    height: 19%;
  }
  .char-8 {
    top: 0%;
    left: 65%;
    width: 35%;
    height: 27%;
  }
  .char-9 {
    top: 0%;
    left: 40%;
    width: 25%;
    height: 25%;
  }
  .char-10 {
    top: 62%;
    left: 71%;
    width: 29%;
    height: 38%;
  }
}

/* グローバルCSSに追加 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-animation {
  animation: rotateClockwise 30s linear infinite;
}

.text-shadow-white {
  color: #444444;
  filter: url(#white-outline);
}

.text-shadow-white-dd dl dd {
  color: #444444;
  filter: url(#white-outline);
}

.text-shadow-white-dd dd {
  position: relative;
  top: -2px;
}

.slider-container {
  overflow: hidden;
  background-color: #ed6c00;
  padding: 0.8vw 0;
}
.slider {
  width: 100%;
  position: relative;
}
.slides {
  display: flex;
  width: 200%;
}
.slide {
  flex-basis: 50%;
  display: flex;
  align-items: center;
}

.slide img {
  width: 11vw;
  margin-right: 1.5vw;
}

.slides {
  animation: slide var(--duration, 30s) linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*event詳細*/

/*news詳細追加*/
.button-panel{
  margin-top: 24px;
}