@charset "utf-8";

/*----------------------------------------------------
  メインビジュアル内フローティングバナー
----------------------------------------------------*/
.fix_banner_top {
  top: 10%;
  font-size: 60%;
  position: fixed;
  left: 60%;
  right: 40%;
  z-index: 10001;
  width: 60%;
  max-width: 580px;
}
.fix_banner_top img { width:100%; }

@media (max-width: 980px) {
  .fix_banner_top {
    top: 30%;
    left: 10%;
    right: 10%;
    width: 80%;
    position: fixed;
    z-index: 10001;
  }
}

/*----------------------------------------------------
  フローティングバナー本体
----------------------------------------------------*/
.fix_banner_top2 {
  position: fixed;
  /*top: 15%;
  left: 50%;*/
  top:180px;
  right:0px;
  left:auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  font-size: 70%;
  margin: 0 auto;
  z-index: 2147483647; /* ★ 最前面固定 */
}
.fix_banner_top2 img { width:100%; }

@media (max-width: 980px) {
  .fix_banner_top2 {
    top: 30%;
    right: -120px;
    left:auto;
    transform: translateX(-50%);
    width: 94%;
    padding: 15px 20px;
    font-size: 85%;
    max-width: 60%;
  }
  .fix_banner_top2 video.topMoive {
    padding-top: 0;
    margin-bottom: 0;
  }
}

/*----------------------------------------------------
  閉じるボタン（×）※スマホで小さめ＆押しやすい
----------------------------------------------------*/
.bn_close{
  position:absolute;
  top:-12px;
  right:-12px;
  width:34px;                 /* ★見た目を小さく */
  height:34px;                /* ★見た目を小さく */
  background:#000;
  border-radius:50%;
  cursor:pointer;
  z-index:2147483647;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
@media (max-width: 980px) {
.bn_close{
  position:absolute;
  top:-6px;
  right:-6px;
  width:34px;                 /* ★見た目を小さく */
  height:34px;                /* ★見た目を小さく */
  background:#000;
  border-radius:50%;
  cursor:pointer;
  z-index:2147483647;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
}
/* ★当たり判定は広げて押しやすさ維持（見た目はそのまま） */
.bn_close::after{
  content:"";
  position:absolute;
  inset:-10px;
}

/* ×の線（中央基準で安定） */
.bn_close:before,
.bn_close:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:20px;                 /* ★線も少し短く */
  height:2px;
  background:#fff;
  transform-origin:center;
}
.bn_close:before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.bn_close:after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/*----------------------------------------------------
  オーバーレイ（★タップ不能問題の最終解）
----------------------------------------------------*/
.floating-banner-overlay{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 2147483646;   /* ★ バナーの直下 */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*----------------------------------------------------
  wrapper（存在してもタップを邪魔しない）
----------------------------------------------------*/
.floating-banner-wrapper{
  position: static !important;
  width: auto;
  height: auto;
  z-index: auto;
  pointer-events: none; /* ★ wrapperがタップを奪わない */
}

/*----------------------------------------------------
  フェードイン（表示時）
----------------------------------------------------*/
.fade-in{
  animation: fadeInOverlay 1s ease forwards;
}
@keyframes fadeInOverlay{
  from { opacity:0; }
  to   { opacity:1; }
}

/*----------------------------------------------------
  フェードアウト（閉じる時）
  ※JSで overlay と .fix_banner_top2 に .is-hide を付ける
----------------------------------------------------*/
.floating-banner-overlay,
.fix_banner_top2{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.floating-banner-overlay.is-hide,
.fix_banner_top2.is-hide{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}