/* ================================================================
   single-journey.css — 好奇心の軌跡 個別投稿スタイル
   tamai-shi.com / swell_child テーマ
   ================================================================ */

/* SWELL標準のタイトルバナー・パンくずと二重表示になるため非表示 */
#top_title_area,
#breadcrumb {
  display: none !important;
}

/* ── 変数（style.css の :root と連携） ── */
:root {
  --journey-bg:     #ffffff;
  --journey-cream:  #f8f5ef;
  --journey-ink:    #1e1e1c;
  --journey-ink-m:  #4a4a44;
  --journey-ink-d:  rgba(30,30,28,0.38);
  --journey-gold:   #c4a96a;
  --journey-gold-d: rgba(196,169,106,0.25);
  --journey-max:    760px;
}

/* ================================================================
   ページ全体
================================================================ */
.journey-single {
  background: var(--journey-bg);
  min-height: 100vh;
}

/* SWELL デフォルトの post_content 上余白をリセット */
.journey-single .journey-content > .post_content,
.journey-single .journey-content {
  margin-top: 0 !important;
}

/* ================================================================
   ① パンくず（✦ ブランド仕様）
================================================================ */
.journey-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 16px clamp(20px, 6vw, 80px);
  background: transparent;
  font-family: 'IM Fell English SC', serif;
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  color: var(--journey-ink-d);
  border-bottom: 1px solid rgba(196,169,106,0.15);
}
.journey-breadcrumb__link {
  color: rgba(240,237,232,0.60);
  text-decoration: none;
  transition: color 0.25s ease;
}
.journey-breadcrumb__link:hover { color: var(--journey-gold); }
.journey-breadcrumb__sep {
  color: var(--journey-gold);
  font-size: 0.44rem;
  opacity: 0.65;
  line-height: 1;
}
.journey-breadcrumb__current {
  color: rgba(240,237,232,0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* ================================================================
   ② ヘッダービジュアル
================================================================ */
.journey-header {
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* 星アニメーション（JS生成の .journey-star を制御） */
.journey-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.journey-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: journey-twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes journey-twinkle {
  0%, 100% { opacity: var(--min-op, 0.04); transform: scale(0.8); }
  50%       { opacity: var(--max-op, 0.28); transform: scale(1.2); }
}

/* アイキャッチ */
.journey-eyecatch {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  overflow: hidden;
  z-index: 2;
}
.journey-eyecatch__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.journey-eyecatch__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 底部フェード */
.journey-eyecatch::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(30,30,28,0.68) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
/* SVG コーナーフレーム */
.journey-eyecatch__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
/* ダッシュ枠線の描画アニメーション */
.jef-border {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: jef-draw 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}
/* コーナー L字 のフェードイン */
.jef-corners {
  opacity: 0;
  animation: jef-appear 0.4s ease 0.5s forwards;
}
@keyframes jef-draw   { to { stroke-dashoffset: 0; } }
@keyframes jef-appear { to { opacity: 1; } }

/* タイトル・日付 */
.journey-header__meta {
  position: relative;
  z-index: 5;
  max-width: calc(var(--journey-max) + clamp(20px, 6vw, 80px) * 2);
  margin: 0 auto;
  padding: clamp(40px,6vh,68px) clamp(20px,6vw,80px) clamp(48px,8vh,80px);
  text-align: center;
}
.journey-header__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.journey-header__eyebrow-line {
  width: 24px;
  height: 1px;
  display: block;
}
.journey-header__eyebrow-line:first-child {
  background: linear-gradient(90deg, transparent, var(--journey-gold));
}
.journey-header__eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--journey-gold), transparent);
}
.journey-header__eyebrow-text {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.79rem;
  letter-spacing: 0.32em;
  color: var(--journey-gold);
}
.journey-header__title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif !important;
  font-size: clamp(1.45rem, 3.5vw, 2.6rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.92) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.journey-header__date {
  display: block;
  font-family: 'IM Fell English SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.28);
}

/* ================================================================
   ③ 本文エリア（可読性優先・白背景）
================================================================ */
.journey-content {
  max-width: var(--journey-max);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) clamp(20px, 6vw, 48px);
  background: var(--journey-bg);
}

/* 段落 */
.journey-content p {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 2.5;
  color: var(--journey-ink-m);
  margin-bottom: 2em;
}

/* h2 */
.journey-content h2 {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif !important;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  color: var(--journey-ink) !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(196,169,106,0.3) !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
  margin: clamp(48px,8vh,80px) 0 28px !important;
  line-height: 1.65 !important;
  background: transparent !important;
}

/* h3 */
.journey-content h3 {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif !important;
  font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  color: var(--journey-ink) !important;
  padding-left: 16px !important;
  border-left: 2px solid var(--journey-gold) !important;
  margin: clamp(36px,6vh,60px) 0 20px !important;
  line-height: 1.65 !important;
  background: transparent !important;
}

/* 本文内の画像・figure */
.journey-content figure {
  max-width: 480px !important;
  margin: clamp(36px,6vh,60px) auto !important;
}
.journey-content figure img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 65vh !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto;
}
.journey-content figcaption {
  font-family: 'IM Fell English SC', serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.22em !important;
  color: var(--journey-ink-d) !important;
  text-align: center !important;
  margin-top: 12px !important;
  line-height: 1.9 !important;
}
/* 単独 img（figure なし） */
.journey-content > img,
.journey-content p > img {
  width: 100%;
  height: auto;
  display: block;
  margin: clamp(32px,5vh,52px) 0;
}

/* 本文内リンク */
.journey-content a {
  color: var(--journey-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--journey-gold-d);
  transition: text-decoration-color 0.3s ease;
}
.journey-content a:hover {
  text-decoration-color: var(--journey-gold);
}

/* 引用 */
.journey-content blockquote {
  margin: clamp(32px,5vh,52px) 0 !important;
  padding: 20px 24px !important;
  border-left: 2px solid var(--journey-gold) !important;
  background: var(--journey-cream) !important;
  font-style: normal !important;
}
.journey-content blockquote p {
  font-size: clamp(0.88rem,1.4vw,1rem) !important;
  color: var(--journey-ink-m) !important;
  margin-bottom: 0 !important;
}

/* リスト */
.journey-content ul,
.journey-content ol {
  padding-left: 1.6em;
  margin-bottom: 2em;
}
.journey-content li {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 2.2;
  color: var(--journey-ink-m);
  margin-bottom: 0.4em;
}

/* ページ分割 */
.journey-content__pages {
  display: flex;
  gap: 12px;
  margin-top: clamp(40px,6vh,60px);
}
.journey-content__pages a {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.70rem;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  border: 1px solid rgba(196,169,106,0.4);
  text-decoration: none;
  color: var(--journey-ink-m);
  transition: background 0.3s, color 0.3s;
}
.journey-content__pages a:hover {
  background: var(--journey-gold);
  color: #fff;
  border-color: var(--journey-gold);
}

/* ================================================================
   ④ タグフッター
================================================================ */
.journey-post-footer {
  max-width: var(--journey-max);
  margin: 0 auto;
  padding: 0 clamp(20px,6vw,48px) clamp(40px,6vh,60px);
}
.journey-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.journey-tags__mark {
  color: var(--journey-gold);
  font-size: 0.50rem;
  line-height: 1;
}
.journey-tags a {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--journey-ink-d);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(196,169,106,0.3);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.journey-tags a:hover {
  border-color: var(--journey-gold);
  color: var(--journey-gold);
}

/* ================================================================
   ⑤ JOMOちゃん吹き出し CTA
================================================================ */
.journey-jomo {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: calc(var(--journey-max) + clamp(20px,6vw,48px) * 2);
  margin: 0 auto;
  padding: clamp(40px,7vh,70px) clamp(20px,6vw,80px);
  background: var(--journey-bg);
  border-top: 1px solid rgba(196,169,106,0.15);
}
.journey-jomo__figure {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  margin: 0;
}
.journey-jomo__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.journey-jomo__bubble {
  position: relative;
  background: var(--journey-cream);
  border: 1px solid rgba(196,169,106,0.32);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* 吹き出し三角（左向き） */
.journey-jomo__bubble::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: -9px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid rgba(196,169,106,0.32);
}
.journey-jomo__bubble::after {
  content: '';
  position: absolute;
  bottom: 21px;
  left: -7px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--journey-cream);
}
.journey-jomo__text {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--journey-ink);
  margin: 0 !important;
  line-height: 1.8;
}
.journey-jomo__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--journey-ink-m);
  padding: 8px 18px;
  border: 1px solid rgba(196,169,106,0.5);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  width: fit-content;
}
.journey-jomo__link:hover {
  background: var(--journey-gold);
  color: #fff;
  border-color: var(--journey-gold);
}
.journey-jomo__link-arrow {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
  transition: width 0.3s ease;
  display: block;
}
.journey-jomo__link-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.journey-jomo__link:hover .journey-jomo__link-arrow { width: 24px; }

/* JOMOちゃん画像なし時（吹き出し三角を非表示） */
.journey-jomo:not(:has(.journey-jomo__figure)) .journey-jomo__bubble::before,
.journey-jomo:not(:has(.journey-jomo__figure)) .journey-jomo__bubble::after {
  display: none;
}

/* ================================================================
   ⑥ 前後ナビゲーション
================================================================ */
.journey-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent;
  border-top: 1px solid rgba(196,169,106,0.18);
  padding: clamp(36px,6vh,60px) clamp(20px,6vw,80px);
}
.journey-nav__prev { justify-self: start; }
.journey-nav__next { justify-self: end; }
.journey-nav__divider {
  color: rgba(196,169,106,0.45);
  font-size: 0.55rem;
  padding: 0 clamp(12px, 2vw, 28px);
  line-height: 1;
}
.journey-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  max-width: 260px;
}
.journey-nav__prev .journey-nav__link { align-items: flex-start; }
.journey-nav__next .journey-nav__link { align-items: flex-end; text-align: right; }
.journey-nav__dir {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.57rem;
  letter-spacing: 0.28em;
  color: var(--journey-gold);
  display: block;
}
.journey-nav__title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: clamp(0.74rem, 1.3vw, 0.9rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(240,237,232,0.65);
  line-height: 1.65;
  transition: color 0.3s ease;
}
.journey-nav__link:hover .journey-nav__title { color: rgba(240,237,232,0.95); }

/* ================================================================
   レスポンシブ
================================================================ */
@media (max-width: 680px) {
  .journey-eyecatch {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
  }
  .journey-header__title {
    font-size: 1.4rem !important;
  }
  /* JOMOを縦並び */
  .journey-jomo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .journey-jomo__bubble::before,
  .journey-jomo__bubble::after { display: none; }
  /* ナビを縦並び */
  .journey-nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .journey-nav__divider { display: none; }
  .journey-nav__next .journey-nav__link {
    align-items: flex-start;
    text-align: left;
  }
  .journey-breadcrumb__current { max-width: 160px; }
}

@media (max-width: 420px) {
  .journey-header__eyebrow-line { width: 16px; }
}