/* ==========================================================================
   HEADER
   ========================================================================== */
.yk-cam-global-header,
.yk-cam-global-header * {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif !important;
  box-sizing: border-box !important;
}

.yk-cam-global-header {
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid #c8ebc0 !important;
  padding: 16px 24px !important;
}

.yk-cam-global-header__inner {
  max-width: 1080px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.yk-cam-global-header__logo {
  font-weight: 700 !important;
  color: #1a3a1a !important;
  text-decoration: none !important;
  font-size: 20px !important;
  letter-spacing: 0.05em !important;
  margin-right: auto !important;
  text-align: left !important;
}

.yk-cam-global-header__btn {
  color: #ffffff !important;
  background: #2BBF34 !important;
  padding: 8px 20px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  transition: opacity 0.2s !important;
  flex-shrink: 0 !important;
}

.yk-cam-global-header__btn:hover {
  opacity: 0.85 !important;
}

@media (max-width: 600px) {
  .yk-cam-global-header {
    padding: 14px 16px !important;
  }
  .yk-cam-global-header__inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .yk-cam-global-header__logo {
    font-size: 18px !important;
    margin-right: auto !important;
  }
  .yk-cam-global-header__btn {
    font-size: 14px !important;
    padding: 6px 12px !important;
  }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
.yk-cam-root, .yk-cam-root * {
  box-sizing: border-box !important;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}
.yk-cam-root { width: 100% !important; background: #ffffff !important; }

.yk-cam-root p,
.yk-cam-root div,
.yk-cam-root span,
.yk-cam-root li,
.yk-cam-root a,
.yk-cam-root td,
.yk-cam-root th {
  font-size: 18px !important;
}

/* ==========================================================================
   WHITE SECTION
   ========================================================================== */
.yk-cam-dark {
  background: #ffffff !important;
  padding: 72px 0 !important;
  width: 100% !important;
}

.yk-cam-header {
  text-align: center !important;
  margin-bottom: 52px !important;
  padding: 0 20px !important;
}
.yk-cam-eyebrow {
  display: inline-block !important;
  font-size: 18px !important;
  letter-spacing: 0.25em !important;
  color: #2BBF34 !important;
  border: 1px solid rgba(43,191,52,0.5) !important;
  padding: 4px 20px !important;
  border-radius: 20px !important;
  margin-bottom: 20px !important;
}
.yk-cam-title {
  font-size: clamp(26px, 3.5vw, 44px) !important;
  font-weight: 700 !important;
  color: #1a3a1a !important;
  letter-spacing: 0.08em !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}
.yk-cam-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
.yk-cam-line .l {
  width: 60px !important;
  height: 1px !important;
  background: rgba(43,191,52,0.4) !important;
}
.yk-cam-line .d {
  width: 7px !important;
  height: 7px !important;
  background: #2BBF34 !important;
  transform: rotate(45deg) !important;
}
.yk-cam-lead {
  font-size: 20px !important;
  color: #555 !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 10px !important;
}
.yk-cam-note {
  font-size: 18px !important;
  color: #2BBF34 !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  border: 1px solid rgba(43,191,52,0.4) !important;
  display: inline-block !important;
  padding: 4px 16px !important;
  border-radius: 4px !important;
}

.yk-cam-main {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
}
@media (max-width: 768px) {
  .yk-cam-main {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }
}

.yk-cam-live {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #000 !important;
  aspect-ratio: 16 / 10 !important;
  border: 1px solid rgba(43,191,52,0.25) !important;
}
.yk-cam-live img,
.yk-cam-live iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.yk-cam-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(43,191,52,0.9) !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #fff !important;
}
.yk-cam-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #fff !important;
  animation: yk-blink 1.4s infinite !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
@keyframes yk-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.yk-cam-live-caption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  padding: 44px 16px 14px !important;
  pointer-events: none !important;
}

.yk-cam-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.yk-cam-place {
  font-size: 18px !important;
  color: #777 !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
.yk-cam-sub {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 700 !important;
  color: #1a3a1a !important;
  letter-spacing: 0.04em !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.yk-cam-body {
  font-size: 19px !important;
  color: #333 !important;
  line-height: 2 !important;
  margin: 0 !important;
}
.yk-cam-about {
  background: #f4fbf4 !important;
  border-left: 4px solid #2BBF34 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 20px !important;
}
.yk-cam-about-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2BBF34 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.08em !important;
}
.yk-cam-about-body {
  font-size: 18px !important;
  color: #444 !important;
  line-height: 2 !important;
  margin: 0 !important;
}

.yk-cam-diff {
  background: #f8f8f8 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
}
.yk-cam-diff-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #888 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 16px !important;
}
.yk-cam-diff-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.yk-cam-diff-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.yk-cam-diff-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.yk-cam-diff-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.yk-cam-diff-label {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a3a1a !important;
}
.yk-cam-diff-desc {
  font-size: 18px !important;
  color: #555 !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   NOTE BANNER
   ========================================================================== */
.yk-cam-note-banner {
  background: #1a4020 !important;
  padding: 32px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 100% !important;
}
@media (max-width: 680px) {
  .yk-cam-note-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 20px !important;
  }
}
.yk-cam-note-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}
.yk-cam-note-text {
  flex: 0 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.yk-cam-note-label {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
}
.yk-cam-note-desc {
  font-size: 18px !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.7 !important;
}
.yk-cam-note-btn {
  display: inline-block !important;
  background: #2BBF34 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
}
.yk-cam-note-btn:hover {
  background: #22a82a !important;
}

/* ==========================================================================
   GREEN SECTION
   ========================================================================== */
.yk-cam-green {
  background: #2BBF34 !important;
  padding: 72px 0 80px !important;
  width: 100% !important;
}
.yk-cam-green * { color: #fff !important; }

.yk-cam-section-label {
  max-width: 960px !important;
  margin: 0 auto 36px !important;
  padding: 0 20px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.2em !important;
  border-left: 4px solid rgba(255,255,255,0.7) !important;
}

.yk-cam-timeline {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
@media (max-width: 768px) {
  .yk-cam-timeline { padding: 0 20px !important; }
}

/* 成長ライン(タイムラインの縦の軸) */
.yk-cam-timeline-item {
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;
}
.yk-cam-timeline-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 14px !important;
  flex-shrink: 0 !important;
}
.yk-cam-timeline-line {
  width: 2px !important;
  flex: 1 1 auto !important;
  background: rgba(255,255,255,0.35) !important;
}
.yk-cam-timeline-item:first-child .yk-cam-timeline-line--top,
.yk-cam-timeline-item:last-child .yk-cam-timeline-line--bottom {
  visibility: hidden !important;
}
.yk-cam-timeline-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25) !important;
  flex-shrink: 0 !important;
  margin: 6px 0 !important;
}
.yk-cam-timeline-dot--upcoming {
  background: transparent !important;
  border: 2px dashed rgba(255,255,255,0.75) !important;
  box-shadow: none !important;
}
@media (max-width: 680px) {
  .yk-cam-timeline-rail { width: 10px !important; }
  .yk-cam-timeline-dot { width: 10px !important; height: 10px !important; }
}

/* カード本体：サムネを画面幅いっぱいに大きく表示するため縦積みに変更 */
.yk-cam-stage {
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.yk-cam-stage:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  transform: translateY(-2px) !important;
}
.yk-cam-stage--upcoming {
  background: #ffffff !important;
}

/* 動画サムネ：横幅いっぱい・16:9で大きく表示 */
.yk-cam-thumb--video {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  background: #000 !important;
}
.yk-cam-thumb--video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* 写真サムネ：横幅いっぱい・4:3で大きく表示、日付は写真に重ねるキャプション */
.yk-cam-thumb--photo-lg {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  position: relative !important;
  background: #d0f0d0 !important;
}
.yk-cam-thumb--photo-lg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.yk-cam-photo-caption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 40px 18px 14px !important;
}

/* 更新予定カード */
.yk-cam-thumb.yk-cam-lock {
  width: 100% !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 40px !important;
  opacity: 0.4 !important;
  background: #d0f0d0 !important;
}

.yk-cam-stage-info {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.yk-cam-stage-date {
  font-size: 18px !important;
  color: #2BBF34 !important;
  font-weight: bold !important;
  letter-spacing: 0.08em !important;
}
.yk-cam-stage-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.05em !important;
}
.yk-cam-stage-desc {
  font-size: 18px !important;
  color: #333 !important;
  line-height: 1.8 !important;
}
.yk-cam-stage--upcoming .yk-cam-stage-date {
  color: #2BBF34 !important;
}
.yk-cam-stage--upcoming .yk-cam-stage-name {
  color: #1a1a1a !important;
}
.yk-cam-stage--upcoming .yk-cam-stage-desc {
  color: #333 !important;
}