/* ========================================
   オーバーレイ広告（.gaten-overlay）
   記事ページ下部に固定表示（横長バー）
   左：ロゴ独占 / 中：ポイント+キャッチ / 右：CTAボタン
   ※ 1560px をデザイン基準に clamp+vw で全要素を比例スケール
   ======================================== */
.gaten-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  background: #DAB802;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
  font-family: inherit;
  color: #000;
  line-height: 1.3;
  letter-spacing: normal;
  animation: gatenOverlayFadeIn 0.4s ease-out;
}
.gaten-overlay.is-hidden {
  display: none !important;
}
.gaten-overlay * {
  box-sizing: border-box;
  letter-spacing: normal !important;
}
@keyframes gatenOverlayFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 閉じるボタン */
.gaten-overlay__close {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: #000;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  z-index: 1;
}
.gaten-overlay__close:hover {
  opacity: 0.6;
}

/* 左：ロゴ独占ゾーン（下のみ余白） */
.gaten-overlay__logo-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(14px, 1.28vw, 32px) clamp(10px, 0.9vw, 22px);
}
.gaten-overlay__logo {
  flex: 0 0 auto;
  display: block;
  width: auto !important;
  height: clamp(52px, 6.15vw, 140px) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain;
}

/* 中：ポイント（上端絶対配置） + キャッチ（中央） */
.gaten-overlay__center {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(44px, 3.46vw, 80px) clamp(14px, 1.28vw, 32px) clamp(10px, 0.9vw, 22px) clamp(16px, 1.54vw, 38px);
  min-width: 0;
}
.gaten-overlay__points {
  position: absolute;
  top: 0;
  left: clamp(16px, 1.54vw, 38px);
  right: clamp(10px, 1vw, 24px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.77vw, 18px);
  list-style: none;
  z-index: 2;
}
.gaten-overlay__point {
  list-style: none;
  margin: 0;
  padding: clamp(6px, 0.64vw, 16px) clamp(14px, 1.54vw, 38px) clamp(6px, 0.64vw, 16px) clamp(32px, 3.08vw, 72px);
  position: relative;
  background: #000;
  border-radius: 0 0 clamp(6px, 0.51vw, 12px) clamp(6px, 0.51vw, 12px);
  font-size: clamp(14px, 1.54vw, 36px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
}
.gaten-overlay__point::before {
  content: "";
  position: absolute;
  left: clamp(8px, 1.03vw, 24px);
  top: 50%;
  width: clamp(16px, 1.67vw, 40px);
  height: clamp(16px, 1.67vw, 40px);
  margin-top: calc(clamp(16px, 1.67vw, 40px) / -2);
  border: clamp(1.5px, 0.19vw, 4px) solid #fff;
  border-radius: 50%;
  background: transparent;
}
.gaten-overlay__point::after {
  content: "";
  position: absolute;
  left: clamp(13px, 1.41vw, 34px);
  top: 50%;
  margin-top: calc(clamp(8px, 0.77vw, 18px) / -2);
  width: clamp(8px, 0.77vw, 18px);
  height: clamp(4px, 0.38vw, 9px);
  border-left: clamp(1.5px, 0.19vw, 4px) solid #fff;
  border-bottom: clamp(1.5px, 0.19vw, 4px) solid #fff;
  transform: rotate(-45deg);
}
.gaten-overlay__tagline {
  margin: 0;
  padding: 0;
  font-size: clamp(18px, 2.05vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 右：CTA 独占ゾーン */
.gaten-overlay__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.64vw, 16px);
  padding: 0 clamp(30px, 8.97vw, 200px);
  background: #000;
  color: #fff !important;
  font-weight: 700;
  font-size: clamp(16px, 1.67vw, 40px);
  text-decoration: none !important;
  transition: background 0.15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.gaten-overlay__cta:hover,
.gaten-overlay__cta:focus,
.gaten-overlay__cta:active {
  background: #222;
  color: #fff !important;
  text-decoration: none !important;
}
.gaten-overlay__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.6s ease;
}
.gaten-overlay__cta:hover::before,
.gaten-overlay__cta:focus::before {
  left: 120%;
}
.gaten-overlay__cta-arrow {
  font-size: 0.9em;
  line-height: 1;
}

/* SP（小画面） — clamp+vw で 400〜600px 間で連続スケール */
@media (max-width: 600px) {
  .gaten-overlay__logo-wrap { padding: 0 clamp(5px, 1.17vw, 7px) clamp(4px, 1vw, 6px); }
  .gaten-overlay__logo { height: clamp(30px, 7vw, 42px) !important; width: auto !important; }
  .gaten-overlay__center {
    padding:
      clamp(22px, 5vw, 30px)
      clamp(5px, 1.17vw, 7px)
      clamp(6px, 1.5vw, 9px)
      clamp(6px, 1.5vw, 9px);
  }
  .gaten-overlay__points {
    gap: clamp(2px, 0.5vw, 3px);
    left: clamp(6px, 1.5vw, 9px);
    right: clamp(3px, 0.67vw, 4px);
    flex-wrap: nowrap;
  }
  .gaten-overlay__point {
    font-size: clamp(9px, 1.83vw, 11px);
    padding:
      clamp(2px, 0.5vw, 3px)
      clamp(5px, 1.33vw, 8px)
      clamp(2px, 0.5vw, 3px)
      clamp(14px, 3.17vw, 19px);
  }
  .gaten-overlay__point::before {
    width: clamp(9px, 1.83vw, 11px);
    height: clamp(9px, 1.83vw, 11px);
    margin-top: calc(clamp(9px, 1.83vw, 11px) / -2);
    left: clamp(3px, 0.83vw, 5px);
    border-width: 1.3px;
  }
  .gaten-overlay__point::after {
    left: clamp(5px, 1.17vw, 7px);
    width: clamp(3.5px, 0.83vw, 5px);
    height: clamp(2px, 0.42vw, 2.5px);
    margin-top: calc(clamp(2px, 0.42vw, 2.5px) * -0.75);
    border-width: 1.3px;
  }
  .gaten-overlay__tagline { font-size: clamp(11px, 2.17vw, 13px); }
  .gaten-overlay__cta {
    padding: 0 clamp(8px, 2vw, 12px);
    font-size: clamp(11px, 2.17vw, 13px);
    gap: clamp(2px, 0.67vw, 4px);
  }
  .gaten-overlay__close {
    top: 2px;
    right: 3px;
    width: clamp(14px, 2.83vw, 17px);
    height: clamp(14px, 2.83vw, 17px);
    font-size: clamp(12px, 2.33vw, 14px);
  }
}

/* 超小画面（<400px）— 375px 等の狭い端末だけ個別に縮小（600pxルール上書き） */
@media (max-width: 400px) {
  .gaten-overlay__logo-wrap { padding: 0 5px 5px; }
  .gaten-overlay__logo { height: 24px !important; width: auto !important; }
  .gaten-overlay__center { padding: 22px 5px 7px 6px; }
  .gaten-overlay__points { gap: 2px; left: 6px; right: 3px; }
  .gaten-overlay__point { font-size: 8px; padding: 1.5px 5px 1.5px 14px; }
  .gaten-overlay__point::before { width: 8px; height: 8px; margin-top: -4px; left: 3px; border-width: 1.2px; }
  .gaten-overlay__point::after { left: 5px; width: 3px; height: 1.5px; margin-top: -1.2px; border-width: 1.2px; }
  .gaten-overlay__tagline { font-size: 9px; }
  .gaten-overlay__cta { padding: 0 7px; font-size: 9px; gap: 2px; }
  .gaten-overlay__close { width: 13px; height: 13px; font-size: 11px; right: 3px; }
}