/* === モーダル非表示（初期） ============================== */
.modalNoDisp {
  display: none;
}
/* === モーダルバックグランド ============================== */
.modalBg {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(26, 58, 82, 0.95),
    rgba(26, 58, 82, 0.85)
  );
  z-index: 100;
}
/* === モーダルバックグランド：OPEN時のアニメーション ====== */
.modalBgOpen {
  animation: bgOpenAnime 0.3s ease;
}
@keyframes bgOpenAnime {
  /* フェードイン */
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* === モーダルバックグランド：CLOSE時のアニメーション ===== */
.modalBgClose {
  bottom: 100%;
  animation: bgCloseAnime 0.3s ease;
}
@keyframes bgCloseAnime {
  /* フェードイン */
  0% {
    opacity: 1;
    bottom: 0;
  }
  100% {
    opacity: 0;
    bottom: 0;
  }
}
/* === モーダルウインド ==================================== */
.modalBg .modalWindow {
  /* モーダルウインドを中心に表示 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-size: 16pt;
  /* text-align    : center; */
}
/* === モーダルウインド：OPEN時のアニメーション============= */
.modalBgOpen .modalWindow {
  animation: modalOpenAnime 0.3s ease;
}
@keyframes modalOpenAnime {
  /* 下→中心 */
  0% {
    top: 150%;
  }
  100% {
    top: 50%;
  }
}
/* === モーダルウインド：CLOSE時のアニメーション============ */
.modalBgClose .modalWindow {
  animation: modalCloseAnime 0.3s ease;
}
@keyframes modalCloseAnime {
  /* 中心→下 */
  0% {
    top: 50%;
  }
  100% {
    top: 150%;
  }
}
.modalfadeLayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 浮かび上がるアニメーション */
.animation-element {
  transform: translateY(5px);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}

.animation-element.show {
  transform: translateY(0);
  opacity: 1;
}
/* スライダー */
/*==================================================
スライダーのためのcss
===================================*/
.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}

.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin: 0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}

/********
    作品子画面
*********/
.art-modalWindow {
  width: 70%;
  max-width: 600px;
  height: 95vh;
}
.modal-art-detail {
  height: 100%;
  background: linear-gradient(135deg, #fefdfb 0%, #f5f1e8 100%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border: 3px solid #d4af37;
}
.lp-art-close {
  display: block;
  position: absolute;
  top: 10px;
  right: 30px;
  width: 30px;
  height: 30px;
  border: 2px solid #d4af37;
  filter: brightness(0.8);
  z-index: 999;
  background-color: rgba(198, 12, 48, 0.7);
  border-radius: 4px;
}
.lp-art-close a {
  display: block;
}
.modal-art-content {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 700px) {
  .art-modalWindow {
    width: 90%;
  }
}
.wrap-art-name {
  display: flex;
  align-items: center;
}
.artname {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-family: "HGRGY";
  font-size: 40px;
  color: #1a3a52;
  border-bottom: 2px solid #d4af37;
}
.artaccount {
  margin-left: 10px;
  width: 15px;
  height: 15px;
}
.artaccount a {
  display: block;
}
.artimage {
  max-width: 600px;
  margin: 0 auto;
}
.artimage img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.arttitle {
  font-family: "HGRGY";
  font-size: 20px;
  text-align: center;
  padding: 10px;
}
.artcomment {
  margin: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-left: 4px solid #c60c30;
  border-radius: 0 4px 4px 0;
}
.artcomment a {
  display: inline;
}
/* NFT大 */
.wrap-nftchar-subtitle {
  text-align: center;
  background-color: rgba(26, 58, 82, 0.1);
  color: #1a3a52;
  font-weight: bold;
  padding: 8px;
  border-bottom: 2px solid #d4af37;
}
.wrap-nftchar-area {
  width: 100%;
  overflow-y: auto;
  margin: 15px 0;
}
.wrap-nftchar-link {
  display: flex;
}
.wrap-nftchar-link div {
  width: 60px;
  margin: 0 10px;
}
.wrap-nftchar-link a {
  margin: 0 10px;
}
.wrap-nftchar-link a img {
  width: 100%;
}
.wrap-nftchar-link p {
  margin: 0;
  width: 100%;
  overflow-wrap: break-word;
  color: #333;
  font-size: 12px;
  text-align: center;
}
/* NFT小 */
.art-small-nft {
  margin: 5px;
}
.wrap-small-area {
  display: flex;
}
.wrap-small-area > div {
  margin: 4px;
  width: 20%;
}
.wrap-small-area > div a {
  display: block;
}
.wrap-small-name {
  text-align: center;
}
/********
    ファンアート子画面
*********/
.fan-modalWindow {
  width: 70%;
  max-width: 600px;
  height: 95vh;
}
.modal-fan-detail {
  height: 100%;
  background: linear-gradient(135deg, #fefdfb 0%, #f5f1e8 100%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border: 3px solid #d4af37;
}
.lp-fan-close {
  display: flex;
  z-index: 999;
  width: 100%;
  padding: 10px;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.lp-fan-close a {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  filter: brightness(0.3);
}
.modal-fan-content {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.fan_big_image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fan_big_image .loading {
  width: 120px;
  height: 120px;
  margin: 10px;
  margin-top: 100px;
}
.fan_big_image video {
  width: 100%;
}

.fan_display_name {
  font-size: 24px;
  margin: 0px 12px;
}
.fan_acount_name {
  font-size: 16px;
  color: #666;
  margin: 0px 12px;
}
.fan_wrap_name {
  display: flex;
  align-items: center;
}

.fan_list_name {
  margin: 0px 12px;
}
.fan_sell_name {
  margin: 0px 12px;
}

.fanart-lists-event {
  display: none;
}
.fanart-lists-active {
  display: block;
}