/* イベントLP共通スタイル */

/* body の grid 制約は JSP 内 <style> で上書き済み */
.event-main {
  display: block;
}

/* ラッパー */
.event-wrap {
  width: 100%; /* SP: トップ画像フルワイド */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .event-wrap {
    max-width: calc(var(--width-pc-inner) * 1px);
    width: calc(var(--width-pc-inner) / var(--width-pc) * 100%);
  }
}

.event-wrapper {
  background-color: #fff;
}

/* 全コンテンツを縦並び・中央寄せ */
.event-wrapper > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 01_top（先頭のpicture）はフルワイド */
.event-wrapper > div > picture:first-child {
  display: block;
  width: 100%;
  line-height: 0;
}

.event-wrapper > div > picture:first-child img {
  display: block;
  width: 100%;
  height: auto;
}

/* 01_top より下の picture はやや小さく */
.event-wrapper > div > picture:not(:first-child) {
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  line-height: 0;
}

@media (max-width: 767.98px) {
  .event-wrapper > div > picture:not(:first-child) {
    margin-bottom: 30px;
  }
}

.event-wrapper > div > picture:not(:first-child) img {
  display: block;
  width: 100%;
  height: auto;
}

/* 06_promo: 01_top と同様のフルワイド表示 */
.event-wrapper > div > picture.event-promo-full {
  width: 100%;
}

/* 白の余白 */
.white-gap {
  background-color: #fff;
  width: 100%;
  height: 50px;
}

@media (max-width: 767.98px) {
  .white-gap {
    height: 30px;
  }
}

/* 最下部の余白（小） */
.white-gap--bottom {
  background-color: #fff;
  width: 100%;
  height: 20px;
}

/* CTAコンテナ（画像の下にボタンを配置） */
.cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.cta-container > picture {
  display: block;
  line-height: 0;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .cta-container > picture {
    margin-bottom: 20px;
  }
}

.cta-container > picture img {
  display: block;
  height: auto;
  width: 100%;
}

/* CTAボタン（画像の下に通常フローで配置） */
.cta-overlay {
  display: block;
  cursor: pointer;
  margin-top: 12px;
  width: 85%; /* 「当日はご予約不要です。」のテキスト幅に合わせる */
}

.cta-overlay img {
  display: block;
  height: auto;
  width: 100%;
}

/* LINEコンテナ（画像の上にオーバーレイで配置） */
/* 幅は cta-container(70%) × cta-overlay(85%) = 59.5% に合わせる */
.line-container {
  position: relative;
  display: block;
  width: 59.5%;
  margin-left: auto;
  margin-right: auto;
}

.line-container > picture {
  display: block;
  line-height: 0;
}

.line-container > picture img {
  display: block;
  height: auto;
  width: 100%;
}

/* LINEオーバーレイリンク */
.line-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: block;
  cursor: pointer;
  bottom: 20%;
}

.line-overlay img {
  display: block;
  height: auto;
  width: auto;
}