@charset "UTF-8";
/* ------------------------------------------------------------
   トップページ セミナーポップアップバナー
   マークアップ: inc/seminar-popup.php
   挙動       : assets/js/seminar-popup.js
------------------------------------------------------------ */

.seminar-popup {
  /* Figma: ポップアップ広告（PC 833:10069 / SP 833:12207） */
  --seminar-popup-width: 323px;
  --seminar-popup-offset-x: 32px;
  --seminar-popup-offset-y: 32px;
  --seminar-popup-close-size: 24px;
  --seminar-popup-close-offset: -12px;
  --seminar-popup-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

  position: fixed;
  left: var(--seminar-popup-offset-x);
  bottom: var(--seminar-popup-offset-y);
  width: var(--seminar-popup-width);
  /* SPナビ（.modal / z-index:1010）より下、本文より上に重ねる */
  z-index: 1000;
  /* 表示可否はJSが判定するため、初期状態は非表示 */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
}

.seminar-popup--visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.seminar-popup__link {
  display: block;
  box-shadow: var(--seminar-popup-shadow);
  transition: opacity 0.2s ease-out;
}

.seminar-popup__link:hover {
  opacity: 0.85;
}

.seminar-popup__image {
  display: block;
  width: 100%;
  height: auto;
}

.seminar-popup__close {
  position: absolute;
  top: var(--seminar-popup-close-offset);
  right: var(--seminar-popup-close-offset);
  width: var(--seminar-popup-close-size);
  height: var(--seminar-popup-close-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease-out;
}

.seminar-popup__close:hover {
  opacity: 0.7;
}

.seminar-popup__close-icon {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .seminar-popup {
    --seminar-popup-width: 200px;
    --seminar-popup-offset-x: 16px;
    --seminar-popup-offset-y: 18px;
    --seminar-popup-close-size: 15px;
    --seminar-popup-close-offset: -7px;
  }
}