/* ============================================================
   おやこんぱす — Design Components
   Mobile-first shared components + PC components + v3 additions
   ============================================================ */

/* ============================================================
   MOBILE COMPONENTS (.oc-*)
   ============================================================ */

/* ---------- Buttons ---------- */
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  border-radius: var(--oc-r-pill);
  font-weight: 700; font-family: var(--oc-font-display);
  font-size: var(--oc-text-md);
  transition: transform .1s, box-shadow .15s, background .15s;
  text-align: center;
  min-height: 48px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.oc-btn:active { transform: translateY(1px); }
.oc-btn--cta { background: var(--oc-accent-500); color: #fff; box-shadow: var(--oc-shadow-cta); }
.oc-btn--cta:hover { background: var(--oc-accent-600); }
.oc-btn--primary { background: var(--oc-primary-500); color: #fff; box-shadow: var(--oc-shadow-2); }
.oc-btn--ghost { background: var(--oc-white); color: var(--oc-primary-600); border: 1.5px solid var(--oc-primary-200); }
.oc-btn--full { width: 100%; }
.oc-btn--lg { padding: 16px 24px; font-size: var(--oc-text-lg); min-height: 56px; }
.oc-btn--sm { padding: 8px 14px; font-size: var(--oc-text-sm); min-height: 36px; }

/* ---------- Section heading ---------- */
.oc-section { padding: 28px 16px; }
.oc-section--paper2 { background: var(--oc-paper-2); }
.oc-section--ink { background: var(--oc-primary-700); color: var(--oc-paper); }
.oc-section--white { background: var(--oc-white); }
.oc-shead { margin-bottom: 16px; }
.oc-shead__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--oc-font-en);
  font-size: 11px; letter-spacing: .14em; color: var(--oc-primary-500);
  margin-bottom: 6px;
}
.oc-shead__eyebrow::before {
  content: ""; width: 16px; height: 1.5px; background: currentColor; display: inline-block;
}
.oc-shead h2 {
  font-size: var(--oc-text-2xl);
  letter-spacing: .02em;
}
.oc-shead p { color: var(--oc-ink-500); font-size: var(--oc-text-sm); margin-top: 6px; }

/* ---------- Cards: Hotel ---------- */
.oc-hotel-card {
  background: var(--oc-white);
  border-radius: var(--oc-r-lg);
  overflow: hidden;
  box-shadow: var(--oc-shadow-1);
  border: 1px solid var(--oc-ink-200);
  position: relative;
}
.oc-hotel-card__media {
  position: relative; aspect-ratio: 16/10; background: var(--oc-ink-100);
  display: grid; place-items: center;
  overflow: hidden;
}
.oc-hotel-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.oc-hotel-card__score {
  position: absolute; top: 10px; left: 10px;
  background: var(--oc-white); border: 2px solid var(--oc-primary-500);
  border-radius: var(--oc-r-pill);
  padding: 4px 10px 4px 8px; display: flex; align-items: center; gap: 6px;
  font-family: var(--oc-font-display); font-weight: 700;
  box-shadow: var(--oc-shadow-1);
}
.oc-hotel-card__score b { color: var(--oc-primary-600); font-size: 16px; line-height: 1; }
.oc-hotel-card__score small { font-size: 10px; color: var(--oc-ink-500); font-weight: 500; }
.oc-hotel-card__price-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--oc-accent-500); color: #fff;
  font-weight: 700; font-size: 11px;
  padding: 4px 10px; border-radius: var(--oc-r-pill);
  box-shadow: var(--oc-shadow-cta);
}
.oc-hotel-card__body { padding: 12px 14px 14px; }
.oc-hotel-card__area {
  font-size: 11px; color: var(--oc-primary-600); font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.oc-hotel-card__name {
  font-family: var(--oc-font-display); font-weight: 700;
  font-size: var(--oc-text-md); line-height: 1.45; margin-top: 4px;
  color: var(--oc-ink-900);
}
.oc-hotel-card__features {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.oc-feat-chip {
  font-size: 10px; padding: 3px 8px;
  background: var(--oc-primary-50); color: var(--oc-primary-700);
  border-radius: var(--oc-r-pill);
  display: inline-flex; align-items: center; gap: 3px;
}
.oc-feat-chip--off { background: var(--oc-ink-100); color: var(--oc-ink-400); text-decoration: line-through; text-decoration-color: var(--oc-ink-300); }
.oc-feat-chip--accent { background: var(--oc-accent-50); color: var(--oc-accent-700); }
.oc-hotel-card__price {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--oc-ink-200);
  display: flex; align-items: baseline; justify-content: space-between;
}
.oc-hotel-card__price small { font-size: 10px; color: var(--oc-ink-500); }
.oc-hotel-card__price b { font-family: var(--oc-font-display); font-size: 20px; color: var(--oc-coral-700); }

/* ---------- Spot card ---------- */
.oc-spot-card {
  background: var(--oc-white);
  border-radius: var(--oc-r-lg);
  overflow: hidden;
  box-shadow: var(--oc-shadow-1);
  border: 1px solid var(--oc-ink-200);
}
.oc-spot-card__media {
  aspect-ratio: 4/3; background: linear-gradient(135deg, var(--oc-sky-100), var(--oc-primary-100));
  position: relative; display: grid; place-items: center;
  overflow: hidden;
}
.oc-spot-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.oc-spot-card__cat {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,.95); color: var(--oc-primary-700);
  font-size: 10px; padding: 3px 8px; border-radius: var(--oc-r-pill); font-weight: 700;
}
.oc-spot-card__body { padding: 10px 12px 12px; }
.oc-spot-card__title { font-family: var(--oc-font-display); font-weight: 700; font-size: 14px; line-height: 1.4; }
.oc-spot-card__meta { display: flex; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--oc-ink-500); align-items: center; }

/* ---------- Article card ---------- */
.oc-article-card {
  display: grid; grid-template-columns: 100px 1fr; gap: 10px;
  background: var(--oc-white); padding: 10px;
  border-radius: var(--oc-r-md); border: 1px solid var(--oc-ink-200);
}
.oc-article-card__media {
  width: 100px; height: 75px; border-radius: 8px; background: var(--oc-ink-100);
  display: grid; place-items: center; font-size: 10px; color: var(--oc-ink-400);
  position: relative; overflow: hidden;
}
.oc-article-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.oc-article-card__cat {
  display: inline-block; font-size: 10px; color: var(--oc-primary-600);
  font-weight: 700; background: var(--oc-primary-50);
  padding: 2px 6px; border-radius: 4px;
}
.oc-article-card__title { font-family: var(--oc-font-display); font-size: 13px; line-height: 1.45; margin-top: 4px; font-weight: 700; }
.oc-article-card__date { font-size: 10px; color: var(--oc-ink-400); margin-top: 4px; }

/* ---------- Score widget ---------- */
.oc-score-widget {
  background: linear-gradient(135deg, var(--oc-primary-700), var(--oc-primary-500));
  color: #fff; border-radius: var(--oc-r-xl);
  padding: 18px; position: relative; overflow: hidden;
}
.oc-score-widget__compass {
  position: absolute; right: -30px; top: -30px; width: 160px; height: 160px;
  opacity: .14; color: #fff;
}
.oc-score-widget__num {
  font-family: var(--oc-font-en); font-size: 48px; line-height: 1; font-weight: 700;
  display: flex; align-items: baseline; gap: 4px;
}
.oc-score-widget__num small { font-size: 18px; opacity: .7; }
.oc-score-widget__lbl { font-size: 11px; letter-spacing: .14em; opacity: .85; font-family: var(--oc-font-en); }

/* ---------- Search panel ---------- */
.oc-search-panel {
  background: var(--oc-white);
  border-radius: var(--oc-r-xl);
  padding: 16px;
  box-shadow: var(--oc-shadow-3);
  border: 1px solid var(--oc-ink-200);
}
.oc-search-panel__field {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--oc-ink-200);
  border-radius: var(--oc-r-md);
  padding: 10px 12px; background: var(--oc-paper);
  margin-bottom: 8px;
}
.oc-search-panel__field svg { width: 18px; height: 18px; color: var(--oc-primary-500); flex-shrink: 0; }
.oc-search-panel__field span { font-size: 13px; color: var(--oc-ink-700); }

/* ---------- Filter chips ---------- */
.oc-filter-row {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 16px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.oc-filter-row::-webkit-scrollbar { display: none; }
.oc-filter-chip {
  flex-shrink: 0;
  padding: 7px 12px; border-radius: var(--oc-r-pill);
  background: var(--oc-white); border: 1.5px solid var(--oc-ink-200);
  font-size: 12px; color: var(--oc-ink-700); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.oc-filter-chip.is-active { background: var(--oc-primary-500); color: #fff; border-color: var(--oc-primary-500); }

/* ---------- Breadcrumbs ---------- */
.oc-crumbs {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--oc-ink-500);
  padding: 10px 16px;
}
.oc-crumbs a { color: var(--oc-primary-600); }
.oc-crumbs span:not(:last-child)::after { content: "\203A"; margin-left: 6px; color: var(--oc-ink-300); }

/* ---------- Article body (single.php) ---------- */
.oc-article-body { padding: 0 16px; }
.oc-article-body p { font-size: 15px; line-height: 1.95; margin: 16px 0; }
.oc-article-body h2 {
  font-size: 22px; margin: 32px 0 12px;
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--oc-primary-50), transparent);
  border-left: 5px solid var(--oc-primary-500);
  border-radius: 4px;
}
.oc-article-body h3 {
  font-size: 17px; margin: 24px 0 10px;
  display: flex; align-items: center; gap: 8px;
  color: var(--oc-primary-700);
}
.oc-article-body h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--oc-accent-500); flex-shrink: 0;
}

/* CTA inline (affiliate) */
.oc-cta-affil {
  background: linear-gradient(135deg, #FFFCF5, #FFF6E8);
  border: 2px solid var(--oc-accent-300);
  border-radius: var(--oc-r-lg);
  padding: 16px;
  margin: 24px 0;
  position: relative;
}
.oc-cta-affil__lbl {
  position: absolute; top: -10px; left: 16px;
  background: var(--oc-accent-500); color: #fff;
  padding: 3px 10px; border-radius: var(--oc-r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.oc-cta-affil h4,
.oc-cta-affil__title {
  display: block;
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 4px 0 8px;
  line-height: 1.5;
  color: var(--oc-ink-900);
}
.oc-cta-affil p { font-size: 12px; color: var(--oc-ink-700); margin-bottom: 12px; }

/* Author note */
.oc-author-note {
  background: var(--oc-paper-2);
  border-radius: var(--oc-r-lg);
  padding: 14px;
  display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  margin: 16px 0;
  border: 1px dashed var(--oc-primary-200);
}
.oc-author-note__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--oc-primary-200); display: grid; place-items: center;
  color: var(--oc-primary-700); font-weight: 700;
}
.oc-author-note__name { font-size: 12px; font-weight: 700; color: var(--oc-primary-700); }
.oc-author-note__text { font-family: var(--oc-font-hand); font-size: 14px; line-height: 1.7; margin-top: 2px; }

/* Sticky CTA bar */
.oc-cta-bar {
  position: sticky; bottom: 0;
  background: var(--oc-white);
  border-top: 1px solid var(--oc-ink-200);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center;
  box-shadow: 0 -6px 18px rgba(0,0,0,.05);
  z-index: 40;
}
.oc-cta-bar__price small { display: block; font-size: 9px; color: var(--oc-ink-500); }
.oc-cta-bar__price b { font-family: var(--oc-font-display); font-size: 18px; color: var(--oc-coral-700); }
.oc-cta-bar .oc-btn { flex: 1; padding: 13px 12px; min-height: 46px; }

/* Amenity grid */
.oc-amenity-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.oc-amenity {
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200);
  border-radius: var(--oc-r-md);
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.oc-amenity svg { width: 24px; height: 24px; color: var(--oc-primary-500); margin: 0 auto 4px; display: block; }
.oc-amenity__lbl { font-size: 10px; line-height: 1.3; color: var(--oc-ink-700); font-weight: 600; }
.oc-amenity--on { border-color: var(--oc-primary-300); background: var(--oc-primary-50); }
.oc-amenity--off { opacity: .42; }
.oc-amenity--off::after {
  content: "\306A\3057"; position: absolute; top: 4px; right: 4px;
  font-size: 8px; color: var(--oc-ink-400);
}

/* Age recommend */
.oc-age-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.oc-age-cell {
  background: var(--oc-white); border: 1px solid var(--oc-ink-200);
  border-radius: var(--oc-r-md); padding: 10px 6px; text-align: center;
}
.oc-age-cell__age { font-size: 11px; color: var(--oc-ink-500); font-weight: 700; }
.oc-age-cell__stars { color: var(--oc-accent-500); font-size: 14px; letter-spacing: 1px; margin-top: 4px; line-height: 1; }
.oc-age-cell__stars span { color: var(--oc-ink-200); }

/* Gallery */
.oc-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 100px 100px;
  gap: 4px; height: 200px; overflow: hidden; border-radius: var(--oc-r-lg);
}
.oc-gallery > :first-child { grid-row: span 2; }
.oc-gallery > div {
  background: linear-gradient(135deg, var(--oc-sky-100), var(--oc-primary-100));
  display: grid; place-items: center; overflow: hidden;
}
.oc-gallery > div img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Ad slot */
.oc-ad-slot {
  border: 1px dashed var(--oc-ink-300); background: var(--oc-paper-2);
  border-radius: var(--oc-r-md); padding: 14px;
  text-align: center; color: var(--oc-ink-500);
  font-size: 11px; margin: 16px 0;
}

/* ============================================================
   V3 COMPONENTS
   ============================================================ */

/* ---------- Editor memo ---------- */
.oc-editor-memo {
  position: relative;
  background: linear-gradient(135deg, #FFFCF5, #FFF6E8);
  border: 1.5px solid var(--oc-accent-300);
  border-radius: var(--oc-r-lg);
  padding: 18px 20px 18px 76px;
  margin: 20px 0;
}
.oc-editor-memo__lbl {
  position: absolute; top: -10px; left: 70px;
  background: var(--oc-accent-500); color: #fff;
  padding: 3px 10px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  font-family: var(--oc-font-display);
}
.oc-editor-memo h4,
.oc-editor-memo__title {
  display: block;
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--oc-ink-900);
  line-height: 1.5;
}
.oc-editor-memo p { font-size: 13px; line-height: 1.85; color: var(--oc-ink-700); }
.oc-editor-memo__author {
  margin-top: 10px; font-size: 11px; color: var(--oc-primary-700); font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}

/* ---------- Feature tags ---------- */
.oc-feature-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0;
}
.oc-feature-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--oc-primary-50);
  color: var(--oc-primary-700);
  border: 1px solid var(--oc-primary-100);
}
.oc-feature-tag--accent {
  background: var(--oc-accent-50); color: var(--oc-accent-700); border-color: var(--oc-accent-300);
}
.oc-feature-tag--coral {
  background: var(--oc-coral-100); color: var(--oc-coral-700); border-color: var(--oc-coral-100);
}
.oc-feature-tag svg { width: 12px; height: 12px; }

/* ---------- Spot memo (6 items) ---------- */
.oc-spot-memo {
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200);
  border-radius: var(--oc-r-lg);
  overflow: hidden;
  margin: 20px 0;
}
.oc-spot-memo__head {
  background: var(--oc-primary-700);
  color: #fff;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--oc-font-display); font-weight: 700; font-size: 14px;
}
.oc-spot-memo__head svg { width: 18px; height: 18px; }
.oc-spot-memo__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
.oc-spot-memo__item {
  padding: 14px 16px;
  border-right: 1px dashed var(--oc-ink-200);
  border-bottom: 1px dashed var(--oc-ink-200);
}
.oc-spot-memo__item:nth-child(2n) { border-right: 0; }
.oc-spot-memo__item:nth-last-child(-n+2) { border-bottom: 0; }
.oc-spot-memo__lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--oc-ink-500); font-weight: 700;
  margin-bottom: 4px;
}
.oc-spot-memo__lbl svg { width: 12px; height: 12px; color: var(--oc-primary-500); }
.oc-spot-memo__val {
  font-size: 14px; font-weight: 700; color: var(--oc-ink-900);
  font-family: var(--oc-font-display);
}

/* ---------- TOC ---------- */
.oc-toc {
  background: var(--oc-paper-2);
  border: 1px solid var(--oc-ink-200);
  border-radius: var(--oc-r-lg);
  padding: 18px 20px;
  margin: 24px 0;
}
.oc-toc__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--oc-font-display); font-weight: 700; font-size: 14px;
  color: var(--oc-primary-700);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--oc-primary-100);
}
.oc-toc ol { counter-reset: toc; }
.oc-toc li {
  counter-increment: toc;
  padding: 5px 0 5px 28px;
  position: relative;
  font-size: 13px;
  line-height: 1.6;
}
.oc-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 6px;
  font-family: var(--oc-font-en);
  font-size: 10px; font-weight: 700;
  color: var(--oc-accent-500);
  letter-spacing: .05em;
}
.oc-toc li a { color: var(--oc-ink-700); }
.oc-toc li a:hover { color: var(--oc-primary-600); text-decoration: underline; }
.oc-toc li ol { margin-top: 4px; margin-left: 8px; counter-reset: toc-sub; }
.oc-toc li ol li { counter-increment: toc-sub; font-size: 12px; color: var(--oc-ink-500); padding-left: 22px; }
.oc-toc li ol li::before {
  content: counter(toc) "-" counter(toc-sub);
  top: 5px;
  color: var(--oc-ink-400);
}

/* ---------- Score breakdown ---------- */
.oc-score-breakdown {
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200);
  border-radius: var(--oc-r-lg);
  padding: 18px;
  margin: 18px 0;
}
.oc-score-breakdown__title {
  font-family: var(--oc-font-display); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.oc-score-breakdown__row {
  display: grid; grid-template-columns: 110px 1fr 40px;
  gap: 10px; align-items: center;
  padding: 6px 0;
  font-size: 12px;
}
.oc-score-breakdown__row span:first-child { color: var(--oc-ink-700); font-weight: 600; }
.oc-score-breakdown__row span:last-child { font-family: var(--oc-font-display); font-weight: 700; color: var(--oc-primary-600); text-align: right; }
.oc-score-breakdown__bar {
  height: 8px; background: var(--oc-ink-100); border-radius: 99px; overflow: hidden;
}
.oc-score-breakdown__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--oc-primary-400), var(--oc-primary-600));
  border-radius: 99px;
}

/* ---------- Hotel intro ---------- */
.oc-hotel-intro {
  background: linear-gradient(135deg, var(--oc-sky-100), var(--oc-primary-50));
  border-radius: var(--oc-r-lg);
  padding: 20px 22px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
}
.oc-hotel-intro__lbl {
  font-family: var(--oc-font-en);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--oc-primary-600);
  margin-bottom: 6px;
}
.oc-hotel-intro p {
  font-size: 13.5px; line-height: 1.95; color: var(--oc-ink-900);
}

/* ---------- Area hero ---------- */
.p-area-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--oc-r-xl);
  padding: 36px 28px;
  background: var(--oc-primary-700);
  color: #fff;
}
.p-area-hero__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--oc-primary-700), var(--oc-primary-500));
  opacity: .92;
  z-index: 0;
}
.p-area-hero__bg video,
.p-area-hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .3;
}
.p-area-hero__inner { position: relative; z-index: 1; }
.p-area-hero h1,
.p-area-hero h2 {
  font-family: var(--oc-font-display);
  font-size: 30px; line-height: 1.4; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.p-area-hero p { opacity: .9; margin-top: 8px; font-size: 13px; }

/* ---------- List row ---------- */
.oc-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--oc-ink-200);
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.oc-list-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--oc-shadow-1);
  border-color: var(--oc-primary-300);
}
.oc-list-row__badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px;
  letter-spacing: .02em;
}
.oc-list-row__body { flex: 1 1 auto; min-width: 0; }
.oc-list-row__title {
  font-family: var(--oc-font-display);
  font-weight: 700; font-size: 14px; color: var(--oc-ink-900);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-list-row__meta {
  margin-top: 3px;
  font-size: 11px; color: var(--oc-ink-500);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- Spot L-card ---------- */
.oc-spot-lcard {
  display: grid;
  grid-template-columns: 52px 1fr;
  background: #fff;
  border: 1px solid var(--oc-ink-200);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.oc-spot-lcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--oc-shadow-2);
  border-color: var(--oc-primary-300);
}
.oc-spot-lcard__rail {
  position: relative;
  display: grid; place-items: center;
  color: #fff;
}
.oc-spot-lcard__rail::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 14px);
  pointer-events: none;
}
.oc-spot-lcard__rail svg { width: 22px; height: 22px; opacity: .95; position: relative; z-index: 1; }
.oc-spot-lcard__body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.oc-spot-lcard__cat {
  font-family: var(--oc-font-display);
  font-size: 11px; font-weight: 900;
  letter-spacing: .08em;
  color: var(--oc-primary-600);
}
.oc-spot-lcard__title {
  font-family: var(--oc-font-display);
  font-weight: 700; font-size: 16px;
  color: var(--oc-ink-900);
  line-height: 1.4;
  margin-top: 3px;
}
.oc-spot-lcard__meta {
  font-size: 12px; color: var(--oc-ink-500);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.oc-spot-lcard__desc { display: none; }
.oc-spot-lcard__tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Hero video ---------- */
.oc-hero-video {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.oc-hero-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.oc-hero-video__tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(251,248,242,.55) 0%, rgba(251,248,242,.75) 60%, rgba(241,232,208,.85) 100%);
}

/* ---------- Fixed FABs ---------- */
.oc-fabs {
  position: fixed;
  right: 14px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  z-index: 40;
  pointer-events: none;
}
.oc-fabs > * { pointer-events: auto; }
.oc-fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200);
  box-shadow: 0 6px 18px rgba(17,74,63,.15);
  display: grid; place-items: center;
  color: var(--oc-primary-600);
  transition: transform .15s, box-shadow .15s, background .15s;
  position: relative;
  cursor: pointer;
}
.oc-fab:hover { transform: translateY(-2px); background: var(--oc-primary-500); color: #fff; }
.oc-fab svg { display: block; width: 20px; height: 20px; }
.oc-fab span {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--oc-ink-900); color: #fff;
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.oc-fab:hover span { opacity: 1; }

@media (max-width: 767px) {
  .oc-fabs {
    right: 10px; bottom: calc(var(--oc-bottom-nav-h, 0px) + 16px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .oc-fab { width: 44px; height: 44px; }
  .oc-fab span { display: none; }
}

/* ============================================================
   PC COMPONENTS (.ocpc-*)
   ============================================================ */

/* ---------- PC Header ---------- */
.ocpc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,242,.96);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--oc-ink-200);
  display: none;
}
.ocpc-header__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 36px;
  padding: 14px 32px;
}
.ocpc-header__logo { display: inline-flex; align-items: center; gap: 10px; }
.ocpc-header__logo img { height: 30px; width: auto; }
.ocpc-header__nav {
  display: flex; gap: 22px; flex: 1; margin-left: 12px;
  white-space: nowrap;
  overflow: visible;
}
.ocpc-header__nav a {
  font-size: 14px; font-weight: 700; color: var(--oc-ink-700);
  padding: 6px 0; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ocpc-header__nav a:hover { color: var(--oc-primary-500); }
.ocpc-header__search {
  display: flex; align-items: center; gap: 6px;
  background: var(--oc-white); border: 1px solid var(--oc-ink-200);
  border-radius: 99px; padding: 4px 14px 4px 6px;
  font-size: 12px; color: var(--oc-ink-500);
  width: 200px; transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0; margin: 0;
}
.ocpc-header__search:hover { border-color: var(--oc-primary-400); }
.ocpc-header__search:focus-within {
  border-color: var(--oc-primary-400);
  box-shadow: 0 0 0 3px rgba(31,122,102,.12);
}
.ocpc-header__search-input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-size: 12px; color: var(--oc-ink-800);
  padding: 6px 0; font-family: inherit;
}
.ocpc-header__search-input::placeholder { color: var(--oc-ink-500); }
.ocpc-header__search-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: var(--oc-primary-50); color: var(--oc-primary-600);
  cursor: pointer; padding: 0;
  transition: background .15s, color .15s;
}
.ocpc-header__search-btn:hover { background: var(--oc-primary-500); color: #fff; }
.ocpc-header__cta {
  background: var(--oc-accent-500); color: #fff;
  padding: 9px 18px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px -4px rgba(255,143,64,.5);
  transition: all .15s;
  flex-shrink: 0;
}
.ocpc-header__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(255,143,64,.6); }

/* ---------- Mega menu ---------- */
.ocpc-nav-item { position: relative; display: inline-flex; align-items: center; }
.ocpc-nav-item > a {
  font-size: 14px; font-weight: 700; color: var(--oc-ink-700);
  padding: 8px 0; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em;
}
.ocpc-nav-item > a:hover { color: var(--oc-primary-500); }
.ocpc-nav-item > a.is-active { color: var(--oc-primary-600); }

/* メガメニューポータル（body直下に出力、position:fixed） */
.ocpc-mega-portal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: var(--oc-white);
  border-top: 1px solid var(--oc-ink-200);
  box-shadow: 0 18px 40px -10px rgba(17, 74, 63, .22);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
  z-index: 9998;
}
.ocpc-mega-portal.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .2s, transform .2s, visibility 0s 0s;
}
.ocpc-mega__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 28px 32px 24px;
}
.ocpc-mega__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--oc-ink-200);
}
.ocpc-mega__head h3,
.ocpc-mega__title { font-size: 20px; font-family: var(--oc-font-display); font-weight: 700; margin: 0; }
.ocpc-mega__all {
  font-size: 12px; color: var(--oc-primary-600); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1.5px solid var(--oc-primary-200); border-radius: 99px;
}
.ocpc-mega__all:hover { background: var(--oc-primary-500); color: #fff; border-color: var(--oc-primary-500); }
.ocpc-mega__regions {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 22px;
}
.ocpc-mega__region h5,
.ocpc-mega__region-title {
  font-size: 11px; font-family: var(--oc-font-display); font-weight: 700;
  color: var(--oc-primary-700);
  letter-spacing: .05em;
  padding-bottom: 6px; margin: 0 0 8px;
  border-bottom: 1.5px solid var(--oc-primary-100);
}
.ocpc-mega__region ul li { margin: 2px 0; }
.ocpc-mega__region ul li a {
  display: block; padding: 4px 2px; font-size: 12.5px; color: var(--oc-ink-700);
  border-radius: 4px;
  transition: color .1s, background .1s;
}
.ocpc-mega__region ul li a:hover { color: var(--oc-primary-600); background: var(--oc-primary-50); }
.ocpc-mega__foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px dashed var(--oc-ink-200);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ocpc-mega__foot a {
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 99px;
  background: var(--oc-paper-2); color: var(--oc-ink-700);
  display: inline-flex; align-items: center; gap: 4px;
}
.ocpc-mega__foot a:hover { background: var(--oc-accent-500); color: #fff; }

/* ---------- Dropdown menu (子育ての知恵・おやこんぱすとは) ---------- */
.ocpc-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200);
  border-radius: 0 0 var(--oc-r-lg) var(--oc-r-lg);
  box-shadow: 0 18px 30px -18px rgba(17, 74, 63, .28);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
  z-index: 60;
  padding: 8px 0;
}
.ocpc-nav-item.is-open .ocpc-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s, transform .18s, visibility 0s 0s;
}
.ocpc-dropdown ul { list-style: none; margin: 0; padding: 0; }
.ocpc-dropdown ul li a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--oc-ink-700);
  font-weight: 500;
  transition: color .1s, background .1s;
}
.ocpc-dropdown ul li a:hover {
  color: var(--oc-primary-600);
  background: var(--oc-primary-50);
}
.ocpc-dropdown.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s, transform .18s, visibility 0s 0s;
}
/* サブカテゴリ（子カテゴリ）行 */
.ocpc-dropdown__sub { list-style: none; margin: 0; padding: 0; }
.ocpc-dropdown .ocpc-dropdown__sub li a {
  padding: 5px 20px 5px 34px;
  font-size: 12px;
  font-weight: 400;
  color: var(--oc-ink-500);
}
.ocpc-dropdown .ocpc-dropdown__sub li a::before {
  content: "└ ";
  font-size: 10px;
  color: var(--oc-ink-300);
  margin-right: 2px;
}
.ocpc-dropdown .ocpc-dropdown__sub li a:hover {
  color: var(--oc-primary-600);
  background: var(--oc-primary-50);
}

/* ---------- PC Container ---------- */
.ocpc-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- PC Sections ---------- */
.ocpc-section { padding: 56px 32px; }
.ocpc-section--paper2 { background: var(--oc-paper-2); }
.ocpc-section--dark { background: var(--oc-primary-800); color: var(--oc-paper); }
.ocpc-section__inner { max-width: 1200px; margin: 0 auto; }
.ocpc-shead { margin-bottom: 28px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ocpc-shead__title h2 { font-size: 30px; font-family: var(--oc-font-display); letter-spacing: .02em; }
.ocpc-shead__eyebrow {
  font-family: var(--oc-font-en); font-size: 11px; letter-spacing: .14em;
  color: var(--oc-primary-500); margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ocpc-shead__eyebrow::before { content: ""; width: 20px; height: 1.5px; background: currentColor; }
.ocpc-shead__more {
  font-size: 13px; font-weight: 700; color: var(--oc-primary-600);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- Grid utilities ---------- */
.ocpc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ocpc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ocpc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- PC Detail layout ---------- */
.ocpc-detail {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 360px;
  gap: 40px; padding: 28px 32px 80px; align-items: start;
}
.ocpc-detail__aside {
  position: sticky; top: 90px;
  background: var(--oc-white);
  border: 1px solid var(--oc-ink-200); border-radius: 20px;
  padding: 22px; box-shadow: var(--oc-shadow-2);
}

/* ---------- PC Footer ---------- */
.ocpc-footer {
  background: var(--oc-primary-800); color: var(--oc-paper);
  padding: 56px 32px 28px;
  position: relative;
  overflow: hidden;
  display: none;
}
.ocpc-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--oc-primary-500) 0%, var(--oc-accent-500) 50%, var(--oc-coral-500) 100%);
}
.ocpc-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  position: relative;
}
.ocpc-footer__brand img { filter: brightness(0) invert(1); margin-bottom: 14px; }
.ocpc-footer__tagline { font-size: 12px; opacity: .78; line-height: 1.9; margin-bottom: 20px; }
.ocpc-footer h4 {
  font-size: 12px; font-family: var(--oc-font-display);
  margin-bottom: 18px; color: var(--oc-paper);
  letter-spacing: .04em;
  position: relative; padding-bottom: 8px;
}
.ocpc-footer h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 20px; height: 2px; background: var(--oc-accent-500);
}
.ocpc-footer ul li {
  margin-bottom: 10px; font-size: 12px; opacity: .8;
  transition: all .15s;
}
.ocpc-footer ul li:hover { opacity: 1; padding-left: 3px; color: var(--oc-accent-300); }
.ocpc-footer__copy {
  max-width: 1200px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11px; opacity: .6;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  position: relative;
}
.ocpc-footer__copy-links { display: flex; gap: 18px; }
.ocpc-footer__copy-links a:hover { color: #fff; opacity: 1; }

/* ---------- PC Filter sidebar ---------- */
.ocpc-filter-sidebar {
  background: var(--oc-white); border: 1px solid var(--oc-ink-200);
  border-radius: 16px; padding: 20px;
  position: sticky; top: 90px;
}
.ocpc-filter-group { padding: 14px 0; border-bottom: 1px solid var(--oc-ink-200); }
.ocpc-filter-group:last-child { border-bottom: 0; }
.ocpc-filter-group h5 { font-size: 12px; font-family: var(--oc-font-display); color: var(--oc-primary-700); margin-bottom: 10px; }
.ocpc-filter-group label { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; align-items: center; }

/* ---------- Category tiles PC ---------- */
.ocpc-cat-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.ocpc-cat-tile {
  background: var(--oc-white); border: 1px solid var(--oc-ink-200);
  border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: transform .2s, box-shadow .2s;
}
.ocpc-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--oc-shadow-2); }
.ocpc-cat-tile__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--oc-primary-50); color: var(--oc-primary-600);
  display: grid; place-items: center;
}
.ocpc-cat-tile__ttl { font-family: var(--oc-font-display); font-weight: 700; font-size: 15px; }
.ocpc-cat-tile__sub { font-size: 11px; color: var(--oc-ink-500); }

/* ============================================================
   RESPONSIVE: Show PC components on wider screens
   ============================================================ */
@media (min-width: 960px) {
  .ocpc-header { display: block; }
  .ocpc-footer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-hero-video video,
  .p-area-hero video { display: none; }
}

/* ============================================================
   Mobile bottom nav（SP のみ表示、4タブ）
   SWELL の .sp-sticky-footer（hotel archive / area tax のみ）が
   表示されるページではこちらを抑止する。
   ============================================================ */
.oc-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  height: 58px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-top: 1px solid var(--oc-ink-200);
  box-shadow: 0 -2px 12px rgba(31,42,46,.05);
}
.oc-bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 58px;
  margin: 0; padding: 0;
  list-style: none;
}
.oc-bottom-nav__item { margin: 0; padding: 0; position: relative; }
.oc-bottom-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: var(--oc-ink-500);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .15s;
}
.oc-bottom-nav__link svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oc-bottom-nav__link:hover,
.oc-bottom-nav__link:focus-visible {
  color: var(--oc-primary-600);
}
.oc-bottom-nav__link.is-active {
  color: var(--oc-primary-600);
}
.oc-bottom-nav__link.is-active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--oc-primary-500);
  border-radius: 0 0 3px 3px;
}

@media (max-width: 767px) {
  .oc-bottom-nav { display: block; }
  :root { --oc-bottom-nav-h: 58px; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* SWELL の SP 固定フッター（hotel archive / area）が出るページでは非表示 */
body:has(.sp-sticky-footer) .oc-bottom-nav { display: none !important; }
body:has(.sp-sticky-footer) { padding-bottom: 0 !important; }

/* ============================================================
   改行コントロール：PC では br、SP では無視（自然折返し）
   ============================================================ */
@media (max-width: 767px) {
  .oc-br-pc { display: none; }
}