/* ======================================
   Editor / Front 共通パーツ
====================================== */

.luna-cols {
  display: flex;
  gap: 24px;
  margin: 24px 0;
}

.luna-col {
  flex: 1 1 0;
  min-width: 0;
}

.luna-cols--2 .luna-col {
  width: calc((100% - 24px) / 2);
}

.luna-cols--3 .luna-col {
  width: calc((100% - 48px) / 3);
}

.luna-cols--4 .luna-col {
  width: calc((100% - 72px) / 4);
}

.luna-media {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 24px 0;
}

.luna-media__image {
  width: 42%;
}

.luna-media__image img {
  display: block;
  width: 100%;
  height: auto;
}

.luna-media__body {
  width: 58%;
}

.luna-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 4px solid #006aa9;
  border-radius: 999px;
  background: #006aa9;
  color: #fff !important;
  text-decoration: none!important;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.luna-btn:hover {
  background: #fff;
  color: #006aa9 !important;
  border: 4px solid #006aa9;
}

.luna-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #006aa9;
  font-weight: 700;
  text-decoration: none;
}
.luna-pdf-wrap {
  margin: 24px 0;
}

.luna-pdf::before {
  content: "PDF";
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: #d33;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.luna-youtube {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 24px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.luna-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

.luna-alert {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #f0c36d;
  border-radius: 12px;
  background: #fff8e8;
}

.luna-alert__title {
  margin: 0 0 8px;
  font-weight: 700;
  color: #9a6500;
}

.luna-cta {
  margin: 32px 0;
  padding: 32px 20px;
  border-radius: 16px;
  background: #f3f8fb;
  text-align: center;
}

.luna-cta__inner {
  max-width: 800px;
  margin: 0 auto;
}

.luna-cta__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.4;
}

.luna-cta__text {
  margin: 0 0 20px;
}

.luna-linkcard {
  display: block;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #d9e3ea;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.luna-linkcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.luna-linkcard__label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5f9;
  color: #006aa9;
  font-size: 12px;
  font-weight: 700;
}

.luna-linkcard__title {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

.luna-linkcard__text {
  display: block;
  color: #555;
}

/* editor内で余白が見やすいように */
.mce-content-body .luna-cols,
.mce-content-body .luna-media,
.mce-content-body .luna-alert,
.mce-content-body .luna-cta,
.mce-content-body .luna-linkcard,
.mce-content-body .luna-youtube {
  outline: 1px dashed rgba(0, 106, 169, 0.18);
  outline-offset: 4px;
}

/* ==============================
   エディター内だけ見やすくする
============================== */
.mce-content-body .luna-youtube {
  background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  min-height: 220px;
}

.mce-content-body .luna-youtube iframe {
  display: none !important;
}

.mce-content-body .luna-youtube::before {
  content: "YouTube動画";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ff0000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.mce-content-body .luna-youtube::after {
  content: "動画URLが設定されています";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .luna-cols {
    flex-direction: column;
    gap: 16px;
  }

  .luna-media {
    flex-direction: column;
    gap: 16px;
  }

  .luna-media__image,
  .luna-media__body,
  .luna-cols--2 .luna-col,
  .luna-cols--3 .luna-col,
  .luna-cols--4 .luna-col {
    width: 100%;
  }

  .luna-cta {
    padding: 24px 16px;
  }

  .luna-cta__title {
    font-size: 20px;
  }
}
/* ==============================
   Tabs
============================== */
.luna-tabs {
  margin: 24px 0;
}

.luna-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #d9e3ea;
}

.luna-tabs__button {
  appearance: none;
  border: 0;
  background: #eef5f9;
  color: #006aa9;
  padding: 10px 16px;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.luna-tabs__button:hover {
  background: #dcecf5;
}

.luna-tabs__button.is-active {
  background: #006aa9;
  color: #fff;
}

.luna-tabs__panels {
  border: 1px solid #d9e3ea;
  border-top: 0;
  padding: 20px;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

.luna-tabs__panel {
  display: none;
}

.luna-tabs__panel.is-active {
  display: block;
}

/* editor内で見やすく */
.mce-content-body .luna-tabs {
  outline: 1px dashed rgba(0, 106, 169, 0.18);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .luna-tabs__nav {
    gap: 6px;
  }

  .luna-tabs__button {
    width: 100%;
    border-radius: 10px;
    text-align: left;
  }

  .luna-tabs__panels {
    border-top: 1px solid #d9e3ea;
    border-radius: 12px;
  }
}

/* ==============================
   エディター内ではタブ内容を全部表示
============================== */
.mce-content-body .luna-tabs__nav {
  display: none;
}

.mce-content-body .luna-tabs__panels {
  border: 0;
  padding: 0;
  background: transparent;
}

.mce-content-body .luna-tabs__panel {
  display: block !important;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #d9e3ea;
  border-radius: 12px;
  background: #fff;
}

.mce-content-body .luna-tabs__panel::before {
  display: block;
  margin-bottom: 10px;
  color: #006aa9;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  content: "タブ内容";
}

/* ==============================
   タブ内 編集用タイトル
============================== */
.luna-tabs__panel-title {
  display: none;
  margin: 0 0 12px;
  color: #006aa9;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.luna-tabs__panel-content > *:first-child {
  margin-top: 0;
}

/* エディター内ではタイトルも見せる */
.mce-content-body .luna-tabs__panel-title {
  display: block;
}

.mce-content-body .luna-tabs__panel-title::before {
  content: "タブタイトル";
  display: block;
  margin-bottom: 6px;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ==============================
   Timeline
============================== */
.luna-timeline {
  --timeline-color: #006aa9;
  margin: 32px 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.luna-timeline--yoshida { --timeline-color: #f19a00; }
.luna-timeline--fujinomiya { --timeline-color: #4b8fd6; }
.luna-timeline--gotemba { --timeline-color: #43b06f; }
.luna-timeline--subashiri { --timeline-color: #f04d4d; }

.luna-timeline__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}

.luna-timeline__day-ja {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #111;
}

.luna-timeline__day-en {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #111;
}

.luna-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.luna-timeline__list li{
  margin-bottom:0!important;
}

.luna-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 84px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

/* 余白は margin ではなく padding にする */
.luna-timeline__item + .luna-timeline__item {
  padding-top: 22px;
}

/* liごとに縦線を描く */
.luna-timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 4px;
  transform: translateX(-50%);
  background: var(--timeline-color);
  z-index: 0;
}

/* 最初は上に線を出さない */
.luna-timeline__item:first-child::before {
  top: 9px;
}

/* is-end は丸の中心で止める */
.luna-timeline__item.is-end::before {
  bottom: calc(100% - 9px);
}

.luna-timeline__item + .luna-timeline__item.is-end::before {
  bottom: calc(100% - 31px);
}

.luna-timeline__rail {
  position: relative;
  width: 24px;
  min-height: 18px;
  z-index: 1;
}

.luna-timeline__dot {
  position: absolute;
  top: 0;
  left: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--timeline-color);
  transform: translateX(-50%);
}

.luna-timeline__time {
  margin: 0;
  padding-top: 0;
  color: var(--timeline-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  min-width: 0;
  word-break: keep-all;
}

.luna-timeline__content {
  min-width: 0;
}

.luna-timeline__title {
  margin: 0;
  color: #111;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.luna-timeline__text {
  margin-top: 8px;
}

.luna-timeline__text p {
  margin: 0;
  color: #111;
  font-size: 15px;
  line-height: 1.8;
}

.luna-timeline__text p + p {
  margin-top: 4px;
}

/* ===== エディター表示用 ===== */
.mce-content-body .luna-timeline {
  outline: 1px dashed rgba(0, 106, 169, 0.18);
  outline-offset: 6px;
}

/* ==============================
   SP
============================== */
@media (max-width: 767px) {

  .luna-timeline {
    margin: 24px 0;
  }

  .luna-timeline__head {
    gap: 8px;
    margin-bottom: 18px;
  }

  .luna-timeline__day-ja {
    font-size: 26px;
  }

  .luna-timeline__day-en {
    font-size: 13px;
  }

  .luna-timeline__item {
    grid-template-columns: 20px 64px minmax(0, 1fr);
    column-gap: 12px;
  }

  .luna-timeline__item + .luna-timeline__item {
    padding-top: 18px;
  }

  .luna-timeline__item::before {
    left: 10px;
    width: 3px;
  }

  .luna-timeline__item:first-child::before {
    top: 7px;
  }

  .luna-timeline__item.is-end::before {
    bottom: calc(100% - 7px);
  }

  .luna-timeline__item + .luna-timeline__item.is-end::before {
    bottom: calc(100% - 25px);
  }

  .luna-timeline__rail {
    width: 20px;
    min-height: 14px;
  }

  .luna-timeline__dot {
    left: 10px;
    width: 14px;
    height: 14px;
  }

  .luna-timeline__time {
    font-size: 16px;
    line-height: 1.1;
  }

  .luna-timeline__title {
    font-size: 16px;
  }

  .luna-timeline__text p {
    font-size: 14px;
    line-height: 1.7;
  }
}